Add password visibility toggle to user and admin forms

admin/login.php

@@ -45,12 +45,39 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
       </div>
       <div class="form-group">
         <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>
       <button type="submit" class="btn btn-primary login-btn">Sign In</button>
     </form>
 
     <a href="../" class="back-link">← Return to Pub Website</a>
   </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>
 </html>

admin/menu.js

@@ -101,18 +101,6 @@ document.getElementById('btn-cancel-item').addEventListener('click', closeItemMo
 document.getElementById('btn-close-cat-modal').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)
 document.getElementById('form-item').addEventListener('submit', async (e) => {
   e.preventDefault();

admin/users.js

@@ -23,9 +23,36 @@ async function postForm(formData) {
   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
 function openUserModal() {
-  document.getElementById('form-user').reset();
+  const form = document.getElementById('form-user');
+  form.reset();
+  resetPasswordVisibility(form);
   userModal.classList.add('is-open');
   document.getElementById('user-field-username').focus();
 }
@@ -37,8 +64,10 @@ function closeUserModal() {
 // Change Password modal
 function openPasswordModal(userId, username) {
   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('modal-password-title').textContent = isSelf
     ? '🔑 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-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

admin/users.php

@@ -255,12 +255,28 @@ $users = get_all_users();
 
           <div class="form-group">
             <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 class="form-group">
             <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>
 
@@ -287,17 +303,41 @@ $users = get_all_users();
         <div class="form-grid">
           <div class="form-group full-width" id="password-current-group">
             <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 class="form-group">
             <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 class="form-group">
             <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>
 

styles.css

@@ -1209,6 +1209,7 @@
 
   .status-badge {
     display: inline-flex;
+    flex-direction: row;
     align-items: center;
     gap: 0.4rem;
     font-family: var(--font-mono);
@@ -1217,6 +1218,8 @@
     text-transform: uppercase;
     padding: 0.25rem 0.6rem;
     border-radius: 0.125rem;
+    white-space: nowrap;
+    line-height: 1.2;
   }
 
   .status-badge.active {
@@ -1268,7 +1271,12 @@
     display: inline-flex;
     gap: 0.5rem;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+
+  .admin-table-actions .btn {
+    white-space: nowrap;
   }
 
   .btn-sm {
@@ -1536,6 +1544,44 @@
     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-header {
     padding-block: 4.5rem 2.5rem;