feat(auth): add stepped auth and password recovery flows

src/pages/auth/LoginOtpPage.tsx

@@ -0,0 +1,113 @@
+import { Loader2 } from "lucide-react"
+import { useMemo, useState } from "react"
+import { Link, Navigate, useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+
+import { loginWithOtp } from "../../api/users"
+import { Button } from "../../components/ui/button"
+import { Input } from "../../components/ui/input"
+import { useAuthFlow } from "../../context/AuthFlowContext"
+import { useTranslation } from "../../hooks/useTranslation"
+import { AuthPanel } from "./AuthPanel"
+import { completeAuthentication, formatCooldown, getApiErrorMessage, handleThrottleError } from "./utils"
+
+export function LoginOtpPage() {
+  const navigate = useNavigate()
+  const { t, lang } = useTranslation()
+  const { state, setCode, setCooldown, clearCooldown } = useAuthFlow()
+  const isRtl = lang === "fa"
+  const [loading, setLoading] = useState(false)
+
+  if (!state.login.mobile) {
+    return <Navigate to="/auth/login" replace />
+  }
+
+  const alert = useMemo(() => {
+    if (state.cooldowns.loginOtpVerify <= 0) {
+      return null
+    }
+
+    const formatted = formatCooldown(state.cooldowns.loginOtpVerify, isRtl)
+    return {
+      title: t.login.throttle.title,
+      description: t.login.throttle.otpLoginMessage(formatted),
+    }
+  }, [isRtl, state.cooldowns.loginOtpVerify, t.login.throttle])
+
+  const cooldownLabel =
+    state.cooldowns.loginOtpVerify > 0
+      ? t.login.throttle.countdownLabel(formatCooldown(state.cooldowns.loginOtpVerify, isRtl))
+      : null
+
+  const handleVerify = async (event: React.FormEvent) => {
+    event.preventDefault()
+
+    if (!state.login.code) {
+      toast.error(t.login.toasts.enterOtp)
+      return
+    }
+
+    setLoading(true)
+    try {
+      const data = await loginWithOtp(state.login.mobile, state.login.code)
+      clearCooldown("loginOtpVerify")
+      completeAuthentication({
+        access: data.access,
+        refresh: data.refresh,
+        successMessage: t.login.toasts.successLogin,
+        redirectTo: "/profile",
+        navigate,
+      })
+    } catch (error) {
+      if (
+        !handleThrottleError({
+          error,
+          cooldownKey: "loginOtpVerify",
+          setCooldown,
+          formatTime: (seconds) => formatCooldown(seconds, isRtl),
+          throttleCopy: t.login.throttle,
+        })
+      ) {
+        toast.error(getApiErrorMessage(error, t.login.toasts.invalidOtp))
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <AuthPanel
+      title={t.login.loginOtpTitle}
+      description={t.login.sentCodeDesc(state.login.mobile)}
+      alert={alert}
+    >
+      <form onSubmit={handleVerify} className="grid gap-4">
+        <Input
+          id="login-otp"
+          placeholder={t.login.otpPlaceholder}
+          type="text"
+          dir="ltr"
+          maxLength={5}
+          disabled={loading}
+          value={state.login.code}
+          onChange={(event) => setCode("login", event.target.value)}
+          className="h-11 text-center text-lg tracking-widest"
+        />
+
+        <Button type="submit" className="h-11 w-full" disabled={loading || state.cooldowns.loginOtpVerify > 0}>
+          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+          {cooldownLabel || t.login.verifyAndContinue}
+        </Button>
+
+        <div className="text-center text-sm text-slate-500 dark:text-slate-400 underline">
+          <Link
+            to="/auth/login/password"
+            className="font-medium text-blue-600 transition-colors hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
+          >
+            {t.login.usePasswordInstead}
+          </Link>
+        </div>
+      </form>
+    </AuthPanel>
+  )
+}