97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import { useForm } from 'react-hook-form';
|
|
import { EmailInboxIcon } from 'src/assets/icons';
|
|
import { Field, Form } from 'src/components/hook-form';
|
|
import { paths } from 'src/routes/paths';
|
|
import { z as zod } from 'zod';
|
|
import { FormHead } from '../../../components/form-head';
|
|
import { FormResendCode } from '../../../components/form-resend-code';
|
|
import { FormReturnLink } from '../../../components/form-return-link';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export type VerifySchemaType = zod.infer<typeof VerifySchema>;
|
|
|
|
export const VerifySchema = zod.object({
|
|
code: zod
|
|
.string()
|
|
.min(1, { message: 'Code is required!' })
|
|
.min(6, { message: 'Code must be at least 6 characters!' }),
|
|
email: zod
|
|
.string()
|
|
.min(1, { message: 'Email is required!' })
|
|
.email({ message: 'Email must be a valid email address!' }),
|
|
});
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function SplitVerifyView() {
|
|
const defaultValues: VerifySchemaType = {
|
|
code: '',
|
|
email: '',
|
|
};
|
|
|
|
const methods = useForm<VerifySchemaType>({
|
|
resolver: zodResolver(VerifySchema),
|
|
defaultValues,
|
|
});
|
|
|
|
const {
|
|
handleSubmit,
|
|
formState: { isSubmitting },
|
|
} = methods;
|
|
|
|
const onSubmit = handleSubmit(async (data) => {
|
|
try {
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
console.info('DATA', data);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
});
|
|
|
|
const renderForm = () => (
|
|
<Box sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
|
|
<Field.Text
|
|
name="email"
|
|
label="Email address"
|
|
placeholder="example@gmail.com"
|
|
slotProps={{ inputLabel: { shrink: true } }}
|
|
/>
|
|
|
|
<Field.Code name="code" />
|
|
|
|
<Button
|
|
fullWidth
|
|
size="large"
|
|
type="submit"
|
|
variant="contained"
|
|
loading={isSubmitting}
|
|
loadingIndicator="Verify..."
|
|
>
|
|
Verify
|
|
</Button>
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<FormHead
|
|
icon={<EmailInboxIcon />}
|
|
title="Please check your email!"
|
|
description={`We've emailed a 6-digit confirmation code. \nPlease enter the code in the box below to verify your email.`}
|
|
/>
|
|
|
|
<Form methods={methods} onSubmit={onSubmit}>
|
|
{renderForm()}
|
|
</Form>
|
|
|
|
<FormResendCode onResendCode={() => {}} value={0} disabled={false} />
|
|
|
|
<FormReturnLink href={paths.authDemo.split.signIn} />
|
|
</>
|
|
);
|
|
}
|