Untitled

import React, { useState ,useEffect } from 'react';
import axios from 'axios';
import './Login.css';
import {useNavigate} from 'react-router-dom';
 


const Login = ({ onLogin }) => {
  const [userName, setuserName] = useState('');
  const [password, setPassword] = useState('');
  const [loggedIn, setLoggedIn] = useState(false);
  const navigate=useNavigate()
 
  const handleLogin = async () => {
    try {
 await axios.post(`http://localhost:8090/VaildateUser`, {
        userName,
        password,
      })
      .then((res)=>{
        {console.log(res.data)}
        if(res.data=="<200 OK OK,Admin Login Successfully,[]>" )
        {
          setLoggedIn(true)
          sessionStorage.setItem('loggedIn', loggedIn);
            navigate('/NavBar')
        }
        else if(res.data=="<200 OK OK,User Login Successfully,[]>")
      {
        setLoggedIn(true)
        sessionStorage.setItem('loggedIn', loggedIn);
        navigate('/Shop')
 
      }
          })
      sessionStorage.setItem('log',1)
     
     
    } catch (error) {
     throw('Error during authentication', error);
    }
  };
 
  return (
    <div>
      <h1 style={{ display:'flex ', flexDirection:'column',alignItems:'center',justifyContent:'center',height:'50vh'}}> Welcome to the Store  </h1>
     
    <div className="login-container">
      <input
        type="text"
        placeholder="userName"
        value={userName}
        onChange={(e) => setuserName(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>Login</button>
    </div>
    </div>
   
  );
  };
 
export default Login;