From d1726f0160659cdb261c81a25c6b3037f8581b17 Mon Sep 17 00:00:00 2001
From: Ryan <ryantl66@gmail.com>
Date: Mon, 5 May 2025 07:28:28 -0400
Subject: [PATCH] Refactor auth flow: add loading overlay, separate login,
 extract initializeApp

---
 CHANGELOG.md            |  42 +++++++++++++++-
 public/api/file/symlink |   2 -
 public/index.html       |  84 +++++++++++++++++++-------------
 public/js/adminPanel.js |   6 +--
 public/js/auth.js       | 103 ++++++++++++++++++++++++----------------
 public/js/authModals.js |   2 +-
 public/js/i18n.js       |   2 +
 public/js/main.js       |  50 +++++++++----------
 8 files changed, 183 insertions(+), 108 deletions(-)
 delete mode 100644 public/api/file/symlink
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f49951..300fdc9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Changelog
 
-## Changes 5/4/2025
+## Changes 5/4/2025 v1.3.1
 
 ### Modals
 
@@ -10,9 +10,47 @@
   - TOTP Login & Setup
   - Change Password
 - **Truncated** long filenames in the File Tags modal header using CSS `text-overflow: ellipsis`.
-- **Resized** File Tags modal from 400px → 450px wide (with `max-width: 90vw` fallback).
+- **Resized** File Tags modal from 400px to 450px wide (with `max-width: 90vw` fallback).
 - **Capped** User Panel height at 381px and hidden scrollbars to eliminate layout jumps on hover.
 
+### HTML
+
+- **Moved** `<div id="loginForm">…</div>` out of `.main-wrapper` so the login form can show independently of the app shell.
+- **Added** `<div id="loadingOverlay"></div>` immediately inside `<body>` to cover the UI during auth checks.
+- **Inserted** inline `<style>` in `<head>` to:
+  - Hide `.main-wrapper` by default.
+  - Style `#loadingOverlay` as a full-viewport white overlay.
+  
+- **Added** `addUserModal`, `removeUserModal` & `renameFileModal` modals to `style="display:none;"`
+
+### `main.js`
+
+- **Extracted** `initializeApp()` helper to centralize post-auth startup (tag search, file list, drag-and-drop, folder tree, upload, trash/restore, admin config).
+- **Updated** DOMContentLoaded `checkAuthentication()` flow to call `initializeApp()` when already authenticated.
+- **Extended** `updateAuthenticatedUI()` to call `initializeApp()` after a fresh login so all UI modules re-hydrate.
+- **Enhanced** setup-mode in `checkAuthentication()`:
+  - Show `#addUserModal` as a flex overlay (`style.display = 'flex'`).
+  - Keep `.main-wrapper` hidden until setup completes.
+- **Added** post-setup handler in the Add-User modal’s save button:
+  - Hide setup modal.
+  - Show login form.
+  - Keep app shell hidden.
+  - Pre-fill and focus the new username in the login inputs.
+
+### `auth.js` / Auth Logic
+
+- **Refactored** `checkAuthentication()` to handle three states:
+  1. **`data.setup`** remove overlay, hide main UI, show setup modal.  
+  2. **`data.authenticated`** remove overlay, call `updateAuthenticatedUI()`.  
+  3. **not authenticated** remove overlay, show login form, keep main UI hidden.
+- **Refined** `updateAuthenticatedUI()` to:
+  - Remove loading overlay.
+  - Show `.main-wrapper` and main operations.
+  - Hide `#loginForm`.
+  - Reveal header buttons.
+  - Initialize dynamic header buttons (restore, admin, user-panel).
+  - Call `initializeApp()` to load all modules after login.
+
 ---
 
 ## Changes 5/3/2025 v1.3.0
diff --git a/public/api/file/symlink b/public/api/file/symlink
deleted file mode 100644
index a49ca6b..0000000
--- a/public/api/file/symlink
+++ /dev/null
@@ -1,2 +0,0 @@
-cd /var/www/public
-ln -s ../uploads uploads
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 2b11cd3..1335911 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,21 @@
   <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
   <meta name="csrf-token" content="">
   <meta name="share-url" content="">
+  <style>
+    /* hide the app shell until JS says otherwise */
+    .main-wrapper { display: none; }
+
+    /* full-screen white overlay while we check auth */
+    #loadingOverlay {
+      position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: var(--bg-color,#fff);
+      z-index: 9999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  </style>
   <!-- Google Fonts and Material Icons -->
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
@@ -165,10 +180,42 @@
     </div>
   </header>
 
+  <div id="loadingOverlay"></div>
+
   <!-- Custom Toast Container -->
   <div id="customToast"></div>
   <div id="hiddenCardsContainer" style="display:none;"></div>
 
+  <div class="row mt-4" id="loginForm">
+    <div class="col-12">
+      <form id="authForm" method="post">
+        <div class="form-group">
+          <label for="loginUsername" data-i18n-key="user">User:</label>
+          <input type="text" class="form-control" id="loginUsername" name="username" required autofocus />
+        </div>
+        <div class="form-group">
+          <label for="loginPassword" data-i18n-key="password">Password:</label>
+          <input type="password" class="form-control" id="loginPassword" name="password" required />
+        </div>
+        <button type="submit" class="btn btn-primary btn-block btn-login" data-i18n-key="login">Login</button>
+        <div class="form-group remember-me-container">
+          <input type="checkbox" id="rememberMeCheckbox" name="remember_me" />
+          <label for="rememberMeCheckbox" data-i18n-key="remember_me">Remember me</label>
+        </div>
+      </form>
+      <!-- OIDC Login Option -->
+      <div class="text-center mt-3">
+        <button id="oidcLoginBtn" class="btn btn-secondary" data-i18n-key="login_oidc">Login with OIDC</button>
+      </div>
+      <!-- Basic HTTP Login Option -->
+      <div class="text-center mt-3">
+        <a href="/api/auth/login_basic.php" class="btn btn-secondary" data-i18n-key="basic_http_login">Use Basic
+          HTTP
+          Login</a>
+      </div>
+    </div>
+  </div>
+
   <!-- Main Wrapper: Hidden by default; remove "display: none;" after login -->
   <div class="main-wrapper">
     <!-- Sidebar Drop Zone: Hidden until you drag a card (display controlled by JS) -->
@@ -176,37 +223,6 @@
     <!-- Main Column -->
     <div id="mainColumn" class="main-column">
       <div class="container-fluid">
-        <!-- Login Form (unchanged) -->
-        <div class="row" id="loginForm">
-          <div class="col-12">
-            <form id="authForm" method="post">
-              <div class="form-group">
-                <label for="loginUsername" data-i18n-key="user">User:</label>
-                <input type="text" class="form-control" id="loginUsername" name="username" required autofocus />
-              </div>
-              <div class="form-group">
-                <label for="loginPassword" data-i18n-key="password">Password:</label>
-                <input type="password" class="form-control" id="loginPassword" name="password" required />
-              </div>
-              <button type="submit" class="btn btn-primary btn-block btn-login" data-i18n-key="login">Login</button>
-              <div class="form-group remember-me-container">
-                <input type="checkbox" id="rememberMeCheckbox" name="remember_me" />
-                <label for="rememberMeCheckbox" data-i18n-key="remember_me">Remember me</label>
-              </div>
-            </form>
-            <!-- OIDC Login Option -->
-            <div class="text-center mt-3">
-              <button id="oidcLoginBtn" class="btn btn-secondary" data-i18n-key="login_oidc">Login with OIDC</button>
-            </div>
-            <!-- Basic HTTP Login Option -->
-            <div class="text-center mt-3">
-              <a href="/api/auth/login_basic.php" class="btn btn-secondary" data-i18n-key="basic_http_login">Use Basic
-                HTTP
-                Login</a>
-            </div>
-          </div>
-        </div>
-
         <!-- Main Operations: Upload and Folder Management -->
         <div id="mainOperations">
           <div class="container" style="max-width: 1400px; margin: 0 auto;">
@@ -439,7 +455,7 @@
       <button id="saveNewPasswordBtn" class="btn btn-primary" data-i18n-key="save" style="width:100%;">Save</button>
     </div>
   </div>
-  <div id="addUserModal" class="modal">
+  <div id="addUserModal" class="modal" style="display:none;">
     <div class="modal-content">
       <h3 data-i18n-key="create_new_user_title">Create New User</h3>
       <!-- 1) Add a form around these fields -->
@@ -468,7 +484,7 @@
       </form>
     </div>
   </div>
-  <div id="removeUserModal" class="modal">
+  <div id="removeUserModal" class="modal" style="display:none;">
     <div class="modal-content">
       <h3 data-i18n-key="remove_user_title">Remove User</h3>
       <label for="removeUsernameSelect" data-i18n-key="select_user_remove">Select a user to remove:</label>
@@ -479,7 +495,7 @@
       </div>
     </div>
   </div>
-  <div id="renameFileModal" class="modal">
+  <div id="renameFileModal" class="modal" style="display:none;">
     <div class="modal-content">
       <h4 data-i18n-key="rename_file_title">Rename File</h4>
       <input type="text" id="newFileName" class="form-control" data-i18n-placeholder="rename_file_placeholder"
diff --git a/public/js/adminPanel.js b/public/js/adminPanel.js
index cb4a93f..91b8afa 100644
--- 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 -->
diff --git a/public/js/auth.js b/public/js/auth.js
index 96678c4..f9fceb4 100644
--- 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 () {
diff --git a/public/js/authModals.js b/public/js/authModals.js
index 8194406..c862f04 100644
--- 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"};
diff --git a/public/js/i18n.js b/public/js/i18n.js
index 7d436d1..1e97be7 100644
--- 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",
diff --git a/public/js/main.js b/public/js/main.js
index abb26ee..f9562f7 100644
--- 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.
