refactored view package

internal/view/authview/register_form.templ

@@ -0,0 +1,89 @@
+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="load delay:100ms, 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>
+}

internal/view/authview/register_page.templ

@@ -0,0 +1,28 @@
+package authview
+
+import "git.haelnorr.com/h/oslstats/internal/view/baseview"
+
+// Returns the login page
+templ RegisterPage(username string) {
+	@baseview.Layout("Register") {
+		<div class="max-w-100 mx-auto px-2">
+			<div class="mt-7 bg-mantle border border-surface1 rounded-xl">
+				<div class="p-4 sm:p-7">
+					<div class="text-center">
+						<h1
+							class="block text-2xl font-bold"
+						>Set your display name</h1>
+						<p
+							class="mt-2 text-sm text-subtext0"
+						>
+							Select your display name. This must be unique, and cannot be changed.
+						</p>
+					</div>
+					<div class="mt-5">
+						@RegisterFormForm(username)
+					</div>
+				</div>
+			</div>
+		</div>
+	}
+}