Untitled

import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { login_check } from '../API_FILE/apis';
import { Button } from '@mui/material';

const Login = () => {
  const navigate = useNavigate();
  const [mode, setMode] = useState('login');

  const notifyError = (message) => toast.error(message);
  const notifySuccess = (message) => toast.success(message);

  const toggleMode = () => {
    const newMode = mode === 'login' ? 'signup' : 'login';
    setMode(newMode);
  };

  const handleLogin = async (values) => {
    try {
      const response = await axios.get(login_check(values.email, values.password));
      const email = values.email;
      const password = values.password;

      if (response.data === true) {
        sessionStorage.setItem('email', email);
        sessionStorage.setItem('password', password);
        const storedEmail = sessionStorage.getItem('email');
        notifySuccess("Logged in successfully.");
        setTimeout(() => navigate(`/${storedEmail}`), 1000);
      } else {
        notifyError('Invalid email or password. Please try again.');
      }
    } catch (error) {
      console.error('Error logging in:', error);
      notifyError('An error occurred while logging in. Please try again later.');
    }
  };

  return (
    <div className="login-container">
      <div className="login-body">
        <ToastContainer />
        <div className="login-card">
          <div className="form-block-wrapper form-block-wrapper--is-login"></div>
          <section className={`form-block form-block--is-${mode}`}>
            <header className="form-block__header">
              <h1>{mode === 'login' ? 'Welcome back!' : 'Sign up'}</h1>
              <div className="form-block__toggle-block">
                <span>{mode === 'login' ? "Don't" : 'Already'} have an account? Click here &#8594;</span>
                <input id="form-toggler" type="checkbox" onClick={toggleMode} />
                <label htmlFor="form-toggler"></label>
              </div>
            </header>
            <Formik
              initialValues={{ email: '', password: '' }}
              onSubmit={(values) => handleLogin(values)}
            >
              <Form>
                <div className="form-block__input-wrapper">
                  <div className="form-group form-group--login">
                    <Field type="text" id="username" name="email" placeholder="Email" />
                    <Field type="password" id="password" name="password" placeholder="Password" />
                  </div>
                </div>
                <Button variant='contained' type="submit" className='login-button1'>{mode === 'login' ? 'Log In' : 'Sign Up'}</Button>
              </Form>
            </Formik>
          </section>
        </div>
      </div>
    </div>
  );
};

export default Login;