Function openTOTPModal

public/js/authModals.js:175–257

()

}

export function openTOTPModal() {
  let totpModal = document.getElementById("totpModal");
  const isDarkMode = document.body.classList.contains("dark-mode");
  const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
  const modalContentStyles = `
    background: ${isDarkMode ? "#2c2c2c" : "#fff"};
    color: ${isDarkMode ? "#e0e0e0" : "#000"};
    padding: 20px; max-width:400px; width:90%; border-radius:8px; position:relative;
  `;
  if (!totpModal) {
    totpModal = document.createElement("div");
    totpModal.id = "totpModal";
    totpModal.style.cssText = `
      position: fixed; top:0; left:0; width:100vw; height:100vh;
      background-color:${overlayBackground}; display:flex; justify-content:center; align-items:center;
      z-index:3100;
    `;
    totpModal.innerHTML = `
      <div class="modal-content" style="${modalContentStyles}">
        <span id="closeTOTPModal" class="editor-close-btn">&times;</span>
        <h3>${t("totp_setup")}</h3>
        <p>${t("scan_qr_code")}</p>
        <img id="totpQRCodeImage" src="" alt="TOTP QR Code" style="max-width:100%; height:auto; display:block; margin:0 auto;" />
        <br/>
        <p>${t("enter_totp_confirmation")}</p>
        <input type="text" id="totpConfirmInput" maxlength="6" style="font-size:24px; text-align:center; width:100%; padding:10px;" placeholder="6-digit code" />
        <br/><br/>
        <button type="button" id="confirmTOTPBtn" class="btn btn-primary">${t("confirm")}</button>
      </div>
    `;
    document.body.appendChild(totpModal);
    loadTOTPQRCode();
    document.getElementById("closeTOTPModal").addEventListener("click", () => closeTOTPModal(true));
    document.getElementById("confirmTOTPBtn").addEventListener("click", async function () {
      const code = document.getElementById("totpConfirmInput").value.trim();
      if (code.length !== 6) { showToast(t("please_enter_valid_code")); return; }
      const tokenRes = await fetch("/api/auth/token.php", { credentials: "include" });
      if (!tokenRes.ok) { showToast(t("error_verifying_totp_code")); return; }
      window.csrfToken = (await tokenRes.json()).csrf_token;
      const verifyRes = await fetch("/api/profile/totp_verify.php", {
        method: "POST", credentials: "include",
        headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
        body: JSON.stringify({ totp_code: code })
      });
      if (!verifyRes.ok) { showToast(t("totp_verification_failed")); return; }
      const result = await verifyRes.json();
      if (result.status !== "ok") { showToast(result.message || t("totp_verification_failed")); return; }
      showToast(t("totp_enabled_successfully"));
      const saveRes = await fetch("/api/profile/totp_saveCode.php", {
        method: "POST", credentials: "include", headers: { "X-CSRF-Token": window.csrfToken }
      });
      if (!saveRes.ok) { showToast(t("error_generating_recovery_code")); closeTOTPModal(false); return; }
      const data = await saveRes.json();
      if (data.status === "ok" && data.recoveryCode) showRecoveryCodeModal(data.recoveryCode);
      else showToast(t("error_generating_recovery_code") + ": " + (data.message || t("unknown_error")));
      closeTOTPModal(false);
    });