updated stuff

internal/view/component/form/register.templ

@@ -0,0 +1,86 @@
+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>
+}