web/js/user.js

const login = document.querySelector("#login");
const logout = document.querySelector("#logout");
const signup = document.querySelector("#signup");

if (logout) {
  logout.addEventListener("click", () => {
    fetch("director.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: "ajaxId=logout",
    }).then(() => {
      if ("startViewTransition" in document) {
        document.startViewTransition(() => {
          window.location.href = "spaces.php?view=list";
        });
      } else {
        window.location.href = "spaces.php?view=list";
      }
    });
  });
}

if (login) {
  login.addEventListener("click", () => {
    console.log("click");

    fetch("director.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: "ajaxId=loginHTML",
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        openModal(data["html"]);

        const username_field = modalContent.querySelector("#username");
        const passwordField = modalContent.querySelector("#password");
        const submit_button = modalContent.querySelector(
          'input[type="submit"]',
        );

        submit_button.addEventListener("click", async (e) => {
          e.preventDefault();
          requestAuth(username_field.value, passwordField.value);
        });

        function requestAuth(username, password) {
          fetch("director.php", {
            method: "POST",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            body: "ajaxId=login&username=" + username + "&password=" + password,
          })
            .then((response) => {
              if (!response.ok) {
                console.log("Login Failed!");
              }

              return response.json();
            })
            .then((data) => {
              if ("startViewTransition" in document) {
                document.startViewTransition(() => {
                  window.location.href = data["redirect"];
                });
              } else {
                // Fallback for browsers that don't support View Transitions
                window.location.href = data["redirect"];
              }
            });
        }
      });
  });
}

if (signup) {
  signup.addEventListener("click", () => {
    fetch("director.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: "ajaxId=signupHTML",
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        openModal(data["html"]);

        const submit = modalContent.querySelector('input[type="submit"]');
        submit.disabled = true;

        const signupErrorArea = modalContent.querySelector("#signupError");

        const usernameField = modalContent.querySelector("#username");
        usernameField.addEventListener("blur", checkUsername);

        const passwordField = modalContent.querySelector("#password");
        passwordField.addEventListener("input", checkPW);

        const vPasswordField = modalContent.querySelector("#vPassword");
        vPasswordField.addEventListener("input", matchPW);

        submit.addEventListener("click", (e) => {
          e.preventDefault();

          checkUsername();
          checkPW();
          matchPW();

          if (
            usernameField.value != "" &&
            passwordField.value != "" &&
            vPasswordField.value != "" &&
            signupErrorArea.innerHTML == ""
          )
            modalContent.querySelector("form").submit();
        });

        function checkUsername() {
          const username = usernameField.value;

          fetch("director.php", {
            method: "POST",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            body: "ajaxId=usernameCheck&username=" + username,
          })
            .then((response) => {
              if (!response.ok) {
                console.log("Failed to check if username exists!");
              }

              return response.json(); // Parse response body as JSON
            })
            .then((data) => {
              if (data["exists"]) {
                console.log("user exists");
                if (!document.querySelector("#userExists")) {
                  let p = document.createElement("p");
                  p.id = "userExists";
                  p.innerText = "Username is taken.";

                  signupErrorArea.append(p);
                  submit.disabled = true;
                }
              } else {
                let p = signupErrorArea.querySelector("#userExists");
                if (p) p.remove();
                matchPW();

                if (
                  signupErrorArea.innerHTML == "" &&
                  passwordField.value != "" &&
                  vPasswordField.value != ""
                )
                  submit.disabled = false;
              }
            });
        }

        function checkPW() {
          let pw = passwordField.value;
          if (pw.length < 8) {
            if (!document.querySelector("#pwLength")) {
              let p = document.createElement("p");
              p.id = "pwLength";
              p.innerText =
                "Password length must be greater than 8 characters.";

              signupErrorArea.append(p);
            }
          } else {
            let p = signupErrorArea.querySelector("#pwLength");
            if (p) p.remove();
            matchPW();

            if (
              signupErrorArea.innerHTML == "" &&
              passwordField.value != "" &&
              vPasswordField.value != ""
            )
              submit.disabled = false;
          }

          const num_regex = /\d/;
          if (!num_regex.test(pw)) {
            if (!document.querySelector("#pwNum")) {
              let p = document.createElement("p");
              p.id = "pwNum";
              p.innerText = "Password must have at least 1 digit.";

              signupErrorArea.append(p);
              submit.disabled = true;
            }
          } else {
            let p = signupErrorArea.querySelector("#pwNum");
            if (p) p.remove();
            matchPW();

            if (
              signupErrorArea.innerHTML == "" &&
              passwordField.value != "" &&
              vPasswordField.value != ""
            )
              submit.disabled = false;
          }
        }

        function matchPW() {
          let pw = passwordField.value;
          let vPW = vPasswordField.value;

          if (pw != vPW) {
            if (!document.querySelector("#pwMatch")) {
              let p = document.createElement("p");
              p.id = "pwMatch";
              p.innerText = "Passwords must match.";

              signupErrorArea.append(p);
              submit.disabled = true;
            }
          } else {
            let p = signupErrorArea.querySelector("#pwMatch");
            if (p) p.remove();
            if (
              signupErrorArea.innerHTML == "" &&
              passwordField.value != "" &&
              vPasswordField.value != ""
            )
              submit.disabled = false;
          }
        }
      });
  });
}