mirror of
https://github.com/Crazyco-xyz/48hr.email.git
synced 2026-02-14 17:19:35 +01:00
Compare commits
No commits in common. "093a358f05c5bf8a6cfd6adc03001cb678c8642f" and "7ac2ef7b76bc98a6922fc22342e09e7b47f54796" have entirely different histories.
093a358f05
...
7ac2ef7b76
9 changed files with 224 additions and 367 deletions
|
|
@ -344,14 +344,7 @@ class ImapService extends EventEmitter {
|
|||
} catch {
|
||||
// Do nothing
|
||||
}
|
||||
const rawDate = headerPart.date && headerPart.date[0] ? headerPart.date[0] : undefined
|
||||
let date
|
||||
if (rawDate) {
|
||||
const m = moment.parseZone(rawDate)
|
||||
date = m.toDate()
|
||||
} else {
|
||||
date = new Date()
|
||||
}
|
||||
const date = headerPart.date[0]
|
||||
const { uid } = message.attributes
|
||||
|
||||
return Mail.create(to, from, date, subject, uid)
|
||||
|
|
|
|||
|
|
@ -8,11 +8,56 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
enableNewMessageNotifications(address, true);
|
||||
}
|
||||
|
||||
// Initialize expiry timers via utils
|
||||
if (window.utils && typeof window.utils.initExpiryTimers === 'function') {
|
||||
window.utils.initExpiryTimers(expiryTime, expiryUnit);
|
||||
// Copy address on click
|
||||
const copyAddress = document.getElementById('copyAddress');
|
||||
const copyFeedback = document.getElementById('copyFeedback');
|
||||
if (copyAddress) {
|
||||
copyAddress.addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(copyAddress.textContent.trim()).then(() => {
|
||||
if (copyFeedback) {
|
||||
copyFeedback.style.display = 'inline';
|
||||
setTimeout(() => { copyFeedback.style.display = 'none'; }, 1200);
|
||||
}
|
||||
if (window.utils && typeof window.utils.formatEmailDates === 'function') {
|
||||
window.utils.formatEmailDates();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Expiry timer for each email
|
||||
function getExpiryMs(time, unit) {
|
||||
switch (unit) {
|
||||
case 'minutes':
|
||||
return time * 60 * 1000;
|
||||
case 'hours':
|
||||
return time * 60 * 60 * 1000;
|
||||
case 'days':
|
||||
return time * 24 * 60 * 60 * 1000;
|
||||
default:
|
||||
return 48 * 60 * 60 * 1000; // fallback 48h
|
||||
}
|
||||
}
|
||||
|
||||
function updateExpiryTimers() {
|
||||
const timers = document.querySelectorAll('.expiry-timer');
|
||||
timers.forEach(el => {
|
||||
const dateStr = el.dataset.date;
|
||||
if (!dateStr) return;
|
||||
const mailDate = new Date(dateStr);
|
||||
// Use config-driven expiry
|
||||
const expiry = new Date(mailDate.getTime() + getExpiryMs(expiryTime, expiryUnit));
|
||||
const now = new Date();
|
||||
let diff = Math.floor((expiry - now) / 1000);
|
||||
if (diff <= 0) {
|
||||
el.textContent = 'Expired';
|
||||
el.style.color = '#b00';
|
||||
return;
|
||||
}
|
||||
const hours = Math.floor(diff / 3600);
|
||||
diff %= 3600;
|
||||
const minutes = Math.floor(diff / 60);
|
||||
const seconds = diff % 60;
|
||||
el.textContent = `Expires in ${hours}h ${minutes}m ${seconds}s`;
|
||||
});
|
||||
}
|
||||
setInterval(updateExpiryTimers, 1000);
|
||||
updateExpiryTimers();
|
||||
});
|
||||
136
infrastructure/web/public/javascripts/lock-modals.js
Normal file
136
infrastructure/web/public/javascripts/lock-modals.js
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Lock modal elements
|
||||
const lockModal = document.getElementById('lockModal');
|
||||
const lockBtn = document.getElementById('lockBtn');
|
||||
const closeLock = document.getElementById('closeLock');
|
||||
const lockForm = document.querySelector('#lockModal form');
|
||||
|
||||
// Unlock modal elements
|
||||
const unlockModal = document.getElementById('unlockModal');
|
||||
const unlockBtn = document.getElementById('unlockBtn');
|
||||
const closeUnlock = document.getElementById('closeUnlock');
|
||||
|
||||
// Remove lock modal elements
|
||||
const removeLockModal = document.getElementById('removeLockModal');
|
||||
const removeLockBtn = document.getElementById('removeLockBtn');
|
||||
const closeRemoveLock = document.getElementById('closeRemoveLock');
|
||||
const cancelRemoveLock = document.getElementById('cancelRemoveLock');
|
||||
|
||||
// Open/close helpers
|
||||
const openModal = function(modal) { if (modal) modal.style.display = 'block'; };
|
||||
const closeModal = function(modal) { if (modal) modal.style.display = 'none'; };
|
||||
|
||||
// Protect / Lock modal logic
|
||||
if (lockBtn) {
|
||||
lockBtn.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
openModal(lockModal);
|
||||
};
|
||||
}
|
||||
if (closeLock) {
|
||||
closeLock.onclick = function() {
|
||||
closeModal(lockModal);
|
||||
};
|
||||
}
|
||||
|
||||
if (lockForm) {
|
||||
lockForm.addEventListener('submit', function(e) {
|
||||
const pwElement = document.getElementById('lockPassword');
|
||||
const cfElement = document.getElementById('lockConfirm');
|
||||
const pw = pwElement ? pwElement.value : '';
|
||||
const cf = cfElement ? cfElement.value : '';
|
||||
const err = document.getElementById('lockErrorInline');
|
||||
const serverErr = document.getElementById('lockServerError');
|
||||
if (serverErr) serverErr.style.display = 'none';
|
||||
|
||||
if (pw !== cf) {
|
||||
e.preventDefault();
|
||||
if (err) {
|
||||
err.textContent = 'Passwords do not match.';
|
||||
err.style.display = 'block';
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (pw.length < 8) {
|
||||
e.preventDefault();
|
||||
if (err) {
|
||||
err.textContent = 'Password must be at least 8 characters.';
|
||||
err.style.display = 'block';
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (err) err.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-open lock modal if server provided an error (via data attribute)
|
||||
if (lockModal) {
|
||||
const lockErrorValue = (lockModal.dataset.lockError || '').trim();
|
||||
if (lockErrorValue) {
|
||||
openModal(lockModal);
|
||||
const err = document.getElementById('lockErrorInline');
|
||||
const serverErr = document.getElementById('lockServerError');
|
||||
if (serverErr) serverErr.style.display = 'none';
|
||||
|
||||
if (err) {
|
||||
if (lockErrorValue === 'locking_disabled_for_example') {
|
||||
err.textContent = 'Locking is disabled for the example inbox.';
|
||||
} else if (lockErrorValue === 'invalid') {
|
||||
err.textContent = 'Please provide a valid password.';
|
||||
} else if (lockErrorValue === 'server_error') {
|
||||
err.textContent = 'A server error occurred. Please try again.';
|
||||
} else if (lockErrorValue === 'remove_failed') {
|
||||
err.textContent = 'Failed to remove lock. Please try again.';
|
||||
} else {
|
||||
err.textContent = 'An error occurred. Please try again.';
|
||||
}
|
||||
err.style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Unlock modal logic
|
||||
if (unlockBtn) {
|
||||
unlockBtn.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
openModal(unlockModal);
|
||||
};
|
||||
}
|
||||
if (closeUnlock) {
|
||||
closeUnlock.onclick = function() {
|
||||
closeModal(unlockModal);
|
||||
};
|
||||
}
|
||||
|
||||
if (unlockModal) {
|
||||
const unlockErrorValue = (unlockModal.dataset.unlockError || '').trim();
|
||||
if (unlockErrorValue) {
|
||||
openModal(unlockModal);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove lock modal logic
|
||||
if (removeLockBtn) {
|
||||
removeLockBtn.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
openModal(removeLockModal);
|
||||
};
|
||||
}
|
||||
if (closeRemoveLock) {
|
||||
closeRemoveLock.onclick = function() {
|
||||
closeModal(removeLockModal);
|
||||
};
|
||||
}
|
||||
if (cancelRemoveLock) {
|
||||
cancelRemoveLock.onclick = function() {
|
||||
closeModal(removeLockModal);
|
||||
};
|
||||
}
|
||||
|
||||
// Close modals when clicking outside
|
||||
window.onclick = function(e) {
|
||||
if (e.target === lockModal) closeModal(lockModal);
|
||||
if (e.target === unlockModal) closeModal(unlockModal);
|
||||
if (e.target === removeLockModal) closeModal(removeLockModal);
|
||||
};
|
||||
});
|
||||
|
|
@ -1,240 +0,0 @@
|
|||
// Consolidated utilities: date formatting and lock modals
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
function getExpiryMs(time, unit) {
|
||||
switch (unit) {
|
||||
case 'minutes':
|
||||
return time * 60 * 1000;
|
||||
case 'hours':
|
||||
return time * 60 * 60 * 1000;
|
||||
case 'days':
|
||||
return time * 24 * 60 * 60 * 1000;
|
||||
default:
|
||||
return 48 * 60 * 60 * 1000; // fallback 48h
|
||||
}
|
||||
}
|
||||
|
||||
function initExpiryTimers(expiryTime, expiryUnit) {
|
||||
// Cache timer elements on init instead of querying every second
|
||||
let timers = document.querySelectorAll('.expiry-timer');
|
||||
if (timers.length === 0) return; // Don't set interval if no timers exist
|
||||
|
||||
function updateExpiryTimers() {
|
||||
const now = new Date();
|
||||
timers.forEach(el => {
|
||||
const dateStr = el.dataset.date;
|
||||
if (!dateStr) return;
|
||||
const mailDate = new Date(dateStr);
|
||||
// Clamp future-dated mails to now to avoid exceeding configured expiry
|
||||
const baseMs = Math.min(mailDate.getTime(), now.getTime());
|
||||
const expiry = new Date(baseMs + getExpiryMs(expiryTime, expiryUnit));
|
||||
let diff = Math.floor((expiry - now) / 1000);
|
||||
if (diff <= 0) {
|
||||
el.textContent = 'Expired';
|
||||
el.style.color = '#b00';
|
||||
return;
|
||||
}
|
||||
const hours = Math.floor(diff / 3600);
|
||||
diff %= 3600;
|
||||
const minutes = Math.floor(diff / 60);
|
||||
const seconds = diff % 60;
|
||||
el.textContent = `Expires in ${hours}h ${minutes}m ${seconds}s`;
|
||||
});
|
||||
}
|
||||
updateExpiryTimers(); // Call once immediately
|
||||
setInterval(updateExpiryTimers, 1000); // Then every second
|
||||
}
|
||||
|
||||
function formatEmailDates() {
|
||||
const dateEls = document.querySelectorAll('.email-date[data-date]');
|
||||
dateEls.forEach(el => {
|
||||
const dateStr = el.dataset.date;
|
||||
if (!dateStr) return;
|
||||
const d = new Date(dateStr);
|
||||
try {
|
||||
const formatted = d.toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
el.textContent = formatted;
|
||||
} catch (_) {
|
||||
el.textContent = d.toString();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formatMailDate() {
|
||||
const el = document.querySelector('.mail-date[data-date]');
|
||||
if (!el) return;
|
||||
const dateStr = el.dataset.date;
|
||||
if (!dateStr) return;
|
||||
const d = new Date(dateStr);
|
||||
try {
|
||||
const formatted = d.toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
el.textContent = formatted;
|
||||
} catch (_) {
|
||||
el.textContent = d.toString();
|
||||
}
|
||||
}
|
||||
|
||||
function initLockModals() {
|
||||
const lockModal = document.getElementById('lockModal');
|
||||
const lockBtn = document.getElementById('lockBtn');
|
||||
const closeLock = document.getElementById('closeLock');
|
||||
const lockForm = document.querySelector('#lockModal form');
|
||||
|
||||
const unlockModal = document.getElementById('unlockModal');
|
||||
const unlockBtn = document.getElementById('unlockBtn');
|
||||
const closeUnlock = document.getElementById('closeUnlock');
|
||||
|
||||
const removeLockModal = document.getElementById('removeLockModal');
|
||||
const removeLockBtn = document.getElementById('removeLockBtn');
|
||||
const closeRemoveLock = document.getElementById('closeRemoveLock');
|
||||
const cancelRemoveLock = document.getElementById('cancelRemoveLock');
|
||||
|
||||
const openModal = function(modal) { if (modal) modal.style.display = 'block'; };
|
||||
const closeModal = function(modal) { if (modal) modal.style.display = 'none'; };
|
||||
|
||||
if (lockBtn) {
|
||||
lockBtn.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
openModal(lockModal);
|
||||
};
|
||||
}
|
||||
if (closeLock) {
|
||||
closeLock.onclick = function() { closeModal(lockModal); };
|
||||
}
|
||||
|
||||
if (lockForm) {
|
||||
lockForm.addEventListener('submit', function(e) {
|
||||
const pwElement = document.getElementById('lockPassword');
|
||||
const cfElement = document.getElementById('lockConfirm');
|
||||
const pw = pwElement ? pwElement.value : '';
|
||||
const cf = cfElement ? cfElement.value : '';
|
||||
const err = document.getElementById('lockErrorInline');
|
||||
const serverErr = document.getElementById('lockServerError');
|
||||
if (serverErr) serverErr.style.display = 'none';
|
||||
|
||||
if (pw !== cf) {
|
||||
e.preventDefault();
|
||||
if (err) {
|
||||
err.textContent = 'Passwords do not match.';
|
||||
err.style.display = 'block';
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (pw.length < 8) {
|
||||
e.preventDefault();
|
||||
if (err) {
|
||||
err.textContent = 'Password must be at least 8 characters.';
|
||||
err.style.display = 'block';
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (err) err.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
if (lockModal) {
|
||||
const lockErrorValue = (lockModal.dataset.lockError || '').trim();
|
||||
if (lockErrorValue) {
|
||||
openModal(lockModal);
|
||||
const err = document.getElementById('lockErrorInline');
|
||||
const serverErr = document.getElementById('lockServerError');
|
||||
if (serverErr) serverErr.style.display = 'none';
|
||||
if (err) {
|
||||
if (lockErrorValue === 'locking_disabled_for_example') {
|
||||
err.textContent = 'Locking is disabled for the example inbox.';
|
||||
} else if (lockErrorValue === 'invalid_password') {
|
||||
err.textContent = 'Please provide a valid password.';
|
||||
} else if (lockErrorValue === 'server_error') {
|
||||
err.textContent = 'A server error occurred. Please try again.';
|
||||
} else if (lockErrorValue === 'remove_failed') {
|
||||
err.textContent = 'Failed to remove lock. Please try again.';
|
||||
} else {
|
||||
err.textContent = 'An error occurred. Please try again.';
|
||||
}
|
||||
err.style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (unlockBtn) {
|
||||
unlockBtn.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
openModal(unlockModal);
|
||||
};
|
||||
}
|
||||
if (closeUnlock) {
|
||||
closeUnlock.onclick = function() { closeModal(unlockModal); };
|
||||
}
|
||||
if (unlockModal) {
|
||||
const unlockErrorValue = (unlockModal.dataset.unlockError || '').trim();
|
||||
if (unlockErrorValue) { openModal(unlockModal); }
|
||||
}
|
||||
|
||||
if (removeLockBtn) {
|
||||
removeLockBtn.onclick = function(e) {
|
||||
e.preventDefault();
|
||||
openModal(removeLockModal);
|
||||
};
|
||||
}
|
||||
if (closeRemoveLock) {
|
||||
closeRemoveLock.onclick = function() { closeModal(removeLockModal); };
|
||||
}
|
||||
if (cancelRemoveLock) {
|
||||
cancelRemoveLock.onclick = function() { closeModal(removeLockModal); };
|
||||
}
|
||||
|
||||
window.onclick = function(e) {
|
||||
if (e.target === lockModal) closeModal(lockModal);
|
||||
if (e.target === unlockModal) closeModal(unlockModal);
|
||||
if (e.target === removeLockModal) closeModal(removeLockModal);
|
||||
};
|
||||
}
|
||||
|
||||
function initCopyAddress() {
|
||||
const copyAddress = document.getElementById('copyAddress');
|
||||
const copyFeedback = document.getElementById('copyFeedback');
|
||||
if (!copyAddress) return;
|
||||
copyAddress.addEventListener('click', () => {
|
||||
const text = copyAddress.textContent ? copyAddress.textContent.trim() : '';
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
if (copyFeedback) {
|
||||
copyFeedback.style.display = 'inline';
|
||||
setTimeout(() => { copyFeedback.style.display = 'none'; }, 1200);
|
||||
}
|
||||
}).catch(() => {
|
||||
// Fallback for older browsers
|
||||
try {
|
||||
const range = document.createRange();
|
||||
range.selectNode(copyAddress);
|
||||
const sel = window.getSelection();
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
document.execCommand('copy');
|
||||
sel.removeAllRanges();
|
||||
if (copyFeedback) {
|
||||
copyFeedback.style.display = 'inline';
|
||||
setTimeout(() => { copyFeedback.style.display = 'none'; }, 1200);
|
||||
}
|
||||
} catch (_) {}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Expose utilities and run them
|
||||
window.utils = { formatEmailDates, formatMailDate, initLockModals, initCopyAddress, initExpiryTimers };
|
||||
formatEmailDates();
|
||||
formatMailDate();
|
||||
initLockModals();
|
||||
initCopyAddress();
|
||||
});
|
||||
|
|
@ -6,6 +6,8 @@ body {
|
|||
flex-direction: column;
|
||||
background: linear-gradient( 135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), #131516;
|
||||
color: #cccccc;
|
||||
backdrop-filter: blur(18px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(120%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
|
@ -89,7 +91,6 @@ text-muted {
|
|||
}
|
||||
|
||||
.action-links {
|
||||
margin-bottom: 15px;
|
||||
float: right;
|
||||
justify-content: flex-end;
|
||||
/* aligns all links to the right */
|
||||
|
|
@ -108,6 +109,7 @@ text-muted {
|
|||
letter-spacing: 0.5px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
|
@ -160,6 +162,8 @@ select:hover {
|
|||
max-width: 600px;
|
||||
margin: auto;
|
||||
background: linear-gradient( 135deg, rgba(155, 77, 202, 0.12), rgba(155, 77, 202, 0.04)), rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(20px) saturate(125%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(125%);
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(155, 77, 202, 0.25);
|
||||
padding: 40px 36px;
|
||||
|
|
@ -235,6 +239,8 @@ select:hover {
|
|||
color: #fff;
|
||||
background: rgba(155, 77, 202, 0.2);
|
||||
border: 1px solid rgba(155, 77, 202, 0.35);
|
||||
backdrop-filter: blur(12px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(120%);
|
||||
box-shadow: 0 8px 20px rgba(155, 77, 202, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
|
||||
|
|
@ -313,6 +319,7 @@ label {
|
|||
}
|
||||
|
||||
.email-card {
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 24px;
|
||||
|
|
@ -409,6 +416,7 @@ label {
|
|||
|
||||
.empty-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 50px;
|
||||
|
|
@ -442,6 +450,7 @@ label {
|
|||
|
||||
.mail-header {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 30px;
|
||||
|
|
@ -471,6 +480,7 @@ label {
|
|||
|
||||
.mail-content {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
padding: 30px;
|
||||
|
|
@ -483,6 +493,7 @@ label {
|
|||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
min-height: 40vh;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.mail-text-content {
|
||||
|
|
@ -502,6 +513,7 @@ label {
|
|||
|
||||
.mail-attachments {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 25px;
|
||||
|
|
@ -668,59 +680,3 @@ label {
|
|||
.email-expiry .expiry-timer[style*="color: #b00"] {
|
||||
color: #b00 !important;
|
||||
}
|
||||
|
||||
|
||||
/* Raw mail view */
|
||||
|
||||
.raw-container {
|
||||
max-width: 1500px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.raw-mail {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
color: #e0e0e0;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
overflow-x: auto;
|
||||
font-family: Consolas, 'Courier New', monospace;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.raw-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.raw-tab-button {
|
||||
padding: 8px 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.raw-tab-button.active {
|
||||
background: rgba(155, 77, 202, 0.25);
|
||||
border-color: rgba(155, 77, 202, 0.4);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.raw-tab-button:hover {
|
||||
border-color: rgba(155, 77, 202, 0.5);
|
||||
}
|
||||
|
||||
.raw-panels {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.raw-mail.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -252,33 +252,13 @@ router.get(
|
|||
true
|
||||
)
|
||||
if (mail) {
|
||||
const decodeQuotedPrintable = (input) => {
|
||||
if (!input) return '';
|
||||
// Remove soft line breaks
|
||||
let cleaned = input.replace(/=\r?\n/g, '');
|
||||
// Decode =XX hex escapes
|
||||
cleaned = cleaned.replace(/=([0-9A-Fa-f]{2})/g, (_, hex) => {
|
||||
try {
|
||||
return String.fromCharCode(parseInt(hex, 16));
|
||||
} catch {
|
||||
return '=' + hex;
|
||||
}
|
||||
});
|
||||
return cleaned;
|
||||
};
|
||||
|
||||
const decodedMail = decodeQuotedPrintable(mail);
|
||||
|
||||
// Keep raw content but add literal newlines after <br> tags for readability
|
||||
const rawMail = mail.replace(/<br\s*\/?\s*>/gi, '<br>\n');
|
||||
|
||||
mail = mail.replace(/(?:\r\n|\r|\n)/g, '<br>')
|
||||
// Emails are immutable, cache if found
|
||||
res.set('Cache-Control', 'private, max-age=600')
|
||||
debug(`Rendering raw email view for UID ${req.params.uid}`)
|
||||
res.render('raw', {
|
||||
title: req.params.uid + " | raw | " + req.params.address,
|
||||
mail: rawMail,
|
||||
decoded: decodedMail,
|
||||
mail,
|
||||
totalcount: totalcount
|
||||
})
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<script src="/javascripts/utils.js" defer></script>
|
||||
<script src="/javascripts/inbox-init.js" defer data-address="{{ address }}" data-expiry-time="{{ expiryTime }}" data-expiry-unit="{{ expiryUnit }}"></script>
|
||||
<script src="/javascripts/lock-modals.js" defer></script>
|
||||
<div class="inbox-container">
|
||||
<div class="inbox-header">
|
||||
<h1 class="inbox-title" id="copyAddress" title="Click to copy address">{{ address }}</h1>
|
||||
|
|
@ -38,12 +38,12 @@
|
|||
<div class="sender-name">{{ mail.from[0].name }}</div>
|
||||
<div class="sender-email">{{ mail.from[0].address }}</div>
|
||||
</div>
|
||||
<div class="email-date" data-date="{{ mail.date|date('c') }}"></div>
|
||||
<div class="email-date">{{ mail.date | date }}</div>
|
||||
</div>
|
||||
<div class="email-subject-row">
|
||||
<div class="email-subject">{{ mail.subject }}</div>
|
||||
<div class="email-expiry">
|
||||
<span class="expiry-timer" data-date="{{ mail.date|date('c') }}">Expires in ...</span>
|
||||
<span class="expiry-timer" data-date="{{ mail.date|date('Y-m-d\TH:i:s\Z') }}">Expires in ...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,13 +14,12 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<script src="/javascripts/utils.js" defer></script>
|
||||
<div class="mail-container">
|
||||
<div class="mail-header">
|
||||
<h1 class="mail-subject">{{ mail.subject }}</h1>
|
||||
<div class="mail-meta">
|
||||
<div class="mail-from">From: {{ mail.from.text }}</div>
|
||||
<div class="mail-date" data-date="{{ mail.date|date('c') }}"></div>
|
||||
<div class="mail-date">{{ mail.date | date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,19 @@
|
|||
{% extends 'layout.twig' %}
|
||||
|
||||
{% block header %}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="raw-container">
|
||||
<div class="raw-tabs">
|
||||
<button class="raw-tab-button active" data-target="raw">Raw (escaped)</button>
|
||||
<button class="raw-tab-button" data-target="decoded">Decoded (quoted-printable)</button>
|
||||
</div>
|
||||
<div class="raw-panels">
|
||||
<pre class="raw-mail" data-panel="raw">{{ mail | e }}</pre>
|
||||
<pre class="raw-mail hidden" data-panel="decoded">{{ decoded | e }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const buttons = document.querySelectorAll('.raw-tab-button');
|
||||
const panels = document.querySelectorAll('.raw-mail[data-panel]');
|
||||
buttons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const target = btn.dataset.target;
|
||||
buttons.forEach(b => b.classList.toggle('active', b === btn));
|
||||
panels.forEach(p => p.classList.toggle('hidden', p.dataset.panel !== target));
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
|
||||
<meta name="darkreader-lock">
|
||||
<meta name="description" content="Dont give shady companies your real email. Use 48hr.email to protect your privacy!">
|
||||
<meta property="og:image" content="/images/logo.png">
|
||||
|
||||
{% block footer %}{% endblock %}
|
||||
<link rel="shortcut icon" href="/images/logo.ico">
|
||||
<link rel='stylesheet' href='/dependencies/milligram.css' />
|
||||
<link rel='stylesheet' href='/stylesheets/custom.css' />
|
||||
|
||||
<script src="/socket.io/socket.io.js" defer="true"></script>
|
||||
<script src="/javascripts/notifications.js" defer="true"></script>
|
||||
|
||||
</head>
|
||||
{{ mail | raw }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue