initial commit
This commit is contained in:
19
inbox.html
Normal file
19
inbox.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Inbox - Bang Webmail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Inbox</h2>
|
||||
<button onclick="logout()">Logout</button>
|
||||
<button onclick="location.href='send.html'">Compose</button>
|
||||
<div id="inboxList"></div>
|
||||
<p id="inboxError" class="error"></p>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
19
index.html
Normal file
19
index.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bang Webmail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Bang Webmail</h1>
|
||||
<nav>
|
||||
<a href="login.html">Login</a>
|
||||
<a href="register.html">Register</a>
|
||||
</nav>
|
||||
<p>Welcome to Bang Webmail! Please login or register to continue.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
22
login.html
Normal file
22
login.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - Bang Webmail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Login</h2>
|
||||
<form id="loginForm">
|
||||
<input type="text" id="loginUsername" placeholder="Username" required><br>
|
||||
<input type="password" id="loginPassword" placeholder="Password" required><br>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
<p id="loginError" class="error"></p>
|
||||
<a href="register.html">Don't have an account? Register</a>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
176
main.js
Normal file
176
main.js
Normal file
@@ -0,0 +1,176 @@
|
||||
// Utility: Save and load credentials
|
||||
function saveCredentials(username, password) {
|
||||
localStorage.setItem('username', username);
|
||||
localStorage.setItem('password', password);
|
||||
}
|
||||
function getCredentials() {
|
||||
return {
|
||||
username: localStorage.getItem('username'),
|
||||
password: localStorage.getItem('password')
|
||||
};
|
||||
}
|
||||
function clearCredentials() {
|
||||
localStorage.removeItem('username');
|
||||
localStorage.removeItem('password');
|
||||
}
|
||||
function logout() {
|
||||
clearCredentials();
|
||||
window.location.href = 'login.html';
|
||||
}
|
||||
|
||||
// Registration
|
||||
if (document.getElementById('registerForm')) {
|
||||
document.getElementById('registerForm').onsubmit = async function(e) {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('registerUsername').value;
|
||||
const password = document.getElementById('registerPassword').value;
|
||||
const res = await fetch('http://localhost:8080/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
if (res.ok) {
|
||||
saveCredentials(username, password);
|
||||
window.location.href = 'inbox.html';
|
||||
} else {
|
||||
const err = await res.text();
|
||||
document.getElementById('registerError').innerText = err;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Login
|
||||
if (document.getElementById('loginForm')) {
|
||||
document.getElementById('loginForm').onsubmit = async function(e) {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('loginUsername').value;
|
||||
const password = document.getElementById('loginPassword').value;
|
||||
// Try to fetch mailbox to verify credentials
|
||||
const res = await fetch(`http://localhost:8080/mailbox?user=${encodeURIComponent(username)}`, {
|
||||
headers: { 'Authorization': 'Basic ' + btoa(username + ':' + password) }
|
||||
});
|
||||
if (res.ok) {
|
||||
saveCredentials(username, password);
|
||||
window.location.href = 'inbox.html';
|
||||
} else {
|
||||
document.getElementById('loginError').innerText = 'Invalid username or password.';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Inbox
|
||||
if (document.getElementById('inboxList')) {
|
||||
const { username, password } = getCredentials();
|
||||
if (!username || !password) {
|
||||
window.location.href = 'login.html';
|
||||
} else {
|
||||
fetch(`http://localhost:8080/mailbox?user=${encodeURIComponent(username)}`, {
|
||||
headers: { 'Authorization': 'Basic ' + btoa(username + ':' + password) }
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(emails => {
|
||||
if (!Array.isArray(emails)) throw new Error('Invalid mailbox response');
|
||||
// Determine current user's full address (username!domain if possible)
|
||||
// Try to find domain from any received or sent email
|
||||
let userDomain = null;
|
||||
for (const email of emails) {
|
||||
if (email.to === username && email.domain) {
|
||||
userDomain = email.domain;
|
||||
break;
|
||||
}
|
||||
if (email.from === username && email.domain) {
|
||||
userDomain = email.domain;
|
||||
break;
|
||||
}
|
||||
}
|
||||
const userFull = userDomain ? `${username}!${userDomain}` : username;
|
||||
// Inbox: emails where 'to!domain' matches current user
|
||||
const inboxEmails = emails.filter(email => {
|
||||
if (!email.to) return false;
|
||||
const toFull = email.domain ? `${email.to}!${email.domain}` : email.to;
|
||||
return toFull === userFull;
|
||||
});
|
||||
// Sent: emails where 'from!domain' matches current user
|
||||
const sentEmails = emails.filter(email => {
|
||||
if (!email.from) return false;
|
||||
const fromFull = email.domain ? `${email.from}!${email.domain}` : email.from;
|
||||
return fromFull === userFull;
|
||||
});
|
||||
let html = '';
|
||||
html += '<h3>Inbox</h3>';
|
||||
if (inboxEmails.length === 0) {
|
||||
html += '<p>No emails.</p>';
|
||||
} else {
|
||||
html += inboxEmails.map(email => {
|
||||
const fromDisplay = email.domain ? `${email.from}!${email.domain}` : email.from;
|
||||
return `
|
||||
<div class="email-item">
|
||||
<strong>From:</strong> ${fromDisplay}<br>
|
||||
<strong>Subject:</strong> ${email.subject}<br>
|
||||
<div>${email.body}</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
html += '<h3>Sent</h3>';
|
||||
if (sentEmails.length === 0) {
|
||||
html += '<p>No sent emails.</p>';
|
||||
} else {
|
||||
html += sentEmails.map(email => {
|
||||
const toDisplay = email.domain ? `${email.to}!${email.domain}` : email.to;
|
||||
return `
|
||||
<div class="email-item">
|
||||
<strong>To:</strong> ${toDisplay}<br>
|
||||
<strong>Subject:</strong> ${email.subject}<br>
|
||||
<div>${email.body}</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
document.getElementById('inboxList').innerHTML = html;
|
||||
})
|
||||
.catch(err => {
|
||||
document.getElementById('inboxError').innerText = 'Failed to load inbox.';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Send Email
|
||||
if (document.getElementById('sendForm')) {
|
||||
document.getElementById('sendForm').onsubmit = async function(e) {
|
||||
e.preventDefault();
|
||||
const { username, password } = getCredentials();
|
||||
if (!username || !password) {
|
||||
window.location.href = 'login.html';
|
||||
return;
|
||||
}
|
||||
const toField = document.getElementById('to').value.trim();
|
||||
// Require <username>!<domain> format
|
||||
if (!/^\w+!.+/.test(toField)) {
|
||||
document.getElementById('sendError').innerText = 'Recipient must be in the format username!domain';
|
||||
return;
|
||||
}
|
||||
let to = toField;
|
||||
let domain = '';
|
||||
if (toField.includes('!')) {
|
||||
[to, domain] = toField.split('!');
|
||||
}
|
||||
const subject = document.getElementById('subject').value;
|
||||
const body = document.getElementById('body').value;
|
||||
const email = domain ? { from: username, to, domain, subject, body } : { from: username, to, subject, body };
|
||||
const res = await fetch('http://localhost:8080/email', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Basic ' + btoa(username + ':' + password)
|
||||
},
|
||||
body: JSON.stringify(email)
|
||||
});
|
||||
if (res.ok) {
|
||||
window.location.href = 'inbox.html';
|
||||
} else {
|
||||
const err = await res.text();
|
||||
document.getElementById('sendError').innerText = err;
|
||||
}
|
||||
};
|
||||
}
|
||||
22
register.html
Normal file
22
register.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Register - Bang Webmail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Register</h2>
|
||||
<form id="registerForm">
|
||||
<input type="text" id="registerUsername" placeholder="Username" required><br>
|
||||
<input type="password" id="registerPassword" placeholder="Password" required><br>
|
||||
<button type="submit">Register</button>
|
||||
</form>
|
||||
<p id="registerError" class="error"></p>
|
||||
<a href="login.html">Already have an account? Login</a>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
23
send.html
Normal file
23
send.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Send Email - Bang Webmail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Compose Email</h2>
|
||||
<form id="sendForm">
|
||||
<input type="text" id="to" placeholder="To" required><br>
|
||||
<input type="text" id="subject" placeholder="Subject" required><br>
|
||||
<textarea id="body" placeholder="Message" required></textarea><br>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
<p id="sendError" class="error"></p>
|
||||
<button onclick="location.href='inbox.html'">Back to Inbox</button>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
64
style.css
Normal file
64
style.css
Normal file
@@ -0,0 +1,64 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.container {
|
||||
background: #fff;
|
||||
max-width: 400px;
|
||||
margin: 40px auto;
|
||||
padding: 30px 40px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1, h2 {
|
||||
text-align: center;
|
||||
}
|
||||
nav {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
color: #0077cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
input, textarea, button {
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
background: #0077cc;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
button:hover {
|
||||
background: #005fa3;
|
||||
}
|
||||
.error {
|
||||
color: #d8000c;
|
||||
text-align: center;
|
||||
}
|
||||
#inboxList {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.email-item {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.email-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.email-item strong {
|
||||
color: #0077cc;
|
||||
}
|
||||
Reference in New Issue
Block a user