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

src/pages/auth/SignupOtpPage.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react"
+import { Link, Navigate, useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+
+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"
+
+export function SignupOtpPage() {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  const { state, setCode } = useAuthFlow()
+  const [loading, setLoading] = useState(false)
+
+  if (!state.signup.mobile) {
+    return <Navigate to="/auth/signup" replace />
+  }
+
+  const handleContinue = async (event: React.FormEvent) => {
+    event.preventDefault()
+
+    if (!state.signup.code) {
+      toast.error(t.login.toasts.enterOtp)
+      return
+    }
+
+    setLoading(true)
+    navigate("/auth/signup/password")
+  }
+
+  return (
+    <AuthPanel
+      title={t.login.signupVerifyTitle}
+      description={t.login.sentCodeDesc(state.signup.mobile)}
+    >
+      <form onSubmit={handleContinue} className="grid gap-4">
+        <Input
+          id="signup-otp"
+          placeholder={t.login.otpPlaceholder}
+          type="text"
+          dir="ltr"
+          maxLength={6}
+          disabled={loading}
+          value={state.signup.code}
+          onChange={(event) => setCode("signup", event.target.value)}
+          className="h-11 text-center text-lg tracking-widest"
+        />
+
+        <Button type="submit" className="h-11 w-full" disabled={loading}>
+          {t.login.continueToPassword}
+        </Button>
+      </form>
+    </AuthPanel>
+  )
+}