Refactor AdminPanel: extract module, add collapsible sections & shared-links management, enforce PascalCase controllers

public/js/adminPanel.js

@@ -0,0 +1,652 @@
+import { t } from './i18n.js';
+import { loadAdminConfigFunc } from './auth.js';
+import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
+import { sendRequest } from './networkUtils.js';
+
+const version = "v1.3.0";
+const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;
+
+// ————— Inject updated styles —————
+(function(){
+    if (document.getElementById('adminPanelStyles')) return;
+    const style = document.createElement('style');
+    style.id = 'adminPanelStyles';
+    style.textContent = `
+        /* Modal sizing */
+    #adminPanelModal .modal-content {
+      max-width: 1100px;
+      width: 50%;
+    }
+
+    /* Small phones: 90% width */
+    @media (max-width: 900px) {
+      #adminPanelModal .modal-content {
+        width: 90% !important;
+        max-width: none !important;
+      }
+    }
+
+    /* Dark-mode fixes */
+    body.dark-mode #adminPanelModal .modal-content {
+      border-color: #555 !important;
+    }
+
+      /* enforce light‐mode styling */
+      #adminPanelModal .modal-content {
+        max-width: 1100px;
+        width: 50%;
+        background: #fff !important;
+        color: #000 !important;
+        border: 1px solid #ccc !important;
+      }
+  
+      /* enforce dark‐mode styling */
+      body.dark-mode #adminPanelModal .modal-content {
+        background: #2c2c2c !important;
+        color: #e0e0e0 !important;
+        border-color: #555 !important;
+      }
+  
+      /* form controls in dark */
+      body.dark-mode .form-control {
+        background-color: #333;
+        border-color: #555;
+        color: #eee;
+      }
+      body.dark-mode .form-control::placeholder { color: #888; }
+  
+      /* Section headers */
+      .section-header {
+        background: #f5f5f5;
+        padding: 10px 15px;
+        cursor: pointer;
+        border-radius: 4px;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 16px;
+      }
+      .section-header:first-of-type { margin-top: 0; }
+      .section-header.collapsed .material-icons { transform: rotate(-90deg); }
+      .section-header .material-icons { transition: transform .3s; color: #444; }
+  
+      body.dark-mode .section-header {
+        background: #3a3a3a;
+        color: #eee;
+      }
+      body.dark-mode .section-header .material-icons { color: #ccc; }
+  
+      /* Hidden by default */
+      .section-content {
+        display: none;
+        margin-left: 20px;
+        margin-top: 8px;
+        margin-bottom: 8px;
+      }
+  
+      /* Close button */
+      #adminPanelModal .editor-close-btn {
+        position: absolute; top:10px; right:10px;
+        display:flex; align-items:center; justify-content:center;
+        font-size:20px; font-weight:bold; cursor:pointer;
+        z-index:1000; width:32px; height:32px; border-radius:50%;
+        text-align:center; line-height:30px;
+        color:#ff4d4d; background:rgba(255,255,255,0.9);
+        border:2px solid transparent; transition:all .3s;
+      }
+      #adminPanelModal .editor-close-btn:hover {
+        color:white; background:#ff4d4d;
+        box-shadow:0 0 6px rgba(255,77,77,.8);
+        transform:scale(1.05);
+      }
+      body.dark-mode #adminPanelModal .editor-close-btn {
+        background:rgba(0,0,0,0.6);
+        color:#ff4d4d;
+      }
+  
+      /* Action-row */
+      .action-row {
+        display:flex;
+        justify-content:space-between;
+        margin-top:15px;
+      }
+    `;
+    document.head.appendChild(style);
+  })();
+// ————————————————————————————————————
+
+let originalAdminConfig = {};
+function captureInitialAdminConfig() {
+  originalAdminConfig = {
+    headerTitle:         document.getElementById("headerTitle").value.trim(),
+    oidcProviderUrl:     document.getElementById("oidcProviderUrl").value.trim(),
+    oidcClientId:        document.getElementById("oidcClientId").value.trim(),
+    oidcClientSecret:    document.getElementById("oidcClientSecret").value.trim(),
+    oidcRedirectUri:     document.getElementById("oidcRedirectUri").value.trim(),
+    disableFormLogin:    document.getElementById("disableFormLogin").checked,
+    disableBasicAuth:    document.getElementById("disableBasicAuth").checked,
+    disableOIDCLogin:    document.getElementById("disableOIDCLogin").checked,
+    enableWebDAV:        document.getElementById("enableWebDAV").checked,
+    sharedMaxUploadSize: document.getElementById("sharedMaxUploadSize").value.trim(),
+    globalOtpauthUrl:    document.getElementById("globalOtpauthUrl").value.trim()
+  };
+}
+function hasUnsavedChanges() {
+  const o = originalAdminConfig;
+  return (
+    document.getElementById("headerTitle").value.trim() !== o.headerTitle ||
+    document.getElementById("oidcProviderUrl").value.trim() !== o.oidcProviderUrl ||
+    document.getElementById("oidcClientId").value.trim() !== o.oidcClientId ||
+    document.getElementById("oidcClientSecret").value.trim() !== o.oidcClientSecret ||
+    document.getElementById("oidcRedirectUri").value.trim() !== o.oidcRedirectUri ||
+    document.getElementById("disableFormLogin").checked !== o.disableFormLogin ||
+    document.getElementById("disableBasicAuth").checked !== o.disableBasicAuth ||
+    document.getElementById("disableOIDCLogin").checked !== o.disableOIDCLogin ||
+    document.getElementById("enableWebDAV").checked     !== o.enableWebDAV ||
+    document.getElementById("sharedMaxUploadSize").value.trim() !== o.sharedMaxUploadSize ||
+    document.getElementById("globalOtpauthUrl").value.trim()    !== o.globalOtpauthUrl
+  );
+}
+
+function showCustomConfirmModal(message) {
+  return new Promise(resolve => {
+    const modal = document.getElementById("customConfirmModal");
+    const msg   = document.getElementById("confirmMessage");
+    const yes   = document.getElementById("confirmYesBtn");
+    const no    = document.getElementById("confirmNoBtn");
+    msg.textContent = message;
+    modal.style.display = "block";
+    function clean() {
+      modal.style.display = "none";
+      yes.removeEventListener("click", onYes);
+      no.removeEventListener("click", onNo);
+    }
+    function onYes() { clean(); resolve(true); }
+    function onNo()  { clean(); resolve(false); }
+    yes.addEventListener("click", onYes);
+    no.addEventListener("click", onNo);
+  });
+}
+
+function toggleSection(id) {
+  const hdr = document.getElementById(id + "Header");
+  const cnt = document.getElementById(id + "Content");
+  const isCollapsedNow = hdr.classList.toggle("collapsed");
+  // collapsed class present => hide; absent => show
+  cnt.style.display = isCollapsedNow ? "none" : "block";
+  if (!isCollapsedNow && id === "shareLinks") {
+    loadShareLinksSection();
+  }
+}
+
+function loadShareLinksSection() {
+    const container = document.getElementById("shareLinksContent");
+    container.textContent = t("loading") + "...";
+  
+    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}`))
+    ])
+    .then(([folders, files]) => {
+      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>
+            <small>(${new Date(o.expires * 1000).toLocaleString()})</small>
+            <button type="button"
+                    data-key="${token}"
+                    data-type="folder"
+                    class="btn btn-sm btn-link delete-share">🗑️</button>
+          </li>`;
+      });
+  
+      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>
+            <small>(${new Date(o.expires * 1000).toLocaleString()})</small>
+            <button type="button"
+                    data-key="${token}"
+                    data-type="file"
+                    class="btn btn-sm btn-link delete-share">🗑️</button>
+          </li>`;
+      });
+  
+      html += `</ul>`;
+      container.innerHTML = html;
+  
+      // wire up delete buttons
+      container.querySelectorAll(".delete-share").forEach(btn => {
+        btn.addEventListener("click", evt => {
+          evt.preventDefault();
+          const token = btn.dataset.key;
+          const isFolder = btn.dataset.type === "folder";
+          const endpoint = isFolder
+            ? "/api/folder/deleteShareFolderLink.php"
+            : "/api/file/deleteShareLink.php";
+  
+          fetch(endpoint, {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/x-www-form-urlencoded" },
+            body: new URLSearchParams({ token })
+          })
+          .then(res => {
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            return res.json();
+          })
+          .then(json => {
+            if (json.success) {
+              showToast(t("share_deleted_successfully"));
+              loadShareLinksSection();
+            } else {
+              showToast(t("error_deleting_share") + ": " + (json.error||""), "error");
+            }
+          })
+          .catch(err => {
+            console.error("Delete error:", err);
+            showToast(t("error_deleting_share"), "error");
+          });
+        });
+      });
+    })
+    .catch(err => {
+      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=>{
+      // apply header title + globals
+      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;
+
+      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"};
+        padding:20px; max-width:1100px; width:50%;
+        border-radius:8px; position:relative;
+        max-height:90vh; overflow:auto;
+        border:1px solid ${dark?"#555":"#ccc"};
+      `;
+
+      let mdl = document.getElementById("adminPanelModal");
+      if(!mdl){
+        mdl = document.createElement("div");
+        mdl.id="adminPanelModal";
+        mdl.style.cssText = `
+          position:fixed; top:0; left:0;
+          width:100vw; height:100vh;
+          background:${bg};
+          display:flex; justify-content:center; align-items:center;
+          z-index:3000;
+        `;
+        mdl.innerHTML = `
+          <div class="modal-content" style="${inner}">
+            <div class="editor-close-btn" id="closeAdminPanel">&times;</div>
+            <h3>${adminTitle}</h3>
+            <form id="adminPanelForm">
+              
+              <!-- 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=>`
+                <div id="${sec.id}Header" class="section-header collapsed">
+                  ${sec.label} <i class="material-icons">expand_more</i>
+                </div>
+                <div id="${sec.id}Content" class="section-content"></div>
+              `).join("")}
+
+              <div class="action-row">
+                <button type="button" id="cancelAdminSettings" class="btn btn-secondary">${t("cancel")}</button>
+                <button type="button" id="saveAdminSettings"   class="btn btn-primary">${t("save_settings")}</button>
+              </div>
+            </form>
+          </div>
+        `;
+        document.body.appendChild(mdl);
+
+        // Bind close & cancel
+        document.getElementById("closeAdminPanel")
+          .addEventListener("click", closeAdminPanel);
+        document.getElementById("cancelAdminSettings")
+          .addEventListener("click", closeAdminPanel);
+
+        // Section toggles
+        ["userManagement","headerSettings","loginOptions","webdav","upload","oidc","shareLinks"]
+          .forEach(id=>{
+            document.getElementById(id+"Header")
+              .addEventListener("click", ()=>toggleSection(id));
+          });
+
+        // Populate each section’s CONTENT:
+        // — User Mgmt —
+        document.getElementById("userManagementContent").innerHTML = `
+          <button type="button" id="adminOpenAddUser" class="btn btn-success me-2">${t("add_user")}</button>
+          <button type="button" id="adminOpenRemoveUser" class="btn btn-danger me-2">${t("remove_user")}</button>
+          <button type="button" id="adminOpenUserPermissions" class="btn btn-secondary">${t("user_permissions")}</button>
+        `;
+        document.getElementById("adminOpenAddUser")
+          .addEventListener("click",()=>{
+            toggleVisibility("addUserModal",true);
+            document.getElementById("newUsername").focus();
+          });
+        document.getElementById("adminOpenRemoveUser")
+          .addEventListener("click",()=>{
+            if(typeof window.loadUserList==="function") window.loadUserList();
+            toggleVisibility("removeUserModal",true);
+          });
+        document.getElementById("adminOpenUserPermissions")
+          .addEventListener("click", openUserPermissionsModal);
+
+        // — Header Settings —
+        document.getElementById("headerSettingsContent").innerHTML = `
+          <div class="form-group">
+            <label for="headerTitle">${t("header_title")}:</label>
+            <input type="text" id="headerTitle" class="form-control" value="${window.headerTitle}" />
+          </div>
+        `;
+
+        // — Login Options —
+        document.getElementById("loginOptionsContent").innerHTML = `
+          <div class="form-group"><input type="checkbox" id="disableFormLogin" /> <label for="disableFormLogin">${t("disable_login_form")}</label></div>
+          <div class="form-group"><input type="checkbox" id="disableBasicAuth" /> <label for="disableBasicAuth">${t("disable_basic_http_auth")}</label></div>
+          <div class="form-group"><input type="checkbox" id="disableOIDCLogin" /> <label for="disableOIDCLogin">${t("disable_oidc_login")}</label></div>
+        `;
+
+        // — WebDAV —
+        document.getElementById("webdavContent").innerHTML = `
+          <div class="form-group"><input type="checkbox" id="enableWebDAV" /> <label for="enableWebDAV">Enable WebDAV</label></div>
+        `;
+
+        // — Upload —
+        document.getElementById("uploadContent").innerHTML = `
+          <div class="form-group">
+            <label for="sharedMaxUploadSize">${t("shared_max_upload_size_bytes")}:</label>
+            <input type="number" id="sharedMaxUploadSize" class="form-control" placeholder="e.g. 52428800" />
+            <small>${t("max_bytes_shared_uploads_note")}</small>
+          </div>
+        `;
+
+        // — OIDC & TOTP —
+        document.getElementById("oidcContent").innerHTML = `
+          <div class="form-group"><label for="oidcProviderUrl">${t("oidc_provider_url")}:</label><input type="text" id="oidcProviderUrl" class="form-control" value="${window.currentOIDCConfig.providerUrl}" /></div>
+          <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>
+        `;
+
+        // — Share Links —
+        document.getElementById("shareLinksContent").textContent = t("loading")+"…";
+
+        // — Save handler & constraints —
+        document.getElementById("saveAdminSettings")
+          .addEventListener("click", handleSave);
+        ["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){
+                showToast(t("at_least_one_login_method"));
+                e.target.checked = false;
+              }
+            });
+        });
+
+        // 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||"";
+        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("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||'';
+        captureInitialAdminConfig();
+      }
+    })
+    .catch(()=>{/* if even fetching fails, open empty panel */});
+}
+
+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 nHT  = document.getElementById("headerTitle").value.trim();
+  const nOIDC = {
+    providerUrl : document.getElementById("oidcProviderUrl").value.trim(),
+    clientId    : document.getElementById("oidcClientId").value.trim(),
+    clientSecret: document.getElementById("oidcClientSecret").value.trim(),
+    redirectUri : document.getElementById("oidcRedirectUri").value.trim()
+  };
+  const gURL = document.getElementById("globalOtpauthUrl").value.trim();
+
+  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");
+      captureInitialAdminConfig();
+      closeAdminPanel();
+      loadAdminConfigFunc();
+    } else {
+      showToast(t("error_updating_settings")+": "+(res.error||t("unknown_error")),"error");
+    }
+  }).catch(()=>{/*noop*/});
+}
+
+export async function closeAdminPanel() {
+  if(hasUnsavedChanges()){
+    const ok = await showCustomConfirmModal(t("unsaved_changes_confirm"));
+    if(!ok) return;
+  }
+  document.getElementById("adminPanelModal").style.display="none";
+}
+
+// --- New: User Permissions Modal ---
+export function openUserPermissionsModal() {
+    let userPermissionsModal = document.getElementById("userPermissionsModal");
+    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: 500px;
+        width: 90%;
+        border-radius: 8px;
+        position: relative;
+      `;
+  
+    if (!userPermissionsModal) {
+      userPermissionsModal = document.createElement("div");
+      userPermissionsModal.id = "userPermissionsModal";
+      userPermissionsModal.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: 3500;
+        `;
+      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>
+            <h3>${t("user_permissions")}</h3>
+            <div id="userPermissionsList" style="max-height: 300px; overflow-y: auto; margin-bottom: 15px;">
+              <!-- User rows will be loaded here -->
+            </div>
+            <div style="display: flex; justify-content: flex-end; gap: 10px;">
+              <button type="button" id="cancelUserPermissionsBtn" class="btn btn-secondary">${t("cancel")}</button>
+              <button type="button" id="saveUserPermissionsBtn" class="btn btn-primary">${t("save_permissions")}</button>
+            </div>
+          </div>
+        `;
+      document.body.appendChild(userPermissionsModal);
+      document.getElementById("closeUserPermissionsModal").addEventListener("click", () => {
+        userPermissionsModal.style.display = "none";
+      });
+      document.getElementById("cancelUserPermissionsBtn").addEventListener("click", () => {
+        userPermissionsModal.style.display = "none";
+      });
+      document.getElementById("saveUserPermissionsBtn").addEventListener("click", () => {
+        // Collect permissions data from each user row.
+        const rows = userPermissionsModal.querySelectorAll(".user-permission-row");
+        const permissionsData = [];
+        rows.forEach(row => {
+          const username = row.getAttribute("data-username");
+          const folderOnlyCheckbox = row.querySelector("input[data-permission='folderOnly']");
+          const readOnlyCheckbox = row.querySelector("input[data-permission='readOnly']");
+          const disableUploadCheckbox = row.querySelector("input[data-permission='disableUpload']");
+          permissionsData.push({
+            username,
+            folderOnly: folderOnlyCheckbox.checked,
+            readOnly: readOnlyCheckbox.checked,
+            disableUpload: disableUploadCheckbox.checked
+          });
+        });
+        // Send the permissionsData to the server.
+        sendRequest("/api/updateUserPermissions.php", "POST", { permissions: permissionsData }, { "X-CSRF-Token": window.csrfToken })
+          .then(response => {
+            if (response.success) {
+              showToast(t("user_permissions_updated_successfully"));
+              userPermissionsModal.style.display = "none";
+            } else {
+              showToast(t("error_updating_permissions") + ": " + (response.error || t("unknown_error")));
+            }
+          })
+          .catch(() => {
+            showToast(t("error_updating_permissions"));
+          });
+      });
+    } else {
+      userPermissionsModal.style.display = "flex";
+    }
+    // Load the list of users into the modal.
+    loadUserPermissionsList();
+  }
+  
+  function loadUserPermissionsList() {
+    const listContainer = document.getElementById("userPermissionsList");
+    if (!listContainer) return;
+    listContainer.innerHTML = "";
+  
+    // First, fetch the current permissions from the server.
+    fetch("/api/getUserPermissions.php", { credentials: "include" })
+      .then(response => response.json())
+      .then(permissionsData => {
+        // Then, fetch the list of users.
+        return fetch("/api/getUsers.php", { credentials: "include" })
+          .then(response => response.json())
+          .then(usersData => {
+            const users = Array.isArray(usersData) ? usersData : (usersData.users || []);
+            if (users.length === 0) {
+              listContainer.innerHTML = "<p>" + t("no_users_found") + "</p>";
+              return;
+            }
+            users.forEach(user => {
+              // Skip admin users.
+              if ((user.role && user.role === "1") || user.username.toLowerCase() === "admin") return;
+  
+              // Use stored permissions if available; otherwise fall back to defaults.
+              const defaultPerm = {
+                folderOnly: false,
+                readOnly: false,
+                disableUpload: false,
+              };
+  
+              // Normalize the username key to match server storage (e.g., lowercase)
+              const usernameKey = user.username.toLowerCase();
+  
+              const userPerm = (permissionsData && typeof permissionsData === "object" && (usernameKey in permissionsData))
+                ? permissionsData[usernameKey]
+                : defaultPerm;
+  
+              // Create a row for the user.
+              const row = document.createElement("div");
+              row.classList.add("user-permission-row");
+              row.setAttribute("data-username", user.username);
+              row.style.padding = "10px 0";
+              row.innerHTML = `
+                  <div style="font-weight: bold; margin-bottom: 5px;">${user.username}</div>
+                  <div style="display: flex; flex-direction: column; gap: 5px;">
+                    <label style="display: flex; align-items: center; gap: 5px;">
+                      <input type="checkbox" data-permission="folderOnly" ${userPerm.folderOnly ? "checked" : ""} />
+                      ${t("user_folder_only")}
+                    </label>
+                    <label style="display: flex; align-items: center; gap: 5px;">
+                      <input type="checkbox" data-permission="readOnly" ${userPerm.readOnly ? "checked" : ""} />
+                      ${t("read_only")}
+                    </label>
+                    <label style="display: flex; align-items: center; gap: 5px;">
+                      <input type="checkbox" data-permission="disableUpload" ${userPerm.disableUpload ? "checked" : ""} />
+                      ${t("disable_upload")}
+                    </label>
+                  </div>
+                  <hr style="margin-top: 10px; border: 0; border-bottom: 1px solid #ccc;">
+                `;
+              listContainer.appendChild(row);
+            });
+          });
+      })
+      .catch(() => {
+        listContainer.innerHTML = "<p>" + t("error_loading_users") + "</p>";
+      });
+  }