david/theoldfitz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add password visibility toggle to user and admin forms

Browse Source
This commit is contained in:
David Dyer committed 2026-08-30 23:07:24 -04:00
1 parent e68b24e1c7
commit 7c96b952e9
5 files changed
+165 -28
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

admin/login.php
+28 -1
View File
@@ -45,12 +45,39 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" id="password" name="password" class="form-input" required autocomplete="current-password"> <div class="password-input-wrap">
<input type="password" id="password" name="password" class="form-input" required autocomplete="current-password">
<button type="button" class="password-toggle-btn" aria-label="Show password" id="btn-toggle-login-password">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
<circle cx="12" cy="12" r="3" />
</svg>
</button>
</div>
</div> </div>
<button type="submit" class="btn btn-primary login-btn">Sign In</button> <button type="submit" class="btn btn-primary login-btn">Sign In</button>
</form> </form>
<a href="../" class="back-link">← Return to Pub Website</a> <a href="../" class="back-link">← Return to Pub Website</a>
</div> </div>
<script>
(function() {
var btn = document.getElementById('btn-toggle-login-password');
var input = document.getElementById('password');
if (!btn || !input) return;
var eyeOpen = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>';
var eyeOff = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye-off"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" y1="2" x2="22" y2="22"/></svg>';
btn.addEventListener('click', function() {
var isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
btn.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
btn.innerHTML = isPassword ? eyeOff : eyeOpen;
input.focus();
});
})();
</script>
</body> </body>
</html> </html>
admin/menu.js
-12
View File
@@ -101,18 +101,6 @@ document.getElementById('btn-cancel-item').addEventListener('click', closeItemMo
document.getElementById('btn-close-cat-modal').addEventListener('click', closeCategoryModal); document.getElementById('btn-close-cat-modal').addEventListener('click', closeCategoryModal);
document.getElementById('btn-cancel-cat').addEventListener('click', closeCategoryModal); document.getElementById('btn-cancel-cat').addEventListener('click', closeCategoryModal);
// Close on backdrop click
itemModal.addEventListener('click', (e) => { if (e.target === itemModal) closeItemModal(); });
catModal.addEventListener('click', (e) => { if (e.target === catModal) closeCategoryModal(); });
// Close on Escape key
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeItemModal();
closeCategoryModal();
}
});
// Form submit: Save Item (Async Fetch) // Form submit: Save Item (Async Fetch)
document.getElementById('form-item').addEventListener('submit', async (e) => { document.getElementById('form-item').addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
admin/users.js
+45 -9
View File
@@ -23,9 +23,36 @@ async function postForm(formData) {
return response.json(); return response.json();
} }
const EYE_OPEN_SVG = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
<circle cx="12" cy="12" r="3" />
</svg>
`;
const EYE_OFF_SVG = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye-off">
<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>
`;
function resetPasswordVisibility(form) {
form.querySelectorAll('.password-toggle-btn').forEach((btn) => {
const input = document.getElementById(btn.dataset.target);
if (input) input.type = 'password';
btn.setAttribute('aria-label', 'Show password');
btn.innerHTML = EYE_OPEN_SVG;
});
}
// Add User modal // Add User modal
function openUserModal() { function openUserModal() {
document.getElementById('form-user').reset(); const form = document.getElementById('form-user');
form.reset();
resetPasswordVisibility(form);
userModal.classList.add('is-open'); userModal.classList.add('is-open');
document.getElementById('user-field-username').focus(); document.getElementById('user-field-username').focus();
} }
@@ -37,8 +64,10 @@ function closeUserModal() {
// Change Password modal // Change Password modal
function openPasswordModal(userId, username) { function openPasswordModal(userId, username) {
const isSelf = String(userId) === currentUserId; const isSelf = String(userId) === currentUserId;
const form = document.getElementById('form-password');
document.getElementById('form-password').reset(); form.reset();
resetPasswordVisibility(form);
document.getElementById('password-field-user-id').value = userId; document.getElementById('password-field-user-id').value = userId;
document.getElementById('modal-password-title').textContent = isSelf document.getElementById('modal-password-title').textContent = isSelf
? '🔑 Change Your Password' ? '🔑 Change Your Password'
@@ -60,14 +89,21 @@ document.getElementById('btn-cancel-user').addEventListener('click', closeUserMo
document.getElementById('btn-close-password-modal').addEventListener('click', closePasswordModal); document.getElementById('btn-close-password-modal').addEventListener('click', closePasswordModal);
document.getElementById('btn-cancel-password').addEventListener('click', closePasswordModal); document.getElementById('btn-cancel-password').addEventListener('click', closePasswordModal);
userModal.addEventListener('click', (e) => { if (e.target === userModal) closeUserModal(); }); // Password visibility toggles (works inside both modals)
passwordModal.addEventListener('click', (e) => { if (e.target === passwordModal) closePasswordModal(); }); document.addEventListener('click', (e) => {
const toggleBtn = e.target.closest('.password-toggle-btn');
if (!toggleBtn) return;
window.addEventListener('keydown', (e) => { const targetId = toggleBtn.dataset.target;
if (e.key === 'Escape') { const input = document.getElementById(targetId);
closeUserModal(); if (!input) return;
closePasswordModal();
} const isPassword = input.type === 'password';
input.type = isPassword ? 'text' : 'password';
toggleBtn.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
toggleBtn.innerHTML = isPassword ? EYE_OFF_SVG : EYE_OPEN_SVG;
input.focus();
}); });
// Create user // Create user
admin/users.php
+45 -5
View File
@@ -255,12 +255,28 @@ $users = get_all_users();
<div class="form-group"> <div class="form-group">
<label for="user-field-password">Password</label> <label for="user-field-password">Password</label>
<input type="password" id="user-field-password" name="password" class="form-control" autocomplete="new-password" minlength="8" required> <div class="password-input-wrap">
<input type="password" id="user-field-password" name="password" class="form-control" autocomplete="new-password" minlength="8" required>
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="user-field-password">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
<circle cx="12" cy="12" r="3" />
</svg>
</button>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="user-field-confirm">Confirm Password</label> <label for="user-field-confirm">Confirm Password</label>
<input type="password" id="user-field-confirm" name="confirm_password" class="form-control" autocomplete="new-password" minlength="8" required> <div class="password-input-wrap">
<input type="password" id="user-field-confirm" name="confirm_password" class="form-control" autocomplete="new-password" minlength="8" required>
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="user-field-confirm">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
<circle cx="12" cy="12" r="3" />
</svg>
</button>
</div>
</div> </div>
</div> </div>
@@ -287,17 +303,41 @@ $users = get_all_users();
<div class="form-grid"> <div class="form-grid">
<div class="form-group full-width" id="password-current-group"> <div class="form-group full-width" id="password-current-group">
<label for="password-field-current">Current Password</label> <label for="password-field-current">Current Password</label>
<input type="password" id="password-field-current" name="current_password" class="form-control" autocomplete="current-password"> <div class="password-input-wrap">
<input type="password" id="password-field-current" name="current_password" class="form-control" autocomplete="current-password">
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="password-field-current">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
<circle cx="12" cy="12" r="3" />
</svg>
</button>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password-field-new">New Password</label> <label for="password-field-new">New Password</label>
<input type="password" id="password-field-new" name="new_password" class="form-control" autocomplete="new-password" minlength="8" required> <div class="password-input-wrap">
<input type="password" id="password-field-new" name="new_password" class="form-control" autocomplete="new-password" minlength="8" required>
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="password-field-new">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
<circle cx="12" cy="12" r="3" />
</svg>
</button>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password-field-confirm">Confirm New Password</label> <label for="password-field-confirm">Confirm New Password</label>
<input type="password" id="password-field-confirm" name="confirm_password" class="form-control" autocomplete="new-password" minlength="8" required> <div class="password-input-wrap">
<input type="password" id="password-field-confirm" name="confirm_password" class="form-control" autocomplete="new-password" minlength="8" required>
<button type="button" class="password-toggle-btn" aria-label="Show password" data-target="password-field-confirm">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="icon-eye">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
<circle cx="12" cy="12" r="3" />
</svg>
</button>
</div>
</div> </div>
</div> </div>
styles.css
+47 -1
View File
@@ -1209,6 +1209,7 @@
.status-badge { .status-badge {
display: inline-flex; display: inline-flex;
flex-direction: row;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.4rem;
font-family: var(--font-mono); font-family: var(--font-mono);
@@ -1217,6 +1218,8 @@
text-transform: uppercase; text-transform: uppercase;
padding: 0.25rem 0.6rem; padding: 0.25rem 0.6rem;
border-radius: 0.125rem; border-radius: 0.125rem;
white-space: nowrap;
line-height: 1.2;
} }
.status-badge.active { .status-badge.active {
@@ -1268,7 +1271,12 @@
display: inline-flex; display: inline-flex;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: nowrap;
white-space: nowrap;
}
.admin-table-actions .btn {
white-space: nowrap;
} }
.btn-sm { .btn-sm {
@@ -1536,6 +1544,44 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
/* password toggle input wrapper */
.password-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.password-input-wrap .form-control,
.password-input-wrap .form-input {
padding-right: 2.75rem;
}
.password-toggle-btn {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--ink-muted);
cursor: pointer;
padding: 0.35rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.125rem;
transition: color .15s ease;
}
.password-toggle-btn:hover {
color: var(--gold-bright);
}
.password-toggle-btn svg {
width: 1.15rem;
height: 1.15rem;
}
/* menu page specific headers & spacing */ /* menu page specific headers & spacing */
.menu-page-header { .menu-page-header {
padding-block: 4.5rem 2.5rem; padding-block: 4.5rem 2.5rem;