feat(auth): add TOTP 2FA setup and login verification

- add user twofa fields and migration

- add 2FA setup/enable/disable endpoints

- enforce OTP on login when 2FA enabled

- add web login OTP field and settings UI

web/src/components/SettingsPanel.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { listBlockedUsers, updateMyProfile } from "../api/users";
-import { listSessions, revokeAllSessions, revokeSession } from "../api/auth";
+import { disableTwoFactor, enableTwoFactor, listSessions, revokeAllSessions, revokeSession, setupTwoFactor } from "../api/auth";
 import type { AuthSession, AuthUser } from "../chat/types";
 import { useAuthStore } from "../store/authStore";
 import { AppPreferences, getAppPreferences, updateAppPreferences } from "../utils/preferences";
@@ -22,6 +22,10 @@ export function SettingsPanel({ open, onClose }: Props) {
   const [allowPrivateMessages, setAllowPrivateMessages] = useState(true);
   const [sessions, setSessions] = useState<AuthSession[]>([]);
   const [sessionsLoading, setSessionsLoading] = useState(false);
+  const [twofaCode, setTwofaCode] = useState("");
+  const [twofaSecret, setTwofaSecret] = useState<string | null>(null);
+  const [twofaUrl, setTwofaUrl] = useState<string | null>(null);
+  const [twofaError, setTwofaError] = useState<string | null>(null);
   const [profileDraft, setProfileDraft] = useState({
     name: "",
     username: "",
@@ -285,6 +289,91 @@ export function SettingsPanel({ open, onClose }: Props) {
                   disabled={savingPrivacy}
                 />
               </section>
+              <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
+                <div className="mb-2 flex items-center justify-between">
+                  <p className="text-xs uppercase tracking-wide text-slate-400">Two-Factor Authentication</p>
+                  <span className="text-[11px] text-slate-400">{me.twofa_enabled ? "Enabled" : "Disabled"}</span>
+                </div>
+                {!me.twofa_enabled ? (
+                  <>
+                    <button
+                      className="mb-2 rounded bg-slate-700 px-2 py-1 text-xs"
+                      onClick={async () => {
+                        setTwofaError(null);
+                        try {
+                          const setup = await setupTwoFactor();
+                          setTwofaSecret(setup.secret);
+                          setTwofaUrl(setup.otpauth_url);
+                        } catch {
+                          setTwofaError("Failed to setup 2FA");
+                        }
+                      }}
+                      type="button"
+                    >
+                      Generate secret
+                    </button>
+                    {twofaSecret ? (
+                      <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
+                        <p className="text-[11px] text-slate-400">Secret</p>
+                        <p className="break-all text-xs text-slate-200">{twofaSecret}</p>
+                        {twofaUrl ? <p className="mt-1 break-all text-[11px] text-slate-500">{twofaUrl}</p> : null}
+                      </div>
+                    ) : null}
+                    <div className="flex gap-2">
+                      <input
+                        className="w-full rounded bg-slate-800 px-2 py-1.5 text-xs"
+                        placeholder="Enter app code"
+                        value={twofaCode}
+                        onChange={(e) => setTwofaCode(e.target.value.replace(/\D/g, "").slice(0, 8))}
+                      />
+                      <button
+                        className="rounded bg-sky-500 px-2 py-1 text-xs font-semibold text-slate-950"
+                        onClick={async () => {
+                          setTwofaError(null);
+                          try {
+                            await enableTwoFactor(twofaCode);
+                            await useAuthStore.getState().loadMe();
+                            setTwofaCode("");
+                          } catch {
+                            setTwofaError("Invalid 2FA code");
+                          }
+                        }}
+                        type="button"
+                      >
+                        Enable
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <div className="flex gap-2">
+                    <input
+                      className="w-full rounded bg-slate-800 px-2 py-1.5 text-xs"
+                      placeholder="Code to disable"
+                      value={twofaCode}
+                      onChange={(e) => setTwofaCode(e.target.value.replace(/\D/g, "").slice(0, 8))}
+                    />
+                    <button
+                      className="rounded bg-red-500 px-2 py-1 text-xs font-semibold text-white"
+                      onClick={async () => {
+                        setTwofaError(null);
+                        try {
+                          await disableTwoFactor(twofaCode);
+                          await useAuthStore.getState().loadMe();
+                          setTwofaCode("");
+                          setTwofaSecret(null);
+                          setTwofaUrl(null);
+                        } catch {
+                          setTwofaError("Invalid 2FA code");
+                        }
+                      }}
+                      type="button"
+                    >
+                      Disable
+                    </button>
+                  </div>
+                )}
+                {twofaError ? <p className="mt-2 text-xs text-red-400">{twofaError}</p> : null}
+              </section>
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                 <div className="mb-2 flex items-center justify-between">
                   <p className="text-xs uppercase tracking-wide text-slate-400">Active Sessions</p>