This commit is contained in:
oliver
2026-06-22 18:17:22 -03:00
parent 365c69871e
commit 07fc9f9050
3 changed files with 302 additions and 148 deletions
+214 -148
View File
@@ -812,7 +812,27 @@
>
<div class="modal account-modal">
<div class="modal-header">
<span class="modal-title">Account Settings</span>
<div
class="auth-switch"
style="position: static; margin: 0"
>
<button
type="button"
id="acct-tab-settings"
class="auth-switch-btn active"
onclick="switchAccountTab('settings')"
>
Account Settings
</button>
<button
type="button"
id="acct-tab-affiliate"
class="auth-switch-btn"
onclick="switchAccountTab('affiliate')"
>
Affiliate Settings
</button>
</div>
<button
type="button"
class="modal-close-btn"
@@ -822,165 +842,211 @@
</button>
</div>
<div class="account-modal-body">
<!-- ── Left: settings ──────────────────────── -->
<div class="account-col account-col--settings">
<div class="acct-section">
<div class="acct-field-label">Email</div>
<div class="acct-field-val" id="acct-email-display">
<!-- ── Pane: Settings ──────────────────────── -->
<div
id="acct-pane-settings"
class="account-pane"
style="display: flex"
>
<div class="account-col account-col--settings">
<div class="acct-section">
<div class="acct-field-label">Email</div>
<div
class="acct-field-val"
id="acct-email-display"
>
</div>
</div>
<div class="acct-divider"></div>
<div class="acct-section">
<div class="form-group">
<label>Change Password</label>
<div class="pw-input-wrap">
<input
type="password"
id="acct-pw-input"
placeholder="New password"
autocomplete="new-password"
oninput="
toggleAccountPwSave(this.value)
"
onkeydown="
if (event.key === 'Enter')
saveAccountPassword();
"
/>
<button
type="button"
id="acct-pw-save-btn"
class="pw-save-btn"
onclick="saveAccountPassword()"
title="Save password"
style="display: none"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline
points="20 6 9 17 4 12"
/>
</svg>
</button>
</div>
<p
class="ssh-hint"
style="margin-bottom: 0"
>
Min. 8 characters.
</p>
</div>
</div>
<div class="acct-divider"></div>
<div class="acct-section">
<div class="form-group">
<label>Invoice Email</label>
<div class="pw-input-wrap">
<input
type="email"
id="invoice-email-input"
placeholder="invoices@example.com"
autocomplete="email"
oninput="
toggleInvoiceEmailSave(
this.value,
)
"
onkeydown="
if (event.key === 'Enter')
saveInvoiceEmail();
"
/>
<button
type="button"
id="invoice-email-save-btn"
class="pw-save-btn"
onclick="saveInvoiceEmail()"
title="Save invoice email"
style="display: none"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline
points="20 6 9 17 4 12"
/>
</svg>
</button>
</div>
</div>
</div>
<div class="acct-divider"></div>
<div class="acct-section">
<div class="acct-field-label">
Manage Subscriptions
</div>
<div
class="acct-affiliate-row"
style="justify-content: flex-end"
>
<button
type="button"
id="portal-btn"
class="btn btn-ghost btn-sm"
onclick="openBillingPortal()"
>
Portal &rarr;
</button>
</div>
</div>
<div class="acct-divider"></div>
<div class="acct-section">
<div class="acct-field-label">
Affiliate Code
</div>
<div class="acct-affiliate-row">
<span
class="acct-affiliate-code"
id="acct-affiliate-code"
></span
>
<button
type="button"
id="acct-affiliate-copy-btn"
class="btn btn-ghost btn-sm"
onclick="copyAffiliateCode()"
style="display: none"
>
Copy Affiliate Link
</button>
</div>
</div>
</div>
<div class="acct-divider"></div>
<div class="acct-section">
<div class="form-group">
<label>Change Password</label>
<div class="pw-input-wrap">
<!-- ── Vertical divider ──────────────────────── -->
<div class="account-col-divider"></div>
<!-- ── Right: invoices ──────────────────────── -->
<div class="account-col account-col--invoices">
<div class="acct-invoices-toolbar">
<div class="acct-invoices-title">Invoices</div>
<div class="acct-invoices-actions">
<input
type="password"
id="acct-pw-input"
placeholder="New password"
autocomplete="new-password"
oninput="
toggleAccountPwSave(this.value)
"
onkeydown="
if (event.key === 'Enter')
saveAccountPassword();
"
type="text"
id="invoice-filter"
class="invoice-filter-input"
placeholder="Filter invoices…"
oninput="applyInvoiceFilter()"
/>
<button
type="button"
id="acct-pw-save-btn"
class="pw-save-btn"
onclick="saveAccountPassword()"
title="Save password"
style="display: none"
class="btn btn-ghost btn-sm"
onclick="exportInvoicesCSV()"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12" />
</svg>
Export CSV
</button>
</div>
<p class="ssh-hint" style="margin-bottom: 0">
Min. 8 characters.
</div>
<div id="invoices-body"></div>
</div>
</div>
<!-- ── Pane: Affiliate ─────────────────────── -->
<div
id="acct-pane-affiliate"
class="account-pane"
style="display: none"
>
<div
class="account-col account-col--invoices"
style="flex: 1"
>
<div class="acct-invoices-toolbar">
<div class="acct-invoices-title">
Affiliate Links
</div>
</div>
<div id="affiliate-links-body">
<p
class="text-muted"
style="font-size: 13px; padding: 4px 0"
>
Switch to this tab to see available
affiliate links.
</p>
</div>
</div>
<div class="acct-divider"></div>
<div class="acct-section">
<div class="form-group">
<label>Invoice Email</label>
<div class="pw-input-wrap">
<input
type="email"
id="invoice-email-input"
placeholder="invoices@example.com"
autocomplete="email"
oninput="
toggleInvoiceEmailSave(this.value)
"
onkeydown="
if (event.key === 'Enter')
saveInvoiceEmail();
"
/>
<button
type="button"
id="invoice-email-save-btn"
class="pw-save-btn"
onclick="saveInvoiceEmail()"
title="Save invoice email"
style="display: none"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12" />
</svg>
</button>
</div>
</div>
</div>
<div class="acct-divider"></div>
<div class="acct-section">
<div class="acct-field-label">
Manage Subscriptions
</div>
<div
class="acct-affiliate-row"
style="justify-content: flex-end"
>
<button
type="button"
id="portal-btn"
class="btn btn-ghost btn-sm"
onclick="openBillingPortal()"
>
Portal &rarr;
</button>
</div>
</div>
<div class="acct-divider"></div>
<div class="acct-section">
<div class="acct-field-label">Affiliate Code</div>
<div class="acct-affiliate-row">
<span
class="acct-affiliate-code"
id="acct-affiliate-code"
></span
>
<button
type="button"
id="acct-affiliate-copy-btn"
class="btn btn-ghost btn-sm"
onclick="copyAffiliateCode()"
style="display: none"
>
Copy Affiliate Link
</button>
</div>
</div>
</div>
<!-- ── Vertical divider ──────────────────────── -->
<div class="account-col-divider"></div>
<!-- ── Right: invoices ──────────────────────── -->
<div class="account-col account-col--invoices">
<div class="acct-invoices-toolbar">
<div class="acct-invoices-title">Invoices</div>
<div class="acct-invoices-actions">
<input
type="text"
id="invoice-filter"
class="invoice-filter-input"
placeholder="Filter invoices…"
oninput="applyInvoiceFilter()"
/>
<button
type="button"
class="btn btn-ghost btn-sm"
onclick="exportInvoicesCSV()"
>
Export CSV
</button>
</div>
</div>
<div id="invoices-body"></div>
</div>
</div>
</div>