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

src/pages/auth/ForgotPasswordPasswordPage.tsx

@@ -0,0 +1,89 @@
+import { Loader2 } from "lucide-react"
+import { useState } from "react"
+import { Navigate, useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+
+import { resetPasswordWithOtp } from "../../api/users"
+import { Button } from "../../components/ui/button"
+import { useAuthFlow } from "../../context/AuthFlowContext"
+import { useTranslation } from "../../hooks/useTranslation"
+import { AuthPanel } from "./AuthPanel"
+import { AuthPasswordField } from "./AuthPasswordField"
+import { getApiErrorMessage } from "./utils"
+
+export function ForgotPasswordPasswordPage() {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  const { state, resetFlow, setMobile } = useAuthFlow()
+  const [password, setPassword] = useState("")
+  const [confirmation, setConfirmation] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  if (!state.forgotPassword.mobile) {
+    return <Navigate to="/auth/forgot-password" replace />
+  }
+
+  if (!state.forgotPassword.code) {
+    return <Navigate to="/auth/forgot-password/verify" replace />
+  }
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+
+    if (!password || !confirmation) {
+      toast.error(t.login.toasts.fillAll)
+      return
+    }
+
+    if (password !== confirmation) {
+      toast.error(t.login.passwordMismatch)
+      return
+    }
+
+    setLoading(true)
+    try {
+      await resetPasswordWithOtp(state.forgotPassword.mobile, state.forgotPassword.code, password, confirmation)
+      setMobile("login", state.forgotPassword.mobile)
+      resetFlow("forgotPassword")
+      toast.success(t.login.toasts.passwordResetSuccess)
+      navigate("/auth/login/password", { replace: true })
+    } catch (error) {
+      toast.error(getApiErrorMessage(error, t.login.toasts.passwordResetFailed))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <AuthPanel
+      title={t.login.resetPasswordTitle}
+      description={t.login.resetPasswordDescription}
+    >
+      <form onSubmit={handleSubmit} className="grid gap-4">
+        <AuthPasswordField
+          id="reset-password"
+          value={password}
+          onChange={setPassword}
+          placeholder={t.login.newPasswordPlaceholder}
+          disabled={loading}
+        />
+        <AuthPasswordField
+          id="reset-password-confirmation"
+          value={confirmation}
+          onChange={setConfirmation}
+          placeholder={t.login.confirmPasswordPlaceholder}
+          disabled={loading}
+        />
+
+        <Button type="submit" className="h-11 w-full" disabled={loading}>
+          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+          {t.login.resetPasswordCta}
+        </Button>
+
+        <Button type="button" variant="outline" className="h-11 w-full" onClick={() => navigate("/auth/forgot-password/verify")}>
+          {t.login.back}
+        </Button>
+      </form>
+    </AuthPanel>
+  )
+}