bang-web/main.js

// 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;
    }
  };
}