text: import React, { useState, useContext } from "react";
  import axios from "axios";
  import { useHistory } from "react-router-dom";
  import { AuthContext, useAuth } from "../Auth/AuthContext";
  import "./Login.css";
  
  function Login() {
    const [username, setUsename] = useState("");
    const [password, setPassword] = useState("");
    // const { setAuthState } = useContext(AuthContext);
    const { authTokens, setAuthTokens } = useContext(AuthContext)
  
    let history = useHistory();
  
    const login = () => {
      const data = { username: username, password: password };
      axios
        .post("http://localhost:5000/admin/login", data)
        .then((response) => {
          if (response.data.error) {
            alert(response.data.error);
          } else {
            localStorage.setItem("auth-token", response.data.token);
            setAuthTokens({
              username: response.data.username,
              // id: response.data.id,
              status: true,
            });
            history.push("/");
          }
        });
    };
    return (
      <div class="bg-img">
        <div class="content">
          <header>Login</header>
          <form action="#">
            <div class="field">
              <span class="fa fa-user"></span>
              <input
                type="text"
                onChange={(event) => {
                  setUsename(event.target.value);
                }}
                required
                placeholder="UserName"
              />
            </div>
            <div class="field space">
              <span class="fa fa-lock"></span>
              <input
                type="password"
                class="pass-key"
                required
                onChange={(event) => {
                  setPassword(event.target.value);
                }}
                placeholder="Password"
              />
              <span class="show">SHOW</span>
            </div>
            <div class="pass">
              <a href="#">Forgot Password?</a>
            </div>
            <div class="field">
              <input onClick={login} type="submit" value="LOGIN" />
            </div>
          </form>
          <div class="login">Or login with</div>
          <div class="links">
            <div class="facebook">
              <i class="fab fa-facebook-f">
                <span>Facebook</span>
              </i>
            </div>
            <div class="google">
              <i class="fab fa-instagram">
                <span>Google</span>
              </i>
            </div>
          </div>
          <div class="signup">
            Don't have account?
            <a href="#">Signup Now</a>
          </div>
        </div>
      </div>
    );
  }
  
  export default Login;
  