90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
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>
|
|
)
|
|
}
|