fix(web): password requirement indicators on registration and admin create-user

The /register checklist was dead markup: initPasswordValidation() was
only ever called on the setup page, so the requirement rows never
updated and the Register button stayed disabled forever — web
self-registration was effectively broken. The register Alpine component
now initializes it.

The validator is parameterized (field/submit ids, confirm + username/
email checks optional) so the admin Create User form reuses it: confirm
field, live requirement rows, and the Create button gated on all checks
passing. Requirements mirror the server's passwordcomplex rules
(8+ chars, upper/lower/number/special — the hardcoded defaults; server-
tuned rule values are a future nicety, the server remains the enforcer
either way).

templates/admin_users.templ

@@ -5,7 +5,7 @@ package templates
 // default — so creation stays available with self-service registration
 // disabled without dominating the page.
 templ adminCreateUserForm() {
-	<div id="create-user-card" class="card p-4 md:p-6 mb-6" x-cloak x-show="createOpen">
+	<div id="create-user-card" class="card p-4 md:p-6 mb-6" x-cloak x-show="createOpen" x-data="adminCreateUser">
 		<div class="flex items-center justify-between mb-4">
 			<div class="flex items-center gap-2">
 				@Icon("user", "h-4 w-4")
@@ -18,15 +18,19 @@ templ adminCreateUserForm() {
 		<form hx-post="/api/auth/users" hx-target="#create-user-result" hx-swap="innerHTML" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 			<div>
 				<label class="text-xs block mb-1" style="color: var(--text-secondary)">Username *</label>
-				<input type="text" name="username" required minlength="3" maxlength="50" class="input w-full"/>
+				<input type="text" id="username" name="username" required minlength="3" maxlength="50" class="input w-full"/>
 			</div>
 			<div>
 				<label class="text-xs block mb-1" style="color: var(--text-secondary)">Email *</label>
-				<input type="email" name="email" required class="input w-full"/>
+				<input type="email" id="email" name="email" required class="input w-full"/>
 			</div>
 			<div>
 				<label class="text-xs block mb-1" style="color: var(--text-secondary)">Password *</label>
-				<input type="password" name="password" required class="input w-full"/>
+				<input type="password" id="password" name="password" required class="input w-full"/>
+			</div>
+			<div>
+				<label class="text-xs block mb-1" style="color: var(--text-secondary)">Confirm password *</label>
+				<input type="password" id="cu-confirm-password" name="confirm_password" required class="input w-full"/>
 			</div>
 			<div>
 				<label class="text-xs block mb-1" style="color: var(--text-secondary)">First name</label>
@@ -43,8 +47,31 @@ templ adminCreateUserForm() {
 					<option value="admin">Admin</option>
 				</select>
 			</div>
+			<div class="sm:col-span-2 lg:col-span-3" style="color: var(--text-secondary)">
+				<p class="font-semibold mb-2 text-xs uppercase tracking-wide">Password Requirements</p>
+				<ul class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1 text-xs">
+					<li id="req-length" class="flex items-center gap-2">
+						<span class="requirement-icon">○</span> At least 8 characters
+					</li>
+					<li id="req-upper" class="flex items-center gap-2">
+						<span class="requirement-icon">○</span> One uppercase letter
+					</li>
+					<li id="req-lower" class="flex items-center gap-2">
+						<span class="requirement-icon">○</span> One lowercase letter
+					</li>
+					<li id="req-number" class="flex items-center gap-2">
+						<span class="requirement-icon">○</span> One number
+					</li>
+					<li id="req-special" class="flex items-center gap-2">
+						<span class="requirement-icon">○</span> One special character
+					</li>
+					<li id="req-match" class="flex items-center gap-2">
+						<span class="requirement-icon">○</span> Passwords match
+					</li>
+				</ul>
+			</div>
 			<div class="sm:col-span-2 lg:col-span-3">
-				<button type="submit" class="btn btn-primary text-sm px-4 py-2">Create User</button>
+				<button type="submit" id="create-user-submit" class="btn btn-primary text-sm px-4 py-2 opacity-50 cursor-not-allowed" disabled>Create User</button>
 			</div>
 		</form>
 		<div id="create-user-result" class="text-sm mt-3"></div>

templates/admin_users_templ.go

@@ -33,7 +33,7 @@ func adminCreateUserForm() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"create-user-card\" class=\"card p-4 md:p-6 mb-6\" x-cloak x-show=\"createOpen\"><div class=\"flex items-center justify-between mb-4\"><div class=\"flex items-center gap-2\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"create-user-card\" class=\"card p-4 md:p-6 mb-6\" x-cloak x-show=\"createOpen\" x-data=\"adminCreateUser\"><div class=\"flex items-center justify-between mb-4\"><div class=\"flex items-center gap-2\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -41,7 +41,7 @@ func adminCreateUserForm() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<h2 class=\"text-sm font-semibold uppercase tracking-wide\" style=\"color: var(--text-primary)\">Create User</h2></div><button type=\"button\" class=\"btn btn-secondary text-xs px-2.5 py-1\" x-on:click=\"createOpen = false\">Close</button></div><form hx-post=\"/api/auth/users\" hx-target=\"#create-user-result\" hx-swap=\"innerHTML\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Username *</label> <input type=\"text\" name=\"username\" required minlength=\"3\" maxlength=\"50\" class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Email *</label> <input type=\"email\" name=\"email\" required class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Password *</label> <input type=\"password\" name=\"password\" required class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">First name</label> <input type=\"text\" name=\"first_name\" class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Last name</label> <input type=\"text\" name=\"last_name\" class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Role</label> <select name=\"role\" class=\"input w-full\"><option value=\"user\" selected>User</option> <option value=\"admin\">Admin</option></select></div><div class=\"sm:col-span-2 lg:col-span-3\"><button type=\"submit\" class=\"btn btn-primary text-sm px-4 py-2\">Create User</button></div></form><div id=\"create-user-result\" class=\"text-sm mt-3\"></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<h2 class=\"text-sm font-semibold uppercase tracking-wide\" style=\"color: var(--text-primary)\">Create User</h2></div><button type=\"button\" class=\"btn btn-secondary text-xs px-2.5 py-1\" x-on:click=\"createOpen = false\">Close</button></div><form hx-post=\"/api/auth/users\" hx-target=\"#create-user-result\" hx-swap=\"innerHTML\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Username *</label> <input type=\"text\" id=\"username\" name=\"username\" required minlength=\"3\" maxlength=\"50\" class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Email *</label> <input type=\"email\" id=\"email\" name=\"email\" required class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Password *</label> <input type=\"password\" id=\"password\" name=\"password\" required class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Confirm password *</label> <input type=\"password\" id=\"cu-confirm-password\" name=\"confirm_password\" required class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">First name</label> <input type=\"text\" name=\"first_name\" class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Last name</label> <input type=\"text\" name=\"last_name\" class=\"input w-full\"></div><div><label class=\"text-xs block mb-1\" style=\"color: var(--text-secondary)\">Role</label> <select name=\"role\" class=\"input w-full\"><option value=\"user\" selected>User</option> <option value=\"admin\">Admin</option></select></div><div class=\"sm:col-span-2 lg:col-span-3\" style=\"color: var(--text-secondary)\"><p class=\"font-semibold mb-2 text-xs uppercase tracking-wide\">Password Requirements</p><ul class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1 text-xs\"><li id=\"req-length\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> At least 8 characters</li><li id=\"req-upper\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One uppercase letter</li><li id=\"req-lower\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One lowercase letter</li><li id=\"req-number\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One number</li><li id=\"req-special\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One special character</li><li id=\"req-match\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> Passwords match</li></ul></div><div class=\"sm:col-span-2 lg:col-span-3\"><button type=\"submit\" id=\"create-user-submit\" class=\"btn btn-primary text-sm px-4 py-2 opacity-50 cursor-not-allowed\" disabled>Create User</button></div></form><div id=\"create-user-result\" class=\"text-sm mt-3\"></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -106,7 +106,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.ResolveAttributeValue("user-" + user.ID)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 93, Col: 33}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 120, Col: 33}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3)
 			if templ_7745c5c3_Err != nil {
@@ -127,7 +127,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(user.Username)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 101, Col: 96}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 128, Col: 96}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 			if templ_7745c5c3_Err != nil {
@@ -150,7 +150,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(user.Email)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 106, Col: 87}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 133, Col: 87}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -163,7 +163,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(FormatInTimezone(user.CreatedAt, currentUser.Timezone))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 107, Col: 130}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 134, Col: 130}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -186,7 +186,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var7 string
 				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.ResolveAttributeValue("/api/auth/profile/" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 123, Col: 50}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 150, Col: 50}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var7)
 				if templ_7745c5c3_Err != nil {
@@ -199,7 +199,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.ResolveAttributeValue("#role-result-" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 124, Col: 48}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 151, Col: 48}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8)
 				if templ_7745c5c3_Err != nil {
@@ -232,7 +232,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var9 string
 				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.ResolveAttributeValue("role-result-" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 133, Col: 44}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 160, Col: 44}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var9)
 				if templ_7745c5c3_Err != nil {
@@ -250,7 +250,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.ResolveAttributeValue("/admin/users/" + user.ID + "/profile-modal")
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 136, Col: 63}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 163, Col: 63}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10)
 			if templ_7745c5c3_Err != nil {
@@ -289,7 +289,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.ResolveAttributeValue("/api/auth/profile/" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 155, Col: 53}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 182, Col: 53}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var11)
 				if templ_7745c5c3_Err != nil {
@@ -302,7 +302,7 @@ func AdminUsers(currentUser User, users []User, adminCount int) templ.Component
 				var templ_7745c5c3_Var12 string
 				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.ResolveAttributeValue("#user-" + user.ID)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 156, Col: 41}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `admin_users.templ`, Line: 183, Col: 41}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var12)
 				if templ_7745c5c3_Err != nil {

templates/register.templ

@@ -12,7 +12,7 @@ templ Register() {
 			<link href="/static/style.css" rel="stylesheet"/>
 			<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
 		</head>
-		<body class="theme-tokyo-night min-h-screen" x-data="register" x-init="initRegisterTheme()">
+		<body class="theme-tokyo-night min-h-screen" x-data="register">
 			<div class="brand-gradient min-h-screen flex flex-col items-center justify-center p-4">
 				<div class="w-full max-w-sm">
 					<a href="/" class="flex items-center justify-center gap-2.5 mb-8">

templates/register_templ.go

@@ -29,7 +29,7 @@ func Register() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Register - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"icon\" type=\"image/svg+xml\" href=\"/static/favicon.svg\"></head><body class=\"theme-tokyo-night min-h-screen\" x-data=\"register\" x-init=\"initRegisterTheme()\"><div class=\"brand-gradient min-h-screen flex flex-col items-center justify-center p-4\"><div class=\"w-full max-w-sm\"><a href=\"/\" class=\"flex items-center justify-center gap-2.5 mb-8\"><span class=\"text-3xl\">📚</span> <span class=\"text-2xl font-bold tracking-tight\" style=\"color: var(--text-primary)\">Bookhoard</span></a><h1 class=\"text-xl font-bold text-center mb-6\" style=\"color: var(--text-primary)\">Create your account</h1><form hx-post=\"/api/auth/register\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"card p-6 space-y-4\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Email</label> <input type=\"email\" id=\"email\" name=\"email\" class=\"input\" required></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Username</label> <input type=\"text\" id=\"username\" name=\"username\" class=\"input\" required></div><div class=\"grid grid-cols-2 gap-3\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">First Name</label> <input type=\"text\" name=\"first_name\" placeholder=\"Optional\" class=\"input\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Last Name</label> <input type=\"text\" name=\"last_name\" placeholder=\"Optional\" class=\"input\"></div></div><div id=\"password-requirements\" class=\"p-4 rounded-xl text-sm\" style=\"background-color: var(--bg-primary); border: 1px solid var(--border);\"><p class=\"font-semibold mb-2\" style=\"color: var(--text-primary)\">Password Requirements:</p><ul class=\"space-y-1\" style=\"color: var(--text-secondary)\"><li id=\"req-length\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> At least 8 characters</li><li id=\"req-upper\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One uppercase letter</li><li id=\"req-lower\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One lowercase letter</li><li id=\"req-number\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One number</li><li id=\"req-special\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One special character</li><li id=\"req-match\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> Passwords match</li></ul></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" id=\"password\" name=\"password\" class=\"input\" required></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Confirm Password</label> <input type=\"password\" id=\"confirm-password\" name=\"confirm_password\" class=\"input\" required></div><button type=\"submit\" id=\"register-btn\" class=\"btn btn-primary w-full py-2.5 opacity-50 cursor-not-allowed\" disabled>Register</button></form><div id=\"result\" class=\"mt-4 text-center text-sm\"></div><p class=\"text-center mt-6 text-sm\" style=\"color: var(--text-secondary)\">Already have an account? <a href=\"/login\" class=\"font-medium hover:underline\" style=\"color: var(--accent)\">Login</a></p></div></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Register - Bookhoard</title><script src=\"/static/htmx.min.js\"></script><script type=\"module\" src=\"/static/main.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"icon\" type=\"image/svg+xml\" href=\"/static/favicon.svg\"></head><body class=\"theme-tokyo-night min-h-screen\" x-data=\"register\"><div class=\"brand-gradient min-h-screen flex flex-col items-center justify-center p-4\"><div class=\"w-full max-w-sm\"><a href=\"/\" class=\"flex items-center justify-center gap-2.5 mb-8\"><span class=\"text-3xl\">📚</span> <span class=\"text-2xl font-bold tracking-tight\" style=\"color: var(--text-primary)\">Bookhoard</span></a><h1 class=\"text-xl font-bold text-center mb-6\" style=\"color: var(--text-primary)\">Create your account</h1><form hx-post=\"/api/auth/register\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"card p-6 space-y-4\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Email</label> <input type=\"email\" id=\"email\" name=\"email\" class=\"input\" required></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Username</label> <input type=\"text\" id=\"username\" name=\"username\" class=\"input\" required></div><div class=\"grid grid-cols-2 gap-3\"><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">First Name</label> <input type=\"text\" name=\"first_name\" placeholder=\"Optional\" class=\"input\"></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Last Name</label> <input type=\"text\" name=\"last_name\" placeholder=\"Optional\" class=\"input\"></div></div><div id=\"password-requirements\" class=\"p-4 rounded-xl text-sm\" style=\"background-color: var(--bg-primary); border: 1px solid var(--border);\"><p class=\"font-semibold mb-2\" style=\"color: var(--text-primary)\">Password Requirements:</p><ul class=\"space-y-1\" style=\"color: var(--text-secondary)\"><li id=\"req-length\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> At least 8 characters</li><li id=\"req-upper\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One uppercase letter</li><li id=\"req-lower\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One lowercase letter</li><li id=\"req-number\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One number</li><li id=\"req-special\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> One special character</li><li id=\"req-match\" class=\"flex items-center gap-2\"><span class=\"requirement-icon\">○</span> Passwords match</li></ul></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" id=\"password\" name=\"password\" class=\"input\" required></div><div><label class=\"block text-xs font-semibold uppercase tracking-wide mb-2\" style=\"color: var(--text-secondary)\">Confirm Password</label> <input type=\"password\" id=\"confirm-password\" name=\"confirm_password\" class=\"input\" required></div><button type=\"submit\" id=\"register-btn\" class=\"btn btn-primary w-full py-2.5 opacity-50 cursor-not-allowed\" disabled>Register</button></form><div id=\"result\" class=\"mt-4 text-center text-sm\"></div><p class=\"text-center mt-6 text-sm\" style=\"color: var(--text-secondary)\">Already have an account? <a href=\"/login\" class=\"font-medium hover:underline\" style=\"color: var(--accent)\">Login</a></p></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

web/src/password_validation.ts

@@ -62,8 +62,8 @@ function updateRequirementStatus(elementId: string, passed: boolean): void {
   }
 }
 
-function updateSubmitButton(allPassed: boolean): void {
+function updateSubmitButton(allPassed: boolean, submitId: string): void {
-  const button = document.getElementById("register-btn") as HTMLButtonElement;
+  const button = document.getElementById(submitId) as HTMLButtonElement;
   if (!button) {
     return;
   }
@@ -77,118 +77,114 @@ function updateSubmitButton(allPassed: boolean): void {
   }
 }
 
-// Main validation orchestrator
-function validateAll(): void {
-  const passwordField = document.getElementById("password") as HTMLInputElement;
-  const confirmField = document.getElementById(
-    "confirm-password",
-  ) as HTMLInputElement;
-  const usernameField = document.getElementById("username") as HTMLInputElement;
-  const emailField = document.getElementById("email") as HTMLInputElement;
-
-  if (!passwordField || !confirmField || !usernameField || !emailField) {
-    return;
-  }
-
-  const password = passwordField.value;
-  const confirm = confirmField.value;
-  const username = usernameField.value;
-  const email = emailField.value;
-
-  // Check password requirements
-  const hasLen = hasMinimumLength(password);
-  const hasUpper = hasUppercase(password);
-  const hasLower = hasLowercase(password);
-  const hasNum = hasNumber(password);
-  const hasSpecial = hasSpecialChar(password);
-  const doMatch = passwordsMatch(password, confirm);
-  const hasUser = hasUsername(username);
-  const hasEmailAddr = hasEmail(email);
-
-  // Update requirement indicators
-  updateRequirementStatus("req-length", hasLen);
-  updateRequirementStatus("req-upper", hasUpper);
-  updateRequirementStatus("req-lower", hasLower);
-  updateRequirementStatus("req-number", hasNum);
-  updateRequirementStatus("req-special", hasSpecial);
-  updateRequirementStatus("req-match", doMatch);
-
-  // Enable/disable submit button
-  const allPassed =
-    hasLen &&
-    hasUpper &&
-    hasLower &&
-    hasNum &&
-    hasSpecial &&
-    doMatch &&
-    hasUser &&
-    hasEmailAddr;
-  updateSubmitButton(allPassed);
-}
-
-// Debounce function to avoid excessive validation calls
-let debounceTimer: number | null = null;
-
-function debouncedValidation(): void {
-  if (debounceTimer !== null) {
-    clearTimeout(debounceTimer);
-  }
-  debounceTimer = window.setTimeout(() => {
-    validateAll();
-    debounceTimer = null;
-  }, 100);
-}
-
-// Event handlers (PASSIVE - no preventDefault, doesn't block password managers)
-function onPasswordInput(): void {
-  debouncedValidation();
-}
-
-function onConfirmInput(): void {
-  debouncedValidation();
-}
-
-function onUsernameInput(): void {
-  debouncedValidation();
-}
-
-function onEmailInput(): void {
-  debouncedValidation();
-}
-
 // Initialization
-function initPasswordValidation(): void {
+export interface PasswordValidationOptions {
-  const passwordField = document.getElementById("password") as HTMLInputElement;
+  // Element ids. Defaults match the /register page; other forms (admin
-  const confirmField = document.getElementById(
+  // create-user, setup) override what differs.
-    "confirm-password",
+  passwordId?: string;
-  ) as HTMLInputElement;
+  confirmId?: string;
-  const usernameField = document.getElementById("username") as HTMLInputElement;
+  usernameId?: string;
-  const emailField = document.getElementById("email") as HTMLInputElement;
+  emailId?: string;
+  submitId?: string;
+  requireUsernameEmail?: boolean;
+}
 
-  if (!passwordField || !confirmField || !usernameField || !emailField) {
+export function initPasswordValidation(
+  options: PasswordValidationOptions = {},
+): void {
+  const passwordId = options.passwordId ?? "password";
+  const confirmId = options.confirmId ?? "confirm-password";
+  const usernameId = options.usernameId ?? "username";
+  const emailId = options.emailId ?? "email";
+  const submitId = options.submitId ?? "register-btn";
+  const requireUsernameEmail = options.requireUsernameEmail ?? true;
+
+  const passwordField = document.getElementById(passwordId) as HTMLInputElement;
+  const confirmField = document.getElementById(confirmId) as HTMLInputElement;
+  const usernameField = document.getElementById(usernameId) as HTMLInputElement;
+  const emailField = document.getElementById(emailId) as HTMLInputElement;
+
+  if (!passwordField) {
     return;
   }
 
+  const validate = (): void => {
+    const password = passwordField.value;
+    const confirm = confirmField ? confirmField.value : password;
+    const username = usernameField ? usernameField.value : "x";
+    const email = emailField ? emailField.value : "x@x";
+
+    // Check password requirements
+    const hasLen = hasMinimumLength(password);
+    const hasUpper = hasUppercase(password);
+    const hasLower = hasLowercase(password);
+    const hasNum = hasNumber(password);
+    const hasSpecial = hasSpecialChar(password);
+    const doMatch = confirmField ? passwordsMatch(password, confirm) : true;
+    const hasUser = !requireUsernameEmail || hasUsername(username);
+    const hasEmailAddr = !requireUsernameEmail || hasEmail(email);
+
+    // Update requirement indicators
+    updateRequirementStatus("req-length", hasLen);
+    updateRequirementStatus("req-upper", hasUpper);
+    updateRequirementStatus("req-lower", hasLower);
+    updateRequirementStatus("req-number", hasNum);
+    updateRequirementStatus("req-special", hasSpecial);
+    updateRequirementStatus("req-match", doMatch);
+
+    // Enable/disable submit button
+    const allPassed =
+      hasLen && hasUpper && hasLower && hasNum && hasSpecial && doMatch && hasUser && hasEmailAddr;
+    updateSubmitButton(allPassed, submitId);
+  };
+
+  // Debounce to avoid excessive validation calls
+  let debounceTimer: number | null = null;
+  const debouncedValidation = (): void => {
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = window.setTimeout(() => {
+      validate();
+      debounceTimer = null;
+    }, 100);
+  };
+
+  const onInput = (): void => {
+    debouncedValidation();
+  };
+
   // Add passive event listeners - don't prevent default, don't block password managers
-  passwordField.addEventListener("input", onPasswordInput, { passive: true });
+  passwordField.addEventListener("input", onInput, { passive: true });
-  passwordField.addEventListener("paste", onPasswordInput, { passive: true });
+  passwordField.addEventListener("paste", onInput, { passive: true });
 
-  confirmField.addEventListener("input", onConfirmInput, { passive: true });
+  if (confirmField) {
-  confirmField.addEventListener("paste", onConfirmInput, { passive: true });
+    confirmField.addEventListener("input", onInput, { passive: true });
-
+    confirmField.addEventListener("paste", onInput, { passive: true });
-  usernameField.addEventListener("input", onUsernameInput, { passive: true });
+  }
-  usernameField.addEventListener("paste", onUsernameInput, { passive: true });
+  if (usernameField) {
-
+    usernameField.addEventListener("input", onInput, { passive: true });
-  emailField.addEventListener("input", onEmailInput, { passive: true });
+    usernameField.addEventListener("paste", onInput, { passive: true });
-  emailField.addEventListener("paste", onEmailInput, { passive: true });
+  }
+  if (emailField) {
+    emailField.addEventListener("input", onInput, { passive: true });
+    emailField.addEventListener("paste", onInput, { passive: true });
+  }
 
   // Initial validation
-  validateAll();
+  validate();
 }
 
-// Export for use in template
-export { initPasswordValidation };
-
 Alpine.data("validation", () => ({
   initPasswordValidation,
 }));
+
+// Admin create-user form: one password field (no confirm), custom submit id.
+Alpine.data("adminCreateUser", () => ({
+  init() {
+    initPasswordValidation({
+      confirmId: "cu-confirm-password",
+      submitId: "create-user-submit",
+    });
+  },
+}));

web/src/register.ts

@@ -1,5 +1,6 @@
 import { Alpine } from "./alpine";
 import { applyTheme } from "./theme";
+import { initPasswordValidation } from "./password_validation";
 
 function initRegisterTheme(): void {
   // Progressive enhancement: check localStorage immediately
@@ -12,5 +13,10 @@ function initRegisterTheme(): void {
 export { initRegisterTheme };
 
 Alpine.data("register", () => ({
-  initRegisterTheme,
+  init() {
+    initRegisterTheme();
+    // The requirements checklist + submit gating: without this the
+    // checklist stayed dead markup and the Register button never enabled.
+    initPasswordValidation();
+  },
 }));

web/static/style.css

@@ -1,2 +1,2 @@
 *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath Line truncated
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath Line truncated