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

src/pages/auth/LoginMobilePage.tsx

@@ -0,0 +1,151 @@
+import { Loader2 } from "lucide-react"
+import { useMemo, useState } from "react"
+import { Link, useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+
+import { sendOtp, startGoogleLogin } 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 { formatCooldown, getApiErrorMessage, handleThrottleError } from "./utils"
+
+const GoogleIcon = () => (
+  <svg aria-hidden="true" className="h-5 w-5" viewBox="0 0 24 24">
+    <path
+      d="M21.805 10.023h-9.72v3.955h5.57c-.24 1.272-.96 2.35-2.042 3.07v2.548h3.3c1.933-1.78 3.042-4.4 3.042-7.506 0-.692-.062-1.357-.15-2.067Z"
+      fill="#4285F4"
+    />
+    <path
+      d="M12.085 22c2.79 0 5.13-.925 6.84-2.504l-3.3-2.548c-.924.617-2.103.986-3.54.986-2.705 0-4.99-1.823-5.807-4.28H2.87v2.626A10.33 10.33 0 0 0 12.085 22Z"
+      fill="#34A853"
+    />
+    <path
+      d="M6.278 13.654A6.214 6.214 0 0 1 5.95 11.7c0-.68.117-1.34.328-1.954V7.12H2.87A10.31 10.31 0 0 0 1.75 11.7c0 1.65.39 3.218 1.12 4.58l3.408-2.626Z"
+      fill="#FBBC05"
+    />
+    <path
+      d="M12.085 5.466c1.52 0 2.882.522 3.955 1.55l2.966-2.966C17.21 2.387 14.874 1.4 12.085 1.4A10.33 10.33 0 0 0 2.87 7.12l3.408 2.626c.818-2.457 3.103-4.28 5.807-4.28Z"
+      fill="#EA4335"
+    />
+  </svg>
+)
+
+export function LoginMobilePage() {
+  const navigate = useNavigate()
+  const { t, lang } = useTranslation()
+  const { state, setMobile, setCooldown, clearCooldown, resetFlow } = useAuthFlow()
+  const isRtl = lang === "fa"
+  const [loading, setLoading] = useState(false)
+
+  const alert = useMemo(() => {
+    if (state.cooldowns.loginOtpSend <= 0) {
+      return null
+    }
+
+    const formatted = formatCooldown(state.cooldowns.loginOtpSend, isRtl)
+    return {
+      title: t.login.throttle.title,
+      description: t.login.throttle.otpSendMessage(formatted),
+    }
+  }, [isRtl, state.cooldowns.loginOtpSend, t.login.throttle])
+
+  const cooldownLabel =
+    state.cooldowns.loginOtpSend > 0
+      ? t.login.throttle.countdownLabel(formatCooldown(state.cooldowns.loginOtpSend, isRtl))
+      : null
+
+  const handleLogin = async () => {
+    if (!state.login.mobile) {
+      toast.error(t.login.toasts.enterMobile)
+      return
+    }
+
+    setLoading(true)
+    try {
+      await sendOtp(state.login.mobile, "login")
+      clearCooldown("loginOtpSend")
+      resetFlow("forgotPassword")
+      navigate("/auth/login/verify")
+      toast.success(t.login.toasts.verifySent)
+    } catch (error) {
+      if (
+        !handleThrottleError({
+          error,
+          cooldownKey: "loginOtpSend",
+          setCooldown,
+          formatTime: (seconds) => formatCooldown(seconds, isRtl),
+          throttleCopy: t.login.throttle,
+        })
+      ) {
+        toast.error(getApiErrorMessage(error, t.login.toasts.failedOtp))
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <AuthPanel
+      title={t.login.loginTitle}
+      description={t.login.loginDescription}
+      alert={alert}
+    >
+      <div className="grid gap-4">
+        <Input
+          id="login-mobile"
+          placeholder={t.login.mobilePlaceholder}
+          type="tel"
+          dir="ltr"
+          maxLength={11}
+          disabled={loading}
+          value={state.login.mobile}
+          onChange={(event) => setMobile("login", event.target.value)}
+          className={`h-11 ${isRtl ? "text-end" : "text-start"}`}
+        />
+
+        <Button
+          onClick={handleLogin}
+          disabled={loading || state.cooldowns.loginOtpSend > 0}
+          className="h-11 w-full"
+        >
+          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+          {cooldownLabel || t.login.loginCta}
+        </Button>
+
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t border-slate-200 dark:border-slate-800" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-white px-2 text-slate-500 transition-colors dark:bg-slate-950 dark:text-slate-400">
+              {t.login.orContinueWith}
+            </span>
+          </div>
+        </div>
+
+        <Button
+          type="button"
+          variant="outline"
+          onClick={startGoogleLogin}
+          disabled={loading}
+          className="h-11 w-full"
+        >
+          <GoogleIcon />
+          <span className="ms-3">{t.login.continueWithGoogle}</span>
+        </Button>
+
+        <div className="text-center text-sm text-slate-500 dark:text-slate-400">
+          {t.login.haveNoAccount}{" "}
+          <Link
+            to="/auth/signup"
+            className="font-medium text-blue-600 transition-colors hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
+          >
+            {t.login.register}
+          </Link>
+        </div>
+      </div>
+    </AuthPanel>
+  )
+}