Refactor auth flow: add loading overlay, separate login, extract initializeApp

2025-05-05 07:28:28 -04:00
parent bd1841b788
commit d1726f0160
8 changed files with 183 additions and 108 deletions
--- a/public/js/adminPanel.js
+++ b/public/js/adminPanel.js
@@ -3,7 +3,7 @@ import { loadAdminConfigFunc } from './auth.js';
 import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
 import { sendRequest } from './networkUtils.js';

-const version = "v1.3.0";
+const version = "v1.3.1";
 const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;

 // ————— Inject updated styles —————
@@ -389,7 +389,7 @@ export function openAdminPanel() {
        // — Header Settings —
        document.getElementById("headerSettingsContent").innerHTML = `
          <div class="form-group">
-            <label for="headerTitle">${t("header_title")}:</label>
+            <label for="headerTitle">${t("header_title_text")}:</label>
            <input type="text" id="headerTitle" class="form-control" value="${window.headerTitle}" />
          </div>
        `;
@@ -548,7 +548,7 @@ export function openUserPermissionsModal() {
        `;
    userPermissionsModal.innerHTML = `
          <div class="modal-content" style="${modalContentStyles}">
-            <span id="closeUserPermissionsModal" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+            <span id="closeUserPermissionsModal" class="editor-close-btn">&times;</span>
            <h3>${t("user_permissions")}</h3>
            <div id="userPermissionsList" style="max-height: 300px; overflow-y: auto; margin-bottom: 15px;">
              <!-- User rows will be loaded here -->
--- a/public/js/auth.js
+++ b/public/js/auth.js
@@ -18,6 +18,7 @@ import {
  setLastLoginData
 } from './authModals.js';
 import { openAdminPanel } from './adminPanel.js';
+import { initializeApp } from './main.js';

 // Production OIDC configuration (override via API as needed)
 const currentOIDCConfig = {
@@ -127,13 +128,13 @@ function updateItemsPerPageSelect() {

 function updateLoginOptionsUI({ disableFormLogin, disableBasicAuth, disableOIDCLogin }) {
  const authForm = document.getElementById("authForm");
-  if 
+  if
    (authForm) {
-      authForm.style.display = disableFormLogin ? "none" : "block";
-      setTimeout(() => {
-        const loginInput = document.getElementById('loginUsername');
-        if (loginInput) loginInput.focus();
-      }, 0);      
+    authForm.style.display = disableFormLogin ? "none" : "block";
+    setTimeout(() => {
+      const loginInput = document.getElementById('loginUsername');
+      if (loginInput) loginInput.focus();
+    }, 0);
  }
  const basicAuthLink = document.querySelector("a[href='/api/auth/login_basic.php']");
  if (basicAuthLink) basicAuthLink.style.display = disableBasicAuth ? "none" : "inline-block";
@@ -189,6 +190,11 @@ function insertAfter(newNode, referenceNode) {
 }

 function updateAuthenticatedUI(data) {
+  document.getElementById('loadingOverlay').remove();
+
+  // show the wrapper (so the login form can be visible)
+  document.querySelector('.main-wrapper').style.display = '';
+  document.getElementById('loginForm').style.display = 'none';
  toggleVisibility("loginForm", false);
  toggleVisibility("mainOperations", true);
  toggleVisibility("uploadFileForm", true);
@@ -263,6 +269,7 @@ function updateAuthenticatedUI(data) {
      userPanelBtn.style.display = "block";
    }
  }
+  initializeApp();
  applyTranslations();
  updateItemsPerPageSelect();
  updateLoginOptionsUIFromStorage();
@@ -272,6 +279,11 @@ function checkAuthentication(showLoginToast = true) {
  return sendRequest("/api/auth/checkAuth.php")
    .then(data => {
      if (data.setup) {
+        document.getElementById('loadingOverlay').remove();
+
+        // show the wrapper (so the login form can be visible)
+        document.querySelector('.main-wrapper').style.display = '';
+        document.getElementById('loginForm').style.display = 'none';
        window.setupMode = true;
        if (showLoginToast) showToast("Setup mode: No users found. Please add an admin user.");
        toggleVisibility("loginForm", false);
@@ -283,6 +295,7 @@ function checkAuthentication(showLoginToast = true) {
      }
      window.setupMode = false;
      if (data.authenticated) {
+
        localStorage.setItem('isAdmin', data.isAdmin ? 'true' : 'false');
        localStorage.setItem("folderOnly", data.folderOnly);
        localStorage.setItem("readOnly", data.readOnly);
@@ -298,6 +311,11 @@ function checkAuthentication(showLoginToast = true) {
        updateAuthenticatedUI(data);
        return data;
      } else {
+        document.getElementById('loadingOverlay').remove();
+
+        // show the wrapper (so the login form can be visible)
+        document.querySelector('.main-wrapper').style.display = '';
+        document.getElementById('loginForm').style.display = '';
        if (showLoginToast) showToast("Please log in to continue.");
        toggleVisibility("loginForm", true);
        toggleVisibility("mainOperations", false);
@@ -443,52 +461,55 @@ function initAuth() {
      submitLogin(formData);
    });
  }
-  
+
  document.getElementById("addUserBtn").addEventListener("click", function () {
    resetUserForm();
    toggleVisibility("addUserModal", true);
    document.getElementById("newUsername").focus();
  });
-  
-// remove your old saveUserBtn click-handler…

-// instead:
-const addUserForm = document.getElementById("addUserForm");
-addUserForm.addEventListener("submit", function (e) {
-  e.preventDefault();   // stop the browser from reloading the page
+  // remove your old saveUserBtn click-handler…

-  const newUsername = document.getElementById("newUsername").value.trim();
-  const newPassword = document.getElementById("addUserPassword").value.trim();
-  const isAdmin     = document.getElementById("isAdmin").checked;
+  // instead:
+  const addUserForm = document.getElementById("addUserForm");
+  addUserForm.addEventListener("submit", function (e) {
+    e.preventDefault();   // stop the browser from reloading the page

-  if (!newUsername || !newPassword) {
-    showToast("Username and password are required!");
-    return;
-  }
+    const newUsername = document.getElementById("newUsername").value.trim();
+    const newPassword = document.getElementById("addUserPassword").value.trim();
+    const isAdmin = document.getElementById("isAdmin").checked;

-  let url = "/api/addUser.php";
-  if (window.setupMode) url += "?setup=1";
+    if (!newUsername || !newPassword) {
+      showToast("Username and password are required!");
+      return;
+    }

-  fetchWithCsrf(url, {
-    method: "POST",
-    credentials: "include",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ username: newUsername, password: newPassword, isAdmin })
-  })
-    .then(r => r.json())
-    .then(data => {
-      if (data.success) {
-        showToast("User added successfully!");
-        closeAddUserModal();
-        checkAuthentication(false);
-      } else {
-        showToast("Error: " + (data.error || "Could not add user"));
-      }
+    let url = "/api/addUser.php";
+    if (window.setupMode) url += "?setup=1";
+
+    fetchWithCsrf(url, {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username: newUsername, password: newPassword, isAdmin })
    })
-    .catch(() => {
-      showToast("Error: Could not add user");
-    });
-});
+      .then(r => r.json())
+      .then(data => {
+        if (data.success) {
+          showToast("User added successfully!");
+          closeAddUserModal();
+          checkAuthentication(false);
+          if (window.setupMode) {
+            toggleVisibility("loginForm", true);
+          }
+        } else {
+          showToast("Error: " + (data.error || "Could not add user"));
+        }
+      })
+      .catch(() => {
+        showToast("Error: Could not add user");
+      });
+  });
  document.getElementById("cancelUserBtn").addEventListener("click", closeAddUserModal);

  document.getElementById("removeUserBtn").addEventListener("click", function () {
--- a/public/js/authModals.js
+++ b/public/js/authModals.js
@@ -174,7 +174,7 @@ export function openUserPanel() {
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: hidden;
-    max-height: 381px !important;
+    max-height: 383px !important;
    flex-shrink: 0 !important;
    scrollbar-gutter: stable both-edges;
    border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
--- a/public/js/i18n.js
+++ b/public/js/i18n.js
@@ -55,6 +55,7 @@ const translations = {
    // Additional keys for HTML translations:
    "title": "FileRise",
    "header_title": "FileRise",
+    "header_title_text": "Header Title",
    "logout": "Logout",
    "change_password": "Change Password",
    "restore_text": "Restore or",
@@ -316,6 +317,7 @@ const translations = {
    // Additional keys for HTML translations:
    "title": "FileRise",
    "header_title": "FileRise",
+    "header_title_text": "Header Title",
    "logout": "Cerrar sesión",
    "change_password": "Cambiar contraseña",
    "restore_text": "Restaurar o",
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -14,6 +14,28 @@ import { initFileActions, renameFile, openDownloadModal, confirmSingleDownload }
 import { editFile, saveFile } from './fileEditor.js';
 import { t, applyTranslations, setLocale } from './i18n.js';

+export function initializeApp() {
+  window.currentFolder = "root";
+  initTagSearch();
+  loadFileList(window.currentFolder);
+  initDragAndDrop();
+  loadSidebarOrder();
+  loadHeaderOrder();
+  initFileActions();
+  initUpload();
+  loadFolderTree();
+  setupTrashRestoreDelete();
+  loadAdminConfigFunc();
+
+    const helpBtn     = document.getElementById("folderHelpBtn");
+    const helpTooltip = document.getElementById("folderHelpTooltip");
+    if (helpBtn && helpTooltip) {
+      helpBtn.addEventListener("click", () => {
+        helpTooltip.style.display =
+          helpTooltip.style.display === "block" ? "none" : "block";
+      });
+    }
+}

 export function loadCsrfToken() {
  return fetchWithCsrf('/api/auth/token.php', {
@@ -100,31 +122,9 @@ document.addEventListener("DOMContentLoaded", function () {
    // Continue with initializations that rely on a valid CSRF token:
    checkAuthentication().then(authenticated => {
      if (authenticated) {
-        window.currentFolder = "root";
-        initTagSearch();
-        loadFileList(window.currentFolder);
-        initDragAndDrop();
-        loadSidebarOrder();
-        loadHeaderOrder();
-        initFileActions();
-        initUpload();
-        loadFolderTree();
-        setupTrashRestoreDelete();
-        loadAdminConfigFunc();
-
-        const helpBtn = document.getElementById("folderHelpBtn");
-        const helpTooltip = document.getElementById("folderHelpTooltip");
-        helpBtn.addEventListener("click", function () {
-          // Toggle display of the tooltip.
-          if (helpTooltip.style.display === "none" || helpTooltip.style.display === "") {
-            helpTooltip.style.display = "block";
-          } else {
-            helpTooltip.style.display = "none";
-          }
-        });
-      } else {
-        console.warn("User not authenticated. Data loading deferred.");
-      }
+        document.getElementById('loadingOverlay').remove();
+        initializeApp();
+      } 
    });

    // Other DOM initialization that can happen after CSRF is ready.