From 1a198ede6de09dd23d100449ad299587e21fc347 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Tue, 3 Mar 2026 09:30:09 -0500
Subject: [PATCH] fix(dashboard): align user modal form styling with dashboard
 design system

Replace login-style 'form-group' class (absolute-positioned floating
labels) with dashboard-standard 'form-control' class (block labels,
proper input styling). Add missing 'modal-title' class to headings
and remove incorrect 'form-control' class from individual inputs.
---
 static/js/pages/users.js | 56 ++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/static/js/pages/users.js b/static/js/pages/users.js
index 01d04b84..d933d436 100644
--- a/static/js/pages/users.js
+++ b/static/js/pages/users.js
@@ -83,25 +83,25 @@
         overlay.innerHTML = `
             <div class="modal-content" style="max-width: 480px;">
                 <div class="modal-header">
-                    <h3>Create New User</h3>
+                    <h3 class="modal-title">Create New User</h3>
                     <button class="modal-close" id="user-modal-close"><i class="fas fa-times"></i></button>
                 </div>
                 <div class="modal-body">
-                    <div class="form-group">
-                        <label>Username</label>
-                        <input type="text" id="new-username" class="form-control" placeholder="e.g. jsmith" required>
+                    <div class="form-control">
+                        <label for="new-username">Username</label>
+                        <input type="text" id="new-username" placeholder="e.g. jsmith" required>
                     </div>
-                    <div class="form-group">
-                        <label>Display Name (optional)</label>
-                        <input type="text" id="new-display-name" class="form-control" placeholder="e.g. John Smith">
+                    <div class="form-control">
+                        <label for="new-display-name">Display Name (optional)</label>
+                        <input type="text" id="new-display-name" placeholder="e.g. John Smith">
                     </div>
-                    <div class="form-group">
-                        <label>Password</label>
-                        <input type="password" id="new-password" class="form-control" placeholder="Minimum 4 characters" required>
+                    <div class="form-control">
+                        <label for="new-password">Password</label>
+                        <input type="password" id="new-password" placeholder="Minimum 4 characters" required>
                     </div>
-                    <div class="form-group">
-                        <label>Role</label>
-                        <select id="new-role" class="form-control">
+                    <div class="form-control">
+                        <label for="new-role">Role</label>
+                        <select id="new-role">
                             <option value="viewer">Viewer (read-only)</option>
                             <option value="admin">Admin (full access)</option>
                         </select>
@@ -160,17 +160,17 @@
         overlay.innerHTML = `
             <div class="modal-content" style="max-width: 480px;">
                 <div class="modal-header">
-                    <h3>Edit User: ${escapeHtml(user.username)}</h3>
+                    <h3 class="modal-title">Edit User: ${escapeHtml(user.username)}</h3>
                     <button class="modal-close" id="edit-modal-close"><i class="fas fa-times"></i></button>
                 </div>
                 <div class="modal-body">
-                    <div class="form-group">
-                        <label>Display Name</label>
-                        <input type="text" id="edit-display-name" class="form-control" value="${escapeHtml(user.display_name || '')}">
+                    <div class="form-control">
+                        <label for="edit-display-name">Display Name</label>
+                        <input type="text" id="edit-display-name" value="${escapeHtml(user.display_name || '')}">
                     </div>
-                    <div class="form-group">
-                        <label>Role</label>
-                        <select id="edit-role" class="form-control">
+                    <div class="form-control">
+                        <label for="edit-role">Role</label>
+                        <select id="edit-role">
                             <option value="viewer" ${user.role === 'viewer' ? 'selected' : ''}>Viewer (read-only)</option>
                             <option value="admin" ${user.role === 'admin' ? 'selected' : ''}>Admin (full access)</option>
                         </select>
@@ -213,18 +213,18 @@
         overlay.innerHTML = `
             <div class="modal-content" style="max-width: 420px;">
                 <div class="modal-header">
-                    <h3>Reset Password: ${escapeHtml(username)}</h3>
+                    <h3 class="modal-title">Reset Password: ${escapeHtml(username)}</h3>
                     <button class="modal-close" id="pw-modal-close"><i class="fas fa-times"></i></button>
                 </div>
                 <div class="modal-body">
-                    <div class="form-group">
-                        <label>New Password</label>
-                        <input type="password" id="reset-password" class="form-control" placeholder="Minimum 4 characters">
+                    <div class="form-control">
+                        <label for="reset-password">New Password</label>
+                        <input type="password" id="reset-password" placeholder="Minimum 4 characters">
                     </div>
-                    <div class="form-group">
-                        <label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
-                            <input type="checkbox" id="reset-must-change" checked>
-                            Require password change on next login
+                    <div class="form-control">
+                        <label class="checkbox-label" style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
+                            <input type="checkbox" id="reset-must-change" checked style="width:auto;">
+                            <span>Require password change on next login</span>
                         </label>
                     </div>
                 </div>