mailpilot sending
This commit is contained in:
southseact-3d
516
chat/public/settings-layouts/layout-1-sidebar.html
Normal file
516
chat/public/settings-layouts/layout-1-sidebar.html
Normal file
@@ -0,0 +1,516 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Account Settings - Plugin Compass</title>
|
||||
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
||||
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
|
||||
<script src="/posthog.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--green: #008060;
|
||||
--green-dark: #004c3f;
|
||||
--green-light: #e3f5ef;
|
||||
--border: #e5e7eb;
|
||||
--muted: #6b7280;
|
||||
--panel: #ffffff;
|
||||
--bg: #f8fafc;
|
||||
--sidebar-bg: #1e293b;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: #0f172a;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background: var(--sidebar-bg);
|
||||
color: #fff;
|
||||
padding: 24px 0;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 24px 24px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.sidebar-brand img { width: 32px; height: 32px; border-radius: 8px; }
|
||||
.sidebar-brand span { font-weight: 600; font-size: 18px; }
|
||||
.sidebar-nav { padding: 0 12px; }
|
||||
.sidebar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.sidebar-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
|
||||
.sidebar-item.active { background: var(--green); color: #fff; }
|
||||
.sidebar-section {
|
||||
padding: 16px 24px 8px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
}
|
||||
.main { flex: 1; margin-left: 260px; padding: 32px 40px; }
|
||||
.header { margin-bottom: 32px; }
|
||||
.header h1 { font-size: 28px; font-weight: 700; margin: 0 0 8px; }
|
||||
.header p { color: var(--muted); margin: 0; }
|
||||
.content-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 28px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.content-card h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.content-card h2 i { color: var(--green); }
|
||||
.content-card .subtitle { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
|
||||
.user-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, var(--green-light), transparent);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--green);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
}
|
||||
.user-info h3 { margin: 0 0 4px; font-size: 18px; }
|
||||
.user-info p { margin: 0; color: var(--muted); font-size: 14px; }
|
||||
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
|
||||
.badge.success { background: #ecfdf5; color: #059669; }
|
||||
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
||||
@media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.field { margin-bottom: 20px; }
|
||||
.field label { display: block; font-weight: 600; font-size: 13px; color: #475569; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.025em; }
|
||||
input, select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
input:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,128,96,0.1); }
|
||||
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
color: #1e293b;
|
||||
}
|
||||
.btn:hover { background: #f8fafc; border-color: #cbd5e1; }
|
||||
.btn.primary { background: var(--green); color: #fff; border: none; }
|
||||
.btn.primary:hover { background: var(--green-dark); }
|
||||
.btn.danger { color: #dc2626; border-color: #fecaca; }
|
||||
.btn.danger:hover { background: #fef2f2; }
|
||||
.btn.ghost { background: transparent; border-color: transparent; }
|
||||
.btn.ghost:hover { background: rgba(0,0,0,0.04); }
|
||||
.actions-bar { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
|
||||
.status { font-size: 13px; color: var(--muted); margin-top: 8px; }
|
||||
.status.success { color: #059669; }
|
||||
.status.error { color: #b91c1c; }
|
||||
.info-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-label { color: var(--muted); font-size: 14px; }
|
||||
.info-value { font-weight: 600; font-size: 14px; }
|
||||
.payment-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.payment-card.default { border-color: var(--green); background: var(--green-light); }
|
||||
.card-icon { width: 48px; height: 32px; background: #f1f5f9; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
|
||||
.empty-state { text-align: center; padding: 32px; color: var(--muted); }
|
||||
.empty-state i { font-size: 32px; margin-bottom: 12px; opacity: 0.5; }
|
||||
.invoice-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.invoice-item:hover { border-color: var(--green); }
|
||||
.invoice-amount { font-weight: 700; color: var(--green); }
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(15,23,42,0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.modal-overlay.active { opacity: 1; visibility: visible; }
|
||||
.modal { background: #fff; border-radius: 16px; padding: 24px; max-width: 500px; width: 90%; }
|
||||
.modal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
|
||||
.modal-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
|
||||
.modal-icon.warning { background: #fff7ed; color: #ea580c; }
|
||||
.modal-icon.info { background: #eff6ff; color: #2563eb; }
|
||||
.modal-title { font-size: 18px; font-weight: 700; }
|
||||
.modal-body { color: #64748b; line-height: 1.6; margin-bottom: 24px; }
|
||||
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
|
||||
@media (max-width: 900px) {
|
||||
.sidebar { display: none; }
|
||||
.main { margin-left: 0; padding: 20px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-brand">
|
||||
<img src="/assets/Plugin.png" alt="Plugin Compass">
|
||||
<span>Plugin Compass</span>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="sidebar-section">Navigation</div>
|
||||
<a href="/apps" class="sidebar-item"><i class="fa-solid fa-grid-2"></i> My Apps</a>
|
||||
<a href="/feature-requests" class="sidebar-item"><i class="fa-solid fa-star"></i> Feature Requests</a>
|
||||
<a href="/topup" class="sidebar-item"><i class="fa-solid fa-coins"></i> Tokens Top-up</a>
|
||||
<div class="sidebar-section">Account</div>
|
||||
<a href="/settings" class="sidebar-item active"><i class="fa-solid fa-gear"></i> Settings</a>
|
||||
<a href="#" class="sidebar-item" id="logout-link"><i class="fa-solid fa-arrow-right-from-bracket"></i> Logout</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="main">
|
||||
<div class="header">
|
||||
<h1>Account Settings</h1>
|
||||
<p>Manage your account, billing, and preferences</p>
|
||||
</div>
|
||||
<div class="content-card">
|
||||
<h2><i class="fa-solid fa-user"></i> Account Overview</h2>
|
||||
<p class="subtitle">Your account information and subscription status</p>
|
||||
<div class="user-display">
|
||||
<div class="avatar" id="settings-avatar">?</div>
|
||||
<div class="user-info">
|
||||
<h3 id="settings-email">Loading...</h3>
|
||||
<p><span class="badge success" id="settings-status">Active</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Current Plan</span>
|
||||
<span class="info-value" id="settings-plan">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Billing Status</span>
|
||||
<span class="info-value" id="settings-billing-status">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Renews On</span>
|
||||
<span class="info-value" id="settings-renews">-</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-card">
|
||||
<h2><i class="fa-solid fa-credit-card"></i> Plan & Billing</h2>
|
||||
<p class="subtitle">Update your subscription and billing preferences</p>
|
||||
<form id="settings-form">
|
||||
<div class="form-row">
|
||||
<div class="field">
|
||||
<label for="plan">Subscription Plan</label>
|
||||
<select id="plan"></select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="billing-cycle">Billing Cycle</label>
|
||||
<select id="billing-cycle">
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="yearly">Yearly (save 20%)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="field">
|
||||
<label for="currency">Currency</label>
|
||||
<select id="currency">
|
||||
<option value="usd">USD - US Dollar</option>
|
||||
<option value="gbp">GBP - British Pound</option>
|
||||
<option value="eur">EUR - Euro</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="billing-email">Billing Email</label>
|
||||
<input id="billing-email" type="email" placeholder="you@example.com" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" id="settings-status-line"></div>
|
||||
<div class="actions-bar">
|
||||
<button type="submit" class="btn primary">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="content-card">
|
||||
<h2><i class="fa-solid fa-wallet"></i> Payment Methods</h2>
|
||||
<p class="subtitle">Manage your saved payment methods</p>
|
||||
<div id="payment-methods-list">
|
||||
<div class="empty-state">
|
||||
<i class="fa-regular fa-credit-card"></i>
|
||||
<p>No payment methods saved yet</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-card">
|
||||
<h2><i class="fa-solid fa-file-invoice"></i> Invoices</h2>
|
||||
<p class="subtitle">View and download your payment invoices</p>
|
||||
<div id="invoices-list">
|
||||
<div class="empty-state">
|
||||
<i class="fa-solid fa-file-invoice"></i>
|
||||
<p>No invoices yet</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-card">
|
||||
<h2><i class="fa-solid fa-sliders"></i> Billing Actions</h2>
|
||||
<p class="subtitle">Manage your subscription</p>
|
||||
<div class="actions-bar">
|
||||
<a href="/topup" class="btn"><i class="fa-solid fa-coins"></i> Buy Top-ups</a>
|
||||
<button class="btn danger" id="cancel-plan"><i class="fa-solid fa-ban"></i> Cancel Plan</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="modal-overlay" id="confirm-modal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<div class="modal-icon warning" id="modal-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
||||
<div class="modal-title" id="modal-title">Confirm Action</div>
|
||||
</div>
|
||||
<div class="modal-body" id="modal-body">Are you sure?</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn" id="modal-cancel">Cancel</button>
|
||||
<button class="btn primary" id="modal-confirm">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const el = {
|
||||
email: document.getElementById('settings-email'),
|
||||
avatar: document.getElementById('settings-avatar'),
|
||||
plan: document.getElementById('settings-plan'),
|
||||
billingStatus: document.getElementById('settings-billing-status'),
|
||||
renews: document.getElementById('settings-renews'),
|
||||
status: document.getElementById('settings-status'),
|
||||
billingEmail: document.getElementById('billing-email'),
|
||||
billingCycle: document.getElementById('billing-cycle'),
|
||||
currency: document.getElementById('currency'),
|
||||
planSelect: document.getElementById('plan'),
|
||||
form: document.getElementById('settings-form'),
|
||||
statusLine: document.getElementById('settings-status-line'),
|
||||
cancel: document.getElementById('cancel-plan'),
|
||||
paymentMethodsList: document.getElementById('payment-methods-list'),
|
||||
invoicesList: document.getElementById('invoices-list'),
|
||||
};
|
||||
let csrfToken = '';
|
||||
let currentPlan = '';
|
||||
let allInvoices = [];
|
||||
let currentInvoicePage = 1;
|
||||
const INVOICES_PER_PAGE = 5;
|
||||
const PLAN_ALIASES = { business: 'professional' };
|
||||
function showConfirmModal({ title, body, icon, onConfirm }) {
|
||||
const modal = document.getElementById('confirm-modal');
|
||||
document.getElementById('modal-title').textContent = title;
|
||||
document.getElementById('modal-body').textContent = body;
|
||||
const iconEl = document.getElementById('modal-icon');
|
||||
iconEl.className = `modal-icon ${icon || 'warning'}`;
|
||||
iconEl.innerHTML = icon === 'info' ? '<i class="fa-solid fa-circle-info"></i>' : '<i class="fa-solid fa-triangle-exclamation"></i>';
|
||||
modal.classList.add('active');
|
||||
const handleConfirm = () => { onConfirm(); closeModal(); };
|
||||
const closeModal = () => { modal.classList.remove('active'); document.getElementById('modal-confirm').removeEventListener('click', handleConfirm); document.getElementById('modal-cancel').removeEventListener('click', closeModal); };
|
||||
document.getElementById('modal-confirm').addEventListener('click', handleConfirm);
|
||||
document.getElementById('modal-cancel').addEventListener('click', closeModal);
|
||||
}
|
||||
function setStatus(msg, type = '') { if (el.statusLine) { el.statusLine.textContent = msg || ''; el.statusLine.className = `status ${type}`; } }
|
||||
function formatDate(iso) { if (!iso) return 'Not scheduled'; const date = new Date(iso); return isNaN(date.getTime()) ? 'Not scheduled' : date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }); }
|
||||
function setAvatar(email) { const initial = (email || '?').trim().charAt(0).toUpperCase() || '?'; el.avatar.textContent = initial; }
|
||||
function renderAccount(account) {
|
||||
const email = account?.email || '';
|
||||
el.email.textContent = email || 'Unknown';
|
||||
setAvatar(email);
|
||||
el.plan.textContent = account?.plan || 'hobby';
|
||||
el.billingStatus.textContent = account?.billingStatus || 'active';
|
||||
el.renews.textContent = formatDate(account?.subscriptionRenewsAt);
|
||||
el.planSelect.value = account?.plan || 'hobby';
|
||||
el.billingEmail.value = account?.billingEmail || email || '';
|
||||
el.currency.value = account?.subscriptionCurrency || 'usd';
|
||||
el.status.textContent = account?.billingStatus === 'canceled' ? 'Canceled' : 'Active';
|
||||
currentPlan = account?.plan || 'hobby';
|
||||
}
|
||||
async function loadAccount() {
|
||||
try {
|
||||
const resp = await fetch('/api/account', { credentials: 'same-origin' });
|
||||
if (resp.status === 401) { window.location.href = '/login?next=/settings'; return; }
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
renderAccount(data.account || {});
|
||||
} catch (err) { setStatus('Unable to load account settings.', 'error'); }
|
||||
}
|
||||
async function loadPlans() {
|
||||
try {
|
||||
const resp = await fetch('/api/account/plans', { credentials: 'same-origin' });
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
const plans = Array.isArray(data.plans) ? data.plans : ['hobby', 'starter', 'business', 'enterprise'];
|
||||
el.planSelect.innerHTML = '';
|
||||
plans.forEach(plan => {
|
||||
const option = document.createElement('option');
|
||||
option.value = plan;
|
||||
option.textContent = plan === 'hobby' ? 'Hobby (free)' : plan === 'business' ? 'Professional' : plan.charAt(0).toUpperCase() + plan.slice(1);
|
||||
el.planSelect.appendChild(option);
|
||||
});
|
||||
if (data.defaultPlan) el.planSelect.value = data.defaultPlan;
|
||||
} catch (_) {
|
||||
el.planSelect.innerHTML = '<option value="hobby">Hobby (free)</option><option value="starter">Starter</option><option value="business">Professional</option><option value="enterprise">Enterprise</option>';
|
||||
}
|
||||
}
|
||||
async function saveAccount(event) {
|
||||
if (event) event.preventDefault();
|
||||
const newPlan = el.planSelect.value;
|
||||
const payload = { plan: newPlan, billingCycle: el.billingCycle.value, currency: el.currency.value, billingEmail: el.billingEmail.value };
|
||||
showConfirmModal({ title: 'Save Changes', body: 'Are you sure you want to update your account settings?', icon: 'info', onConfirm: async () => {
|
||||
setStatus('Saving...');
|
||||
try {
|
||||
const resp = await fetch('/api/account', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken }, credentials: 'same-origin', body: JSON.stringify(payload) });
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
if (!resp.ok) throw new Error(data.error || 'Save failed');
|
||||
renderAccount(data.account || {});
|
||||
setStatus('Account updated successfully', 'success');
|
||||
} catch (err) { setStatus(err.message, 'error'); }
|
||||
}});
|
||||
}
|
||||
async function loadCsrfToken() {
|
||||
const csrfResp = await fetch('/api/csrf', { credentials: 'same-origin' });
|
||||
if (csrfResp.ok) { const csrfData = await csrfResp.json().catch(() => ({})); csrfToken = csrfData.csrfToken || ''; }
|
||||
}
|
||||
function getCardIcon(brand) {
|
||||
const b = (brand || '').toLowerCase();
|
||||
if (b.includes('visa')) return '<i class="fa-brands fa-cc-visa" style="color:#1a1f71;"></i>';
|
||||
if (b.includes('mastercard')) return '<i class="fa-brands fa-cc-mastercard" style="color:#eb001b;"></i>';
|
||||
if (b.includes('amex')) return '<i class="fa-brands fa-cc-amex" style="color:#006fcf;"></i>';
|
||||
return '<i class="fa-regular fa-credit-card"></i>';
|
||||
}
|
||||
function renderPaymentMethods(methods) {
|
||||
if (!el.paymentMethodsList) return;
|
||||
if (!Array.isArray(methods) || methods.length === 0) {
|
||||
el.paymentMethodsList.innerHTML = '<div class="empty-state"><i class="fa-regular fa-credit-card"></i><p>No payment methods saved yet</p></div>';
|
||||
return;
|
||||
}
|
||||
el.paymentMethodsList.innerHTML = methods.map((m, i) => `
|
||||
<div class="payment-card ${i === 0 ? 'default' : ''}">
|
||||
<div class="card-icon">${getCardIcon(m.brand)}</div>
|
||||
<div style="flex:1;"><div style="font-weight:600;">${m.brand || 'Card'} ${i === 0 ? '<span class="badge success">Default</span>' : ''}</div><div style="font-size:13px;color:var(--muted);">•••• ${m.last4 || '••••'}</div></div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
async function loadPaymentMethods() {
|
||||
if (!el.paymentMethodsList) return;
|
||||
try {
|
||||
const resp = await fetch('/api/account/payment-methods', { credentials: 'same-origin' });
|
||||
if (resp.status === 404 || resp.status === 401) { renderPaymentMethods([]); return; }
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
renderPaymentMethods(data.paymentMethods || []);
|
||||
} catch (err) { renderPaymentMethods([]); }
|
||||
}
|
||||
function renderInvoices(invoices) {
|
||||
if (!el.invoicesList) return;
|
||||
allInvoices = invoices;
|
||||
if (!Array.isArray(invoices) || invoices.length === 0) {
|
||||
el.invoicesList.innerHTML = '<div class="empty-state"><i class="fa-solid fa-file-invoice"></i><p>No invoices yet</p></div>';
|
||||
return;
|
||||
}
|
||||
const display = invoices.slice(0, 4);
|
||||
el.invoicesList.innerHTML = display.map(inv => {
|
||||
const date = new Date(inv.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
|
||||
const amount = inv.amount / 100;
|
||||
return `<div class="invoice-item"><div><div style="font-weight:600;">${inv.invoiceNumber}</div><div style="font-size:12px;color:var(--muted);">${date}</div></div><div class="invoice-amount">${inv.currency} ${amount.toFixed(2)}</div></div>`;
|
||||
}).join('');
|
||||
}
|
||||
async function loadInvoices() {
|
||||
if (!el.invoicesList) return;
|
||||
try {
|
||||
const resp = await fetch('/api/account/invoices', { credentials: 'same-origin' });
|
||||
if (resp.status === 404 || resp.status === 401) { renderInvoices([]); return; }
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
renderInvoices(data.invoices || []);
|
||||
} catch (err) { renderInvoices([]); }
|
||||
}
|
||||
document.getElementById('logout-link').addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
showConfirmModal({ title: 'Logout', body: 'Are you sure you want to logout?', icon: 'info', onConfirm: async () => {
|
||||
await fetch('/api/logout', { method: 'POST', credentials: 'same-origin' });
|
||||
window.location.href = '/login';
|
||||
}});
|
||||
});
|
||||
el.cancel.addEventListener('click', () => {
|
||||
showConfirmModal({ title: 'Cancel Subscription', body: 'Are you sure you want to cancel? You will retain access until the end of your billing period.', icon: 'warning', onConfirm: async () => {
|
||||
setStatus('Canceling...');
|
||||
try {
|
||||
const resp = await fetch('/api/subscription/cancel', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken }, credentials: 'same-origin' });
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
if (!resp.ok) throw new Error(data.error || 'Unable to cancel');
|
||||
renderAccount(data.account || {});
|
||||
setStatus('Subscription canceled', 'success');
|
||||
} catch (err) { setStatus(err.message, 'error'); }
|
||||
}});
|
||||
});
|
||||
el.form.addEventListener('submit', saveAccount);
|
||||
loadCsrfToken().then(() => { loadAccount(); loadPlans(); loadPaymentMethods(); loadInvoices(); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user