diff --git a/extension/popup.html b/extension/popup.html index aa2431c..854b550 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -1,40 +1,109 @@ - + PhishGuardian - - - -

PhishGuardian

-
-
- - + + + + + +
+
+
+ + +
-
- - + - -
- + + + - + diff --git a/extension/popup.js b/extension/popup.js index 70549ab..e1c3dc0 100644 --- a/extension/popup.js +++ b/extension/popup.js @@ -1,254 +1,252 @@ -let classificationResults = {}; // Dictionary to store classification results +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"); -document.addEventListener('DOMContentLoaded', () => { - loadClassificationResults(); // Load classification results on start - checkLoginState(); - - document.getElementById('loginButton').addEventListener('click', () => { - const email = document.getElementById('email').value; - const password = document.getElementById('password').value; - - login(email, password); - }); - - document.getElementById('fetchEmails').addEventListener('click', () => { - fetchEmails(); - }); - - document.getElementById('classifyEmail').addEventListener('click', () => { - const emailBody = document.getElementById('emailBody').value; - const emailId = getCurrentEmailId(); - - fetch('http://localhost:5000/classify-email', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ body: emailBody }) - }) - .then(response => response.json()) - .then(data => { - classificationResults[emailId] = data.result; // Store the result - saveClassificationResults(); // Save results to chrome storage - updateClassificationResult(emailId); // Update the displayed result - if (data.result === "Suspicious") { - showActions(); - } else { - hideActions(); - } - }) - .catch(error => console.error('Error classifying email:', error)); - }); - - document.getElementById('logout').addEventListener('click', () => { - chrome.storage.local.remove(['email', 'password', 'classificationResults'], () => { - console.log('Logged out'); - clearEmailList(); // Clear the email list - clearCredentials(); // Clear the credentials - showLoginSection(); - }); - }); - - document.getElementById('markSafe').addEventListener('click', () => { - const emailId = getCurrentEmailId(); - if (emailId) { - markEmailAsSafe(emailId); - } - }); - - document.getElementById('deleteEmail').addEventListener('click', () => { - const emailId = getCurrentEmailId(); - if (emailId) { - deleteEmail(emailId); - } - }); -}); - -function login(email, password) { - chrome.storage.local.set({ email: email, password: password }, () => { - console.log('Credentials saved'); - showLoggedInSection(email); - }); -} - -function fetchEmails() { - chrome.storage.local.get(['email', 'password'], (result) => { - if (result.email && result.password) { - fetch('http://localhost:5000/fetch-emails', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ username: result.email, password: result.password }) - }) - .then(response => { - if (!response.ok) { - throw new Error('Login failed. Check your email and password.'); - } - return response.json(); - }) - .then(data => { - updateEmailList(data); - }) - .catch(error => console.error('Error fetching emails:', error)); - } else { - alert("Login credentials not found."); - } - }); -} - -function checkLoginState() { - chrome.storage.local.get(['email', 'password'], (result) => { - if (result.email && result.password) { - showLoggedInSection(result.email); - } else { - showLoginSection(); - } - }); -} - -function showLoginSection() { - document.getElementById('loginSection').style.display = 'block'; - document.getElementById('loggedInSection').style.display = 'none'; - document.getElementById('loggedInEmail').textContent = ''; - document.getElementById('actions').style.display = 'none'; - clearEmailList(); // Clear the email list when showing the login section -} - -function showLoggedInSection(email) { - document.getElementById('loginSection').style.display = 'none'; - document.getElementById('loggedInSection').style.display = 'block'; - document.getElementById('loggedInEmail').textContent = email; -} - -function showActions() { - document.getElementById('actions').style.display = 'block'; -} - -function hideActions() { - document.getElementById('actions').style.display = 'none'; -} - -function getCurrentEmailId() { - return document.getElementById('emailBody').dataset.emailId; -} - -function markEmailAsSafe(emailId) { - fetch('http://localhost:5000/mark-safe', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ email_id: emailId }) - }) - .then(response => response.json()) - .then(data => { - classificationResults[emailId] = "Not suspicious (marked safe by user)"; // Update the classification result - saveClassificationResults(); // Save results to chrome storage - updateClassificationResult(emailId); // Update the displayed result - hideActions(); // Hide actions since it's now marked as safe - }) - .catch(error => console.error('Error marking email as safe:', error)); -} - -function deleteEmail(emailId) { - chrome.storage.local.get(['email', 'password'], (result) => { - if (result.email && result.password) { - fetch('http://localhost:5000/delete-email', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ email_id: emailId, username: result.email, password: result.password }) - }) - .then(response => response.json()) - .then(data => { - alert(data.message); - removeEmailFromList(emailId); // Update the list and reindex - }) - .catch(error => console.error('Error deleting email:', error)); - } else { - alert("Login credentials not found."); - } - }); -} - -function removeEmailFromList(emailId) { - const emailList = document.getElementById('emailList'); - const emailItems = emailList.getElementsByTagName('li'); - for (let i = 0; i < emailItems.length; i++) { - if (emailItems[i].dataset.emailId === emailId) { - emailList.removeChild(emailItems[i]); - break; - } - } - // Reindex the remaining emails - reindexEmailList(); - document.getElementById('emailBody').value = ''; // Clear email body display - document.getElementById('result').textContent = ''; // Clear classification result message - hideActions(); // Hide actions -} - -function reindexEmailList() { - const emailList = document.getElementById('emailList'); - const emailItems = emailList.getElementsByTagName('li'); - for (let i = 0; i < emailItems.length; i++) { - emailItems[i].textContent = `${i + 1}: ${emailItems[i].textContent.split(': ')[1]}`; - } -} - -function updateClassificationResult(emailId) { - const resultDiv = document.getElementById('result'); - if (classificationResults[emailId]) { - resultDiv.textContent = `This email is: ${classificationResults[emailId]}`; - if (classificationResults[emailId] === "Suspicious") { - showActions(); - } else { - hideActions(); - } + 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 { - resultDiv.textContent = ''; // Clear message if not classified - hideActions(); + 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"; } -} + }); -function saveClassificationResults() { - chrome.storage.local.set({ classificationResults: classificationResults }, () => { - console.log('Classification results saved'); - }); -} + togglePasswordButton.addEventListener("click", function () { + const type = + passwordInput.getAttribute("type") === "password" ? "text" : "password"; + passwordInput.setAttribute("type", type); + togglePasswordButton.innerHTML = + type === "password" + ? '' + : ''; + }); -function loadClassificationResults() { - chrome.storage.local.get(['classificationResults'], (result) => { - if (result.classificationResults) { - classificationResults = result.classificationResults; - } - }); -} + loginButton.addEventListener("click", function () { + const emailService = emailServiceSelect.value; -function clearEmailList() { - document.getElementById('emailList').innerHTML = ''; // Clear the email list - document.getElementById('emailBody').value = ''; // Clear email body display - document.getElementById('result').textContent = ''; // Clear classification result message -} + if (emailService === "outlook") { + const email = emailInput.value; + const password = passwordInput.value; + let valid = true; -function clearCredentials() { - document.getElementById('email').value = ''; // Clear email input field - document.getElementById('password').value = ''; // Clear password input field -} + // 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"; + } -function updateEmailList(emails) { - const emailList = document.getElementById('emailList'); - emailList.innerHTML = ''; - emails.forEach((email, index) => { - const li = document.createElement('li'); - li.textContent = `${index + 1}: ${email.subject} (from ${email.name} <${email.email_address}>)`; - li.dataset.emailId = email.id; // Assuming email objects have an id property - li.addEventListener('click', () => { - document.getElementById('emailBody').value = email.body; - document.getElementById('emailBody').dataset.emailId = email.id; // Store the email ID - updateClassificationResult(email.id); // Update the displayed result + // 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); }); - emailList.appendChild(li); - }); -} + } 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(); +});