mirror of
https://github.com/Crazyco-xyz/48hr.email.git
synced 2026-01-09 11:19:36 +01:00
8ed7ccade8
- Update lock removal timer and behaviour - Redirect to previous path on sign-in and out - Fix dashbaord UI and other UX elemets - Lose sanity threlf times
211 lines
11 KiB
Twig
211 lines
11 KiB
Twig
{% extends 'layout.twig' %}
|
|
|
|
{% block header %}
|
|
<div class="action-links">
|
|
{% if currentUser %}
|
|
<!-- Inbox Dropdown (multiple actions when logged in) -->
|
|
<div class="action-dropdown">
|
|
<button class="dropdown-toggle" aria-label="Inbox actions">Inbox ▾</button>
|
|
<div class="dropdown-menu">
|
|
<a href="#" id="forwardAllBtn" aria-label="Forward all emails">Forward All</a>
|
|
{% if authEnabled %}
|
|
{% if isLocked and hasAccess %}
|
|
<a href="#" id="removeLockBtn" aria-label="Remove lock">Remove Lock</a>
|
|
{% elseif not isLocked %}
|
|
<a href="#" id="lockBtn" aria-label="Lock inbox to your account">Lock Inbox</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
<a href="/inbox/{{ address }}/delete-all" aria-label="Delete all emails">Wipe Inbox</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Dropdown (logged in) -->
|
|
{% if authEnabled %}
|
|
<div class="action-dropdown">
|
|
<button class="dropdown-toggle" aria-label="Account menu">Account ▾</button>
|
|
<div class="dropdown-menu">
|
|
<a href="/account" aria-label="Account settings">Settings</a>
|
|
<a href="/logout?redirect={{ ('/inbox/' ~ address) | url_encode }}" aria-label="Logout">Logout</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<!-- Simple buttons when not logged in -->
|
|
<a href="/inbox/{{ address }}/delete-all" aria-label="Delete all emails">Wipe Inbox</a>
|
|
{% if authEnabled %}
|
|
<a href="/auth" aria-label="Login or Register">Account</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<a href="/" aria-label="Return to home">Home</a>
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode">
|
|
<svg class="theme-icon theme-icon-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
</svg>
|
|
<svg class="theme-icon theme-icon-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<script src="/javascripts/qrcode.js"></script>
|
|
<script src="/javascripts/inbox-init.js" defer data-address="{{ address }}" data-expiry-time="{{ expiryTime }}" data-expiry-unit="{{ expiryUnit }}" data-refresh-interval="{{ refreshInterval }}"></script>
|
|
{% if forwardAllSuccess %}
|
|
<div class="success-message">
|
|
✓ Successfully forwarded {{ forwardAllSuccess }} email(s)!
|
|
</div>
|
|
{% endif %}
|
|
{% if verificationSent %}
|
|
<div class="verification-message">
|
|
📧 Verification email sent to <strong>{{ verificationEmail }}</strong>. Please check your inbox and click the verification link (expires in 15 minutes).
|
|
</div>
|
|
{% endif %}
|
|
{% if errorMessage %}
|
|
<div class="unlock-error">
|
|
{{ errorMessage }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="inbox-container">
|
|
<div class="inbox-header">
|
|
<h1 class="inbox-title" id="copyAddress" title="Click to copy address">{{ address }}</h1>
|
|
<button id="qrCodeBtn" class="qr-icon-btn" title="Show QR Code" aria-label="Show QR Code">
|
|
<svg class="qr-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<rect x="3" y="3" width="7" height="7"/>
|
|
<rect x="14" y="3" width="7" height="7"/>
|
|
<rect x="14" y="14" width="7" height="7"/>
|
|
<rect x="3" y="14" width="7" height="7"/>
|
|
</svg>
|
|
</button>
|
|
<span id="copyFeedback">Copied!</span>
|
|
</div>
|
|
|
|
<div class="emails-container">
|
|
{% for mail in mailSummaries %}
|
|
<a href="{{ mail.to[0] }}/{{ mail.uid }}" class="email-link">
|
|
<div class="email-card">
|
|
<div class="email-header">
|
|
<div class="email-sender">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
|
|
{% if not mailSummaries %}
|
|
<blockquote>
|
|
There are no mails yet.
|
|
</blockquote>
|
|
{% endif %}
|
|
<div class="refresh-countdown" id="refreshCountdown" title="New emails are fetched from the server only when the timer hits zero. Reloading this page has no effect on fetching.">Fetching new mails in <span id="refreshTimer">--</span>s</div>
|
|
{% if authEnabled and not isLocked %}
|
|
<!-- Lock Modal -->
|
|
<div id="lockModal" class="modal" style="display: none;" data-lock-error="{{ error|default('') }}">
|
|
<div class="modal-content">
|
|
<span class="close" id="closeLock">×</span>
|
|
<h3>Lock Inbox</h3>
|
|
<p class="modal-description">Lock this inbox to your account. Only you will be able to access it while logged in.</p>
|
|
{% if error and error == 'locking_disabled_for_example' %}
|
|
<p id="lockServerError" class="unlock-error">Locking is disabled for the example inbox.</p>
|
|
{% elseif error and error == 'max_locked_inboxes' %}
|
|
<p id="lockServerError" class="unlock-error">You have reached the maximum of 5 locked inboxes. Please remove a lock before adding a new one.</p>
|
|
{% elseif error and error == 'already_locked' %}
|
|
<p id="lockServerError" class="unlock-error">This inbox is already locked by another user.</p>
|
|
{% elseif error and error == 'not_your_lock' %}
|
|
<p id="lockServerError" class="unlock-error">You don't own the lock on this inbox.</p>
|
|
{% endif %}
|
|
<p id="lockErrorInline" class="unlock-error" style="display:none"></p>
|
|
<form method="POST" action="/lock/lock">
|
|
<input type="hidden" name="address" value="{{ address }}">
|
|
<fieldset>
|
|
<p>This inbox will be protected with your account. Only you will be able to access it while logged in.</p>
|
|
<button type="submit" class="button-primary modal-button">Lock Inbox</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
{% if authEnabled and isLocked and hasAccess %}
|
|
<!-- Remove Lock Modal -->
|
|
<div id="removeLockModal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<span class="close" id="closeRemoveLock">×</span>
|
|
<h3>Remove Lock</h3>
|
|
<p class="modal-description">Are you sure you want to remove the lock from this inbox? Anyone will be able to access it.</p>
|
|
<form method="POST" action="/lock/remove">
|
|
<input type="hidden" name="address" value="{{ address }}">
|
|
<fieldset>
|
|
<button type="submit" class="button-primary modal-button modal-button-danger">Remove Lock</button>
|
|
<button type="button" class="button modal-button modal-button-cancel" id="cancelRemoveLock">Cancel</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{# JS handled in /javascripts/lock-modals.js #}
|
|
{% endif %}
|
|
|
|
<!-- QR Code Modal -->
|
|
<div id="qrModal" class="modal">
|
|
<div class="modal-content qr-modal-content">
|
|
<span class="close" id="closeQr">×</span>
|
|
<h3>Scan Email Address</h3>
|
|
<div id="qrcode" class="qr-code-container"></div>
|
|
<p class="qr-address-label">{{ address }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Forward All Modal -->
|
|
<div id="forwardAllModal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<span class="close" id="closeForwardAll">×</span>
|
|
<h3>Forward All Emails</h3>
|
|
|
|
{% if not currentUser %}
|
|
<p class="modal-description auth-required">
|
|
<strong>Login required:</strong> You must be logged in to forward emails.
|
|
</p>
|
|
<div class="auth-prompt">
|
|
<a href="/auth?redirect={{ ('/inbox/' ~ address)|url_encode }}" class="button button-primary">Login or Register</a>
|
|
</div>
|
|
{% elseif userForwardEmails|length == 0 %}
|
|
<p class="modal-description">You don't have any verified forwarding emails yet.</p>
|
|
<p class="modal-description">Add a verified email address in your account settings to enable forwarding.</p>
|
|
<a href="/account" class="button button-primary">Go to Account Settings</a>
|
|
{% else %}
|
|
<p class="modal-description">Select a verified email address to forward all emails to. Limited to 25 emails maximum.</p>
|
|
{% if mailSummaries|length > 0 %}
|
|
<p class="modal-info">You have {{ mailSummaries|length }} email(s) in this inbox.</p>
|
|
{% endif %}
|
|
<p id="forwardAllError" class="unlock-error" style="display:none"></p>
|
|
<form method="POST" action="/inbox/{{ address }}/forward-all">
|
|
<fieldset>
|
|
<label for="forwardAllEmail" class="floating-label">Forward to</label>
|
|
<select id="forwardAllEmail" name="destinationEmail" required class="modal-input">
|
|
<option value="">Select an email...</option>
|
|
{% for email in userForwardEmails %}
|
|
<option value="{{ email.email }}">{{ email.email }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<small class="form-hint">Manage emails in <a href="/account">Account Settings</a></small>
|
|
<button type="submit" class="button-primary modal-button">Forward All</button>
|
|
</fieldset>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|