feat(auth): improve otp delivery and verification flow

src/pages/auth/LoginOtpPage.tsx

@@ -1,56 +1,148 @@
 import { Loader2 } from "lucide-react"
-import { useMemo, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { Link, Navigate, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
-import { loginWithOtp } from "../../api/users"
+import { loginWithOtp, sendOtp } 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 { AuthOtpInput } from "./AuthOtpInput"
 import { AuthPanel } from "./AuthPanel"
-import { completeAuthentication, formatCooldown, getApiErrorMessage, handleThrottleError } from "./utils"
+import {
+  completeAuthentication,
+  formatCooldown,
+  getApiErrorMessage,
+  getOtpRemainingSeconds,
+  handleThrottleError,
+} from "./utils"
 
 export function LoginOtpPage() {
   const navigate = useNavigate()
   const { t, lang } = useTranslation()
-  const { state, setCode, setCooldown, clearCooldown } = useAuthFlow()
+  const {
+    state,
+    setCode,
+    setCooldown,
+    clearCooldown,
+    setOtpDelivery,
+    clearOtpDelivery,
+  } = useAuthFlow()
   const isRtl = lang === "fa"
-  const [loading, setLoading] = useState(false)
+  const autoSendStartedRef = useRef(false)
+  const activeSubmitCodeRef = useRef("")
+  const lastFailedCodeRef = useRef("")
+  const [isSendingOtp, setIsSendingOtp] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [now, setNow] = useState(Date.now())
 
   if (!state.login.mobile) {
     return <Navigate to="/auth/login" replace />
   }
 
-  const alert = useMemo(() => {
-    if (state.cooldowns.loginOtpVerify <= 0) {
-      return null
+  useEffect(() => {
+    if (!state.login.otpExpiresAt || getOtpRemainingSeconds(state.login.otpExpiresAt) <= 0) {
+      return
     }
 
-    const formatted = formatCooldown(state.cooldowns.loginOtpVerify, isRtl)
-    return {
-      title: t.login.throttle.title,
-      description: t.login.throttle.otpLoginMessage(formatted),
+    const timer = window.setInterval(() => {
+      setNow(Date.now())
+    }, 1000)
+
+    return () => window.clearInterval(timer)
+  }, [state.login.otpExpiresAt])
+
+  const sendLoginOtp = async () => {
+    setIsSendingOtp(true)
+    try {
+      const response = await sendOtp(state.login.mobile, "login")
+      clearCooldown("loginOtpSend")
+      clearCooldown("loginOtpVerify")
+      lastFailedCodeRef.current = ""
+      setCode("login", "")
+      setOtpDelivery("login", response.expires_in_seconds)
+      setNow(Date.now())
+      toast.success(t.login.toasts.verifySent)
+    } catch (error) {
+      clearOtpDelivery("login")
+      if (
+        !handleThrottleError({
+          error,
+          cooldownKey: "loginOtpSend",
+          setCooldown,
+          formatTime: (seconds) => formatCooldown(seconds, isRtl),
+          throttleCopy: t.login.throttle,
+        })
+      ) {
+        toast.error(getApiErrorMessage(error, t.login.toasts.failedOtp))
+      }
+    } finally {
+      setIsSendingOtp(false)
     }
-  }, [isRtl, state.cooldowns.loginOtpVerify, t.login.throttle])
+  }
 
-  const cooldownLabel =
-    state.cooldowns.loginOtpVerify > 0
-      ? t.login.throttle.countdownLabel(formatCooldown(state.cooldowns.loginOtpVerify, isRtl))
-      : null
+  useEffect(() => {
+    if (!state.login.pendingOtpSend || autoSendStartedRef.current) {
+      return
+    }
 
-  const handleVerify = async (event: React.FormEvent) => {
-    event.preventDefault()
+    autoSendStartedRef.current = true
+    void sendLoginOtp()
+  }, [state.login.pendingOtpSend])
 
-    if (!state.login.code) {
+  const otpRemainingSeconds = state.login.otpExpiresAt
+    ? Math.max(0, Math.ceil((state.login.otpExpiresAt - now) / 1000))
+    : 0
+
+  const throttleAlert = useMemo(() => {
+    if (state.cooldowns.loginOtpVerify > 0) {
+      const formatted = formatCooldown(state.cooldowns.loginOtpVerify, isRtl)
+      return {
+        title: t.login.throttle.title,
+        description: t.login.throttle.otpLoginMessage(formatted),
+      }
+    }
+
+    if (state.cooldowns.loginOtpSend > 0) {
+      const formatted = formatCooldown(state.cooldowns.loginOtpSend, isRtl)
+      return {
+        title: t.login.throttle.title,
+        description: t.login.throttle.otpSendMessage(formatted),
+      }
+    }
+
+    return null
+  }, [isRtl, state.cooldowns.loginOtpSend, state.cooldowns.loginOtpVerify, t.login.throttle])
+
+  const expiryMessage =
+    otpRemainingSeconds > 0
+      ? t.login.otpExpiresIn(formatCooldown(otpRemainingSeconds, isRtl))
+      : state.login.otpExpiresAt
+        ? t.login.otpExpired
+        : null
+
+  const submitCode = async (code: string) => {
+    if (code.length !== 5) {
       toast.error(t.login.toasts.enterOtp)
       return
     }
 
-    setLoading(true)
+    if (isSendingOtp || isSubmitting || code === activeSubmitCodeRef.current) {
+      return
+    }
+
+    if (code === lastFailedCodeRef.current) {
+      toast.error(t.login.toasts.invalidOtp)
+      return
+    }
+
+    activeSubmitCodeRef.current = code
+    setIsSubmitting(true)
     try {
-      const data = await loginWithOtp(state.login.mobile, state.login.code)
+      const data = await loginWithOtp(state.login.mobile, code)
       clearCooldown("loginOtpVerify")
+      activeSubmitCodeRef.current = ""
+      lastFailedCodeRef.current = ""
       completeAuthentication({
         access: data.access,
         refresh: data.refresh,
@@ -68,35 +160,67 @@ export function LoginOtpPage() {
           throttleCopy: t.login.throttle,
         })
       ) {
+        lastFailedCodeRef.current = code
         toast.error(getApiErrorMessage(error, t.login.toasts.invalidOtp))
       }
     } finally {
-      setLoading(false)
+      activeSubmitCodeRef.current = ""
+      setIsSubmitting(false)
     }
   }
 
+  const handleResend = async () => {
+    autoSendStartedRef.current = false
+    await sendLoginOtp()
+  }
+
+  const isBusy = isSendingOtp || isSubmitting
+  const isRepeatedInvalidCode = state.login.code.length === 5 && state.login.code === lastFailedCodeRef.current
+
   return (
     <AuthPanel
       title={t.login.loginOtpTitle}
       description={t.login.sentCodeDesc(state.login.mobile)}
-      alert={alert}
+      alert={throttleAlert}
     >
-      <form onSubmit={handleVerify} className="grid gap-4">
-        <Input
+      <form
+        onSubmit={(event) => {
+          event.preventDefault()
+          void submitCode(state.login.code)
+        }}
+        className="grid gap-4"
+      >
+        <AuthOtpInput
           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"
+          disabled={isBusy}
+          onChange={(value) => setCode("login", value)}
+          onComplete={(value) => void submitCode(value)}
         />
 
-        <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}
+        {expiryMessage ? (
+          <p className="text-center text-sm text-slate-500 dark:text-slate-400">{expiryMessage}</p>
+        ) : null}
+
+        <Button
+          type="submit"
+          className="h-11 w-full"
+          disabled={isBusy || isRepeatedInvalidCode || state.cooldowns.loginOtpVerify > 0}
+        >
+          {(isSubmitting || isSendingOtp) && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+          {isSubmitting ? t.login.verifyingOtp : isSendingOtp ? t.login.sendingOtp : t.login.verifyAndContinue}
+        </Button>
+
+        <Button
+          type="button"
+          variant="outline"
+          className="h-11 w-full"
+          disabled={isBusy || otpRemainingSeconds > 0 || state.cooldowns.loginOtpSend > 0}
+          onClick={() => void handleResend()}
+        >
+          {state.cooldowns.loginOtpSend > 0
+            ? t.login.throttle.countdownLabel(formatCooldown(state.cooldowns.loginOtpSend, isRtl))
+            : t.login.resendOtp}
         </Button>
 
         <div className="text-center text-sm text-slate-500 dark:text-slate-400 underline">