96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
|
|
import { Alert, Anchor, Button, PasswordInput, Stack, Text, TextInput } from '@pikku/mantine/core'
|
|
import { useState } from 'react'
|
|
import { m } from '@/i18n/messages'
|
|
import { useLocale } from '@/i18n/config'
|
|
import { asI18n } from '@pikku/react'
|
|
import { useMutation } from '@tanstack/react-query'
|
|
import { AuthLayout } from '../auth/AuthLayout'
|
|
import { registerWithPassword, signInWithPassword, EMAIL_IN_USE } from '../lib/auth'
|
|
|
|
function SignupPage() {
|
|
useLocale()
|
|
const navigate = useNavigate()
|
|
const [displayName, setDisplayName] = useState('')
|
|
const [email, setEmail] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
|
|
const signup = useMutation({
|
|
mutationFn: async () => {
|
|
await registerWithPassword(email.trim(), password, displayName.trim())
|
|
await signInWithPassword(email.trim(), password)
|
|
},
|
|
onSuccess: () => navigate({ to: '/companies' }),
|
|
})
|
|
|
|
const errorMsg = signup.error instanceof Error
|
|
? signup.error.message === EMAIL_IN_USE
|
|
? m.auth_signup_errors_email_taken()
|
|
: asI18n(signup.error.message)
|
|
: null
|
|
|
|
return (
|
|
<AuthLayout
|
|
title={m.auth_signup_title()}
|
|
subtitle={m.auth_signup_subtitle()}
|
|
tagline={m.app_tagline()}
|
|
footer={
|
|
<>
|
|
{m.auth_signup_have_account()}{' '}
|
|
<Anchor component={Link} to="/login" fw={500}>
|
|
{m.auth_signup_login_cta()}
|
|
</Anchor>
|
|
</>
|
|
}
|
|
>
|
|
<form onSubmit={(e) => { e.preventDefault(); signup.mutate() }}>
|
|
<Stack gap="sm">
|
|
<TextInput
|
|
label={m.auth_signup_display_name()}
|
|
value={displayName}
|
|
onChange={(e) => setDisplayName(e.currentTarget.value)}
|
|
required
|
|
size="md"
|
|
radius="md"
|
|
autoComplete="name"
|
|
/>
|
|
<TextInput
|
|
type="email"
|
|
label={m.auth_login_email()}
|
|
placeholder={m.auth_login_email_placeholder()}
|
|
value={email}
|
|
onChange={(e) => setEmail(e.currentTarget.value)}
|
|
required
|
|
size="md"
|
|
radius="md"
|
|
autoComplete="email"
|
|
/>
|
|
<PasswordInput
|
|
label={m.auth_login_password()}
|
|
description={m.auth_signup_password_hint()}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.currentTarget.value)}
|
|
required
|
|
minLength={8}
|
|
size="md"
|
|
radius="md"
|
|
autoComplete="new-password"
|
|
/>
|
|
{errorMsg && (
|
|
<Alert color="red" variant="light">
|
|
<Text size="sm">{errorMsg}</Text>
|
|
</Alert>
|
|
)}
|
|
<Button type="submit" loading={signup.isPending} fullWidth size="md" radius="md">
|
|
{m.auth_signup_submit()}
|
|
</Button>
|
|
</Stack>
|
|
</form>
|
|
</AuthLayout>
|
|
)
|
|
}
|
|
|
|
export const Route = createFileRoute('/signup')({
|
|
component: SignupPage,
|
|
})
|