Admin Panel Refactor & Enhancements

2025-05-04 00:23:46 -04:00
parent 4d329e046f
commit 56f34ba362
3 changed files with 305 additions and 248 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,54 @@
 # Changelog

+## Changes 5/3/2025 v1.3.0
+
+**Admin Panel Refactor & Enhancements**  
+
+### Moved from `authModals.js` to `adminPanel.js`
+
+- Extracted all admin-related UI and logic out of `authModals.js`
+- Created a standalone `adminPanel.js` module  
+- Initialized `openAdminPanel()` and `closeAdminPanel()` exports
+
+### Responsive, Collapsible Sections
+
+- Injected new CSS via JS (`adminPanelStyles`)  
+  - Default modal width: 50%  
+  - Small-screen override (`@media (max-width: 600px)`) to 90% width  
+- Introduced `.section-header` / `.section-content` pattern  
+  - Click header to expand/collapse its content  
+  - Animated arrow via Material Icons  
+  - Indented and padded expanded content  
+
+### “Manage Shared Links” Feature
+
+- Added new **Manage Shared Links** section to Admin Panel  
+- Endpoint **GET** `/api/admin/readMetadata.php?file=…`  
+  - Reads `share_folder_links.json` & `share_links.json` under `META_DIR`  
+- Endpoint **POST**  
+  - `/api/folder/deleteShareFolderLink.php`  
+  - `/api/file/deleteShareLink.php`  
+- `loadShareLinksSection()` AJAX loader  
+  - Displays folder & file shares, expiry dates, upload-allowed, and 🔒 if password-protected  
+  - “🗑️” delete buttons refresh the list on success  
+
+### Dark-Mode & Theming Fixes
+
+- Dark-mode CSS overrides for:
+  - Modal border  
+  - `.btn-primary`, `.btn-secondary`  
+  - `.form-control` backgrounds & placeholders  
+  - Section headers & icons  
+- Close button restyled to use shared **.editor-close-btn** look
+
+### API and Controller changes
+
+- Updated all endpoints to use correct controller casing  
+- Renamed controller files to PascalCase (e.g. `adminController.php` to `AdminController.php`, `fileController.php` to `FileController.php`, `folderController.php` to `FolderController.php`)  
+- Adjusted endpoint paths to match controller filenames
+
+---
+
 ## Changes 4/30/2025 v1.2.8

 - **Added** PDF preview in `filePreview.js` (the `extension === "pdf"` block): replaced in-modal `<embed>` with `window.open(urlWithTs, "_blank")` and closed the modal to avoid CSP `frame-ancestors 'none'` restrictions.
--- a/public/js/adminPanel.js
+++ b/public/js/adminPanel.js
@@ -7,7 +7,7 @@ const version = "v1.3.0";
 const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;

 // ————— Inject updated styles —————
-(function(){
+(function () {
  if (document.getElementById('adminPanelStyles')) return;
  const style = document.createElement('style');
  style.id = 'adminPanelStyles';
@@ -113,7 +113,7 @@ const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;
      }
    `;
  document.head.appendChild(style);
-  })();
+})();
 // ————————————————————————————————————

 let originalAdminConfig = {};
@@ -184,21 +184,29 @@ function loadShareLinksSection() {
  const container = document.getElementById("shareLinksContent");
  container.textContent = t("loading") + "...";

+  // Helper to fetch a metadata file or return {} on any error
+  const fetchMeta = file =>
+    fetch(`/api/admin/readMetadata.php?file=${file}`, { credentials: "include" })
+      .then(r => r.ok ? r.json() : {})   // non-2xx → treat as empty
+      .catch(() => ({}));
+
  Promise.all([
-      fetch("/api/admin/readMetadata.php?file=share_folder_links.json", { credentials: "include" })
-        .then(r => r.ok ? r.json() : Promise.reject(`Folder fetch ${r.status}`)),
-      fetch("/api/admin/readMetadata.php?file=share_links.json", { credentials: "include" })
-        .then(r => r.ok ? r.json() : Promise.reject(`File fetch ${r.status}`))
+    fetchMeta("share_folder_links.json"),
+    fetchMeta("share_links.json")
  ])
    .then(([folders, files]) => {
-      let html = `<h5>${t("folder_shares")}</h5><ul>`;
+      // If nothing at all, show a friendly message
+      if (Object.keys(folders).length === 0 && Object.keys(files).length === 0) {
+        container.textContent = t("no_shared_links_available");
+        return;
+      }

+      let html = `<h5>${t("folder_shares")}</h5><ul>`;
      Object.entries(folders).forEach(([token, o]) => {
        const lock = o.password ? `🔒 ` : "";
        html += `
        <li>
-            ${lock}
-            <strong>${o.folder}</strong>
+          ${lock}<strong>${o.folder}</strong>
          <small>(${new Date(o.expires * 1000).toLocaleString()})</small>
          <button type="button"
                  data-key="${token}"
@@ -208,13 +216,11 @@ function loadShareLinksSection() {
      });

      html += `</ul><h5 style="margin-top:1em;">${t("file_shares")}</h5><ul>`;
-  
      Object.entries(files).forEach(([token, o]) => {
        const lock = o.password ? `🔒 ` : "";
        html += `
        <li>
-            ${lock}
-            <strong>${o.folder}/${o.file}</strong>
+          ${lock}<strong>${o.folder}/${o.file}</strong>
          <small>(${new Date(o.expires * 1000).toLocaleString()})</small>
          <button type="button"
                  data-key="${token}"
@@ -222,8 +228,8 @@ function loadShareLinksSection() {
                  class="btn btn-sm btn-link delete-share">🗑️</button>
        </li>`;
      });
-  
      html += `</ul>`;
+
      container.innerHTML = html;

      // wire up delete buttons
@@ -251,7 +257,7 @@ function loadShareLinksSection() {
                showToast(t("share_deleted_successfully"));
                loadShareLinksSection();
              } else {
-              showToast(t("error_deleting_share") + ": " + (json.error||""), "error");
+                showToast(t("error_deleting_share") + ": " + (json.error || ""), "error");
              }
            })
            .catch(err => {
@@ -265,36 +271,36 @@ function loadShareLinksSection() {
      console.error("loadShareLinksSection error:", err);
      container.textContent = t("error_loading_share_links");
    });
-  }
+}


 export function openAdminPanel() {
-  fetch("/api/admin/getConfig.php",{credentials:"include"})
-    .then(r=>r.json())
-    .then(config=>{
+  fetch("/api/admin/getConfig.php", { credentials: "include" })
+    .then(r => r.json())
+    .then(config => {
      // apply header title + globals
-      if(config.header_title){
+      if (config.header_title) {
        document.querySelector(".header-title h1").textContent = config.header_title;
        window.headerTitle = config.header_title;
      }
-      if(config.oidc)          Object.assign(window.currentOIDCConfig,config.oidc);
-      if(config.globalOtpauthUrl) window.currentOIDCConfig.globalOtpauthUrl = config.globalOtpauthUrl;
+      if (config.oidc) Object.assign(window.currentOIDCConfig, config.oidc);
+      if (config.globalOtpauthUrl) window.currentOIDCConfig.globalOtpauthUrl = config.globalOtpauthUrl;

      const dark = document.body.classList.contains("dark-mode");
-      const bg   = dark?"rgba(0,0,0,0.7)":"rgba(0,0,0,0.3)";
-      const inner= `
-        background:${dark?"#2c2c2c":"#fff"};
-        color:${dark?"#e0e0e0":"#000"};
+      const bg = dark ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+      const inner = `
+        background:${dark ? "#2c2c2c" : "#fff"};
+        color:${dark ? "#e0e0e0" : "#000"};
        padding:20px; max-width:1100px; width:50%;
        border-radius:8px; position:relative;
        max-height:90vh; overflow:auto;
-        border:1px solid ${dark?"#555":"#ccc"};
+        border:1px solid ${dark ? "#555" : "#ccc"};
      `;

      let mdl = document.getElementById("adminPanelModal");
-      if(!mdl){
+      if (!mdl) {
        mdl = document.createElement("div");
-        mdl.id="adminPanelModal";
+        mdl.id = "adminPanelModal";
        mdl.style.cssText = `
          position:fixed; top:0; left:0;
          width:100vw; height:100vh;
@@ -310,14 +316,14 @@ export function openAdminPanel() {
              
              <!-- each section: header + content -->
              ${[
-                { id:"userManagement", label:t("user_management") },
-                { id:"headerSettings", label:t("header_settings") },
-                { id:"loginOptions",   label:t("login_options") },
-                { id:"webdav",         label:"WebDAV Access" },
-                { id:"upload",         label:t("shared_max_upload_size_bytes") },
-                { id:"oidc",           label:t("oidc_configuration") + " & TOTP" },
-                { id:"shareLinks",     label:t("manage_shared_links") }
-              ].map(sec=>`
+            { id: "userManagement", label: t("user_management") },
+            { id: "headerSettings", label: t("header_settings") },
+            { id: "loginOptions", label: t("login_options") },
+            { id: "webdav", label: "WebDAV Access" },
+            { id: "upload", label: t("shared_max_upload_size_bytes_title") },
+            { id: "oidc", label: t("oidc_configuration") + " & TOTP" },
+            { id: "shareLinks", label: t("manage_shared_links") }
+          ].map(sec => `
                <div id="${sec.id}Header" class="section-header collapsed">
                  ${sec.label} <i class="material-icons">expand_more</i>
                </div>
@@ -340,10 +346,10 @@ export function openAdminPanel() {
          .addEventListener("click", closeAdminPanel);

        // Section toggles
-        ["userManagement","headerSettings","loginOptions","webdav","upload","oidc","shareLinks"]
-          .forEach(id=>{
-            document.getElementById(id+"Header")
-              .addEventListener("click", ()=>toggleSection(id));
+        ["userManagement", "headerSettings", "loginOptions", "webdav", "upload", "oidc", "shareLinks"]
+          .forEach(id => {
+            document.getElementById(id + "Header")
+              .addEventListener("click", () => toggleSection(id));
          });

        // Populate each section’s CONTENT:
@@ -354,14 +360,14 @@ export function openAdminPanel() {
          <button type="button" id="adminOpenUserPermissions" class="btn btn-secondary">${t("user_permissions")}</button>
        `;
        document.getElementById("adminOpenAddUser")
-          .addEventListener("click",()=>{
-            toggleVisibility("addUserModal",true);
+          .addEventListener("click", () => {
+            toggleVisibility("addUserModal", true);
            document.getElementById("newUsername").focus();
          });
        document.getElementById("adminOpenRemoveUser")
-          .addEventListener("click",()=>{
-            if(typeof window.loadUserList==="function") window.loadUserList();
-            toggleVisibility("removeUserModal",true);
+          .addEventListener("click", () => {
+            if (typeof window.loadUserList === "function") window.loadUserList();
+            toggleVisibility("removeUserModal", true);
          });
        document.getElementById("adminOpenUserPermissions")
          .addEventListener("click", openUserPermissionsModal);
@@ -401,21 +407,21 @@ export function openAdminPanel() {
          <div class="form-group"><label for="oidcClientId">${t("oidc_client_id")}:</label><input type="text" id="oidcClientId" class="form-control" value="${window.currentOIDCConfig.clientId}" /></div>
          <div class="form-group"><label for="oidcClientSecret">${t("oidc_client_secret")}:</label><input type="text" id="oidcClientSecret" class="form-control" value="${window.currentOIDCConfig.clientSecret}" /></div>
          <div class="form-group"><label for="oidcRedirectUri">${t("oidc_redirect_uri")}:</label><input type="text" id="oidcRedirectUri" class="form-control" value="${window.currentOIDCConfig.redirectUri}" /></div>
-          <div class="form-group"><label for="globalOtpauthUrl">${t("global_otpauth_url")}:</label><input type="text" id="globalOtpauthUrl" class="form-control" value="${window.currentOIDCConfig.globalOtpauthUrl||'otpauth://totp/{label}?secret={secret}&issuer=FileRise'}" /></div>
+          <div class="form-group"><label for="globalOtpauthUrl">${t("global_otpauth_url")}:</label><input type="text" id="globalOtpauthUrl" class="form-control" value="${window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/{label}?secret={secret}&issuer=FileRise'}" /></div>
        `;

        // — Share Links —
-        document.getElementById("shareLinksContent").textContent = t("loading")+"…";
+        document.getElementById("shareLinksContent").textContent = t("loading") + "…";

        // — Save handler & constraints —
        document.getElementById("saveAdminSettings")
          .addEventListener("click", handleSave);
-        ["disableFormLogin","disableBasicAuth","disableOIDCLogin"].forEach(id=>{
+        ["disableFormLogin", "disableBasicAuth", "disableOIDCLogin"].forEach(id => {
          document.getElementById(id)
-            .addEventListener("change", e=>{
-              const chk = ["disableFormLogin","disableBasicAuth","disableOIDCLogin"]
-                .filter(i=>document.getElementById(i).checked).length;
-              if(chk===3){
+            .addEventListener("change", e => {
+              const chk = ["disableFormLogin", "disableBasicAuth", "disableOIDCLogin"]
+                .filter(i => document.getElementById(i).checked).length;
+              if (chk === 3) {
                showToast(t("at_least_one_login_method"));
                e.target.checked = false;
              }
@@ -423,77 +429,77 @@ export function openAdminPanel() {
        });

        // Initialize inputs from config + capture
-        document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin===true;
-        document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth===true;
-        document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin===true;
-        document.getElementById("enableWebDAV").checked     = config.enableWebDAV===true;
-        document.getElementById("sharedMaxUploadSize").value = config.sharedMaxUploadSize||"";
+        document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin === true;
+        document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth === true;
+        document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin === true;
+        document.getElementById("enableWebDAV").checked = config.enableWebDAV === true;
+        document.getElementById("sharedMaxUploadSize").value = config.sharedMaxUploadSize || "";
        captureInitialAdminConfig();

      } else {
        // modal already exists → just refresh values & re-show
        mdl.style.display = "flex";
        // update dark/light as above...
-        document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin===true;
-        document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth===true;
-        document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin===true;
-        document.getElementById("enableWebDAV").checked     = config.enableWebDAV===true;
-        document.getElementById("sharedMaxUploadSize").value = config.sharedMaxUploadSize||"";
+        document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin === true;
+        document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth === true;
+        document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin === true;
+        document.getElementById("enableWebDAV").checked = config.enableWebDAV === true;
+        document.getElementById("sharedMaxUploadSize").value = config.sharedMaxUploadSize || "";
        document.getElementById("oidcProviderUrl").value = window.currentOIDCConfig.providerUrl;
        document.getElementById("oidcClientId").value = window.currentOIDCConfig.clientId;
        document.getElementById("oidcClientSecret").value = window.currentOIDCConfig.clientSecret;
        document.getElementById("oidcRedirectUri").value = window.currentOIDCConfig.redirectUri;
-        document.getElementById("globalOtpauthUrl").value   = window.currentOIDCConfig.globalOtpauthUrl||'';
+        document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig.globalOtpauthUrl || '';
        captureInitialAdminConfig();
      }
    })
-    .catch(()=>{/* if even fetching fails, open empty panel */});
+    .catch(() => {/* if even fetching fails, open empty panel */ });
 }

-function handleSave(){
+function handleSave() {
  const dFL = document.getElementById("disableFormLogin").checked;
  const dBA = document.getElementById("disableBasicAuth").checked;
  const dOIDC = document.getElementById("disableOIDCLogin").checked;
  const eWD = document.getElementById("enableWebDAV").checked;
-  const sMax = parseInt(document.getElementById("sharedMaxUploadSize").value,10)||0;
+  const sMax = parseInt(document.getElementById("sharedMaxUploadSize").value, 10) || 0;
  const nHT = document.getElementById("headerTitle").value.trim();
  const nOIDC = {
-    providerUrl : document.getElementById("oidcProviderUrl").value.trim(),
-    clientId    : document.getElementById("oidcClientId").value.trim(),
+    providerUrl: document.getElementById("oidcProviderUrl").value.trim(),
+    clientId: document.getElementById("oidcClientId").value.trim(),
    clientSecret: document.getElementById("oidcClientSecret").value.trim(),
-    redirectUri : document.getElementById("oidcRedirectUri").value.trim()
+    redirectUri: document.getElementById("oidcRedirectUri").value.trim()
  };
  const gURL = document.getElementById("globalOtpauthUrl").value.trim();

-  if([dFL,dBA,dOIDC].filter(x=>x).length===3){
+  if ([dFL, dBA, dOIDC].filter(x => x).length === 3) {
    showToast(t("at_least_one_login_method"));
    return;
  }

-  sendRequest("/api/admin/updateConfig.php","POST",{
-    header_title:nHT, oidc:nOIDC,
-    disableFormLogin:dFL, disableBasicAuth:dBA, disableOIDCLogin:dOIDC,
-    enableWebDAV:eWD, sharedMaxUploadSize:sMax, globalOtpauthUrl:gURL
-  },{
-    "X-CSRF-Token":window.csrfToken
-  }).then(res=>{
-    if(res.success){
-      showToast(t("settings_updated_successfully"),"success");
+  sendRequest("/api/admin/updateConfig.php", "POST", {
+    header_title: nHT, oidc: nOIDC,
+    disableFormLogin: dFL, disableBasicAuth: dBA, disableOIDCLogin: dOIDC,
+    enableWebDAV: eWD, sharedMaxUploadSize: sMax, globalOtpauthUrl: gURL
+  }, {
+    "X-CSRF-Token": window.csrfToken
+  }).then(res => {
+    if (res.success) {
+      showToast(t("settings_updated_successfully"), "success");
      captureInitialAdminConfig();
      closeAdminPanel();
      loadAdminConfigFunc();
    } else {
-      showToast(t("error_updating_settings")+": "+(res.error||t("unknown_error")),"error");
+      showToast(t("error_updating_settings") + ": " + (res.error || t("unknown_error")), "error");
    }
-  }).catch(()=>{/*noop*/});
+  }).catch(() => {/*noop*/ });
 }

 export async function closeAdminPanel() {
-  if(hasUnsavedChanges()){
+  if (hasUnsavedChanges()) {
    const ok = await showCustomConfirmModal(t("unsaved_changes_confirm"));
-    if(!ok) return;
+    if (!ok) return;
  }
-  document.getElementById("adminPanelModal").style.display="none";
+  document.getElementById("adminPanelModal").style.display = "none";
 }

 // --- New: User Permissions Modal ---
@@ -581,9 +587,9 @@ export function openUserPermissionsModal() {
  }
  // Load the list of users into the modal.
  loadUserPermissionsList();
-  }
+}

-  function loadUserPermissionsList() {
+function loadUserPermissionsList() {
  const listContainer = document.getElementById("userPermissionsList");
  if (!listContainer) return;
  listContainer.innerHTML = "";
@@ -649,4 +655,4 @@ export function openUserPermissionsModal() {
    .catch(() => {
      listContainer.innerHTML = "<p>" + t("error_loading_users") + "</p>";
    });
-  }
+}
--- a/public/js/i18n.js
+++ b/public/js/i18n.js
@@ -184,6 +184,7 @@ const translations = {

    // Admin Panel
    "header_settings": "Header Settings",
+    "shared_max_upload_size_bytes_title": "Shared Max Upload Size",
    "shared_max_upload_size_bytes": "Shared Max Upload Size (bytes)",
    "max_bytes_shared_uploads_note": "Enter maximum bytes allowed for shared-folder uploads",
    "manage_shared_links": "Manage Shared Links",
@@ -194,6 +195,7 @@ const translations = {
    "share_deleted_successfully": "Share deleted successfully",
    "error_deleting_share": "Error deleting share",
    "password_protected": "Password protected",
+    "no_shared_links_available": "No shared links available",


    // NEW KEYS ADDED FOR ADMIN, USER PANELS, AND TOTP MODALS: