+
-
-
-
+
-
-
-
-
- Logged in as:
+
+
+
-
-
-
-
-
-
Email Body
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
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();
+});