Borrowing-TrackerFrontend/src/Pages/LandingPage/LandingPage.tsx

import Button from "../../Components/Button/Button";
import styles from "../../styles";
import Logo_dako from "../../assets/Logo_dako.png"
import Popup from "reactjs-popup";
import "reactjs-popup/dist/index.css";
import { useEffect, useState } from "react";
import LoginModal from "../../Components/LoginModal/LoginModal";
import RegisterModal from "../../Components/RegisterModal/RegisterModal";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { RootState } from "../../Components/Plugins/Redux/Store/Store";
import ResetPasswordModal from "../../Components/ResetPasswordModal/ResetPasswordModal";

export default function LandingPage() {
  const [loginmodalOpen, SetloginmodalOpen] = useState(false);
  const [registermodalOpen, SetRegisterModalOpen] = useState(false);
  const [resetmodalOpen, SetResetModalOpen] = useState(false);
  const authenticated = useSelector((state: RootState) => state.auth.value);
  const navigate = useNavigate();

  useEffect(() => {
    if (authenticated) {
      navigate("/dashboard");
      console.log("Already logged in. Redirecting to dashboard page");
    }
  }, [authenticated, navigate]);
  return (
    <div style={styles.background}>
      <div
        style={{
          ...styles.flex_row,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: "100%",
          width: "100%",
          minHeight: "100%",
          minWidth: "100%",
          flexWrap: "wrap",
          backgroundColor: "#F2FAF4"
        }}
      >
        <div style={{ height: "auto", flex: 1, flexWrap: "wrap" }}>
          <img style={{ width: "16rem", height: "auto" }} src={Logo_dako} />
        </div>
        <div
          style={{
            height: "auto",
            flex: 1,
            flexWrap: "wrap",
          }}
        >
          <div
            style={{
              minWidth: "80%",
              borderRadius: 4,
              borderWidth: 1,
              padding: 16,
              margin: 64,
              marginLeft: "1.2rem",
              paddingBottom: "16vh",
              paddingTop: "15vh",
              backgroundColor: "white",
              boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)",
              maxWidth: "35vw",
              
            }}
          >
            <p style={{ ...styles.text_dark, ...styles.text_L }}>
              Welcome!
            </p>

            <p style={{ ...styles.text_dark, ...styles.text_M }}>
              CSM Borrowing and Inventory
              <br />
              Monitoring and Management System
            </p>
            <div style={{ ...styles.flex_column }}>
              <Button
                type={"light"}
                label={"Login"}
                onClick={() => {
                  SetloginmodalOpen(true);
                  SetRegisterModalOpen(false);
                  SetResetModalOpen(false);
                }}
              />
              <Button
                type={"dark"}
                label={"Register"}
                onClick={() => {
                  SetRegisterModalOpen(true);
                  SetloginmodalOpen(false);
                  SetResetModalOpen(false);
                }}
              />
              <Button
                type={"light"}
                label={"Forgot Password"}
                onClick={() => {
                  SetResetModalOpen(true);
                  SetRegisterModalOpen(false);
                  SetloginmodalOpen(false);
                }}
              />
              <Popup
                open={loginmodalOpen}
                onClose={() => SetloginmodalOpen(false)}
                modal
                position={"top center"}
                contentStyle={{
                  width: "512px",
                  borderRadius: 16,
                  borderColor: "grey",
                  borderStyle: "solid",
                  borderWidth: 1,
                  padding: 16,
                  alignContent: "center",
                  justifyContent: "center",
                  textAlign: "center",
                }}
              >
                <LoginModal />
              </Popup>
              <Popup
                open={registermodalOpen}
                onClose={() => SetRegisterModalOpen(false)}
                modal
                position={"top center"}
                contentStyle={{
                  width: "512px",
                  borderRadius: 16,
                  borderColor: "grey",
                  borderStyle: "solid",
                  borderWidth: 1,
                  padding: 16,
                  alignContent: "center",
                  justifyContent: "center",
                  textAlign: "center",
                }}
              >
                <RegisterModal />
              </Popup>
              <Popup
                open={resetmodalOpen}
                onClose={() => SetResetModalOpen(false)}
                modal
                position={"top center"}
                contentStyle={{
                  width: "512px",
                  borderRadius: 16,
                  borderColor: "grey",
                  borderStyle: "solid",
                  borderWidth: 1,
                  padding: 16,
                  alignContent: "center",
                  justifyContent: "center",
                  textAlign: "center",
                }}
              >
                <ResetPasswordModal />
              </Popup>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}