``refactor Implement custom sign-up form component with Zod validation, OAuth integration, and i18n support following REQ0016 requirements``
This commit is contained in:
254
002_source/cms/src/components/auth/custom/sign-up-form/index.tsx
Normal file
254
002_source/cms/src/components/auth/custom/sign-up-form/index.tsx
Normal file
@@ -0,0 +1,254 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
// RULES:
|
||||||
|
// refer to ticket REQ0016 for login flow
|
||||||
|
import * as React from 'react';
|
||||||
|
import RouterLink from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { LoadingButton } from '@mui/lab';
|
||||||
|
import Alert from '@mui/material/Alert';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import Checkbox from '@mui/material/Checkbox';
|
||||||
|
import Divider from '@mui/material/Divider';
|
||||||
|
import FormControl from '@mui/material/FormControl';
|
||||||
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||||
|
import FormHelperText from '@mui/material/FormHelperText';
|
||||||
|
import InputLabel from '@mui/material/InputLabel';
|
||||||
|
import Link from '@mui/material/Link';
|
||||||
|
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||||
|
import Stack from '@mui/material/Stack';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import { Controller, useForm } from 'react-hook-form';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { z as zod } from 'zod';
|
||||||
|
|
||||||
|
import { paths } from '@/paths';
|
||||||
|
import { authClient } from '@/lib/auth/custom/client';
|
||||||
|
import { useUser } from '@/hooks/use-user';
|
||||||
|
import { DynamicLogo } from '@/components/core/logo';
|
||||||
|
import { toast } from '@/components/core/toaster';
|
||||||
|
|
||||||
|
import type { OAuthProvider } from '../OAuthProvider';
|
||||||
|
import { oAuthProviders } from '../oAuthProviders';
|
||||||
|
|
||||||
|
export function SignUpForm(): React.JSX.Element {
|
||||||
|
const router = useRouter();
|
||||||
|
const { t } = useTranslation(['sign_in']);
|
||||||
|
|
||||||
|
const { checkSession } = useUser();
|
||||||
|
|
||||||
|
const [isPending, setIsPending] = React.useState<boolean>(false);
|
||||||
|
|
||||||
|
const schema = zod.object({
|
||||||
|
firstName: zod.string().min(1, { message: t('first-name-is-required') }),
|
||||||
|
lastName: zod.string().min(1, { message: t('last-name-is-required') }),
|
||||||
|
email: zod
|
||||||
|
.string()
|
||||||
|
.min(1, { message: t('email-is-required') })
|
||||||
|
.email(),
|
||||||
|
password: zod.string().min(6, { message: t('password-should-be-at-least-6-characters') }),
|
||||||
|
terms: zod.boolean().refine((value) => value, t('you-must-accept-the-terms-and-conditions')),
|
||||||
|
});
|
||||||
|
type Values = zod.infer<typeof schema>;
|
||||||
|
const defaultValues = { firstName: '', lastName: '', email: '', password: '', terms: false } satisfies Values;
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
handleSubmit,
|
||||||
|
setError,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
|
||||||
|
|
||||||
|
const onAuth = React.useCallback(async (providerId: OAuthProvider['id']): Promise<void> => {
|
||||||
|
setIsPending(true);
|
||||||
|
|
||||||
|
const { error } = await authClient.signInWithOAuth({ provider: providerId });
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
setIsPending(false);
|
||||||
|
toast.error(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsPending(false);
|
||||||
|
|
||||||
|
// Redirect to OAuth provider
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onSubmit = React.useCallback(
|
||||||
|
async (values: Values): Promise<void> => {
|
||||||
|
setIsPending(true);
|
||||||
|
|
||||||
|
const { error } = await authClient.signUp(values);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
setError('root', { type: 'server', message: error });
|
||||||
|
setIsPending(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Refresh the auth state
|
||||||
|
await checkSession?.();
|
||||||
|
|
||||||
|
// UserProvider, for this case, will not refresh the router
|
||||||
|
// After refresh, GuestGuard will handle the redirect
|
||||||
|
|
||||||
|
// TODO: resume me
|
||||||
|
// router.refresh();
|
||||||
|
},
|
||||||
|
[checkSession, router, setError]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack spacing={4}>
|
||||||
|
<div>
|
||||||
|
<Box
|
||||||
|
component={RouterLink}
|
||||||
|
href={paths.home}
|
||||||
|
sx={{ display: 'inline-block', fontSize: 0 }}
|
||||||
|
>
|
||||||
|
<DynamicLogo
|
||||||
|
colorDark="light"
|
||||||
|
colorLight="dark"
|
||||||
|
height={32}
|
||||||
|
width={122}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
<Stack spacing={1}>
|
||||||
|
<Typography variant="h5">{t('sign-up')}</Typography>
|
||||||
|
<Typography
|
||||||
|
color="text.secondary"
|
||||||
|
variant="body2"
|
||||||
|
>
|
||||||
|
{t('already-have-an-account')}{' '}
|
||||||
|
<Link
|
||||||
|
component={RouterLink}
|
||||||
|
href={paths.auth.custom.signIn}
|
||||||
|
variant="subtitle2"
|
||||||
|
>
|
||||||
|
{t('sign-in')}
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
<Stack spacing={3}>
|
||||||
|
<Stack spacing={2}>
|
||||||
|
{oAuthProviders.map(
|
||||||
|
(provider): React.JSX.Element => (
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
disabled={isPending}
|
||||||
|
startIcon={
|
||||||
|
<Box
|
||||||
|
alt=""
|
||||||
|
component="img"
|
||||||
|
height={24}
|
||||||
|
src={provider.logo}
|
||||||
|
width={24}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
key={provider.id}
|
||||||
|
onClick={(): void => {
|
||||||
|
onAuth(provider.id).catch(() => {
|
||||||
|
// noop
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
|
{t('continue-with_fh')} {provider.name} {t('continue-with_sh')}
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Stack>
|
||||||
|
<Divider>{t('or')}</Divider>
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<Stack spacing={2}>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="firstName"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormControl error={Boolean(errors.firstName)}>
|
||||||
|
<InputLabel>{t('first-name')}:</InputLabel>
|
||||||
|
<OutlinedInput {...field} />
|
||||||
|
{errors.firstName ? <FormHelperText>{errors.firstName.message}</FormHelperText> : null}
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="lastName"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormControl error={Boolean(errors.lastName)}>
|
||||||
|
<InputLabel>{t('last-name')}:</InputLabel>
|
||||||
|
<OutlinedInput {...field} />
|
||||||
|
{errors.lastName ? <FormHelperText>{errors.lastName.message}</FormHelperText> : null}
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormControl error={Boolean(errors.email)}>
|
||||||
|
<InputLabel>{t('email-address')}:</InputLabel>
|
||||||
|
<OutlinedInput
|
||||||
|
{...field}
|
||||||
|
placeholder={t('e.g.') + ' name@example.com'}
|
||||||
|
type="email"
|
||||||
|
disabled={isPending}
|
||||||
|
/>
|
||||||
|
{errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormControl error={Boolean(errors.password)}>
|
||||||
|
<InputLabel>{t('password')}:</InputLabel>
|
||||||
|
<OutlinedInput
|
||||||
|
{...field}
|
||||||
|
placeholder={t('password')}
|
||||||
|
type="password"
|
||||||
|
/>
|
||||||
|
{errors.password ? <FormHelperText>{errors.password.message}</FormHelperText> : null}
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="terms"
|
||||||
|
render={({ field }) => (
|
||||||
|
<div>
|
||||||
|
<FormControlLabel
|
||||||
|
control={<Checkbox {...field} />}
|
||||||
|
label={
|
||||||
|
<React.Fragment>
|
||||||
|
{t('i-have-read-the')} <Link>{t('terms-and-conditions')}</Link>
|
||||||
|
</React.Fragment>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{errors.terms ? <FormHelperText error>{errors.terms.message}</FormHelperText> : null}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{errors.root ? <Alert color="error">{errors.root.message}</Alert> : null}
|
||||||
|
|
||||||
|
<LoadingButton
|
||||||
|
loading={isPending}
|
||||||
|
disabled={isPending}
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
>
|
||||||
|
{t('create-account')}
|
||||||
|
</LoadingButton>
|
||||||
|
</Stack>
|
||||||
|
</form>
|
||||||
|
</Stack>
|
||||||
|
<Alert color="warning">{t('created-users-are-not-persisted')}</Alert>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user