john-okeefe
af7533529c
Remove redundant <script src="/static/main.js" defer></script> tags from 17+ templates that include the @Header component, eliminating duplicate script loading that was causing Alpine.js to initialize twice per page load. The header.templ component now serves as the single source of truth for main.js inclusion, following the DRY principle and ensuring consistent script loading across all pages that use the header navigation. Additionally, add type="button" attribute to all buttons in header navigation to prevent default form submission behavior when buttons are clicked. Changes: - Remove main.js script tag from templates using @Header component - Keep main.js in header.templ (line 279) as universal inclusion point - Preserve main.js in special pages: index.templ, login.templ, register.templ (these don't use @Header and are standalone entry points) - Add type="button" to theme toggle, theme selection, wood paneling, and user menu buttons to prevent unwanted form submissions or page navigation Benefits: - Eliminates Alpine.js double-initialization bug - Reduces HTTP requests (one script load instead of two) - Improves maintainability (add header, get scripts automatically) - Fixes broken @click handlers on collections, devices, and other pages - Prevents buttons from triggering default form submission behavior Technical notes: - Templates affected: admin, analytics, bookshelf, collection_rules, collections, conflicts, custom_section, dashboard, devices, docs, library, profile, progress, queue, unlinked_books - No changes to entry pages (index, login, register) which don't use @Header - HTMX script remains in individual templates (stateless, no double-load issue) - All interactive buttons in header now explicitly marked type="button" to prevent default browser form submission behavior Related to: previous commit fixing Vite code-splitting
135 lines
5.8 KiB
Templ
135 lines
5.8 KiB
Templ
package templates
|
|
|
|
templ AdminUsers(currentUser User, users []User, adminCount int) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>Users - Bookhoard Admin</title>
|
|
<script src="/static/htmx.min.js"></script>
|
|
<link href="/static/style.css" rel="stylesheet"/>
|
|
</head>
|
|
<body class="theme-{ currentUser.Theme }">
|
|
@Header(currentUser, "/admin/users")
|
|
<!-- Modal Container (populated by HTMX) -->
|
|
<div id="modal-container"></div>
|
|
<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
|
|
@AdminSidebar(currentUser, "/admin/users")
|
|
<main class="flex-1 p-8">
|
|
<div class="w-full">
|
|
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">User Management</h1>
|
|
<p style="color: var(--text-secondary)">Manage user accounts and permissions</p>
|
|
</div>
|
|
<!-- Users Table -->
|
|
<div class="card rounded-lg border overflow-hidden" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
|
<table class="w-full">
|
|
<thead style="background-color: var(--bg-primary)">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Username</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Email</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Role</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Created</th>
|
|
<th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider" 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="hover:bg-opacity-50" style="transition: background-color 0.2s;">
|
|
<!-- Username -->
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div>
|
|
<div class="text-sm font-medium" style="color: var(--text-primary)">{ user.Username }</div>
|
|
if user.ID == currentUser.ID {
|
|
<span class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: white;">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="text-sm rounded px-2 py-1 cursor-not-allowed opacity-50"
|
|
style="background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border);"
|
|
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-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
|
hx-target={ "#role-result-" + user.ID }
|
|
hx-swap="innerHTML"
|
|
name="role"
|
|
class="text-sm rounded px-2 py-1"
|
|
style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
|
|
onchange="this.dispatchEvent(new Event('htmx:trigger'))"
|
|
hx-trigger="change"
|
|
hx-vals='{"role": this.value}'
|
|
>
|
|
<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>
|
|
}
|
|
</td>
|
|
<!-- Created -->
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm" style="color: var(--text-secondary)">{ user.CreatedAt.Format("2006-01-02") }</div>
|
|
</td>
|
|
<!-- Actions -->
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<button
|
|
hx-get={ "/admin/users/" + user.ID + "/profile-modal" }
|
|
hx-target="#modal-container"
|
|
hx-swap="innerHTML"
|
|
class="text-sm px-3 py-1 rounded mr-2"
|
|
style="background-color: var(--accent); color: white;"
|
|
>
|
|
Edit
|
|
</button>
|
|
if user.Role == "admin" && adminCount == 1 {
|
|
<button
|
|
disabled
|
|
class="text-sm px-3 py-1 rounded cursor-not-allowed opacity-50"
|
|
style="background-color: #dc2626; color: white;"
|
|
title="Cannot delete the last admin"
|
|
>
|
|
Delete
|
|
</button>
|
|
} else {
|
|
<button
|
|
hx-delete={ "/api/auth/profile/" + user.ID }
|
|
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
|
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="text-sm px-3 py-1 rounded"
|
|
style="background-color: #dc2626; color: white;"
|
|
>
|
|
Delete
|
|
</button>
|
|
}
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
}
|