57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import type { FC } from 'react'
|
|
import { Anchor } from '@pikku/mantine/core'
|
|
import { Link, useNavigate } from '@tanstack/react-router'
|
|
import { useMutation } from '@tanstack/react-query'
|
|
import { m } from '@/i18n/messages'
|
|
import { useLocale } from '@/i18n/config'
|
|
import { AuthCard, type AuthFormValues } from '@/components/AuthCard'
|
|
import { EMAIL_IN_USE, registerWithPassword, signInWithGoogle } from '@/lib/auth'
|
|
|
|
export const SignupPage: FC = () => {
|
|
useLocale()
|
|
const navigate = useNavigate()
|
|
const appName = m.app__name()
|
|
|
|
const signUp = useMutation({
|
|
mutationFn: (values: AuthFormValues) =>
|
|
registerWithPassword(values.email, values.password, {
|
|
name: values.name,
|
|
redirectPath: '/app',
|
|
}),
|
|
onSuccess: () => navigate({ to: '/app' }),
|
|
})
|
|
const google = useMutation({ mutationFn: () => signInWithGoogle('/app') })
|
|
|
|
const error = signUp.isError
|
|
? signUp.error instanceof Error && signUp.error.message === EMAIL_IN_USE
|
|
? m.auth__signup__email_in_use()
|
|
: m.auth__signup__error()
|
|
: google.isError
|
|
? m.auth__google_error()
|
|
: null
|
|
|
|
return (
|
|
<AuthCard
|
|
appName={appName}
|
|
title={m.auth__signup__title()}
|
|
description={m.auth__signup__description({ name: appName })}
|
|
cta={m.auth__signup__cta()}
|
|
includeName
|
|
passwordAutoComplete="new-password"
|
|
busy={signUp.isPending}
|
|
googleBusy={google.isPending}
|
|
error={error}
|
|
onAuthSubmit={(values) => signUp.mutate(values)}
|
|
onGoogle={() => google.mutate()}
|
|
footer={
|
|
<>
|
|
{m.auth__signup__footer_prompt()}{' '}
|
|
<Anchor component={Link} to="/login">
|
|
{m.auth__signup__footer_action()}
|
|
</Anchor>
|
|
</>
|
|
}
|
|
/>
|
|
)
|
|
}
|