feat(auth): unify mobile-first authentication flow

src/pages/auth/LoginMobilePage.tsx

@@ -1,12 +1,15 @@
-import { Link, useNavigate } from "react-router-dom"
+import { Loader2 } from "lucide-react"
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
 import { toast } from "sonner"
 
-import { startGoogleLogin } from "../../api/users"
+import { resolveAuthMobile, 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 { getApiErrorMessage } from "./utils"
 
 const GoogleIcon = () => (
   <svg aria-hidden="true" className="h-5 w-5" viewBox="0 0 24 24">
@@ -31,27 +34,51 @@ const GoogleIcon = () => (
 
 export function LoginMobilePage() {
   const navigate = useNavigate()
-  const { t, lang } = useTranslation()
-  const { state, setMobile, clearOtpDelivery, resetFlow } = useAuthFlow()
-  const isRtl = lang === "fa"
+  const { t } = useTranslation()
+  const { state, setMobile, clearOtpDelivery, clearSignupDetails, resetFlow } = useAuthFlow()
+  const [loading, setLoading] = useState(false)
 
-  const handleLogin = async () => {
+  const handleContinue = async () => {
     if (!state.login.mobile) {
       toast.error(t.login.toasts.enterMobile)
       return
     }
 
-    resetFlow("forgotPassword")
-    clearOtpDelivery("login")
-    navigate("/auth/login/password")
+    setLoading(true)
+    try {
+      const result = await resolveAuthMobile(state.login.mobile)
+      resetFlow("forgotPassword")
+
+      if (result.status === "existing_user") {
+        clearOtpDelivery("login")
+        navigate("/auth/login/password")
+        return
+      }
+
+      resetFlow("signup")
+      clearSignupDetails()
+      setMobile("signup", state.login.mobile)
+      navigate("/auth/signup/password")
+    } catch (error) {
+      toast.error(getApiErrorMessage(error, t.login.toasts.resolveMobileFailed))
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
     <AuthPanel
       title={t.login.loginTitle}
       description={t.login.loginDescription}
+      step={{ current: 1, total: 3, label: t.login.stepLabel(1, 3) }}
     >
-      <div className="grid gap-4">
+      <form
+        onSubmit={(event) => {
+          event.preventDefault()
+          void handleContinue()
+        }}
+        className="grid gap-4"
+      >
         <Input
           id="login-mobile"
           placeholder={t.login.mobilePlaceholder}
@@ -60,14 +87,16 @@ export function LoginMobilePage() {
           maxLength={11}
           value={state.login.mobile}
           onChange={(event) => setMobile("login", event.target.value)}
-          className={`h-11 ${isRtl ? "text-end" : "text-start"}`}
+          className="h-11 text-start"
         />
 
         <Button
-          onClick={handleLogin}
+          type="submit"
+          disabled={loading}
           className="h-11 w-full"
         >
-          {t.login.continueWithPassword}
+          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+          {t.login.continue}
         </Button>
 
         <div className="relative">
@@ -84,6 +113,7 @@ export function LoginMobilePage() {
         <Button
           type="button"
           variant="outline"
+          disabled={loading}
           onClick={startGoogleLogin}
           className="h-11 w-full"
         >
@@ -91,16 +121,7 @@ export function LoginMobilePage() {
           <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>
+      </form>
     </AuthPanel>
   )
 }