bookhoard/templates/admin_users.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>
				<!-- rows generated from the ACTIVE rules by password_validation.ts -->
				<ul id="password-requirements-admin" class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1 text-xs"></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>
			<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: card list. Stacked rows on purpose — identity, created,
				     role, and actions each get their own full-width row so nothing
				     truncates into confusion on a phone. -->
				<div class="space-y-4">
					for _, user := range users {
						<div id={ "user-" + user.ID } class="card overflow-hidden">
							<div class="p-4 sm:p-5">
								<!-- Identity -->
								<div class="flex items-center gap-3">
									<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>
									</div>
								</div>
								<!-- Created: its own line — a full date never wraps -->
								<p class="text-xs mt-2" style="color: var(--text-secondary)">
									Created { FormatInTimezone(user.CreatedAt, currentUser.Timezone) }
								</p>
								<!-- Role -->
								<div class="mt-3 pt-3 border-t flex items-center justify-between gap-3" style="border-color: var(--border)">
									<span class="text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Role</span>
									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>
								<div id={ "role-result-" + user.ID } class="text-xs mt-1"></div>
								<!-- Actions -->
								<div class="mt-3 flex gap-2">
									<button
										hx-get={ "/admin/users/" + user.ID + "/profile-modal" }
										hx-target="#modal-container"
										hx-swap="innerHTML"
										class="btn btn-secondary text-sm px-3 py-1.5 flex-1 sm:flex-none sm:ml-auto"
									>
										@Icon("edit", "h-4 w-4")
										Edit
									</button>
									if user.Role == "admin" && adminCount == 1 {
										<button
											disabled
											class="btn btn-danger text-sm px-3 py-1.5 flex-1 sm:flex-none"
											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-sm px-3 py-1.5 flex-1 sm:flex-none"
										>
											@Icon("trash", "h-4 w-4")
											Delete
										</button>
									}
								</div>
							</div>
						</div>
					}
				</div>
			</div>
		</main>
	</body>
	</html>
}