128 lines
3.7 KiB
TypeScript
128 lines
3.7 KiB
TypeScript
import { gql } from '@apollo/client';
|
|
import { Heading, Input, Stack, Text } from '@chakra-ui/react';
|
|
import { Button } from '@client/components/ui/button';
|
|
import { Field } from '@client/components/ui/field';
|
|
import { PasswordInput } from '@client/components/ui/password-input';
|
|
import { AuthSignUpMutation } from '@generated/types';
|
|
import { valibotResolver } from '@hookform/resolvers/valibot';
|
|
import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
|
|
import { useForm } from 'react-hook-form';
|
|
import * as v from 'valibot';
|
|
import { Link } from '../components/ui/link';
|
|
import { useToastMutation } from '../hooks/useToastMutation';
|
|
|
|
export const Route = createFileRoute('/register')({
|
|
component: RegisterComponent,
|
|
beforeLoad: ({ context }) => {
|
|
if (context.isAuthenticated) throw redirect({ to: '/' });
|
|
}
|
|
});
|
|
|
|
function RegisterComponent() {
|
|
return (
|
|
<Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
|
|
<Heading>Sign up</Heading>
|
|
<SignUpForm />
|
|
<Text>
|
|
Already have an account?{' '}
|
|
<Link to="/login" textDecoration="none">
|
|
Sign in
|
|
</Link>
|
|
</Text>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
interface FormValues {
|
|
email: string;
|
|
username: string;
|
|
password: string;
|
|
confirm_password: string;
|
|
}
|
|
|
|
function SignUpForm() {
|
|
const navigate = useNavigate();
|
|
const { update: signUp } = useToastMutation<AuthSignUpMutation>({
|
|
mutation,
|
|
successMsg: 'Account created successfully'
|
|
});
|
|
|
|
const schema = v.pipe(
|
|
v.object({
|
|
email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
|
|
username: v.pipe(v.string(), v.nonEmpty('Username is required')),
|
|
password: v.pipe(
|
|
v.string(),
|
|
v.minLength(8, 'Your password is too short.'),
|
|
v.maxLength(45, 'Your password is too long.'),
|
|
v.regex(/[a-z]/, 'Your password must contain a lowercase letter.'),
|
|
v.regex(/[A-Z]/, 'Your password must contain a uppercase letter.'),
|
|
v.regex(/[0-9]/, 'Your password must contain a number.')
|
|
),
|
|
confirm_password: v.pipe(v.string(), v.nonEmpty('Confirm your password'))
|
|
}),
|
|
v.forward(
|
|
v.check(input => input.password === input.confirm_password, 'Passwords do not match'),
|
|
['confirm_password']
|
|
)
|
|
);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors }
|
|
} = useForm<FormValues>({ resolver: valibotResolver(schema) });
|
|
|
|
const onSubmit = handleSubmit(async values => {
|
|
await signUp({
|
|
variables: {
|
|
input: {
|
|
email: values.email,
|
|
username: values.username,
|
|
password: values.password
|
|
}
|
|
}
|
|
});
|
|
navigate({
|
|
to: '/login'
|
|
});
|
|
});
|
|
|
|
return (
|
|
<form onSubmit={onSubmit}>
|
|
<Stack>
|
|
<Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
|
|
<Input {...register('email')} />
|
|
</Field>
|
|
<Field
|
|
label="Username"
|
|
invalid={errors.username != null}
|
|
errorText={errors.username?.message}
|
|
>
|
|
<Input {...register('username')} />
|
|
</Field>
|
|
<Field
|
|
label="Password"
|
|
invalid={errors.password != null}
|
|
errorText={errors.password?.message}
|
|
>
|
|
<PasswordInput {...register('password')} />
|
|
</Field>
|
|
<Field
|
|
label="Confirm password"
|
|
invalid={errors.confirm_password != null}
|
|
errorText={errors.confirm_password?.message}
|
|
>
|
|
<PasswordInput {...register('confirm_password')} />
|
|
</Field>
|
|
<Button type="submit">Submit</Button>
|
|
</Stack>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
const mutation = gql`
|
|
mutation AuthSignUp($input: SignUpInput!) {
|
|
signUp(input: $input)
|
|
}
|
|
`;
|