89 lines
3.2 KiB
Plaintext
89 lines
3.2 KiB
Plaintext
package authview
|
|
|
|
templ RegisterFormForm(username string) {
|
|
<form
|
|
hx-post="/register"
|
|
hx-swap="none"
|
|
x-data={ templ.JSFuncCall("registerFormData").CallInline }
|
|
@submit="handleSubmit()"
|
|
@htmx:after-request="if(submitTimeout) clearTimeout(submitTimeout); const redirect = $event.detail.xhr.getResponseHeader('HX-Redirect'); if(redirect) return; if(!$event.detail.successful) { isSubmitting=false; buttontext='Register'; if($event.detail.xhr.status === 409) { errorMessage='Username is already taken'; isUnique=false; } else { errorMessage='An error occurred. Please try again.'; } }"
|
|
>
|
|
<script>
|
|
function registerFormData() {
|
|
return {
|
|
canSubmit: false,
|
|
buttontext: "Register",
|
|
errorMessage: "",
|
|
isChecking: false,
|
|
isUnique: false,
|
|
isEmpty: true,
|
|
isSubmitting: false,
|
|
submitTimeout: null,
|
|
resetErr() {
|
|
this.errorMessage = "";
|
|
this.isChecking = false;
|
|
this.isUnique = false;
|
|
},
|
|
enableSubmit() {
|
|
this.canSubmit = true;
|
|
},
|
|
handleSubmit() {
|
|
this.isSubmitting = true;
|
|
this.buttontext = "Loading...";
|
|
// Set timeout for 10 seconds
|
|
this.submitTimeout = setTimeout(() => {
|
|
this.isSubmitting = false;
|
|
this.buttontext = "Register";
|
|
this.errorMessage = "Request timed out. Please try again.";
|
|
}, 10000);
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
<div
|
|
class="grid gap-y-4"
|
|
>
|
|
<div>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
x-bind:class="{
|
|
'py-3 px-4 block w-full rounded-lg text-sm bg-base disabled:opacity-50 disabled:pointer-events-none border-2 outline-none': true,
|
|
'border-overlay0 focus:border-blue': !isUnique && !errorMessage,
|
|
'border-green focus:border-green': isUnique && !isChecking && !errorMessage,
|
|
'border-red focus:border-red': errorMessage && !isChecking && !isSubmitting
|
|
}"
|
|
required
|
|
aria-describedby="username-error"
|
|
value={ username }
|
|
@input="resetErr(); isEmpty = $el.value.trim() === ''; if(isEmpty) { errorMessage='Username is required'; isUnique=false; }"
|
|
hx-post="/htmx/isusernameunique"
|
|
hx-trigger="input changed delay:500ms"
|
|
hx-swap="none"
|
|
@htmx:before-request="if($el.value.trim() === '') { isEmpty=true; return; } isEmpty=false; isChecking=true; isUnique=false; errorMessage=''"
|
|
@htmx:after-request="isChecking=false; if($event.detail.successful) { isUnique=true; canSubmit=true; } else if($event.detail.xhr.status === 409) { errorMessage='Username is already taken'; isUnique=false; canSubmit=false; }"
|
|
/>
|
|
<p
|
|
class="text-center text-xs text-red mt-2"
|
|
id="username-error"
|
|
x-show="errorMessage && !isSubmitting"
|
|
x-cloak
|
|
x-text="errorMessage"
|
|
></p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
x-bind:disabled="isEmpty || !isUnique || isChecking || isSubmitting"
|
|
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>
|
|
}
|