141 lines
10 KiB
HTML
141 lines
10 KiB
HTML
{{ define "content" }}
|
|
<div class="page-header">
|
|
<h1>Account Settings</h1>
|
|
</div>
|
|
|
|
<div id="account-settings-content">
|
|
<div id="account-settings-message" class="message" style="display: none; margin-bottom: 1.5rem;"></div>
|
|
|
|
<div class="modal-split" style="align-items: start;">
|
|
<div class="card" style="max-width: 100%; text-align: left; padding: 1.5rem;">
|
|
<h2 style="font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text);">Profile</h2>
|
|
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">Change your username. Avatar upload is planned for later.</p>
|
|
|
|
<form id="username-form" onsubmit="saveAccountUsername(event)">
|
|
<div class="form-group">
|
|
<label for="settings-username" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Username</label>
|
|
<input type="text" id="settings-username" placeholder="Username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="settings-username-password" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Current password</label>
|
|
<input type="password" id="settings-username-password" placeholder="Confirm with current password" required autocomplete="current-password">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Save username</button>
|
|
</form>
|
|
|
|
<div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border);">
|
|
<h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Avatar</h3>
|
|
<div style="display:flex; align-items:center; gap:1rem; color: var(--text-muted);">
|
|
<div id="settings-avatar-preview" class="avatar">M</div>
|
|
<div>
|
|
<div>Avatar upload is not implemented yet.</div>
|
|
<div style="font-size:0.85rem; margin-top:0.25rem;">This placeholder keeps the settings layout ready for it.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="max-width: 100%; text-align: left; padding: 1.5rem;">
|
|
<h2 style="font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text);">Password</h2>
|
|
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">Change your password. You will receive a fresh session afterwards.</p>
|
|
|
|
<form id="password-form" onsubmit="saveAccountPassword(event)">
|
|
<div class="form-group">
|
|
<label for="settings-current-password" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Current password</label>
|
|
<input type="password" id="settings-current-password" placeholder="Current password" required autocomplete="current-password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="settings-new-password" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">New password</label>
|
|
<input type="password" id="settings-new-password" placeholder="New password" required autocomplete="new-password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="settings-confirm-password" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Confirm new password</label>
|
|
<input type="password" id="settings-confirm-password" placeholder="Confirm new password" required autocomplete="new-password">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Change password</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="max-width: 100%; text-align: left; padding: 1.5rem; margin-top: 1.5rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;">
|
|
<div>
|
|
<h2 style="font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text);">Two-factor authentication</h2>
|
|
<p id="two-factor-status" style="color: var(--text-muted); margin-bottom: 1rem;">Loading 2FA status...</p>
|
|
</div>
|
|
<span id="two-factor-badge" class="badge">Unknown</span>
|
|
</div>
|
|
|
|
<div id="two-factor-disabled-panel" style="display: none;">
|
|
<p style="color: var(--text-muted); margin-bottom: 1rem;">Use an authenticator app. You can scan the QR code or enter the setup key manually.</p>
|
|
<button type="button" class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem;" onclick="startTwoFactorSetup()">Start 2FA setup</button>
|
|
|
|
<div id="two-factor-setup-panel" style="display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);">
|
|
<div class="modal-split" style="align-items: start;">
|
|
<div>
|
|
<h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Scan QR code</h3>
|
|
<img id="two-factor-qr" alt="2FA QR code" style="display: none; width: 220px; height: 220px; background: white; padding: 0.5rem; border-radius: 12px;">
|
|
</div>
|
|
<div>
|
|
<h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Manual setup</h3>
|
|
<p style="color: var(--text-muted); margin-bottom: 0.75rem;">If you do not want to scan the QR code, enter this key manually in your authenticator app.</p>
|
|
<code id="two-factor-secret" style="display:block; word-break: break-all; background:#111827; border:1px solid var(--border); border-radius:10px; padding:0.85rem; color:var(--text);"></code>
|
|
<a id="two-factor-otpauth" href="#" style="display:block; color: var(--accent); margin-top:0.75rem; word-break: break-all;">Open otpauth URL</a>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="two-factor-enable-form" onsubmit="enableTwoFactor(event)" style="margin-top: 1.5rem;">
|
|
<div class="form-group">
|
|
<label for="two-factor-enable-code" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Authenticator code</label>
|
|
<input type="text" id="two-factor-enable-code" inputmode="numeric" placeholder="123456" required autocomplete="one-time-code">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem;">Enable 2FA</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="two-factor-enabled-panel" style="display: none;">
|
|
<p style="color: var(--text-muted); margin-bottom: 0.5rem;">Recovery codes remaining: <strong id="recovery-codes-remaining">0</strong></p>
|
|
<p id="recovery-codes-warning" class="message error" style="display: none; margin-bottom: 1rem;">You are running low on recovery codes. Generate and download new codes soon.</p>
|
|
|
|
<div id="recovery-codes-panel" style="display: none; margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #111827;">
|
|
<h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Recovery codes</h3>
|
|
<p style="color: var(--text-muted); margin-bottom: 1rem;">Save these now. They are shown only once.</p>
|
|
<pre id="recovery-codes-list" style="white-space: pre-wrap; word-break: break-word; color: var(--text); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-bottom: 1rem;"></pre>
|
|
<button type="button" class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem;" onclick="downloadRecoveryCodes()">Download recovery codes</button>
|
|
</div>
|
|
|
|
<div class="modal-split" style="align-items: start;">
|
|
<div>
|
|
<h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Regenerate recovery codes</h3>
|
|
<p style="color: var(--text-muted); margin-bottom: 1rem;">This invalidates all existing recovery codes.</p>
|
|
<form id="recovery-regenerate-form" onsubmit="regenerateRecoveryCodes(event)">
|
|
<div class="form-group">
|
|
<input type="password" id="recovery-password" placeholder="Current password" required autocomplete="current-password">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="recovery-code" inputmode="numeric" placeholder="Authenticator code" required autocomplete="one-time-code">
|
|
</div>
|
|
<button type="submit" class="btn btn-secondary">Generate new recovery codes</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Disable 2FA</h3>
|
|
<p style="color: var(--text-muted); margin-bottom: 1rem;">Disabling 2FA revokes your active refresh sessions.</p>
|
|
<form id="two-factor-disable-form" onsubmit="disableTwoFactor(event)">
|
|
<div class="form-group">
|
|
<input type="password" id="two-factor-disable-password" placeholder="Current password" required autocomplete="current-password">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="two-factor-disable-code" inputmode="numeric" placeholder="Authenticator code" required autocomplete="one-time-code">
|
|
</div>
|
|
<button type="submit" class="btn btn-secondary danger-btn">Disable 2FA</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|