Scribd
Upload
1 views

code (10)

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

code (10)

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

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 = Yup.object().shape({


email: Yup.string().email('Invalid email').required('Email is required'),
password: Yup.string().required('Password is required')
});

const LoginForm = () => {


const navigate = useNavigate();
const initialValues = {
email: '',
password:''
};
const handleSubmit = async (values, {setSubmitting}) => {
try {
const response = await axios.post('/api/auth/login',values);
setSubmitting(false)
localStorage.setItem('authToken', response.data.token);
localStorage.setItem('user', JSON.stringify(response.data.user));
navigate('/dashboard')
toast.success('Login successfully')
} catch (e) {
setSubmitting(false);
toast.error(e.response?.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={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 ? 'Logging in...' : 'Login'}
</Button>
</Form>
)}
</Formik>
</Box>
);

You might also like