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.";
+}