Scribd
Upload
19 views2 pages

Code

The document defines a registration form using React and Yup for validation. It includes fields for name, email, and password, with appropriate validation messages and error handling. Upon successful registration, it stores the authentication token and user information in local storage and navigates to the dashboard.

Uploaded by

emefenam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views2 pages

Code

The document defines a registration form using React and Yup for validation. It includes fields for name, email, and password, with appropriate validation messages and error handling. Upon successful registration, it stores the authentication token and user information in local storage and navigates to the dashboard.

Uploaded by

emefenam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

const RegistrationSchema = [Link]().

shape({
name: [Link]().required('Name is required'),
email: [Link]().email('Invalid email').required('Email is required'),
password: [Link]().required('Password is required').min(6, 'Password must
be at least 6 characters'),
});

const RegistrationForm = () => {


const navigate = useNavigate();
const initialValues = {
name: '',
email: '',
password:''
};
const handleSubmit = async (values, { setSubmitting }) => {
try {
const response = await [Link]('/api/auth/register', values);
setSubmitting(false);
[Link]('authToken', [Link]);
[Link]('user', [Link]([Link]));
navigate('/dashboard');
[Link]('Registration successfully')
} catch (e) {
setSubmitting(false)
[Link]([Link]?.data?.message || 'Registration failed')
}
}
return (
<Box sx={{ maxWidth: 400, margin: '0 auto', paddingTop: 3 }}>
<Formik
initialValues={initialValues}
validationSchema={RegistrationSchema}
onSubmit={handleSubmit}
>
{({ isSubmitting, values, handleChange, touched, errors }) => (
<Form>
<Box mb={2}>
<TextField
label="Name"
fullWidth
type="text"
name="name"
value={[Link]}
onChange={handleChange}
error={[Link] && !![Link]}
helperText={[Link] && [Link]}
/>
</Box>
<Box mb={2}>
<TextField
label="Email"
fullWidth
type="email"
name="email"
value={[Link]}
onChange={handleChange}
error={[Link] && !![Link]}
helperText={[Link] && [Link]}
/>
</Box>
<Box mb={2}>
<TextField
label="Password"
fullWidth
type="password"
name="password"
value={[Link]}
onChange={handleChange}
error={[Link] && !![Link]}
helperText={[Link] && [Link]}
/>
</Box>

<Button type="submit"
variant="contained"
color="primary"
disabled={isSubmitting}
>
{isSubmitting ? 'Registering...' : 'Register'}
</Button>
</Form>
)}
</Formik>
</Box>
);
}

export default RegistrationForm;


```

You might also like