John O'Keefe
bc6ce41762
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).
202 lines
8.4 KiB
Templ
202 lines
8.4 KiB
Templ
package templates
|
|
|
|
// adminCreateUserForm renders the (admin-only) account creation form. It
|
|
// lives behind an explicit toggle on the Users page — never visible by
|
|
// 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" 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")
|
|
<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>
|
|
}
|
|
|
|
templ AdminUsers(currentUser User, users []User, adminCount int) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Users - Bookhoard Admin</title>
|
|
<script src="/static/htmx.min.js"></script>
|
|
<link href="/static/style.css" rel="stylesheet"/>
|
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
|
</head>
|
|
<body class="theme-{ currentUser.Theme }">
|
|
@Header(currentUser, "/admin/users")
|
|
<!-- Modal Container (populated by HTMX) -->
|
|
<div id="modal-container"></div>
|
|
<main class="p-4 md:p-8" x-data="{ createOpen: false }">
|
|
<div class="max-w-5xl">
|
|
<div class="flex items-start justify-between gap-3 mb-6">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<span class="grid place-items-center h-10 w-10 rounded-xl" style="background-color: var(--accent-muted); color: var(--accent);">
|
|
@Icon("users", "h-5 w-5")
|
|
</span>
|
|
<h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary)">User Management</h1>
|
|
</div>
|
|
<p class="text-sm" style="color: var(--text-secondary)">Manage user accounts and permissions</p>
|
|
</div>
|
|
<button type="button" class="btn btn-primary text-sm px-3 py-2 shrink-0" x-on:click="createOpen = true">
|
|
+ Create User
|
|
</button>
|
|
</div>
|
|
|
|
@adminCreateUserForm()
|
|
|
|
<!-- Users: fluid card list (same pattern as library management —
|
|
no table, reflows at every width including with the nav
|
|
sidebar open). -->
|
|
<div class="space-y-4">
|
|
for _, user := range users {
|
|
<div id={ "user-" + user.ID } class="card overflow-hidden">
|
|
<div class="flex items-center justify-between gap-4 p-5">
|
|
<div class="flex items-center gap-3 min-w-0 flex-1">
|
|
<span class="grid place-items-center h-10 w-10 rounded-xl shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
|
|
@Icon("user", "h-5 w-5")
|
|
</span>
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="font-semibold truncate" style="color: var(--text-primary)">{ user.Username }</h3>
|
|
if user.ID == currentUser.ID {
|
|
<span class="badge shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">You</span>
|
|
}
|
|
</div>
|
|
<p class="text-sm truncate" style="color: var(--text-secondary)">{ user.Email }</p>
|
|
<p class="text-xs" style="color: var(--text-secondary)">Created { FormatInTimezone(user.CreatedAt, currentUser.Timezone) }</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap items-center justify-end gap-2 shrink-0">
|
|
if user.Role == "admin" && adminCount == 1 {
|
|
<!-- Last admin - disabled -->
|
|
<select
|
|
disabled
|
|
class="input w-auto py-1 pr-7 text-xs opacity-50 cursor-not-allowed"
|
|
title="Cannot demote the last admin"
|
|
>
|
|
<option value="user">User</option>
|
|
<option value="admin" selected>Admin</option>
|
|
</select>
|
|
} else {
|
|
<select
|
|
hx-put={ "/api/auth/profile/" + user.ID }
|
|
hx-target={ "#role-result-" + user.ID }
|
|
hx-swap="innerHTML"
|
|
hx-trigger="change"
|
|
name="role"
|
|
class="input w-auto py-1 pr-7 text-xs"
|
|
>
|
|
<option value="user" selected?={ user.Role == "user" }>User</option>
|
|
<option value="admin" selected?={ user.Role == "admin" }>Admin</option>
|
|
</select>
|
|
<div id={ "role-result-" + user.ID } class="text-xs w-full text-right"></div>
|
|
}
|
|
<button
|
|
hx-get={ "/admin/users/" + user.ID + "/profile-modal" }
|
|
hx-target="#modal-container"
|
|
hx-swap="innerHTML"
|
|
class="btn btn-secondary text-xs px-2.5 py-1"
|
|
>
|
|
@Icon("edit", "h-4 w-4")
|
|
Edit
|
|
</button>
|
|
if user.Role == "admin" && adminCount == 1 {
|
|
<button
|
|
disabled
|
|
class="btn btn-danger text-xs px-2.5 py-1"
|
|
title="Cannot delete the last admin"
|
|
>
|
|
@Icon("trash", "h-4 w-4")
|
|
Delete
|
|
</button>
|
|
} else {
|
|
<button
|
|
hx-delete={ "/api/auth/profile/" + user.ID }
|
|
hx-target={ "#user-" + user.ID }
|
|
hx-swap="outerHTML swap:0.5s"
|
|
hx-confirm="Are you sure you want to delete this user? This action cannot be undone."
|
|
class="btn btn-danger text-xs px-2.5 py-1"
|
|
>
|
|
@Icon("trash", "h-4 w-4")
|
|
Delete
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
}
|