fix(web): viewport meta on all admin/profile pages; admin users page reworked for mobile
- The desktop-on-Android bug: 8 page templates (admin, admin_settings, admin_users, admin_library, admin_archived, admin_hash_conflicts, admin_processing_issues, profile) lacked the viewport meta, so mobile browsers fell back to a ~980px layout viewport and rendered the desktop layout. Added the same meta the other 21 pages already had — partials without a head were skipped deliberately. - Admin Users page: the create-user form no longer dominates the page — it is hidden behind an explicit '+ Create User' button (Alpine x-show/x-cloak, the site-wide convention) with a Close control. - The user list is responsive: table on md+, stacked per-user cards below. Role/delete controls are shared partials with DOM-id suffixes so both renderings keep unique swap targets (last-admin protections preserved in both).
This commit is contained in:
John O'Keefe committed
1 parent
431fec05ad
commit
300866ca67
16 files changed
+728
-422
No files matched your search
+231
-154
@@ -1,10 +1,121 @@
|
||||
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">
|
||||
<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" 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>
|
||||
}
|
||||
|
||||
// userRoleControl renders the role select (with last-admin protection).
|
||||
// resultSuffix keeps DOM ids unique when the control is rendered twice
|
||||
// (desktop table row + mobile card).
|
||||
templ userRoleControl(user User, adminCount int, resultSuffix string) {
|
||||
if user.Role == "admin" && adminCount == 1 {
|
||||
<!-- Last admin - disabled -->
|
||||
<div class="relative">
|
||||
<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>
|
||||
</div>
|
||||
} else {
|
||||
<select
|
||||
hx-put={ "/api/auth/profile/" + user.ID }
|
||||
hx-target={ "#role-result-" + resultSuffix + 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-" + resultSuffix + user.ID } class="text-xs mt-1"></div>
|
||||
}
|
||||
}
|
||||
|
||||
// userDeleteButton renders the delete button (with last-admin protection).
|
||||
// idSuffix keeps the swap-target ids unique when the control is rendered
|
||||
// twice (desktop table row + mobile card).
|
||||
templ userDeleteButton(user User, adminCount int, idSuffix string) {
|
||||
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-" + idSuffix + 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>
|
||||
}
|
||||
}
|
||||
|
||||
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"/>
|
||||
@@ -14,164 +125,130 @@ templ AdminUsers(currentUser User, users []User, adminCount int) {
|
||||
@Header(currentUser, "/admin/users")
|
||||
<!-- Modal Container (populated by HTMX) -->
|
||||
<div id="modal-container"></div>
|
||||
<main class="p-8">
|
||||
<main class="p-4 md:p-8" x-data="{ createOpen: false }">
|
||||
<div class="max-w-5xl">
|
||||
<div class="mb-8">
|
||||
<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 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>
|
||||
<!-- Create User (admins create accounts even when
|
||||
self-service registration is disabled) -->
|
||||
<div class="card p-6 mb-6">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
@Icon("user", "h-4 w-4")
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wide" style="color: var(--text-primary)">Create User</h2>
|
||||
</div>
|
||||
<form hx-post="/api/auth/users" hx-target="#create-user-result" hx-swap="innerHTML" class="grid grid-cols-1 md: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="md: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>
|
||||
<!-- Users Table -->
|
||||
<div class="card overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead style="background-color: var(--bg-primary)">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Username</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Email</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Role</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Created</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y" style="divide-color: var(--border)">
|
||||
for _, user := range users {
|
||||
<tr id={ "user-" + user.ID } class="transition-colors hover:bg-surface-hover">
|
||||
<!-- Username -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="grid place-items-center h-8 w-8 rounded-full shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
|
||||
@Icon("user", "h-4 w-4")
|
||||
</span>
|
||||
<div>
|
||||
<div class="text-sm font-medium" style="color: var(--text-primary)">{ user.Username }</div>
|
||||
if user.ID == currentUser.ID {
|
||||
<span class="badge" style="background-color: var(--accent-muted); color: var(--accent);">You</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<!-- Email -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm" style="color: var(--text-primary)">{ user.Email }</div>
|
||||
</td>
|
||||
<!-- Role Toggle (with last-admin protection) -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
if user.Role == "admin" && adminCount == 1 {
|
||||
<!-- Last admin - disabled -->
|
||||
<div class="relative">
|
||||
<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>
|
||||
</div>
|
||||
} 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 mt-1"></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: table on md+, stacked cards below -->
|
||||
<div class="card overflow-hidden hidden md:block">
|
||||
<table class="w-full">
|
||||
<thead style="background-color: var(--bg-primary)">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Username</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Email</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Role</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Created</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y" style="divide-color: var(--border)">
|
||||
for _, user := range users {
|
||||
<tr id={ "user-" + user.ID } class="transition-colors hover:bg-surface-hover">
|
||||
<!-- Username -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="grid place-items-center h-8 w-8 rounded-full shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
|
||||
@Icon("user", "h-4 w-4")
|
||||
</span>
|
||||
<div>
|
||||
<div class="text-sm font-medium" style="color: var(--text-primary)">{ user.Username }</div>
|
||||
if user.ID == currentUser.ID {
|
||||
<span class="badge" style="background-color: var(--accent-muted); color: var(--accent);">You</span>
|
||||
}
|
||||
</td>
|
||||
<!-- Created -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm" style="color: var(--text-secondary)">{ FormatInTimezone(user.CreatedAt, currentUser.Timezone) }</div>
|
||||
</td>
|
||||
<!-- Actions -->
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
<div class="inline-flex items-center gap-1">
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<!-- Email -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm" style="color: var(--text-primary)">{ user.Email }</div>
|
||||
</td>
|
||||
<!-- Role Toggle (with last-admin protection) -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@userRoleControl(user, adminCount, "")
|
||||
</td>
|
||||
<!-- Created -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm" style="color: var(--text-secondary)">{ FormatInTimezone(user.CreatedAt, currentUser.Timezone) }</div>
|
||||
</td>
|
||||
<!-- Actions -->
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
<div class="inline-flex items-center gap-1">
|
||||
<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>
|
||||
@userDeleteButton(user, adminCount, "")
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Mobile: one card per user -->
|
||||
<div class="space-y-3 md:hidden">
|
||||
for _, user := range users {
|
||||
<div id={ "user-mobile-" + user.ID } class="card p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="grid place-items-center h-9 w-9 rounded-full shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
|
||||
@Icon("user", "h-4 w-4")
|
||||
</span>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="text-sm font-medium truncate" style="color: var(--text-primary)">{ user.Username }</span>
|
||||
if user.ID == currentUser.ID {
|
||||
<span class="badge" style="background-color: var(--accent-muted); color: var(--accent);">You</span>
|
||||
}
|
||||
</div>
|
||||
<div class="text-xs truncate" style="color: var(--text-secondary)">{ user.Email }</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3 mt-3 pt-3 border-t" style="border-color: var(--border)">
|
||||
<div>
|
||||
<div class="text-xs mb-1" style="color: var(--text-secondary)">Role</div>
|
||||
@userRoleControl(user, adminCount, "mobile-")
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-xs mb-1" style="color: var(--text-secondary)">Created</div>
|
||||
<div class="text-xs" style="color: var(--text-secondary)">{ FormatInTimezone(user.CreatedAt, currentUser.Timezone) }</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<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>
|
||||
@userDeleteButton(user, adminCount, "mobile-")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
Reference in new issue
Block a user