Refactored alpinejs in forms for better maintainability

view/component/form/confirmpass.templ

@@ -1,22 +1,27 @@
 package form
 
-import "fmt"
-
 templ ConfirmPassword(err string) {
-	{{
-	xdata := fmt.Sprintf(
-		"{ errMsg: '%s'}",
-		err,
-	)
-	}}
 	<form
 		hx-post="/reauthenticate"
-		x-data="{ submitted: false, buttontext: 'Confirm' }"
+		x-data={ templ.JSFuncCall(
+                "confirmPassData", err,
+                ).CallInline }
 		x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
 	>
+		<script>
+            function usernameComponent(err) {
+                return {
+                    submitted: false,
+                    buttontext: 'Confirm', 
+                    err: err,
+                    reset() {
+                        this.err = "";
+                    },
+                };
+            }
+        </script>
 		<div
 			class="grid gap-y-4"
-			x-data={ xdata }
 		>
 			<div class="mt-5">
 				<div class="relative">
@@ -30,6 +35,7 @@ templ ConfirmPassword(err string) {
 						placeholder="Confirm password"
 						required
 						aria-describedby="password-error"
+						@input="reset()"
 					/>
 					<div
 						class="absolute inset-y-0 end-0 
@@ -52,7 +58,8 @@ templ ConfirmPassword(err string) {
                                 1 0 1 0 0 2 1 1 0 0 0 0-2z"
 							></path>
 						</svg>
-					</div>
+					</div> - change username
+					- confirm password
 				</div>
 				<p
 					class="text-center text-xs text-red mt-2"

view/component/form/loginform.templ

@@ -1,31 +1,34 @@
 package form
 
-import "fmt"
-
 // Login Form. If loginError is not an empty string, it will display the
 // contents of loginError to the user.
 // If loginError is "Username or password incorrect" it will also show
 // error icons on the username and password field
 templ LoginForm(loginError string) {
-	{{
-	errCreds := "false"
-	if loginError == "Username or password incorrect" {
-		errCreds = "true"
-	}
-	xdata := fmt.Sprintf(
-		"{credentialError: %s, errorMessage: '%s'}",
-		errCreds,
-		loginError,
-	)
-	}}
+	{{ credErr := "Username or password incorrect" }}
 	<form
 		hx-post="/login"
-		x-data="{ submitted: false, buttontext: 'Login' }"
+		x-data={ templ.JSFuncCall(
+                "loginFormData", loginError, credErr,
+                ).CallInline }
 		x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
 	>
+		<script>
+            function loginFormData(err, credError) {
+                return {
+                    submitted: false,
+                    buttontext: 'Login',
+                    errorMessage: err, 
+                    credentialError: err === credError ? true : false,
+                    resetErr() {
+                        this.errorMessage = "";
+                        this.credentialError = false;
+                    },
+                };
+            }
+        </script>
 		<div
 			class="grid gap-y-4"
-			x-data={ xdata }
 		>
 			<!-- Form Group -->
 			<div>
@@ -44,6 +47,7 @@ templ LoginForm(loginError string) {
                         disabled:pointer-events-none"
 						required
 						aria-describedby="username-error"
+						@input="resetErr()"
 					/>
 					<div
 						class="absolute inset-y-0 end-0 
@@ -93,6 +97,7 @@ templ LoginForm(loginError string) {
                         disabled:opacity-50 disabled:pointer-events-none"
 						required
 						aria-describedby="password-error"
+						@input="resetErr()"
 					/>
 					<div
 						class="absolute inset-y-0 end-0 

view/component/form/registerform.templ

@@ -1,36 +1,41 @@
 package form
 
-import "fmt"
-
 // Login Form. If loginError is not an empty string, it will display the
 // contents of loginError to the user.
 templ RegisterForm(registerError string) {
 	{{
-	errUsername := "false"
-	errPasswords := "false"
-	if registerError == "Username is taken" {
-		errUsername = "true"
-	} else if registerError == "Passwords do not match" ||
-		registerError == "Password exceeds maximum length of 72 bytes" {
-		errPasswords = "true"
+	usernameErr := "Username is taken"
+	passErrs := []string{
+		"Password exceeds maximum length of 72 bytes",
+		"Passwords do not match",
 	}
-	xdata := fmt.Sprintf(
-		"{errUsername: %s, errPasswords: %s, errorMessage: '%s'}",
-		errUsername,
-		errPasswords,
-		registerError,
-	)
 	}}
 	<form
 		hx-post="/register"
-		x-data="{ submitted: false, buttontext: 'Login' }"
+		x-data={ templ.JSFuncCall(
+                "registerFormData", registerError, usernameErr, passErrs,
+                ).CallInline }
 		x-on:htmx:xhr:loadstart="submitted=true;buttontext='Loading...'"
 	>
+		<script>
+            function registerFormData(err, usernameErr, passErrs) {
+                return {
+                    submitted: false,
+                    buttontext: 'Register',
+                    errorMessage: err, 
+                    errUsername: err === usernameErr ? true : false, 
+                    errPasswords: passErrs.includes(err) ? true : false,
+                    resetErr() {
+                        this.errorMessage = "";
+                        this.errUsername = false;
+                        this.errPasswords = false;
+                    },
+                };
+            }
+        </script>
 		<div
 			class="grid gap-y-4"
-			x-data={ xdata }
 		>
-			<!-- Form Group -->
 			<div>
 				<label
 					for="email"
@@ -47,6 +52,7 @@ templ RegisterForm(registerError string) {
                         disabled:pointer-events-none"
 						required
 						aria-describedby="username-error"
+						@input="resetErr()"
 					/>
 					<div
 						class="absolute inset-y-0 end-0 
@@ -96,6 +102,7 @@ templ RegisterForm(registerError string) {
                         disabled:opacity-50 disabled:pointer-events-none"
 						required
 						aria-describedby="password-error"
+						@input="resetErr()"
 					/>
 					<div
 						class="absolute inset-y-0 end-0 
@@ -138,6 +145,7 @@ templ RegisterForm(registerError string) {
                             disabled:opacity-50 disabled:pointer-events-none"
 						required
 						aria-describedby="confirm-password-error"
+						@input="resetErr()"
 					/>
 					<div
 						class="absolute inset-y-0 end-0