mirror of
https://github.com/Crazyco-xyz/48hr.email.git
synced 2026-01-09 19:29:34 +01:00
[Feat]: Add expiry timer
This commit is contained in:
parent
2c7b3ead3c
commit
7ac2ef7b76
4 changed files with 105 additions and 13 deletions
|
|
@ -1,7 +1,63 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const script = document.querySelector('script[data-address]');
|
||||
const address = script ? script.dataset.address : '';
|
||||
// Get expiry config from data attributes
|
||||
const expiryTime = script && script.dataset.expiryTime ? Number(script.dataset.expiryTime) : 48;
|
||||
const expiryUnit = script && script.dataset.expiryUnit ? script.dataset.expiryUnit : 'hours';
|
||||
if (address) {
|
||||
enableNewMessageNotifications(address, true);
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
|
@ -375,7 +375,8 @@ label {
|
|||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.email-date {
|
||||
.email-date,
|
||||
.email-expiry {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
|
|
@ -389,6 +390,23 @@ label {
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
/* Subject row with right-bound expiry */
|
||||
|
||||
.email-subject-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.email-date {
|
||||
color: #666;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -448,14 +466,6 @@ label {
|
|||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.mail-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.mail-from {
|
||||
font-size: 1.5rem;
|
||||
color: #b366e6;
|
||||
|
|
@ -651,4 +661,22 @@ label {
|
|||
|
||||
.modal-button-cancel {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
|
||||
/* Copy address feedback */
|
||||
|
||||
#copyAddress {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#copyFeedback {
|
||||
display: none;
|
||||
color: #9b4cda;
|
||||
font-size: 0.9em;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.email-expiry .expiry-timer[style*="color: #b00"] {
|
||||
color: #b00 !important;
|
||||
}
|
||||
|
|
@ -56,7 +56,9 @@ router.get('^/:address([^@/]+@[^@/]+)', sanitizeAddress, checkLockAccess, async(
|
|||
unlockError: unlockErrorSession,
|
||||
locktimer: config.lock.releaseHours,
|
||||
error: lockError,
|
||||
redirectTo: req.originalUrl
|
||||
redirectTo: req.originalUrl,
|
||||
expiryTime: config.email.purgeTime.time,
|
||||
expiryUnit: config.email.purgeTime.unit
|
||||
})
|
||||
} catch (error) {
|
||||
debug(`Error loading inbox for ${req.params.address}:`, error.message)
|
||||
|
|
|
|||
|
|
@ -21,11 +21,12 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<script src="/javascripts/inbox-init.js" defer data-address="{{ address }}"></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">{{ address }}</h1>
|
||||
<h1 class="inbox-title" id="copyAddress" title="Click to copy address">{{ address }}</h1>
|
||||
<span id="copyFeedback">Copied!</span>
|
||||
</div>
|
||||
|
||||
<div class="emails-container">
|
||||
|
|
@ -39,7 +40,12 @@
|
|||
</div>
|
||||
<div class="email-date">{{ mail.date | date }}</div>
|
||||
</div>
|
||||
<div class="email-subject">{{ mail.subject }}</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('Y-m-d\TH:i:s\Z') }}">Expires in ...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue