This commit is contained in:
oliver
2026-06-09 13:51:41 -03:00
parent d0c5c1285b
commit 59871432b9
3 changed files with 376 additions and 91 deletions
+127 -78
View File
@@ -329,84 +329,6 @@
<span id="user-email-label"></span>
</span>
<!-- ── User account panel ────────────────────── -->
<div
id="user-panel"
class="user-panel"
style="display: none"
onclick="event.stopPropagation()"
>
<div class="user-panel-header">
<svg
width="13"
height="13"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="8" r="4" />
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
</svg>
Account
</div>
<div class="user-panel-row">
<span class="user-panel-label">Email</span>
<span
class="user-panel-val"
id="user-panel-email-val"
></span
>
</div>
<div class="user-panel-divider"></div>
<div class="user-panel-pw">
<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>
</div>
<p class="ssh-hint" style="margin-bottom: 0">
Min. 8 characters.
</p>
</div>
</div>
<button class="btn btn-ghost btn-sm" onclick="doSignOut()">
<svg
width="13"
@@ -875,6 +797,133 @@
</div>
<!-- /app-shell -->
<!-- ═══════════════════════════════════════════════════════════
ACCOUNT SETTINGS MODAL
════════════════════════════════════════════════════════════════ -->
<div
id="account-backdrop"
class="modal-backdrop"
onclick="if (event.target === this) closeUserPanel();"
>
<div class="modal account-modal">
<div class="modal-header">
<span class="modal-title">Account Settings</span>
<button
type="button"
class="modal-close-btn"
onclick="closeUserPanel()"
>
&#x2715;
</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">
</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>
<!-- ── Vertical divider ──────────────────────── -->
<div class="account-col-divider"></div>
<!-- ── Right: invoices ──────────────────────── -->
<div class="account-col account-col--invoices">
<div class="acct-invoices-title">Invoices</div>
<div id="invoices-body"></div>
</div>
</div>
</div>
</div>
<!-- ═══════════════════════════════════════════════════════════
BUY CREDITS MODAL
════════════════════════════════════════════════════════════════ -->