implemented spaces, fixed login and signup, thought creation and space creation.

js/user.js

@@ -0,0 +1,245 @@
+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;
+          }
+        }
+      });
+  });
+}