refactor(templates): complete admin header extraction

- Add theme.js to admin_users page for proper theme support
- Pass currentUser to Header instead of hardcoded Admin user
- Fix currentUserID reference bug (use currentUser.ID)
- Remove duplicate theme loading script (now in Header)
- Complete header refactoring for admin_users page
This commit is contained in:
2026-02-22 19:06:18 -05:00
parent d4d93bc0e3
commit 844910a54b
2 changed files with 5 additions and 10 deletions
+4 -9
View File
@@ -1,6 +1,6 @@
package templates package templates
templ AdminUsers(users []User, adminCount int, currentUserID string) { templ AdminUsers(currentUser User, users []User, adminCount int) {
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@@ -9,10 +9,11 @@ templ AdminUsers(users []User, adminCount int, currentUserID string) {
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/toast.js"></script> <script src="/static/toast.js"></script>
<script src="/static/header.js"></script> <script src="/static/header.js"></script>
<script src="/static/theme.js"></script>
<link href="/static/style.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">
</head> </head>
<body class="theme-tokyo-night"> <body class="theme-tokyo-night">
@Header(User{Username: "Admin", Role: "admin"}, "/admin/users") @Header(currentUser, "/admin/users")
<!-- Modal Container (populated by HTMX) --> <!-- Modal Container (populated by HTMX) -->
<div id="modal-container"></div> <div id="modal-container"></div>
@@ -43,7 +44,7 @@ templ AdminUsers(users []User, adminCount int, currentUserID string) {
<div class="flex items-center"> <div class="flex items-center">
<div> <div>
<div class="text-sm font-medium" style="color: var(--text-primary)">{user.Username}</div> <div class="text-sm font-medium" style="color: var(--text-primary)">{user.Username}</div>
if user.ID == currentUserID { if user.ID == currentUser.ID {
<span class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: white;">You</span> <span class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: white;">You</span>
} }
</div> </div>
@@ -135,12 +136,6 @@ templ AdminUsers(users []User, adminCount int, currentUserID string) {
</table> </table>
</div> </div>
</main> </main>
<script>
document.addEventListener('DOMContentLoaded', function() {
loadTheme();
});
</script>
</body> </body>
</html> </html>
} }
+1 -1
View File
@@ -29,7 +29,7 @@ func Register() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) 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</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\"><div class=\"container mx-auto px-4 py-8 max-w-md\"><h1 class=\"text-3xl font-bold text-center mb-8\">Register for Bookhoard</h1><form hx-post=\"/api/auth/register\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"bg-white p-6 rounded-lg shadow-md\"><div class=\"mb-4\"><label class=\"block text-gray-700 mb-2\">Email</label> <input type=\"email\" name=\"email\" class=\"w-full px-3 py-2 border rounded\" required></div><div class=\"mb-4\"><label class=\"block text-gray-700 mb-2\">Username</label> <input type=\"text\" name=\"username\" class=\"w-full px-3 py-2 border rounded\" required></div><div class=\"mb-4\"><label class=\"block text-gray-700 mb-2\">Password</label> <input type=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded\" required></div><button type=\"submit\" class=\"w-full bg-green-500 text-white py-2 rounded hover:bg-green-600\">Register</button></form><div id=\"result\" class=\"mt-4 text-center\"></div><p class=\"text-center mt-4\"><a href=\"/login\" class=\"text-blue-500 hover:underline\">Already have an account? Login</a></p></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</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><script src=\"/static/theme.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"></head><body class=\"theme-tokyo-night min-h-screen\"><div class=\"container mx-auto px-4 py-8 max-w-md\"><h1 class=\"text-3xl font-bold text-center mb-8\">Register for Bookhoard</h1><form hx-post=\"/api/auth/register\" hx-target=\"#result\" hx-swap=\"innerHTML\" class=\"card p-6 rounded-lg shadow-md border\"><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Email</label> <input type=\"email\" id=\"email\" name=\"email\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Username</label> <input type=\"text\" id=\"username\" name=\"username\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">First Name</label> <input type=\"text\" name=\"first_name\" placeholder=\"Optional\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\"></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Last Name</label> <input type=\"text\" name=\"last_name\" placeholder=\"Optional\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\"></div><div id=\"password-requirements\" class=\"mb-4 p-4 rounded-lg border text-sm\" style=\"background-color: var(--bg-secondary); border-color: 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 class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Password</label> <input type=\"password\" id=\"password\" name=\"password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><div class=\"mb-4\"><label class=\"block text-sm font-medium mb-1\" style=\"color: var(--text-secondary)\">Confirm Password</label> <input type=\"password\" id=\"confirm-password\" name=\"confirm_password\" class=\"w-full px-3 py-2 border rounded\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)\" required></div><button type=\"submit\" id=\"register-btn\" class=\"btn-primary w-full py-2 rounded opacity-50 cursor-not-allowed\" disabled>Register</button></form><div id=\"result\" class=\"mt-4 text-center\"></div><p class=\"text-center mt-4\"><a href=\"/login\" class=\"text-blue-500 hover:underline\">Already have an account? Login</a></p></div><script src=\"/static/password_validation.js\"></script><script>\n document.addEventListener('DOMContentLoaded', () => {\n if (window.initPasswordValidation) {\n window.initPasswordValidation();\n }\n });\n </script></body></html>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }