Added UI for mfa and other profile settings
This commit is contained in:
@@ -39,6 +39,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
if (document.getElementById('items-table-body')) loadItems();
|
||||
if (document.getElementById('locations-table-body')) loadLocations();
|
||||
if (document.getElementById('projects-table-body')) loadProjects();
|
||||
if (document.getElementById('account-settings-content')) loadAccountSettings();
|
||||
|
||||
loadProfile();
|
||||
});
|
||||
@@ -481,4 +482,247 @@ async function loadProfile() {
|
||||
} catch (e) {
|
||||
username.innerHTML = '<tr><td colspan="2" style="color:var(--error); text-align:center; padding:1.5rem;">Failed to load data.</td></tr>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- ACCOUNT SETTINGS ----
|
||||
let latestRecoveryCodes = [];
|
||||
|
||||
function showAccountSettingsMessage(message, type = 'success') {
|
||||
const box = document.getElementById('account-settings-message');
|
||||
if (!box) return;
|
||||
box.textContent = message;
|
||||
box.className = `message ${type}`;
|
||||
box.style.display = 'block';
|
||||
}
|
||||
|
||||
function setTwoFactorPanels(enabled) {
|
||||
const badge = document.getElementById('two-factor-badge');
|
||||
const status = document.getElementById('two-factor-status');
|
||||
const disabledPanel = document.getElementById('two-factor-disabled-panel');
|
||||
const enabledPanel = document.getElementById('two-factor-enabled-panel');
|
||||
|
||||
if (!badge || !status || !disabledPanel || !enabledPanel) return;
|
||||
|
||||
if (enabled) {
|
||||
badge.textContent = 'Enabled';
|
||||
badge.classList.add('success');
|
||||
status.textContent = '2FA is enabled for your account.';
|
||||
disabledPanel.style.display = 'none';
|
||||
enabledPanel.style.display = 'block';
|
||||
} else {
|
||||
badge.textContent = 'Disabled';
|
||||
badge.classList.remove('success');
|
||||
status.textContent = '2FA is disabled. Enable it to protect your account with an authenticator app.';
|
||||
disabledPanel.style.display = 'block';
|
||||
enabledPanel.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function renderRecoveryCodes(codes) {
|
||||
latestRecoveryCodes = codes || [];
|
||||
const panel = document.getElementById('recovery-codes-panel');
|
||||
const list = document.getElementById('recovery-codes-list');
|
||||
if (!panel || !list) return;
|
||||
|
||||
if (latestRecoveryCodes.length === 0) {
|
||||
panel.style.display = 'none';
|
||||
list.textContent = '';
|
||||
return;
|
||||
}
|
||||
|
||||
list.textContent = latestRecoveryCodes.join('\n');
|
||||
panel.style.display = 'block';
|
||||
}
|
||||
|
||||
async function loadAccountSettings() {
|
||||
try {
|
||||
const data = await apiRequest('/api/profile');
|
||||
|
||||
const usernameInput = document.getElementById('settings-username');
|
||||
const avatarPreview = document.getElementById('settings-avatar-preview');
|
||||
const remaining = document.getElementById('recovery-codes-remaining');
|
||||
|
||||
if (usernameInput) usernameInput.value = data.username || '';
|
||||
if (avatarPreview && data.username) avatarPreview.innerText = data.username[0].toLocaleUpperCase();
|
||||
if (remaining) remaining.innerText = data.recovery_codes_remaining || 0;
|
||||
|
||||
setTwoFactorPanels(!!data.two_factor_enabled);
|
||||
renderRecoveryCodes([]);
|
||||
} catch (err) {
|
||||
showAccountSettingsMessage(err.message || 'Failed to load account settings.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveAccountUsername(event) {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
const data = await apiRequest('/api/account/username', 'POST', {
|
||||
username: document.getElementById('settings-username').value.trim(),
|
||||
password: document.getElementById('settings-username-password').value
|
||||
});
|
||||
|
||||
document.getElementById('settings-username-password').value = '';
|
||||
showAccountSettingsMessage('Username updated.');
|
||||
|
||||
const username = document.getElementById('username');
|
||||
const avatar = document.getElementById('avatar');
|
||||
const avatarPreview = document.getElementById('settings-avatar-preview');
|
||||
if (username) username.innerText = data.username;
|
||||
if (avatar && data.username) avatar.innerText = data.username[0].toLocaleUpperCase();
|
||||
if (avatarPreview && data.username) avatarPreview.innerText = data.username[0].toLocaleUpperCase();
|
||||
} catch (err) {
|
||||
showAccountSettingsMessage(err.message || 'Could not update username.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveAccountPassword(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const currentPassword = document.getElementById('settings-current-password').value;
|
||||
const newPassword = document.getElementById('settings-new-password').value;
|
||||
const confirmPassword = document.getElementById('settings-confirm-password').value;
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
showAccountSettingsMessage('New passwords do not match.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await apiRequest('/api/account/password', 'POST', {
|
||||
current_password: currentPassword,
|
||||
new_password: newPassword
|
||||
});
|
||||
|
||||
if (data && data.access_token && data.refresh_token) {
|
||||
localStorage.setItem('access_token', data.access_token);
|
||||
localStorage.setItem('refresh_token', data.refresh_token);
|
||||
}
|
||||
|
||||
document.getElementById('password-form').reset();
|
||||
showAccountSettingsMessage('Password updated. Your session was refreshed.');
|
||||
} catch (err) {
|
||||
showAccountSettingsMessage(err.message || 'Could not update password.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function startTwoFactorSetup() {
|
||||
try {
|
||||
const data = await apiRequest('/api/2fa/setup', 'POST');
|
||||
const panel = document.getElementById('two-factor-setup-panel');
|
||||
const qr = document.getElementById('two-factor-qr');
|
||||
const secret = document.getElementById('two-factor-secret');
|
||||
const otpauth = document.getElementById('two-factor-otpauth');
|
||||
|
||||
if (panel) panel.style.display = 'block';
|
||||
if (qr) {
|
||||
qr.src = data.qr_code;
|
||||
qr.style.display = data.qr_code ? 'block' : 'none';
|
||||
}
|
||||
if (secret) secret.textContent = data.secret || '';
|
||||
if (otpauth) {
|
||||
otpauth.href = data.otpauth_url || '#';
|
||||
otpauth.textContent = data.otpauth_url || 'No otpauth URL available';
|
||||
}
|
||||
|
||||
showAccountSettingsMessage('Scan the QR code or enter the setup key manually, then confirm the 6-digit code.');
|
||||
} catch (err) {
|
||||
showAccountSettingsMessage(err.message || 'Could not start 2FA setup.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function enableTwoFactor(event) {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
const data = await apiRequest('/api/2fa/enable', 'POST', {
|
||||
code: document.getElementById('two-factor-enable-code').value.trim()
|
||||
});
|
||||
|
||||
document.getElementById('two-factor-enable-form').reset();
|
||||
document.getElementById('two-factor-setup-panel').style.display = 'none';
|
||||
setTwoFactorPanels(true);
|
||||
renderRecoveryCodes(data.recovery_codes || []);
|
||||
|
||||
const remaining = document.getElementById('recovery-codes-remaining');
|
||||
if (remaining) remaining.innerText = (data.recovery_codes || []).length;
|
||||
|
||||
showAccountSettingsMessage('2FA enabled. Download your recovery codes now.');
|
||||
loadProfile();
|
||||
} catch (err) {
|
||||
showAccountSettingsMessage(err.message || 'Could not enable 2FA.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function disableTwoFactor(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!confirm('Disable 2FA for your account?')) return;
|
||||
|
||||
try {
|
||||
await apiRequest('/api/2fa/disable', 'POST', {
|
||||
password: document.getElementById('two-factor-disable-password').value,
|
||||
code: document.getElementById('two-factor-disable-code').value.trim()
|
||||
});
|
||||
|
||||
document.getElementById('two-factor-disable-form').reset();
|
||||
localStorage.removeItem('access_token');
|
||||
localStorage.removeItem('refresh_token');
|
||||
setTwoFactorPanels(false);
|
||||
renderRecoveryCodes([]);
|
||||
showAccountSettingsMessage('2FA disabled. Redirecting to login because sessions were revoked.');
|
||||
setTimeout(() => {
|
||||
window.location.href = '/login';
|
||||
}, 1200);
|
||||
} catch (err) {
|
||||
showAccountSettingsMessage(err.message || 'Could not disable 2FA.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function regenerateRecoveryCodes(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!confirm('Generate new recovery codes? Existing unused codes will stop working.')) return;
|
||||
|
||||
try {
|
||||
const data = await apiRequest('/api/2fa/recovery-codes/regenerate', 'POST', {
|
||||
password: document.getElementById('recovery-password').value,
|
||||
code: document.getElementById('recovery-code').value.trim()
|
||||
});
|
||||
|
||||
document.getElementById('recovery-regenerate-form').reset();
|
||||
renderRecoveryCodes(data.recovery_codes || []);
|
||||
|
||||
const remaining = document.getElementById('recovery-codes-remaining');
|
||||
if (remaining) remaining.innerText = (data.recovery_codes || []).length;
|
||||
|
||||
showAccountSettingsMessage('New recovery codes generated. Download them now.');
|
||||
} catch (err) {
|
||||
showAccountSettingsMessage(err.message || 'Could not regenerate recovery codes.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function downloadRecoveryCodes() {
|
||||
if (!latestRecoveryCodes || latestRecoveryCodes.length === 0) {
|
||||
showAccountSettingsMessage('No recovery codes available to download.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const text = [
|
||||
'MiauInv recovery codes',
|
||||
'Save these somewhere safe. Each code can be used once.',
|
||||
'',
|
||||
...latestRecoveryCodes,
|
||||
''
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob([text], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'miauinv-recovery-codes.txt';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
@@ -33,6 +33,10 @@ var projects = template.Must(template.ParseFiles(
|
||||
"frontend/htmx/contents/dash/base.html",
|
||||
"frontend/htmx/contents/dash/projects.html"))
|
||||
|
||||
var accountSettings = template.Must(template.ParseFiles(
|
||||
"frontend/htmx/contents/dash/base.html",
|
||||
"frontend/htmx/contents/dash/account_settings.html"))
|
||||
|
||||
var home = template.Must(template.ParseFiles("frontend/htmx/home.html"))
|
||||
|
||||
func Home(w http.ResponseWriter, r *http.Request) {
|
||||
@@ -51,7 +55,6 @@ func Home(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
func Dashboard(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "text/html")
|
||||
|
||||
@@ -142,6 +145,17 @@ func Projects(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
}
|
||||
func AccountSettings(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "text/html")
|
||||
err := accountSettings.ExecuteTemplate(w, "base.html", struct {
|
||||
Title string
|
||||
}{
|
||||
Title: "Account Settings",
|
||||
})
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
var minifier *minify.M
|
||||
|
||||
@@ -151,7 +165,6 @@ func init() {
|
||||
minifier.AddFunc("text/css", css.Minify)
|
||||
minifier.AddFunc("text/javascript", js.Minify)
|
||||
}
|
||||
|
||||
func Assets(w http.ResponseWriter, r *http.Request) {
|
||||
path := strings.TrimPrefix(r.URL.Path, "/assets/")
|
||||
fullPath := filepath.Join("frontend/assets", path)
|
||||
|
||||
139
frontend/htmx/contents/dash/account_settings.html
Normal file
139
frontend/htmx/contents/dash/account_settings.html
Normal file
@@ -0,0 +1,139 @@
|
||||
{{ 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: 1rem;">Recovery codes remaining: <strong id="recovery-codes-remaining">0</strong></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 }}
|
||||
Reference in New Issue
Block a user