210 lines
5.9 KiB
Plaintext
210 lines
5.9 KiB
Plaintext
package form
|
|
|
|
// Login Form. If loginError is not an empty string, it will display the
|
|
// contents of loginError to the user.
|
|
templ RegisterForm(registerError string) {
|
|
{{
|
|
usernameErr := "Username is taken"
|
|
passErrs := []string{
|
|
"Password exceeds maximum length of 72 bytes",
|
|
"Passwords do not match",
|
|
}
|
|
}}
|
|
<form
|
|
hx-post="/register"
|
|
x-data={ templ.JSFuncCall(
|
|
"registerFormData", registerError, usernameErr, passErrs,
|
|
).CallInline }
|
|
x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
|
|
>
|
|
<script>
|
|
function registerFormData(err, usernameErr, passErrs) {
|
|
return {
|
|
submitted: false,
|
|
buttontext: 'Register',
|
|
errorMessage: err,
|
|
errUsername: err === usernameErr ? true : false,
|
|
errPasswords: passErrs.includes(err) ? true : false,
|
|
resetErr() {
|
|
this.errorMessage = "";
|
|
this.errUsername = false;
|
|
this.errPasswords = false;
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
<div
|
|
class="grid gap-y-4"
|
|
>
|
|
<div>
|
|
<label
|
|
for="email"
|
|
class="block text-sm mb-2"
|
|
>Username</label>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
idnutanix="username"
|
|
name="username"
|
|
class="py-3 px-4 block w-full rounded-lg text-sm
|
|
focus:border-blue focus:ring-blue bg-base
|
|
disabled:opacity-50
|
|
disabled:pointer-events-none"
|
|
required
|
|
aria-describedby="username-error"
|
|
@input="resetErr()"
|
|
/>
|
|
<div
|
|
class="absolute inset-y-0 end-0
|
|
pointer-events-none pe-3 pt-3"
|
|
x-show="errUsername"
|
|
x-cloak
|
|
>
|
|
<svg
|
|
class="size-5 text-red"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8
|
|
4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0
|
|
0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1
|
|
1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<p
|
|
class="text-center text-xs text-red mt-2"
|
|
id="username-error"
|
|
x-show="errUsername"
|
|
x-cloak
|
|
x-text="if (errUsername) return errorMessage;"
|
|
></p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between items-center">
|
|
<label
|
|
for="password"
|
|
class="block text-sm mb-2"
|
|
>Password</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
class="py-3 px-4 block w-full rounded-lg text-sm
|
|
focus:border-blue focus:ring-blue bg-base
|
|
disabled:opacity-50 disabled:pointer-events-none"
|
|
required
|
|
aria-describedby="password-error"
|
|
@input="resetErr()"
|
|
/>
|
|
<div
|
|
class="absolute inset-y-0 end-0
|
|
pointer-events-none pe-3 pt-3"
|
|
x-show="errPasswords"
|
|
x-cloak
|
|
>
|
|
<svg
|
|
class="size-5 text-red"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8
|
|
4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0
|
|
0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1
|
|
1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex justify-between items-center">
|
|
<label
|
|
for="confirm-password"
|
|
class="block text-sm mb-2"
|
|
>Confirm Password</label>
|
|
</div>
|
|
<div class="relative">
|
|
<input
|
|
type="password"
|
|
id="confirm-password"
|
|
name="confirm-password"
|
|
class="py-3 px-4 block w-full rounded-lg text-sm
|
|
focus:border-blue focus:ring-blue bg-base
|
|
disabled:opacity-50 disabled:pointer-events-none"
|
|
required
|
|
aria-describedby="confirm-password-error"
|
|
@input="resetErr()"
|
|
/>
|
|
<div
|
|
class="absolute inset-y-0 end-0
|
|
pointer-events-none pe-3 pt-3"
|
|
x-show="errPasswords"
|
|
x-cloak
|
|
>
|
|
<svg
|
|
class="size-5 text-red"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8
|
|
4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0
|
|
0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1
|
|
1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p
|
|
class="text-center text-xs text-red mt-2"
|
|
id="password-error"
|
|
x-show="errPasswords"
|
|
x-cloak
|
|
x-text="if (errPasswords) return errorMessage;"
|
|
></p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="flex">
|
|
<input
|
|
id="remember-me"
|
|
name="remember-me"
|
|
type="checkbox"
|
|
class="shrink-0 mt-0.5 border-gray-200 rounded
|
|
text-blue focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div class="ms-3">
|
|
<label
|
|
for="remember-me"
|
|
class="text-sm"
|
|
>Remember me</label>
|
|
</div>
|
|
</div>
|
|
<button
|
|
x-bind:disabled="submitted"
|
|
x-text="buttontext"
|
|
type="submit"
|
|
class="w-full py-3 px-4 inline-flex justify-center items-center
|
|
gap-x-2 rounded-lg border border-transparent transition
|
|
bg-green hover:bg-green/75 text-mantle hover:cursor-pointer
|
|
disabled:bg-green/60 disabled:cursor-default"
|
|
></button>
|
|
</div>
|
|
</form>
|
|
}
|