Scribd
Upload
2 views2 pages

React Login Form with Validation

The document is a React component for a login form that utilizes Formik for form handling and Yup for validation. It includes fields for email and password, and upon submission, it sends a POST request to an authentication API, storing the received token and user data in local storage. The component also provides feedback to the user through toast notifications for successful or failed login attempts.

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
2 views2 pages

React Login Form with Validation

The document is a React component for a login form that utilizes Formik for form handling and Yup for validation. It includes fields for email and password, and upon submission, it sends a POST request to an authentication API, storing the received token and user data in local storage. The component also provides feedback to the user through toast notifications for successful or failed login attempts.

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

import React, { useState } from 'react';

import axios from 'axios';


import { useNavigate } from 'react-router-dom';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import { Button, TextField, Box, Typography } from '@mui/material';
import { toast } from 'react-toastify';

const LoginSchema = [Link]().shape({


email: [Link]().email('Invalid email').required('Email is required'),
password: [Link]().required('Password is required')
});

const LoginForm = () => {


const navigate = useNavigate();
const initialValues = {
email: '',
password:''
};
const handleSubmit = async (values, {setSubmitting}) => {
try {
const response = await [Link]('/api/auth/login',values);
setSubmitting(false)
[Link]('authToken', [Link]);
[Link]('user', [Link]([Link]));
navigate('/dashboard')
[Link]('Login successfully')
} catch (e) {
setSubmitting(false);
[Link]([Link]?.data?.message || 'Login failed')
}
}

return (
<Box sx={{ maxWidth: 400, margin: '0 auto', paddingTop: 3 }}>
<Formik
initialValues={initialValues}
validationSchema={LoginSchema}
onSubmit={handleSubmit}
>
{({ isSubmitting, values, handleChange, touched, errors }) => (
<Form>
<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 ? 'Logging in...' : 'Login'}
</Button>
</Form>
)}
</Formik>
</Box>
);

You might also like