Email confirmation, change email/password, show/hide passwords

- Sign-up emails a confirmation link (24h); unconfirmed accounts see a
  banner on the web with "send it again", and status in Settings.
- Change email (needs the password): the new address gets a confirmation
  link and only replaces the old one once clicked; the old address gets a
  heads-up with a reset-password link. Pending changes can be cancelled.
- Change password (needs the current one): signs out other sessions.
- Password fields have Show/Hide on web and mobile.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8

apps/web/src/app/globals.css

@@ -90,6 +90,8 @@ input:focus, textarea:focus, select:focus {
 .report { padding: 0.85rem; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; gap: 0.5rem; }
 .report p { margin: 0; }
 .chip-small.danger { background: rgba(251, 113, 133, 0.18); color: var(--danger); }
+.banner { max-width: 680px; margin: 0 auto 0.5rem; padding: 0.6rem 1rem; border-radius: 0.8rem; background: rgba(123, 47, 247, 0.16); border: 1px solid rgba(123, 47, 247, 0.35); font-size: 0.9rem; }
+.banner .link-button { font-size: inherit; color: var(--text); text-decoration: underline; }
 .avatar-picker { display: flex; gap: 1rem; align-items: center; }
 .avatar-picker-actions { display: flex; flex-direction: column; gap: 0.4rem; }
 .grow { flex: 1; min-width: 0; }

apps/web/src/app/settings/page.tsx

@@ -40,6 +40,7 @@ function Settings() {
     <div className="stack">
       <h1>Settings</h1>
       <ProfileForm me={me} />
+      <AccountSettings me={me} />
       <SharingControls />
       <Connections />
       <FeaturedPicker />
@@ -148,6 +149,129 @@ function AvatarPicker({ me }: { me: MeDTO }) {
   );
 }
 
+function AccountSettings({ me }: { me: MeDTO }) {
+  const { mutate } = useMe();
+  const [editing, setEditing] = useState<'email' | 'password' | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [show, setShow] = useState(false);
+
+  const run = async (fn: () => Promise<unknown>, done: string) => {
+    setError(null);
+    try {
+      await fn();
+      await mutate();
+      setEditing(null);
+      setMessage(done);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+  const field = (f: FormData, k: string) => String(f.get(k) ?? '');
+
+  return (
+    <section className="card form">
+      <h2>Account</h2>
+      <div>
+        <div className="muted">Email</div>
+        <div>
+          {me.email}{' '}
+          {me.emailVerified ? <span className="chip-small">Confirmed</span> : <span className="chip-small danger">Not confirmed</span>}
+        </div>
+        {me.pendingEmail && (
+          <p className="muted">
+            Changing to <strong>{me.pendingEmail}</strong>: open the link we sent there.{' '}
+            <button type="button" className="link-button" onClick={() => run(() => client.cancelEmailChange(), 'Email change cancelled.')}>
+              Cancel
+            </button>
+          </p>
+        )}
+        {!me.emailVerified && !me.pendingEmail && (
+          <button type="button" className="link-button" onClick={() => run(() => client.resendVerification(), `Sent a new link to ${me.email}.`)}>
+            Send the confirmation link again
+          </button>
+        )}
+      </div>
+
+      {editing === 'email' ? (
+        <form
+          className="form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            const f = new FormData(e.currentTarget);
+            const email = field(f, 'email');
+            run(() => client.changeEmail({ email, password: field(f, 'password') }), `Check ${email} for a confirmation link.`);
+          }}
+        >
+          <label>
+            New email
+            <input name="email" type="email" required autoComplete="email" />
+          </label>
+          <label>
+            Your password
+            <input name="password" type={show ? 'text' : 'password'} required autoComplete="current-password" />
+          </label>
+          <ShowPassword show={show} setShow={setShow} />
+          <FormButtons label="Send confirmation link" onCancel={() => setEditing(null)} />
+        </form>
+      ) : editing === 'password' ? (
+        <form
+          className="form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            const f = new FormData(e.currentTarget);
+            run(
+              () => client.changePassword({ currentPassword: field(f, 'current'), newPassword: field(f, 'new') }),
+              'Password changed. Your other devices were signed out.',
+            );
+          }}
+        >
+          <label>
+            Current password
+            <input name="current" type={show ? 'text' : 'password'} required autoComplete="current-password" />
+          </label>
+          <label>
+            New password
+            <input name="new" type={show ? 'text' : 'password'} required minLength={8} maxLength={200} autoComplete="new-password" />
+          </label>
+          <ShowPassword show={show} setShow={setShow} />
+          <FormButtons label="Change password" onCancel={() => setEditing(null)} />
+        </form>
+      ) : (
+        <div className="row">
+          <button type="button" className="btn" onClick={() => (setMessage(null), setEditing('email'))}>
+            Change email
+          </button>
+          <button type="button" className="btn" onClick={() => (setMessage(null), setEditing('password'))}>
+            Change password
+          </button>
+        </div>
+      )}
+      {message && <p className="muted">{message}</p>}
+      {error && <p className="error">{error}</p>}
+    </section>
+  );
+}
+
+function ShowPassword({ show, setShow }: { show: boolean; setShow: (v: boolean) => void }) {
+  return (
+    <label className="checkbox">
+      <input type="checkbox" checked={show} onChange={(e) => setShow(e.target.checked)} /> Show passwords
+    </label>
+  );
+}
+
+function FormButtons({ label, onCancel }: { label: string; onCancel: () => void }) {
+  return (
+    <div className="row">
+      <button className="btn btn-primary">{label}</button>
+      <button type="button" className="btn" onClick={onCancel}>
+        Cancel
+      </button>
+    </div>
+  );
+}
+
 function BlockedAccounts() {
   const { data: blocked = [], mutate } = useSWR<UserSummaryDTO[]>('/me/blocks', fetcher);
   return (

apps/web/src/app/verify-email/page.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { Suspense, useEffect, useRef, useState } from 'react';
+import { client, useMe } from '@/lib/api';
+
+export default function VerifyEmailPage() {
+  return (
+    <Suspense>
+      <VerifyEmail />
+    </Suspense>
+  );
+}
+
+function VerifyEmail() {
+  const token = useSearchParams().get('token');
+  const { me, mutate } = useMe();
+  const [state, setState] = useState<{ ok: true; email: string } | { ok: false; error: string } | null>(null);
+  const started = useRef(false);
+
+  useEffect(() => {
+    if (!token || started.current) return; // links work once; don't send twice in dev's double effects
+    started.current = true;
+    client
+      .verifyEmail(token)
+      .then((res) => {
+        setState(res);
+        void mutate();
+      })
+      .catch((err: Error) => setState({ ok: false, error: err.message }));
+  }, [token, mutate]);
+
+  if (!token) return <Result title="Link incomplete" body="Open the link straight from the email." />;
+  if (!state) return <Result title="Confirming…" body="One moment." />;
+  if (!state.ok) {
+    return (
+      <Result title="Couldn't confirm" body={state.error}>
+        {me && <p className="muted">You can send a new link from the banner at the top, or from Settings.</p>}
+      </Result>
+    );
+  }
+  return (
+    <Result title="Email confirmed ✓" body={`${state.email} is confirmed for your musicshare account.`}>
+      <Link href={me ? '/' : '/login'} className="btn btn-primary">
+        {me ? 'Go to your feed' : 'Log in'}
+      </Link>
+    </Result>
+  );
+}
+
+function Result({ title, body, children }: { title: string; body: string; children?: React.ReactNode }) {
+  return (
+    <div className="card form narrow">
+      <h1>{title}</h1>
+      <p>{body}</p>
+      {children}
+    </div>
+  );
+}

apps/web/src/components/AuthForm.tsx

@@ -10,6 +10,7 @@ export function AuthForm({ mode }: { mode: 'login' | 'register' }) {
   const { mutate } = useMe();
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -43,12 +44,15 @@ export function AuthForm({ mode }: { mode: 'login' | 'register' }) {
         Password
         <input
           name="password"
-          type="password"
+          type={showPassword ? 'text' : 'password'}
           required
           minLength={mode === 'register' ? 8 : 1}
           autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
         />
       </label>
+      <label className="checkbox">
+        <input type="checkbox" checked={showPassword} onChange={(e) => setShowPassword(e.target.checked)} /> Show password
+      </label>
       {error && <p className="error">{error}</p>}
       <button className="btn btn-primary" disabled={busy}>
         {mode === 'login' ? 'Log in' : 'Sign up'}

apps/web/src/components/Nav.tsx

@@ -2,7 +2,8 @@
 
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { api, useMe } from '@/lib/api';
+import { useState } from 'react';
+import { api, client, useMe } from '@/lib/api';
 import { SupportLink } from './SupportLink';
 
 export function Nav() {
@@ -14,6 +15,7 @@ export function Nav() {
     router.push('/');
   };
   return (
+    <>
     <nav className="nav">
       <Link href="/" className="brand">
         <img className="brand-logo" src="/logo.png" alt="" width={30} height={30} />
@@ -41,5 +43,26 @@ export function Nav() {
         )}
       </div>
     </nav>
+    {me && !me.emailVerified && <VerifyBanner email={me.pendingEmail ?? me.email} />}
+    </>
+  );
+}
+
+/** Until they confirm, a forgotten password can't be reset; nudge them. */
+function VerifyBanner({ email }: { email: string }) {
+  const [sent, setSent] = useState(false);
+  const resend = async () => {
+    try {
+      await client.resendVerification();
+      setSent(true);
+    } catch (err) {
+      alert((err as Error).message);
+    }
+  };
+  return (
+    <div className="banner">
+      Confirm your email: we sent a link to <strong>{email}</strong>.{' '}
+      {sent ? <span className="muted">Sent again.</span> : <button className="link-button" onClick={resend}>Send it again</button>}
+    </div>
   );
 }