create-astram-app 0.7.0 → 0.9.0

package/template/frontend/src/auth/profileEdit.test.mjs

@@ -0,0 +1,135 @@
+// profileEdit.test.mjs — KI #14: changing the email needs the current password (and an MFA
+// code when the account has MFA) and only takes effect from the link sent to the new address.
+//
+//   node --test src/auth/profileEdit.test.mjs
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import { planProfileEdit, interpretProfileResult, PENDING_EMAIL_MESSAGE } from './profileEdit.js';
+
+const initial = { name: 'Jane', email: 'old@x.test' };
+const pw = 'p'.repeat(12);
+const form = (over = {}) => ({
+  name: 'Jane',
+  email: 'old@x.test',
+  currentPassword: '',
+  code: '',
+  codeRequired: false,
+  ...over,
+});
+
+describe('planProfileEdit', () => {
+  test('name only → no password asked, only the name is sent', () => {
+    assert.deepEqual(planProfileEdit(form({ name: ' New ' }), initial), {
+      changes: { name: 'New' },
+      emailChanging: false,
+    });
+  });
+
+  test('a password typed for a name-only edit is not sent', () => {
+    const plan = planProfileEdit(form({ name: 'New', currentPassword: pw }), initial);
+    assert.deepEqual(plan.changes, { name: 'New' });
+  });
+
+  test('empty name → error', () => {
+    assert.deepEqual(planProfileEdit(form({ name: '  ' }), initial), {
+      error: 'Please enter your name.',
+    });
+  });
+
+  test('nothing changed → error', () => {
+    assert.deepEqual(planProfileEdit(form(), initial), { error: 'Nothing to update.' });
+  });
+
+  test('email changed without a current password → error, nothing sent', () => {
+    assert.deepEqual(planProfileEdit(form({ email: 'new@x.test' }), initial), {
+      error: 'Enter your current password to change your email.',
+    });
+  });
+
+  test('email changed with the password → email + currentPassword sent', () => {
+    assert.deepEqual(
+      planProfileEdit(form({ email: ' new@x.test ', currentPassword: pw }), initial),
+      { changes: { email: 'new@x.test', currentPassword: pw }, emailChanging: true },
+    );
+  });
+
+  test('MFA account: a code is required and sent with the email change', () => {
+    assert.deepEqual(
+      planProfileEdit(
+        form({ email: 'new@x.test', currentPassword: pw, codeRequired: true }),
+        initial,
+      ),
+      { error: 'Enter a code from your authenticator app or a recovery code.' },
+    );
+    assert.deepEqual(
+      planProfileEdit(
+        form({ email: 'new@x.test', currentPassword: pw, codeRequired: true, code: ' 123456 ' }),
+        initial,
+      ),
+      {
+        changes: { email: 'new@x.test', currentPassword: pw, code: '123456' },
+        emailChanging: true,
+      },
+    );
+  });
+
+  test('name and email together → both sent, plus the proof', () => {
+    const plan = planProfileEdit(
+      form({ name: 'New', email: 'new@x.test', currentPassword: pw }),
+      initial,
+    );
+    assert.deepEqual(plan.changes, { name: 'New', email: 'new@x.test', currentPassword: pw });
+  });
+
+  test('the password is never trimmed', () => {
+    const plan = planProfileEdit(
+      form({ email: 'new@x.test', currentPassword: ` ${pw} ` }),
+      initial,
+    );
+    assert.equal(plan.changes.currentPassword, ` ${pw} `);
+  });
+});
+
+describe('interpretProfileResult', () => {
+  test('200 → saved', () => {
+    assert.deepEqual(interpretProfileResult({ ok: true, profile: {} }), { kind: 'saved' });
+  });
+
+  test('202 → pending, with the "check your new inbox" message', () => {
+    assert.deepEqual(interpretProfileResult({ ok: true, pendingEmail: true, profile: {} }), {
+      kind: 'pending',
+      message: PENDING_EMAIL_MESSAGE,
+    });
+    assert.equal(
+      PENDING_EMAIL_MESSAGE,
+      'We sent a confirmation link to the new address. Your email changes when you open it.',
+    );
+  });
+
+  test('mfa_required / invalid_code → error that shows the code field', () => {
+    for (const reason of ['mfa_required', 'invalid_code']) {
+      assert.deepEqual(interpretProfileResult({ ok: false, status: 400, reason, error: 'E' }), {
+        kind: 'error',
+        error: 'E',
+        showCode: true,
+      });
+    }
+  });
+
+  test('other failures → error, code field unchanged', () => {
+    assert.deepEqual(
+      interpretProfileResult({
+        ok: false,
+        status: 400,
+        reason: 'invalid_current_password',
+        error: 'Current password is incorrect.',
+      }),
+      { kind: 'error', error: 'Current password is incorrect.', showCode: false },
+    );
+    assert.deepEqual(interpretProfileResult({ ok: false, status: 500 }), {
+      kind: 'error',
+      error: 'Could not update your profile.',
+      showCode: false,
+    });
+  });
+});

package/template/frontend/src/pages/ConfirmEmail.jsx

@@ -0,0 +1,123 @@
+/**
+ * ConfirmEmail — the page the email-change link opens (`/confirm-email#t=…`, KI #14).
+ *
+ * Public: the link may be opened on a device with no session, and a signed-in user is not
+ * bounced away (that would drop the fragment). On mount it reads the token from the URL
+ * fragment, removes the fragment from the address bar and history (`history.replaceState`),
+ * and sets `<meta name="referrer" content="no-referrer">` while mounted. It then POSTs the
+ * token once through `authService.confirmEmail` (no bearer). The token is never logged,
+ * stored or put in a query string. Fragment handling lives in `auth/confirmEmailLink.js`.
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { AlertCircle, ArrowLeft, CheckCircle2, Loader2 } from 'lucide-react';
+import { useAuth } from '@/auth/AuthContext';
+import { applyNoReferrer, readConfirmToken, scrubConfirmToken } from '@/auth/confirmEmailLink';
+import { Card, CardContent } from '@/components/ui/card';
+import ThemeToggle from '@/theme/ThemeToggle';
+import { branding } from '@/config/branding';
+
+const MISSING_TOKEN = { ok: false, status: 400, error: 'This link is invalid or has expired.' };
+
+export default function ConfirmEmail() {
+  const { auth, isAuthenticated, refreshProfile } = useAuth();
+  // Read only (pure, so StrictMode's double call sees the same value); scrubbed below.
+  const [token] = useState(() => readConfirmToken(window.location.hash));
+  const [result, setResult] = useState(token ? null : MISSING_TOKEN);
+  // The token is single-use: post it once, even when StrictMode re-runs the effect.
+  const postedRef = useRef(false);
+
+  // Before paint: drop the fragment from the URL and history, and send no Referer.
+  useLayoutEffect(() => {
+    scrubConfirmToken(window);
+    return applyNoReferrer(document);
+  }, []);
+
+  useEffect(() => {
+    if (!token || postedRef.current) return;
+    postedRef.current = true;
+    auth.confirmEmail(token).then((r) => {
+      setResult(r);
+      // Best effort: the header shows the new address at once (a revoked session just
+      // signs out on its next request).
+      if (r.ok && isAuthenticated) refreshProfile();
+    });
+  }, [auth, token, isAuthenticated, refreshProfile]);
+
+  const back = isAuthenticated
+    ? { to: '/account/profile', label: 'Back to your profile' }
+    : { to: '/login', label: 'Sign in' };
+
+  return (
+    <div className="grid-bg relative flex min-h-screen items-center justify-center bg-background p-6">
+      <div className="absolute right-4 top-4">
+        <ThemeToggle compact />
+      </div>
+
+      <Card className="w-full max-w-md shadow-xl">
+        <CardContent className="p-8">
+          <div className="mb-7 flex flex-col items-center gap-4">
+            <img
+              src={branding.logo.light}
+              alt={branding.appName}
+              className="h-9 w-auto dark:hidden"
+            />
+            <img
+              src={branding.logo.dark}
+              alt={branding.appName}
+              className="hidden h-9 w-auto dark:block"
+            />
+            <h1 className="text-xl font-bold tracking-tight">Confirm your new email</h1>
+          </div>
+
+          {result === null && (
+            <div
+              role="status"
+              aria-live="polite"
+              className="flex items-center justify-center gap-2 text-sm text-muted-foreground"
+            >
+              <Loader2 className="size-4 animate-spin" aria-hidden="true" />
+              Confirming…
+            </div>
+          )}
+
+          {result?.ok === true && (
+            <div
+              role="status"
+              className="flex items-start gap-2 rounded-lg border border-primary/30 bg-primary/10 px-3 py-2.5 text-sm"
+            >
+              <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-primary" />
+              <span>
+                Your email address has been changed. For your security, your other sessions were
+                signed out.
+              </span>
+            </div>
+          )}
+
+          {result?.ok === false && (
+            <div
+              role="alert"
+              className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-sm text-destructive"
+            >
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
+              <span>
+                {result.error}
+                {result.status === 400 && ' Request the change again from your profile.'}
+              </span>
+            </div>
+          )}
+
+          <div className="mt-6 text-center">
+            <Link
+              to={back.to}
+              className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+            >
+              <ArrowLeft className="size-4" />
+              {back.label}
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/frontend/src/pages/account/ProfilePage.jsx

@@ -4,15 +4,22 @@
  *
  * Pre-fills from the /auth/me profile (via useAuth().profile); on save it PATCHes
  * /account/profile through the shared accountService, then calls refreshProfile() so
- * the header/sidebar user card reflects the new name/email at once. Only sends the
- * fields that actually changed (partial edit). All display values are NAMES (never
- * UUIDs) — the profile the server returns is UUID-free by contract. (Logic lifted
- * verbatim from the former single-page Account.jsx ProfileCard.)
+ * the header/sidebar user card reflects the new name at once. Only sends the fields that
+ * actually changed (partial edit). All display values are NAMES (never UUIDs).
+ *
+ * Email change (KI #14): the server verifies it. Changing the email asks for the current
+ * password, and for a TOTP / recovery code when the account has MFA (detected up front from
+ * the device list, and always when the server answers `mfa_required`). The server answers 202
+ * and mails a link to the NEW address; the email only changes when that link is opened (the
+ * /confirm-email page), so the page keeps showing the old one. The password and code live in
+ * component state for one request and are cleared after it. The form logic is in
+ * `auth/profileEdit.js`.
  */
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
-import { Loader2, ShieldCheck, UserRound } from 'lucide-react';
+import { Loader2, MailCheck, ShieldCheck, UserRound } from 'lucide-react';
 import { useAuth } from '@/auth/AuthContext';
+import { planProfileEdit, interpretProfileResult } from '@/auth/profileEdit';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -22,12 +29,18 @@ export default function ProfilePage() {
   const { tokens, account, profile, refreshProfile } = useAuth();
   const [name, setName] = useState(profile?.name ?? '');
   const [email, setEmail] = useState(profile?.email ?? '');
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [code, setCode] = useState('');
+  // True when the account has MFA (from the device list) or the server asked for a code.
+  const [codeRequired, setCodeRequired] = useState(false);
+  const [pendingNotice, setPendingNotice] = useState('');
   const [error, setError] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
   const initialName = profile?.name ?? '';
   const initialEmail = profile?.email ?? '';
-  const dirty = name.trim() !== initialName || email.trim() !== initialEmail;
+  const emailDirty = email.trim() !== initialEmail;
+  const dirty = name.trim() !== initialName || emailDirty;
 
   // The profile may still be loading (null) when this first mounts (e.g. a hard page
   // refresh). Seed the fields once it arrives / changes; a server-side refresh after
@@ -37,32 +50,58 @@ export default function ProfilePage() {
     setEmail(profile?.email ?? '');
   }, [profile?.name, profile?.email]);
 
+  // Best effort: ask for the MFA code up front when the account has a device. If this
+  // fails, the server's `mfa_required` answer shows the field instead.
+  const accessToken = tokens?.accessToken;
+  useEffect(() => {
+    if (!accessToken) return;
+    let active = true;
+    account.listMfaDevices(accessToken).then((r) => {
+      if (active && r.ok && r.mfaEnabled) setCodeRequired(true);
+    });
+    return () => {
+      active = false;
+    };
+  }, [account, accessToken]);
+
   const onSubmit = async (e) => {
     e.preventDefault();
     setError('');
 
-    if (!name.trim()) {
-      setError('Please enter your name.');
-      return;
-    }
-    const changes = {};
-    if (name.trim() !== initialName) changes.name = name.trim();
-    if (email.trim() !== initialEmail) changes.email = email.trim();
-    if (Object.keys(changes).length === 0) {
-      setError('Nothing to update.');
+    const plan = planProfileEdit(
+      { name, email, currentPassword, code, codeRequired },
+      {
+        name: initialName,
+        email: initialEmail,
+      },
+    );
+    if (plan.error) {
+      setError(plan.error);
       return;
     }
 
     setSubmitting(true);
-    const r = await account.updateProfile(tokens?.accessToken, changes);
+    const r = await account.updateProfile(tokens?.accessToken, plan.changes);
+    // The password and code were for this one request only.
+    setCurrentPassword('');
+    setCode('');
     setSubmitting(false);
 
-    if (r.ok) {
-      await refreshProfile();
-      toast.success('Profile updated');
+    const outcome = interpretProfileResult(r);
+    if (outcome.kind === 'error') {
+      if (outcome.showCode) setCodeRequired(true);
+      setError(outcome.error);
+      return;
+    }
+    await refreshProfile();
+    if (outcome.kind === 'pending') {
+      // The email is unchanged until the link is opened: show the current one again.
+      setEmail(initialEmail);
+      setPendingNotice(outcome.message);
+      toast.success('Check your new inbox');
       return;
     }
-    setError(r.error || 'Could not update your profile.');
+    toast.success('Profile updated');
   };
 
   return (
@@ -99,6 +138,49 @@ export default function ProfilePage() {
             />
           </div>
 
+          {emailDirty && (
+            <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
+              <p className="text-sm text-muted-foreground">
+                To change your email, confirm it is you. We will send a link to the new address;
+                your email changes when you open it.
+              </p>
+              <div className="space-y-1.5">
+                <Label htmlFor="pf-current-password">Current password</Label>
+                <Input
+                  id="pf-current-password"
+                  type="password"
+                  autoComplete="current-password"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                />
+              </div>
+              {codeRequired && (
+                <div className="space-y-1.5">
+                  <Label htmlFor="pf-code">Authenticator or recovery code</Label>
+                  <Input
+                    id="pf-code"
+                    type="text"
+                    inputMode="text"
+                    autoComplete="one-time-code"
+                    value={code}
+                    onChange={(e) => setCode(e.target.value)}
+                    placeholder="123456"
+                  />
+                </div>
+              )}
+            </div>
+          )}
+
+          {pendingNotice && (
+            <div
+              role="status"
+              className="flex items-start gap-2 rounded-lg border border-primary/30 bg-primary/10 px-3 py-2 text-sm"
+            >
+              <MailCheck className="mt-0.5 size-4 shrink-0 text-primary" />
+              <span>{pendingNotice}</span>
+            </div>
+          )}
+
           {error && (
             <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
               {error}

package/template/frontend/src/pages/account/TwoFactorPage.jsx

@@ -37,6 +37,7 @@ import {
   X,
 } from 'lucide-react';
 import { useAuth } from '@/auth/AuthContext';
+import { addDeviceNeedsCode, planBeginDevice } from '@/auth/deviceEnrollment';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
@@ -296,6 +297,14 @@ export default function TwoFactorPage({ onDeviceConfirmed, reenrollMode = false
   const [code, setCode] = useState('');
   const [addError, setAddError] = useState('');
   const [addBusy, setAddBusy] = useState(false);
+  // With MFA already on, adding a device needs a code from an existing one (or a recovery code).
+  const [stepUpCode, setStepUpCode] = useState('');
+  const [serverAskedCode, setServerAskedCode] = useState(false);
+  const stepUpRequired = addDeviceNeedsCode({
+    deviceCount: devices.length,
+    reenrollMode,
+    serverAsked: serverAskedCode,
+  });
   // The boxed-OTP input (input-otp forwards its ref to the real <input>). Focused when the
   // enroll step opens so the user can type the code straight away without clicking a box.
   const codeInputRef = useRef(null);
@@ -399,12 +408,15 @@ export default function TwoFactorPage({ onDeviceConfirmed, reenrollMode = false
   const openAdd = () => {
     setAddError('');
     setNewName('');
+    setStepUpCode('');
     setAddPhase('naming');
   };
 
   const resetAdd = () => {
     setAddPhase('idle');
     setNewName('');
+    setStepUpCode('');
+    setServerAskedCode(false);
     setDeviceId('');
     setSecret('');
     setOtpauthUri('');
@@ -415,18 +427,26 @@ export default function TwoFactorPage({ onDeviceConfirmed, reenrollMode = false
   const onBegin = async (e) => {
     e.preventDefault();
     setAddError('');
-    const name = newName.trim();
-    if (!name) {
-      setAddError('Enter a name for this device.');
+    const plan = planBeginDevice({
+      name: newName,
+      code: stepUpCode,
+      codeRequired: stepUpRequired,
+    });
+    if (plan.error) {
+      setAddError(plan.error);
       return;
     }
     setAddBusy(true);
-    const r = await account.beginMfaDevice(token, name);
+    const r = await account.beginMfaDevice(token, plan.name, plan.code);
     setAddBusy(false);
     if (!r.ok) {
+      if (r.reason === 'mfa_required') setServerAskedCode(true);
+      // A spent or wrong code cannot be retried: clear it.
+      if (r.reason === 'invalid_code') setStepUpCode('');
       setAddError(r.error || 'Could not start two-factor setup.');
       return;
     }
+    setStepUpCode('');
     setDeviceId(r.deviceId || '');
     setSecret(r.secret || '');
     setOtpauthUri(r.otpauthUri || '');
@@ -606,6 +626,21 @@ export default function TwoFactorPage({ onDeviceConfirmed, reenrollMode = false
                     A friendly label so you can tell your devices apart.
                   </p>
                 </div>
+                {stepUpRequired && (
+                  <div className="space-y-1.5">
+                    <Label htmlFor="mfa-stepup-code">Current code</Label>
+                    <Input
+                      id="mfa-stepup-code"
+                      autoComplete="one-time-code"
+                      placeholder="6-digit code or recovery code"
+                      value={stepUpCode}
+                      onChange={(e) => setStepUpCode(e.target.value)}
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      From one of your existing authenticator apps, or a recovery code.
+                    </p>
+                  </div>
+                )}
                 <div className="flex items-center gap-2">
                   <Button type="submit" disabled={addBusy}>
                     {addBusy ? (

package/template/frontend/vite.config.js

@@ -21,6 +21,26 @@ function devCsp() {
   };
 }
 
+/**
+ * `Referrer-Policy: no-referrer` on the email-change confirmation page (KI #14), for
+ * `npm run dev` and `npm run preview`. The page also sets the same policy with a <meta> tag
+ * while it is mounted, and its token is in the URL fragment (never sent in a Referer). In
+ * production, send this header for `/confirm-email` from whatever serves the built app.
+ */
+function confirmEmailNoReferrer() {
+  const setHeader = (req, res, next) => {
+    if ((req.url ?? '').split(/[?#]/)[0] === '/confirm-email') {
+      res.setHeader('Referrer-Policy', 'no-referrer');
+    }
+    next();
+  };
+  return {
+    name: 'astram-confirm-email-no-referrer',
+    configureServer: (server) => server.middlewares.use(setHeader),
+    configurePreviewServer: (server) => server.middlewares.use(setHeader),
+  };
+}
+
 /**
  * __APP_NAME__ frontend — Vite config (shadcn/ui + Tailwind v4).
  *
@@ -29,7 +49,7 @@ function devCsp() {
  * `/auth/login`. `@` aliases `src/` (the shadcn import convention).
  */
 export default defineConfig({
-  plugins: [react(), tailwindcss(), devCsp()],
+  plugins: [react(), tailwindcss(), devCsp(), confirmEmailNoReferrer()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),