Add self-service password change + forgot-password guidance

- Logged-in users can change their own password from a "Password" link
  in the top-right pill (dialog -> POST /api/auth/password, which requires
  the current password).
- Login page gains a "Forgot password?" link explaining that resets are
  admin-assisted (admins reset from the console). No SMTP, so no email
  reset flow yet.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

html/auth-guard.js

@@ -39,6 +39,63 @@
       .then(function () { window.location.replace('login.html'); });
   };
 
+  // Change-password dialog (uses POST /api/auth/password, which requires the
+  // current password). Available from the top-right pill on any page.
+  window.wpChangePassword = function () {
+    if (document.getElementById('wp-pw-modal')) return;
+    var ov = document.createElement('div');
+    ov.id = 'wp-pw-modal';
+    ov.style.cssText = 'position:fixed;inset:0;background:rgba(20,30,50,.5);display:flex;align-items:center;' +
+      'justify-content:center;z-index:10002;padding:20px;font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;';
+    var inp = 'width:100%;padding:9px 10px;margin-bottom:12px;border:1px solid #8d8d8d;border-radius:4px;font-size:14px;';
+    var lbl = 'display:block;font-size:12px;color:#525252;margin-bottom:4px;';
+    ov.innerHTML =
+      '<div style="background:#fff;color:#161616;border-radius:10px;max-width:380px;width:100%;box-shadow:0 12px 40px rgba(20,30,50,.3);overflow:hidden;">' +
+        '<div style="padding:14px 18px;border-bottom:1px solid #e0e0e0;font-weight:700;">Change password</div>' +
+        '<div style="padding:16px 18px;">' +
+          '<div id="wp-pw-msg" style="display:none;font-size:12.5px;padding:8px 10px;border-radius:6px;margin-bottom:12px;"></div>' +
+          '<label style="' + lbl + '">Current password</label>' +
+          '<input id="wp-pw-cur" type="password" autocomplete="current-password" style="' + inp + '">' +
+          '<label style="' + lbl + '">New password (at least 8 characters)</label>' +
+          '<input id="wp-pw-new" type="password" autocomplete="new-password" style="' + inp + '">' +
+          '<label style="' + lbl + '">Confirm new password</label>' +
+          '<input id="wp-pw-new2" type="password" autocomplete="new-password" style="' + inp + 'margin-bottom:0;">' +
+        '</div>' +
+        '<div style="padding:12px 18px;border-top:1px solid #e0e0e0;display:flex;gap:8px;justify-content:flex-end;">' +
+          '<button type="button" id="wp-pw-cancel" style="padding:8px 14px;border:1px solid #8d8d8d;background:#fff;border-radius:6px;cursor:pointer;font-weight:600;">Cancel</button>' +
+          '<button type="button" id="wp-pw-save" style="padding:8px 14px;border:none;background:#0f62fe;color:#fff;border-radius:6px;cursor:pointer;font-weight:600;">Update password</button>' +
+        '</div>' +
+      '</div>';
+    function close() { var m = document.getElementById('wp-pw-modal'); if (m) m.remove(); }
+    function msg(text, ok) {
+      var el = document.getElementById('wp-pw-msg');
+      el.style.display = 'block'; el.textContent = text;
+      el.style.background = ok ? '#defbe6' : '#fff1f1'; el.style.color = ok ? '#0e6027' : '#da1e28';
+    }
+    ov.addEventListener('click', function (e) { if (e.target === ov) close(); });
+    document.body.appendChild(ov);
+    document.getElementById('wp-pw-cancel').onclick = close;
+    document.getElementById('wp-pw-cur').focus();
+    document.getElementById('wp-pw-save').onclick = function () {
+      var cur = document.getElementById('wp-pw-cur').value;
+      var n1 = document.getElementById('wp-pw-new').value;
+      var n2 = document.getElementById('wp-pw-new2').value;
+      if (!cur || !n1) { msg('Please fill in every field.', false); return; }
+      if (n1.length < 8) { msg('New password must be at least 8 characters.', false); return; }
+      if (n1 !== n2) { msg('New passwords do not match.', false); return; }
+      fetch('/api/auth/password', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ current_password: cur, new_password: n1 })
+      })
+        .then(function (r) { return r.json().catch(function () { return null; }).then(function (j) { return { ok: r.ok, status: r.status, j: j }; }); })
+        .then(function (res) {
+          if (res.ok) { msg('Password updated.', true); setTimeout(close, 1200); }
+          else { msg((res.j && res.j.detail) || ('Could not update (HTTP ' + res.status + ').'), false); }
+        })
+        .catch(function () { msg('Could not reach the server.', false); });
+    };
+  };
+
   function addLogoutPill(user) {
     if (inIframe) return;  // the parent page already shows it
     if (document.getElementById('wp-logout-pill')) return;
@@ -63,6 +120,12 @@
       pill.appendChild(sep()); pill.appendChild(adm);
     }
 
+    var pw = document.createElement('a');
+    pw.href = '#'; pw.textContent = 'Password';
+    pw.style.cssText = 'color:#0f62fe;text-decoration:none;font-weight:600;';
+    pw.addEventListener('click', function (e) { e.preventDefault(); window.wpChangePassword(); });
+    pill.appendChild(sep()); pill.appendChild(pw);
+
     var out = document.createElement('a');
     out.href = '#'; out.textContent = 'Sign out';
     out.style.cssText = 'color:#0f62fe;text-decoration:none;font-weight:600;';

html/login.html

@@ -94,6 +94,13 @@
       <button id="submit" type="submit">Sign in</button>
     </form>
 
+    <p style="margin-top:1.25rem; text-align:center; font-size:0.8125rem;">
+      <a href="#" id="forgot-link" style="color:var(--cds-link-primary); text-decoration:none;">Forgot password?</a>
+    </p>
+    <div id="forgot-msg" style="display:none; margin-top:0.5rem; font-size:0.8125rem; color:var(--cds-text-secondary); background:var(--cds-layer-accent); border-left:3px solid var(--cds-link-primary); padding:0.75rem; border-radius:0 6px 6px 0;">
+      Password resets are handled by an administrator. Contact your project admin and they'll set a new one for you. Once you're signed in, you can change it yourself anytime from the menu in the top-right corner.
+    </div>
+
     <p class="foot">Authorized use only · BTG / Pilot</p>
   </main>
 

html/login.js

@@ -25,6 +25,15 @@
     errorBox.classList.add('show');
   }
 
+  var forgot = document.getElementById('forgot-link');
+  if (forgot) {
+    forgot.addEventListener('click', function (e) {
+      e.preventDefault();
+      var m = document.getElementById('forgot-msg');
+      if (m) m.style.display = 'block';
+    });
+  }
+
   form.addEventListener('submit', function (e) {
     e.preventDefault();
     errorBox.classList.remove('show');