Refactor admin panel: enhance user management and security features

- Added role-based access control for user management links in admin navigation.
- Improved user account display with a dedicated account link.
- Implemented form submission confirmation for delete actions in the admin interface.
- Introduced a password visibility toggle on the login page.
- Added login throttling to prevent brute-force attacks, recording failed attempts.
- Created a CLI script for creating an admin user, replacing the previous hardcoded admin credentials.
- Updated database schema to support login attempt tracking.
- Enhanced user editing functionality, allowing role changes with restrictions.
- Improved modal handling for user actions, ensuring better focus management.
- Added styles for new account management page and improved modal transitions.

admin/users.js

@@ -7,6 +7,7 @@ const currentUserId = document.body.dataset.currentUserId;
 
 const userModal = document.getElementById('modal-user-backdrop');
 const passwordModal = document.getElementById('modal-password-backdrop');
+const editModal = document.getElementById('modal-edit-backdrop');
 
 function escapeHtml(text) {
   const div = document.createElement('div');
@@ -54,11 +55,19 @@ function openUserModal() {
   form.reset();
   resetPasswordVisibility(form);
   userModal.classList.add('is-open');
-  document.getElementById('user-field-username').focus();
+}
+
+// Safari ignores autocomplete="off" on fields labeled "Username" and offers
+// saved logins whenever one has focus. The modals used to auto-focus that
+// field, and a closed modal left it focused, so the prompt kept popping up.
+// Now nothing is auto-focused, and closing a modal drops focus.
+function closeModal(modal) {
+  modal.classList.remove('is-open');
+  if (modal.contains(document.activeElement)) document.activeElement.blur();
 }
 
 function closeUserModal() {
-  userModal.classList.remove('is-open');
+  closeModal(userModal);
 }
 
 // Change Password modal
@@ -80,9 +89,76 @@ function openPasswordModal(userId, username) {
 }
 
 function closePasswordModal() {
-  passwordModal.classList.remove('is-open');
+  closeModal(passwordModal);
 }
 
+// Edit User modal
+function openEditModal(userId, username, role) {
+  const isSelf = String(userId) === currentUserId;
+  const form = document.getElementById('form-edit');
+  const roleSelect = document.getElementById('edit-field-role');
+
+  form.reset();
+  document.getElementById('edit-field-user-id').value = userId;
+  document.getElementById('edit-field-username').value = username;
+  roleSelect.value = role;
+  roleSelect.disabled = isSelf;
+  document.getElementById('edit-role-self-hint').hidden = !isSelf;
+
+  editModal.classList.add('is-open');
+}
+
+function closeEditModal() {
+  closeModal(editModal);
+}
+
+function capitalize(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+// Updates an existing row's text and data attributes in place after an edit.
+function updateUserRow(user) {
+  const row = document.getElementById(`user-row-${user.id}`);
+  if (!row) return;
+
+  row.querySelector('[data-label="Username"] strong').textContent = user.username;
+  row.querySelector('[data-label="Role"]').textContent = capitalize(user.role);
+  row.querySelectorAll('.btn-edit-user, .btn-change-password').forEach((btn) => {
+    btn.dataset.username = user.username;
+  });
+  row.querySelector('.btn-edit-user').dataset.role = user.role;
+
+  if (String(user.id) === currentUserId) {
+    const navName = document.querySelector('.admin-account-link');
+    if (navName) navName.textContent = user.username;
+  }
+}
+
+document.getElementById('btn-close-edit-modal').addEventListener('click', closeEditModal);
+document.getElementById('btn-cancel-edit').addEventListener('click', closeEditModal);
+
+document.getElementById('form-edit').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const saveBtn = document.getElementById('btn-save-edit');
+  saveBtn.disabled = true;
+  saveBtn.textContent = 'Saving...';
+
+  try {
+    const res = await postForm(new FormData(e.target));
+    if (res.success) {
+      closeEditModal();
+      updateUserRow(res.user);
+    } else {
+      alert(res.error || 'Failed to update user.');
+    }
+  } catch {
+    alert('Network error. Please try again.');
+  } finally {
+    saveBtn.disabled = false;
+    saveBtn.textContent = 'Save Changes';
+  }
+});
+
 document.getElementById('btn-new-user').addEventListener('click', () => openUserModal());
 document.getElementById('btn-close-user-modal').addEventListener('click', closeUserModal);
 document.getElementById('btn-cancel-user').addEventListener('click', closeUserModal);
@@ -184,6 +260,11 @@ document.getElementById('users-rows').addEventListener('click', async (e) => {
     return;
   }
 
+  if (target.classList.contains('btn-edit-user')) {
+    openEditModal(target.dataset.id, target.dataset.username, target.dataset.role);
+    return;
+  }
+
   if (target.classList.contains('btn-change-password')) {
     openPasswordModal(target.dataset.id, target.dataset.username);
     return;
@@ -236,11 +317,14 @@ function insertUserRow(user) {
     <div data-label="Role">${escapeHtml(user.role.charAt(0).toUpperCase() + user.role.slice(1))}</div>
     <div class="font-mono timestamp-cell" data-label="Created">${escapeHtml(user.created_at)}</div>
     <div data-label="Actions"><div class="row-actions"><div class="action-stack">
+      <button type="button" class="btn btn-outline btn-sm btn-edit-user" data-id="${user.id}">Edit</button>
       <button type="button" class="btn btn-outline btn-sm btn-change-password" data-id="${user.id}">Change Password</button>
       <button type="button" class="btn btn-danger btn-sm btn-delete-user" data-id="${user.id}">Delete</button>
     </div></div></div>
   `;
   row.querySelector('.btn-change-password').dataset.username = user.username;
+  row.querySelector('.btn-edit-user').dataset.username = user.username;
+  row.querySelector('.btn-edit-user').dataset.role = user.role;
 
   rowsContainer.appendChild(row);
 }