feat(security): two-factor authentication (TOTP)

Hesap güvenliği için authenticator app (Google Authenticator, 1Password,
Authy etc.) based TOTP. SMS yok — sadece app-based per user request.

Enroll flow (/settings/security)
  - startMfaEnrollAction → account.createMFAAuthenticator('totp'),
    returns otpauth URI + plain secret as backup.
  - MfaPanel client island: starts the flow, shows the QR (rendered via
    api.qrserver.com for zero deps) plus the secret as text. Picks the
    6-digit code → verifyMfaEnrollAction calls
    updateMFAAuthenticator(totp, otp) + updateMFA(true) +
    createMFARecoveryCodes(). The recovery codes are surfaced once on
    success with a 'save these now' warning.
  - disableMfaAction + regenerateRecoveryCodesAction give the same
    panel a disable + 'yeni yedek kodlar' option once MFA is active.
  - settings-nav now has 'Güvenlik' between 'Görünüm' and 'Hesap
    Aktivitesi'.

Sign-in flow
  - signInAction:
      1. createEmailPasswordSession (sets cookie as before)
      2. users.get(userId).mfa? If yes:
         a. otp empty → return { mfaRequired: true, error }
         b. otp present → createMfaChallenge({factor: totp}) +
            updateMfaChallenge(challengeId, otp). Failure tears the
            partial session down and bounces back with mfaRequired.
  - AuthState gained an mfaRequired field. The login form watches it
    and reveals an autofocused 6-digit OTP input on the next render.
    User types the code, submits the form again, the same action
    finishes the challenge and redirects.

Existing accounts without MFA are unaffected — they never hit the
challenge branch.

src/app/(dashboard)/settings/components/settings-nav.tsx

@@ -11,6 +11,7 @@ const ITEMS: { href: string; label: string }[] = [
   { href: "/settings/members", label: "Üyeler" },
   { href: "/settings/notifications", label: "Bildirimler" },
   { href: "/settings/appearance", label: "Görünüm" },
+  { href: "/settings/security", label: "Güvenlik" },
   { href: "/settings/activity", label: "Hesap Aktivitesi" },
 ];
 

src/app/(dashboard)/settings/security/components/mfa-panel.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useActionState, useEffect, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Check, KeyRound, Loader2, ShieldCheck, ShieldOff } from "lucide-react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  disableMfaAction,
+  initialMfaActionState,
+  regenerateRecoveryCodesAction,
+  startMfaEnrollAction,
+  verifyMfaEnrollAction,
+} from "@/lib/appwrite/mfa-actions";
+
+type EnrollStage =
+  | { kind: "idle" }
+  | { kind: "loading" }
+  | { kind: "verify"; uri: string; secret: string }
+  | { kind: "done"; recoveryCodes: string[] };
+
+export function MfaPanel({ initiallyEnabled }: { initiallyEnabled: boolean }) {
+  const router = useRouter();
+  const [enabled, setEnabled] = useState(initiallyEnabled);
+  const [stage, setStage] = useState<EnrollStage>({ kind: "idle" });
+  const [verifyState, verifyAction, verifying] = useActionState(
+    verifyMfaEnrollAction,
+    initialMfaActionState,
+  );
+  const [busy, startTransition] = useTransition();
+
+  useEffect(() => {
+    if (verifyState.ok && verifyState.recoveryCodes) {
+      setEnabled(true);
+      setStage({ kind: "done", recoveryCodes: verifyState.recoveryCodes });
+      toast.success("2FA etkinleştirildi.");
+      router.refresh();
+    } else if (verifyState.error) {
+      toast.error(verifyState.error);
+    }
+  }, [verifyState, router]);
+
+  function beginEnroll() {
+    setStage({ kind: "loading" });
+    startTransition(async () => {
+      const res = await startMfaEnrollAction();
+      if (res.ok && res.uri && res.secret) {
+        setStage({ kind: "verify", uri: res.uri, secret: res.secret });
+      } else {
+        toast.error(res.error ?? "Başlatılamadı.");
+        setStage({ kind: "idle" });
+      }
+    });
+  }
+
+  function onDisable() {
+    if (
+      !window.confirm(
+        "2FA devre dışı bırakılsın mı? Hesabınız sadece şifre ile korunacak.",
+      )
+    )
+      return;
+    startTransition(async () => {
+      const res = await disableMfaAction();
+      if (res.ok) {
+        setEnabled(false);
+        setStage({ kind: "idle" });
+        toast.success("2FA devre dışı bırakıldı.");
+        router.refresh();
+      } else {
+        toast.error(res.error ?? "Devre dışı bırakılamadı.");
+      }
+    });
+  }
+
+  function onRegenerateCodes() {
+    startTransition(async () => {
+      const res = await regenerateRecoveryCodesAction();
+      if (res.ok && res.recoveryCodes) {
+        setStage({ kind: "done", recoveryCodes: res.recoveryCodes });
+        toast.success("Yeni yedek kodlar oluşturuldu — eskileri geçersiz.");
+      } else {
+        toast.error(res.error ?? "Üretilemedi.");
+      }
+    });
+  }
+
+  if (enabled && stage.kind !== "done") {
+    return (
+      <div className="grid gap-3">
+        <div className="flex items-center gap-2">
+          <Badge className="bg-emerald-600 text-white">
+            <ShieldCheck className="size-3.5" />
+            Aktif
+          </Badge>
+          <span className="text-muted-foreground text-sm">
+            Authenticator uygulaması ile giriş yapıyorsunuz.
+          </span>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button variant="outline" onClick={onRegenerateCodes} disabled={busy}>
+            <KeyRound className="size-4" />
+            Yedek kodları yenile
+          </Button>
+          <Button variant="destructive" onClick={onDisable} disabled={busy}>
+            {busy ? <Loader2 className="size-4 animate-spin" /> : <ShieldOff className="size-4" />}
+            Devre dışı bırak
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (stage.kind === "done") {
+    return (
+      <div className="grid gap-3">
+        <div className="bg-emerald-50 dark:bg-emerald-950 rounded-md border border-emerald-200 dark:border-emerald-900 p-4">
+          <p className="flex items-center gap-2 font-medium text-emerald-700 dark:text-emerald-300">
+            <Check className="size-4" />
+            Yedek kodlarınız
+          </p>
+          <p className="text-muted-foreground mt-1 text-xs">
+            Telefonunuza erişiminizi kaybederseniz bu kodlardan biriyle giriş
+            yapabilirsiniz. Her kod tek seferlik. <strong>Şimdi güvenli bir yere kaydedin</strong> —
+            bu sayfadan çıktığınızda tekrar gösterilmez.
+          </p>
+          <pre className="bg-background mt-3 grid grid-cols-2 gap-2 rounded-md border p-3 text-sm font-mono">
+            {stage.recoveryCodes.map((c) => (
+              <span key={c}>{c}</span>
+            ))}
+          </pre>
+        </div>
+        <Button variant="outline" onClick={() => setStage({ kind: "idle" })}>
+          Tamamladım
+        </Button>
+      </div>
+    );
+  }
+
+  if (stage.kind === "verify") {
+    const otpauthQrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(stage.uri)}`;
+    return (
+      <form action={verifyAction} className="grid gap-4">
+        <div className="grid gap-4 sm:grid-cols-[200px_1fr] sm:items-start">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={otpauthQrUrl}
+            alt="QR kodu"
+            className="size-[200px] rounded-md border bg-white p-2"
+            width={200}
+            height={200}
+          />
+          <div className="grid gap-2 text-sm">
+            <p>Authenticator uygulamanızı açın, QR kodu tarayın.</p>
+            <p className="text-muted-foreground text-xs">
+              Tarayamıyorsanız bu kodu manuel girin:
+            </p>
+            <code className="bg-muted rounded-md p-2 font-mono text-xs">{stage.secret}</code>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="otp">Uygulamadaki 6 haneli kod</Label>
+          <Input
+            id="otp"
+            name="otp"
+            inputMode="numeric"
+            pattern="[0-9]*"
+            maxLength={6}
+            placeholder="000000"
+            required
+            autoComplete="one-time-code"
+            className="font-mono text-lg tracking-widest"
+          />
+          {verifyState.error && (
+            <p className="text-destructive text-xs">{verifyState.error}</p>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button type="button" variant="outline" onClick={() => setStage({ kind: "idle" })}>
+            Vazgeç
+          </Button>
+          <Button type="submit" disabled={verifying}>
+            {verifying ? <Loader2 className="size-4 animate-spin" /> : <Check className="size-4" />}
+            Doğrula ve etkinleştir
+          </Button>
+        </div>
+      </form>
+    );
+  }
+
+  return (
+    <div className="grid gap-3">
+      <div className="flex items-center gap-2">
+        <Badge variant="outline">Pasif</Badge>
+        <span className="text-muted-foreground text-sm">
+          Hesabınız yalnızca şifre ile korunuyor.
+        </span>
+      </div>
+      <Button onClick={beginEnroll} disabled={busy || stage.kind === "loading"}>
+        {(busy || stage.kind === "loading") ? <Loader2 className="size-4 animate-spin" /> : <ShieldCheck className="size-4" />}
+        İki adımlı doğrulamayı aç
+      </Button>
+    </div>
+  );
+}

src/app/(dashboard)/settings/security/page.tsx

@@ -0,0 +1,56 @@
+import { redirect } from "next/navigation";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { createSessionClient } from "@/lib/appwrite/server";
+import { requireTenant } from "@/lib/appwrite/tenant-guard";
+import { MfaPanel } from "./components/mfa-panel";
+
+export const metadata = {
+  title: "DLS — Güvenlik",
+};
+
+export default async function SecurityPage() {
+  let ctx;
+  try {
+    ctx = await requireTenant();
+  } catch {
+    redirect("/onboarding");
+  }
+
+  // Look up the user's current MFA status straight from the session
+  // client so the panel knows whether to offer enroll or disable.
+  let mfaEnabled = false;
+  try {
+    const { account } = await createSessionClient();
+    const user = await account.get();
+    mfaEnabled = Boolean(user.mfa);
+  } catch {
+    // ignore — panel will treat as not enabled
+  }
+
+  return (
+    <div className="flex-1 space-y-6 px-6">
+      <div className="flex flex-col gap-1">
+        <p className="text-muted-foreground text-sm">{ctx.settings?.companyName ?? "Çalışma alanı"}</p>
+        <h1 className="text-2xl font-bold tracking-tight">Güvenlik</h1>
+        <p className="text-muted-foreground text-sm">
+          Hesap erişiminizi koruyan ayarlar. İki adımlı doğrulamayı açtığınızda
+          giriş yaparken authenticator uygulamanızdaki 6 haneli kod istenir.
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>İki Adımlı Doğrulama</CardTitle>
+          <CardDescription>
+            Authenticator uygulaması (Google Authenticator, 1Password, Authy, vs.)
+            ile TOTP. SMS desteklenmiyor.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <MfaPanel initiallyEnabled={mfaEnabled} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}