Untitled

mail@pastecode.io avatar
unknown
plain_text
2 months ago
2.3 kB
0
Indexable
Never
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")) {
        setErrorMessage("");
        navi('/Dashboard');
      } else if (values.name === "" || values.password === "") {
        setErrorMessage("Please enter both Username and Password.");
      } else {
        setErrorMessage("Invalid login credentials.");
      }
    }
  });

  return (
    <>
   
    <div className="login-container">
      
      <h1 className="login-title">WELCOME TO WEATHER APP</h1><br /><br />
      
      <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="text" onClick={formik.handleSubmit}>Login</Button>
      </form>
    </div>

    </>
    
  );
}

export default Login;
Leave a Comment