create-astram-app 0.1.2 → 0.2.0

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

@@ -0,0 +1,98 @@
+/**
+ * ReenrollPage — the FORCED re-enroll screen shown after a recovery-code login.
+ *
+ * Signing in with a recovery code marks the session `mustReenroll` (server-side, §4):
+ * every non-allowlisted route returns 403 `reenrollment_required`, so the app pins the
+ * user here (App.jsx's ReenrollGate) until they re-secure the account by confirming a
+ * fresh authenticator device. The device-add + recovery-codes UI is REUSED verbatim
+ * from <TwoFactorPage/> (single source of truth for the enroll flow); this screen only
+ * adds the framing + the "you're done" transition.
+ *
+ * When a device confirm succeeds, the server clears the gate on the SAME token (§4.3) —
+ * the next request is unrestricted. We clear the local re-enroll flag at that moment
+ * (so the user is no longer bounced) while keeping them on-screen to save any one-time
+ * recovery codes, then offer an explicit "Continue" back into the app.
+ */
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowRight, LogOut, ShieldAlert, ShieldCheck } from 'lucide-react';
+import { useAuth } from '@/auth/AuthContext';
+import { Button } from '@/components/ui/button';
+import TwoFactorPage from './TwoFactorPage';
+
+export default function ReenrollPage() {
+  const { clearReenroll, logout } = useAuth();
+  const navigate = useNavigate();
+  const [secured, setSecured] = useState(false);
+
+  // A device confirm succeeded → the server has already lifted the restriction on this
+  // token; release the UI gate so the user can leave once they've saved their codes.
+  const onDeviceConfirmed = () => {
+    setSecured(true);
+    clearReenroll();
+  };
+
+  const onSignOut = async () => {
+    await logout();
+    navigate('/login', { replace: true });
+  };
+
+  return (
+    <div className="grid-bg relative min-h-screen bg-background px-4 py-10">
+      <div className="mx-auto w-full max-w-3xl space-y-6">
+        {/* Framing banner — states WHY the user is here and what unlocks the app. */}
+        <div
+          className={
+            secured
+              ? 'flex items-start gap-3 rounded-xl border border-primary/30 bg-primary/5 px-4 py-3.5'
+              : 'flex items-start gap-3 rounded-xl border border-[var(--warn)]/40 bg-[var(--warn)]/10 px-4 py-3.5'
+          }
+        >
+          {secured ? (
+            <ShieldCheck className="mt-0.5 size-5 shrink-0 text-primary" />
+          ) : (
+            <ShieldAlert className="mt-0.5 size-5 shrink-0 text-[var(--warn)]" />
+          )}
+          <div className="min-w-0">
+            <p className="text-sm font-semibold text-foreground">
+              {secured
+                ? 'Your account is secured again'
+                : 'Finish securing your account'}
+            </p>
+            <p className="mt-0.5 text-sm text-muted-foreground">
+              {secured
+                ? 'A new authenticator device is active. Save any recovery codes shown below, then continue.'
+                : 'You signed in with a recovery code. Add a new authenticator device below to re-secure your account — the rest of the app stays locked until you do.'}
+            </p>
+          </div>
+        </div>
+
+        {/* The re-enroll work — the exact device-add + regenerate-codes flow from the
+            account 2FA page, reused as-is. onDeviceConfirmed lifts the gate on success.
+            reenrollMode hides Rename/Remove on existing devices (those routes aren't on
+            the server's re-enroll allowlist → they'd only 403 here). */}
+        <TwoFactorPage onDeviceConfirmed={onDeviceConfirmed} reenrollMode />
+
+        {!secured && (
+          <p className="text-center text-xs text-muted-foreground">
+            You can rename or remove existing devices from your account settings once your account is
+            secured.
+          </p>
+        )}
+
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <Button type="button" variant="ghost" onClick={onSignOut}>
+            <LogOut className="size-4" />
+            Sign out instead
+          </Button>
+          {secured && (
+            <Button type="button" onClick={() => navigate('/dashboard', { replace: true })}>
+              Continue to the app
+              <ArrowRight className="size-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}