Add 2FA, email + password reset, and batch-7 pages

Auth (hand-built on the auth core):
- 2FA: User model gains two_factor_secret/recovery_codes/confirmed_at (+ idempotent
  MariaDB migration). authorize() requires a valid TOTP code when 2FA is confirmed
  (secret decrypted via Laravel APP_KEY, fail-closed). Two-step login (precheckLogin
  reveals the code field). /settings/2fa enable/confirm/disable flow.
- Password reset: nodemailer email service; PasswordReset model + migration;
  /forgot (request, generic response) + /reset (token sha256 + 1h TTL, sets argon2id
  hash). Login links to forgot.

Batch 7 (parallel agents): /admin/commandocentrum (RCON controls + emulator_errors),
social write actions (friend request + guild forum new thread), /help/[category],
/badges (public). env: APP_KEY, APP_URL, SMTP_*. Nav extended.

Verified: tsc exit 0, vitest 48/48, next build exit 0 (64 page routes).

src/app/admin/commandocentrum/page.tsx

@@ -0,0 +1,150 @@
+import {
+  hotelAlert,
+  updateCatalog,
+  updateNavigator,
+  updateWordFilter,
+} from "@/actions/commandocentrum";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+function formatTimestamp(ts: number | null | undefined): string {
+  if (!ts) return "";
+  return new Date(ts * 1000).toISOString().slice(0, 19).replace("T", " ");
+}
+
+// stacktrace is a MySQL BLOB (Prisma `Bytes`), so it arrives as a Buffer/
+// Uint8Array. Decode to UTF-8 and trim to a single readable preview line.
+function decodeStacktrace(raw: unknown): string {
+  if (raw == null) return "";
+  try {
+    if (typeof raw === "string") return raw;
+    return Buffer.from(raw as Uint8Array).toString("utf8");
+  } catch {
+    return "";
+  }
+}
+
+export default async function CommandoCentrum() {
+  const errors = await prisma.emulatorErrors
+    .findMany({
+      orderBy: { timestamp: "desc" },
+      take: 50,
+    })
+    .catch(() => []);
+
+  return (
+    <main>
+      <h1>Commandocentrum</h1>
+      <p className="muted" style={{ marginTop: "-0.25rem" }}>
+        Emulator control center — push live reloads and broadcast alerts over RCON.
+      </p>
+
+      {/* ── RCON controls ──────────────────────────────────────── */}
+      <section style={{ marginTop: "1.5rem" }}>
+        <h2>Emulator controls</h2>
+        <div className="grid cols-3">
+          <form action={updateCatalog} className="card">
+            <h3 style={{ marginTop: 0 }}>Update catalog</h3>
+            <p className="muted" style={{ margin: "0 0 0.85rem" }}>
+              Reload catalog pages and items on the live server.
+            </p>
+            <button type="submit" className="btn btn-primary">
+              Update catalog
+            </button>
+          </form>
+
+          <form action={updateWordFilter} className="card">
+            <h3 style={{ marginTop: 0 }}>Update word filter</h3>
+            <p className="muted" style={{ margin: "0 0 0.85rem" }}>
+              Reload the chat word filter from the database.
+            </p>
+            <button type="submit" className="btn btn-primary">
+              Update word filter
+            </button>
+          </form>
+
+          <form action={updateNavigator} className="card">
+            <h3 style={{ marginTop: 0 }}>Update navigator</h3>
+            <p className="muted" style={{ margin: "0 0 0.85rem" }}>
+              Reload navigator categories and room listings.
+            </p>
+            <button type="submit" className="btn btn-primary">
+              Update navigator
+            </button>
+          </form>
+        </div>
+
+        <form action={hotelAlert} className="card" style={{ marginTop: "1rem" }}>
+          <h3 style={{ marginTop: 0 }}>Hotel alert</h3>
+          <p className="muted" style={{ margin: "0 0 0.75rem" }}>
+            Broadcast a message to every connected user.
+          </p>
+          <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+            <input
+              name="message"
+              required
+              maxLength={512}
+              placeholder="Message to broadcast…"
+              style={{ flex: 1, minWidth: 220 }}
+            />
+            <button type="submit" className="btn btn-danger">
+              Send alert
+            </button>
+          </div>
+        </form>
+      </section>
+
+      {/* ── Emulator errors ────────────────────────────────────── */}
+      <section style={{ marginTop: "1.5rem" }}>
+        <h2>Recent emulator errors</h2>
+        {errors.length === 0 ? (
+          <p className="muted">No emulator errors logged.</p>
+        ) : (
+          <div className="card" style={{ overflowX: "auto" }}>
+            <table>
+              <thead>
+                <tr>
+                  <th>When</th>
+                  <th>Type</th>
+                  <th>Version</th>
+                  <th>Stacktrace</th>
+                </tr>
+              </thead>
+              <tbody>
+                {errors.map((e) => {
+                  const trace = decodeStacktrace(e.stacktrace);
+                  return (
+                    <tr key={e.id}>
+                      <td className="muted" style={{ whiteSpace: "nowrap" }}>
+                        {formatTimestamp(e.timestamp)}
+                      </td>
+                      <td>{e.type}</td>
+                      <td className="muted" style={{ whiteSpace: "nowrap" }}>
+                        {e.version}
+                      </td>
+                      <td>
+                        <pre
+                          style={{
+                            margin: 0,
+                            maxHeight: 160,
+                            overflow: "auto",
+                            fontSize: "0.75rem",
+                            whiteSpace: "pre-wrap",
+                            wordBreak: "break-word",
+                          }}
+                        >
+                          {trace || "(empty)"}
+                        </pre>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </main>
+  );
+}

src/app/admin/layout.tsx

@@ -39,6 +39,7 @@ export default async function AdminLayout({ children }: { children: ReactNode })
           <Link href="/admin/housekeeping">Housekeeping</Link>
           <Link href="/admin/permissions">Permissions</Link>
           <Link href="/admin/emulator">Emulator</Link>
+          <Link href="/admin/commandocentrum">Commandocentrum</Link>
           <Link href="/admin/email-templates">Email</Link>
           <Link href="/admin/settings">Settings</Link>
         </nav>

src/app/badges/page.tsx

@@ -0,0 +1,56 @@
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+// Canonical Habbo badge image CDN. A badge_key (e.g. "ADM") maps to a .gif here.
+const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
+
+export default async function BadgesPage() {
+  const badges = await prisma.websiteBadges
+    .findMany({
+      orderBy: { badgeName: "asc" },
+    })
+    .catch(() => []);
+
+  return (
+    <main>
+      <div className="hero">
+        <h1 style={{ margin: "0 0 0.35rem" }}>Badges</h1>
+        <p className="muted" style={{ margin: 0 }}>
+          The badges you can earn and show off around the hotel.
+        </p>
+      </div>
+
+      {badges.length === 0 ? (
+        <p className="muted">No badges available yet.</p>
+      ) : (
+        <div className="grid cols-3">
+          {badges.map((badge) => (
+            <div
+              key={String(badge.id)}
+              className="card hover"
+              style={{ display: "flex", gap: "0.9rem", alignItems: "flex-start" }}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={`${BADGE_IMG_BASE}/${badge.badgeKey}.gif`}
+                alt={badge.badgeName}
+                title={badge.badgeKey}
+                width={40}
+                height={40}
+                style={{ flexShrink: 0 }}
+              />
+              <div style={{ minWidth: 0 }}>
+                <h3 style={{ margin: "0 0 0.25rem" }}>{badge.badgeName}</h3>
+                <p className="muted" style={{ margin: "0 0 0.35rem", fontFamily: "monospace" }}>
+                  {badge.badgeKey}
+                </p>
+                <p style={{ margin: 0, fontSize: "0.9rem" }}>{badge.badgeDescription}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}

src/app/forgot/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { requestReset } from "@/actions/password-reset";
+
+export default async function ForgotPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ sent?: string }>;
+}) {
+  const { sent } = await searchParams;
+
+  return (
+    <main style={{ maxWidth: 400, margin: "2rem auto" }}>
+      <div className="card" style={{ padding: "1.75rem" }}>
+        <h1 style={{ marginTop: 0, textAlign: "center" }}>Reset password</h1>
+        {sent ? (
+          <p className="muted" style={{ textAlign: "center" }}>
+            If that email is registered, a reset link has been sent. Check your inbox.
+          </p>
+        ) : (
+          <form action={requestReset} style={{ display: "grid", gap: "0.7rem", marginTop: "1rem" }}>
+            <input name="email" type="email" placeholder="Your email" autoComplete="email" required />
+            <button type="submit" className="btn btn-primary">
+              Send reset link
+            </button>
+          </form>
+        )}
+        <p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
+          <Link href="/login">Back to login</Link>
+        </p>
+      </div>
+    </main>
+  );
+}

src/app/guilds/[id]/forum/new/page.tsx

@@ -0,0 +1,86 @@
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { postThread } from "@/actions/social";
+
+export const dynamic = "force-dynamic";
+
+export default async function NewThreadPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const guildId = Number(id);
+  if (!Number.isInteger(guildId) || guildId <= 0) notFound();
+
+  // Auth gate: only logged-in users may open a thread.
+  const session = await auth();
+  if (!session?.user?.id) redirect("/login");
+
+  // Guild header (read-only). A DB hiccup degrades to notFound rather than 500.
+  let guild: { id: number; name: string } | null = null;
+  try {
+    guild = await prisma.guilds.findUnique({
+      where: { id: guildId },
+      select: { id: true, name: true },
+    });
+  } catch {
+    guild = null;
+  }
+
+  if (!guild) notFound();
+
+  return (
+    <main>
+      <p style={{ marginTop: 0 }}>
+        <Link href={`/guilds/${guild.id}/forum`}>← Back to forum</Link>
+      </p>
+
+      <h1 style={{ marginBottom: "0.25rem" }}>New thread</h1>
+      <p className="muted" style={{ marginTop: 0 }}>
+        in {guild.name || "Unnamed guild"} forum
+      </p>
+
+      <form action={postThread} className="card" style={{ marginTop: "1rem" }}>
+        {/* Guild target drives the write; the author is taken from the session
+            inside the action, never from this form. */}
+        <input type="hidden" name="guildId" value={String(guild.id)} />
+
+        <label htmlFor="thread-subject" className="muted">
+          Subject
+        </label>
+        <input
+          id="thread-subject"
+          name="subject"
+          required
+          maxLength={255}
+          placeholder="Thread subject"
+          style={{ width: "100%", margin: "0.4rem 0 0.9rem" }}
+        />
+
+        <label htmlFor="thread-message" className="muted">
+          Message
+        </label>
+        <textarea
+          id="thread-message"
+          name="message"
+          required
+          rows={8}
+          placeholder="Write your opening post…"
+          style={{ width: "100%", margin: "0.4rem 0 1rem", resize: "vertical" }}
+        />
+
+        <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
+          <button type="submit" className="btn btn-primary">
+            Post thread
+          </button>
+          <Link href={`/guilds/${guild.id}/forum`} className="btn btn-outline">
+            Cancel
+          </Link>
+        </div>
+      </form>
+    </main>
+  );
+}

src/app/help/[category]/page.tsx

@@ -0,0 +1,161 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+
+export const dynamic = "force-dynamic";
+
+// Asset path matches AtomCMS's Blade view: asset('/assets/images/help-center/<image_url>').
+const HELP_IMAGE_BASE = "/assets/images/help-center";
+
+type HelpCategory = {
+  id: bigint;
+  name: string;
+  content: string;
+  position: number;
+  imageUrl: string | null;
+  buttonText: string | null;
+  buttonUrl: string | null;
+  buttonColor: string;
+  buttonBorderColor: string;
+  smallBox: boolean;
+};
+
+type HelpCategoryLink = {
+  id: bigint;
+  name: string;
+  position: number;
+};
+
+// Faithful to AtomCMS: name / content / button_text carry a `:hotel` placeholder
+// replaced with the configured hotel name before display.
+function withHotel(text: string | null | undefined, hotelName: string): string {
+  return (text ?? "").split(":hotel").join(hotelName);
+}
+
+export default async function HelpCategoryPage({
+  params,
+}: {
+  params: Promise<{ category: string }>;
+}) {
+  const { category } = await params;
+
+  let categoryId: bigint;
+  try {
+    categoryId = BigInt(category);
+  } catch {
+    notFound();
+  }
+
+  let cat: HelpCategory | null = null;
+  try {
+    cat = await prisma.websiteHelpCenterCategories.findUnique({
+      where: { id: categoryId! },
+      select: {
+        id: true,
+        name: true,
+        content: true,
+        position: true,
+        imageUrl: true,
+        buttonText: true,
+        buttonUrl: true,
+        buttonColor: true,
+        buttonBorderColor: true,
+        smallBox: true,
+      },
+    });
+  } catch {
+    cat = null;
+  }
+
+  if (!cat) notFound();
+
+  const hotelName = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
+
+  // Sibling help topics, so the reader can jump between categories. Isolated
+  // query: a DB hiccup degrades this list to empty rather than 500-ing.
+  let siblings: HelpCategoryLink[] = [];
+  try {
+    siblings = await prisma.websiteHelpCenterCategories.findMany({
+      where: { id: { not: categoryId! } },
+      orderBy: { position: "asc" },
+      select: { id: true, name: true, position: true },
+      take: 50,
+    });
+  } catch {
+    siblings = [];
+  }
+
+  const title = withHotel(cat.name, hotelName);
+  const content = withHotel(cat.content, hotelName);
+  const buttonText = withHotel(cat.buttonText, hotelName);
+  const imageSrc = cat.imageUrl ? `${HELP_IMAGE_BASE}/${cat.imageUrl}` : "";
+  const hasButton = Boolean(cat.buttonText && cat.buttonText.trim() !== "");
+
+  return (
+    <main>
+      <p style={{ margin: "0 0 0.75rem" }}>
+        <Link href="/help">← Help Center</Link>
+      </p>
+
+      <div className="hero">
+        <h1 style={{ margin: 0 }}>{title}</h1>
+      </div>
+
+      <article className="card">
+        {imageSrc ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={imageSrc}
+            alt=""
+            style={{
+              float: "right",
+              maxWidth: 160,
+              height: "auto",
+              margin: "0 0 0.75rem 1rem",
+            }}
+          />
+        ) : null}
+
+        {/* content is author-supplied HTML in AtomCMS (rendered raw with {!! !!}). */}
+        <div
+          style={{ lineHeight: 1.7 }}
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+
+        {hasButton ? (
+          <div style={{ clear: "both", marginTop: "1rem" }}>
+            <a
+              href={cat.buttonUrl ?? "#"}
+              className="btn"
+              style={{
+                backgroundColor: cat.buttonColor,
+                border: `2px solid ${cat.buttonBorderColor}`,
+              }}
+            >
+              {buttonText}
+            </a>
+          </div>
+        ) : null}
+      </article>
+
+      {siblings.length > 0 ? (
+        <section style={{ marginTop: "2rem" }}>
+          <h2>More help topics</h2>
+          <div className="grid cols-2">
+            {siblings.map((s) => (
+              <Link
+                key={String(s.id)}
+                href={`/help/${String(s.id)}`}
+                className="card hover"
+                style={{ display: "block", color: "inherit" }}
+              >
+                <strong>{withHotel(s.name, hotelName)}</strong>
+              </Link>
+            ))}
+          </div>
+        </section>
+      ) : null}
+    </main>
+  );
+}

src/app/login/page.tsx

@@ -3,10 +3,13 @@
 import Link from "next/link";
 import { signIn } from "next-auth/react";
 import { type FormEvent, useState } from "react";
+import { precheckLogin } from "@/actions/auth-precheck";
 
 export default function LoginPage() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [needs2fa, setNeeds2fa] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
 
@@ -14,13 +17,32 @@ export default function LoginPage() {
     e.preventDefault();
     setError(null);
     setPending(true);
-    const res = await signIn("credentials", { username, password, redirect: false });
-    setPending(false);
-    if (!res || res.error) {
-      setError("Invalid username or password");
-      return;
+    try {
+      if (!needs2fa) {
+        const pre = await precheckLogin(username, password);
+        if (pre === "invalid") {
+          setError("Invalid username or password");
+          return;
+        }
+        if (pre === "twofactor") {
+          setNeeds2fa(true);
+          return;
+        }
+      }
+      const res = await signIn("credentials", {
+        username,
+        password,
+        code,
+        redirect: false,
+      });
+      if (!res || res.error) {
+        setError(needs2fa ? "Invalid 2FA code" : "Invalid username or password");
+        return;
+      }
+      window.location.href = "/";
+    } finally {
+      setPending(false);
     }
-    window.location.href = "/";
   }
 
   return (
@@ -28,7 +50,7 @@ export default function LoginPage() {
       <div className="card" style={{ padding: "1.75rem" }}>
         <h1 style={{ marginTop: 0, textAlign: "center" }}>Sign in</h1>
         <p className="muted" style={{ textAlign: "center", marginTop: 0 }}>
-          Welcome back — log in to enter the hotel.
+          {needs2fa ? "Enter the 6-digit code from your authenticator." : "Welcome back — log in to enter the hotel."}
         </p>
         <form onSubmit={onSubmit} style={{ display: "grid", gap: "0.7rem", marginTop: "1rem" }}>
           <input
@@ -36,6 +58,7 @@ export default function LoginPage() {
             onChange={(e) => setUsername(e.target.value)}
             placeholder="Username"
             autoComplete="username"
+            disabled={needs2fa}
           />
           <input
             type="password"
@@ -43,38 +66,55 @@ export default function LoginPage() {
             onChange={(e) => setPassword(e.target.value)}
             placeholder="Password"
             autoComplete="current-password"
+            disabled={needs2fa}
           />
+          {needs2fa ? (
+            <input
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              placeholder="2FA code"
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              // biome-ignore lint/a11y/noAutofocus: focus the only relevant field in the 2FA step
+              autoFocus
+            />
+          ) : null}
           <button type="submit" className="btn btn-primary" disabled={pending}>
-            {pending ? "Signing in…" : "Sign in"}
+            {pending ? "Please wait…" : needs2fa ? "Verify" : "Sign in"}
           </button>
         </form>
 
-        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", margin: "1rem 0" }}>
-          <span style={{ flex: 1, height: 1, background: "var(--border-color)" }} />
-          <span className="muted">or</span>
-          <span style={{ flex: 1, height: 1, background: "var(--border-color)" }} />
-        </div>
-        <div style={{ display: "grid", gap: "0.5rem" }}>
-          <button
-            type="button"
-            className="btn btn-outline"
-            onClick={() => signIn("discord", { callbackUrl: "/" })}
-          >
-            Continue with Discord
-          </button>
-          <button
-            type="button"
-            className="btn btn-outline"
-            onClick={() => signIn("google", { callbackUrl: "/" })}
-          >
-            Continue with Google
-          </button>
-        </div>
+        {!needs2fa ? (
+          <>
+            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", margin: "1rem 0" }}>
+              <span style={{ flex: 1, height: 1, background: "var(--border-color)" }} />
+              <span className="muted">or</span>
+              <span style={{ flex: 1, height: 1, background: "var(--border-color)" }} />
+            </div>
+            <div style={{ display: "grid", gap: "0.5rem" }}>
+              <button
+                type="button"
+                className="btn btn-outline"
+                onClick={() => signIn("discord", { callbackUrl: "/" })}
+              >
+                Continue with Discord
+              </button>
+              <button
+                type="button"
+                className="btn btn-outline"
+                onClick={() => signIn("google", { callbackUrl: "/" })}
+              >
+                Continue with Google
+              </button>
+            </div>
+          </>
+        ) : null}
+
         {error ? (
           <p style={{ color: "var(--color-danger)", textAlign: "center", marginBottom: 0 }}>{error}</p>
         ) : null}
         <p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
-          No account? <Link href="/register">Create one</Link>
+          No account? <Link href="/register">Create one</Link> · <Link href="/forgot">Forgot password?</Link>
         </p>
       </div>
     </main>

src/app/reset/page.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { resetPassword } from "@/actions/password-reset";
+
+export default async function ResetPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ email?: string; token?: string; error?: string }>;
+}) {
+  const { email = "", token = "", error } = await searchParams;
+
+  return (
+    <main style={{ maxWidth: 400, margin: "2rem auto" }}>
+      <div className="card" style={{ padding: "1.75rem" }}>
+        <h1 style={{ marginTop: 0, textAlign: "center" }}>Set a new password</h1>
+        <form action={resetPassword} style={{ display: "grid", gap: "0.7rem", marginTop: "1rem" }}>
+          <input type="hidden" name="email" value={email} />
+          <input type="hidden" name="token" value={token} />
+          <input
+            name="password"
+            type="password"
+            placeholder="New password (min 6 chars)"
+            autoComplete="new-password"
+            required
+          />
+          <button type="submit" className="btn btn-primary">
+            Reset password
+          </button>
+        </form>
+        {error ? (
+          <p style={{ color: "var(--color-danger)", textAlign: "center", marginBottom: 0 }}>{error}</p>
+        ) : null}
+        <p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
+          <Link href="/login">Back to login</Link>
+        </p>
+      </div>
+    </main>
+  );
+}

src/app/settings/2fa/page.tsx

@@ -0,0 +1,113 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { beginTwoFactor, confirmTwoFactor, disableTwoFactor } from "@/actions/twofactor";
+import { LaravelEncrypter } from "@/lib/auth/laravel-encrypter";
+import { totpKeyUri } from "@/lib/auth/totp";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+import { env } from "@/env";
+
+export const dynamic = "force-dynamic";
+
+export default async function TwoFactorPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ error?: string; enabled?: string; disabled?: string }>;
+}) {
+  const session = await auth();
+  if (!session?.user?.id) redirect("/login");
+  const sp = await searchParams;
+  const id = Number(session.user.id);
+
+  let user: { twoFactorSecret: string | null; twoFactorConfirmedAt: Date | null } | null = null;
+  try {
+    user = await prisma.user.findUnique({
+      where: { id },
+      select: { twoFactorSecret: true, twoFactorConfirmedAt: true },
+    });
+  } catch {
+    user = null;
+  }
+
+  const hasAppKey = Boolean(env.APP_KEY);
+  const enabled = Boolean(user?.twoFactorConfirmedAt);
+  const pending = Boolean(user?.twoFactorSecret && !user?.twoFactorConfirmedAt);
+  const hotelName = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
+
+  let secret = "";
+  let uri = "";
+  if (pending && hasAppKey && user?.twoFactorSecret) {
+    try {
+      secret = new LaravelEncrypter(env.APP_KEY as string).decrypt(user.twoFactorSecret);
+      uri = totpKeyUri(secret, session.user.name ?? "user", hotelName);
+    } catch {
+      secret = "";
+    }
+  }
+
+  return (
+    <main style={{ maxWidth: 520 }}>
+      <p className="muted">
+        <Link href="/settings">← Settings</Link>
+      </p>
+      <h1>Two-factor authentication</h1>
+
+      {sp.enabled ? <p style={{ color: "var(--color-accent)" }}>2FA is now enabled. 🔒</p> : null}
+      {sp.disabled ? <p className="muted">2FA has been disabled.</p> : null}
+      {sp.error === "badcode" ? (
+        <p style={{ color: "var(--color-danger)" }}>That code wasn't valid — try again.</p>
+      ) : null}
+
+      {!hasAppKey ? (
+        <div className="card">
+          <p style={{ margin: 0 }}>
+            2FA is unavailable until <code>APP_KEY</code> is configured (the same Laravel
+            <code> APP_KEY</code> as your AtomCMS install, so existing secrets stay readable).
+          </p>
+        </div>
+      ) : enabled ? (
+        <div className="card">
+          <p>
+            <strong>2FA is enabled</strong> on your account.
+          </p>
+          <form action={disableTwoFactor}>
+            <button type="submit" className="btn btn-danger">
+              Disable 2FA
+            </button>
+          </form>
+        </div>
+      ) : pending ? (
+        <div className="card">
+          <h3 style={{ marginTop: 0 }}>Scan or enter this key</h3>
+          <p className="muted" style={{ marginTop: 0 }}>
+            Add this to Google Authenticator / Authy, then enter the 6-digit code to confirm.
+          </p>
+          <p>
+            Manual key: <code style={{ userSelect: "all" }}>{secret}</code>
+          </p>
+          <p className="muted" style={{ wordBreak: "break-all", fontSize: "0.8rem" }}>
+            {uri}
+          </p>
+          <form action={confirmTwoFactor} style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
+            <input name="code" placeholder="6-digit code" inputMode="numeric" required />
+            <button type="submit" className="btn btn-primary">
+              Confirm
+            </button>
+          </form>
+        </div>
+      ) : (
+        <div className="card">
+          <p style={{ marginTop: 0 }}>
+            Add a second layer of security with an authenticator app.
+          </p>
+          <form action={beginTwoFactor}>
+            <button type="submit" className="btn btn-primary">
+              Enable 2FA
+            </button>
+          </form>
+        </div>
+      )}
+    </main>
+  );
+}

src/app/settings/page.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { updateMotto } from "@/actions/user-settings";
 import { avatarImageUrl } from "@/lib/format";
@@ -81,6 +82,16 @@ export default async function SettingsPage() {
           Updates instantly in-game if you are online.
         </p>
       </div>
+
+      <div className="card" style={{ maxWidth: 520, marginTop: "1.5rem" }}>
+        <h3 style={{ marginTop: 0 }}>Security</h3>
+        <p className="muted" style={{ marginTop: 0 }}>
+          Protect your account with two-factor authentication.
+        </p>
+        <Link href="/settings/2fa" className="btn btn-outline">
+          Two-factor authentication
+        </Link>
+      </div>
     </main>
   );
 }