import React,{useState} from 'react'
import {useNavigate} from 'react-router-dom'
function Loginpage() {
      let [user,setvalue]= useState({
        username:"",
        password:"",
        error:""
    });
    let navigate=useNavigate();
   const login=()=>{
    if(user.username==='admin'&&user.password==='admin123'){
        navigate("/admin");
        setvalue({...user,error:""});
    }
    else{
        setvalue({...user,error:"Invalid User Id and Password"});
    }
     }
return (
  
    <div className="container w-25 p-4 border border-2 border-black rounded mt-5 bg-light">
        <center><h2 className='text-primary'>Login</h2></center>
        <div className="form">
                <div className='mt-3'>
                    <label htmlFor="" className="label-control">Enter User Name</label>
                    <input type="text" className="form-control mt-2 border" placeholder='Username' value={user.username}  onChange={(e)=>setvalue({...user,username:e.target.value})}/>
                </div>
                <div className='mt-3'>
                    <label htmlFor="" className="label-control">Enter User Password</label>
                    <input type="password" className="form-control mt-2 border" placeholder='Password'  value={user.password} onChange={(e)=>setvalue({...user,password:e.target.value})}/>
                </div>
                <div className='mt-3'>
                    <button className='btn btn-primary form-control' onClick={()=>login()}>Login</button>
                </div>
                <div className="error mt-3 text-danger" >{user.error}</div>
            </div>
    </div>
)
}

export default Loginpage;