mirror of
https://github.com/Crazyco-xyz/48hr.email.git
synced 2026-01-09 11:19:36 +01:00
259 lines
12 KiB
Twig
259 lines
12 KiB
Twig
{% extends 'layout.twig' %}
|
|
|
|
{% block header %}
|
|
<div class="action-links">
|
|
<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 %}
|
|
<div id="account" class="account-container">
|
|
<h1 class="page-title">Account Dashboard</h1>
|
|
<p class="account-subtitle">Welcome back, <strong>{{ username }}</strong></p>
|
|
<p class="account-subtitle">Welcome back, <strong>{{ username|sanitizeHtml }}</strong></p>
|
|
|
|
{% if successMessage %}
|
|
<div class="alert alert-success">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline;vertical-align:middle;margin-right:0.5rem">
|
|
<path d="M20 6L9 17l-5-5"></path>
|
|
</svg>
|
|
<p>{{ successMessage|sanitizeHtml }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if errorMessage %}
|
|
<div class="alert alert-error">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline;vertical-align:middle;margin-right:0.5rem">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="15" y1="9" x2="9" y2="15"></line>
|
|
<line x1="9" y1="9" x2="15" y2="15"></line>
|
|
</svg>
|
|
<p>{{ errorMessage|sanitizeHtml }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="account-grid">
|
|
<!-- Account Stats -->
|
|
<div class="account-card frosted-glass">
|
|
<h2>Account Overview</h2>
|
|
<div class="stats-grid">
|
|
{% if smtpEnabled %}
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ stats.forwardEmailsCount }}/{{ stats.maxForwardEmails }}</div>
|
|
<div class="stat-label">Forward Emails</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ stats.lockedInboxesCount }}/{{ stats.maxLockedInboxes }}</div>
|
|
<div class="stat-label">Locked Inboxes</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ stats.accountAge }}</div>
|
|
<div class="stat-label">Account Age</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if smtpEnabled %}
|
|
<!-- Forwarding Emails Section -->
|
|
<div class="account-card frosted-glass">
|
|
<h2>Forwarding Emails</h2>
|
|
<p class="card-description">Add verified emails to forward messages to. Each email must be verified before use.</p>
|
|
|
|
{% if forwardEmails|length > 0 %}
|
|
<ul class="email-list">
|
|
{% for email in forwardEmails %}
|
|
<li class="email-item">
|
|
<div class="email-info">
|
|
<span class="email-address">{{ email.email|sanitizeHtml }}</span>
|
|
<span class="email-meta">Verified {{ email.verifiedAgo }}</span>
|
|
</div>
|
|
<form method="POST" action="/account/forward-email/remove" class="inline-form">
|
|
<input type="hidden" name="email" value="{{ email.email }}">
|
|
<button type="submit" class="button button-small button-danger" onclick="return confirm('Remove {{ email.email }}?')">
|
|
Remove
|
|
</button>
|
|
</form>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="empty-state">No verified forwarding emails yet.</p>
|
|
{% endif %}
|
|
|
|
{% if stats.forwardEmailsCount < stats.maxForwardEmails %}
|
|
<button class="button button-primary" id="addEmailBtn">Add Email</button>
|
|
{% else %}
|
|
<p class="limit-reached">Maximum {{ stats.maxForwardEmails }} emails reached</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Locked Inboxes Section -->
|
|
<div class="account-card frosted-glass">
|
|
<h2>Locked Inboxes</h2>
|
|
<p class="card-description">Manage your locked inboxes. These are protected by your account and only accessible when logged in. Locks auto-release after 7 days without login.</p>
|
|
|
|
{% if lockedInboxes|length > 0 %}
|
|
<ul class="inbox-list">
|
|
{% for inbox in lockedInboxes %}
|
|
<li class="inbox-item">
|
|
<div class="inbox-info">
|
|
<a href="/inbox/{{ inbox.address }}" class="inbox-address">{{ inbox.address|sanitizeHtml }}</a>
|
|
<span class="inbox-meta">Last accessed {{ inbox.lastAccessedAgo }}</span>
|
|
</div>
|
|
<form method="POST" action="/account/locked-inbox/release" class="inline-form">
|
|
<input type="hidden" name="address" value="{{ inbox.address }}">
|
|
<button type="submit" class="button button-small button-danger" onclick="return confirm('Release lock on {{ inbox.address }}?')">
|
|
Release
|
|
</button>
|
|
</form>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p class="empty-state">No locked inboxes yet. Lock an inbox to protect it with your account.</p>
|
|
{% endif %}
|
|
|
|
{% if stats.lockedInboxesCount < stats.maxLockedInboxes %}
|
|
<p class="hint">You can lock up to {{ stats.maxLockedInboxes }} inboxes total.</p>
|
|
{% else %}
|
|
<p class="limit-reached">Maximum {{ stats.maxLockedInboxes }} inboxes locked</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Change Password Section -->
|
|
<div class="account-card frosted-glass">
|
|
<h2>Change Password</h2>
|
|
<p class="card-description">Update your account password. You'll need to enter your current password to confirm.</p>
|
|
|
|
<form method="POST" action="/account/change-password" class="password-form">
|
|
<fieldset>
|
|
<label for="currentPassword">Current Password</label>
|
|
<input
|
|
type="password"
|
|
id="currentPassword"
|
|
name="currentPassword"
|
|
placeholder="Enter current password"
|
|
required
|
|
autocomplete="current-password"
|
|
>
|
|
|
|
<label for="newPassword">New Password</label>
|
|
<input
|
|
type="password"
|
|
id="newPassword"
|
|
name="newPassword"
|
|
placeholder="Min 8 characters"
|
|
required
|
|
minlength="8"
|
|
autocomplete="new-password"
|
|
>
|
|
<small>Must include uppercase, lowercase, and number</small>
|
|
|
|
<label for="confirmNewPassword">Confirm New Password</label>
|
|
<input
|
|
type="password"
|
|
id="confirmNewPassword"
|
|
name="confirmNewPassword"
|
|
placeholder="Re-enter new password"
|
|
required
|
|
minlength="8"
|
|
autocomplete="new-password"
|
|
>
|
|
|
|
<button type="submit" class="button button-primary">Update Password</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Delete Account Section -->
|
|
<div class="account-card frosted-glass danger-zone">
|
|
<h2>Danger Zone</h2>
|
|
<p class="card-description">Permanently delete your account and all associated data. This action cannot be undone.</p>
|
|
|
|
<div class="danger-content">
|
|
<p><strong>Warning:</strong> Deleting your account will:</p>
|
|
<ul class="danger-list">
|
|
{% if smtpEnabled %}<li>Remove all forwarding email addresses</li>{% endif %}
|
|
<li>Release all locked inboxes</li>
|
|
<li>Permanently delete your account data</li>
|
|
</ul>
|
|
|
|
<button class="button button-danger button-full-width" id="deleteAccountBtn">Delete Account</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Account Modal -->
|
|
<div id="deleteAccountModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" id="closeDeleteAccount">×</span>
|
|
<h3>Delete Account</h3>
|
|
<p class="modal-description" style="color: var(--color-danger);">This action is permanent and cannot be undone!</p>
|
|
|
|
<form method="POST" action="/account/delete">
|
|
<fieldset>
|
|
<label for="confirmPassword">Enter your password to confirm</label>
|
|
<input
|
|
type="password"
|
|
id="confirmPassword"
|
|
name="password"
|
|
placeholder="Your password"
|
|
required
|
|
class="modal-input"
|
|
autocomplete="current-password"
|
|
>
|
|
|
|
<label for="confirmText">Type "DELETE" to confirm</label>
|
|
<input
|
|
type="text"
|
|
id="confirmText"
|
|
name="confirmText"
|
|
placeholder="Type DELETE"
|
|
required
|
|
class="modal-input"
|
|
>
|
|
|
|
<button type="submit" class="button button-danger modal-button">Permanently Delete Account</button>
|
|
<button type="button" class="button button-secondary modal-button" id="cancelDelete">Cancel</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% if smtpEnabled %}
|
|
<!-- Add Email Modal -->
|
|
<div id="addEmailModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" id="closeAddEmail">×</span>
|
|
<h3>Add Forwarding Email</h3>
|
|
<p class="modal-description">Enter an email address to verify. We'll send you a verification link.</p>
|
|
|
|
<form method="POST" action="/account/forward-email/add">
|
|
<fieldset>
|
|
<label for="forwardEmail">Email Address</label>
|
|
<input
|
|
type="email"
|
|
id="forwardEmail"
|
|
name="email"
|
|
placeholder="your-email@example.com"
|
|
required
|
|
class="modal-input"
|
|
>
|
|
<button type="submit" class="button-primary modal-button">Send Verification</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|