Scribd
Upload
0 views

code (12)

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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0 views

code (12)

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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

const RegistrationSchema = Yup.object().

shape({
name: Yup.string().required('Name is required'),
email: Yup.string().email('Invalid email').required('Email is required'),
password: Yup.string().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 axios.post('/api/auth/register', values);
setSubmitting(false);
localStorage.setItem('authToken', response.data.token);
localStorage.setItem('user', JSON.stringify(response.data.user));
navigate('/dashboard');
toast.success('Registration successfully')
} catch (e) {
setSubmitting(false)
toast.error(e.response?.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={values.name}
onChange={handleChange}
error={touched.name && !!errors.name}
helperText={touched.name && errors.name}
/>
</Box>
<Box mb={2}>
<TextField
label="Email"
fullWidth
type="email"
name="email"
value={values.email}
onChange={handleChange}
error={touched.email && !!errors.email}
helperText={touched.email && errors.email}
/>
</Box>
<Box mb={2}>
<TextField
label="Password"
fullWidth
type="password"
name="password"
value={values.password}
onChange={handleChange}
error={touched.password && !!errors.password}
helperText={touched.password && errors.password}
/>
</Box>

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

export default RegistrationForm;


```

You might also like