import './CreateAccountView.scss' import * as validate from '@/lib/validate' import Button from '@/components/button/Button' import ButtonSet from '@/components/ButtonSet' import Chip from '@/components/Chip' import FormGroup from '@/components/form/FormGroup' import FormInput from '@/components/form/FormInput' import HideShowButton from '@/components/button/HideShowButton' import { Link } from 'react-router-dom' import Main from '@/components/Main' import Notice from '@/components/Notice' import Row from '@/components/Row' import api from '@/api' import { useForm } from 'react-hook-form' import { useSession } from '@/hooks' import { Navigate, useSearchParams } from 'react-router-dom' import { useConnection, useDocument } from '@/hooks' import { useEffect, useState } from 'react' interface AccountCreateFormData { email: string password: string } function useAccountCreateForm() { const form = useForm({ mode: 'onBlur' }) const inputs = { email: form.register('email', { validate: value => { if (!value) return 'Required' return validate.email(value) }}), password: form.register('password', { validate: value => { if (!value) return 'Required' return validate.password(value) }}), } return { ...form, inputs } } export default function CreateAccountView() { const doc = useDocument() const form = useAccountCreateForm() const [params] = useSearchParams() const { options } = useConnection() const session = useSession() const [busy, setBusy] = useState(false) const [error, setError] = useState() const [passwordVisible, setPasswordVisible] = useState(false) const redirectTo = params.get('redirect') || '/' async function submit(data: AccountCreateFormData) { if (busy) return setError(undefined) setBusy(true) try { await api.createAccount(options, { account: { email: data.email, password: data.password, }, }) await session.login(data.email, data.password) } catch (err) { setError(err as Error) } finally { setBusy(false) } } useEffect(() => { doc.setTitle('Create Account') }, [doc]) if (session.ready && session.loggedIn) { return ( ) } return (
{form.formState.errors.email && } setPasswordVisible(!passwordVisible)} /> {form.formState.errors.password && }
Have an account already? Log in
) }