const user = JSON.parse(localStorage.getItem('currentUser'));

import React from 'react'

function Navbar() {
  const user = JSON.parse(localStorage.getItem('currentUser'));
  return (
    <div>
      <nav className="navbar navbar-expand-lg">
        <a className="navbar-brand" href="#">
          FiVe Star Hotels
        </a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav">
            {user ? (<><h1 style={{color : 'red'}}>{user.name}</h1></>) : (<>
              <li className="nav-item ">
                <a className="nav-link" href="/register">
                  Register
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="/sign-in">
                  Sign-in
                </a>
              </li>
            </>)}

          </ul>
        </div>
      </nav>
    </div>
  )
}

export default Navbar

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import Loader from '../components/Loader'
import Error from '../components/Error'



function Loginscreen() {

  const [email, setemail] = useState('')
  const [password, setpassword] = useState('')
  const [loading, setloading] = useState(false);
  const [error, seterror] = useState();


  async function Login() {
      const user = {
  
        email,
        password,

      };
      try {
        setloading(true);
        const result = await axios.post('/api/users/sign-in', user).data
        setloading(false);

        localStorage.setItem('currentUser' , JSON.stringify(result));
        window.location.href='/home'

      } catch (error) {
        console.log(error)
        setloading(false);
        seterror(true)
        
      }

    }

  return (
    <div>
      {loading && (<Loader/>)}
      <div className="row justify-content-center mt-5">
        <div className="col-md-5 mt-5">   
          {error && (<Error message='Invalid Email or Password'/>)}
          <div className='bs'>
            <h2>Sign In</h2>
            <input type="text" className="form-control" placeholder="Your Email"
            value = {email} onChange = {(e) => { setemail(e.target.value) }}/>
            <input type="password" className="form-control" placeholder="Enter your password"
            value = {password} onChange = {(e) => { setpassword(e.target.value) }}/>

            <button className='btn btn-primary mt-3' onClick={Login}>Sign In</button>
          </div>
        </div>

      </div>
    </div>
  )
}

export default Loginscreen;