87 lines
2.3 KiB
Plaintext
87 lines
2.3 KiB
Plaintext
package form
|
|
|
|
templ RegisterForm(username, registerError string) {
|
|
{{ usernameErr := "Username is taken" }}
|
|
<form
|
|
hx-post="/register"
|
|
x-data={ templ.JSFuncCall(
|
|
"registerFormData", registerError, usernameErr,
|
|
).CallInline }
|
|
x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
|
|
>
|
|
<script>
|
|
function registerFormData(err, usernameErr) {
|
|
return {
|
|
submitted: false,
|
|
buttontext: "Register",
|
|
errorMessage: err,
|
|
errUsername: err === usernameErr ? true : false,
|
|
resetErr() {
|
|
this.errorMessage = "";
|
|
this.errUsername = false;
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
<div
|
|
class="grid gap-y-4"
|
|
>
|
|
<div>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="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"
|
|
value={ username }
|
|
@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>
|
|
<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>
|
|
}
|