update
This commit is contained in:
@@ -0,0 +1,601 @@
|
||||
const API = '/api';
|
||||
let token = localStorage.getItem('gomail_token') || '';
|
||||
let me = null;
|
||||
let accounts = []; // [{id:'', label, provider:'local'}, ...linked]
|
||||
let currentAccountId = 'UNIFIED';
|
||||
let currentFolder = 'INBOX';
|
||||
let folders = [];
|
||||
let loadedMessages = []; // last-fetched folder/unified-inbox contents
|
||||
let searchQuery = '';
|
||||
let searchResults = null; // null = not searching; array = server search results
|
||||
let searchTruncated = false;
|
||||
let searchDebounceTimer = null;
|
||||
let selectedKey = '';
|
||||
let pendingMFAToken = '';
|
||||
|
||||
// ── fetch helper ──────────────────────────────────────────────────────────
|
||||
async function api(path, opts = {}) {
|
||||
const r = await fetch(API + path, { ...opts, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token, ...(opts.headers || {}) } });
|
||||
if (r.status === 401) { showLogin(); return null; }
|
||||
return r.ok ? r.json() : Promise.reject(await r.json());
|
||||
}
|
||||
|
||||
function esc(s) { return String(s == null ? '' : s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); }
|
||||
|
||||
function bodyOf(raw) {
|
||||
if (!raw) return '';
|
||||
const decoded = atob(raw);
|
||||
const idx = decoded.indexOf('\r\n\r\n');
|
||||
return idx >= 0 ? decoded.slice(idx + 4) : decoded;
|
||||
}
|
||||
|
||||
function formatDate(s) {
|
||||
if (!s) return '';
|
||||
const d = new Date(s);
|
||||
return isNaN(d) ? s : d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
|
||||
function initial(label) { return (label || '?').trim().charAt(0).toUpperCase() || '?'; }
|
||||
|
||||
// account-scoping: '' (local) omits the query param, matching provider()'s
|
||||
// own default-to-local convention server-side.
|
||||
function acctQuery(id) { return id ? '?account=' + encodeURIComponent(id) : ''; }
|
||||
|
||||
// ── auth ──────────────────────────────────────────────────────────────────
|
||||
async function login() {
|
||||
const email = document.getElementById('le').value, pwd = document.getElementById('lp').value;
|
||||
try {
|
||||
const d = await fetch(API + '/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ Email: email, Password: pwd }) }).then(r => r.json());
|
||||
if (d.error) throw new Error(d.error);
|
||||
if (d.mfa_required) { pendingMFAToken = d.mfa_token; showMFALogin(); return; }
|
||||
token = d.token; localStorage.setItem('gomail_token', token);
|
||||
showApp();
|
||||
} catch (e) { const el = document.getElementById('lerr'); el.textContent = e.message || 'Login failed'; el.style.display = ''; }
|
||||
}
|
||||
|
||||
async function mfaVerifyLogin() {
|
||||
const code = document.getElementById('mfa-code').value;
|
||||
try {
|
||||
const d = await fetch(API + '/auth/mfa-verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ MFAToken: pendingMFAToken, Code: code }) }).then(r => r.json());
|
||||
if (d.error) throw new Error(d.error);
|
||||
token = d.token; localStorage.setItem('gomail_token', token);
|
||||
showApp();
|
||||
} catch (e) { const el = document.getElementById('mfaerr'); el.textContent = e.message || 'Invalid code'; el.style.display = ''; }
|
||||
}
|
||||
|
||||
function logout() { localStorage.removeItem('gomail_token'); token = ''; showLogin(); }
|
||||
|
||||
function showLogin() {
|
||||
document.getElementById('login').style.display = 'flex';
|
||||
document.getElementById('mfa-login').style.display = 'none';
|
||||
document.getElementById('app').style.display = 'none';
|
||||
}
|
||||
function showMFALogin() {
|
||||
document.getElementById('login').style.display = 'none';
|
||||
document.getElementById('mfa-login').style.display = 'flex';
|
||||
}
|
||||
|
||||
async function showApp() {
|
||||
document.getElementById('login').style.display = 'none';
|
||||
document.getElementById('mfa-login').style.display = 'none';
|
||||
document.getElementById('app').style.display = 'flex';
|
||||
me = await api('/me'); if (!me) return;
|
||||
document.getElementById('me-email').textContent = me.email;
|
||||
await loadAccounts();
|
||||
}
|
||||
|
||||
async function boot() {
|
||||
if (!token) { showLogin(); return; }
|
||||
try { const m = await api('/me'); if (m) { me = m; document.getElementById('app').style.display = 'flex'; document.getElementById('me-email').textContent = me.email; await loadAccounts(); } else showLogin(); }
|
||||
catch { showLogin(); }
|
||||
}
|
||||
|
||||
// ── accounts ──────────────────────────────────────────────────────────────
|
||||
async function loadAccounts() {
|
||||
const linked = await api('/accounts') || [];
|
||||
accounts = [{ id: '', label: me.email, provider: 'local' }, ...linked.map(a => ({ id: a.id, label: a.display_name || a.email_address, provider: a.provider }))];
|
||||
renderAccountSwitcher();
|
||||
await selectAccount('UNIFIED');
|
||||
}
|
||||
|
||||
function renderAccountSwitcher() {
|
||||
const rows = [{ id: 'UNIFIED', label: 'Unified Inbox', icon: '✦' }, ...accounts];
|
||||
document.getElementById('account-switcher').innerHTML = rows.map(a => `
|
||||
<div class="nav-row ${a.id === currentAccountId ? 'active' : ''}" onclick="selectAccount('${esc(a.id)}')">
|
||||
<div class="seal">${a.icon || esc(initial(a.label))}</div>
|
||||
<div class="nav-row-label">${esc(a.label)}</div>
|
||||
</div>`).join('');
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
searchQuery = ''; searchResults = null; searchTruncated = false;
|
||||
const box = document.getElementById('search-box');
|
||||
if (box) box.value = '';
|
||||
const toggle = document.getElementById('search-body-toggle');
|
||||
if (toggle) toggle.style.display = 'none';
|
||||
}
|
||||
|
||||
async function selectAccount(id) {
|
||||
clearSearch();
|
||||
currentAccountId = id;
|
||||
renderAccountSwitcher();
|
||||
document.getElementById('view-mail').style.display = 'flex';
|
||||
document.getElementById('view-quarantine').style.display = 'none';
|
||||
document.getElementById('view-settings').style.display = 'none';
|
||||
const existingWarning = document.getElementById('unified-warning');
|
||||
if (existingWarning) existingWarning.remove();
|
||||
if (id === 'UNIFIED') {
|
||||
document.getElementById('folder-section').style.display = 'none';
|
||||
document.getElementById('list-title').textContent = 'Unified Inbox';
|
||||
await loadUnifiedInbox();
|
||||
} else {
|
||||
document.getElementById('folder-section').style.display = '';
|
||||
await loadFolders();
|
||||
}
|
||||
}
|
||||
|
||||
// ── folders (per-account view) ───────────────────────────────────────────
|
||||
async function loadFolders() {
|
||||
folders = await api('/folders' + acctQuery(currentAccountId)) || [];
|
||||
if (!folders.find(f => f.id === currentFolder)) {
|
||||
const inbox = folders.find(f => f.type === 'inbox');
|
||||
currentFolder = inbox ? inbox.id : (folders[0] ? folders[0].id : 'INBOX');
|
||||
}
|
||||
renderFolderList();
|
||||
await loadMessages(currentFolder);
|
||||
}
|
||||
|
||||
function renderFolderList() {
|
||||
document.getElementById('folder-list').innerHTML = folders.map(f => `
|
||||
<div class="nav-row ${f.id === currentFolder ? 'active' : ''}" onclick="selectFolder('${esc(f.id)}')">
|
||||
<div class="seal">${f.unread_count > 0 ? '<span class="dot"></span>' : ''}</div>
|
||||
<div class="nav-row-label">${esc(f.display_name)}</div>
|
||||
<div class="count-badge">${f.unread_count > 0 ? f.unread_count : ''}</div>
|
||||
</div>`).join('');
|
||||
}
|
||||
|
||||
async function selectFolder(id) {
|
||||
clearSearch();
|
||||
currentFolder = id;
|
||||
renderFolderList();
|
||||
const f = folders.find(x => x.id === id);
|
||||
document.getElementById('list-title').textContent = f ? f.display_name : id;
|
||||
await loadMessages(id);
|
||||
}
|
||||
|
||||
// ── messages ──────────────────────────────────────────────────────────────
|
||||
async function loadMessages(folderID) {
|
||||
loadedMessages = await api('/folders/' + folderID + '/messages' + acctQuery(currentAccountId)) || [];
|
||||
renderMessageList();
|
||||
}
|
||||
|
||||
async function loadUnifiedInbox() {
|
||||
const res = await api('/inbox/unified'); if (!res) return;
|
||||
loadedMessages = res.messages || [];
|
||||
renderMessageList();
|
||||
const existing = document.getElementById('unified-warning');
|
||||
if (existing) existing.remove();
|
||||
if (res.warnings && res.warnings.length) {
|
||||
const notice = document.createElement('div');
|
||||
notice.id = 'unified-warning';
|
||||
notice.className = 'notice';
|
||||
notice.style.margin = '0 12px 8px';
|
||||
notice.textContent = 'Some accounts could not be reached: ' + res.warnings.join('; ');
|
||||
document.getElementById('list-title').insertAdjacentElement('afterend', notice);
|
||||
}
|
||||
}
|
||||
|
||||
function onSearchInput(v) {
|
||||
searchQuery = v;
|
||||
clearTimeout(searchDebounceTimer);
|
||||
document.getElementById('search-body-toggle').style.display = v ? '' : 'none';
|
||||
if (!v) { searchResults = null; renderMessageList(); return; }
|
||||
searchDebounceTimer = setTimeout(() => runSearch(false), 300);
|
||||
}
|
||||
|
||||
// runSearch calls the real server-side search (internal/webmail/api.go's
|
||||
// search handler). Unified view sends no ?account=, so the server fans the
|
||||
// search out across the local mailbox and every linked account (each
|
||||
// result tagged with account_id/account_label, like the unified inbox);
|
||||
// otherwise it's scoped to the one selected account.
|
||||
async function runSearch(withBody) {
|
||||
const q = searchQuery;
|
||||
if (!q) return;
|
||||
const realAccountId = currentAccountId === 'UNIFIED' ? '' : currentAccountId;
|
||||
let url = '/search?q=' + encodeURIComponent(q);
|
||||
if (withBody) url += '&body=1';
|
||||
if (realAccountId) url += '&account=' + encodeURIComponent(realAccountId);
|
||||
try {
|
||||
const res = await api(url);
|
||||
if (!res) return;
|
||||
searchResults = res.messages || [];
|
||||
searchTruncated = !!res.truncated;
|
||||
renderMessageList();
|
||||
} catch (e) { /* transient — leave prior results/state as-is */ }
|
||||
}
|
||||
|
||||
function renderMessageList() {
|
||||
const list = document.getElementById('msg-list');
|
||||
|
||||
if (searchResults !== null) {
|
||||
const notice = searchTruncated ? '<div class="notice" style="margin:0 12px 8px">Showing partial results — narrow your search for a complete list.</div>' : '';
|
||||
if (!searchResults.length) { list.innerHTML = notice + '<div style="padding:20px;color:var(--text-faint);text-align:center">No matches</div>'; return; }
|
||||
list.innerHTML = notice + searchResults.map(m => {
|
||||
const unread = !(m.flags || []).includes('\\Seen');
|
||||
const acct = currentAccountId === 'UNIFIED' ? (m.account_id || '') : currentAccountId;
|
||||
const key = acct + '|' + m.folder_id + '|' + m.id;
|
||||
return `<div class="msg-row ${unread ? 'unread' : ''} ${key === selectedKey ? 'selected' : ''}" onclick="viewMessage('${esc(acct)}','${esc(m.folder_id)}','${esc(m.id)}')">
|
||||
<div class="msg-from">${unread ? '<span class="dot"></span>' : ''}<span>${esc(m.from || '(unknown)')}</span></div>
|
||||
<div class="msg-subject">${esc(m.subject || '(no subject)')}</div>
|
||||
<div class="msg-meta">${currentAccountId === 'UNIFIED' ? `<span class="chip">${esc(m.account_label || '')}</span>` : ''}<span class="chip">${esc(m.folder_name || '')}</span><span>${esc(formatDate(m.date))}</span></div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!loadedMessages.length) { list.innerHTML = '<div style="padding:20px;color:var(--text-faint);text-align:center">No messages</div>'; return; }
|
||||
list.innerHTML = loadedMessages.map(m => {
|
||||
const unread = !(m.flags || []).includes('\\Seen');
|
||||
const acct = currentAccountId === 'UNIFIED' ? (m.account_id || '') : currentAccountId;
|
||||
const folderId = currentAccountId === 'UNIFIED' ? m.folder_id : currentFolder;
|
||||
const key = acct + '|' + folderId + '|' + m.id;
|
||||
return `<div class="msg-row ${unread ? 'unread' : ''} ${key === selectedKey ? 'selected' : ''}" onclick="viewMessage('${esc(acct)}','${esc(folderId)}','${esc(m.id)}')">
|
||||
<div class="msg-from">${unread ? '<span class="dot"></span>' : ''}<span>${esc(m.from || '(unknown)')}</span></div>
|
||||
<div class="msg-subject">${esc(m.subject || '(no subject)')}</div>
|
||||
<div class="msg-meta">${currentAccountId === 'UNIFIED' ? `<span class="chip">${esc(m.account_label || '')}</span>` : ''}<span>${esc(formatDate(m.date))}</span></div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function viewMessage(acct, folderId, id) {
|
||||
selectedKey = acct + '|' + folderId + '|' + id;
|
||||
renderMessageList();
|
||||
const msg = await api('/messages/' + folderId + '/' + id + acctQuery(acct)); if (!msg) return;
|
||||
document.getElementById('msg-view').innerHTML = `
|
||||
<div class="reading-subject">${esc(msg.subject || '(no subject)')}</div>
|
||||
<div class="reading-meta">
|
||||
<div>From: ${esc(msg.from)}</div>
|
||||
<div>To: ${esc(msg.to)}</div>
|
||||
<div>${esc(formatDate(msg.date))}</div>
|
||||
</div>
|
||||
<div class="reading-body">${esc(bodyOf(msg.raw))}</div>
|
||||
<div style="margin-top:20px;display:flex;gap:8px">
|
||||
<button onclick="deleteMessage('${esc(acct)}','${esc(folderId)}','${esc(id)}')" class="btn btn-ghost">Delete</button>
|
||||
</div>`;
|
||||
api('/messages/' + folderId + '/' + id + '/flags' + acctQuery(acct), { method: 'PUT', body: JSON.stringify({ Flags: ['\\Seen'] }) });
|
||||
}
|
||||
|
||||
async function deleteMessage(acct, folderId, id) {
|
||||
await api('/messages/' + folderId + '/' + id + acctQuery(acct), { method: 'DELETE' });
|
||||
document.getElementById('msg-view').innerHTML = '<div class="reading-empty">Select a message</div>';
|
||||
if (currentAccountId === 'UNIFIED') await loadUnifiedInbox(); else await loadMessages(currentFolder);
|
||||
}
|
||||
|
||||
// ── compose ───────────────────────────────────────────────────────────────
|
||||
function openCompose() {
|
||||
const sel = document.getElementById('c-from');
|
||||
sel.innerHTML = accounts.map(a => `<option value="${esc(a.id)}">${esc(a.label)}</option>`).join('');
|
||||
sel.value = currentAccountId === 'UNIFIED' ? '' : currentAccountId;
|
||||
document.getElementById('compose-modal').style.display = 'flex';
|
||||
}
|
||||
function closeCompose() { document.getElementById('compose-modal').style.display = 'none'; }
|
||||
|
||||
async function sendMessage() {
|
||||
const from = document.getElementById('c-from').value;
|
||||
const to = document.getElementById('c-to').value.split(',').map(s => s.trim()).filter(Boolean);
|
||||
const subject = document.getElementById('c-subject').value;
|
||||
const body = document.getElementById('c-body').value;
|
||||
try {
|
||||
await api('/messages' + acctQuery(from), { method: 'POST', body: JSON.stringify({ to, subject, body }) });
|
||||
closeCompose();
|
||||
document.getElementById('c-to').value = ''; document.getElementById('c-subject').value = ''; document.getElementById('c-body').value = '';
|
||||
} catch (e) { alert('Send failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
// ── quarantine ────────────────────────────────────────────────────────────
|
||||
async function showQuarantine() {
|
||||
document.getElementById('view-mail').style.display = 'none';
|
||||
document.getElementById('view-settings').style.display = 'none';
|
||||
document.getElementById('view-quarantine').style.display = 'block';
|
||||
const entries = await api('/quarantine'); if (!entries) return;
|
||||
document.getElementById('quarantine-list').innerHTML = entries.length ? entries.map(e => `
|
||||
<div class="card" style="margin-bottom:10px;display:flex;justify-content:space-between;align-items:center">
|
||||
<div><div style="font-size:13px">Reason: ${esc(e.Reason || '—')}</div>
|
||||
<div style="color:var(--text-faint);font-size:12px">Held: ${esc(e.CreatedAt)}</div></div>
|
||||
<button onclick="releaseQ('${esc(e.ID)}')" class="btn btn-primary">Release</button>
|
||||
</div>`).join('') : '<div style="color:var(--text-faint);text-align:center;padding:40px">Nothing held</div>';
|
||||
}
|
||||
async function releaseQ(id) {
|
||||
try { await api('/quarantine/' + id + '/release', { method: 'POST' }); showQuarantine(); }
|
||||
catch (e) { alert('Release failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
// ── settings ──────────────────────────────────────────────────────────────
|
||||
async function showSettings() {
|
||||
document.getElementById('view-mail').style.display = 'none';
|
||||
document.getElementById('view-quarantine').style.display = 'none';
|
||||
document.getElementById('view-settings').style.display = 'block';
|
||||
await renderSettings();
|
||||
}
|
||||
|
||||
async function renderSettings() {
|
||||
me = await api('/me') || me;
|
||||
const body = document.getElementById('settings-body');
|
||||
body.innerHTML = `
|
||||
<div class="settings-section card">
|
||||
<h3>Two-factor authentication</h3>
|
||||
<p class="hint">${me.mfa_enabled ? 'Enabled — a code or passkey is required at every sign-in.' : 'Not enabled. Add a code from an authenticator app or a passkey for a second sign-in step.'}</p>
|
||||
<div id="mfa-area"></div>
|
||||
</div>
|
||||
<div class="settings-section card">
|
||||
<h3>Passkeys</h3>
|
||||
<p class="hint">A device, security key, or platform authenticator (Touch ID, Windows Hello) you can sign in with instead of typing a code.</p>
|
||||
<div id="passkeys-area"></div>
|
||||
<button onclick="addPasskey()" class="btn btn-primary" style="margin-top:10px">Add a passkey</button>
|
||||
</div>
|
||||
<div class="settings-section card">
|
||||
<h3>Recovery email</h3>
|
||||
<p class="hint">Used for password reset — not your own mailbox, so you can't get locked out of it.</p>
|
||||
<div style="display:flex;gap:8px">
|
||||
<input id="recovery-email-input" class="inp" placeholder="you@elsewhere.example" value="${esc(me.recovery_email || '')}">
|
||||
<button onclick="saveRecoveryEmail()" class="btn btn-primary" style="flex:none">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section card">
|
||||
<h3>App passwords</h3>
|
||||
<p class="hint">For mail clients that need a password instead of your real one — IMAP/SMTP/POP3 login.</p>
|
||||
<div id="app-passwords-area"></div>
|
||||
<div style="display:flex;gap:8px;margin-top:10px">
|
||||
<input id="app-pw-label" class="inp" placeholder="Label, e.g. \"Phone Mail app\"">
|
||||
<button onclick="createAppPassword()" class="btn btn-primary" style="flex:none">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section card">
|
||||
<h3>Linked accounts</h3>
|
||||
<p class="hint">Other mailboxes shown in Unified Inbox and the account switcher.</p>
|
||||
<div id="linked-accounts-area"></div>
|
||||
<div style="display:flex;gap:8px;margin-top:14px">
|
||||
<button onclick="startOAuth('google')" class="btn btn-ghost">Link Google account</button>
|
||||
<button onclick="startOAuth('microsoft')" class="btn btn-ghost">Link Microsoft account</button>
|
||||
<button onclick="toggleImapForm()" class="btn btn-ghost">Add IMAP account</button>
|
||||
</div>
|
||||
<div id="imap-form" style="display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)">
|
||||
<div class="field"><input id="imap-email" class="inp" placeholder="Email address"></div>
|
||||
<div class="field"><input id="imap-password" type="password" class="inp" placeholder="Password"></div>
|
||||
<div class="field" style="display:flex;gap:8px">
|
||||
<input id="imap-host" class="inp" placeholder="IMAP host">
|
||||
<input id="imap-port" class="inp" placeholder="993" style="width:90px">
|
||||
</div>
|
||||
<div class="field" style="display:flex;gap:8px">
|
||||
<input id="smtp-host" class="inp" placeholder="SMTP host">
|
||||
<input id="smtp-port" class="inp" placeholder="465" style="width:90px">
|
||||
</div>
|
||||
<button onclick="submitImapAccount()" class="btn btn-primary">Add account</button>
|
||||
</div>
|
||||
</div>`;
|
||||
renderMFAArea();
|
||||
renderPasskeys();
|
||||
renderAppPasswords();
|
||||
renderLinkedAccountsSettings();
|
||||
}
|
||||
|
||||
function renderMFAArea() {
|
||||
const area = document.getElementById('mfa-area');
|
||||
if (me.mfa_enabled) {
|
||||
area.innerHTML = `
|
||||
<div class="field"><input id="mfa-disable-pw" type="password" class="inp" placeholder="Current password" style="max-width:260px"></div>
|
||||
<button onclick="mfaDisableSubmit()" class="btn btn-danger">Disable two-factor</button>`;
|
||||
return;
|
||||
}
|
||||
area.innerHTML = `<button onclick="mfaSetupStart()" class="btn btn-primary">Set up two-factor</button>`;
|
||||
}
|
||||
|
||||
async function mfaSetupStart() {
|
||||
try {
|
||||
const d = await api('/me/mfa/setup', { method: 'POST' });
|
||||
document.getElementById('mfa-area').innerHTML = `
|
||||
<p class="hint">Scan isn't available here — enter this manually in your authenticator app (Google Authenticator, 1Password, etc.):</p>
|
||||
<div class="card" style="background:var(--bg);word-break:break-all;font-size:12px;margin-bottom:10px">${esc(d.provisioning_uri)}</div>
|
||||
<div class="field"><input id="mfa-confirm-code" class="inp" placeholder="Enter the 6-digit code" style="max-width:200px"></div>
|
||||
<button onclick="mfaConfirmSubmit()" class="btn btn-primary">Confirm</button>`;
|
||||
} catch (e) { alert('Setup failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
async function mfaConfirmSubmit() {
|
||||
const code = document.getElementById('mfa-confirm-code').value;
|
||||
try {
|
||||
const d = await api('/me/mfa/confirm', { method: 'POST', body: JSON.stringify({ Code: code }) });
|
||||
document.getElementById('mfa-area').innerHTML = `
|
||||
<div class="notice">Two-factor enabled. Save these backup codes somewhere safe — each works once if you lose access to your authenticator app.</div>
|
||||
<div class="card" style="background:var(--bg);font-family:monospace;font-size:13px;line-height:1.8">${d.backup_codes.map(esc).join('<br>')}</div>`;
|
||||
me.mfa_enabled = true;
|
||||
} catch (e) { alert('Invalid code: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
async function mfaDisableSubmit() {
|
||||
const pw = document.getElementById('mfa-disable-pw').value;
|
||||
try {
|
||||
await api('/me/mfa/disable', { method: 'POST', body: JSON.stringify({ Password: pw }) });
|
||||
me.mfa_enabled = false;
|
||||
renderMFAArea();
|
||||
} catch (e) { alert('Failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
// ── passkeys (WebAuthn) ─────────────────────────────────────────────────
|
||||
function b64urlToBuf(b64url) {
|
||||
const b64 = b64url.replace(/-/g, '+').replace(/_/g, '/');
|
||||
const pad = b64.length % 4 ? '='.repeat(4 - (b64.length % 4)) : '';
|
||||
const raw = atob(b64 + pad);
|
||||
const buf = new Uint8Array(raw.length);
|
||||
for (let i = 0; i < raw.length; i++) buf[i] = raw.charCodeAt(i);
|
||||
return buf.buffer;
|
||||
}
|
||||
function bufToB64url(buf) {
|
||||
const bytes = new Uint8Array(buf);
|
||||
let str = '';
|
||||
for (const b of bytes) str += String.fromCharCode(b);
|
||||
return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
|
||||
}
|
||||
|
||||
async function renderPasskeys() {
|
||||
const area = document.getElementById('passkeys-area');
|
||||
const list = await api('/me/passkeys') || [];
|
||||
area.innerHTML = list.length ? list.map(p => `
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)">
|
||||
<div><div style="font-size:13px">${esc(p.name)}</div><div style="color:var(--text-faint);font-size:11px">Added ${esc(formatDate(p.created_at))}</div></div>
|
||||
<button onclick="deletePasskey('${esc(p.id)}')" class="btn btn-ghost">Remove</button>
|
||||
</div>`).join('') : '<p class="hint">No passkeys registered yet.</p>';
|
||||
}
|
||||
|
||||
async function addPasskey() {
|
||||
if (!window.PublicKeyCredential) { alert('This browser does not support passkeys.'); return; }
|
||||
const name = prompt('Name this passkey (e.g. "YubiKey", "MacBook Touch ID"):', 'Passkey');
|
||||
if (name === null) return;
|
||||
try {
|
||||
const options = await api('/me/passkeys/register/start', { method: 'POST' });
|
||||
const credential = await navigator.credentials.create({
|
||||
publicKey: {
|
||||
rp: options.rp,
|
||||
user: { id: b64urlToBuf(options.user.id), name: options.user.name, displayName: options.user.displayName },
|
||||
challenge: b64urlToBuf(options.challenge),
|
||||
pubKeyCredParams: options.pubKeyCredParams,
|
||||
timeout: options.timeout,
|
||||
attestation: options.attestation,
|
||||
authenticatorSelection: options.authenticatorSelection,
|
||||
},
|
||||
});
|
||||
await api('/me/passkeys/register/finish', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
Challenge: options.challenge,
|
||||
Name: name || 'Passkey',
|
||||
ClientDataJSON: bufToB64url(credential.response.clientDataJSON),
|
||||
AttestationObject: bufToB64url(credential.response.attestationObject),
|
||||
}),
|
||||
});
|
||||
renderPasskeys();
|
||||
} catch (e) { alert('Failed to add passkey: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
async function deletePasskey(id) {
|
||||
try { await api('/me/passkeys/' + encodeURIComponent(id), { method: 'DELETE' }); renderPasskeys(); }
|
||||
catch (e) { alert('Failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
async function usePasskeyLogin() {
|
||||
if (!window.PublicKeyCredential) { alert('This browser does not support passkeys.'); return; }
|
||||
try {
|
||||
const options = await fetch(API + '/auth/passkey/start', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ MFAToken: pendingMFAToken }),
|
||||
}).then(r => r.json());
|
||||
if (options.error) throw new Error(options.error);
|
||||
|
||||
const assertion = await navigator.credentials.get({
|
||||
publicKey: {
|
||||
rpId: options.rpId,
|
||||
challenge: b64urlToBuf(options.challenge),
|
||||
timeout: options.timeout,
|
||||
userVerification: options.userVerification,
|
||||
allowCredentials: options.allowCredentials.map(c => ({ id: b64urlToBuf(c.id), type: c.type })),
|
||||
},
|
||||
});
|
||||
|
||||
const d = await fetch(API + '/auth/passkey/finish', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
MFAToken: pendingMFAToken,
|
||||
Challenge: options.challenge,
|
||||
CredentialID: bufToB64url(assertion.rawId),
|
||||
ClientDataJSON: bufToB64url(assertion.response.clientDataJSON),
|
||||
AuthenticatorData: bufToB64url(assertion.response.authenticatorData),
|
||||
Signature: bufToB64url(assertion.response.signature),
|
||||
}),
|
||||
}).then(r => r.json());
|
||||
if (d.error) throw new Error(d.error);
|
||||
token = d.token; localStorage.setItem('gomail_token', token);
|
||||
showApp();
|
||||
} catch (e) {
|
||||
const el = document.getElementById('mfaerr'); el.textContent = e.message || 'Passkey login failed'; el.style.display = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function saveRecoveryEmail() {
|
||||
const v = document.getElementById('recovery-email-input').value;
|
||||
try { await api('/me/recovery-email', { method: 'POST', body: JSON.stringify({ RecoveryEmail: v }) }); }
|
||||
catch (e) { alert('Failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
async function renderAppPasswords() {
|
||||
const area = document.getElementById('app-passwords-area');
|
||||
const list = await api('/me/app-passwords') || [];
|
||||
area.innerHTML = list.length ? list.map(e => `
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)">
|
||||
<div><div style="font-size:13px">${esc(e.Label)}</div><div style="color:var(--text-faint);font-size:11px">Scopes: ${esc(e.Scopes)}</div></div>
|
||||
<button onclick="deleteAppPassword('${esc(e.ID)}')" class="btn btn-ghost">Revoke</button>
|
||||
</div>`).join('') : '<p class="hint">No app passwords yet.</p>';
|
||||
}
|
||||
|
||||
async function createAppPassword() {
|
||||
const label = document.getElementById('app-pw-label').value;
|
||||
if (!label) return;
|
||||
try {
|
||||
const d = await api('/me/app-passwords', { method: 'POST', body: JSON.stringify({ Label: label }) });
|
||||
document.getElementById('app-passwords-area').insertAdjacentHTML('afterbegin',
|
||||
`<div class="notice">Copy this now, it won't be shown again: <strong>${esc(d.token)}</strong></div>`);
|
||||
document.getElementById('app-pw-label').value = '';
|
||||
renderAppPasswords();
|
||||
} catch (e) { alert('Failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
async function deleteAppPassword(id) {
|
||||
try { await api('/me/app-passwords/' + id, { method: 'DELETE' }); renderAppPasswords(); }
|
||||
catch (e) { alert('Failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
function renderLinkedAccountsSettings() {
|
||||
const linked = accounts.filter(a => a.id);
|
||||
document.getElementById('linked-accounts-area').innerHTML = linked.length ? linked.map(a => `
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)">
|
||||
<div><div style="font-size:13px">${esc(a.label)}</div><div style="color:var(--text-faint);font-size:11px">${esc(a.provider)}</div></div>
|
||||
<button onclick="unlinkAccount('${esc(a.id)}')" class="btn btn-ghost">Unlink</button>
|
||||
</div>`).join('') : '<p class="hint">No linked accounts yet.</p>';
|
||||
}
|
||||
|
||||
async function unlinkAccount(id) {
|
||||
try { await api('/accounts/' + id, { method: 'DELETE' }); await loadAccounts(); renderLinkedAccountsSettings(); }
|
||||
catch (e) { alert('Failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
async function startOAuth(provider) {
|
||||
try {
|
||||
const d = await api('/accounts/oauth/' + provider + '/start');
|
||||
window.location.href = d.auth_url;
|
||||
} catch (e) { alert(e.error || ('Failed to start ' + provider + ' linking')); }
|
||||
}
|
||||
|
||||
function toggleImapForm() {
|
||||
const el = document.getElementById('imap-form');
|
||||
el.style.display = el.style.display === 'none' ? '' : 'none';
|
||||
}
|
||||
|
||||
async function submitImapAccount() {
|
||||
const req = {
|
||||
Email: document.getElementById('imap-email').value,
|
||||
Password: document.getElementById('imap-password').value,
|
||||
IMAPHost: document.getElementById('imap-host').value,
|
||||
IMAPPort: parseInt(document.getElementById('imap-port').value, 10) || 993,
|
||||
IMAPTLS: 'implicit',
|
||||
SMTPHost: document.getElementById('smtp-host').value,
|
||||
SMTPPort: parseInt(document.getElementById('smtp-port').value, 10) || 465,
|
||||
SMTPTLS: 'implicit',
|
||||
};
|
||||
try {
|
||||
await api('/accounts/imap', { method: 'POST', body: JSON.stringify(req) });
|
||||
toggleImapForm();
|
||||
await loadAccounts();
|
||||
renderLinkedAccountsSettings();
|
||||
} catch (e) { alert('Failed: ' + (e.error || e.message)); }
|
||||
}
|
||||
|
||||
boot();
|
||||
+158
-164
@@ -4,73 +4,187 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GoMail</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body{background:#0f172a;color:#e2e8f0;font-family:system-ui,-apple-system,sans-serif;margin:0}
|
||||
.sidebar{width:220px;background:#1e293b;border-right:1px solid #334155;min-height:100vh;position:fixed;top:0;left:0;bottom:0}
|
||||
.main{margin-left:220px;display:flex;min-height:100vh}
|
||||
.msg-list{width:340px;border-right:1px solid #334155;overflow-y:auto}
|
||||
.msg-view{flex:1;padding:24px;overflow-y:auto}
|
||||
.nav-item{padding:9px 16px;cursor:pointer;font-size:13px;color:#94a3b8;border-radius:8px;margin:2px 8px}
|
||||
.nav-item:hover{background:#334155}
|
||||
.nav-item.active{background:#7c3aed22;color:#a78bfa}
|
||||
.msg-row{padding:12px 16px;border-bottom:1px solid #1e293b;cursor:pointer;font-size:13px}
|
||||
.msg-row:hover{background:#1e293b80}
|
||||
.msg-row.unread{font-weight:600}
|
||||
.btn{padding:7px 14px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;border:none}
|
||||
.btn-primary{background:#7c3aed;color:#fff}
|
||||
.btn-ghost{background:transparent;color:#94a3b8;border:1px solid #334155}
|
||||
.inp{background:#0f172a;border:1px solid #334155;border-radius:7px;padding:8px 12px;color:#e2e8f0;font-size:13px;width:100%}
|
||||
:root{
|
||||
--bg:#12141c;
|
||||
--surface:#1a1d29;
|
||||
--surface-2:#20232f;
|
||||
--border:#2a2e3d;
|
||||
--text:#e8e6e1;
|
||||
--text-muted:#8b8d98;
|
||||
--text-faint:#5b5e6b;
|
||||
--accent:#d9a441;
|
||||
--accent-dim:#d9a44122;
|
||||
--accent-text:#f0c878;
|
||||
--danger:#e2685a;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;margin:0;font-size:14px}
|
||||
.serif{font-family:'Source Serif 4',Georgia,serif}
|
||||
::selection{background:var(--accent-dim)}
|
||||
::-webkit-scrollbar{width:10px;height:10px}
|
||||
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
|
||||
::-webkit-scrollbar-track{background:transparent}
|
||||
a{color:inherit}
|
||||
|
||||
/* ── layout shell ────────────────────────────────────────────── */
|
||||
.app-shell{display:flex;height:100vh;overflow:hidden}
|
||||
.rail{width:250px;flex:none;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
|
||||
.rail-header{padding:18px 16px 10px;display:flex;align-items:center;gap:8px}
|
||||
.rail-brand{font-weight:700;font-size:16px;letter-spacing:.01em}
|
||||
.rail-body{flex:1;overflow-y:auto;padding:4px 8px}
|
||||
.rail-footer{padding:10px 12px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
||||
.workspace{flex:1;display:flex;min-width:0}
|
||||
|
||||
/* ── nav rows (accounts + folders) ──────────────────────────────── */
|
||||
.section-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:14px 10px 6px}
|
||||
.nav-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--text-muted);font-size:13px}
|
||||
.nav-row:hover{background:var(--surface-2)}
|
||||
.nav-row.active{background:var(--accent-dim);color:var(--accent-text)}
|
||||
.seal{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}
|
||||
.nav-row.active .seal{background:var(--accent);color:#1a1206;border-color:var(--accent)}
|
||||
.nav-row-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.count-badge{font-size:11px;color:var(--text-faint);min-width:16px;text-align:right}
|
||||
.nav-row.active .count-badge{color:var(--accent-text)}
|
||||
|
||||
/* ── message list pane ──────────────────────────────────────────── */
|
||||
.list-pane{width:360px;flex:none;border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
|
||||
.list-toolbar{padding:12px;border-bottom:1px solid var(--border)}
|
||||
.list-title{font-weight:700;font-size:15px;margin-bottom:8px}
|
||||
.msg-list{flex:1;overflow-y:auto}
|
||||
.msg-row{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer}
|
||||
.msg-row:hover{background:var(--surface)}
|
||||
.msg-row.selected{background:var(--accent-dim)}
|
||||
.msg-row .msg-from{display:flex;align-items:center;gap:6px;color:var(--text);font-size:13px}
|
||||
.msg-row.unread .msg-from{font-weight:700}
|
||||
.msg-row .msg-subject{color:var(--text-muted);font-size:13px;margin-top:2px;font-family:'Source Serif 4',Georgia,serif}
|
||||
.msg-row .msg-meta{color:var(--text-faint);font-size:11px;margin-top:4px;display:flex;gap:6px;align-items:center}
|
||||
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
|
||||
.chip{font-size:10px;padding:1px 7px;border-radius:9px;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}
|
||||
|
||||
/* ── reading pane ────────────────────────────────────────────────── */
|
||||
.reading-pane{flex:1;overflow-y:auto;padding:28px 32px;min-width:0}
|
||||
.reading-empty{color:var(--text-faint);text-align:center;margin-top:80px}
|
||||
.reading-subject{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:21px;color:#fff}
|
||||
.reading-meta{color:var(--text-muted);font-size:13px;margin-top:6px;line-height:1.6}
|
||||
.reading-body{white-space:pre-wrap;font-family:inherit;color:#d4d2ce;font-size:13.5px;line-height:1.6;margin-top:20px}
|
||||
|
||||
/* ── generic controls ────────────────────────────────────────────── */
|
||||
.btn{padding:8px 15px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:filter .12s}
|
||||
.btn:hover{filter:brightness(1.1)}
|
||||
.btn-primary{background:var(--accent);color:#1a1206}
|
||||
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
|
||||
.btn-danger{background:transparent;color:var(--danger);border:1px solid #e2685a44}
|
||||
.btn:focus-visible,.inp:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
|
||||
.inp{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:13px;width:100%}
|
||||
.inp::placeholder{color:var(--text-faint)}
|
||||
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px}
|
||||
.view-single{flex:1;overflow-y:auto;padding:28px 32px}
|
||||
.modal-bg{position:fixed;inset:0;background:#00000088;z-index:50;display:flex;align-items:center;justify-content:center}
|
||||
.modal{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:24px;width:560px;max-width:95vw}
|
||||
.badge{padding:2px 8px;border-radius:10px;font-size:11px}
|
||||
.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;width:560px;max-width:95vw;max-height:88vh;overflow-y:auto}
|
||||
.label{font-size:12px;color:var(--text-muted);margin-bottom:4px;display:block}
|
||||
.field{margin-bottom:12px}
|
||||
.notice{background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent-text);border-radius:8px;padding:10px 12px;font-size:12px;margin-bottom:12px}
|
||||
.settings-section{margin-bottom:22px}
|
||||
.settings-section h3{font-family:'Source Serif 4',Georgia,serif;font-size:17px;margin:0 0 4px}
|
||||
.settings-section p.hint{color:var(--text-muted);font-size:12px;margin:0 0 12px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="login" style="display:none;min-height:100vh;align-items:center;justify-content:center" class="flex">
|
||||
<div style="background:#1e293b;border:1px solid #334155;border-radius:14px;padding:28px;width:320px">
|
||||
<div style="text-align:center;margin-bottom:20px"><div style="font-size:2.5rem">📧</div>
|
||||
<h1 style="font-weight:700;color:#fff">GoMail</h1></div>
|
||||
<input id="le" class="inp" placeholder="you@example.com" style="margin-bottom:10px">
|
||||
<input id="lp" type="password" class="inp" placeholder="Password" style="margin-bottom:10px" onkeydown="if(event.key==='Enter')login()">
|
||||
<div class="card" style="width:320px">
|
||||
<div style="text-align:center;margin-bottom:20px">
|
||||
<div class="seal" style="width:44px;height:44px;font-size:18px;margin:0 auto 10px;background:var(--accent);color:#1a1206;border:none">G</div>
|
||||
<h1 class="serif" style="font-weight:700;color:#fff;font-size:22px;margin:0">GoMail</h1>
|
||||
</div>
|
||||
<div class="field"><input id="le" class="inp" placeholder="you@example.com"></div>
|
||||
<div class="field"><input id="lp" type="password" class="inp" placeholder="Password" onkeydown="if(event.key==='Enter')login()"></div>
|
||||
<button onclick="login()" class="btn btn-primary" style="width:100%">Sign in</button>
|
||||
<p id="lerr" style="display:none;color:#f87171;font-size:12px;text-align:center;margin-top:10px"></p>
|
||||
<p id="lerr" style="display:none;color:var(--danger);font-size:12px;text-align:center;margin-top:10px"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app" style="display:none">
|
||||
<aside class="sidebar">
|
||||
<div style="padding:16px;border-bottom:1px solid #334155;font-weight:700;color:#fff">📧 GoMail</div>
|
||||
<div style="padding:12px 8px">
|
||||
<button onclick="openCompose()" class="btn btn-primary" style="width:100%;margin-bottom:12px">✎ Compose</button>
|
||||
<div id="folder-list"></div>
|
||||
<div class="nav-item" onclick="showQuarantine()" id="nav-quarantine" style="margin-top:8px">🔒 Quarantine</div>
|
||||
<div id="mfa-login" style="display:none;min-height:100vh;align-items:center;justify-content:center" class="flex">
|
||||
<div class="card" style="width:320px">
|
||||
<h1 class="serif" style="font-weight:700;color:#fff;font-size:18px;margin:0 0 4px">Two-factor code</h1>
|
||||
<p class="hint" style="color:var(--text-muted);font-size:12px;margin:0 0 14px">Enter a code from your authenticator app, or a backup code.</p>
|
||||
<div class="field"><input id="mfa-code" class="inp" placeholder="123456" onkeydown="if(event.key==='Enter')mfaVerifyLogin()"></div>
|
||||
<button onclick="mfaVerifyLogin()" class="btn btn-primary" style="width:100%">Verify</button>
|
||||
<button onclick="usePasskeyLogin()" class="btn btn-ghost" style="width:100%;margin-top:8px">Use a passkey instead</button>
|
||||
<p id="mfaerr" style="display:none;color:var(--danger);font-size:12px;text-align:center;margin-top:10px"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app" style="display:none" class="app-shell">
|
||||
<aside class="rail">
|
||||
<div class="rail-header">
|
||||
<div class="seal" style="background:var(--accent);color:#1a1206;border:none">G</div>
|
||||
<div class="rail-brand serif">GoMail</div>
|
||||
</div>
|
||||
<div style="position:absolute;bottom:0;padding:12px;border-top:1px solid #334155;width:100%;box-sizing:border-box">
|
||||
<span id="me-email" style="font-size:12px;color:#64748b"></span>
|
||||
<button onclick="logout()" style="float:right;font-size:11px;color:#475569;background:none;border:none;cursor:pointer">Logout</button>
|
||||
<div style="padding:0 12px 8px">
|
||||
<button onclick="openCompose()" class="btn btn-primary" style="width:100%">✎ Compose</button>
|
||||
</div>
|
||||
<div class="rail-body">
|
||||
<div class="section-label">Accounts</div>
|
||||
<div id="account-switcher"></div>
|
||||
<div id="folder-section">
|
||||
<div class="section-label">Folders</div>
|
||||
<div id="folder-list"></div>
|
||||
</div>
|
||||
<div class="section-label"> </div>
|
||||
<div class="nav-row" onclick="showQuarantine()" id="nav-quarantine">
|
||||
<div class="seal">🔒</div><div class="nav-row-label">Quarantine</div>
|
||||
</div>
|
||||
<div class="nav-row" onclick="showSettings()" id="nav-settings">
|
||||
<div class="seal">⚙</div><div class="nav-row-label">Settings</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rail-footer">
|
||||
<span id="me-email" style="font-size:12px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
|
||||
<button onclick="logout()" style="font-size:11px;color:var(--text-faint);background:none;border:none;cursor:pointer;flex:none">Sign out</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div id="view-mail" style="display:flex;flex:1">
|
||||
<div class="msg-list" id="msg-list"></div>
|
||||
<div class="msg-view" id="msg-view"><div style="color:#475569;text-align:center;margin-top:60px">Select a message</div></div>
|
||||
<main class="workspace">
|
||||
<div id="view-mail" style="display:flex;flex:1;min-width:0">
|
||||
<section class="list-pane">
|
||||
<div class="list-toolbar">
|
||||
<div class="list-title" id="list-title">Inbox</div>
|
||||
<input id="search-box" class="inp" placeholder="Search this account…" oninput="onSearchInput(this.value)">
|
||||
<div id="search-body-toggle" style="display:none;margin-top:6px">
|
||||
<a href="#" onclick="event.preventDefault();runSearch(true)" style="font-size:11px;color:var(--text-muted)">Search message bodies too (slower)</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-list" id="msg-list"></div>
|
||||
</section>
|
||||
<section class="reading-pane" id="msg-view"><div class="reading-empty">Select a message</div></section>
|
||||
</div>
|
||||
<div id="view-quarantine" style="display:none;flex:1;padding:24px">
|
||||
<h2 style="color:#fff;font-weight:700;margin-bottom:16px">Quarantine</h2>
|
||||
<div id="view-quarantine" class="view-single" style="display:none">
|
||||
<h2 class="serif" style="font-weight:700;margin-bottom:16px">Quarantine</h2>
|
||||
<div id="quarantine-list"></div>
|
||||
</div>
|
||||
<div id="view-settings" class="view-single" style="display:none">
|
||||
<h2 class="serif" style="font-weight:700;margin-bottom:20px">Settings</h2>
|
||||
<div id="settings-body"></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="compose-modal" class="modal-bg" style="display:none">
|
||||
<div class="modal">
|
||||
<h3 style="color:#fff;font-weight:700;margin-bottom:16px">New Message</h3>
|
||||
<input id="c-to" class="inp" placeholder="To" style="margin-bottom:8px">
|
||||
<input id="c-subject" class="inp" placeholder="Subject" style="margin-bottom:8px">
|
||||
<textarea id="c-body" class="inp" rows="8" placeholder="Message..." style="margin-bottom:12px"></textarea>
|
||||
<h3 class="serif" style="font-weight:700;margin-bottom:16px">New message</h3>
|
||||
<div class="field">
|
||||
<label class="label">From</label>
|
||||
<select id="c-from" class="inp"></select>
|
||||
</div>
|
||||
<div class="field"><input id="c-to" class="inp" placeholder="To"></div>
|
||||
<div class="field"><input id="c-subject" class="inp" placeholder="Subject"></div>
|
||||
<div class="field"><textarea id="c-body" class="inp" rows="8" placeholder="Write something…"></textarea></div>
|
||||
<div style="display:flex;gap:8px;justify-content:flex-end">
|
||||
<button onclick="closeCompose()" class="btn btn-ghost">Cancel</button>
|
||||
<button onclick="sendMessage()" class="btn btn-primary">Send</button>
|
||||
@@ -78,126 +192,6 @@ body{background:#0f172a;color:#e2e8f0;font-family:system-ui,-apple-system,sans-s
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API='/api';
|
||||
let token=localStorage.getItem('gomail_token')||'';
|
||||
let currentFolder='INBOX';
|
||||
|
||||
async function api(path,opts={}){
|
||||
const r=await fetch(API+path,{...opts,headers:{'Content-Type':'application/json','Authorization':'Bearer '+token,...(opts.headers||{})}});
|
||||
if(r.status===401){showLogin();return null;}
|
||||
return r.ok?r.json():Promise.reject(await r.json());
|
||||
}
|
||||
|
||||
async function login(){
|
||||
const email=document.getElementById('le').value,pwd=document.getElementById('lp').value;
|
||||
try{
|
||||
const d=await fetch(API+'/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({Email:email,Password:pwd})}).then(r=>r.json());
|
||||
if(d.error)throw new Error(d.error);
|
||||
token=d.token;localStorage.setItem('gomail_token',token);
|
||||
showApp();
|
||||
}catch(e){const el=document.getElementById('lerr');el.textContent=e.message||'Login failed';el.style.display='';}
|
||||
}
|
||||
function logout(){localStorage.removeItem('gomail_token');token='';showLogin();}
|
||||
function showLogin(){document.getElementById('login').style.display='flex';document.getElementById('app').style.display='none';}
|
||||
async function showApp(){
|
||||
document.getElementById('login').style.display='none';document.getElementById('app').style.display='block';
|
||||
const me=await api('/me');if(!me)return;
|
||||
document.getElementById('me-email').textContent=me.email;
|
||||
loadFolders();
|
||||
}
|
||||
|
||||
async function loadFolders(){
|
||||
const folders=await api('/folders');if(!folders)return;
|
||||
document.getElementById('folder-list').innerHTML=folders.map(f=>
|
||||
`<div class="nav-item ${f.id===currentFolder?'active':''}" onclick="selectFolder('${f.id}')">
|
||||
${f.display_name} ${f.unread_count>0?`<span class="badge" style="background:#7c3aed;color:#fff">${f.unread_count}</span>`:''}
|
||||
</div>`).join('');
|
||||
loadMessages(currentFolder);
|
||||
}
|
||||
|
||||
function selectFolder(id){
|
||||
currentFolder=id;
|
||||
document.getElementById('view-mail').style.display='flex';
|
||||
document.getElementById('view-quarantine').style.display='none';
|
||||
loadFolders();
|
||||
}
|
||||
|
||||
async function loadMessages(folderID){
|
||||
const msgs=await api('/folders/'+folderID+'/messages');if(!msgs)return;
|
||||
document.getElementById('msg-list').innerHTML=msgs.length?msgs.map(m=>{
|
||||
const unread=!(m.Flags||[]).includes('\\Seen');
|
||||
return `<div class="msg-row ${unread?'unread':''}" onclick="viewMessage('${folderID}','${m.ID}')">
|
||||
<div style="color:#e2e8f0">${esc(m.From||'(unknown)')}</div>
|
||||
<div style="color:#94a3b8">${esc(m.Subject||'(no subject)')}</div>
|
||||
</div>`;
|
||||
}).join(''):'<div style="padding:20px;color:#475569;text-align:center">No messages</div>';
|
||||
}
|
||||
|
||||
async function viewMessage(folderID,id){
|
||||
const msg=await api('/messages/'+folderID+'/'+id);if(!msg)return;
|
||||
document.getElementById('msg-view').innerHTML=`
|
||||
<div style="border-bottom:1px solid #334155;padding-bottom:12px;margin-bottom:12px">
|
||||
<div style="font-size:18px;font-weight:700;color:#fff">${esc(msg.Subject||'(no subject)')}</div>
|
||||
<div style="color:#94a3b8;font-size:13px;margin-top:4px">From: ${esc(msg.From)}</div>
|
||||
<div style="color:#94a3b8;font-size:13px">To: ${esc(msg.To)}</div>
|
||||
</div>
|
||||
<pre style="white-space:pre-wrap;font-family:inherit;color:#cbd5e1;font-size:13px">${esc(bodyOf(msg.Raw))}</pre>
|
||||
<div style="margin-top:16px">
|
||||
<button onclick="deleteMessage('${folderID}','${id}')" class="btn btn-ghost">🗑 Delete</button>
|
||||
</div>`;
|
||||
api('/messages/'+folderID+'/'+id+'/flags',{method:'PUT',body:JSON.stringify({Flags:['\\Seen']})});
|
||||
}
|
||||
|
||||
function bodyOf(raw){
|
||||
if(!raw)return'';
|
||||
const decoded=atob(raw);
|
||||
const idx=decoded.indexOf('\r\n\r\n');
|
||||
return idx>=0?decoded.slice(idx+4):decoded;
|
||||
}
|
||||
|
||||
async function deleteMessage(folderID,id){
|
||||
await api('/messages/'+folderID+'/'+id,{method:'DELETE'});
|
||||
loadMessages(folderID);
|
||||
document.getElementById('msg-view').innerHTML='<div style="color:#475569;text-align:center;margin-top:60px">Select a message</div>';
|
||||
}
|
||||
|
||||
function openCompose(){document.getElementById('compose-modal').style.display='flex';}
|
||||
function closeCompose(){document.getElementById('compose-modal').style.display='none';}
|
||||
async function sendMessage(){
|
||||
const to=document.getElementById('c-to').value.split(',').map(s=>s.trim());
|
||||
const subject=document.getElementById('c-subject').value;
|
||||
const body=document.getElementById('c-body').value;
|
||||
try{
|
||||
await api('/messages',{method:'POST',body:JSON.stringify({to,subject,body})});
|
||||
closeCompose();
|
||||
document.getElementById('c-to').value='';document.getElementById('c-subject').value='';document.getElementById('c-body').value='';
|
||||
}catch(e){alert('Send failed: '+(e.error||e.message));}
|
||||
}
|
||||
|
||||
async function showQuarantine(){
|
||||
document.getElementById('view-mail').style.display='none';
|
||||
document.getElementById('view-quarantine').style.display='block';
|
||||
const entries=await api('/quarantine');if(!entries)return;
|
||||
document.getElementById('quarantine-list').innerHTML=entries.length?entries.map(e=>`
|
||||
<div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center">
|
||||
<div><div style="color:#e2e8f0;font-size:13px">Reason: ${esc(e.Reason||'—')}</div>
|
||||
<div style="color:#64748b;font-size:12px">Held: ${e.CreatedAt}</div></div>
|
||||
<button onclick="releaseQ('${e.ID}')" class="btn btn-primary">Release</button>
|
||||
</div>`).join(''):'<div style="color:#475569;text-align:center;padding:40px">🎉 Nothing held</div>';
|
||||
}
|
||||
async function releaseQ(id){
|
||||
try{await api('/quarantine/'+id+'/release',{method:'POST'});showQuarantine();}
|
||||
catch(e){alert('Release failed: '+(e.error||e.message));}
|
||||
}
|
||||
|
||||
function esc(s){return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');}
|
||||
|
||||
async function boot(){
|
||||
if(!token){showLogin();return;}
|
||||
try{const me=await api('/me');if(me)showApp();else showLogin();}catch{showLogin();}
|
||||
}
|
||||
boot();
|
||||
</script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user