hobokenchicken/GopherGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): align user modal form styling with dashboard design system
Some checks failed
CI / Check (push) Has been cancelled
Details
CI / Clippy (push) Has been cancelled
Details
CI / Formatting (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Release Build (push) Has been cancelled
Details

Browse Source 
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.
This commit is contained in:
Dustin Newkirk
2026-03-03 09:30:09 -05:00
parent 90b26bbfea
commit 1a198ede6d
1 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
static/js/pages/users.js
View File

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