fix(auth): make login password first

src/locales/en.ts

@@ -28,7 +28,7 @@ export const en = {
   login: {
     welcome: (title: string = "Qlockifiy") => `Welcome to ${title}`,
     loginTitle: "Sign in to your account",
-    loginDescription: "Enter your mobile number and we will send a one-time code.",
+    loginDescription: "Enter your mobile number to continue with password login.",
     loginCta: "Login",
     createAccount: "Create account",
     haveNoAccount: "Need an account?",

src/locales/fa.ts

@@ -27,7 +27,7 @@ export const fa = {
 
   login: {
     loginTitle: "ورود به حساب",
-    loginDescription: "شماره موبایل خود را وارد کنید تا کد یکبار مصرف برای شما ارسال شود.",
+    loginDescription: "شماره موبایل خود را وارد کنید تا با رمز عبور وارد شوید.",
     loginCta: "ورود",
     createAccount: "ایجاد حساب",
     haveNoAccount: "حساب ندارید؟",

src/pages/auth/LoginMobilePage.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
@@ -8,7 +7,6 @@ import { Input } from "../../components/ui/input"
 import { useAuthFlow } from "../../context/AuthFlowContext"
 import { useTranslation } from "../../hooks/useTranslation"
 import { AuthPanel } from "./AuthPanel"
-import { formatCooldown } from "./utils"
 
 const GoogleIcon = () => (
   <svg aria-hidden="true" className="h-5 w-5" viewBox="0 0 24 24">
@@ -34,24 +32,8 @@ const GoogleIcon = () => (
 export function LoginMobilePage() {
   const navigate = useNavigate()
   const { t, lang } = useTranslation()
-  const { state, setMobile, markOtpSendPending, clearOtpDelivery, resetFlow } = useAuthFlow()
+  const { state, setMobile, clearOtpDelivery, resetFlow } = useAuthFlow()
   const isRtl = lang === "fa"
-  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) {
@@ -61,15 +43,13 @@ export function LoginMobilePage() {
 
     resetFlow("forgotPassword")
     clearOtpDelivery("login")
-    markOtpSendPending("login")
+    navigate("/auth/login/password")
-    navigate("/auth/login/verify")
   }
 
   return (
     <AuthPanel
       title={t.login.loginTitle}
       description={t.login.loginDescription}
-      alert={alert}
     >
       <div className="grid gap-4">
         <Input
@@ -85,10 +65,9 @@ export function LoginMobilePage() {
 
         <Button
           onClick={handleLogin}
-          disabled={state.cooldowns.loginOtpSend > 0}
           className="h-11 w-full"
         >
-          {cooldownLabel || t.login.loginCta}
+          {t.login.continueWithPassword}
         </Button>
 
         <div className="relative">

src/pages/auth/LoginPasswordPage.tsx

@@ -14,7 +14,16 @@ import { completeAuthentication, formatCooldown, getApiErrorMessage, handleThrot
 export function LoginPasswordPage() {
   const navigate = useNavigate()
   const { t, lang } = useTranslation()
-  const { state, setMobile, clearCooldown, setCooldown, setCode, resetFlow } = useAuthFlow()
+  const {
+    state,
+    setMobile,
+    clearCooldown,
+    setCooldown,
+    setCode,
+    clearOtpDelivery,
+    markOtpSendPending,
+    resetFlow,
+  } = useAuthFlow()
   const isRtl = lang === "fa"
   const [password, setPassword] = useState("")
   const [loading, setLoading] = useState(false)
@@ -95,7 +104,16 @@ export function LoginPasswordPage() {
           {cooldownLabel || t.login.signIn}
         </Button>
 
-        <Button type="button" variant="outline" className="h-11 w-full" onClick={() => navigate("/auth/login/verify")}>
+        <Button
+          type="button"
+          variant="outline"
+          className="h-11 w-full"
+          onClick={() => {
+            clearOtpDelivery("login")
+            markOtpSendPending("login")
+            navigate("/auth/login/verify")
+          }}
+        >
           {t.login.useOtpInstead}
         </Button>