Improve PDF preview and input focus behaviors

CHANGELOG.md

@@ -1,5 +1,126 @@
 # Changelog
 
+## 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.
+- **Added** `autofocus` attribute to the login form’s username input (`#loginUsername`) so the cursor is ready for typing on page load.
+- **Enhanced** login initialization with a `DOMContentLoaded` fallback that calls `loginUsername.focus()` (via `setTimeout`) if needed.
+- **Set** focus to the “New Username” field (`#newUsername`) when entering setup mode, hiding the login form and showing the Add-User modal.
+- **Implemented** Enter-key support in setup mode by attaching `attachEnterKeyListener("addUserModal", "saveUserBtn")`, allowing users to press Enter to submit the Add-User form.
+
+---
+
+## Changes 4/28/2025
+
+**Added**  
+
+- **Custom expiration** option to File Share modal  
+  - Users can specify a value + unit (seconds, minutes, hours, days)  
+  - Displays a warning when a custom duration is selected  
+- **Custom expiration** option to Folder Share modal (same value+unit picker and warning)
+
+**Changed**  
+
+- **API parameters** for both endpoints:  
+  - Replaced `expirationMinutes` with `expirationValue` + `expirationUnit`  
+  - Front-end now sends `{ expirationValue, expirationUnit }`  
+  - Back-end converts those into total seconds before saving
+- **UI**  
+  - FileShare and FolderShare modals updated to handle “Custom…” selection  
+
+**Updated Models & Controllers**  
+
+- **FileModel::createShareLink** now accepts expiration in seconds  
+- **FolderModel::createShareFolderLink** now accepts expiration in seconds  
+- **createShareLink.php** & **createShareFolderLink.php** updated to parse and convert new parameters
+
+**Documentation**  
+
+- OpenAPI annotations for both endpoints updated to require `expirationValue` + `expirationUnit` (enum: seconds, minutes, hours, days)  
+
+## Changes 4/27/2025 v1.2.7
+
+- **Select-All** checkbox now correctly toggles all `.file-checkbox` inputs  
+  - Updated `toggleAllCheckboxes(masterCheckbox)` to call `updateRowHighlight()` on each row so selections get the `.row-selected` highlight
+- **Master checkbox sync** in toolbar  
+  - Enhanced `updateFileActionButtons()` to set the header checkbox to checked, unchecked, or indeterminate based on how many files are selected
+- Fixed Pagination controls & Items-per-page dropdown
+- Fixed `#advancedSearchToggle` in both `renderFileTable()` and `renderGalleryView()`
+- **Shared folder gallery view logic**  
+  - Introduced new `public/js/sharedFolderView.js` containing all DOMContentLoaded wiring, `toggleViewMode()`, gallery rendering, and event listeners  
+  - Embedded a non-executing JSON payload in `shareFolder.php`
+- **`FolderController::shareFolder()` / `shareFolder.php`**  
+  - Removed all inline `onclick="…"` attributes and inline `<script>` blocks  
+  - Added `<script type="application/json" id="shared-data">…</script>` to export `$token` and `$files`  
+  - Added `<script src="/js/sharedFolderView.js" defer></script>` to load the external view logic
+- **Styling updates**  
+  - Added `.toggle-btn` CSS for blue header-style toggle button and applied it in JS  
+  - Added `.pagination a:hover { background-color: #0056b3; }` to match button hover  
+  - Tweaked `body` padding and `header h1` margins to reduce whitespace above header  
+  - Refactored `sharedFolderView.js:renderGalleryView()` to eliminate `innerHTML` usage; now uses `document.createElement` and `textContent` so filenames and URLs are fully escaped and CSP-safe
+
+---
+
+## Changes 4/26/2025 1.2.6
+
+**Apache / Dockerfile (CSP)**  
+
+- Enabled Apache’s `mod_headers` in the Dockerfile (`a2enmod headers ssl deflate expires proxy proxy_fcgi rewrite`)  
+- Added a strong `Content-Security-Policy` header in the vhost configs to lock down allowed sources for scripts, styles, fonts, images, and connections  
+
+**index.html & CDN Includes**  
+
+- Applied Subresource Integrity (`integrity` + `crossorigin="anonymous"`) to all static CDN assets (Bootstrap CSS, CodeMirror CSS/JS, Resumable.js, DOMPurify, Fuse.js)  
+- Omitted SRI on Google Fonts & Material Icons links (dynamic per-browser CSS)  
+- Removed all inline `<script>` and `onclick` attributes; now all behaviors live in external JS modules  
+
+**auth.js (Logout Handling)**  
+
+- Moved the logout-on-`?logout=1` snippet from inline HTML into `auth.js`  
+- In `DOMContentLoaded`, attached a `click` listener to `#logoutBtn` that POSTs to `/api/auth/logout.php` and reloads  
+
+**fileActions.js (Modal Button Handlers)**  
+
+- Externalized the cancel/download buttons for single-file and ZIP-download modals by adding `click` listeners in `fileActions.js`  
+- Removed the inline `onclick` attributes from `#cancelDownloadFile` and `#confirmSingleDownloadButton` in the HTML  
+- Ensured all file-action modals (delete, download, extract, copy, move, rename) now use JS event handlers instead of inline code  
+
+**domUtils.js**  
+
+- **Removed** all inline `onclick` and `onchange` attributes from:
+  - `buildSearchAndPaginationControls` (advanced search toggle, prev/next buttons, items-per-page selector)
+  - `buildFileTableHeader` (select-all checkbox)
+  - `buildFileTableRow` (download, edit, preview, rename buttons)
+- **Retained** all original logic (file-type icon detection, shift-select, debounce, custom confirm modal, etc.)
+
+**fileListView.js**  
+
+- **Stopped** generating inline `onclick` handlers in both table and gallery views.
+- **Added** `data-` attributes on actionable elements:
+  - `data-download-name`, `data-download-folder`
+  - `data-edit-name`, `data-edit-folder`
+  - `data-rename-name`, `data-rename-folder`
+  - `data-preview-url`, `data-preview-name`
+  - IDs on controls: `#advancedSearchToggle`, `#searchInput`, `#prevPageBtn`, `#nextPageBtn`, `#selectAll`, `#itemsPerPageSelect`
+- **Introduced** `attachListControlListeners()` to bind all events via `addEventListener` immediately after rendering, preserving every interaction without inline code.
+
+**Additional changes**  
+
+- **Security**: Added `frame-src 'self'` to the Content-Security-Policy header so that the embedded API docs iframe can load from our own origin without relaxing JS restrictions.  
+- **Controller**: Updated `FolderController::shareFolder()` (folderController) to include the gallery-view toggle script block intact, ensuring the “Switch to Gallery View” button works when sharing folders.  
+- **UI (fileListView.js)**: Refactored `renderGalleryView` to remove all inline `onclick=` handlers; switched to using data-attributes and `addEventListener()` for preview, download, edit and rename buttons, fully CSP-compliant.
+- Moved logout button handler out of inline `<script>` in `index.html` and into the `DOMContentLoaded` init in **main.js** (via `auth.js`), so it now attaches reliably after the CSRF token is loaded and DOM is ready.
+- Added Content-Security-Policy for `<Files "api.php">` block to allow embedding the ReDoc iframe.
+- Extracted inline ReDoc init into `public/js/redoc-init.js` and updated `public/api.php` to use deferred `<script>` tags.
+
+---
+
+## Changes 4/25/2025
+
+- Switch single‐file download to native `<a>` link (no JS buffering)
+- Keep spinner modal during ZIP creation and download blob on POST response
+- Replace text toggle with a single button showing sun/moon icons and hover tooltip
+
 ## Changes 4/24/2025 1.2.5
 
 - Enhance README and wiki with expanded installation instructions
@@ -10,13 +131,27 @@
   - Enable `mod_deflate` compression for HTML, plain text, CSS, JS and JSON  
   - Configure `mod_expires` caching for images (1 month), CSS (1 week) and JS (3 hour)  
   - Deny access to hidden files (dot-files)
-- Add access control in public/.htaccess for api.html & openapi.json; update Nginx example in wiki
+~~- Add access control in public/.htaccess for api.html & openapi.json; update Nginx example in wiki~~
 - Remove obsolete folders from repo root
-- Embed API documentation (`api.html`) directly in the FileRise UI as a full-screen modal  
+- Embed API documentation (`api.php`) directly in the FileRise UI as a full-screen modal  
   - Introduced `openApiModalBtn` in the user panel to launch the API modal  
-  - Added `#apiModal` container with a same-origin `<iframe src="api.html">` so session cookies authenticate automatically  
+  - Added `#apiModal` container with a same-origin `<iframe src="api.php">` so session cookies authenticate automatically  
   - Close control uses the existing `.editor-close-btn` for consistent styling and hover effects
 
+- public/api.html has been replaced by the new api.php wrapper
+- **`public/api.php`**  
+  - Single PHP endpoint for both UI and spec  
+  - Enforces `$_SESSION['authenticated']`  
+  - Renders the Redoc API docs when accessed normally  
+  - Streams the JSON spec from `openapi.json.dist` when called as `api.php?spec=1`  
+  - Redirects unauthenticated users to `index.html?redirect=/api.php`
+- **Moved** `public/openapi.json` → `openapi.json.dist` (moved outside of `public/`) to prevent direct static access  
+- **Dockerfile**: enabled required Apache modules for rewrite, security headers, proxying, caching and compression:
+
+  ```dockerfile
+  RUN a2enmod rewrite headers proxy proxy_fcgi expires deflate
+  ```
+
 ## Changes 4/23/2025 1.2.4
 
 **AuthModel**  
@@ -136,7 +271,7 @@
   Refactored to:
   1. Fetch CSRF  
   2. POST credentials to `/api/auth/auth.php`  
-  3. On `totp_required`, re‑fetch CSRF *again* before calling `openTOTPLoginModal()`  
+  3. On `totp_required`, re‑fetch CSRF again before calling `openTOTPLoginModal()`  
   4. Handle full logins vs. TOTP flows cleanly.
 
 - **TOTP handlers update**  
@@ -1082,7 +1217,7 @@ The enhancements extend the existing drag-and-drop functionality by adding a hea
   - Adjusted file preview and icon styling for better alignment.
   - Centered the header and optimized the layout for a clean, modern appearance.
   
-*This changelog and feature summary reflect the improvements made during the refactor from a monolithic utils file to modular ES6 components, along with enhancements in UI responsiveness, sorting, file uploads, and file management operations.*
+This changelog and feature summary reflect the improvements made during the refactor from a monolithic utils file to modular ES6 components, along with enhancements in UI responsiveness, sorting, file uploads, and file management operations.
 
 ---
 

Dockerfile

@@ -78,6 +78,7 @@ RUN cat <<'EOF' > /etc/apache2/sites-available/000-default.conf
       Header always set X-Content-Type-Options "nosniff"
       Header always set X-XSS-Protection "1; mode=block"
       Header always set Referrer-Policy "strict-origin-when-cross-origin"
+      Header always set Content-Security-Policy "default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self'; frame-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
     </IfModule>
 
     # Compression
@@ -119,6 +120,10 @@ RUN cat <<'EOF' > /etc/apache2/sites-available/000-default.conf
     <FilesMatch "^\.">
       Require all denied
     </FilesMatch>
+    
+    <Files "api.php">
+    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.redoc.ly; style-src 'self' 'unsafe-inline'; worker-src 'self' https://cdn.redoc.ly blob:; connect-src 'self'; img-src 'self' data: blob:; frame-ancestors 'self'; base-uri 'self'; form-action 'self';"
+    </Files>
 
     ErrorLog /var/www/metadata/log/error.log
     CustomLog /var/www/metadata/log/access.log combined
@@ -126,7 +131,7 @@ RUN cat <<'EOF' > /etc/apache2/sites-available/000-default.conf
 EOF
 
 # Enable required modules
-RUN a2enmod rewrite headers
+RUN a2enmod rewrite headers proxy proxy_fcgi expires deflate ssl
 
 EXPOSE 80 443
 COPY start.sh /usr/local/bin/start.sh

README.md

@@ -108,16 +108,16 @@ FileRise will be accessible at `http://localhost:8080` (or your server’s IP).
 
 If you prefer to run FileRise on a traditional web server (LAMP stack or similar):
 
-- **Requirements:** PHP 8.1 or higher, Apache (with mod_php) or another web server configured for PHP. Ensure PHP extensions json, curl, and zip are enabled. No database needed.
+- **Requirements:** PHP 8.3 or higher, Apache (with mod_php) or another web server configured for PHP. Ensure PHP extensions json, curl, and zip are enabled. No database needed.
 - **Download Files:** Clone this repo or download the [latest release archive](https://github.com/error311/FileRise/releases).
 
 ``` bash
 git clone https://github.com/error311/FileRise.git  
 ```
 
-Place the files into your web server’s directory (e.g., `/var/www/public`). It can be in a subfolder (just adjust the `BASE_URL` in config as below).
+Place the files into your web server’s directory (e.g., `/var/www/`). It can be in a subfolder (just adjust the `BASE_URL` in config as below).
 
-- **Composer Dependencies:** If you plan to use OIDC (SSO login), install Composer and run `composer install` in the FileRise directory. (This pulls in a couple of PHP libraries like jumbojett/openid-connect for OAuth support.)
+- **Composer Dependencies:** Install Composer and run `composer install` in the FileRise directory. (This pulls in a couple of PHP libraries like jumbojett/openid-connect for OAuth support.)
 
 - **Folder Permissions:** Ensure the server can write to the following directories (create them if they don’t exist):
 

public/.htaccess

@@ -15,10 +15,6 @@ DirectoryIndex index.html
   Require all denied
 </FilesMatch>
 
-<FilesMatch "^(api\.html|openapi\.json)$">
-  Require valid-user
-</FilesMatch>
-
 # -----------------------------
 # Enforce HTTPS (optional)
 # -----------------------------

public/api.html

@@ -1,20 +0,0 @@
-<!-- public/api.html -->
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <title>FileRise API Docs</title>
-  <script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js" integrity="sha384-4vOjrBu7SuDWXcAw1qFznVLA/sKL+0l4nn+J1HY8w7cpa6twQEYuh4b0Cwuo7CyX" crossorigin="anonymous"></script>
-</head>
-<body>
-  <redoc spec-url="openapi.json"></redoc>
-  <div id="redoc-container"></div>
-  <script>
-    // If the <redoc> tag didn’t render, fall back to init()
-    if (!customElements.get('redoc')) {
-      Redoc.init('openapi.json', {}, document.getElementById('redoc-container'));
-    }
-  </script>
-</body>
-</html>

public/api.php

@@ -0,0 +1,31 @@
+<?php
+// public/api.php
+require_once __DIR__ . '/../config/config.php'; 
+
+if (empty($_SESSION['authenticated'])) {
+  header('Location: /index.html?redirect=/api.php');
+  exit;
+}
+
+if (isset($_GET['spec'])) {
+  header('Content-Type: application/json');
+  readfile(__DIR__ . '/../openapi.json.dist');
+  exit;
+}
+
+?><!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>FileRise API Docs</title>
+  <script defer src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"
+          integrity="sha384-4vOjrBu7SuDWXcAw1qFznVLA/sKL+0l4nn+J1HY8w7cpa6twQEYuh4b0Cwuo7CyX"
+          crossorigin="anonymous"></script>
+  <script defer src="/js/redoc-init.js"></script>
+</head>
+<body>
+  <redoc spec-url="api.php?spec=1"></redoc>
+  <div id="redoc-container"></div>
+</body>
+</html>

public/css/styles.css

@@ -80,6 +80,9 @@ body.dark-mode .header-container {
   background-color: #1f1f1f;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
 }
+#darkModeIcon {
+  color: #fff;
+}
 
 .header-logo {
   max-height: 50px;

public/index.html

@@ -5,13 +5,6 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title data-i18n-key="title">FileRise</title>
-  <script>
-    const params = new URLSearchParams(window.location.search);
-    if (params.get('logout') === '1') {
-      localStorage.removeItem("username");
-      localStorage.removeItem("userTOTPEnabled");
-    }
-  </script>
   <link rel="icon" type="image/png" href="/assets/logo.png">
   <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
   <meta name="csrf-token" content="">
@@ -20,9 +13,12 @@
   <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" />
   <!-- Bootstrap CSS -->
-  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/material-darker.min.css">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css"
+    integrity="sha384-zaeBlB/vwYsDRSlFajnDd7OydJ0cWk+c2OWybl3eSUf6hW2EbhlCsQPqKr3gkznT" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/material-darker.min.css"
+    integrity="sha384-eZTPTN0EvJdn23s24UDYJmUM2T7C2ZFa3qFLypeBruJv8mZeTusKUAO/j5zPAQ6l" crossorigin="anonymous">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"
     integrity="sha384-UXbkZAbZYZ/KCAslc6UO4d6UHNKsOxZ/sqROSQaPTZCuEIKhfbhmffQ64uXFOcma"
     crossorigin="anonymous"></script>
@@ -41,9 +37,9 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"
     integrity="sha384-Tsl3d5pUAO7a13enIvSsL3O0/95nsthPJiPto5NtLuY8w3+LbZOpr3Fl2MNmrh1E"
     crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"
-     integrity="sha384-zPE55eyESN+FxCWGEnlNxGyAPJud6IZ6TtJmXb56OFRGhxZPN4akj9rjA3gw5Qqa" 
-     crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"
+    integrity="sha384-zPE55eyESN+FxCWGEnlNxGyAPJud6IZ6TtJmXb56OFRGhxZPN4akj9rjA3gw5Qqa"
+    crossorigin="anonymous"></script>
   <link rel="stylesheet" href="css/styles.css" />
 </head>
 
@@ -78,16 +74,16 @@
                 stroke: white;
                 stroke-width: 2;
               }
-      
+
               .divider {
                 stroke: #1565C0;
                 stroke-width: 1.5;
               }
-      
+
               .drawer {
                 fill: #FFFFFF;
               }
-      
+
               .handle {
                 fill: #1565C0;
               }
@@ -159,7 +155,11 @@
           <button id="removeUserBtn" data-i18n-title="remove_user" style="display: none;">
             <i class="material-icons">person_remove</i>
           </button>
-          <button id="darkModeToggle" class="dark-mode-toggle" data-i18n-key="dark_mode_toggle">Dark Mode</button>
+          <button id="darkModeToggle" class="btn-icon" aria-label="Toggle dark mode">
+            <span class="material-icons" id="darkModeIcon">
+              dark_mode
+            </span>
+          </button>
         </div>
       </div>
     </div>
@@ -182,7 +182,7 @@
             <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 />
+                <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>
@@ -200,7 +200,8 @@
             </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
+              <a href="/api/auth/login_basic.php" class="btn btn-secondary" data-i18n-key="basic_http_login">Use Basic
+                HTTP
                 Login</a>
             </div>
           </div>
@@ -284,10 +285,10 @@
                           </div>
                         </div>
                       </div>
-                    
+
                       <button id="shareFolderBtn" class="btn btn-secondary ml-2" data-i18n-title="share_folder">
                         <i class="material-icons">share</i>
-                     </button>
+                      </button>
                       <button id="deleteFolderBtn" class="btn btn-danger ml-2" data-i18n-title="delete_folder">
                         <i class="material-icons">delete</i>
                       </button>
@@ -391,36 +392,43 @@
     </div> <!-- end mainColumn -->
   </div> <!-- end main-wrapper -->
 
-<!-- Download Progress Modal -->
-<div id="downloadProgressModal" class="modal" style="display: none;">
-  <div class="modal-content" style="text-align: center; padding: 20px;">
-    <!-- Material icon spinner with a dedicated class -->
-    <span class="material-icons download-spinner">autorenew</span>
-    <p data-i18n-key="preparing_download">Preparing your download...</p>
-  </div>
-</div>
+  <!-- Download Progress Modal -->
+  <div id="downloadProgressModal" class="modal" style="display: none;">
+    <div class="modal-content" style="text-align: center; padding: 20px;">
+      <h4 id="downloadProgressTitle" data-i18n-key="preparing_download">
+        Preparing your download...
+      </h4>
 
-<!-- Single File Download Modal -->
-<div id="downloadFileModal" class="modal" style="display: none;">
-  <div class="modal-content" style="text-align: center; padding: 20px;">
-    <h4 data-i18n-key="download_file">Download File</h4>
-    <p data-i18n-key="confirm_or_change_filename">Confirm or change the download file name:</p>
-    <input type="text" id="downloadFileNameInput" class="form-control" data-i18n-placeholder="filename" placeholder="Filename" />
-    <div style="margin-top: 15px; text-align: right;">
-      <button id="cancelDownloadFile" class="btn btn-secondary"
-              onclick="document.getElementById('downloadFileModal').style.display = 'none';"
-              data-i18n-key="cancel">Cancel</button>
-      <button id="confirmSingleDownloadButton" class="btn btn-primary"
-              onclick="confirmSingleDownload()"
-              data-i18n-key="download">Download</button>
+      <!-- spinner -->
+      <span class="material-icons download-spinner">autorenew</span>
+
+      <!-- these were missing -->
+      <progress id="downloadProgressBar" value="0" max="100" style="width:100%; height:1.5em; display:none;"></progress>
+      <p>
+        <span id="downloadProgressPercent" style="display:none;">0%</span>
+      </p>
+    </div>
+  </div>
+
+  <!-- Single File Download Modal -->
+  <div id="downloadFileModal" class="modal" style="display: none;">
+    <div class="modal-content" style="text-align: center; padding: 20px;">
+      <h4 data-i18n-key="download_file">Download File</h4>
+      <p data-i18n-key="confirm_or_change_filename">Confirm or change the download file name:</p>
+      <input type="text" id="downloadFileNameInput" class="form-control" data-i18n-placeholder="filename"
+        placeholder="Filename" />
+      <div style="margin-top: 15px; text-align: right;">
+        <button id="cancelDownloadFile" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
+        <button id="confirmSingleDownloadButton" class="btn btn-primary" data-i18n-key="download">Download</button>
+      </div>
     </div>
   </div>
-</div>
 
   <!-- Change Password, Add User, Remove User, Rename File, and Custom Confirm Modals (unchanged) -->
   <div id="changePasswordModal" class="modal" style="display:none;">
     <div class="modal-content" style="max-width:400px; margin:auto;">
-      <span id="closeChangePasswordModal" style="position:absolute; top:10px; right:10px; cursor:pointer; font-size:24px;">&times;</span>
+      <span id="closeChangePasswordModal"
+        style="position:absolute; top:10px; right:10px; cursor:pointer; font-size:24px;">&times;</span>
       <h3 data-i18n-key="change_password_title">Change Password</h3>
       <input type="password" id="oldPassword" class="form-control" data-i18n-placeholder="old_password"
         placeholder="Old Password" style="width:100%; margin: 5px 0;" />
@@ -434,18 +442,30 @@
   <div id="addUserModal" class="modal">
     <div class="modal-content">
       <h3 data-i18n-key="create_new_user_title">Create New User</h3>
-      <label for="newUsername" data-i18n-key="username">Username:</label>
-      <input type="text" id="newUsername" class="form-control" />
-      <label for="addUserPassword" data-i18n-key="password">Password:</label>
-      <input type="password" id="addUserPassword" class="form-control" />
-      <div id="adminCheckboxContainer">
-        <input type="checkbox" id="isAdmin" />
-        <label for="isAdmin" data-i18n-key="grant_admin">Grant Admin Access</label>
-      </div>
-      <div class="button-container">
-        <button id="cancelUserBtn" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
-        <button id="saveUserBtn" class="btn btn-primary" data-i18n-key="save_user">Save User</button>
-      </div>
+      <!-- 1) Add a form around these fields -->
+      <form id="addUserForm">
+        <label for="newUsername" data-i18n-key="username">Username:</label>
+        <input type="text" id="newUsername" class="form-control" required />
+  
+        <label for="addUserPassword" data-i18n-key="password">Password:</label>
+        <input type="password" id="addUserPassword" class="form-control" required />
+  
+        <div id="adminCheckboxContainer">
+          <input type="checkbox" id="isAdmin" />
+          <label for="isAdmin" data-i18n-key="grant_admin">Grant Admin Access</label>
+        </div>
+  
+        <div class="button-container">
+          <!-- Cancel stays type="button" -->
+          <button type="button" id="cancelUserBtn" class="btn btn-secondary" data-i18n-key="cancel">
+            Cancel
+          </button>
+          <!-- Save becomes type="submit" -->
+          <button type="submit" id="saveUserBtn" class="btn btn-primary" data-i18n-key="save_user">
+            Save User
+          </button>
+        </div>
+      </form>
     </div>
   </div>
   <div id="removeUserModal" class="modal">

public/js/auth.js

@@ -125,10 +125,17 @@ function updateItemsPerPageSelect() {
   }
 }
 
+
 function updateLoginOptionsUI({ disableFormLogin, disableBasicAuth, disableOIDCLogin }) {
   const authForm = document.getElementById("authForm");
-
-  if (authForm) authForm.style.display = disableFormLogin ? "none" : "block";
+  if 
+    (authForm) {
+      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";
   const oidcLoginBtn = document.getElementById("oidcLoginBtn");
@@ -187,7 +194,7 @@ function updateAuthenticatedUI(data) {
   toggleVisibility("mainOperations", true);
   toggleVisibility("uploadFileForm", true);
   toggleVisibility("fileListContainer", true);
-  attachEnterKeyListener("addUserModal", "saveUserBtn");
+  //attachEnterKeyListener("addUserModal", "saveUserBtn");
   attachEnterKeyListener("removeUserModal", "deleteUserBtn");
   attachEnterKeyListener("changePasswordModal", "saveNewPasswordBtn");
   document.querySelector(".header-buttons").style.visibility = "visible";
@@ -437,46 +444,52 @@ function initAuth() {
       submitLogin(formData);
     });
   }
-  document.getElementById("logoutBtn").addEventListener("click", function () {
-    fetch("/api/auth/logout.php", {
-      method: "POST",
-      credentials: "include",
-      headers: { "X-CSRF-Token": window.csrfToken }
-    }).then(() => window.location.reload(true)).catch(() => { });
-  });
+  
   document.getElementById("addUserBtn").addEventListener("click", function () {
     resetUserForm();
     toggleVisibility("addUserModal", true);
     document.getElementById("newUsername").focus();
   });
-  document.getElementById("saveUserBtn").addEventListener("click", function () {
-    const newUsername = document.getElementById("newUsername").value.trim();
-    const newPassword = document.getElementById("addUserPassword").value.trim();
-    const isAdmin = document.getElementById("isAdmin").checked;
-    if (!newUsername || !newPassword) {
-      showToast("Username and password are required!");
-      return;
-    }
-    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 })
+  
+// 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
+
+  const newUsername = document.getElementById("newUsername").value.trim();
+  const newPassword = document.getElementById("addUserPassword").value.trim();
+  const isAdmin     = document.getElementById("isAdmin").checked;
+
+  if (!newUsername || !newPassword) {
+    showToast("Username and password are required!");
+    return;
+  }
+
+  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 })
+  })
+    .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"));
+      }
     })
-      .then(response => response.json())
-      .then(data => {
-        if (data.success) {
-          showToast("User added successfully!");
-          closeAddUserModal();
-          checkAuthentication(false);
-        } else {
-          showToast("Error: " + (data.error || "Could not add user"));
-        }
-      })
-      .catch(() => { });
-  });
+    .catch(() => {
+      showToast("Error: Could not add user");
+    });
+});
   document.getElementById("cancelUserBtn").addEventListener("click", closeAddUserModal);
 
   document.getElementById("removeUserBtn").addEventListener("click", function () {

public/js/authModals.js

@@ -3,7 +3,7 @@ import { sendRequest } from './networkUtils.js';
 import { t, applyTranslations, setLocale } from './i18n.js';
 import { loadAdminConfigFunc } from './auth.js';
 
-const version = "v1.2.5"; // Update this version string as needed
+const version = "v1.2.8"; // Update this version string as needed
 const adminTitle = `${t("admin_panel")} <small style="font-size: 12px; color: gray;">${version}</small>`;
 
 let lastLoginData = null;
@@ -245,12 +245,15 @@ export function openUserPanel() {
   background: rgba(0,0,0,0.8); z-index: 4000; display:none;
   align-items: center; justify-content: center;
 `;
+
+// api.php
 apiModal.innerHTML = `
   <div style="position:relative; width:90vw; height:90vh; background:#fff; border-radius:8px; overflow:hidden;">
     <div class="editor-close-btn" id="closeApiModal">&times;</div>
-    <iframe src="api.html" style="width:100%;height:100%;border:none;"></iframe>
+    <iframe src="api.php" style="width:100%;height:100%;border:none;"></iframe>
   </div>
 `;
+
     document.body.appendChild(apiModal);
 
     document.getElementById("openApiModalBtn").addEventListener("click", () => {

public/js/domUtils.js

@@ -25,8 +25,9 @@ export function toggleAllCheckboxes(masterCheckbox) {
   const checkboxes = document.querySelectorAll(".file-checkbox");
   checkboxes.forEach(chk => {
     chk.checked = masterCheckbox.checked;
+    updateRowHighlight(chk);
   });
-  updateFileActionButtons(); // update buttons based on current selection
+  updateFileActionButtons();
 }
 
 export function updateFileActionButtons() {
@@ -38,6 +39,21 @@ export function updateFileActionButtons() {
   const zipBtn = document.getElementById("downloadZipBtn");
   const extractZipBtn = document.getElementById("extractZipBtn");
 
+   // keep the “select all” in sync ——
+   const master = document.getElementById("selectAll");
+   if (master) {
+     if (selectedCheckboxes.length === fileCheckboxes.length) {
+       master.checked = true;
+       master.indeterminate = false;
+     } else if (selectedCheckboxes.length === 0) {
+       master.checked = false;
+       master.indeterminate = false;
+     } else {
+       master.checked = false;
+       master.indeterminate = true;
+     }
+   }
+
   if (fileCheckboxes.length === 0) {
     if (copyBtn) copyBtn.style.display = "none";
     if (moveBtn) moveBtn.style.display = "none";
@@ -91,7 +107,7 @@ export function showToast(message, duration = 3000) {
 export function buildSearchAndPaginationControls({ currentPage, totalPages, searchTerm }) {
   const safeSearchTerm = escapeHTML(searchTerm);
   // Choose the placeholder text based on advanced search mode
-  const placeholderText = window.advancedSearchEnabled 
+  const placeholderText = window.advancedSearchEnabled
     ? t("search_placeholder_advanced")
     : t("search_placeholder");
 
@@ -101,7 +117,7 @@ export function buildSearchAndPaginationControls({ currentPage, totalPages, sear
         <div class="input-group">
           <!-- Advanced Search Toggle Button -->
           <div class="input-group-prepend">
-            <button id="advancedSearchToggle" class="btn btn-outline-secondary btn-icon" onclick="toggleAdvancedSearch()" title="${window.advancedSearchEnabled ? t("basic_search_tooltip") : t("advanced_search_tooltip")}">
+            <button id="advancedSearchToggle" class="btn btn-outline-secondary btn-icon" title="${window.advancedSearchEnabled ? t("basic_search_tooltip") : t("advanced_search_tooltip")}">
               <i class="material-icons">${window.advancedSearchEnabled ? "filter_alt_off" : "filter_alt"}</i>
             </button>
           </div>
@@ -117,9 +133,9 @@ export function buildSearchAndPaginationControls({ currentPage, totalPages, sear
       </div>
       <div class="col-12 col-md-4 text-left">
         <div class="d-flex justify-content-center justify-content-md-start align-items-center">
-          <button class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">${t("prev")}</button>
+          <button id="prevPageBtn" class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""}>${t("prev")}</button>
           <span class="page-indicator">${t("page")} ${currentPage} ${t("of")} ${totalPages || 1}</span>
-          <button class="custom-prev-next-btn" ${currentPage === totalPages ? "disabled" : ""} onclick="changePage(${currentPage + 1})">${t("next")}</button>
+          <button id="nextPageBtn" class="custom-prev-next-btn" ${currentPage === totalPages ? "disabled" : ""}>${t("next")}</button>
         </div>
       </div>
     </div>
@@ -131,7 +147,7 @@ export function buildFileTableHeader(sortOrder) {
     <table class="table">
       <thead>
         <tr>
-          <th class="checkbox-col"><input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes(this)"></th>
+          <th class="checkbox-col"><input type="checkbox" id="selectAll"></th>
           <th data-column="name" class="sortable-col">${t("file_name")} ${sortOrder.column === "name" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
           <th data-column="modified" class="hide-small sortable-col">${t("date_modified")} ${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
           <th data-column="uploaded" class="hide-small hide-medium sortable-col">${t("upload_date")} ${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
@@ -162,15 +178,15 @@ export function buildFileTableRow(file, folderPath) {
     } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) {
       previewIcon = `<i class="material-icons">audiotrack</i>`;
     }
-    previewButton = `<button class="btn btn-sm btn-info preview-btn" onclick="event.stopPropagation(); previewFile('${folderPath + encodeURIComponent(file.name)}', '${safeFileName}')">
+    previewButton = `<button class="btn btn-sm btn-info preview-btn" data-preview-url="${folderPath + encodeURIComponent(file.name)}?t=${Date.now()}" data-preview-name="${safeFileName}">
                  ${previewIcon}
                </button>`;
   }
 
   return `
-  <tr onclick="toggleRowSelection(event, '${safeFileName}')" class="clickable-row">
+  <tr class="clickable-row">
     <td>
-      <input type="checkbox" class="file-checkbox" value="${safeFileName}" onclick="event.stopPropagation(); updateRowHighlight(this);">
+      <input type="checkbox" class="file-checkbox" value="${safeFileName}">
     </td>
     <td class="file-name-cell">${safeFileName}</td>
     <td class="hide-small nowrap">${safeModified}</td>
@@ -179,22 +195,16 @@ export function buildFileTableRow(file, folderPath) {
     <td class="hide-small hide-medium nowrap">${safeUploader}</td>
     <td>
       <div class="button-wrap" style="display: flex; justify-content: left; gap: 5px;">
-        <button type="button" class="btn btn-sm btn-success download-btn" 
-          onclick="openDownloadModal('${file.name}', '${file.folder || 'root'}')" 
-          title="${t('download')}">
+        <button type="button" class="btn btn-sm btn-success download-btn" data-download-name="${file.name}" data-download-folder="${file.folder || 'root'}" title="${t('download')}">
           <i class="material-icons">file_download</i>
         </button>
         ${file.editable ? `
-          <button class="btn btn-sm edit-btn" 
-                  onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})'
-                  title="${t('edit')}">
+          <button class="btn btn-sm edit-btn" data-edit-name="${file.name}" data-edit-folder="${file.folder || 'root'}" title="${t('edit')}">
             <i class="material-icons">edit</i>
           </button>
         ` : ""}
         ${previewButton}
-        <button class="btn btn-sm btn-warning rename-btn" 
-                onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})'
-                title="${t('rename')}">
+        <button class="btn btn-sm btn-warning rename-btn" data-rename-name="${file.name}" data-rename-folder="${file.folder || 'root'}" title="${t('rename')}">
           <i class="material-icons">drive_file_rename_outline</i>
         </button>
       </div>
@@ -207,10 +217,10 @@ export function buildBottomControls(itemsPerPageSetting) {
   return `
     <div class="d-flex align-items-center mt-3 bottom-controls">
       <label class="label-inline mr-2 mb-0">${t("show")}</label>
-      <select class="form-control bottom-select" onchange="changeItemsPerPage(this.value)">
+      <select class="form-control bottom-select" id="itemsPerPageSelect">
         ${[10, 20, 50, 100]
-          .map(num => `<option value="${num}" ${num === itemsPerPageSetting ? "selected" : ""}>${num}</option>`)
-          .join("")}
+      .map(num => `<option value="${num}" ${num === itemsPerPageSetting ? "selected" : ""}>${num}</option>`)
+      .join("")}
       </select>
       <span class="items-per-page-text ml-2 mb-0">${t("items_per_page")}</span>
     </div>
@@ -277,8 +287,6 @@ export function toggleRowSelection(event, fileName) {
     const start = Math.min(currentIndex, lastIndex);
     const end = Math.max(currentIndex, lastIndex);
 
-    // If neither CTRL nor Meta is pressed, you might choose
-    // to clear existing selections. For this example we leave existing selections intact.
     for (let i = start; i <= end; i++) {
       const cb = allRows[i].querySelector(".file-checkbox");
       if (cb) {
@@ -345,4 +353,7 @@ export function showCustomConfirmModal(message) {
     yesBtn.addEventListener("click", onYes);
     noBtn.addEventListener("click", onNo);
   });
-}
+}
+
+window.toggleRowSelection = toggleRowSelection;
+window.updateRowHighlight = updateRowHighlight;

public/js/fileActions.js

@@ -80,16 +80,16 @@ export function openDownloadModal(fileName, folder) {
   // Store file details globally for the download confirmation function.
   window.singleFileToDownload = fileName;
   window.currentFolder = folder || "root";
-  
+
   // Optionally pre-fill the file name input in the modal.
   const input = document.getElementById("downloadFileNameInput");
   if (input) {
     input.value = fileName; // Use file name as-is (or modify if desired)
   }
-  
+
   // Show the single file download modal (a new modal element).
   document.getElementById("downloadFileModal").style.display = "block";
-  
+
   // Optionally focus the input after a short delay.
   setTimeout(() => {
     if (input) input.focus();
@@ -97,58 +97,34 @@ export function openDownloadModal(fileName, folder) {
 }
 
 export function confirmSingleDownload() {
-  // Get the file name from the modal. Users can change it if desired.
-  let fileName = document.getElementById("downloadFileNameInput").value.trim();
+  // 1) Get and validate the filename
+  const input = document.getElementById("downloadFileNameInput");
+  const fileName = input.value.trim();
   if (!fileName) {
     showToast("Please enter a name for the file.");
     return;
   }
-  
-  // Hide the download modal.
+
+  // 2) Hide the download-name modal
   document.getElementById("downloadFileModal").style.display = "none";
-  // Show the progress modal (same as in your ZIP download flow).
-  document.getElementById("downloadProgressModal").style.display = "block";
-  
-  // Build the URL for download.php using GET parameters.
+
+  // 3) Build the direct download URL
   const folder = window.currentFolder || "root";
-  const downloadURL = "/api/file/download.php?folder=" + encodeURIComponent(folder) +
-                      "&file=" + encodeURIComponent(window.singleFileToDownload);
-  
-  fetch(downloadURL, {
-    method: "GET",
-    credentials: "include"
-  })
-    .then(response => {
-      if (!response.ok) {
-        return response.text().then(text => {
-          throw new Error("Failed to download file: " + text);
-        });
-      }
-      return response.blob();
-    })
-    .then(blob => {
-      if (!blob || blob.size === 0) {
-        throw new Error("Received empty file.");
-      }
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.style.display = "none";
-      a.href = url;
-      a.download = fileName;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      a.remove();
-      // Hide the progress modal.
-      document.getElementById("downloadProgressModal").style.display = "none";
-      showToast("Download started.");
-    })
-    .catch(error => {
-      // Hide progress modal and show error.
-      document.getElementById("downloadProgressModal").style.display = "none";
-      console.error("Error downloading file:", error);
-      showToast("Error downloading file: " + error.message);
-    });
+  const downloadURL = "/api/file/download.php"
+    + "?folder=" + encodeURIComponent(folder)
+    + "&file=" + encodeURIComponent(window.singleFileToDownload);
+
+  // 4) Trigger native browser download
+  const a = document.createElement("a");
+  a.href = downloadURL;
+  a.download = fileName;
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+
+  // 5) Notify the user
+  showToast("Download started. Check your browser’s download manager.");
 }
 
 export function handleExtractZipSelected(e) {
@@ -168,16 +144,21 @@ export function handleExtractZipSelected(e) {
     showToast("No zip files selected.");
     return;
   }
-  
-  // Change progress modal text to "Extracting files..."
-  const progressText = document.querySelector("#downloadProgressModal p");
-  if (progressText) {
-    progressText.textContent = "Extracting files...";
-  }
-  
-  // Show the progress modal.
-  document.getElementById("downloadProgressModal").style.display = "block";
-  
+
+  // Prepare and show the spinner-only modal
+  const modal = document.getElementById("downloadProgressModal");
+  const titleEl = document.getElementById("downloadProgressTitle");
+  const spinner = modal.querySelector(".download-spinner");
+  const progressBar = document.getElementById("downloadProgressBar");
+  const progressPct = document.getElementById("downloadProgressPercent");
+
+  if (titleEl) titleEl.textContent = "Extracting files…";
+  if (spinner) spinner.style.display = "inline-block";
+  if (progressBar) progressBar.style.display = "none";
+  if (progressPct) progressPct.style.display = "none";
+
+  modal.style.display = "block";
+
   fetch("/api/file/extractZip.php", {
     method: "POST",
     credentials: "include",
@@ -192,45 +173,42 @@ export function handleExtractZipSelected(e) {
   })
     .then(response => response.json())
     .then(data => {
-      // Hide the progress modal once the request has completed.
-      document.getElementById("downloadProgressModal").style.display = "none";
+      modal.style.display = "none";
       if (data.success) {
-        let toastMessage = "Zip file(s) extracted successfully!";
-        if (data.extractedFiles && Array.isArray(data.extractedFiles) && data.extractedFiles.length) {
-          toastMessage = "Extracted: " + data.extractedFiles.join(", ");
+        let msg = "Zip file(s) extracted successfully!";
+        if (Array.isArray(data.extractedFiles) && data.extractedFiles.length) {
+          msg = "Extracted: " + data.extractedFiles.join(", ");
         }
-        showToast(toastMessage);
+        showToast(msg);
         loadFileList(window.currentFolder);
       } else {
         showToast("Error extracting zip: " + (data.error || "Unknown error"));
       }
     })
     .catch(error => {
-      // Hide the progress modal on error.
-      document.getElementById("downloadProgressModal").style.display = "none";
+      modal.style.display = "none";
       console.error("Error extracting zip files:", error);
       showToast("Error extracting zip files.");
     });
 }
 
-const extractZipBtn = document.getElementById("extractZipBtn");
-if (extractZipBtn) {
-  extractZipBtn.replaceWith(extractZipBtn.cloneNode(true));
-  document.getElementById("extractZipBtn").addEventListener("click", handleExtractZipSelected);
-}
+document.addEventListener("DOMContentLoaded", () => {
+  const zipNameModal = document.getElementById("downloadZipModal");
+  const progressModal = document.getElementById("downloadProgressModal");
+  const cancelZipBtn = document.getElementById("cancelDownloadZip");
+  const confirmZipBtn = document.getElementById("confirmDownloadZip");
 
-document.addEventListener("DOMContentLoaded", function () {
-  const cancelDownloadZip = document.getElementById("cancelDownloadZip");
-  if (cancelDownloadZip) {
-    cancelDownloadZip.addEventListener("click", function () {
-      document.getElementById("downloadZipModal").style.display = "none";
+  // 1) Cancel button hides the name modal
+  if (cancelZipBtn) {
+    cancelZipBtn.addEventListener("click", () => {
+      zipNameModal.style.display = "none";
     });
   }
 
-  // This part remains in your confirmDownloadZip event handler:
-  const confirmDownloadZip = document.getElementById("confirmDownloadZip");
-  if (confirmDownloadZip) {
-    confirmDownloadZip.addEventListener("click", function () {
+  // 2) Confirm button kicks off the zip+download
+  if (confirmZipBtn) {
+    confirmZipBtn.addEventListener("click", async () => {
+      // a) Validate ZIP filename
       let zipName = document.getElementById("zipFileNameInput").value.trim();
       if (!zipName) {
         showToast("Please enter a name for the zip file.");
@@ -239,52 +217,56 @@ document.addEventListener("DOMContentLoaded", function () {
       if (!zipName.toLowerCase().endsWith(".zip")) {
         zipName += ".zip";
       }
-      // Hide the ZIP name input modal
-      document.getElementById("downloadZipModal").style.display = "none";
-      // Show the progress modal here only on confirm
-      console.log("Download confirmed. Showing progress modal.");
-      document.getElementById("downloadProgressModal").style.display = "block";
-      const folder = window.currentFolder || "root";
-      fetch("/api/file/downloadZip.php", {
-        method: "POST",
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json",
-          "X-CSRF-Token": window.csrfToken
-        },
-        body: JSON.stringify({ folder: folder, files: window.filesToDownload })
-      })
-        .then(response => {
-          if (!response.ok) {
-            return response.text().then(text => {
-              throw new Error("Failed to create zip file: " + text);
-            });
-          }
-          return response.blob();
-        })
-        .then(blob => {
-          if (!blob || blob.size === 0) {
-            throw new Error("Received empty zip file.");
-          }
-          const url = window.URL.createObjectURL(blob);
-          const a = document.createElement("a");
-          a.style.display = "none";
-          a.href = url;
-          a.download = zipName;
-          document.body.appendChild(a);
-          a.click();
-          window.URL.revokeObjectURL(url);
-          a.remove();
-          // Hide the progress modal after download starts
-          document.getElementById("downloadProgressModal").style.display = "none";
-          showToast("Download started.");
-        })
-        .catch(error => {
-          // Hide the progress modal on error
-          document.getElementById("downloadProgressModal").style.display = "none";
-          console.error("Error downloading zip:", error);
-          showToast("Error downloading selected files as zip: " + error.message);
+
+      // b) Hide the name‐input modal, show the spinner modal
+      zipNameModal.style.display = "none";
+      progressModal.style.display = "block";
+
+      // c) (Optional) update the “Preparing…” text if you gave it an ID
+      const titleEl = document.getElementById("downloadProgressTitle");
+      if (titleEl) titleEl.textContent = `Preparing ${zipName}…`;
+
+      try {
+        // d) POST and await the ZIP blob
+        const res = await fetch("/api/file/downloadZip.php", {
+          method: "POST",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json",
+            "X-CSRF-Token": window.csrfToken
+          },
+          body: JSON.stringify({
+            folder: window.currentFolder || "root",
+            files: window.filesToDownload
+          })
         });
+        if (!res.ok) {
+          const txt = await res.text();
+          throw new Error(txt || `Status ${res.status}`);
+        }
+
+        const blob = await res.blob();
+        if (!blob || blob.size === 0) {
+          throw new Error("Received empty ZIP file.");
+        }
+
+        // e) Hand off to the browser’s download manager
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = zipName;
+        document.body.appendChild(a);
+        a.click();
+        URL.revokeObjectURL(url);
+        a.remove();
+
+      } catch (err) {
+        console.error("Error downloading ZIP:", err);
+        showToast("Error: " + err.message);
+      } finally {
+        // f) Always hide spinner modal
+        progressModal.style.display = "none";
+      }
     });
   }
 });
@@ -573,4 +555,22 @@ export function initFileActions() {
   }
 }
 
+// Hook up the single‐file download modal buttons
+document.addEventListener("DOMContentLoaded", () => {
+  const cancelDownloadFileBtn = document.getElementById("cancelDownloadFile");
+  if (cancelDownloadFileBtn) {
+    cancelDownloadFileBtn.addEventListener("click", () => {
+      document.getElementById("downloadFileModal").style.display = "none";
+    });
+  }
+
+  const confirmSingleDownloadBtn = document.getElementById("confirmSingleDownloadButton");
+  if (confirmSingleDownloadBtn) {
+    confirmSingleDownloadBtn.addEventListener("click", confirmSingleDownload);
+  }
+
+  // Make Enter also confirm the download
+  attachEnterKeyListener("downloadFileModal", "confirmSingleDownloadButton");
+});
+
 window.renameFile = renameFile;

public/js/fileListView.js

@@ -340,6 +340,88 @@ export function renderFileTable(folder, container) {
 
     fileListContent.innerHTML = combinedTopHTML + headerHTML + rowsHTML + bottomControlsHTML;
 
+    // pagination clicks
+    const prevBtn = document.getElementById("prevPageBtn");
+    if (prevBtn) prevBtn.addEventListener("click", () => {
+        if (window.currentPage > 1) {
+            window.currentPage--;
+            renderFileTable(folder, container);
+        }
+    });
+    const nextBtn = document.getElementById("nextPageBtn");
+    if (nextBtn) nextBtn.addEventListener("click", () => {
+        // totalPages is computed above in this scope
+        if (window.currentPage < totalPages) {
+            window.currentPage++;
+            renderFileTable(folder, container);
+        }
+    });
+
+    // ADD: advanced search toggle
+    const advToggle = document.getElementById("advancedSearchToggle");
+    if (advToggle) advToggle.addEventListener("click", () => {
+        toggleAdvancedSearch();
+    });
+
+    // items-per-page selector
+    const itemsSelect = document.getElementById("itemsPerPageSelect");
+    if (itemsSelect) itemsSelect.addEventListener("change", e => {
+        window.itemsPerPage = parseInt(e.target.value, 10);
+        localStorage.setItem("itemsPerPage", window.itemsPerPage);
+        window.currentPage = 1;
+        renderFileTable(folder, container);
+    });
+
+    // hook up the master checkbox
+    const selectAll = document.getElementById("selectAll");
+    if (selectAll) {
+        selectAll.addEventListener("change", () => {
+            toggleAllCheckboxes(selectAll);
+        });
+    }
+
+    // 1) Row-click selects the row
+    fileListContent.querySelectorAll("tbody tr").forEach(row => {
+        row.addEventListener("click", e => {
+            // grab the underlying checkbox value
+            const cb = row.querySelector(".file-checkbox");
+            if (!cb) return;
+            toggleRowSelection(e, cb.value);
+        });
+    });
+
+    // 2) Download buttons
+    fileListContent.querySelectorAll(".download-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            openDownloadModal(btn.dataset.downloadName, btn.dataset.downloadFolder);
+        });
+    });
+
+    // 3) Edit buttons
+    fileListContent.querySelectorAll(".edit-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            editFile(btn.dataset.editName, btn.dataset.editFolder);
+        });
+    });
+
+    // 4) Rename buttons
+    fileListContent.querySelectorAll(".rename-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            renameFile(btn.dataset.renameName, btn.dataset.renameFolder);
+        });
+    });
+
+    // 5) Preview buttons (if you still have a .preview-btn)
+    fileListContent.querySelectorAll(".preview-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            previewFile(btn.dataset.previewUrl, btn.dataset.previewName);
+        });
+    });
+
     createViewToggleButton();
 
     // Setup event listeners.
@@ -476,23 +558,26 @@ export function renderGalleryView(folder, container) {
 
     pageFiles.forEach((file, idx) => {
         const idSafe = encodeURIComponent(file.name) + "-" + (startIdx + idx);
+        const cacheKey = folderPath + encodeURIComponent(file.name);
 
         // thumbnail
         let thumbnail;
         if (/\.(jpe?g|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) {
-            const cacheKey = folderPath + encodeURIComponent(file.name);
             if (window.imageCache && window.imageCache[cacheKey]) {
-                thumbnail = `<img src="${window.imageCache[cacheKey]}"
-                             class="gallery-thumbnail"
-                             alt="${escapeHTML(file.name)}"
-                             style="max-width:100%; max-height:${getMaxImageHeight()}px; display:block; margin:0 auto;">`;
+                thumbnail = `<img
+                    src="${window.imageCache[cacheKey]}"
+                    class="gallery-thumbnail"
+                    data-cache-key="${cacheKey}"
+                    alt="${escapeHTML(file.name)}"
+                    style="max-width:100%; max-height:${getMaxImageHeight()}px; display:block; margin:0 auto;">`;
             } else {
                 const imageUrl = folderPath + encodeURIComponent(file.name) + "?t=" + Date.now();
-                thumbnail = `<img src="${imageUrl}"
-                             onload="cacheImage(this,'${cacheKey}')"
-                             class="gallery-thumbnail"
-                             alt="${escapeHTML(file.name)}"
-                             style="max-width:100%; max-height:${getMaxImageHeight()}px; display:block; margin:0 auto;">`;
+                thumbnail = `<img
+                    src="${imageUrl}"
+                    class="gallery-thumbnail"
+                    data-cache-key="${cacheKey}"
+                    alt="${escapeHTML(file.name)}"
+                    style="max-width:100%; max-height:${getMaxImageHeight()}px; display:block; margin:0 auto;">`;
             }
         } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) {
             thumbnail = `<span class="material-icons gallery-icon">audiotrack</span>`;
@@ -529,9 +614,9 @@ export function renderGalleryView(folder, container) {
           <label for="cb-${idSafe}"
                  style="position:absolute; top:5px; left:5px; width:16px; height:16px;"></label>
   
-          <div class="gallery-preview"
-               style="cursor:pointer;"
-               onclick="previewFile('${folderPath + encodeURIComponent(file.name)}?t='+Date.now(), '${file.name}')">
+          <div class="gallery-preview" style="cursor:pointer;"
+               data-preview-url="${folderPath + encodeURIComponent(file.name)}?t=${Date.now()}"
+               data-preview-name="${file.name}">
             ${thumbnail}
           </div>
   
@@ -544,22 +629,25 @@ export function renderGalleryView(folder, container) {
   
             <div class="button-wrap" style="display:flex; justify-content:center; gap:5px; margin-top:5px;">
               <button type="button" class="btn btn-sm btn-success download-btn"
-                      onclick="openDownloadModal('${file.name}', '${file.folder || "root"}')"
+                      data-download-name="${escapeHTML(file.name)}"
+                      data-download-folder="${file.folder || "root"}"
                       title="${t('download')}">
                 <i class="material-icons">file_download</i>
               </button>
               ${file.editable ? `
-              <button class="btn btn-sm edit-btn"
-                      onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})'
-                      title="${t('Edit')}">
+              <button type="button" class="btn btn-sm edit-btn"
+                      data-edit-name="${escapeHTML(file.name)}"
+                      data-edit-folder="${file.folder || "root"}"
+                      title="${t('edit')}">
                 <i class="material-icons">edit</i>
               </button>` : ""}
-              <button class="btn btn-sm btn-warning rename-btn"
-                      onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})'
+              <button type="button" class="btn btn-sm btn-warning rename-btn"
+                      data-rename-name="${escapeHTML(file.name)}"
+                      data-rename-folder="${file.folder || "root"}"
                       title="${t('rename')}">
                 <i class="material-icons">drive_file_rename_outline</i>
               </button>
-              <button class="btn btn-sm btn-secondary share-btn"
+              <button type="button" class="btn btn-sm btn-secondary share-btn"
                       data-file="${escapeHTML(file.name)}"
                       title="${t('share')}">
                 <i class="material-icons">share</i>
@@ -579,13 +667,93 @@ export function renderGalleryView(folder, container) {
     // render
     fileListContent.innerHTML = galleryHTML;
 
-    // ensure toggle button
-    createViewToggleButton();
+    // --- Now wire up all behaviors without inline handlers ---
 
-    // attach listeners
+    //  ADD: pagination buttons for gallery
+    const prevBtn = document.getElementById("prevPageBtn");
+    if (prevBtn) prevBtn.addEventListener("click", () => {
+        if (window.currentPage > 1) {
+            window.currentPage--;
+            renderGalleryView(folder, container);
+        }
+    });
+    const nextBtn = document.getElementById("nextPageBtn");
+    if (nextBtn) nextBtn.addEventListener("click", () => {
+        if (window.currentPage < totalPages) {
+            window.currentPage++;
+            renderGalleryView(folder, container);
+        }
+    });
+
+    // ←— ADD: advanced search toggle
+    const advToggle = document.getElementById("advancedSearchToggle");
+    if (advToggle) advToggle.addEventListener("click", () => {
+        toggleAdvancedSearch();
+    });
+
+    // ←— ADD: wire up context-menu in gallery
+    bindFileListContextMenu();
+
+    // ADD: items-per-page selector for gallery
+    const itemsSelect = document.getElementById("itemsPerPageSelect");
+    if (itemsSelect) itemsSelect.addEventListener("change", e => {
+        window.itemsPerPage = parseInt(e.target.value, 10);
+        localStorage.setItem("itemsPerPage", window.itemsPerPage);
+        window.currentPage = 1;
+        renderGalleryView(folder, container);
+    });
+
+    // cache images on load
+    fileListContent.querySelectorAll('.gallery-thumbnail').forEach(img => {
+        const key = img.dataset.cacheKey;
+        img.addEventListener('load', () => cacheImage(img, key));
+    });
+
+    // preview clicks
+    fileListContent.querySelectorAll(".gallery-preview").forEach(el => {
+        el.addEventListener("click", () => {
+            previewFile(el.dataset.previewUrl, el.dataset.previewName);
+        });
+    });
+
+    // download clicks
+    fileListContent.querySelectorAll(".download-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            openDownloadModal(btn.dataset.downloadName, btn.dataset.downloadFolder);
+        });
+    });
+
+    // edit clicks
+    fileListContent.querySelectorAll(".edit-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            editFile(btn.dataset.editName, btn.dataset.editFolder);
+        });
+    });
+
+    // rename clicks
+    fileListContent.querySelectorAll(".rename-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            renameFile(btn.dataset.renameName, btn.dataset.renameFolder);
+        });
+    });
+
+    // share clicks
+    fileListContent.querySelectorAll(".share-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            const fileName = btn.dataset.file;
+            const fileObj = fileData.find(f => f.name === fileName);
+            if (fileObj) {
+                import('./filePreview.js').then(m => m.openShareModal(fileObj, folder));
+            }
+        });
+    });
 
     // checkboxes
-    document.querySelectorAll(".file-checkbox").forEach(cb => {
+    fileListContent.querySelectorAll(".file-checkbox").forEach(cb => {
         cb.addEventListener("change", () => updateFileActionButtons());
     });
 
@@ -603,14 +771,13 @@ export function renderGalleryView(folder, container) {
         });
     }
 
-    // pagination
+    // pagination functions
     window.changePage = newPage => {
         window.currentPage = newPage;
         if (window.viewMode === "gallery") renderGalleryView(folder);
         else renderFileTable(folder);
     };
 
-    // items per page
     window.changeItemsPerPage = cnt => {
         window.itemsPerPage = +cnt;
         localStorage.setItem("itemsPerPage", cnt);
@@ -619,8 +786,9 @@ export function renderGalleryView(folder, container) {
         else renderFileTable(folder);
     };
 
-    // update toolbar buttons
+    // update toolbar and toggle button
     updateFileActionButtons();
+    createViewToggleButton();
 }
 
 // Responsive slider constraints based on screen size.

public/js/filePreview.js

@@ -4,36 +4,68 @@ import { fileData } from './fileListView.js';
 import { t } from './i18n.js';
 
 export function openShareModal(file, folder) {
+  // Remove any existing modal
   const existing = document.getElementById("shareModal");
   if (existing) existing.remove();
 
+  // Build the modal
   const modal = document.createElement("div");
   modal.id = "shareModal";
   modal.classList.add("modal");
   modal.innerHTML = `
-    <div class="modal-content share-modal-content" style="width: 600px; max-width:90vw;">
+    <div class="modal-content share-modal-content" style="width:600px;max-width:90vw;">
       <div class="modal-header">
         <h3>${t("share_file")}: ${escapeHTML(file.name)}</h3>
-        <span class="close-image-modal" id="closeShareModal" title="Close">&times;</span>
+        <span id="closeShareModal" title="${t("close")}" class="close-image-modal">&times;</span>
       </div>
       <div class="modal-body">
         <p>${t("set_expiration")}</p>
-        <select id="shareExpiration">
-          <option value="30">30 minutes</option>
-          <option value="60" selected>60 minutes</option>
-          <option value="120">120 minutes</option>
-          <option value="180">180 minutes</option>
-          <option value="240">240 minutes</option>
-          <option value="1440">1 Day</option>
+        <select id="shareExpiration" style="width:100%;padding:5px;">
+          <option value="30">30 ${t("minutes")}</option>
+          <option value="60" selected>60 ${t("minutes")}</option>
+          <option value="120">120 ${t("minutes")}</option>
+          <option value="180">180 ${t("minutes")}</option>
+          <option value="240">240 ${t("minutes")}</option>
+          <option value="1440">1 ${t("day")}</option>
+          <option value="custom">${t("custom")}&hellip;</option>
         </select>
-        <p>${t("password_optional")}</p>
-        <input type="text" id="sharePassword" placeholder=${t("password_optional")} style="width: 100%;"/>
-        <br>
-        <button id="generateShareLinkBtn" class="btn btn-primary" style="margin-top:10px;">${t("generate_share_link")}</button>
-        <div id="shareLinkDisplay" style="margin-top: 10px; display:none;">
+
+        <div id="customExpirationContainer" style="display:none;margin-top:10px;">
+          <label for="customExpirationValue">${t("duration")}:</label>
+          <input type="number" id="customExpirationValue" min="1" value="1" style="width:60px;margin:0 8px;"/>
+          <select id="customExpirationUnit">
+            <option value="seconds">${t("seconds")}</option>
+            <option value="minutes" selected>${t("minutes")}</option>
+            <option value="hours">${t("hours")}</option>
+            <option value="days">${t("days")}</option>
+          </select>
+          <p class="share-warning" style="color:#a33;font-size:0.9em;margin-top:5px;">
+            ${t("custom_duration_warning")}
+          </p>
+        </div>
+
+        <p style="margin-top:15px;">${t("password_optional")}</p>
+        <input
+          type="text"
+          id="sharePassword"
+          placeholder="${t("password_optional")}"
+          style="width:100%;padding:5px;"
+        />
+
+        <button
+          id="generateShareLinkBtn"
+          class="btn btn-primary"
+          style="margin-top:15px;"
+        >
+          ${t("generate_share_link")}
+        </button>
+
+        <div id="shareLinkDisplay" style="margin-top:15px;display:none;">
           <p>${t("shareable_link")}</p>
-          <input type="text" id="shareLinkInput" readonly style="width:100%;"/>
-          <button id="copyShareLinkBtn" class="btn btn-primary" style="margin-top:5px;">${t("copy_link")}</button>
+          <input type="text" id="shareLinkInput" readonly style="width:100%;padding:5px;"/>
+          <button id="copyShareLinkBtn" class="btn btn-secondary" style="margin-top:5px;">
+            ${t("copy_link")}
+          </button>
         </div>
       </div>
     </div>
@@ -41,52 +73,72 @@ export function openShareModal(file, folder) {
   document.body.appendChild(modal);
   modal.style.display = "block";
 
-  document.getElementById("closeShareModal").addEventListener("click", () => {
-    modal.remove();
-  });
+  // Close handler
+  document.getElementById("closeShareModal")
+    .addEventListener("click", () => modal.remove());
 
-  document.getElementById("generateShareLinkBtn").addEventListener("click", () => {
-    const expiration = document.getElementById("shareExpiration").value;
-    const password = document.getElementById("sharePassword").value;
-    fetch("/api/file/createShareLink.php", {
-      method: "POST",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": window.csrfToken
-      },
-      body: JSON.stringify({
-        folder: folder,
-        file: file.name,
-        expirationMinutes: parseInt(expiration),
-        password: password
+  // Show/hide custom-duration inputs
+  document.getElementById("shareExpiration")
+    .addEventListener("change", e => {
+      const container = document.getElementById("customExpirationContainer");
+      container.style.display = e.target.value === "custom" ? "block" : "none";
+    });
+
+  // Generate share link
+  document.getElementById("generateShareLinkBtn")
+    .addEventListener("click", () => {
+      const sel = document.getElementById("shareExpiration");
+      let value, unit;
+
+      if (sel.value === "custom") {
+        value = parseInt(document.getElementById("customExpirationValue").value, 10);
+        unit  = document.getElementById("customExpirationUnit").value;
+      } else {
+        value = parseInt(sel.value, 10);
+        unit  = "minutes";
+      }
+
+      const password = document.getElementById("sharePassword").value;
+
+      fetch("/api/file/createShareLink.php", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": window.csrfToken
+        },
+        body: JSON.stringify({
+          folder,
+          file: file.name,
+          expirationValue: value,
+          expirationUnit: unit,
+          password
+        })
       })
-    })
-      .then(response => response.json())
+      .then(res => res.json())
       .then(data => {
         if (data.token) {
-          const shareEndpoint = `${window.location.origin}/api/file/share.php`;
-          const shareUrl = `${shareEndpoint}?token=${encodeURIComponent(data.token)}`;
-          const displayDiv = document.getElementById("shareLinkDisplay");
-          const inputField = document.getElementById("shareLinkInput");
-          inputField.value = shareUrl;
-          displayDiv.style.display = "block";
+          const url = `${window.location.origin}/api/file/share.php?token=${encodeURIComponent(data.token)}`;
+          document.getElementById("shareLinkInput").value = url;
+          document.getElementById("shareLinkDisplay").style.display = "block";
         } else {
-          showToast("Error generating share link: " + (data.error || "Unknown error"));
+          showToast(t("error_generating_share") + ": " + (data.error||"Unknown"));
         }
       })
       .catch(err => {
-        console.error("Error generating share link:", err);
-        showToast("Error generating share link.");
+        console.error(err);
+        showToast(t("error_generating_share"));
       });
-  });
+    });
 
-  document.getElementById("copyShareLinkBtn").addEventListener("click", () => {
-    const input = document.getElementById("shareLinkInput");
-    input.select();
-    document.execCommand("copy");
-    showToast("Link copied to clipboard!");
-  });
+  // Copy to clipboard
+  document.getElementById("copyShareLinkBtn")
+    .addEventListener("click", () => {
+      const input = document.getElementById("shareLinkInput");
+      input.select();
+      document.execCommand("copy");
+      showToast(t("link_copied"));
+    });
 }
 
 export function previewFile(fileUrl, fileName) {
@@ -364,16 +416,21 @@ export function previewFile(fileUrl, fileName) {
     }
   } else {
     // Handle non-image file previews.
-    if (extension === "pdf") {
-      const embed = document.createElement("embed");
-      const separator = fileUrl.indexOf('?') === -1 ? '?' : '&';
-      embed.src = fileUrl + separator + 't=' + new Date().getTime();
-      embed.type = "application/pdf";
-      embed.style.width = "80vw";
-      embed.style.height = "80vh";
-      embed.style.border = "none";
-      container.appendChild(embed);
-    } else if (/\.(mp4|mkv|webm|mov|ogv)$/i.test(fileName)) {
+  if (extension === "pdf") {
+    // build a cache‐busted URL
+    const separator = fileUrl.includes('?') ? '&' : '?';
+    const urlWithTs = fileUrl + separator + 't=' + Date.now();
+  
+    // open in a new tab (avoids CSP frame-ancestors)
+    window.open(urlWithTs, "_blank");
+  
+    // tear down the just-created modal
+    const modal = document.getElementById("filePreviewModal");
+    if (modal) modal.remove();
+  
+    // stop further preview logic
+    return;
+  } else if (/\.(mp4|mkv|webm|mov|ogv)$/i.test(fileName)) {
       const video = document.createElement("video");
       video.src = fileUrl;
       video.controls = true;

public/js/folderShareModal.js

@@ -1,44 +1,75 @@
-// folderShareModal.js
+// js/folderShareModal.js
 import { escapeHTML, showToast } from './domUtils.js';
 import { t } from './i18n.js';
 
 export function openFolderShareModal(folder) {
-  // Remove any existing folder share modal
+  // Remove any existing modal
   const existing = document.getElementById("folderShareModal");
   if (existing) existing.remove();
 
-  // Create the modal container
+  // Build modal
   const modal = document.createElement("div");
   modal.id = "folderShareModal";
   modal.classList.add("modal");
   modal.innerHTML = `
-    <div class="modal-content share-modal-content" style="width: 600px; max-width: 90vw;">
+    <div class="modal-content share-modal-content" style="width:600px;max-width:90vw;">
       <div class="modal-header">
         <h3>${t("share_folder")}: ${escapeHTML(folder)}</h3>
-        <span class="close-image-modal" id="closeFolderShareModal" title="Close">&times;</span>
+        <span id="closeFolderShareModal" title="${t("close")}" class="close-image-modal">&times;</span>
       </div>
       <div class="modal-body">
         <p>${t("set_expiration")}</p>
-        <select id="folderShareExpiration">
+        <select id="folderShareExpiration" style="width:100%;padding:5px;">
           <option value="30">30 ${t("minutes")}</option>
           <option value="60" selected>60 ${t("minutes")}</option>
           <option value="120">120 ${t("minutes")}</option>
           <option value="180">180 ${t("minutes")}</option>
           <option value="240">240 ${t("minutes")}</option>
           <option value="1440">1 ${t("day")}</option>
+          <option value="custom">${t("custom")}&hellip;</option>
         </select>
-        <p>${t("password_optional")}</p>
-        <input type="text" id="folderSharePassword" placeholder="${t("enter_password")}" style="width: 100%;"/>
-        <br>
-        <label>
-          <input type="checkbox" id="folderShareAllowUpload"> ${t("allow_uploads")}
+
+        <div id="customFolderExpirationContainer" style="display:none;margin-top:10px;">
+          <label for="customFolderExpirationValue">${t("duration")}:</label>
+          <input type="number" id="customFolderExpirationValue" min="1" value="1" style="width:60px;margin:0 8px;"/>
+          <select id="customFolderExpirationUnit">
+            <option value="seconds">${t("seconds")}</option>
+            <option value="minutes" selected>${t("minutes")}</option>
+            <option value="hours">${t("hours")}</option>
+            <option value="days">${t("days")}</option>
+          </select>
+          <p class="share-warning" style="color:#a33;font-size:0.9em;margin-top:5px;">
+            ${t("custom_duration_warning")}
+          </p>
+        </div>
+
+        <p style="margin-top:15px;">${t("password_optional")}</p>
+        <input
+          type="text"
+          id="folderSharePassword"
+          placeholder="${t("enter_password")}"
+          style="width:100%;padding:5px;"
+        />
+
+        <label style="margin-top:10px;display:block;">
+          <input type="checkbox" id="folderShareAllowUpload" />
+          ${t("allow_uploads")}
         </label>
-        <br><br>
-        <button id="generateFolderShareLinkBtn" class="btn btn-primary" style="margin-top: 10px;">${t("generate_share_link")}</button>
-        <div id="folderShareLinkDisplay" style="margin-top: 10px; display: none;">
+
+        <button
+          id="generateFolderShareLinkBtn"
+          class="btn btn-primary"
+          style="margin-top:15px;"
+        >
+          ${t("generate_share_link")}
+        </button>
+
+        <div id="folderShareLinkDisplay" style="margin-top:15px;display:none;">
           <p>${t("shareable_link")}</p>
-          <input type="text" id="folderShareLinkInput" readonly style="width: 100%;"/>
-          <button id="copyFolderShareLinkBtn" class="btn btn-primary" style="margin-top: 5px;">${t("copy_link")}</button>
+          <input type="text" id="folderShareLinkInput" readonly style="width:100%;padding:5px;"/>
+          <button id="copyFolderShareLinkBtn" class="btn btn-secondary" style="margin-top:5px;">
+            ${t("copy_link")}
+          </button>
         </div>
       </div>
     </div>
@@ -46,62 +77,75 @@ export function openFolderShareModal(folder) {
   document.body.appendChild(modal);
   modal.style.display = "block";
 
-  // Close button handler
-  document.getElementById("closeFolderShareModal").addEventListener("click", () => {
-    modal.remove();
-  });
+  // Close
+  document.getElementById("closeFolderShareModal")
+    .addEventListener("click", () => modal.remove());
 
-  // Handler for generating the share link
-  document.getElementById("generateFolderShareLinkBtn").addEventListener("click", () => {
-    const expiration = document.getElementById("folderShareExpiration").value;
-    const password = document.getElementById("folderSharePassword").value;
-    const allowUpload = document.getElementById("folderShareAllowUpload").checked ? 1 : 0;
-    
-    // Retrieve the CSRF token from the meta tag.
-    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
-    if (!csrfToken) {
-      showToast(t("csrf_error"));
-      return;
-    }
-    // Post to the createFolderShareLink endpoint.
-    fetch("/api/folder/createShareFolderLink.php", {
-      method: "POST",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": csrfToken
-      },
-      body: JSON.stringify({
-        folder: folder,
-        expirationMinutes: parseInt(expiration, 10),
-        password: password,
-        allowUpload: allowUpload
+  // Toggle custom inputs
+  document.getElementById("folderShareExpiration")
+    .addEventListener("change", e => {
+      document.getElementById("customFolderExpirationContainer")
+        .style.display = e.target.value === "custom" ? "block" : "none";
+    });
+
+  // Generate link
+  document.getElementById("generateFolderShareLinkBtn")
+    .addEventListener("click", () => {
+      const sel = document.getElementById("folderShareExpiration");
+      let value, unit;
+      if (sel.value === "custom") {
+        value = parseInt(document.getElementById("customFolderExpirationValue").value, 10);
+        unit  = document.getElementById("customFolderExpirationUnit").value;
+      } else {
+        value = parseInt(sel.value, 10);
+        unit  = "minutes";
+      }
+
+      const password    = document.getElementById("folderSharePassword").value;
+      const allowUpload = document.getElementById("folderShareAllowUpload").checked ? 1 : 0;
+      const csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
+      if (!csrfToken) {
+        showToast(t("csrf_error"));
+        return;
+      }
+
+      fetch("/api/folder/createShareFolderLink.php", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": csrfToken
+        },
+        body: JSON.stringify({
+          folder,
+          expirationValue: value,
+          expirationUnit: unit,
+          password,
+          allowUpload
+        })
       })
-    })
-      .then(response => response.json())
+      .then(r => r.json())
       .then(data => {
         if (data.token && data.link) {
-          const shareUrl = data.link;
-          const displayDiv = document.getElementById("folderShareLinkDisplay");
-          const inputField = document.getElementById("folderShareLinkInput");
-          inputField.value = shareUrl;
-          displayDiv.style.display = "block";
+          document.getElementById("folderShareLinkInput").value = data.link;
+          document.getElementById("folderShareLinkDisplay").style.display = "block";
           showToast(t("share_link_generated"));
         } else {
-          showToast(t("error_generating_share_link") + ": " + (data.error || t("unknown_error")));
+          showToast(t("error_generating_share_link") + ": " + (data.error||t("unknown_error")));
         }
       })
       .catch(err => {
-        console.error("Error generating folder share link:", err);
-        showToast(t("error_generating_share_link") + ": " + (err.error || t("unknown_error")));
+        console.error(err);
+        showToast(t("error_generating_share_link") + ": " + t("unknown_error"));
       });
-  });
+    });
 
-  // Copy share link button handler
-  document.getElementById("copyFolderShareLinkBtn").addEventListener("click", () => {
-    const input = document.getElementById("folderShareLinkInput");
-    input.select();
-    document.execCommand("copy");
-    showToast(t("link_copied"));
-  });
+  // Copy
+  document.getElementById("copyFolderShareLinkBtn")
+    .addEventListener("click", () => {
+      const inp = document.getElementById("folderShareLinkInput");
+      inp.select();
+      document.execCommand("copy");
+      showToast(t("link_copied"));
+    });
 }

public/js/i18n.js

@@ -150,6 +150,13 @@ const translations = {
     "allow_uploads": "Allow Uploads",
     "share_link_generated": "Share Link Generated",
     "error_generating_share_link": "Error Generating Share Link",
+    "custom": "Custom",
+    "duration": "Duration",
+    "seconds": "Seconds",
+    "minutes": "Minutes",
+    "hours": "Hours",
+    "days": "Days",
+    "custom_duration_warning": "⚠️ Using a long expiration may pose security risks. Use with caution.",
 
     // Folder
     "folder_share": "Share Folder",
@@ -166,16 +173,14 @@ const translations = {
     "user": "User:",
     "unknown_error": "Unknown Error",
     "link_copied": "Link Copied to Clipboard",
-    "minutes": "minutes",
-    "hours": "hours",
-    "days": "days",
     "weeks": "weeks",
     "months": "months",
-    "seconds": "seconds",
 
     // Dark Mode Toggle
     "dark_mode_toggle": "Dark Mode",
     "light_mode_toggle": "Light Mode",
+    "switch_to_light_mode": "Switch to light mode",
+    "switch_to_dark_mode": "Switch to dark mode",
 
     // NEW KEYS ADDED FOR ADMIN, USER PANELS, AND TOTP MODALS:
     "admin_panel": "Admin Panel",
@@ -237,7 +242,7 @@ const translations = {
     "ok": "OK",
     "show": "Show",
     "items_per_page": "items per page",
-    "columns":"Columns",
+    "columns": "Columns",
     "api_docs": "API Docs"
   },
   es: {
@@ -804,7 +809,7 @@ const translations = {
     "prev": "Zurück",
     "next": "Weiter",
     "page": "Seite",
-    "of": "von",    
+    "of": "von",
 
     // Login Form keys:
     "login": "Anmelden",

public/js/main.js

@@ -48,6 +48,27 @@ export function loadCsrfToken() {
     });
 }
 
+// 1) Immediately clear “?logout=1” flag
+const params = new URLSearchParams(window.location.search);
+if (params.get('logout') === '1') {
+  localStorage.removeItem("username");
+  localStorage.removeItem("userTOTPEnabled");
+}
+
+// 2) Wire up logoutBtn right away
+const logoutBtn = document.getElementById("logoutBtn");
+if (logoutBtn) {
+  logoutBtn.addEventListener("click", () => {
+    fetch("/api/auth/logout.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "X-CSRF-Token": window.csrfToken }
+    })
+      .then(() => window.location.reload(true))
+      .catch(() => {});
+  });
+}
+
 
 // Expose functions for inline handlers.
 window.sendRequest = sendRequest;
@@ -118,48 +139,55 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // --- Dark Mode Persistence ---
     const darkModeToggle = document.getElementById("darkModeToggle");
-    const storedDarkMode = localStorage.getItem("darkMode");
+    const darkModeIcon = document.getElementById("darkModeIcon");
 
-    if (storedDarkMode === "true") {
-      document.body.classList.add("dark-mode");
-    } else if (storedDarkMode === "false") {
-      document.body.classList.remove("dark-mode");
-    } else {
-      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        document.body.classList.add("dark-mode");
-      } else {
-        document.body.classList.remove("dark-mode");
+    if (darkModeToggle && darkModeIcon) {
+      // 1) Load stored preference (or null)
+      let stored = localStorage.getItem("darkMode");
+      const hasStored = stored !== null;
+
+      // 2) Determine initial mode
+      const isDark = hasStored
+        ? (stored === "true")
+        : (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+      document.body.classList.toggle("dark-mode", isDark);
+      darkModeToggle.classList.toggle("active", isDark);
+
+      // 3) Helper to update icon & aria-label
+      function updateIcon() {
+        const dark = document.body.classList.contains("dark-mode");
+        darkModeIcon.textContent = dark ? "light_mode" : "dark_mode";
+        darkModeToggle.setAttribute(
+          "aria-label",
+          dark ? t("light_mode") : t("dark_mode")
+        );
+        darkModeToggle.setAttribute(
+          "title",
+          dark
+            ? t("switch_to_light_mode")
+            : t("switch_to_dark_mode")
+        );
       }
-    }
 
-    if (darkModeToggle) {
-      darkModeToggle.textContent = document.body.classList.contains("dark-mode")
-        ? t("light_mode")
-        : t("dark_mode");
+      updateIcon();
 
-      darkModeToggle.addEventListener("click", function () {
-        if (document.body.classList.contains("dark-mode")) {
-          document.body.classList.remove("dark-mode");
-          localStorage.setItem("darkMode", "false");
-          darkModeToggle.textContent = t("dark_mode");
-        } else {
-          document.body.classList.add("dark-mode");
-          localStorage.setItem("darkMode", "true");
-          darkModeToggle.textContent = t("light_mode");
-        }
+      // 4) Click handler: always override and store preference
+      darkModeToggle.addEventListener("click", () => {
+        const nowDark = document.body.classList.toggle("dark-mode");
+        localStorage.setItem("darkMode", nowDark ? "true" : "false");
+        updateIcon();
       });
-    }
 
-    if (localStorage.getItem("darkMode") === null && window.matchMedia) {
-      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
-        if (event.matches) {
-          document.body.classList.add("dark-mode");
-          if (darkModeToggle) darkModeToggle.textContent = t("light_mode");
-        } else {
-          document.body.classList.remove("dark-mode");
-          if (darkModeToggle) darkModeToggle.textContent = t("dark_mode");
-        }
-      });
+      // 5) OS‐level change: only if no stored pref at load
+      if (!hasStored && window.matchMedia) {
+        window
+          .matchMedia("(prefers-color-scheme: dark)")
+          .addEventListener("change", e => {
+            document.body.classList.toggle("dark-mode", e.matches);
+            updateIcon();
+          });
+      }
     }
     // --- End Dark Mode Persistence ---
 

public/js/redoc-init.js

@@ -0,0 +1,6 @@
+// public/js/redoc-init.js
+if (!customElements.get('redoc')) {
+    Redoc.init(window.location.origin + '/api.php?spec=1',
+               {},
+               document.getElementById('redoc-container'));
+  }

public/js/sharedFolderView.js

@@ -0,0 +1,90 @@
+// sharedFolderView.js
+document.addEventListener('DOMContentLoaded', function() {
+    let viewMode = 'list';
+    const payload = JSON.parse(
+      document.getElementById('shared-data').textContent
+    );
+    const token     = payload.token;
+    const filesData = payload.files;
+    const downloadBase = `${window.location.origin}/api/folder/downloadSharedFile.php?token=${encodeURIComponent(token)}&file=`;
+    const btn = document.getElementById('toggleBtn');
+    if (btn) btn.classList.add('toggle-btn');
+  
+    function toggleViewMode() {
+      const listEl    = document.getElementById('listViewContainer');
+      const galleryEl = document.getElementById('galleryViewContainer');
+  
+      if (viewMode === 'list') {
+        viewMode = 'gallery';
+        listEl.style.display    = 'none';
+        renderGalleryView();
+        galleryEl.style.display = 'block';
+        btn.textContent         = 'Switch to List View';
+      } else {
+        viewMode = 'list';
+        galleryEl.style.display = 'none';
+        listEl.style.display    = 'block';
+        btn.textContent         = 'Switch to Gallery View';
+      }
+    }
+  
+    btn.addEventListener('click', toggleViewMode);
+  
+    function renderGalleryView() {
+      const container = document.getElementById('galleryViewContainer');
+      // clear previous
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
+      const grid = document.createElement('div');
+      grid.className = 'shared-gallery-container';
+  
+      filesData.forEach(file => {
+        const url = downloadBase + encodeURIComponent(file);
+        const ext = file.split('.').pop().toLowerCase();
+        const isImg = /^(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/.test(ext);
+  
+        // card
+        const card = document.createElement('div');
+        card.className = 'shared-gallery-card';
+  
+        // preview
+        const preview = document.createElement('div');
+        preview.className = 'gallery-preview';
+        preview.style.cursor = 'pointer';
+        preview.dataset.url = url;
+  
+        if (isImg) {
+          const img = document.createElement('img');
+          img.src = url;
+          img.alt = file;            // safe, file is not HTML
+          preview.appendChild(img);
+        } else {
+          const icon = document.createElement('span');
+          icon.className = 'material-icons';
+          icon.textContent = 'insert_drive_file';
+          preview.appendChild(icon);
+        }
+        card.appendChild(preview);
+  
+        // info
+        const info = document.createElement('div');
+        info.className = 'gallery-info';
+        const nameSpan = document.createElement('span');
+        nameSpan.className = 'gallery-file-name';
+        nameSpan.textContent = file; // textContent escapes any HTML
+        info.appendChild(nameSpan);
+        card.appendChild(info);
+  
+        grid.appendChild(card);
+  
+        preview.addEventListener('click', () => {
+          window.location.href = preview.dataset.url;
+        });
+      });
+  
+      container.appendChild(grid);
+    }
+  
+    window.renderGalleryView = renderGalleryView;
+  });

src/controllers/fileController.php

@@ -4,7 +4,8 @@
 require_once __DIR__ . '/../../config/config.php';
 require_once PROJECT_ROOT . '/src/models/FileModel.php';
 
-class FileController {
+class FileController
+{
     /**
      * @OA\Post(
      *     path="/api/file/copyFiles.php",
@@ -50,9 +51,10 @@ class FileController {
      *
      * @return void Outputs JSON response.
      */
-    public function copyFiles() {
+    public function copyFiles()
+    {
         header('Content-Type: application/json');
-        
+
         // --- CSRF Protection ---
         $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
         $receivedToken = isset($headersArr['x-csrf-token']) ? trim($headersArr['x-csrf-token']) : '';
@@ -61,14 +63,14 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Check user permissions (assuming loadUserPermissions() is available).
         $username = $_SESSION['username'] ?? '';
         $userPermissions = loadUserPermissions($username);
@@ -76,7 +78,7 @@ class FileController {
             echo json_encode(["error" => "Read-only users are not allowed to copy files."]);
             exit;
         }
-        
+
         // Get JSON input data.
         $data = json_decode(file_get_contents("php://input"), true);
         if (
@@ -89,11 +91,11 @@ class FileController {
             echo json_encode(["error" => "Invalid request"]);
             exit;
         }
-        
+
         $sourceFolder = trim($data['source']);
         $destinationFolder = trim($data['destination']);
         $files = $data['files'];
-        
+
         // Validate folder names.
         if ($sourceFolder !== 'root' && !preg_match(REGEX_FOLDER_NAME, $sourceFolder)) {
             echo json_encode(["error" => "Invalid source folder name."]);
@@ -103,7 +105,7 @@ class FileController {
             echo json_encode(["error" => "Invalid destination folder name."]);
             exit;
         }
-        
+
         // Delegate to the model.
         $result = FileModel::copyFiles($sourceFolder, $destinationFolder, $files);
         echo json_encode($result);
@@ -153,9 +155,10 @@ class FileController {
      *
      * @return void Outputs JSON response.
      */
-    public function deleteFiles() {
+    public function deleteFiles()
+    {
         header('Content-Type: application/json');
-        
+
         // --- CSRF Protection ---
         $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
         $receivedToken = isset($headersArr['x-csrf-token']) ? trim($headersArr['x-csrf-token']) : '';
@@ -164,14 +167,14 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Load user's permissions.
         $username = $_SESSION['username'] ?? '';
         $userPermissions = loadUserPermissions($username);
@@ -179,7 +182,7 @@ class FileController {
             echo json_encode(["error" => "Read-only users are not allowed to delete files."]);
             exit;
         }
-        
+
         // Get JSON input.
         $data = json_decode(file_get_contents("php://input"), true);
         if (!isset($data['files']) || !is_array($data['files'])) {
@@ -187,7 +190,7 @@ class FileController {
             echo json_encode(["error" => "No file names provided"]);
             exit;
         }
-        
+
         // Determine folder; default to 'root'.
         $folder = isset($data['folder']) ? trim($data['folder']) : 'root';
         if ($folder !== 'root' && !preg_match(REGEX_FOLDER_NAME, $folder)) {
@@ -195,13 +198,13 @@ class FileController {
             exit;
         }
         $folder = trim($folder, "/\\ ");
-        
+
         // Delegate to the FileModel.
         $result = FileModel::deleteFiles($folder, $data['files']);
         echo json_encode($result);
     }
 
-        /**
+    /**
      * @OA\Post(
      *     path="/api/file/moveFiles.php",
      *     summary="Move files between folders",
@@ -246,9 +249,10 @@ class FileController {
      *
      * @return void Outputs JSON response.
      */
-    public function moveFiles() {
+    public function moveFiles()
+    {
         header('Content-Type: application/json');
-        
+
         // --- CSRF Protection ---
         $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
         $receivedToken = isset($headersArr['x-csrf-token']) ? trim($headersArr['x-csrf-token']) : '';
@@ -257,14 +261,14 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Verify that the user is not read-only.
         $username = $_SESSION['username'] ?? '';
         $userPermissions = loadUserPermissions($username);
@@ -272,7 +276,7 @@ class FileController {
             echo json_encode(["error" => "Read-only users are not allowed to move files."]);
             exit;
         }
-        
+
         // Get JSON input.
         $data = json_decode(file_get_contents("php://input"), true);
         if (
@@ -285,10 +289,10 @@ class FileController {
             echo json_encode(["error" => "Invalid request"]);
             exit;
         }
-        
+
         $sourceFolder = trim($data['source']) ?: 'root';
         $destinationFolder = trim($data['destination']) ?: 'root';
-        
+
         // Validate folder names.
         if ($sourceFolder !== 'root' && !preg_match(REGEX_FOLDER_NAME, $sourceFolder)) {
             echo json_encode(["error" => "Invalid source folder name."]);
@@ -298,13 +302,13 @@ class FileController {
             echo json_encode(["error" => "Invalid destination folder name."]);
             exit;
         }
-        
+
         // Delegate to the model.
         $result = FileModel::moveFiles($sourceFolder, $destinationFolder, $data['files']);
         echo json_encode($result);
     }
 
-        /**
+    /**
      * @OA\Post(
      *     path="/api/file/renameFile.php",
      *     summary="Rename a file",
@@ -346,12 +350,13 @@ class FileController {
      *
      * @return void Outputs a JSON response.
      */
-    public function renameFile() {
+    public function renameFile()
+    {
         header('Content-Type: application/json');
         header("Cache-Control: no-cache, no-store, must-revalidate");
         header("Pragma: no-cache");
         header("Expires: 0");
-        
+
         // --- CSRF Protection ---
         $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
         $receivedToken = isset($headersArr['x-csrf-token']) ? trim($headersArr['x-csrf-token']) : '';
@@ -360,14 +365,14 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Verify user permissions.
         $username = $_SESSION['username'] ?? '';
         $userPermissions = loadUserPermissions($username);
@@ -375,7 +380,7 @@ class FileController {
             echo json_encode(["error" => "Read-only users are not allowed to rename files."]);
             exit;
         }
-        
+
         // Get JSON input.
         $data = json_decode(file_get_contents("php://input"), true);
         if (!$data || !isset($data['folder']) || !isset($data['oldName']) || !isset($data['newName'])) {
@@ -383,29 +388,29 @@ class FileController {
             echo json_encode(["error" => "Invalid input"]);
             exit;
         }
-        
+
         $folder = trim($data['folder']) ?: 'root';
         // Validate folder: allow letters, numbers, underscores, dashes, spaces, and forward slashes.
         if ($folder !== 'root' && !preg_match(REGEX_FOLDER_NAME, $folder)) {
             echo json_encode(["error" => "Invalid folder name"]);
             exit;
         }
-        
+
         $oldName = basename(trim($data['oldName']));
         $newName = basename(trim($data['newName']));
-        
+
         // Validate file names.
         if (!preg_match(REGEX_FILE_NAME, $oldName) || !preg_match(REGEX_FILE_NAME, $newName)) {
             echo json_encode(["error" => "Invalid file name."]);
             exit;
         }
-        
+
         // Delegate the renaming operation to the model.
         $result = FileModel::renameFile($folder, $oldName, $newName);
         echo json_encode($result);
     }
 
-        /**
+    /**
      * @OA\Post(
      *     path="/api/file/saveFile.php",
      *     summary="Save a file",
@@ -446,9 +451,10 @@ class FileController {
      *
      * @return void Outputs a JSON response.
      */
-    public function saveFile() {
+    public function saveFile()
+    {
         header('Content-Type: application/json');
-        
+
         // --- CSRF Protection ---
         $headersArr   = array_change_key_case(getallheaders(), CASE_LOWER);
         $receivedToken = $headersArr['x-csrf-token'] ?? '';
@@ -457,14 +463,14 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // --- Authentication Check ---
         if (empty($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         $username = $_SESSION['username'] ?? '';
         // --- Read‑only check ---
         $userPermissions = loadUserPermissions($username);
@@ -472,7 +478,7 @@ class FileController {
             echo json_encode(["error" => "Read-only users are not allowed to save files."]);
             exit;
         }
-        
+
         // --- Input parsing ---
         $data = json_decode(file_get_contents("php://input"), true);
         if (empty($data) || !isset($data["fileName"], $data["content"])) {
@@ -480,17 +486,17 @@ class FileController {
             echo json_encode(["error" => "Invalid request data", "received" => $data]);
             exit;
         }
-        
+
         $fileName = basename($data["fileName"]);
         $folder   = isset($data["folder"]) ? trim($data["folder"]) : "root";
-        
+
         // --- Folder validation ---
         if (strtolower($folder) !== "root" && !preg_match(REGEX_FOLDER_NAME, $folder)) {
             echo json_encode(["error" => "Invalid folder name"]);
             exit;
         }
         $folder = trim($folder, "/\\ ");
-        
+
         // --- Delegate to model, passing the uploader ---
         // Make sure FileModel::saveFile signature is:
         // saveFile(string $folder, string $fileName, $content, ?string $uploader = null)
@@ -500,7 +506,7 @@ class FileController {
             $data["content"],
             $username     // ← pass the real uploader here
         );
-        
+
         echo json_encode($result);
     }
 
@@ -555,7 +561,8 @@ class FileController {
      *
      * @return void Outputs file content with appropriate headers.
      */
-    public function downloadFile() {
+    public function downloadFile()
+    {
         // Check if the user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
@@ -563,31 +570,31 @@ class FileController {
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Get GET parameters.
         $file = isset($_GET['file']) ? basename($_GET['file']) : '';
         $folder = isset($_GET['folder']) ? trim($_GET['folder']) : 'root';
-        
+
         // Validate the file name using REGEX_FILE_NAME.
         if (!preg_match(REGEX_FILE_NAME, $file)) {
             http_response_code(400);
             echo json_encode(["error" => "Invalid file name."]);
             exit;
         }
-        
+
         // Retrieve download info from the model.
         $downloadInfo = FileModel::getDownloadInfo($folder, $file);
         if (isset($downloadInfo['error'])) {
-            http_response_code( (in_array($downloadInfo['error'], ["File not found.", "Access forbidden."])) ? 404 : 400 );
+            http_response_code((in_array($downloadInfo['error'], ["File not found.", "Access forbidden."])) ? 404 : 400);
             echo json_encode(["error" => $downloadInfo['error']]);
             exit;
         }
-        
+
         // Serve the file.
         $realFilePath = $downloadInfo['filePath'];
         $mimeType = $downloadInfo['mimeType'];
         header("Content-Type: " . $mimeType);
-        
+
         // For images, serve inline; for others, force download.
         $ext = strtolower(pathinfo($realFilePath, PATHINFO_EXTENSION));
         $inlineImageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico'];
@@ -601,7 +608,7 @@ class FileController {
         exit;
     }
 
-        /**
+    /**
      * @OA\Post(
      *     path="/api/file/downloadZip.php",
      *     summary="Download a ZIP archive of selected files",
@@ -649,7 +656,8 @@ class FileController {
      *
      * @return void Outputs the ZIP file for download.
      */
-    public function downloadZip() {
+    public function downloadZip()
+    {
         // --- CSRF Protection ---
         $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
         $receivedToken = isset($headersArr['x-csrf-token']) ? trim($headersArr['x-csrf-token']) : '';
@@ -659,7 +667,7 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
@@ -667,7 +675,7 @@ class FileController {
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Read and decode JSON input.
         $data = json_decode(file_get_contents("php://input"), true);
         if (!is_array($data) || !isset($data['folder']) || !isset($data['files']) || !is_array($data['files'])) {
@@ -676,10 +684,10 @@ class FileController {
             echo json_encode(["error" => "Invalid input."]);
             exit;
         }
-        
+
         $folder = $data['folder'];
         $files = $data['files'];
-        
+
         // Validate folder: if not "root", split and validate each segment.
         if ($folder !== "root") {
             $parts = explode('/', $folder);
@@ -692,7 +700,7 @@ class FileController {
                 }
             }
         }
-        
+
         // Create ZIP archive using FileModel.
         $result = FileModel::createZipArchive($folder, $files);
         if (isset($result['error'])) {
@@ -701,7 +709,7 @@ class FileController {
             echo json_encode(["error" => $result['error']]);
             exit;
         }
-        
+
         $zipPath = $result['zipPath'];
         if (!file_exists($zipPath)) {
             http_response_code(500);
@@ -709,21 +717,21 @@ class FileController {
             echo json_encode(["error" => "ZIP archive not found."]);
             exit;
         }
-        
+
         // Send headers to force download.
         header('Content-Type: application/zip');
         header('Content-Disposition: attachment; filename="files.zip"');
         header('Content-Length: ' . filesize($zipPath));
         header('Cache-Control: no-store, no-cache, must-revalidate');
         header('Pragma: no-cache');
-        
+
         // Output the ZIP file.
         readfile($zipPath);
         unlink($zipPath);
         exit;
     }
 
-     /**
+    /**
      * @OA\Post(
      *     path="/api/file/extractZip.php",
      *     summary="Extract ZIP files",
@@ -768,9 +776,10 @@ class FileController {
      *
      * @return void Outputs JSON response.
      */
-    public function extractZip() {
+    public function extractZip()
+    {
         header('Content-Type: application/json');
-        
+
         // --- CSRF Protection ---
         $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
         $receivedToken = isset($headersArr['x-csrf-token']) ? trim($headersArr['x-csrf-token']) : '';
@@ -779,14 +788,14 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Read and decode JSON input.
         $data = json_decode(file_get_contents("php://input"), true);
         if (!is_array($data) || !isset($data['folder']) || !isset($data['files']) || !is_array($data['files'])) {
@@ -794,10 +803,10 @@ class FileController {
             echo json_encode(["error" => "Invalid input."]);
             exit;
         }
-        
+
         $folder = $data['folder'];
         $files = $data['files'];
-        
+
         // Validate folder name.
         if ($folder !== "root") {
             $parts = explode('/', trim($folder));
@@ -809,13 +818,13 @@ class FileController {
                 }
             }
         }
-        
+
         // Delegate to the model.
         $result = FileModel::extractZipArchive($folder, $files);
         echo json_encode($result);
     }
 
-        /**
+    /**
      * @OA\Get(
      *     path="/api/file/share.php",
      *     summary="Access a shared file",
@@ -860,18 +869,19 @@ class FileController {
      *
      * @return void Outputs either HTML (password form) or serves the file.
      */
-    public function shareFile() {
+    public function shareFile()
+    {
         // Retrieve and sanitize GET parameters.
         $token = filter_input(INPUT_GET, 'token', FILTER_SANITIZE_STRING);
         $providedPass = filter_input(INPUT_GET, 'pass', FILTER_SANITIZE_STRING);
-        
+
         if (empty($token)) {
             http_response_code(400);
             header('Content-Type: application/json');
             echo json_encode(["error" => "Missing token."]);
             exit;
         }
-        
+
         // Get share record from the model.
         $record = FileModel::getShareRecord($token);
         if (!$record) {
@@ -880,7 +890,7 @@ class FileController {
             echo json_encode(["error" => "Share link not found."]);
             exit;
         }
-        
+
         // Check expiration.
         if (time() > $record['expires']) {
             http_response_code(403);
@@ -888,13 +898,14 @@ class FileController {
             echo json_encode(["error" => "This link has expired."]);
             exit;
         }
-        
+
         // If a password is required and not provided, show an HTML form.
         if (!empty($record['password']) && empty($providedPass)) {
             header("Content-Type: text/html; charset=utf-8");
-            ?>
+?>
             <!DOCTYPE html>
             <html>
+
             <head>
                 <meta charset="utf-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -906,14 +917,16 @@ class FileController {
                         background-color: #f4f4f4;
                         color: #333;
                     }
+
                     form {
                         max-width: 400px;
                         margin: 40px auto;
                         background: #fff;
                         padding: 20px;
                         border-radius: 8px;
-                        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                     }
+
                     input[type="password"] {
                         width: 100%;
                         padding: 10px;
@@ -921,6 +934,7 @@ class FileController {
                         border: 1px solid #ccc;
                         border-radius: 4px;
                     }
+
                     button {
                         padding: 10px 20px;
                         background: #007BFF;
@@ -929,11 +943,13 @@ class FileController {
                         color: #fff;
                         cursor: pointer;
                     }
+
                     button:hover {
                         background: #0056b3;
                     }
                 </style>
             </head>
+
             <body>
                 <h2>This file is protected by a password.</h2>
                 <form method="get" action="/api/file/share.php">
@@ -943,11 +959,12 @@ class FileController {
                     <button type="submit">Submit</button>
                 </form>
             </body>
+
             </html>
-            <?php
+<?php
             exit;
         }
-        
+
         // If a password is required, validate the provided password.
         if (!empty($record['password'])) {
             if (!password_verify($providedPass, $record['password'])) {
@@ -957,7 +974,7 @@ class FileController {
                 exit;
             }
         }
-        
+
         // Build file path securely.
         $folder = trim($record['folder'], "/\\ ");
         $file = $record['file'];
@@ -966,7 +983,7 @@ class FileController {
             $filePath .= $folder . DIRECTORY_SEPARATOR;
         }
         $filePath .= $file;
-        
+
         $realFilePath = realpath($filePath);
         $uploadDirReal = realpath(UPLOAD_DIR);
         if ($realFilePath === false || strpos($realFilePath, $uploadDirReal) !== 0) {
@@ -981,12 +998,12 @@ class FileController {
             echo json_encode(["error" => "File not found."]);
             exit;
         }
-        
+
         // Serve the file.
         $mimeType = mime_content_type($realFilePath);
         header("Content-Type: " . $mimeType);
         $ext = strtolower(pathinfo($realFilePath, PATHINFO_EXTENSION));
-        if (in_array($ext, ['jpg','jpeg','png','gif','bmp','webp','svg','ico'])) {
+        if (in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico'])) {
             header('Content-Disposition: inline; filename="' . basename($realFilePath) . '"');
         } else {
             header('Content-Disposition: attachment; filename="' . basename($realFilePath) . '"');
@@ -994,25 +1011,31 @@ class FileController {
         header("Cache-Control: no-store, no-cache, must-revalidate");
         header("Pragma: no-cache");
         header('Content-Length: ' . filesize($realFilePath));
-        
+
         readfile($realFilePath);
         exit;
     }
 
-        /**
+    /**
      * @OA\Post(
      *     path="/api/file/createShareLink.php",
      *     summary="Create a share link for a file",
-     *     description="Generates a secure share link token for a specific file with an optional password protection and expiration time.",
+     *     description="Generates a secure share link token for a specific file with optional password protection and a custom expiration time.",
      *     operationId="createShareLink",
      *     tags={"Files"},
      *     @OA\RequestBody(
      *         required=true,
      *         @OA\JsonContent(
-     *             required={"folder", "file"},
+     *             required={"folder", "file", "expirationValue", "expirationUnit"},
      *             @OA\Property(property="folder", type="string", example="Documents"),
      *             @OA\Property(property="file", type="string", example="report.pdf"),
-     *             @OA\Property(property="expirationMinutes", type="integer", example=60),
+     *             @OA\Property(property="expirationValue", type="integer", example=1),
+     *             @OA\Property(
+     *                 property="expirationUnit",
+     *                 type="string",
+     *                 enum={"seconds","minutes","hours","days"},
+     *                 example="minutes"
+     *             ),
      *             @OA\Property(property="password", type="string", example="secret")
      *         )
      *     ),
@@ -1042,25 +1065,26 @@ class FileController {
      *
      * @return void Outputs JSON response.
      */
-    public function createShareLink() {
+    public function createShareLink()
+    {
         header('Content-Type: application/json');
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Check user permissions.
         $username = $_SESSION['username'] ?? '';
         $userPermissions = loadUserPermissions($username);
-        if ($username && isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        if ($username && !empty($userPermissions['readOnly'])) {
             http_response_code(403);
             echo json_encode(["error" => "Read-only users are not allowed to create share links."]);
             exit;
         }
-        
+
         // Parse POST JSON input.
         $input = json_decode(file_get_contents("php://input"), true);
         if (!$input) {
@@ -1068,26 +1092,45 @@ class FileController {
             echo json_encode(["error" => "Invalid input."]);
             exit;
         }
-        
+
         // Extract parameters.
         $folder = isset($input['folder']) ? trim($input['folder']) : "";
-        $file = isset($input['file']) ? basename($input['file']) : "";
-        $expirationMinutes = isset($input['expirationMinutes']) ? intval($input['expirationMinutes']) : 60;
+        $file   = isset($input['file'])   ? basename($input['file'])   : "";
+        $value  = isset($input['expirationValue']) ? intval($input['expirationValue']) : 60;
+        $unit   = isset($input['expirationUnit'])  ? $input['expirationUnit']          : 'minutes';
         $password = isset($input['password']) ? $input['password'] : "";
-        
-        // Validate folder.
+
+        // Validate folder name.
         if ($folder !== 'root' && !preg_match(REGEX_FOLDER_NAME, $folder)) {
             http_response_code(400);
             echo json_encode(["error" => "Invalid folder name."]);
             exit;
         }
-        
+
+        // Convert the provided value+unit into seconds
+        switch ($unit) {
+            case 'seconds':
+                $expirationSeconds = $value;
+                break;
+            case 'hours':
+                $expirationSeconds = $value * 3600;
+                break;
+            case 'days':
+                $expirationSeconds = $value * 86400;
+                break;
+            case 'minutes':
+            default:
+                $expirationSeconds = $value * 60;
+                break;
+        }
+
         // Delegate share link creation to the model.
-        $result = FileModel::createShareLink($folder, $file, $expirationMinutes, $password);
+        $result = FileModel::createShareLink($folder, $file, $expirationSeconds, $password);
+
         echo json_encode($result);
     }
 
-        /**
+    /**
      * @OA\Get(
      *     path="/api/file/getTrashItems.php",
      *     summary="Get trash items",
@@ -1109,16 +1152,17 @@ class FileController {
      *
      * @return void Outputs JSON response with trash items.
      */
-    public function getTrashItems() {
+    public function getTrashItems()
+    {
         header('Content-Type: application/json');
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Delegate to the model.
         $trashItems = FileModel::getTrashItems();
         echo json_encode($trashItems);
@@ -1164,9 +1208,10 @@ class FileController {
      *
      * @return void Outputs JSON response.
      */
-    public function restoreFiles() {
+    public function restoreFiles()
+    {
         header('Content-Type: application/json');
-        
+
         // CSRF Protection.
         $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
         $receivedToken = isset($headersArr['x-csrf-token']) ? trim($headersArr['x-csrf-token']) : '';
@@ -1175,14 +1220,14 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Read POST input.
         $data = json_decode(file_get_contents("php://input"), true);
         if (!isset($data['files']) || !is_array($data['files'])) {
@@ -1190,13 +1235,13 @@ class FileController {
             echo json_encode(["error" => "No file or folder identifiers provided"]);
             exit;
         }
-        
+
         // Delegate restoration to the model.
         $result = FileModel::restoreFiles($data['files']);
         echo json_encode($result);
     }
 
-        /**
+    /**
      * @OA\Post(
      *     path="/api/file/deleteTrashFiles.php",
      *     summary="Delete trash files",
@@ -1247,9 +1292,10 @@ class FileController {
      *
      * @return void Outputs a JSON response.
      */
-    public function deleteTrashFiles() {
+    public function deleteTrashFiles()
+    {
         header('Content-Type: application/json');
-        
+
         // CSRF Protection.
         $headersArr = array_change_key_case(getallheaders(), CASE_LOWER);
         $receivedToken = isset($headersArr['x-csrf-token']) ? trim($headersArr['x-csrf-token']) : '';
@@ -1258,14 +1304,14 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Read and decode JSON input.
         $data = json_decode(file_get_contents("php://input"), true);
         if (!$data) {
@@ -1273,7 +1319,7 @@ class FileController {
             echo json_encode(["error" => "Invalid input"]);
             exit;
         }
-        
+
         // Determine deletion mode.
         $filesToDelete = [];
         if (isset($data['deleteAll']) && $data['deleteAll'] === true) {
@@ -1299,14 +1345,14 @@ class FileController {
             echo json_encode(["error" => "No trash file identifiers provided"]);
             exit;
         }
-        
+
         // Delegate deletion to the model.
         $result = FileModel::deleteTrashFiles($filesToDelete);
 
         // Build a human‑friendly success or error message
         if (!empty($result['deleted'])) {
             $count = count($result['deleted']);
-            $msg = "Trash item" . ($count===1 ? "" : "s") . " deleted: " . implode(", ", $result['deleted']);
+            $msg = "Trash item" . ($count === 1 ? "" : "s") . " deleted: " . implode(", ", $result['deleted']);
             echo json_encode(["success" => $msg]);
         } elseif (!empty($result['error'])) {
             echo json_encode(["error" => $result['error']]);
@@ -1316,7 +1362,7 @@ class FileController {
         exit;
     }
 
-        /**
+    /**
      * @OA\Get(
      *     path="/api/file/getFileTag.php",
      *     summary="Retrieve file tags",
@@ -1337,15 +1383,16 @@ class FileController {
      *
      * @return void Outputs JSON response with file tags.
      */
-    public function getFileTags(): void {
+    public function getFileTags(): void
+    {
         header('Content-Type: application/json; charset=utf-8');
-        
+
         $tags = FileModel::getFileTags();
         echo json_encode($tags);
         exit;
     }
 
-        /**
+    /**
      * @OA\Post(
      *     path="/api/file/saveFileTag.php",
      *     summary="Save file tags",
@@ -1397,7 +1444,8 @@ class FileController {
      *
      * @return void Outputs JSON response.
      */
-    public function saveFileTag(): void {
+    public function saveFileTag(): void
+    {
         header("Cache-Control: no-cache, no-store, must-revalidate");
         header("Pragma: no-cache");
         header("Expires: 0");
@@ -1411,14 +1459,14 @@ class FileController {
             echo json_encode(["error" => "Invalid CSRF token"]);
             exit;
         }
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Check that the user is not read-only.
         $username = $_SESSION['username'] ?? '';
         $userPermissions = loadUserPermissions($username);
@@ -1426,7 +1474,7 @@ class FileController {
             echo json_encode(["error" => "Read-only users are not allowed to file tags"]);
             exit;
         }
-        
+
         // Retrieve and sanitize input.
         $data = json_decode(file_get_contents('php://input'), true);
         if (!$data) {
@@ -1434,26 +1482,26 @@ class FileController {
             echo json_encode(["error" => "No data received"]);
             exit;
         }
-        
+
         $file = isset($data['file']) ? trim($data['file']) : '';
         $folder = isset($data['folder']) ? trim($data['folder']) : 'root';
         $tags = $data['tags'] ?? [];
         $deleteGlobal = isset($data['deleteGlobal']) ? (bool)$data['deleteGlobal'] : false;
         $tagToDelete = isset($data['tagToDelete']) ? trim($data['tagToDelete']) : null;
-        
+
         if ($file === '') {
             http_response_code(400);
             echo json_encode(["error" => "No file specified."]);
             exit;
         }
-        
+
         // Validate folder name.
         if (strtolower($folder) !== 'root' && !preg_match(REGEX_FOLDER_NAME, $folder)) {
             http_response_code(400);
             echo json_encode(["error" => "Invalid folder name."]);
             exit;
         }
-        
+
         // Delegate to the model.
         $result = FileModel::saveFileTag($folder, $file, $tags, $deleteGlobal, $tagToDelete);
         echo json_encode($result);
@@ -1496,16 +1544,17 @@ class FileController {
      *
      * @return void Outputs JSON response.
      */
-    public function getFileList(): void {
+    public function getFileList(): void
+    {
         header('Content-Type: application/json');
-        
+
         // Ensure user is authenticated.
         if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
-        
+
         // Retrieve the folder from GET; default to "root".
         $folder = isset($_GET['folder']) ? trim($_GET['folder']) : 'root';
         if ($folder !== 'root' && !preg_match(REGEX_FOLDER_NAME, $folder)) {
@@ -1513,7 +1562,7 @@ class FileController {
             echo json_encode(["error" => "Invalid folder name."]);
             exit;
         }
-        
+
         // Delegate to the model.
         $result = FileModel::getFileList($folder);
         if (isset($result['error'])) {
@@ -1522,4 +1571,4 @@ class FileController {
         echo json_encode($result);
         exit;
     }
-}
+}

src/controllers/folderController.php

@@ -402,19 +402,19 @@ class FolderController
      * @return void Outputs HTML content.
      */
 
-     function formatBytes($bytes)
-     {
-         if ($bytes < 1024) {
-             return $bytes . " B";
-         } elseif ($bytes < 1024 * 1024) {
-             return round($bytes / 1024, 2) . " KB";
-         } elseif ($bytes < 1024 * 1024 * 1024) {
-             return round($bytes / (1024 * 1024), 2) . " MB";
-         } else {
-             return round($bytes / (1024 * 1024 * 1024), 2) . " GB";
-         }
-     }
-     
+    function formatBytes($bytes)
+    {
+        if ($bytes < 1024) {
+            return $bytes . " B";
+        } elseif ($bytes < 1024 * 1024) {
+            return round($bytes / 1024, 2) . " KB";
+        } elseif ($bytes < 1024 * 1024 * 1024) {
+            return round($bytes / (1024 * 1024), 2) . " MB";
+        } else {
+            return round($bytes / (1024 * 1024 * 1024), 2) . " GB";
+        }
+    }
+
     public function shareFolder(): void
     {
         // Retrieve GET parameters.
@@ -550,13 +550,18 @@ class FolderController
                 body {
                     background: #f2f2f2;
                     font-family: Arial, sans-serif;
-                    padding: 20px;
+                    padding: 0px 20px 20px 20px;
                     color: #333;
                 }
 
                 .header {
                     text-align: center;
                     margin-bottom: 30px;
+                    margin-top: 0;
+                }
+
+                .header h1 {
+                    margin-top: 0;
                 }
 
                 .container {
@@ -661,6 +666,28 @@ class FolderController
                     font-size: 0.9rem;
                     color: #777;
                 }
+
+                .toggle-btn {
+                    background-color: #007BFF;
+                    color: #fff;
+                    border: none;
+                    border-radius: 4px;
+                    padding: 8px 16px;
+                    font-size: 1rem;
+                    cursor: pointer;
+                }
+
+                .toggle-btn:hover {
+                    background-color: #0056b3;
+                }
+
+                .pagination a:hover {
+                    background-color: #0056b3;
+                }
+
+                .pagination span {
+                    cursor: default;
+                }
             </style>
         </head>
 
@@ -670,7 +697,7 @@ class FolderController
             </div>
             <div class="container">
                 <!-- Toggle Button -->
-                <button id="toggleBtn" class="toggle-btn" onclick="toggleViewMode()">Switch to Gallery View</button>
+                <button id="toggleBtn" class="toggle-btn">Switch to Gallery View</button>
 
                 <!-- List View Container -->
                 <div id="listViewContainer">
@@ -757,75 +784,14 @@ class FolderController
             <div class="footer">
                 &copy; <?php echo date("Y"); ?> FileRise. All rights reserved.
             </div>
-
-            <script>
-                // (Optional) JavaScript for toggling view modes (list/gallery).
-                var viewMode = 'list';
-                window.imageCache = window.imageCache || {};
-                var filesData = <?php echo json_encode($files); ?>;
-
-                // Use the shared‑folder relative path (from your model), not realFolderPath
-                // $data['folder'] should be something like "eafwef/testfolder2/test/new folder two"
-                var rawRelPath = "<?php echo addslashes($data['folder']); ?>";
-                // Split into segments, encode each segment, then re-join
-                var folderSegments = rawRelPath
-                    .split('/')
-                    .map(encodeURIComponent)
-                    .join('/');
-
-                function renderGalleryView() {
-                    var galleryContainer = document.getElementById("galleryViewContainer");
-                    var html = '<div class="shared-gallery-container">';
-                    filesData.forEach(function(file) {
-                        // Encode the filename too
-                        var fileName = encodeURIComponent(file);
-                        var fileUrl = window.location.origin +
-                            '/uploads/' +
-                            folderSegments +
-                            '/' +
-                            fileName +
-                            '?t=' +
-                            Date.now();
-
-                        var ext = file.split('.').pop().toLowerCase();
-                        var thumbnail;
-                        if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico'].indexOf(ext) >= 0) {
-                            thumbnail = '<img src="' + fileUrl + '" alt="' + file + '">';
-                        } else {
-                            thumbnail = '<span class="material-icons">insert_drive_file</span>';
-                        }
-
-                        html +=
-                            '<div class="shared-gallery-card">' +
-                            '<div class="gallery-preview" ' +
-                            'onclick="window.location.href=\'' + fileUrl + '\'" ' +
-                            'style="cursor:pointer;">' +
-                            thumbnail +
-                            '</div>' +
-                            '<div class="gallery-info">' +
-                            '<span class="gallery-file-name">' + file + '</span>' +
-                            '</div>' +
-                            '</div>';
-                    });
-                    html += '</div>';
-                    galleryContainer.innerHTML = html;
-                }
-
-                function toggleViewMode() {
-                    if (viewMode === 'list') {
-                        viewMode = 'gallery';
-                        document.getElementById("listViewContainer").style.display = "none";
-                        renderGalleryView();
-                        document.getElementById("galleryViewContainer").style.display = "block";
-                        document.getElementById("toggleBtn").textContent = "Switch to List View";
-                    } else {
-                        viewMode = 'list';
-                        document.getElementById("galleryViewContainer").style.display = "none";
-                        document.getElementById("listViewContainer").style.display = "block";
-                        document.getElementById("toggleBtn").textContent = "Switch to Gallery View";
-                    }
+            <!-- non-executing JSON payload, never blocked by CSP -->
+            <script type="application/json" id="shared-data">
+                {
+                    "token": <?php echo json_encode($token, JSON_HEX_TAG); ?>,
+                    "files": <?php echo json_encode($files, JSON_HEX_TAG); ?>
                 }
             </script>
+            <script src="/js/sharedFolderView.js" defer></script>
         </body>
 
         </html>
@@ -881,38 +847,63 @@ class FolderController
     {
         header('Content-Type: application/json');
 
-        // Ensure user is authenticated.
-        if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+        // Auth check
+        if (empty($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
             http_response_code(401);
             echo json_encode(["error" => "Unauthorized"]);
             exit;
         }
 
-        // Check that the user is not read-only.
+        // Read-only check
         $username = $_SESSION['username'] ?? '';
-        $userPermissions = loadUserPermissions($username);
-        if ($username && isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        $perms    = loadUserPermissions($username);
+        if ($username && !empty($perms['readOnly'])) {
             http_response_code(403);
             echo json_encode(["error" => "Read-only users are not allowed to create share folders."]);
             exit;
         }
 
-        // Retrieve and decode POST input.
-        $input = json_decode(file_get_contents("php://input"), true);
-        if (!$input || !isset($input['folder'])) {
+        // Input
+        $in = json_decode(file_get_contents("php://input"), true);
+        if (!$in || !isset($in['folder'])) {
             http_response_code(400);
             echo json_encode(["error" => "Invalid input."]);
             exit;
         }
 
-        $folder = trim($input['folder']);
-        $expirationMinutes = isset($input['expirationMinutes']) ? intval($input['expirationMinutes']) : 60;
-        $password = isset($input['password']) ? $input['password'] : "";
-        $allowUpload = isset($input['allowUpload']) ? intval($input['allowUpload']) : 0;
+        $folder = trim($in['folder']);
+        $value  = isset($in['expirationValue']) ? intval($in['expirationValue']) : 60;
+        $unit   = $in['expirationUnit'] ?? 'minutes';
+        $password    = $in['password']    ?? '';
+        $allowUpload = intval($in['allowUpload'] ?? 0);
 
-        // Delegate to the model.
-        $result = FolderModel::createShareFolderLink($folder, $expirationMinutes, $password, $allowUpload);
-        echo json_encode($result);
+        // Folder name validation
+        if ($folder !== 'root' && !preg_match(REGEX_FOLDER_NAME, $folder)) {
+            http_response_code(400);
+            echo json_encode(["error" => "Invalid folder name."]);
+            exit;
+        }
+
+        // Convert to seconds
+        switch ($unit) {
+            case 'seconds':
+                $seconds = $value;
+                break;
+            case 'hours':
+                $seconds = $value * 3600;
+                break;
+            case 'days':
+                $seconds = $value * 86400;
+                break;
+            case 'minutes':
+            default:
+                $seconds = $value * 60;
+                break;
+        }
+
+        // Delegate
+        $res = FolderModel::createShareFolderLink($folder, $seconds, $password, $allowUpload);
+        echo json_encode($res);
         exit;
     }
 

src/models/FileModel.php

@@ -736,7 +736,7 @@ public static function saveFile(string $folder, string $fileName, $content, ?str
      * @return array Returns an associative array with keys "token" and "expires" on success,
      *               or "error" on failure.
      */
-    public static function createShareLink($folder, $file, $expirationMinutes = 60, $password = "") {
+    public static function createShareLink($folder, $file, $expirationSeconds = 3600, $password = "") {
         // Validate folder if necessary (this can also be done in the controller).
         if (strtolower($folder) !== 'root' && !preg_match(REGEX_FOLDER_NAME, $folder)) {
             return ["error" => "Invalid folder name."];
@@ -746,7 +746,7 @@ public static function saveFile(string $folder, string $fileName, $content, ?str
         $token = bin2hex(random_bytes(16));
         
         // Calculate expiration (Unix timestamp).
-        $expires = time() + ($expirationMinutes * 60);
+        $expires = time() + $expirationSeconds;
         
         // Hash the password if provided.
         $hashedPassword = !empty($password) ? password_hash($password, PASSWORD_DEFAULT) : "";

src/models/FolderModel.php

@@ -3,7 +3,8 @@
 
 require_once PROJECT_ROOT . '/config/config.php';
 
-class FolderModel {
+class FolderModel
+{
     /**
      * Creates a folder under the specified parent (or in root) and creates an empty metadata file.
      *
@@ -12,10 +13,11 @@ class FolderModel {
      * @return array Returns an array with a "success" key if the folder was created,
      *               or an "error" key if an error occurred.
      */
-    public static function createFolder(string $folderName, string $parent = ""): array {
+    public static function createFolder(string $folderName, string $parent = ""): array
+    {
         $folderName = trim($folderName);
         $parent = trim($parent);
-        
+
         // Validate folder name (only letters, numbers, underscores, dashes, and spaces allowed).
         if (!preg_match(REGEX_FOLDER_NAME, $folderName)) {
             return ["error" => "Invalid folder name."];
@@ -23,7 +25,7 @@ class FolderModel {
         if ($parent !== "" && !preg_match(REGEX_FOLDER_NAME, $parent)) {
             return ["error" => "Invalid parent folder name."];
         }
-        
+
         $baseDir = rtrim(UPLOAD_DIR, '/\\');
         if ($parent !== "" && strtolower($parent) !== "root") {
             $fullPath = $baseDir . DIRECTORY_SEPARATOR . $parent . DIRECTORY_SEPARATOR . $folderName;
@@ -32,12 +34,12 @@ class FolderModel {
             $fullPath = $baseDir . DIRECTORY_SEPARATOR . $folderName;
             $relativePath = $folderName;
         }
-        
+
         // Check if the folder already exists.
         if (file_exists($fullPath)) {
             return ["error" => "Folder already exists."];
         }
-        
+
         // Attempt to create the folder.
         if (mkdir($fullPath, 0755, true)) {
             // Create an empty metadata file for the new folder.
@@ -50,52 +52,54 @@ class FolderModel {
             return ["error" => "Failed to create folder."];
         }
     }
-    
+
     /**
      * Generates the metadata file path for a given folder.
      *
      * @param string $folder The relative folder path.
      * @return string The metadata file path.
      */
-    private static function getMetadataFilePath(string $folder): string {
+    private static function getMetadataFilePath(string $folder): string
+    {
         if (strtolower($folder) === 'root' || trim($folder) === '') {
             return META_DIR . "root_metadata.json";
         }
         return META_DIR . str_replace(['/', '\\', ' '], '-', trim($folder)) . '_metadata.json';
     }
 
-        /**
+    /**
      * Deletes a folder if it is empty and removes its corresponding metadata.
      *
      * @param string $folder The folder name (relative to the upload directory).
      * @return array An associative array with "success" on success or "error" on failure.
      */
-    public static function deleteFolder(string $folder): array {
+    public static function deleteFolder(string $folder): array
+    {
         // Prevent deletion of "root".
         if (strtolower($folder) === 'root') {
             return ["error" => "Cannot delete root folder."];
         }
-        
+
         // Validate folder name.
         if (!preg_match(REGEX_FOLDER_NAME, $folder)) {
             return ["error" => "Invalid folder name."];
         }
-        
+
         // Build the full folder path.
         $baseDir = rtrim(UPLOAD_DIR, '/\\');
         $folderPath = $baseDir . DIRECTORY_SEPARATOR . $folder;
-        
+
         // Check if the folder exists and is a directory.
         if (!file_exists($folderPath) || !is_dir($folderPath)) {
             return ["error" => "Folder does not exist."];
         }
-        
+
         // Prevent deletion if the folder is not empty.
         $items = array_diff(scandir($folderPath), array('.', '..'));
         if (count($items) > 0) {
             return ["error" => "Folder is not empty."];
         }
-        
+
         // Attempt to delete the folder.
         if (rmdir($folderPath)) {
             // Remove corresponding metadata file.
@@ -109,43 +113,45 @@ class FolderModel {
         }
     }
 
-        /**
+    /**
      * Renames a folder and updates related metadata files.
      *
      * @param string $oldFolder The current folder name (relative to UPLOAD_DIR).
      * @param string $newFolder The new folder name.
      * @return array Returns an associative array with "success" on success or "error" on failure.
      */
-    public static function renameFolder(string $oldFolder, string $newFolder): array {
+    public static function renameFolder(string $oldFolder, string $newFolder): array
+    {
         // Sanitize and trim folder names.
         $oldFolder = trim($oldFolder, "/\\ ");
         $newFolder = trim($newFolder, "/\\ ");
-        
+
         // Validate folder names.
         if (!preg_match(REGEX_FOLDER_NAME, $oldFolder) || !preg_match(REGEX_FOLDER_NAME, $newFolder)) {
             return ["error" => "Invalid folder name(s)."];
         }
-        
+
         // Build the full folder paths.
         $baseDir = rtrim(UPLOAD_DIR, '/\\');
         $oldPath = $baseDir . DIRECTORY_SEPARATOR . $oldFolder;
         $newPath = $baseDir . DIRECTORY_SEPARATOR . $newFolder;
-        
+
         // Validate that the old folder exists and new folder does not.
         if ((realpath($oldPath) === false) || (realpath(dirname($newPath)) === false) ||
             strpos(realpath($oldPath), realpath($baseDir)) !== 0 ||
-            strpos(realpath(dirname($newPath)), realpath($baseDir)) !== 0) {
+            strpos(realpath(dirname($newPath)), realpath($baseDir)) !== 0
+        ) {
             return ["error" => "Invalid folder path."];
         }
-        
+
         if (!file_exists($oldPath) || !is_dir($oldPath)) {
             return ["error" => "Folder to rename does not exist."];
         }
-        
+
         if (file_exists($newPath)) {
             return ["error" => "New folder name already exists."];
         }
-        
+
         // Attempt to rename the folder.
         if (rename($oldPath, $newPath)) {
             // Update metadata: Rename all metadata files that have the old folder prefix.
@@ -171,7 +177,8 @@ class FolderModel {
      * @param string $relative The relative path from the base directory.
      * @return array An array of folder paths (relative to the base).
      */
-    private static function getSubfolders(string $dir, string $relative = ''): array {
+    private static function getSubfolders(string $dir, string $relative = ''): array
+    {
         $folders = [];
         $items = scandir($dir);
         $safeFolderNamePattern = REGEX_FOLDER_NAME;
@@ -198,7 +205,8 @@ class FolderModel {
      *
      * @return array An array of folder information arrays.
      */
-    public static function getFolderList(): array {
+    public static function getFolderList(): array
+    {
         $baseDir = rtrim(UPLOAD_DIR, '/\\');
         $folderInfoList = [];
 
@@ -240,13 +248,14 @@ class FolderModel {
         return $folderInfoList;
     }
 
-        /**
+    /**
      * Retrieves the share folder record for a given token.
      *
      * @param string $token The share folder token.
      * @return array|null The share folder record, or null if not found.
      */
-    public static function getShareFolderRecord(string $token): ?array {
+    public static function getShareFolderRecord(string $token): ?array
+    {
         $shareFile = META_DIR . "share_folder_links.json";
         if (!file_exists($shareFile)) {
             return null;
@@ -257,8 +266,8 @@ class FolderModel {
         }
         return $shareLinks[$token];
     }
-    
-   /**
+
+    /**
      * Retrieves shared folder data based on a share token.
      *
      * @param string $token The share folder token.
@@ -274,7 +283,8 @@ class FolderModel {
      *         - 'totalPages': total pages,
      *         or an 'error' key on failure.
      */
-    public static function getSharedFolderData(string $token, ?string $providedPass, int $page = 1, int $itemsPerPage = 10): array {
+    public static function getSharedFolderData(string $token, ?string $providedPass, int $page = 1, int $itemsPerPage = 10): array
+    {
         // Load the share folder record.
         $shareFile = META_DIR . "share_folder_links.json";
         if (!file_exists($shareFile)) {
@@ -314,7 +324,7 @@ class FolderModel {
             return ["error" => "Shared folder not found."];
         }
         // Scan for files (only files).
-        $allFiles = array_values(array_filter(scandir($realFolderPath), function($item) use ($realFolderPath) {
+        $allFiles = array_values(array_filter(scandir($realFolderPath), function ($item) use ($realFolderPath) {
             return is_file($realFolderPath . DIRECTORY_SEPARATOR . $item);
         }));
         sort($allFiles);
@@ -323,7 +333,7 @@ class FolderModel {
         $currentPage = min($page, $totalPages);
         $startIndex = ($currentPage - 1) * $itemsPerPage;
         $filesOnPage = array_slice($allFiles, $startIndex, $itemsPerPage);
-        
+
         return [
             "record" => $record,
             "folder" => $folder,
@@ -334,81 +344,72 @@ class FolderModel {
         ];
     }
 
-        /**
+    /**
      * Creates a share link for a folder.
      *
-     * @param string $folder The folder to share (relative to UPLOAD_DIR).
-     * @param int $expirationMinutes The duration (in minutes) until the link expires.
-     * @param string $password Optional password for the share.
-     * @param int $allowUpload Optional flag (0 or 1) indicating whether uploads are allowed.
-     * @return array An associative array with "token", "expires", and "link" on success, or "error" on failure.
+     * @param string $folder          The folder to share (relative to UPLOAD_DIR).
+     * @param int    $expirationSeconds  How many seconds until expiry.
+     * @param string $password        Optional password.
+     * @param int    $allowUpload     0 or 1 whether uploads are allowed.
+     * @return array ["token","expires","link"] on success, or ["error"].
      */
-    public static function createShareFolderLink(string $folder, int $expirationMinutes = 60, string $password = "", int $allowUpload = 0): array {
-        // Validate folder name.
+    public static function createShareFolderLink(string $folder, int $expirationSeconds = 3600, string $password = "", int $allowUpload = 0): array
+    {
+        // Validate folder
         if (strtolower($folder) !== 'root' && !preg_match(REGEX_FOLDER_NAME, $folder)) {
             return ["error" => "Invalid folder name."];
         }
 
-        // Generate secure token.
+        // Token
         try {
-            $token = bin2hex(random_bytes(16)); // 32 hex characters.
+            $token = bin2hex(random_bytes(16));
         } catch (Exception $e) {
             return ["error" => "Could not generate token."];
         }
 
-        // Calculate expiration time.
-        $expires = time() + ($expirationMinutes * 60);
+        // Expiry
+        $expires = time() + $expirationSeconds;
 
-        // Hash the password if provided.
-        $hashedPassword = !empty($password) ? password_hash($password, PASSWORD_DEFAULT) : "";
+        // Password hash
+        $hashedPassword = $password !== "" ? password_hash($password, PASSWORD_DEFAULT) : "";
 
-        // Define the share folder links file.
+        // Load existing
         $shareFile = META_DIR . "share_folder_links.json";
-        $shareLinks = [];
-        if (file_exists($shareFile)) {
-            $data = file_get_contents($shareFile);
-            $shareLinks = json_decode($data, true);
-            if (!is_array($shareLinks)) {
-                $shareLinks = [];
+        $links = file_exists($shareFile)
+            ? json_decode(file_get_contents($shareFile), true) ?? []
+            : [];
+
+        // Cleanup
+        $now = time();
+        foreach ($links as $k => $v) {
+            if (!empty($v['expires']) && $v['expires'] < $now) {
+                unset($links[$k]);
             }
         }
 
-        // Clean up expired share links.
-        $currentTime = time();
-        foreach ($shareLinks as $key => $link) {
-            if (isset($link["expires"]) && $link["expires"] < $currentTime) {
-                unset($shareLinks[$key]);
-            }
-        }
-
-        // Add new share record.
-        $shareLinks[$token] = [
-            "folder" => $folder,
-            "expires" => $expires,
-            "password" => $hashedPassword,
+        // Add new
+        $links[$token] = [
+            "folder"      => $folder,
+            "expires"     => $expires,
+            "password"    => $hashedPassword,
             "allowUpload" => $allowUpload
         ];
 
-        // Save the updated share links.
-        if (file_put_contents($shareFile, json_encode($shareLinks, JSON_PRETTY_PRINT)) === false) {
+        // Save
+        if (file_put_contents($shareFile, json_encode($links, JSON_PRETTY_PRINT)) === false) {
             return ["error" => "Could not save share link."];
         }
 
-        // Determine the base URL.
-        if (defined('BASE_URL') && !empty(BASE_URL) && strpos(BASE_URL, 'yourwebsite') === false) {
-            $baseUrl = rtrim(BASE_URL, '/');
-        } else {
-            $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https" : "http";
-            $host = !empty($_SERVER['HTTP_HOST']) ? $_SERVER['HTTP_HOST'] : gethostbyname($_SERVER['SERVER_ADDR'] ?? 'localhost');
-            $baseUrl = $protocol . "://" . $host;
-        }
-        // The share URL points to the shared folder page.
-        $link = $baseUrl . "/api/folder/shareFolder.php?token=" . urlencode($token);
-        
+        // Build URL
+        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https" : "http";
+        $host     = $_SERVER['HTTP_HOST'] ?? gethostbyname(gethostname());
+        $baseUrl  = $protocol . '://' . rtrim($host, '/');
+        $link     = $baseUrl . "/api/folder/shareFolder.php?token=" . urlencode($token);
+
         return ["token" => $token, "expires" => $expires, "link" => $link];
     }
 
-        /**
+    /**
      * Retrieves information for a shared file from a shared folder link.
      *
      * @param string $token The share folder token.
@@ -418,7 +419,8 @@ class FolderModel {
      *         - "realFilePath": the absolute path to the file,
      *         - "mimeType": the detected MIME type.
      */
-    public static function getSharedFileInfo(string $token, string $file): array {
+    public static function getSharedFileInfo(string $token, string $file): array
+    {
         // Load the share folder record.
         $shareFile = META_DIR . "share_folder_links.json";
         if (!file_exists($shareFile)) {
@@ -457,14 +459,14 @@ class FolderModel {
             return ["error" => "Invalid file name."];
         }
         $file = basename($file);
-        
+
         // Build the full file path.
         $filePath = $realFolderPath . DIRECTORY_SEPARATOR . $file;
         $realFilePath = realpath($filePath);
         if ($realFilePath === false || strpos($realFilePath, $realFolderPath) !== 0 || !is_file($realFilePath)) {
             return ["error" => "File not found."];
         }
-        
+
         $mimeType = mime_content_type($realFilePath);
         return [
             "realFilePath" => $realFilePath,
@@ -479,11 +481,12 @@ class FolderModel {
      * @param array $fileUpload The $_FILES['fileToUpload'] array.
      * @return array An associative array with "success" on success or "error" on failure.
      */
-    public static function uploadToSharedFolder(string $token, array $fileUpload): array {
+    public static function uploadToSharedFolder(string $token, array $fileUpload): array
+    {
         // Define maximum file size and allowed extensions.
         $maxSize = 50 * 1024 * 1024; // 50 MB
-        $allowedExtensions = ['jpg','jpeg','png','gif','pdf','doc','docx','txt','xls','xlsx','ppt','pptx','mp4','webm','mp3','mkv'];
-        
+        $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'doc', 'docx', 'txt', 'xls', 'xlsx', 'ppt', 'pptx', 'mp4', 'webm', 'mp3', 'mkv'];
+
         // Load the share folder record.
         $shareFile = META_DIR . "share_folder_links.json";
         if (!file_exists($shareFile)) {
@@ -494,55 +497,55 @@ class FolderModel {
             return ["error" => "Invalid share token."];
         }
         $record = $shareLinks[$token];
-        
+
         // Check expiration.
         if (time() > $record['expires']) {
             return ["error" => "This share link has expired."];
         }
-        
+
         // Check whether uploads are allowed.
         if (empty($record['allowUpload']) || $record['allowUpload'] != 1) {
             return ["error" => "File uploads are not allowed for this share."];
         }
-        
+
         // Validate file upload presence.
         if ($fileUpload['error'] !== UPLOAD_ERR_OK) {
             return ["error" => "File upload error. Code: " . $fileUpload['error']];
         }
-        
+
         if ($fileUpload['size'] > $maxSize) {
             return ["error" => "File size exceeds allowed limit."];
         }
-        
+
         $uploadedName = basename($fileUpload['name']);
         $ext = strtolower(pathinfo($uploadedName, PATHINFO_EXTENSION));
         if (!in_array($ext, $allowedExtensions)) {
             return ["error" => "File type not allowed."];
         }
-        
+
         // Determine the target folder from the share record.
         $folderName = trim($record['folder'], "/\\");
         $targetFolder = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR;
         if (!empty($folderName) && strtolower($folderName) !== 'root') {
             $targetFolder .= $folderName;
         }
-        
+
         // Verify target folder exists.
         $realTargetFolder = realpath($targetFolder);
         $uploadDirReal = realpath(UPLOAD_DIR);
         if ($realTargetFolder === false || strpos($realTargetFolder, $uploadDirReal) !== 0 || !is_dir($realTargetFolder)) {
             return ["error" => "Shared folder not found."];
         }
-        
+
         // Generate a new filename (using uniqid and sanitizing the original name).
         $newFilename = uniqid() . "_" . preg_replace('/[^A-Za-z0-9_\-\.]/', '_', $uploadedName);
         $targetPath = $realTargetFolder . DIRECTORY_SEPARATOR . $newFilename;
-        
+
         // Move the uploaded file.
         if (!move_uploaded_file($fileUpload['tmp_name'], $targetPath)) {
             return ["error" => "Failed to move the uploaded file."];
         }
-        
+
         // --- Metadata Update ---
         // Determine metadata file.
         $metadataKey = (empty($folderName) || strtolower($folderName) === "root") ? "root" : $folderName;
@@ -564,7 +567,7 @@ class FolderModel {
             "uploader" => $uploader
         ];
         file_put_contents($metadataFile, json_encode($metadataCollection, JSON_PRETTY_PRINT));
-        
+
         return ["success" => "File uploaded successfully.", "newFilename" => $newFilename];
     }
-}
+}