feat: add password reset email

components/auth/verify-email-banner.tsx

@@ -5,27 +5,34 @@ import { auth, AuthError } from "@/lib/auth";
 import { useAuth } from "./auth-provider";
 
 /**
- * Persistent top ribbon shown when a logged-in user has not yet verified
- * their email. Lets them re-trigger the verification mail without leaving
- * the page.
+ * Top ribbon for accounts whose email is either missing (OAuth sign-up
+ * without an address) or present-but-unverified.
+ *
+ * Two modes:
+ *   • Missing email — an inline "Add your email" input that POSTs to
+ *     /auth/email. On success the user state refreshes and the banner
+ *     automatically flips into the "verify your email" mode.
+ *   • Unverified email — existing "Resend verification" call to action.
  *
  * Renders nothing when:
  *   - auth state is still loading
  *   - user is logged out
- *   - user.email_verified_at is set
- *   - user dismissed it for this session (banner is meant to be persistent
- *     across navigations but skippable per-tab; we keep the dismissed flag
- *     in component state so a refresh brings it back)
+ *   - user.email_verified_at is set (the address has been confirmed)
+ *   - user dismissed it for this session (persistent across navigations
+ *     but reset on full page refresh)
  */
 export function VerifyEmailBanner() {
-  const { user, loading } = useAuth();
+  const { user, loading, setUser } = useAuth();
   const [sent, setSent] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
   const [dismissed, setDismissed] = useState(false);
+  const [newEmail, setNewEmail] = useState("");
 
   if (loading || !user || user.email_verified_at || dismissed) return null;
 
+  const needsEmail = !user.email;
+
   async function onResend() {
     setError(null);
     setBusy(true);
@@ -41,18 +48,68 @@ export function VerifyEmailBanner() {
     }
   }
 
+  async function onSetEmail(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setBusy(true);
+    try {
+      const updated = await auth.setEmail(newEmail);
+      setUser(updated);
+      setSent(true);
+    } catch (err) {
+      setError(err instanceof AuthError ? err.message : "Could not save email.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <div className="w-full bg-amber-50 dark:bg-amber-950/40 text-amber-900 dark:text-amber-100 border-b border-amber-200/60 dark:border-amber-800/60">
       <div className="max-w-5xl mx-auto px-4 py-2 flex flex-wrap items-center justify-between gap-3 text-sm">
-        <p>
-          {sent
-            ? "✓ Verification email sent — check your inbox."
-            : error
-              ? error
-              : `Verify your email (${user.email}) to secure your account.`}
-        </p>
+        {sent ? (
+          <p>
+            {needsEmail
+              ? "✓ Email saved — check your inbox for a verification link."
+              : "✓ Verification email sent — check your inbox."}
+          </p>
+        ) : needsEmail ? (
+          <form
+            onSubmit={onSetEmail}
+            className="flex flex-1 flex-wrap items-center gap-2"
+          >
+            <label htmlFor="banner-email" className="shrink-0">
+              Add an email to your account:
+            </label>
+            <input
+              id="banner-email"
+              type="email"
+              required
+              value={newEmail}
+              onChange={(e) => setNewEmail(e.target.value)}
+              placeholder="you@example.com"
+              className="flex-1 min-w-[12rem] rounded-md border border-amber-300/70 dark:border-amber-800/70 bg-white/70 dark:bg-amber-950/30 px-2 py-1 text-amber-900 dark:text-amber-50 placeholder:text-amber-700/50 dark:placeholder:text-amber-200/40"
+            />
+            <button
+              type="submit"
+              disabled={busy || newEmail.trim() === ""}
+              className="font-medium underline-offset-2 hover:underline disabled:opacity-60"
+            >
+              {busy ? "Saving…" : "Save"}
+            </button>
+            {error ? (
+              <span className="text-amber-900/80 dark:text-amber-100/80">
+                {error}
+              </span>
+            ) : null}
+          </form>
+        ) : (
+          <p>
+            {error ?? `Verify your email (${user.email}) to secure your account.`}
+          </p>
+        )}
+
         <div className="flex items-center gap-2">
-          {!sent ? (
+          {!sent && !needsEmail ? (
             <button
               type="button"
               onClick={onResend}