Untitled

import React, { useState } 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 {
      const response = await axios.post('http://localhost:8090/VaildateUser', {
        userName,
        password,
      });

      console.log(response.data);

      if (response.data === 'Admin Login Successfully') {
        setLoggedIn(true);
        sessionStorage.setItem('loggedIn', loggedIn);
        navigate('/NavBar');
      } else if (response.data === 'User Login Successfully') {
        setLoggedIn(true);
        sessionStorage.setItem('loggedIn', loggedIn);
        navigate('/Shop');
      }

      sessionStorage.setItem('log', 1);
    } catch (error) {
      console.error('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;