changed registration to have blank username on first load

This commit is contained in:
2026-03-07 12:22:11 +11:00
parent 7b934295c6
commit 8b414ff7f0
2 changed files with 19 additions and 19 deletions

View File

@@ -24,19 +24,19 @@ templ RegisterFormForm(username string) {
this.isChecking = false;
this.isUnique = false;
},
enableSubmit() {
this.canSubmit = true;
},
enableSubmit() {
this.canSubmit = true;
},
handleSubmit() {
this.isSubmitting = true;
this.buttontext = 'Loading...';
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.';
this.buttontext = "Register";
this.errorMessage = "Request timed out. Please try again.";
}, 10000);
}
},
};
}
</script>
@@ -49,7 +49,7 @@ templ RegisterFormForm(username string) {
type="text"
id="username"
name="username"
x-bind:class="{
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,
@@ -60,19 +60,18 @@ templ RegisterFormForm(username string) {
value={ username }
@input="resetErr(); isEmpty = $el.value.trim() === ''; if(isEmpty) { errorMessage='Username is required'; isUnique=false; }"
hx-post="/htmx/isusernameunique"
hx-trigger="load delay:100ms, input changed delay:500ms"
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>
<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