feat(auth,privacy,web): step-by-step login, privacy settings persistence, TOTP QR, and API docs

web/src/components/AuthPanel.tsx

@@ -1,18 +1,20 @@
+import axios from "axios";
 import { FormEvent, useState } from "react";
-import { registerRequest } from "../api/auth";
+import { checkEmailStatus, registerRequest } from "../api/auth";
 import { useAuthStore } from "../store/authStore";
 
-type Mode = "login" | "register";
+type Step = "email" | "password" | "register" | "otp";
 
 export function AuthPanel() {
   const login = useAuthStore((s) => s.login);
   const loading = useAuthStore((s) => s.loading);
-  const [mode, setMode] = useState<Mode>("login");
+  const [step, setStep] = useState<Step>("email");
   const [email, setEmail] = useState("");
   const [name, setName] = useState("");
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [otpCode, setOtpCode] = useState("");
+  const [checkingEmail, setCheckingEmail] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
 
@@ -21,47 +23,135 @@ export function AuthPanel() {
     setError(null);
     setSuccess(null);
     try {
-      if (mode === "register") {
-        await registerRequest(email, name, username, password);
-        setSuccess("Registered. Check email verification, then login.");
-        setMode("login");
+      if (step === "email") {
+        const normalizedEmail = email.trim().toLowerCase();
+        if (!normalizedEmail) {
+          setError("Enter email.");
+          return;
+        }
+        setCheckingEmail(true);
+        try {
+          const status = await checkEmailStatus(normalizedEmail);
+          setEmail(normalizedEmail);
+          setStep(status.registered ? "password" : "register");
+        } finally {
+          setCheckingEmail(false);
+        }
         return;
       }
+
+      if (step === "register") {
+        await registerRequest(email, name, username, password);
+        setSuccess("Account created. Verify email and continue login.");
+        setStep("password");
+        return;
+      }
+
+      if (step === "password") {
+        await login(email, password);
+        return;
+      }
+
       await login(email, password, otpCode.trim() || undefined);
-    } catch {
-      setError("Auth request failed.");
+    } catch (err) {
+      const message = getErrorMessage(err);
+      if (step === "password" && message.toLowerCase().includes("2fa code required")) {
+        setStep("otp");
+        setError(null);
+        setSuccess("Enter 2FA code.");
+        return;
+      }
+      setError(message);
+      setSuccess(null);
     }
   }
 
+  function resetToEmail() {
+    setStep("email");
+    setPassword("");
+    setOtpCode("");
+    setName("");
+    setUsername("");
+    setError(null);
+    setSuccess(null);
+  }
+
+  const submitLabel =
+    step === "email"
+      ? "Continue"
+      : step === "register"
+        ? "Create account"
+        : step === "password"
+          ? "Next"
+          : "Sign in";
+
+  const isBusy = loading || checkingEmail;
+
   return (
-    <div className="mx-auto mt-16 w-full max-w-md rounded-xl bg-panel p-6 shadow-xl">
-      <div className="mb-4 flex gap-2">
-        <button className={`rounded px-3 py-2 ${mode === "login" ? "bg-accent text-black" : "bg-slate-700"}`} onClick={() => setMode("login")}>
-          Login
-        </button>
-        <button className={`rounded px-3 py-2 ${mode === "register" ? "bg-accent text-black" : "bg-slate-700"}`} onClick={() => setMode("register")}>
-          Register
-        </button>
-      </div>
+    <div className="mx-auto mt-16 w-full max-w-md rounded-2xl border border-slate-700/70 bg-panel p-6 shadow-xl">
+      <p className="mb-1 text-xl font-semibold">
+        {step === "email" ? "Sign in to BenyaMessenger" : step === "register" ? "Create account" : "Enter credentials"}
+      </p>
+      <p className="mb-4 text-sm text-slate-400">
+        {step === "email"
+          ? "Enter your email to continue"
+          : step === "register"
+            ? "This email is not registered yet. Complete registration."
+            : step === "password"
+              ? "Enter your password"
+              : "Two-factor authentication is enabled"}
+      </p>
+
       <form className="space-y-3" onSubmit={onSubmit}>
-        <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
-        {mode === "register" && (
-          <>
-            <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
-            <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
-          </>
-        )}
-        <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
-        {mode === "login" ? (
+        <div className="space-y-2">
           <input
             className="w-full rounded bg-slate-800 px-3 py-2"
-            placeholder="2FA code (if enabled)"
+            disabled={step !== "email"}
+            placeholder="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          {step !== "email" ? (
+            <button className="text-xs text-sky-300 hover:text-sky-200" onClick={resetToEmail} type="button">
+              Change email
+            </button>
+          ) : null}
+        </div>
+
+        {step === "register" ? (
+          <>
+            <input className="w-full rounded bg-slate-800 px-3 py-2" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+            <input
+              className="w-full rounded bg-slate-800 px-3 py-2"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value.replace("@", ""))}
+            />
+          </>
+        ) : null}
+
+        {step === "password" || step === "register" || step === "otp" ? (
+          <input
+            className="w-full rounded bg-slate-800 px-3 py-2"
+            placeholder="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        ) : null}
+
+        {step === "otp" ? (
+          <input
+            className="w-full rounded bg-slate-800 px-3 py-2"
+            placeholder="2FA code"
             value={otpCode}
             onChange={(e) => setOtpCode(e.target.value.replace(/\D/g, "").slice(0, 8))}
           />
         ) : null}
-        <button className="w-full rounded bg-accent px-3 py-2 font-semibold text-black disabled:opacity-50" disabled={loading} type="submit">
-          {mode === "login" ? "Sign in" : "Create account"}
+
+        <button className="w-full rounded bg-accent px-3 py-2 font-semibold text-black disabled:opacity-50" disabled={isBusy} type="submit">
+          {submitLabel}
         </button>
       </form>
       {error ? <p className="mt-3 text-sm text-red-400">{error}</p> : null}
@@ -69,3 +159,19 @@ export function AuthPanel() {
     </div>
   );
 }
+
+function getErrorMessage(err: unknown): string {
+  if (axios.isAxiosError(err)) {
+    const detail = err.response?.data?.detail;
+    if (typeof detail === "string" && detail.trim()) {
+      return detail;
+    }
+    if (typeof err.message === "string" && err.message.trim()) {
+      return err.message;
+    }
+  }
+  if (err instanceof Error && err.message) {
+    return err.message;
+  }
+  return "Auth request failed.";
+}

web/src/components/SettingsPanel.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
+import QRCode from "qrcode";
 import { listBlockedUsers, updateMyProfile } from "../api/users";
 import { disableTwoFactor, enableTwoFactor, listSessions, revokeAllSessions, revokeSession, setupTwoFactor } from "../api/auth";
 import type { AuthSession, AuthUser } from "../chat/types";
@@ -15,6 +16,7 @@ interface Props {
 
 export function SettingsPanel({ open, onClose }: Props) {
   const me = useAuthStore((s) => s.me);
+  const logout = useAuthStore((s) => s.logout);
   const [page, setPage] = useState<SettingsPage>("main");
   const [prefs, setPrefs] = useState<AppPreferences>(() => getAppPreferences());
   const [blockedCount, setBlockedCount] = useState(0);
@@ -25,7 +27,11 @@ export function SettingsPanel({ open, onClose }: Props) {
   const [twofaCode, setTwofaCode] = useState("");
   const [twofaSecret, setTwofaSecret] = useState<string | null>(null);
   const [twofaUrl, setTwofaUrl] = useState<string | null>(null);
+  const [twofaQrUrl, setTwofaQrUrl] = useState<string | null>(null);
   const [twofaError, setTwofaError] = useState<string | null>(null);
+  const [privacyLastSeen, setPrivacyLastSeen] = useState<"everyone" | "contacts" | "nobody">("everyone");
+  const [privacyAvatar, setPrivacyAvatar] = useState<"everyone" | "contacts" | "nobody">("everyone");
+  const [privacyGroupInvites, setPrivacyGroupInvites] = useState<"everyone" | "contacts">("everyone");
   const [profileDraft, setProfileDraft] = useState({
     name: "",
     username: "",
@@ -38,6 +44,9 @@ export function SettingsPanel({ open, onClose }: Props) {
       return;
     }
     setAllowPrivateMessages(me.allow_private_messages);
+    setPrivacyLastSeen(me.privacy_last_seen || "everyone");
+    setPrivacyAvatar(me.privacy_avatar || "everyone");
+    setPrivacyGroupInvites(me.privacy_group_invites || "everyone");
     setProfileDraft({
       name: me.name || "",
       username: me.username || "",
@@ -46,6 +55,29 @@ export function SettingsPanel({ open, onClose }: Props) {
     });
   }, [me]);
 
+  useEffect(() => {
+    if (!twofaUrl) {
+      setTwofaQrUrl(null);
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        const url = await QRCode.toDataURL(twofaUrl, { margin: 1, width: 192 });
+        if (!cancelled) {
+          setTwofaQrUrl(url);
+        }
+      } catch {
+        if (!cancelled) {
+          setTwofaQrUrl(null);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [twofaUrl]);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -268,9 +300,62 @@ export function SettingsPanel({ open, onClose }: Props) {
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                 <p className="mb-2 text-xs uppercase tracking-wide text-slate-400">Privacy</p>
                 <SettingsTextRow label="Blocked Users" value={String(blockedCount)} />
-                <SettingsTextRow label="Who can see my profile photo?" value="Everybody" />
-                <SettingsTextRow label="Who can see my last seen?" value="Everybody" />
-                <SettingsTextRow label="Who can add me to groups?" value="Everybody" />
+                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
+                  <p className="mb-1 text-xs text-slate-300">Who can see my profile photo?</p>
+                  <select
+                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
+                    value={privacyAvatar}
+                    onChange={(e) => setPrivacyAvatar(e.target.value as "everyone" | "contacts" | "nobody")}
+                  >
+                    <option value="everyone">Everybody</option>
+                    <option value="contacts">My contacts</option>
+                    <option value="nobody">Nobody</option>
+                  </select>
+                </div>
+                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
+                  <p className="mb-1 text-xs text-slate-300">Who can see my last seen?</p>
+                  <select
+                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
+                    value={privacyLastSeen}
+                    onChange={(e) => setPrivacyLastSeen(e.target.value as "everyone" | "contacts" | "nobody")}
+                  >
+                    <option value="everyone">Everybody</option>
+                    <option value="contacts">My contacts</option>
+                    <option value="nobody">Nobody</option>
+                  </select>
+                </div>
+                <div className="mb-2 rounded bg-slate-900/50 px-2 py-2">
+                  <p className="mb-1 text-xs text-slate-300">Who can add me to groups?</p>
+                  <select
+                    className="w-full rounded bg-slate-800 px-2 py-1 text-xs"
+                    value={privacyGroupInvites}
+                    onChange={(e) => setPrivacyGroupInvites(e.target.value as "everyone" | "contacts")}
+                  >
+                    <option value="everyone">Everybody</option>
+                    <option value="contacts">My contacts</option>
+                  </select>
+                </div>
+                <button
+                  className="w-full rounded bg-sky-500 px-3 py-2 text-sm font-semibold text-slate-950 disabled:opacity-60"
+                  onClick={async () => {
+                    setSavingPrivacy(true);
+                    try {
+                      const updated = await updateMyProfile({
+                        allow_private_messages: allowPrivateMessages,
+                        privacy_last_seen: privacyLastSeen,
+                        privacy_avatar: privacyAvatar,
+                        privacy_group_invites: privacyGroupInvites,
+                      });
+                      useAuthStore.setState({ me: updated as AuthUser });
+                    } finally {
+                      setSavingPrivacy(false);
+                    }
+                  }}
+                  disabled={savingPrivacy}
+                  type="button"
+                >
+                  {savingPrivacy ? "Saving..." : "Save privacy settings"}
+                </button>
               </section>
               <section className="rounded border border-slate-700/70 bg-slate-800/50 p-3">
                 <CheckboxOption
@@ -316,6 +401,11 @@ export function SettingsPanel({ open, onClose }: Props) {
                       <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>
+                        {twofaQrUrl ? (
+                          <div className="mt-2 rounded bg-white p-2">
+                            <img alt="TOTP QR" className="mx-auto h-44 w-44" src={twofaQrUrl} />
+                          </div>
+                        ) : null}
                         {twofaUrl ? <p className="mt-1 break-all text-[11px] text-slate-500">{twofaUrl}</p> : null}
                       </div>
                     ) : null}
@@ -362,6 +452,7 @@ export function SettingsPanel({ open, onClose }: Props) {
                           setTwofaCode("");
                           setTwofaSecret(null);
                           setTwofaUrl(null);
+                          setTwofaQrUrl(null);
                         } catch {
                           setTwofaError("Invalid 2FA code");
                         }
@@ -382,6 +473,8 @@ export function SettingsPanel({ open, onClose }: Props) {
                     onClick={async () => {
                       await revokeAllSessions();
                       setSessions([]);
+                      logout();
+                      onClose();
                     }}
                     type="button"
                   >