Login.jsx

import React, { useState } from "react";
import { useFormik } from "formik";
import { useNavigate } from "react-router-dom";
import Button from '@mui/material/Button';
import './Login.css';

const pre_username = "DebashisSahoo@gmail.com";
const pre_password = "Ds@123456";

localStorage.setItem("name", pre_username);
localStorage.setItem("password", pre_password);

const Login = () => {
  const navi = useNavigate();
  const [errorMessage, setErrorMessage] = useState("");

  const formik = useFormik({
    initialValues: {
      'name': "",
      'password': ""
    },
    onSubmit: values => {
      if (values.name === localStorage.getItem("name") && values.password === localStorage.getItem("password")) {
        
        navi('/Dashboard');
      } else if (values.name === "" || values.password === "") {
        setErrorMessage("Please enter both Username and Password.");
      } else {
        setErrorMessage("Invalid login credentials.");
      }
    }
  });

  return (
    <>
    <body className="login-body">
    <h1 className="login-title">WEATHER APP</h1><br /><br />
   
   <div className="login-container">
  
     
     
     
     <form className="login-form" onSubmit={formik.handleSubmit}>
       <label className="login-label" htmlFor="name">User_Name: 
         <input
           className="login-input"
           type="text"
           name="name"
           id="name"
           onChange={formik.handleChange}
           onBlur={formik.onBlur}
           value={formik.values.name}
           required
         />
       </label>
       <br /><br />
       <label className="login-label" htmlFor="password">Password: 
         <input
           className="login-input"
           type="password"
           name="password"
           id="password"
           onChange={formik.handleChange}
           onBlur={formik.onBlur}
           value={formik.values.password}
           required
         />
       </label>
       <br /><br /><br />
       {errorMessage && <p className="login-error">{errorMessage}</p>}
       <Button className="login-button" type="submit" variant="contained" onClick={formik.handleSubmit}>Login</Button>
     </form>
   </div>
    </body>
    

    </>
    
  );
}

export default Login;
Editor is loading...