Password reset by email

"Forgot your password?" on web and mobile sends a one-time link (1 hour) to the account's email; the website's reset page sets the new password, signs out every other session and signs in. The request responds the same whether or not the email has an account, and the email goes out in the background so timing doesn't reveal it either. Only a hash of the link token is stored. Sends through SMTP_* settings; without them, emails are logged (and captured in tests). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8
2026-10-06 01:05:30 -04:00
parent 2b02aa8e89
commit 1f0cdb68f5
21 changed files with 1811 additions and 5 deletions
@@ -0,0 +1,59 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { api } from '@/lib/api';
+
+export default function ForgotPasswordPage() {
+  const [sentTo, setSentTo] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const email = String(new FormData(e.currentTarget).get('email') ?? '').trim();
+    setBusy(true);
+    setError(null);
+    try {
+      await api('/auth/forgot-password', { body: { email } });
+      setSentTo(email);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+    setBusy(false);
+  };
+
+  if (sentTo) {
+    return (
+      <div className="card form narrow">
+        <h1>Check your email</h1>
+        <p>
+          If <strong>{sentTo}</strong> has a musicshare account, we&apos;ve sent it a link to choose a new password. It
+          expires in an hour.
+        </p>
+        <p className="muted">Nothing there? Check your spam folder, or try again in a minute.</p>
+        <Link href="/login" className="btn">
+          Back to log in
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <form className="card form narrow" onSubmit={onSubmit}>
+      <h1>Reset your password</h1>
+      <p className="muted">Enter the email you signed up with and we&apos;ll send you a link to choose a new password.</p>
+      <label>
+        Email
+        <input name="email" type="email" required autoComplete="email" autoFocus />
+      </label>
+      {error && <p className="error">{error}</p>}
+      <button className="btn btn-primary" disabled={busy}>
+        {busy ? 'Sending…' : 'Send reset link'}
+      </button>
+      <p className="muted">
+        Remembered it? <Link href="/login">Log in</Link>
+      </p>
+    </form>
+  );
+}