marco.pms.web/src/pages/authentication/LoginPage.jsx

import { useState } from "react";
import { Link } from "react-router-dom";
import { AuthWrapper } from "./AuthWrapper";
import { useNavigate } from "react-router-dom";
import "./page-auth.css";
import AuthRepository from "../../repositories/AuthRepository";
import showToast from "../../services/toastService";

const LoginPage = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  const [formData, setFormData] = useState({
    password: "",
    username: "",
    rememberMe: false,
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;

    setFormData((prevData) => ({
      ...prevData,
      [name]: type === "checkbox" ? checked : value,
    }));
  };

  const handleSubmit = async ( e ) =>
  {
    
    e.preventDefault();
    setLoading(true);

    try {
      let data = {
        username: formData.username,
        password: formData.password,
      };

      const response = await AuthRepository.login(data);
      localStorage.setItem("jwtToken", response.data.token);
      localStorage.setItem( "refreshToken", response.data.refreshToken );
      setLoading(false);
      navigate("/dashboard");
    } catch (err) {
      console.log("Unable to proceed. Please try again.");
      setLoading(false);

      if (err.status === 401) {
        showToast(err.response.data);
      }
    }
  };
  return (
    <AuthWrapper>
      <h4 className="mb-2">Welcome to PMS!</h4>
      <p className="mb-4">
        Please sign-in to your account and start the adventure
      </p>

      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit}>
        <div className="mb-3">
          <label htmlFor="username" className="form-label">
            Email or Username
          </label>
          <input
            type="text"
            className="form-control"
            id="username"
            value={formData.name}
            onChange={handleChange}
            name="username"
            placeholder="Enter your email or username"
            autoFocus
          />
        </div>
        <div className="mb-3 form-password-toggle">
          <div className="d-flex justify-content-between">
            <label className="form-label" htmlFor="password">
              Password
            </label>
            <Link
              aria-label="Go to Forgot Password Page"
              to="/auth/forgot-password"
            >
              <small>Forgot Password?</small>
            </Link>
          </div>
          <div className="input-group input-group-merge">
            <input
              type="password"
              autoComplete="true"
              id="password"
              value={formData.password}
              onChange={handleChange}
              className="form-control"
              name="password"
              placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
              aria-describedby="password"
            />
            <span className="input-group-text cursor-pointer"></span>
          </div>
        </div>
        <div className="mb-3">
          <div className="form-check">
            <input
              className="form-check-input"
              type="checkbox"
              id="remember-me"
              name="rememberMe"
              checked={formData.rememberMe}
              onChange={handleChange}
            />
            <label className="form-check-label" htmlFor="remember-me">
              {" "}
              Remember Me{" "}
            </label>
          </div>
        </div>
        <div className="mb-3">
          <button
            aria-label="Click me"
            className="btn btn-primary d-grid w-100"
            type="submit"
          >
            {loading ? "Please Wait" : " Sign in"}
          </button>
        </div>
      </form>

      <p className="text-center">
        <span>New on our platform? </span>
        <Link
          aria-label="Go to Register Page"
          to="/auth/reqest/demo"
          className="registration-link"
        >
          <span>Request a Demo</span>
        </Link>
      </p>
    </AuthWrapper>
  );
};

export default LoginPage;