100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
import { Loader2 } from "lucide-react"
|
|
import { useState } from "react"
|
|
import { Navigate, useNavigate } from "react-router-dom"
|
|
import { toast } from "sonner"
|
|
|
|
import { registerWithOtp } 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 { completeAuthentication, getApiErrorMessage, getPasswordValidationMessage } from "./utils"
|
|
|
|
export function SignupPasswordPage() {
|
|
const navigate = useNavigate()
|
|
const { t } = useTranslation()
|
|
const { state, resetFlow } = useAuthFlow()
|
|
const [password, setPassword] = useState("")
|
|
const [confirmation, setConfirmation] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
if (!state.signup.mobile) {
|
|
return <Navigate to="/auth/signup" replace />
|
|
}
|
|
|
|
if (!state.signup.code) {
|
|
return <Navigate to="/auth/signup/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
|
|
}
|
|
|
|
const passwordValidationMessage = getPasswordValidationMessage(password, t.login)
|
|
if (passwordValidationMessage) {
|
|
toast.error(passwordValidationMessage)
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
try {
|
|
const data = await registerWithOtp(state.signup.mobile, state.signup.code, password, confirmation)
|
|
resetFlow("signup")
|
|
completeAuthentication({
|
|
access: data.access,
|
|
refresh: data.refresh,
|
|
successMessage: t.login.toasts.accountCreated,
|
|
redirectTo: "/timesheet",
|
|
navigate,
|
|
})
|
|
} catch (error) {
|
|
toast.error(getApiErrorMessage(error, t.login.toasts.failedSignup))
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AuthPanel
|
|
title={t.login.signupPasswordTitle}
|
|
description={t.login.signupPasswordDescription}
|
|
>
|
|
<form onSubmit={handleSubmit} className="grid gap-4">
|
|
<AuthPasswordField
|
|
id="signup-password"
|
|
value={password}
|
|
onChange={setPassword}
|
|
placeholder={t.login.newPasswordPlaceholder}
|
|
disabled={loading}
|
|
/>
|
|
<AuthPasswordField
|
|
id="signup-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.createAccountPasswordCta}
|
|
</Button>
|
|
|
|
<Button type="button" variant="outline" className="h-11 w-full" onClick={() => navigate("/auth/signup/verify")}>
|
|
{t.login.back}
|
|
</Button>
|
|
</form>
|
|
</AuthPanel>
|
|
)
|
|
}
|