Game-Jaming/Frontend/Javascript/LoginFunctionality.js

$(document).ready(function () {
  // Register Start
  axios.defaults.baseURL = "http://localhost/Game-Jaming";

  let selectedGameJam;
  let isAdminLoggedIn = false;
  let displayValue = 0;
  let arr = [{ id: "-1", Gamejam: "Vælg aktivt GameJam" }];

  if (getCookie("userName") != null) {
    isAdminLoggedIn = true;
    SwitchNavInfo(true, true);
  } else if (getCookie("groupName") != null) {
    isAdminLoggedIn = false;
    SwitchNavInfo(true);
  }

  // Populate select with options from the database
  axios
    .get("/Backend/Controllers/GameJam/GetGameJam.php")
    .then(function (res) {
      let resArr = res.data.data;

      for (let i = 0; i < res.data.data.length; i++) {
        arr.push({
          id: resArr[i].id,
          Gamejam: resArr[i].name,
        });
      }

      $.each(arr, function (i, data) {
        if (i === 0) {
          $("#GameJamSelect").append(
            '<option disabled selected value="' +
              data.id +
              '">' +
              data.Gamejam +
              "</option>"
          );
        } else {
          $("#GameJamSelect").append(
            '<option value="' + data.id + '">' + data.Gamejam + "</option>"
          );
        }
      });
    })
    .catch(function (error) {
      console.log(error.response);
    });

  // Remove invalidInput if selected option has been changed
  $("#GameJamSelect").change(function () {
    selectedGameJam = $("#GameJamSelect").children("option:selected").val();

    if (selectedGameJam >= 1) {
      $("#GameJamSelect").removeClass("invalidInput");
    }
  });

  // Remove invalidInput if change in group name has been detected
  $("#username").on("input", function () {
    if ($(this).hasClass("invalidInput")) {
      $(this).removeClass("invalidInput");
    }
  });

  GetGroupNames().then(function (res) {
    let resArr = res.data;
    let groupNameTaken = false;

    $("#RegisterBtn").click(function () {
      let groupName = $("#username").val();

      for (let i = 0; i < resArr.length; i++) {
        if (resArr[i].group_name.toUpperCase() === groupName.toUpperCase()) {
          groupNameTaken = true;
          break;
        } else {
          groupNameTaken = false;
        }
      }
    });

    // Check data before submitting
    $("#RegisterForm").submit(function (e) {
      if (!selectedGameJam >= 1) {
        $("#GameJamSelect").addClass("invalidInput");
        e.preventDefault();
        return false;
      } else {
        $("#gameJamId").val($("#GameJamSelect option:selected").val());
      }

      if ($("#pass1").val().length === 0) {
        $("#pass1").addClass("invalidInput");
        e.preventDefault();
        return;
      }

      if ($("#pass2").val().length === 0) {
        $("#pass2").addClass("invalidInput");
        e.preventDefault();
        return;
      }

      if ($("#username").val().length === 0) {
        $("#username").addClass("invalidInput");
        e.preventDefault();
        return;
      }

      if ($("#pass1").hasClass("invalidInput")) {
        e.preventDefault();
        return;
      }

      if ($("#pass2").hasClass("invalidInput")) {
        e.preventDefault();
        return;
      }

      if (!$.isNumeric($("#NUDDisplay").text())) {
        $("#NUDDisplay").text("Ugyldigt antal!");
        $("#NUDDisplay").css({ color: "red" });
        e.preventDefault();
      } else {
        $("#groupAmount").val($("#NUDDisplay").text());
      }

      if (groupNameTaken) {
        $("#username").addClass("invalidInput");
        e.preventDefault();
        return;
      }

      let URL = "/Backend/Controllers/Group/SigningUp.php";

      let form = $("#RegisterForm")[0];
      let formData = new FormData(form);

      let id = $("#RegisterBtn").attr("name");
      let value = $("#RegisterBtn").val();

      formData.append(id, value);

      axios
        .post(URL, formData, {
          header: "multipart/form-data",
        })
        .then((res) => {
          if (res.status === 201) {
            SwitchNavInfo(true);
          }
        })
        .catch((error) => {
          console.log(error.response);
        });

      e.preventDefault();
    });
  });

  $("#NUDPlus").click(function () {
    if ($("#NUDDisplay").css("color") === "rgb(255, 0, 0)") {
      $("#NUDDisplay").css({ color: "rgba(255, 255, 255, .55)" });
    }

    displayValue++;

    $("#NUDDisplay").text(displayValue);
  });

  $("#NUDMinus").click(function () {
    if (displayValue <= 0) {
      return;
    } else if (displayValue <= 1) {
      $("#NUDDisplay").text(1);
    } else {
      displayValue--;
      $("#NUDDisplay").text(displayValue);
    }
  });

  async function GetGroupNames() {
    const res = await axios.get("/Backend/Controllers/Group/GetGroup.php");

    return res.data;
  }

  // Register end

  // Login start
  $("#LoginForm").submit(function (e) {
    let URL = "/Backend/Controllers/Group/Login.php";

    let form = $("#LoginForm")[0];
    let formData = new FormData(form);

    let id = $("#LoginBtn").attr("name");
    let value = $("#LoginBtn").val();

    formData.append(id, value);

    axios
      .post(URL, formData, {
        header: "multipart/form-data",
      })
      .then((res) => {
        if (res.status === 200) {
          isAdminLoggedIn = false;
          SwitchNavInfo(true);
        }
      })
      .catch((error) => {
        if (error.response.status === 401) {
          $("#loginUsername").css({ "border-color": "red" });
          $("#loginPassword").css({ "border-color": "red" });
          $("#ErrorText").css({ display: "block" });
        } else {
          console.log(error.response);
        }
      });

    e.preventDefault();
  });

  $("#AdminLoginForm").submit(function (e) {
    let URL = "/Backend/Controllers/Admin/AdminLogin.php";

    let form = $("#AdminLoginForm")[0];
    let formData = new FormData(form);

    let id = $("#AdminLoginBtn").attr("name");
    let value = $("#AdminLoginBtn").val();

    formData.append(id, value);

    axios
      .post(URL, formData, {
        header: "multipart/form-data",
      })
      .then((res) => {
        if (res.status === 200) {
          isAdminLoggedIn = true;
          SwitchNavInfo(true, true);
        }
      })
      .catch((error) => {
        if (error.response.status === 401) {
          $("#adminUsername").css({ "border-color": "red" });
          $("#adminPassword").css({ "border-color": "red" });
          $("#AdminErrorText").css({ display: "block" });
        } else {
          console.log(error.response);
        }
      });

    e.preventDefault();
  });

  function SwitchNavInfo(isLoggedIn, isAdmin) {
    if (isLoggedIn) {
      $("#NavUser").css({ display: "block" });
      $("#NavUser").text(
        `Welcome, ${isAdmin ? getCookie("userName") : getCookie("groupName")}!`
      );

      $("#NavLogin").css({ display: "none" });
      $("#NavLogout").css({ display: "block" });

      $("#LoginModal").modal("hide");
    } else {
      $("#NavUser").css({ display: "none" });
      $("#NavUser").text(``);

      $("#NavLogin").css({ display: "block" });
      $("#NavLogout").css({ display: "none" });
    }

    if (isAdmin === undefined) {
      return;
    } else {
      if (isAdmin) {
        if (isLoggedIn) {
          $("#AdminPanel").css({ display: "block" });

          console.log("Logged In As Admin!");
        } else {
          $("#AdminPanel").css({ display: "none" });

          console.log("Logged Out As Admin!");
        }
      }
    }
  }
  // Login end

  // Logout start
  $("#NavLogout").click(function () {
    axios
      .get("/Backend/Controllers/Group/Logout.php")
      .then((res) => {
        if (res.status == 200) {
          SwitchNavInfo(false, isAdminLoggedIn);
          isAdminLoggedIn = false;
        }
      })
      .catch((error) => {
        console.log(error.response);
      });
  });
  // Logout end

  function getCookie(name) {
    // Split cookie string and get all individual name=value pairs in an array
    var cookieArr = document.cookie.split(";");

    // Loop through the array elements
    for (var i = 0; i < cookieArr.length; i++) {
      var cookiePair = cookieArr[i].split("=");

      /* Removing whitespace at the beginning of the cookie name
            and compare it with the given string */
      if (name == cookiePair[0].trim()) {
        // Decode the cookie value and return
        return decodeURIComponent(cookiePair[1]);
      }
    }

    // Return null if not found
    return null;
  }
});