Creating an authentication page and implementing its interaction with the backend.
This commit is contained in:
parent
32c8389ca5
commit
891da27c47
@ -1,40 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title>PhishGuardian</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>PhishGuardian</h1>
|
||||
<div id="loginSection">
|
||||
<div>
|
||||
<label>Email:</label>
|
||||
<input type="text" id="email">
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
||||
/>
|
||||
<style>
|
||||
.btn-spacing {
|
||||
margin: 5px;
|
||||
}
|
||||
.form-container {
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: #f9f9f9;
|
||||
margin: auto;
|
||||
}
|
||||
.form-group label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.center-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.password-container {
|
||||
position: relative;
|
||||
}
|
||||
.toggle-password {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="center-container">
|
||||
<div id="login-section" class="text-center form-container">
|
||||
<div class="form-group">
|
||||
<label id="email-label" style="display: none">Email:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="email"
|
||||
class="form-control"
|
||||
style="display: none"
|
||||
/>
|
||||
<div id="email-error" class="error-message" style="display: none">
|
||||
Please enter a valid email address.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>Password:</label>
|
||||
<input type="password" id="password">
|
||||
<div class="form-group password-container" style="display: none">
|
||||
<label id="password-label" for="password">Password</label>
|
||||
<div class="input-group">
|
||||
<input type="password" class="form-control" id="password" />
|
||||
<button
|
||||
id="toggle-password"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
style="display: none"
|
||||
>
|
||||
<i class="far fa-eye"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="password-error" class="error-message" style="display: none">
|
||||
Password cannot be empty.
|
||||
</div>
|
||||
<div id="login-error" class="error-message" style="display: none">
|
||||
Please enter a valid credentials.
|
||||
</div>
|
||||
</div>
|
||||
<button id="loginButton">Log In</button>
|
||||
</div>
|
||||
<div id="loggedInSection" style="display:none;">
|
||||
<div id="loggedInInfo">
|
||||
Logged in as: <span id="loggedInEmail"></span>
|
||||
<div class="form-group">
|
||||
<label for="email-service">Select email service:</label>
|
||||
<select id="email-service" class="form-control">
|
||||
<option value="gmail">Gmail</option>
|
||||
<option value="outlook">Outlook</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="logout">Logout</button>
|
||||
<button id="fetchEmails">Fetch Emails</button>
|
||||
</div>
|
||||
<ul id="emailList"></ul>
|
||||
<div>
|
||||
<h2>Email Body</h2>
|
||||
<textarea id="emailBody" rows="10" cols="50"></textarea>
|
||||
<button id="classifyEmail">Classify Email</button>
|
||||
</div>
|
||||
<div id="result"></div>
|
||||
<div id="actions" style="display:none;">
|
||||
<button id="markSafe">Mark as Safe</button>
|
||||
<button id="deleteEmail">Delete Email</button>
|
||||
<button id="loginButton" class="btn btn-primary btn-spacing">
|
||||
Log In
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="control-section"
|
||||
class="text-center form-container"
|
||||
style="display: none"
|
||||
>
|
||||
<button id="check-mail" class="btn btn-success btn-spacing">
|
||||
Check Mail
|
||||
</button>
|
||||
<button id="logout" class="btn btn-danger btn-spacing">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/jquery-3.2.1.min.js"></script>
|
||||
<script src="js\node_modules\@popperjs\core\dist\umd\popper.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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"
|
||||
? '<i class="far fa-eye"></i>'
|
||||
: '<i class="far fa-eye-slash"></i>';
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user