Add self-service password change, forgot-password flow, and fix admin UI bugs

Users can change their own password from the profile modal, and a
"forgot password" link sends a 15-minute expiring reset link (same
hashed-token pattern as site invites). The forgot-password response is
always generic so it never reveals which emails are registered.

Also fixes two admin-page display bugs found while testing: table row
divider lines that didn't line up across a row (the actions column had
`display: flex` on the <td> itself, breaking it out of normal table-cell
layout -- moved to a child <div>), and the pending-invites list floating
with no visual grouping (now boxed with a label and per-status badges).

frontend/src/components/Modal.css

@@ -48,6 +48,8 @@
 }
 
 .modal input[type='text'],
+.modal input[type='password'],
+.modal input[type='email'],
 .modal textarea {
   width: 100%;
   background: var(--ds-surface-2);
@@ -62,6 +64,8 @@
 }
 
 .modal input[type='text']:focus,
+.modal input[type='password']:focus,
+.modal input[type='email']:focus,
 .modal textarea:focus {
   border-color: var(--ds-accent);
 }
@@ -78,6 +82,18 @@
   margin: -8px 0 var(--sp-3);
 }
 
+.modal-success {
+  color: var(--ds-accent);
+  font-size: 0.82rem;
+  margin: -8px 0 var(--sp-3);
+}
+
+.modal-divider {
+  border: none;
+  border-top: 1px solid var(--ds-border);
+  margin: var(--sp-5) 0 var(--sp-4);
+}
+
 .toggle-row {
   display: flex;
   align-items: center;

frontend/src/components/ProfileModal.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, type ChangeEvent, type FormEvent } from 'react'
-import { removeAvatar, updateProfile, uploadAvatar } from '../api/auth'
+import { changePassword, removeAvatar, updateProfile, uploadAvatar } from '../api/auth'
 import { ApiError } from '../api/client'
 import { getUserAvatarUrl } from '../api/users'
 import { useAuth } from '../context/AuthContext'
@@ -19,6 +19,13 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
   const [uploadingAvatar, setUploadingAvatar] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [passwordError, setPasswordError] = useState<string | null>(null)
+  const [passwordSuccess, setPasswordSuccess] = useState(false)
+  const [savingPassword, setSavingPassword] = useState(false)
+
   if (!user) return null
 
   async function handleSaveName(e: FormEvent) {
@@ -61,6 +68,28 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
     }
   }
 
+  async function handleChangePassword(e: FormEvent) {
+    e.preventDefault()
+    setPasswordError(null)
+    setPasswordSuccess(false)
+    if (newPassword !== confirmPassword) {
+      setPasswordError("New passwords don't match")
+      return
+    }
+    setSavingPassword(true)
+    try {
+      await changePassword(currentPassword, newPassword)
+      setCurrentPassword('')
+      setNewPassword('')
+      setConfirmPassword('')
+      setPasswordSuccess(true)
+    } catch (err) {
+      setPasswordError(err instanceof ApiError ? err.message : String(err))
+    } finally {
+      setSavingPassword(false)
+    }
+  }
+
   const avatarUrl = user.avatar_filename ? getUserAvatarUrl(user.id, user.avatar_filename) : null
 
   return (
@@ -123,6 +152,46 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
             </button>
           </div>
         </form>
+
+        <hr className="modal-divider" />
+
+        <form onSubmit={handleChangePassword}>
+          <div className="modal-field-label">Change password</div>
+          <input
+            type="password"
+            value={currentPassword}
+            onChange={(e) => setCurrentPassword(e.target.value)}
+            placeholder="Current password"
+            autoComplete="current-password"
+          />
+          <input
+            type="password"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            placeholder="New password"
+            autoComplete="new-password"
+            minLength={8}
+          />
+          <input
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            placeholder="Confirm new password"
+            autoComplete="new-password"
+            minLength={8}
+          />
+          {passwordError && <p className="modal-error">{passwordError}</p>}
+          {passwordSuccess && <p className="modal-success">Password updated.</p>}
+          <div className="modal-actions">
+            <button
+              type="submit"
+              className="btn-primary"
+              disabled={savingPassword || !currentPassword || !newPassword || !confirmPassword}
+            >
+              {savingPassword ? 'Saving…' : 'Update password'}
+            </button>
+          </div>
+        </form>
       </div>
     </div>
   )