text: import React, { useState } from "react";
  import axios from "axios";
  import "./LoginForm.css";
  import { API_BASE_URL, ACCESS_TOKEN_NAME } from "../../constants/apiConstants";
  import { withRouter } from "react-router-dom";
  
  function LoginForm(props) {
    const [state, setState] = useState({
      no_kp_baru: "",
      password: "",
      successMessage: null,
    });
    const handleChange = (e) => {
      const { id, value } = e.target;
      setState((prevState) => ({
        ...prevState,
        [id]: value,
      }));
    };
  
    const handleSubmitClick = (e) => {
      e.preventDefault();
      const payload = {
        no_kp_baru: state.no_kp_baru,
        password: state.password,
      };
      axios
        .post(API_BASE_URL + "/login", payload)
        .then(function (response) {
          if (response.status === 200) {
            setState((prevState) => ({
              ...prevState,
              successMessage: "Login successful. Redirecting to home page..",
            }));
          //   localStorage.setItem(ACCESS_TOKEN_NAME, response.data.token);
            localStorage.setItem(response.data.token);
            redirectToHome();
            props.showError(null);
          } else if (response.code === 204) {
            props.showError("No Kad Pengenalan and password do not match");
          } else {
            props.showError("No Kad Pengenalan does not exists");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    };
    const redirectToHome = () => {
      props.updateTitle("Home");
      props.history.push("/home");
    };
    const redirectToRegister = () => {
      props.history.push("/register");
      props.updateTitle("Register");
    };
    return (
      <div className="card col-12 col-lg-4 login-card mt-2 hv-center">
        <form>
          <div className="form-group text-left">
            <label htmlFor="">No Kad Pengenalan</label>
            <input
              type="no_kp_baru"
              className="form-control"
              id="no_kp_baru"
              aria-describedby="emailHelp"
              placeholder="Enter No Kad Pengenalan"
              value={state.no_kp_baru}
              onChange={handleChange}
            />
            <small id="no_kp_baru" className="form-text text-muted">
              We'll never share your No Kad Pengenalan with anyone else.
            </small>
          </div>
          <div className="form-group text-left">
            <label htmlFor="exampleInputPassword1">Password</label>
            <input
              type="password"
              className="form-control"
              id="password"
              placeholder="Password"
              value={state.password}
              onChange={handleChange}
            />
          </div>
          <div className="form-check"></div>
          <button
            type="submit"
            className="btn btn-primary"
            onClick={handleSubmitClick}
          >
            Submit
          </button>
        </form>
        <div
          className="alert alert-success mt-2"
          style={{ display: state.successMessage ? "block" : "none" }}
          role="alert"
        >
          {state.successMessage}
        </div>
        <div className="registerMessage">
          <span>Dont have an account? </span>
          <span className="loginText" onClick={() => redirectToRegister()}>
            Register
          </span>
        </div>
      </div>
    );
  }
  
  export default withRouter(LoginForm);
  