PhishGuardian/extension/popup.js

let classificationResults = {};  // Dictionary to store classification results

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();
        }
    } else {
        resultDiv.textContent = '';  // Clear message if not classified
        hideActions();
    }
}

function saveClassificationResults() {
    chrome.storage.local.set({ classificationResults: classificationResults }, () => {
        console.log('Classification results saved');
    });
}

function loadClassificationResults() {
    chrome.storage.local.get(['classificationResults'], (result) => {
        if (result.classificationResults) {
            classificationResults = result.classificationResults;
        }
    });
}

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
}

function clearCredentials() {
    document.getElementById('email').value = '';  // Clear email input field
    document.getElementById('password').value = '';  // Clear password input field
}

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
        });
        emailList.appendChild(li);
    });
}