PhishGuardian/extension/popup.js

document.addEventListener("DOMContentLoaded", function () {
  const loginButton = document.getElementById("loginButton");
  const checkMailButton = document.getElementById("check-mail");
  const logoutButton = document.getElementById("logout");
  const loginSection = document.getElementById("login-section");
  const controlSection = document.getElementById("control-section");
  const emailServiceSelect = document.getElementById("email-service");
  const emailLabel = document.getElementById("email-label");
  const emailInput = document.getElementById("email");
  const passwordLabel = document.getElementById("password-label");
  const passwordInput = document.getElementById("password");
  const togglePasswordButton = document.getElementById("toggle-password");
  const emailError = document.getElementById("email-error");
  const passwordError = document.getElementById("password-error");
  const loginError = document.getElementById("login-error");
  const passwordContainer = document.querySelector(".password-container");

  emailServiceSelect.addEventListener("change", function () {
    if (emailServiceSelect.value === "outlook") {
      emailLabel.style.display = "block";
      emailInput.style.display = "block";
      passwordContainer.style.display = "block";
      togglePasswordButton.style.display = "block";
    } else {
      emailLabel.style.display = "none";
      emailInput.style.display = "none";
      passwordContainer.style.display = "none";
      togglePasswordButton.style.display = "none";
      emailError.style.display = "none";
      passwordError.style.display = "none";
      loginError.style.display = "none";
    }
  });

  togglePasswordButton.addEventListener("click", function () {
    const type =
      passwordInput.getAttribute("type") === "password" ? "text" : "password";
    passwordInput.setAttribute("type", type);
    togglePasswordButton.innerHTML =
      type === "password"
        ? '<i class="far fa-eye"></i>'
        : '<i class="far fa-eye-slash"></i>';
  });

  loginButton.addEventListener("click", function () {
    const emailService = emailServiceSelect.value;

    if (emailService === "outlook") {
      const email = emailInput.value;
      const password = passwordInput.value;
      let valid = true;

      // Email validation
      if (!email) {
        emailError.textContent = "Email cannot be empty.";
        emailError.style.display = "block";
        valid = false;
      } else if (!validateEmail(email)) {
        emailError.textContent = "Please enter a valid email address.";
        emailError.style.display = "block";
        valid = false;
      } else {
        emailError.style.display = "none";
      }

      // Password validation
      if (!password) {
        passwordError.textContent = "Password cannot be empty.";
        passwordError.style.display = "block";
        valid = false;
      } else {
        passwordError.style.display = "none";
      }

      if (!valid) {
        return;
      }

      // Validate Outlook login
      fetch("http://localhost:5000/validate-outlook-login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ email: email, password: password }),
      })
        .then((response) => response.json())
        .then((data) => {
          if (data.success) {
            loginError.style.display = "none";
            saveCredentials(emailService, email, password);
          } else {
            loginError.textContent = data.error;
            loginError.style.display = "block";
          }
        })
        .catch((error) => {
          console.error("Error during Outlook login validation:", error);
          alert(error);
        });
    } else {
      saveCredentials(emailService);
    }
  });

  function saveCredentials(emailService, email = null, password = null) {
    chrome.storage.local.set(
      { emailService: emailService, email: email, password: password },
      () => {
        if (emailService === "gmail") {
          fetch("http://localhost:5000/authorize")
            .then((response) => response.json())
            .then((data) => {
              const authWindow = window.open(
                data.url,
                "authWindow",
                "width=600,height=400"
              );

              authWindow.onunload = () => {
                loginSection.style.display = "none";
                controlSection.style.display = "block";
              };
            })
            .catch((error) => {
              console.error("Error during authorization request:", error);
              alert(
                "An error occurred while starting the authorization process"
              );
            });
        } else {
          loginSection.style.display = "none";
          controlSection.style.display = "block";
        }
      }
    );
  }

  checkMailButton.addEventListener("click", function () {
    chrome.storage.local.get(
      ["email", "password", "emailService"],
      function (result) {
        const emailService = result.emailService;
        if (emailService === "gmail") {
          fetch("http://localhost:5000/check_mail", {
            method: "GET",
            headers: { "Content-Type": "application/json" },
            credentials: "include",
          })
            .then((response) => response.json())
            .then((data) => {
              console.log("Check mail response:", data);
              chrome.runtime.sendMessage({
                type: "phishing-detected",
                emails: data,
              });
            })
            .catch((error) => {
              console.error("Error during check mail request:", error);
              alert("An error occurred while checking mail");
            });
        } else {
          fetch("http://localhost:5000/fetch-emails", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              username: result.email,
              password: result.password,
            }),
          })
            .then((response) => response.json())
            .then((data) => {
              console.log("Check mail response:", data);
              chrome.runtime.sendMessage({
                type: "phishing-detected",
                emails: data,
              });
            })
            .catch((error) => {
              console.error("Error during check mail request:", error);
              alert("An error occurred while checking mail");
            });
        }
      }
    );
  });

  logoutButton.addEventListener("click", function () {
    fetch("http://localhost:5000/logout", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
    })
      .then((response) => response.json())
      .then((data) => {
        alert(data.message);
        if (data.message === "Logged out") {
          chrome.storage.local.remove(
            ["email", "password", "emailService"],
            function () {
              loginSection.style.display = "block";
              controlSection.style.display = "none";
            }
          );
        }
      })
      .catch((error) => {
        console.error("Error during logout request:", error);
        alert("An error occurred while logging out");
      });
  });

  function checkAuthStatus() {
    fetch("http://localhost:5000/check_auth_status", { credentials: "include" })
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok " + response.statusText);
        }
        return response.json();
      })
      .then((data) => {
        if (data.logged_in) {
          chrome.storage.local.get(
            ["email", "emailService"],
            function (result) {
              showLoggedInSection(result.email, result.emailService);
            }
          );
        } else {
          loginSection.style.display = "block";
          controlSection.style.display = "none";
        }
      })
      .catch((error) => {
        console.error("Error checking auth status:", error);
      });
  }

  function showLoggedInSection(email, emailService) {
    const isGmail = emailService === "gmail";
    loginSection.style.display = "none";
    controlSection.style.display = "block";
    checkMailButton.textContent = isGmail ? "Check Gmail" : "Check Outlook";
  }

  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }

  checkAuthStatus();
});