fix: section Securite du compte incomplete BUG-068 (boutons theme, QR local, mot de passe, recovery WebAuthn)

frontend/js/auth.js

@@ -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>