PhishGuardian/extension/popup.js

253 lines
8.4 KiB
JavaScript
Raw Normal View History

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();
});