fix: section Securite du compte incomplete BUG-068 (boutons theme, QR local, mot de passe, recovery WebAuthn)
This commit is contained in:
+107
-13
@@ -1,6 +1,6 @@
|
||||
/* ObsiGate — Authentication: API helper, AuthManager, login form, AdminPanel */
|
||||
import { state } from './state.js';
|
||||
import { safeCreateIcons } from './utils.js';
|
||||
import { safeCreateIcons, escapeHtml } from './utils.js';
|
||||
import { showToast, closeHeaderMenu } from './ui.js';
|
||||
import { t, getLocale, setLocale } from './i18n.js';
|
||||
import { showWelcome } from './viewer.js';
|
||||
@@ -266,6 +266,13 @@ const AuthManager = {
|
||||
});
|
||||
},
|
||||
|
||||
async changePassword(currentPassword, newPassword) {
|
||||
return await api("/api/auth/change-password", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ current_password: currentPassword, new_password: newPassword }),
|
||||
});
|
||||
},
|
||||
|
||||
async logout() {
|
||||
try {
|
||||
const token = this.getToken();
|
||||
@@ -1058,11 +1065,79 @@ async function initMfaSettings() {
|
||||
});
|
||||
}
|
||||
|
||||
// Password change (BUG-068: the "Sécurité du compte" section had no way to
|
||||
// change the password although POST /api/auth/change-password exists).
|
||||
_renderPasswordSection(area);
|
||||
|
||||
// WebAuthn security keys section (ROADMAP #64)
|
||||
_renderWebauthnSection(area);
|
||||
}
|
||||
|
||||
|
||||
function _renderPasswordSection(container) {
|
||||
if (!container || document.getElementById("password-settings")) return;
|
||||
const section = document.createElement("div");
|
||||
section.id = "password-settings";
|
||||
section.className = "password-settings";
|
||||
section.innerHTML = `
|
||||
<h4 class="webauthn-title">${t("mfa.password_change_title")}</h4>
|
||||
<p class="mfa-info-text">${t("mfa.password_change_desc")}</p>
|
||||
<div class="form-group">
|
||||
<label>${t("mfa.current_password_label")}</label>
|
||||
<input type="password" id="pwd-current" class="config-input"
|
||||
placeholder="${t('mfa.current_password_placeholder')}" autocomplete="current-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>${t("mfa.new_password_label")}</label>
|
||||
<input type="password" id="pwd-new" class="config-input"
|
||||
placeholder="${t('mfa.new_password_placeholder')}" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>${t("mfa.new_password_confirm_label")}</label>
|
||||
<input type="password" id="pwd-confirm" class="config-input"
|
||||
placeholder="${t('mfa.new_password_confirm_placeholder')}" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="mfa-recovery-actions">
|
||||
<button class="config-btn-primary" id="pwd-change-btn">${t("mfa.password_change_btn")}</button>
|
||||
</div>
|
||||
<p class="mfa-error hidden" id="pwd-change-error"></p>
|
||||
`;
|
||||
container.appendChild(section);
|
||||
|
||||
section.querySelector("#pwd-change-btn").addEventListener("click", async () => {
|
||||
const errEl = section.querySelector("#pwd-change-error");
|
||||
const current = section.querySelector("#pwd-current").value;
|
||||
const next = section.querySelector("#pwd-new").value;
|
||||
const confirm = section.querySelector("#pwd-confirm").value;
|
||||
const btn = section.querySelector("#pwd-change-btn");
|
||||
errEl.classList.add("hidden");
|
||||
if (!current || !next || !confirm) {
|
||||
errEl.textContent = t("mfa.fill_all_fields");
|
||||
errEl.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
if (next !== confirm) {
|
||||
errEl.textContent = t("mfa.password_mismatch");
|
||||
errEl.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
btn.disabled = true;
|
||||
try {
|
||||
await AuthManager.changePassword(current, next);
|
||||
showToast(t("mfa.password_changed"), "success");
|
||||
section.querySelector("#pwd-current").value = "";
|
||||
section.querySelector("#pwd-new").value = "";
|
||||
section.querySelector("#pwd-confirm").value = "";
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message || String(err);
|
||||
errEl.classList.remove("hidden");
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
async function _renderWebauthnSection(container) {
|
||||
if (!container || !window.PublicKeyCredential) return;
|
||||
|
||||
@@ -1085,10 +1160,10 @@ async function _renderWebauthnSection(container) {
|
||||
const listHtml = keys.length
|
||||
? `<ul class="webauthn-key-list">${keys.map((k) => `
|
||||
<li class="webauthn-key-item">
|
||||
<span class="webauthn-key-label">🔑 ${k.label || "Security key"}</span>
|
||||
<span class="webauthn-key-meta">${(k.transports || []).join(", ") || "—"}</span>
|
||||
<span class="webauthn-key-label">🔑 ${escapeHtml(k.label || "Security key")}</span>
|
||||
<span class="webauthn-key-meta">${escapeHtml((k.transports || []).join(", ") || "—")}</span>
|
||||
<button class="config-btn-secondary config-btn-sm webauthn-key-remove"
|
||||
data-id="${k.credential_id}">${t("mfa.webauthn_remove")}</button>
|
||||
data-id="${escapeHtml(k.credential_id)}">${t("mfa.webauthn_remove")}</button>
|
||||
</li>`).join("")}</ul>`
|
||||
: `<p class="mfa-info-text">${t("mfa.webauthn_none")}</p>`;
|
||||
|
||||
@@ -1111,7 +1186,10 @@ async function _renderWebauthnSection(container) {
|
||||
const label = prompt(t("mfa.webauthn_label_prompt"), "Ma clé");
|
||||
const result = await AuthManager.webauthnRegister(credential, label || "Security key");
|
||||
if (result.recovery_codes && result.recovery_codes.length) {
|
||||
_showRecoveryCodes(result.recovery_codes);
|
||||
// BUG-068: first-time WebAuthn enable issues recovery codes. There is
|
||||
// no #mfa-setup-flow-area in the "already enabled" view, so render
|
||||
// them into the WebAuthn flow area instead of losing them.
|
||||
_showRecoveryCodes(result.recovery_codes, "webauthn-flow-area");
|
||||
} else {
|
||||
showToast(t("mfa.webauthn_added"), "success");
|
||||
}
|
||||
@@ -1145,16 +1223,28 @@ async function _startMfaSetup() {
|
||||
|
||||
try {
|
||||
const data = await AuthManager.mfaSetup();
|
||||
// BUG-068: the QR code comes from the backend as a local SVG data: URI
|
||||
// (see POST /api/auth/mfa/totp/setup → qr_data_url). The previous
|
||||
// third-party QR image was blocked by the CSP
|
||||
// (img-src 'self' data: blob:) so it never displayed — and it leaked the
|
||||
// otpauth URI (TOTP secret) to a third party. Fall back to the manual
|
||||
// secret when the backend has no QR generator available.
|
||||
const qrImg = data.qr_data_url
|
||||
? `<img id="mfa-qr-img" alt="QR Code" class="mfa-qr-code-img"
|
||||
src="${data.qr_data_url}"
|
||||
onerror="this.style.display='none';document.getElementById('mfa-qr-fallback').style.display='block';">`
|
||||
: "";
|
||||
const fallbackStyle = data.qr_data_url ? "display:none" : "";
|
||||
flowArea.innerHTML = `
|
||||
<div class="mfa-setup-card">
|
||||
<h4>${t("mfa.scan_qr")}</h4>
|
||||
<div class="mfa-qr-container">
|
||||
<img id="mfa-qr-img" alt="QR Code" class="mfa-qr-code"
|
||||
src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(data.otpauth_uri)}">
|
||||
${qrImg}
|
||||
<p class="mfa-info-text" id="mfa-qr-fallback" style="${fallbackStyle}">${t("mfa.qr_unavailable")}</p>
|
||||
</div>
|
||||
<details class="mfa-secret-details">
|
||||
<details class="mfa-secret-details" ${data.qr_data_url ? "" : "open"}>
|
||||
<summary>${t("mfa.manual_entry")}</summary>
|
||||
<code class="mfa-secret-code">${data.secret}</code>
|
||||
<code class="mfa-secret-code">${escapeHtml(data.secret)}</code>
|
||||
</details>
|
||||
<div class="mfa-verify-section">
|
||||
<label>${t("mfa.enter_code")}</label>
|
||||
@@ -1201,12 +1291,16 @@ async function _startMfaSetup() {
|
||||
}
|
||||
|
||||
|
||||
function _showRecoveryCodes(codes) {
|
||||
const flowArea = document.getElementById("mfa-setup-flow-area");
|
||||
const area = document.getElementById("mfa-setup-area");
|
||||
function _showRecoveryCodes(codes, targetId) {
|
||||
// BUG-068: the recovery codes must be visible wherever the enable flow ran.
|
||||
// The TOTP flow owns #mfa-setup-flow-area, but the WebAuthn first-enable
|
||||
// path (#webauthn-flow-area) has none — previously those codes were lost.
|
||||
const flowArea = document.getElementById(targetId || "mfa-setup-flow-area")
|
||||
|| document.getElementById("webauthn-flow-area")
|
||||
|| document.getElementById("mfa-setup-area");
|
||||
if (!flowArea) return;
|
||||
|
||||
const codesHtml = codes.map(c => `<code class="mfa-recovery-code">${c}</code>`).join("\n");
|
||||
const codesHtml = codes.map(c => `<code class="mfa-recovery-code">${escapeHtml(c)}</code>`).join("\n");
|
||||
flowArea.innerHTML = `
|
||||
<div class="mfa-recovery-card">
|
||||
<h4>🔑 ${t("mfa.recovery_codes_title")}</h4>
|
||||
|
||||
@@ -1887,6 +1887,18 @@
|
||||
"mfa.disable_confirm_btn": "Disable 2FA",
|
||||
"mfa.disabled_success": "2FA has been disabled.",
|
||||
"mfa.fill_all_fields": "Please fill in all fields.",
|
||||
"mfa.qr_unavailable": "QR code unavailable — use manual entry below.",
|
||||
"mfa.password_change_title": "Password",
|
||||
"mfa.password_change_desc": "Change your account password (min. 8 characters). All other sessions are invalidated.",
|
||||
"mfa.current_password_label": "Current password",
|
||||
"mfa.current_password_placeholder": "Your current password",
|
||||
"mfa.new_password_label": "New password",
|
||||
"mfa.new_password_placeholder": "Min. 8 characters",
|
||||
"mfa.new_password_confirm_label": "Confirm new password",
|
||||
"mfa.new_password_confirm_placeholder": "Repeat the new password",
|
||||
"mfa.password_change_btn": "Change password",
|
||||
"mfa.password_mismatch": "The two passwords do not match.",
|
||||
"mfa.password_changed": "Password updated.",
|
||||
"bookslm.title": "BooksLM",
|
||||
"bookslm.files_indexed": "{count} files indexed",
|
||||
"bookslm.chars_loaded": "{chars} chars loaded",
|
||||
|
||||
@@ -1887,6 +1887,18 @@
|
||||
"mfa.disable_confirm_btn": "Désactiver la 2FA",
|
||||
"mfa.disabled_success": "La 2FA a été désactivée.",
|
||||
"mfa.fill_all_fields": "Veuillez remplir tous les champs.",
|
||||
"mfa.qr_unavailable": "QR code indisponible — utilisez la saisie manuelle ci-dessous.",
|
||||
"mfa.password_change_title": "Mot de passe",
|
||||
"mfa.password_change_desc": "Modifiez le mot de passe de votre compte (min. 8 caractères). Toutes les autres sessions sont invalidées.",
|
||||
"mfa.current_password_label": "Mot de passe actuel",
|
||||
"mfa.current_password_placeholder": "Votre mot de passe actuel",
|
||||
"mfa.new_password_label": "Nouveau mot de passe",
|
||||
"mfa.new_password_placeholder": "Min. 8 caractères",
|
||||
"mfa.new_password_confirm_label": "Confirmer le nouveau mot de passe",
|
||||
"mfa.new_password_confirm_placeholder": "Répétez le nouveau mot de passe",
|
||||
"mfa.password_change_btn": "Changer le mot de passe",
|
||||
"mfa.password_mismatch": "Les deux mots de passe ne correspondent pas.",
|
||||
"mfa.password_changed": "Mot de passe mis à jour.",
|
||||
"bookslm.title": "BooksLM",
|
||||
"bookslm.files_indexed": "{count} fichiers indexés",
|
||||
"bookslm.chars_loaded": "{chars} caractères chargés",
|
||||
|
||||
@@ -4347,6 +4347,76 @@ body.resizing-v {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* BUG-068: .config-btn-primary / .config-btn-danger were used by the account
|
||||
security section (frontend/js/auth.js) but never defined — the buttons fell
|
||||
back to the browser default and ignored the theme. Defined here with the
|
||||
same conventions as .config-btn-save / .config-btn-secondary. */
|
||||
.config-btn-primary {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 6px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
.config-btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.config-btn-primary:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.config-btn-danger {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--danger, #e74c3c);
|
||||
border-radius: 6px;
|
||||
background: var(--danger-bg, #3d1a18);
|
||||
color: var(--danger, #ff7b72);
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
.config-btn-danger:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.config-btn-danger:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* BUG-068: local QR code (backend SVG data: URI) + password section share the
|
||||
security-tab card conventions. */
|
||||
.mfa-qr-code-img {
|
||||
max-width: 200px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
}
|
||||
.password-settings {
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border, #333);
|
||||
}
|
||||
.password-settings .form-group {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.password-settings .form-group label {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-secondary, #aaa);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.password-settings .config-input {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
/* --- AI keys section: accordion redesign (#104) --- */
|
||||
.ai-keys-header {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user