brandon/bang-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Brandon Brunson
2025-06-06 19:59:02 -07:00
commit 5b86d31cfd
7 changed files with 345 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
inbox.html Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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;
}