document.addEventListener("DOMContentLoaded", function () { const closeButton = document.getElementById("close"); const notificationTitle = document.getElementById("notification-title"); const notificationMessage = document.getElementById("notification-message"); const emailsContainer = document.getElementById("emails-container"); const pagination = document.getElementById("pagination"); const filterButton = document.getElementById("filter-button"); const startDateInput = document.getElementById("start-date"); const endDateInput = document.getElementById("end-date"); const emailsPerPage = 5; let currentPage = 1; chrome.storage.local.get( ["notificationTitle", "notificationMessage", "phishingEmails"], function (items) { notificationTitle.textContent = items.notificationTitle; notificationMessage.textContent = items.notificationMessage; let phishingEmails = items.phishingEmails || []; function displayEmails(page) { emailsContainer.innerHTML = ""; const start = (page - 1) * emailsPerPage; const end = start + emailsPerPage; const paginatedEmails = phishingEmails.slice(start, end); paginatedEmails.forEach((email) => { const emailDiv = document.createElement("div"); emailDiv.className = "list-group-item"; emailDiv.innerHTML = `

From: ${email.from}

Subject: ${email.subject}

Snippet: ${email.snippet}

`; emailsContainer.appendChild(emailDiv); }); document.querySelectorAll(".mark-safe").forEach((button) => { button.addEventListener("click", function () { const emailId = this.getAttribute("data-email-id"); chrome.runtime.sendMessage( { type: "mark-safe", emailId: emailId, }, function (response) { console.log("Mark safe response:", response); } ); phishingEmails = phishingEmails.filter( (email) => email.id !== emailId ); updateDisplay(); }); }); document.querySelectorAll(".move-trash").forEach((button) => { button.addEventListener("click", function () { const emailId = this.getAttribute("data-email-id"); chrome.runtime.sendMessage( { type: "move-trash", emailId: emailId, }, function (response) { console.log("Move to trash response:", response); } ); phishingEmails = phishingEmails.filter( (email) => email.id !== emailId ); updateDisplay(); }); }); } function setupPagination(totalEmails) { const pageCount = Math.ceil(totalEmails / emailsPerPage); pagination.innerHTML = ""; for (let i = 1; i <= pageCount; i++) { const li = document.createElement("li"); li.className = "page-item"; li.innerHTML = `${i}`; li.addEventListener("click", function () { currentPage = i; displayEmails(currentPage); document .querySelectorAll(".page-item") .forEach((item) => item.classList.remove("active")); li.classList.add("active"); }); pagination.appendChild(li); } if (pagination.firstChild) { pagination.firstChild.classList.add("active"); } } function updateDisplay() { if (phishingEmails.length === 0) { notificationMessage.textContent = "No phishing emails detected."; emailsContainer.innerHTML = ""; pagination.innerHTML = ""; } else { notificationMessage.textContent = `Detected ${phishingEmails.length} suspicious email(s).`; setupPagination(phishingEmails.length); displayEmails(currentPage); } } filterButton.addEventListener("click", function () { const startDate = startDateInput.value; const endDate = endDateInput.value; chrome.storage.local.get(["email", "emailService"], function (result) { const emailService = result.emailService; fetch("http://localhost:5000/get_email_stats", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ start_date: startDate, end_date: endDate, emailService: emailService, username: result.email, }), }) .then((response) => response.json()) .then((data) => { notificationMessage.innerHTML = `

Marked as Safe: ${data.safe_emails_count}

Trashed Emails: ${data.trashed_emails_count}

`; }) .catch((error) => console.error("Error:", error)); }); }); updateDisplay(); } ); closeButton.addEventListener("click", function () { window.close(); }); });