62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Anchor } from '@pikku/mantine/core'
|
|
import { Link, useNavigate } from '@tanstack/react-router'
|
|
import { useState, type FormEvent } from 'react'
|
|
import type { I18nString } from '@pikku/react'
|
|
import { m } from '@/i18n/messages'
|
|
import { useLocale } from '@/i18n/config'
|
|
import { AuthCard } from '@/components/AuthCard'
|
|
import { EMAIL_IN_USE, registerWithPassword } from '@/lib/auth'
|
|
|
|
export function SignupPage() {
|
|
useLocale()
|
|
const navigate = useNavigate()
|
|
const [email, setEmail] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState<I18nString | null>(null)
|
|
|
|
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault()
|
|
setBusy(true)
|
|
setError(null)
|
|
|
|
try {
|
|
await registerWithPassword(email, password, { redirectPath: '/app' })
|
|
await navigate({ to: '/app' })
|
|
} catch (err) {
|
|
setError(
|
|
err instanceof Error && err.message === EMAIL_IN_USE
|
|
? m.auth__signup__email_in_use()
|
|
: m.auth__signup__error(),
|
|
)
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AuthCard
|
|
title={m.auth__signup__title()}
|
|
description={m.auth__signup__description()}
|
|
cta={m.auth__signup__cta()}
|
|
email={email}
|
|
password={password}
|
|
passwordAutoComplete="new-password"
|
|
busy={busy}
|
|
message={null}
|
|
error={error}
|
|
onEmailChange={setEmail}
|
|
onPasswordChange={setPassword}
|
|
onSubmit={handleSubmit}
|
|
footer={
|
|
<>
|
|
{m.auth__signup__footer_prompt()}{' '}
|
|
<Anchor component={Link} to="/login">
|
|
{m.auth__signup__footer_action()}
|
|
</Anchor>
|
|
</>
|
|
}
|
|
/>
|
|
)
|
|
}
|