feat(auth): improve otp delivery and verification flow

src/pages/auth/LoginMobilePage.tsx

@@ -1,15 +1,14 @@
-import { Loader2 } from "lucide-react"
-import { useMemo, useState } from "react"
+import { useMemo } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
-import { sendOtp, startGoogleLogin } from "../../api/users"
+import { 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"
+import { formatCooldown } from "./utils"
 
 const GoogleIcon = () => (
   <svg aria-hidden="true" className="h-5 w-5" viewBox="0 0 24 24">
@@ -35,10 +34,8 @@ const GoogleIcon = () => (
 export function LoginMobilePage() {
   const navigate = useNavigate()
   const { t, lang } = useTranslation()
-  const { state, setMobile, setCooldown, clearCooldown, resetFlow } = useAuthFlow()
+  const { state, setMobile, markOtpSendPending, clearOtpDelivery, resetFlow } = useAuthFlow()
   const isRtl = lang === "fa"
-  const [loading, setLoading] = useState(false)
-
   const alert = useMemo(() => {
     if (state.cooldowns.loginOtpSend <= 0) {
       return null
@@ -62,28 +59,10 @@ export function LoginMobilePage() {
       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)
-    }
+    resetFlow("forgotPassword")
+    clearOtpDelivery("login")
+    markOtpSendPending("login")
+    navigate("/auth/login/verify")
   }
 
   return (
@@ -99,7 +78,6 @@ export function LoginMobilePage() {
           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"}`}
@@ -107,10 +85,9 @@ export function LoginMobilePage() {
 
         <Button
           onClick={handleLogin}
-          disabled={loading || state.cooldowns.loginOtpSend > 0}
+          disabled={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>
 
@@ -129,7 +106,6 @@ export function LoginMobilePage() {
           type="button"
           variant="outline"
           onClick={startGoogleLogin}
-          disabled={loading}
           className="h-11 w-full"
         >
           <GoogleIcon />