share new password page, totp setup focus, logout clear session cookie

.htaccess

@@ -0,0 +1,75 @@
+# -----------------------------
+# 1) Prevent directory listings
+# -----------------------------
+Options -Indexes
+
+# -----------------------------
+# Default index files
+# -----------------------------
+DirectoryIndex index.html
+
+# -----------------------------
+# Deny access to hidden files
+# -----------------------------
+<FilesMatch "^\.">
+  Require all denied
+</FilesMatch>
+
+# -----------------------------
+# Enforce HTTPS (optional)
+# -----------------------------
+RewriteEngine On
+#RewriteCond %{HTTPS} off
+#RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+
+<IfModule mod_headers.c>
+    # Allow requests from a specific origin
+    #Header set Access-Control-Allow-Origin "https://demo.filerise.net"
+    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
+    Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With, X-CSRF-Token"
+    Header set Access-Control-Allow-Credentials "true"
+</IfModule>
+
+<IfModule mod_headers.c>
+  # Prevent clickjacking
+  Header always set X-Frame-Options "SAMEORIGIN"
+  # Block XSS
+  Header always set X-XSS-Protection "1; mode=block"
+  # No MIME sniffing
+  Header always set X-Content-Type-Options "nosniff"
+</IfModule>
+
+<IfModule mod_headers.c>
+  # HTML: always revalidate
+  <FilesMatch "\.(html|htm)$">
+    Header set Cache-Control "no-cache, no-store, must-revalidate"
+    Header set Pragma "no-cache"
+    Header set Expires "0"
+  </FilesMatch>
+  # JS/CSS: short‑term cache, revalidate regularly
+  <FilesMatch "\.(js|css)$">
+    Header set Cache-Control "public, max-age=3600, must-revalidate"
+  </FilesMatch>
+</IfModule>
+
+# -----------------------------
+# Additional Security Headers
+# -----------------------------
+<IfModule mod_headers.c>
+    # Enforce HTTPS for a year with subdomains and preload option.
+    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
+    # Set a Referrer Policy.
+    Header always set Referrer-Policy "strict-origin-when-cross-origin"
+    # Permissions Policy: disable features you don't need.
+    Header always set Permissions-Policy "geolocation=(), microphone=(), camera=()"
+    # IE-specific header to prevent downloads from opening in IE.
+    Header always set X-Download-Options "noopen"
+    # Expect-CT header for Certificate Transparency (optional).
+    Header always set Expect-CT "max-age=86400, enforce"
+</IfModule>
+
+# -----------------------------
+# Disable TRACE method
+# -----------------------------
+RewriteCond %{REQUEST_METHOD} ^TRACE
+RewriteRule .* - [F]

README.md

@@ -1,11 +1,16 @@
 # FileRise - Elevate your File Management
 
-**Video demo:**
+**Demo link:** https://demo.filerise.net   
+**UserName:** demo   
+**Password:** demo   
+Read only permissions but can view the interface.   
 
-https://github.com/user-attachments/assets/9546a76b-afb0-4068-875a-0eab478b514d
+**4/3/2025 Video demo:**
+
+https://github.com/user-attachments/assets/221f6a53-85f5-48d4-9abe-89445e0af90e
 
 **Dark mode:**
-![Dark Mode](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-mode.png)
+![Dark Header](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-header.png)
 
 changelogs available here: <https://github.com/error311/FileRise-docker/>
 
@@ -147,6 +152,10 @@ FileRise is a lightweight, secure, self-hosted web application for uploading, sy
   - **Top Bar Drop Zone:**  
     - A top drop zone is available for reordering or managing cards quickly.
     - Dragging a card to the top drop zone provides immediate visual feedback, ensuring a fluid and customizable workflow.
+  - **Header Drop Zone with State Preservation:**
+    - Cards can be dragged into the header drop zone, where they are represented by a compact material icon.
+    - **State Preservation:** Instead of removing the card from the DOM, the original card is moved into a hidden container. This ensures that dynamic features (such as the folder tree in the Folder Management card or file selection in the Upload card) remain fully initialized and retain their state on page refresh.
+    - **Modal Display:** When the user interacts (via hover or click) with the header icon, the card is temporarily moved into a modal overlay for full interaction. When the modal is closed, the card is returned to the hidden container, keeping its state persistent.
   - **Seamless Interaction:**  
     - Both drop zones support smooth drag-and-drop interactions with animations and pointer event adjustments, ensuring reliable card placement regardless of screen position.
 
@@ -170,23 +179,23 @@ FileRise is a lightweight, secure, self-hosted web application for uploading, sy
   - Features an intuitive interface with Material Icons for quick recognition and access.
   - Allows administrators to manage authentication settings, user management, and login methods in real time.
   - Includes real-time validation that prevents the accidental disabling of all authentication methods simultaneously.
-  - User Permissions options
-    - Folder Only gives user their own root folder
-    - Read Only makes it so user can only read the files
-    - Disable upload 
+  - **User Permissions Options:**
+    - *Folder Only* gives user their own root folder.
+    - *Read Only* makes it so the user can only read the files.
+    - *Disable Upload* prevents file uploads.
 
 ---
 
 ## Screenshots
 
-**Light mode:**
-![Dark Admin Panel](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-admin-panel.png)
+**Admin Panel:**
+![Light Admin Panel](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-admin-panel.png)
 
 **Light mode:**
-![Light Mode](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-mode.png)
+![Dark SideBar](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-sidebar.png)
 
-**Dark mode default:**
-![Default Layout](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-mode-default.png)
+**Light mode default:**
+![Default Layout](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-topbar.png)
 
 **Dark editor:**
 ![dark-editor](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-editor.png)
@@ -197,8 +206,8 @@ FileRise is a lightweight, secure, self-hosted web application for uploading, sy
 **Restore or Delete Trash:**
 ![restore-delete](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-trash.png)
 
-**Dark Login page:**
-![Login](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-login.png)
+**Dark TOTP Setup:**
+![Login](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-totp-setup.png)
 
 **Gallery view:**
 ![Login](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-gallery.png)

auth.php

@@ -1,16 +1,25 @@
 <?php
 require_once 'vendor/autoload.php';
 require_once 'config.php';
+
+// Only send the Content-Type header; CORS and related headers are handled via .htaccess.
 header('Content-Type: application/json');
 
+// Global exception handler: logs errors and returns a generic error message.
+set_exception_handler(function ($e) {
+    error_log("Unhandled exception: " . $e->getMessage());
+    http_response_code(500);
+    echo json_encode(["error" => "Internal Server Error"]);
+    exit();
+});
+
 /**
  * Helper: Get the user's role from users.txt.
  */
 function getUserRole($username) {
     $usersFile = USERS_DIR . USERS_FILE;
     if (file_exists($usersFile)) {
-        $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
-        foreach ($lines as $line) {
+        foreach (file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) {
             $parts = explode(":", trim($line));
             if (count($parts) >= 3 && $parts[0] === $username) {
                 return trim($parts[2]);
@@ -21,37 +30,25 @@ function getUserRole($username) {
 }
 
 /* --- OIDC Authentication Flow --- */
-if (isset($_GET['oidc'])) {
-    // Read and decrypt OIDC configuration from JSON file.
+// Detect either ?oidc=… or a callback that only has ?code=
+$oidcAction = $_GET['oidc'] ?? null;
+if (!$oidcAction && isset($_GET['code'])) {
+    $oidcAction = 'callback';
+}
+if ($oidcAction) {
     $adminConfigFile = USERS_DIR . 'adminConfig.json';
     if (file_exists($adminConfigFile)) {
-        $encryptedContent = file_get_contents($adminConfigFile);
-        $decryptedContent = decryptData($encryptedContent, $encryptionKey);
-        if ($decryptedContent === false) {
-            // Log internal error and return a generic message.
-            error_log("Failed to decrypt admin configuration.");
-            echo json_encode(['error' => 'Internal error.']);
-            exit;
-        }
-        $adminConfig = json_decode($decryptedContent, true);
-        if (isset($adminConfig['oidc'])) {
-            $oidcConfig = $adminConfig['oidc'];
-            $oidc_provider_url = !empty($oidcConfig['providerUrl']) ? $oidcConfig['providerUrl'] : 'https://your-oidc-provider.com';
-            $oidc_client_id    = !empty($oidcConfig['clientId']) ? $oidcConfig['clientId'] : 'YOUR_CLIENT_ID';
-            $oidc_client_secret = !empty($oidcConfig['clientSecret']) ? $oidcConfig['clientSecret'] : 'YOUR_CLIENT_SECRET';
-            $oidc_redirect_uri  = !empty($oidcConfig['redirectUri']) ? $oidcConfig['redirectUri'] : 'https://yourdomain.com/auth.php?oidc=callback';
-        } else {
-            $oidc_provider_url = 'https://your-oidc-provider.com';
-            $oidc_client_id    = 'YOUR_CLIENT_ID';
-            $oidc_client_secret = 'YOUR_CLIENT_SECRET';
-            $oidc_redirect_uri  = 'https://yourdomain.com/auth.php?oidc=callback';
-        }
+        $enc = file_get_contents($adminConfigFile);
+        $dec = decryptData($enc, $encryptionKey);
+        $cfg = $dec !== false ? json_decode($dec, true) : [];
     } else {
-        $oidc_provider_url = 'https://your-oidc-provider.com';
-        $oidc_client_id    = 'YOUR_CLIENT_ID';
-        $oidc_client_secret = 'YOUR_CLIENT_SECRET';
-        $oidc_redirect_uri  = 'https://yourdomain.com/auth.php?oidc=callback';
+        $cfg = [];
     }
+    $oidc_provider_url  = $cfg['oidc']['providerUrl']  ?? 'https://your-oidc-provider.com';
+    $oidc_client_id     = $cfg['oidc']['clientId']     ?? 'YOUR_CLIENT_ID';
+    $oidc_client_secret = $cfg['oidc']['clientSecret'] ?? 'YOUR_CLIENT_SECRET';
+    // Use your production domain for redirect URI.
+    $oidc_redirect_uri  = $cfg['oidc']['redirectUri']  ?? 'https://yourdomain.com/auth.php?oidc=callback';
 
     $oidc = new Jumbojett\OpenIDConnectClient(
         $oidc_provider_url,
@@ -60,31 +57,54 @@ if (isset($_GET['oidc'])) {
     );
     $oidc->setRedirectURL($oidc_redirect_uri);
 
-    if ($_GET['oidc'] === 'callback') {
+    if ($oidcAction === 'callback') {
         try {
             $oidc->authenticate();
             $username = $oidc->requestUserInfo('preferred_username');
+
+            // Check if this user has a TOTP secret.
+            $usersFile = USERS_DIR . USERS_FILE;
+            $totp_secret = null;
+            if (file_exists($usersFile)) {
+                foreach (file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) {
+                    $parts = explode(":", trim($line));
+                    if (count($parts) >= 4 && $parts[0] === $username && !empty($parts[3])) {
+                        $totp_secret = decryptData($parts[3], $encryptionKey);
+                        break;
+                    }
+                }
+            }
+            if ($totp_secret) {
+                // Hold pending login & prompt for TOTP.
+                $_SESSION['pending_login_user']   = $username;
+                $_SESSION['pending_login_secret'] = $totp_secret;
+                header("Location: index.html?totp_required=1");
+                exit();
+            }
+
+            // No TOTP → finalize login.
             session_regenerate_id(true);
             $_SESSION["authenticated"] = true;
-            $_SESSION["username"] = $username;
-            // Determine the user role from users.txt.
-            $userRole = getUserRole($username);
-            $_SESSION["isAdmin"] = ($userRole === "1");
-            // *** Use loadUserPermissions() here instead of loadFolderPermission() ***
-            $_SESSION["folderOnly"] = loadUserPermissions($username);
+            $_SESSION["username"]      = $username;
+            $_SESSION["isAdmin"]       = (getUserRole($username) === "1");
+            $_SESSION["folderOnly"]    = loadUserPermissions($username);
+
             header("Location: index.html");
             exit();
         } catch (Exception $e) {
             error_log("OIDC authentication error: " . $e->getMessage());
+            http_response_code(401);
             echo json_encode(["error" => "Authentication failed."]);
             exit();
         }
     } else {
+        // Initiate OIDC authentication.
         try {
             $oidc->authenticate();
             exit();
         } catch (Exception $e) {
             error_log("OIDC initiation error: " . $e->getMessage());
+            http_response_code(401);
             echo json_encode(["error" => "Authentication initiation failed."]);
             exit();
         }
@@ -92,10 +112,9 @@ if (isset($_GET['oidc'])) {
 }
 
 /* --- Fallback: Form-based Authentication --- */
-// (Form-based branch code remains unchanged. It calls loadUserPermissions() in its basic auth branch.)
 $usersFile = USERS_DIR . USERS_FILE;
 $maxAttempts = 5;
-$lockoutTime = 30 * 60;
+$lockoutTime = 30 * 60; // 30 minutes
 $attemptsFile = USERS_DIR . 'failed_logins.json';
 $failedLogFile = USERS_DIR . 'failed_login.log';
 $persistentTokensFile = USERS_DIR . 'persistent_tokens.json';
@@ -111,7 +130,7 @@ function loadFailedAttempts($file) {
 }
 
 function saveFailedAttempts($file, $data) {
-    file_put_contents($file, json_encode($data, JSON_PRETTY_PRINT));
+    file_put_contents($file, json_encode($data, JSON_PRETTY_PRINT), LOCK_EX);
 }
 
 $ip = $_SERVER['REMOTE_ADDR'];
@@ -121,6 +140,7 @@ $failedAttempts = loadFailedAttempts($attemptsFile);
 if (isset($failedAttempts[$ip])) {
     $attemptData = $failedAttempts[$ip];
     if ($attemptData['count'] >= $maxAttempts && ($currentTime - $attemptData['last_attempt']) < $lockoutTime) {
+        http_response_code(429);
         echo json_encode(["error" => "Too many failed login attempts. Please try again later."]);
         exit();
     }
@@ -137,11 +157,9 @@ function authenticate($username, $password) {
         if (count($parts) < 3) continue;
         if ($username === $parts[0] && password_verify($password, $parts[1])) {
             $result = ['role' => $parts[2]];
-            if (isset($parts[3]) && !empty($parts[3])) {
-                $result['totp_secret'] = decryptData($parts[3], $encryptionKey);
-            } else {
-                $result['totp_secret'] = null;
-            }
+            $result['totp_secret'] = (isset($parts[3]) && !empty($parts[3]))
+                ? decryptData($parts[3], $encryptionKey)
+                : null;
             return $result;
         }
     }
@@ -154,11 +172,13 @@ $password = trim($data["password"] ?? "");
 $rememberMe = isset($data["remember_me"]) && $data["remember_me"] === true;
 
 if (!$username || !$password) {
+    http_response_code(400);
     echo json_encode(["error" => "Username and password are required"]);
     exit();
 }
 
 if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $username)) {
+    http_response_code(400);
     echo json_encode(["error" => "Invalid username format. Only letters, numbers, underscores, dashes, and spaces are allowed."]);
     exit();
 }
@@ -166,7 +186,8 @@ if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $username)) {
 $user = authenticate($username, $password);
 if ($user !== false) {
     if (!empty($user['totp_secret'])) {
-        if (empty($data['totp_code'])) {
+        // If TOTP code is missing or malformed, indicate that TOTP is required.
+        if (empty($data['totp_code']) || !preg_match('/^\d{6}$/', $data['totp_code'])) {
             echo json_encode([
               "totp_required" => true,
               "message" => "TOTP code required"
@@ -210,10 +231,13 @@ if ($user !== false) {
         ];
         $encryptedContent = encryptData(json_encode($persistentTokens, JSON_PRETTY_PRINT), $encryptionKey);
         file_put_contents($persistentTokensFile, $encryptedContent, LOCK_EX);
+        // Define $secure based on whether HTTPS is enabled
+        $secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
         setcookie('remember_me_token', $token, $expiry, '/', '', $secure, true);
     }
     
     echo json_encode([
+      "status" => "ok",
       "success"   => "Login successful", 
       "isAdmin"   => $_SESSION["isAdmin"],
       "folderOnly"=> $_SESSION["folderOnly"],
@@ -229,6 +253,7 @@ if ($user !== false) {
     saveFailedAttempts($attemptsFile, $failedAttempts);
     $logLine = date('Y-m-d H:i:s') . " - Failed login attempt for username: " . $username . " from IP: " . $ip . PHP_EOL;
     file_put_contents($failedLogFile, $logLine, FILE_APPEND);
+    http_response_code(401);
     echo json_encode(["error" => "Invalid credentials"]);
 }
 ?>

composer.json

@@ -0,0 +1,11 @@
+{
+    "name": "error311/filerise",
+    "description": "FileRise – A lightweight self-hosted file manager",
+    "type": "project",
+    "require": {
+      "jumbojett/openid-connect-php": "^1.0.0",
+      "phpseclib/phpseclib": "~3.0.7",
+      "robthree/twofactorauth": "^1.7",
+      "endroid/qr-code": "^4.0"
+    }
+  }

composer.lock

@@ -0,0 +1,537 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "c9857f23364f2280ef4b71cdc72d3f78",
+    "packages": [
+        {
+            "name": "bacon/bacon-qr-code",
+            "version": "2.0.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Bacon/BaconQrCode.git",
+                "reference": "8674e51bb65af933a5ffaf1c308a660387c35c22"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Bacon/BaconQrCode/zipball/8674e51bb65af933a5ffaf1c308a660387c35c22",
+                "reference": "8674e51bb65af933a5ffaf1c308a660387c35c22",
+                "shasum": ""
+            },
+            "require": {
+                "dasprid/enum": "^1.0.3",
+                "ext-iconv": "*",
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "phly/keep-a-changelog": "^2.1",
+                "phpunit/phpunit": "^7 | ^8 | ^9",
+                "spatie/phpunit-snapshot-assertions": "^4.2.9",
+                "squizlabs/php_codesniffer": "^3.4"
+            },
+            "suggest": {
+                "ext-imagick": "to generate QR code images"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "BaconQrCode\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-2-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Ben Scholzen 'DASPRiD'",
+                    "email": "mail@dasprids.de",
+                    "homepage": "https://dasprids.de/",
+                    "role": "Developer"
+                }
+            ],
+            "description": "BaconQrCode is a QR code generator for PHP.",
+            "homepage": "https://github.com/Bacon/BaconQrCode",
+            "support": {
+                "issues": "https://github.com/Bacon/BaconQrCode/issues",
+                "source": "https://github.com/Bacon/BaconQrCode/tree/2.0.8"
+            },
+            "time": "2022-12-07T17:46:57+00:00"
+        },
+        {
+            "name": "dasprid/enum",
+            "version": "1.0.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/DASPRiD/Enum.git",
+                "reference": "8dfd07c6d2cf31c8da90c53b83c026c7696dda90"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/DASPRiD/Enum/zipball/8dfd07c6d2cf31c8da90c53b83c026c7696dda90",
+                "reference": "8dfd07c6d2cf31c8da90c53b83c026c7696dda90",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1 <9.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7 || ^8 || ^9 || ^10 || ^11",
+                "squizlabs/php_codesniffer": "*"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "DASPRiD\\Enum\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-2-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Ben Scholzen 'DASPRiD'",
+                    "email": "mail@dasprids.de",
+                    "homepage": "https://dasprids.de/",
+                    "role": "Developer"
+                }
+            ],
+            "description": "PHP 7.1 enum implementation",
+            "keywords": [
+                "enum",
+                "map"
+            ],
+            "support": {
+                "issues": "https://github.com/DASPRiD/Enum/issues",
+                "source": "https://github.com/DASPRiD/Enum/tree/1.0.6"
+            },
+            "time": "2024-08-09T14:30:48+00:00"
+        },
+        {
+            "name": "endroid/qr-code",
+            "version": "4.8.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/endroid/qr-code.git",
+                "reference": "0db25b506a8411a5e1644ebaa67123a6eb7b6a77"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/endroid/qr-code/zipball/0db25b506a8411a5e1644ebaa67123a6eb7b6a77",
+                "reference": "0db25b506a8411a5e1644ebaa67123a6eb7b6a77",
+                "shasum": ""
+            },
+            "require": {
+                "bacon/bacon-qr-code": "^2.0.5",
+                "php": "^8.1"
+            },
+            "conflict": {
+                "khanamiryan/qrcode-detector-decoder": "^1.0.6"
+            },
+            "require-dev": {
+                "endroid/quality": "dev-master",
+                "ext-gd": "*",
+                "khanamiryan/qrcode-detector-decoder": "^1.0.4||^2.0.2",
+                "setasign/fpdf": "^1.8.2"
+            },
+            "suggest": {
+                "ext-gd": "Enables you to write PNG images",
+                "khanamiryan/qrcode-detector-decoder": "Enables you to use the image validator",
+                "roave/security-advisories": "Makes sure package versions with known security issues are not installed",
+                "setasign/fpdf": "Enables you to use the PDF writer"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "4.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Endroid\\QrCode\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jeroen van den Enden",
+                    "email": "info@endroid.nl"
+                }
+            ],
+            "description": "Endroid QR Code",
+            "homepage": "https://github.com/endroid/qr-code",
+            "keywords": [
+                "code",
+                "endroid",
+                "php",
+                "qr",
+                "qrcode"
+            ],
+            "support": {
+                "issues": "https://github.com/endroid/qr-code/issues",
+                "source": "https://github.com/endroid/qr-code/tree/4.8.5"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/endroid",
+                    "type": "github"
+                }
+            ],
+            "time": "2023-09-29T14:03:20+00:00"
+        },
+        {
+            "name": "jumbojett/openid-connect-php",
+            "version": "v1.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/jumbojett/OpenID-Connect-PHP.git",
+                "reference": "f327e7eb0626d55ddb6abc7b7c9e6ad3af4e5d51"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/jumbojett/OpenID-Connect-PHP/zipball/f327e7eb0626d55ddb6abc7b7c9e6ad3af4e5d51",
+                "reference": "f327e7eb0626d55ddb6abc7b7c9e6ad3af4e5d51",
+                "shasum": ""
+            },
+            "require": {
+                "ext-curl": "*",
+                "ext-json": "*",
+                "php": ">=7.0",
+                "phpseclib/phpseclib": "^3.0.7"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "<10",
+                "roave/security-advisories": "dev-latest",
+                "yoast/phpunit-polyfills": "^2.0"
+            },
+            "type": "library",
+            "autoload": {
+                "classmap": [
+                    "src/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "Apache-2.0"
+            ],
+            "description": "Bare-bones OpenID Connect client",
+            "support": {
+                "issues": "https://github.com/jumbojett/OpenID-Connect-PHP/issues",
+                "source": "https://github.com/jumbojett/OpenID-Connect-PHP/tree/v1.0.2"
+            },
+            "time": "2024-09-13T07:08:11+00:00"
+        },
+        {
+            "name": "paragonie/constant_time_encoding",
+            "version": "v3.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/paragonie/constant_time_encoding.git",
+                "reference": "df1e7fde177501eee2037dd159cf04f5f301a512"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/paragonie/constant_time_encoding/zipball/df1e7fde177501eee2037dd159cf04f5f301a512",
+                "reference": "df1e7fde177501eee2037dd159cf04f5f301a512",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^9",
+                "vimeo/psalm": "^4|^5"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "ParagonIE\\ConstantTime\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Paragon Initiative Enterprises",
+                    "email": "security@paragonie.com",
+                    "homepage": "https://paragonie.com",
+                    "role": "Maintainer"
+                },
+                {
+                    "name": "Steve 'Sc00bz' Thomas",
+                    "email": "steve@tobtu.com",
+                    "homepage": "https://www.tobtu.com",
+                    "role": "Original Developer"
+                }
+            ],
+            "description": "Constant-time Implementations of RFC 4648 Encoding (Base-64, Base-32, Base-16)",
+            "keywords": [
+                "base16",
+                "base32",
+                "base32_decode",
+                "base32_encode",
+                "base64",
+                "base64_decode",
+                "base64_encode",
+                "bin2hex",
+                "encoding",
+                "hex",
+                "hex2bin",
+                "rfc4648"
+            ],
+            "support": {
+                "email": "info@paragonie.com",
+                "issues": "https://github.com/paragonie/constant_time_encoding/issues",
+                "source": "https://github.com/paragonie/constant_time_encoding"
+            },
+            "time": "2024-05-08T12:36:18+00:00"
+        },
+        {
+            "name": "paragonie/random_compat",
+            "version": "v9.99.100",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/paragonie/random_compat.git",
+                "reference": "996434e5492cb4c3edcb9168db6fbb1359ef965a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/paragonie/random_compat/zipball/996434e5492cb4c3edcb9168db6fbb1359ef965a",
+                "reference": "996434e5492cb4c3edcb9168db6fbb1359ef965a",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">= 7"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "4.*|5.*",
+                "vimeo/psalm": "^1"
+            },
+            "suggest": {
+                "ext-libsodium": "Provides a modern crypto API that can be used to generate random bytes."
+            },
+            "type": "library",
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Paragon Initiative Enterprises",
+                    "email": "security@paragonie.com",
+                    "homepage": "https://paragonie.com"
+                }
+            ],
+            "description": "PHP 5.x polyfill for random_bytes() and random_int() from PHP 7",
+            "keywords": [
+                "csprng",
+                "polyfill",
+                "pseudorandom",
+                "random"
+            ],
+            "support": {
+                "email": "info@paragonie.com",
+                "issues": "https://github.com/paragonie/random_compat/issues",
+                "source": "https://github.com/paragonie/random_compat"
+            },
+            "time": "2020-10-15T08:29:30+00:00"
+        },
+        {
+            "name": "phpseclib/phpseclib",
+            "version": "3.0.43",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/phpseclib/phpseclib.git",
+                "reference": "709ec107af3cb2f385b9617be72af8cf62441d02"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/phpseclib/phpseclib/zipball/709ec107af3cb2f385b9617be72af8cf62441d02",
+                "reference": "709ec107af3cb2f385b9617be72af8cf62441d02",
+                "shasum": ""
+            },
+            "require": {
+                "paragonie/constant_time_encoding": "^1|^2|^3",
+                "paragonie/random_compat": "^1.4|^2.0|^9.99.99",
+                "php": ">=5.6.1"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "*"
+            },
+            "suggest": {
+                "ext-dom": "Install the DOM extension to load XML formatted public keys.",
+                "ext-gmp": "Install the GMP (GNU Multiple Precision) extension in order to speed up arbitrary precision integer arithmetic operations.",
+                "ext-libsodium": "SSH2/SFTP can make use of some algorithms provided by the libsodium-php extension.",
+                "ext-mcrypt": "Install the Mcrypt extension in order to speed up a few other cryptographic operations.",
+                "ext-openssl": "Install the OpenSSL extension in order to speed up a wide variety of cryptographic operations."
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "phpseclib/bootstrap.php"
+                ],
+                "psr-4": {
+                    "phpseclib3\\": "phpseclib/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jim Wigginton",
+                    "email": "terrafrost@php.net",
+                    "role": "Lead Developer"
+                },
+                {
+                    "name": "Patrick Monnerat",
+                    "email": "pm@datasphere.ch",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Andreas Fischer",
+                    "email": "bantu@phpbb.com",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Hans-Jürgen Petrich",
+                    "email": "petrich@tronic-media.com",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Graham Campbell",
+                    "email": "graham@alt-three.com",
+                    "role": "Developer"
+                }
+            ],
+            "description": "PHP Secure Communications Library - Pure-PHP implementations of RSA, AES, SSH2, SFTP, X.509 etc.",
+            "homepage": "http://phpseclib.sourceforge.net",
+            "keywords": [
+                "BigInteger",
+                "aes",
+                "asn.1",
+                "asn1",
+                "blowfish",
+                "crypto",
+                "cryptography",
+                "encryption",
+                "rsa",
+                "security",
+                "sftp",
+                "signature",
+                "signing",
+                "ssh",
+                "twofish",
+                "x.509",
+                "x509"
+            ],
+            "support": {
+                "issues": "https://github.com/phpseclib/phpseclib/issues",
+                "source": "https://github.com/phpseclib/phpseclib/tree/3.0.43"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/terrafrost",
+                    "type": "github"
+                },
+                {
+                    "url": "https://www.patreon.com/phpseclib",
+                    "type": "patreon"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/phpseclib/phpseclib",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-12-14T21:12:59+00:00"
+        },
+        {
+            "name": "robthree/twofactorauth",
+            "version": "1.8.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/RobThree/TwoFactorAuth.git",
+                "reference": "65681de5a324eae05140ac58b08648a60212afc0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/RobThree/TwoFactorAuth/zipball/65681de5a324eae05140ac58b08648a60212afc0",
+                "reference": "65681de5a324eae05140ac58b08648a60212afc0",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.6.0"
+            },
+            "require-dev": {
+                "php-parallel-lint/php-parallel-lint": "^1.2",
+                "phpunit/phpunit": "@stable"
+            },
+            "suggest": {
+                "bacon/bacon-qr-code": "Needed for BaconQrCodeProvider provider",
+                "endroid/qr-code": "Needed for EndroidQrCodeProvider"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "RobThree\\Auth\\": "lib"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Rob Janssen",
+                    "homepage": "http://robiii.me",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Two Factor Authentication",
+            "homepage": "https://github.com/RobThree/TwoFactorAuth",
+            "keywords": [
+                "Authentication",
+                "MFA",
+                "Multi Factor Authentication",
+                "Two Factor Authentication",
+                "authenticator",
+                "authy",
+                "php",
+                "tfa"
+            ],
+            "support": {
+                "issues": "https://github.com/RobThree/TwoFactorAuth/issues",
+                "source": "https://github.com/RobThree/TwoFactorAuth"
+            },
+            "funding": [
+                {
+                    "url": "https://paypal.me/robiii",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/RobThree",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-03-22T16:11:07+00:00"
+        }
+    ],
+    "packages-dev": [],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": {},
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": {},
+    "platform-dev": {},
+    "plugin-api-version": "2.6.0"
+}

config.php

@@ -55,7 +55,7 @@ if (!$encryptionKey) {
 
 function loadUserPermissions($username)
 {
-    global $encryptionKey;  // Ensure $encryptionKey is available
+    global $encryptionKey;
     $permissionsFile = USERS_DIR . 'userPermissions.json';
 
     if (file_exists($permissionsFile)) {
@@ -69,21 +69,12 @@ function loadUserPermissions($username)
             $permissions = json_decode($content, true);
         }
 
-        if (!is_array($permissions)) {
-        } else {
-        }
-
         if (is_array($permissions) && array_key_exists($username, $permissions)) {
             $result = $permissions[$username];
-            if (empty($result)) {
-                return false;
-            }
-            return $result;
-        } else {
+            return !empty($result) ? $result : false;
         }
-    } else {
-        error_log("loadUserPermissions: Permissions file not found: $permissionsFile");
     }
+    // Removed error_log() to prevent flooding logs when file is not found.
     return false; // Return false if no permissions found.
 }
 
@@ -132,7 +123,7 @@ if (!isset($_SESSION["authenticated"]) && isset($_COOKIE['remember_me_token']))
             $_SESSION["authenticated"] = true;
             $_SESSION["username"] = $tokenData["username"];
             // IMPORTANT: Set the folderOnly flag here for auto-login.
-            $_SESSION["folderOnly"] = loadFolderPermission($tokenData["username"]);
+            $_SESSION["folderOnly"] = loadUserPermissions($tokenData["username"]);
         } else {
             unset($persistentTokens[$_COOKIE['remember_me_token']]);
             $newEncryptedContent = encryptData(json_encode($persistentTokens, JSON_PRETTY_PRINT), $encryptionKey);

copyFiles.php

@@ -18,9 +18,8 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     exit;
 }
 
-$userPermissions = loadUserPermissions($username);
-// Check if the user is read-only. (Assuming that if readOnly is true, deletion is disallowed.)
 $username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
 if ($username) {
     $userPermissions = loadUserPermissions($username);
     if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {

createFolder.php

@@ -23,9 +23,9 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     http_response_code(403);
     exit;
 }
-$userPermissions = loadUserPermissions($username);
-// Check if the user is read-only. (Assuming that if readOnly is true, deletion is disallowed.)
+
 $username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
 if ($username) {
     $userPermissions = loadUserPermissions($username);
     if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {

css/styles.css

@@ -1068,7 +1068,7 @@ body.dark-mode .custom-prev-next-btn:hover:not(:disabled) {
 }
 
 #customToast.show {
-  opacity: 0.7;
+  opacity: 0.9;
 }
 
 .button-wrap {
@@ -2023,20 +2023,17 @@ body.dark-mode .card {
   z-index: 6000 !important;  
 }
 
-/* Default (light mode) for admin panel content */
 .admin-panel-content {
   background: #fff;
   color: #000;
 }
 
-/* Dark mode overrides for admin panel content */
 body.dark-mode .admin-panel-content {
-  background: #2c2c2c;  /* dark background */
-  color: #e0e0e0;       /* light text */
+  background: #2c2c2c;
+  color: #e0e0e0;
   border: 1px solid #444;
 }
 
-/* Optionally, adjust input, label, etc. for dark mode */
 body.dark-mode .admin-panel-content input,
 body.dark-mode .admin-panel-content select,
 body.dark-mode .admin-panel-content textarea {
@@ -2066,4 +2063,60 @@ body.dark-mode .admin-panel-content label {
 }
 .spinning {
   animation: spin 1s linear infinite;
+}
+
+.rise-effect {
+  transform: translateY(-20px);
+  transition: transform 0.3s ease;
+}
+
+.toggle-modal-btn,
+.collapse-btn {
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 8px;
+  font-size: 24px;
+  color: #616161;
+  border-radius: 50%;
+  transition: background 0.3s ease;
+}
+
+.toggle-modal-btn:hover,
+.collapse-btn:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.toggle-modal-btn:focus,
+.collapse-btn:focus {
+  outline: none;
+}
+
+.header-drop-zone {
+  width: 66px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  display: inline-flex;
+}
+
+.header-drop-zone.drag-active {
+  border: 2px dashed #1565C0;
+  background-color: #eef;
+  background-color: transparent;
+  transition: width 0.3s ease;
+  box-sizing: border-box;
+}
+body.dark-mode .header-drop-zone.drag-active { 
+  background-color: #333; 
+  border: 2px dashed #555; 
+  color: #fff;
+}
+
+.header-drop-zone.drag-active:empty::before {
+  content: "Drop";
+  font-size: 10px;
+  color: #aaa;
 }

deleteFolder.php

@@ -23,9 +23,9 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     http_response_code(403);
     exit;
 }
-$userPermissions = loadUserPermissions($username);
-// Check if the user is read-only. (Assuming that if readOnly is true, deletion is disallowed.)
+
 $username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
 if ($username) {
     $userPermissions = loadUserPermissions($username);
     if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {

download.php

@@ -1,8 +1,6 @@
 <?php
 require_once 'config.php';
 
-// For GET requests (which download.php will use), we assume session authentication is enough.
-
 // Check if the user is authenticated.
 if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
@@ -22,38 +20,70 @@ if (!preg_match('/^[A-Za-z0-9_\-\.\(\) ]+$/', $file)) {
     exit;
 }
 
-// Determine the directory.
-if ($folder !== 'root') {
-    $directory = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
-} else {
-    $directory = UPLOAD_DIR;
+// Get the realpath of the upload directory.
+$uploadDirReal = realpath(UPLOAD_DIR);
+if ($uploadDirReal === false) {
+    http_response_code(500);
+    echo json_encode(["error" => "Server misconfiguration."]);
+    exit;
 }
 
-$filePath = $directory . $file;
+// Determine the directory.
+if ($folder === 'root') {
+    $directory = $uploadDirReal;
+} else {
+    // Prevent path traversal in folder parameter.
+    if (strpos($folder, '..') !== false) {
+        http_response_code(400);
+        echo json_encode(["error" => "Invalid folder name."]);
+        exit;
+    }
+    
+    $directoryPath = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder;
+    $directory = realpath($directoryPath);
+    
+    // Ensure that the resolved directory exists and is within the allowed UPLOAD_DIR.
+    if ($directory === false || strpos($directory, $uploadDirReal) !== 0) {
+        http_response_code(400);
+        echo json_encode(["error" => "Invalid folder path."]);
+        exit;
+    }
+}
 
-if (!file_exists($filePath)) {
+// Build the file path.
+$filePath = $directory . DIRECTORY_SEPARATOR . $file;
+$realFilePath = realpath($filePath);
+
+// Validate that the real file path exists and is within the allowed directory.
+if ($realFilePath === false || strpos($realFilePath, $uploadDirReal) !== 0) {
+    http_response_code(403);
+    echo json_encode(["error" => "Access forbidden."]);
+    exit;
+}
+
+if (!file_exists($realFilePath)) {
     http_response_code(404);
     echo json_encode(["error" => "File not found."]);
     exit;
 }
 
 // Serve the file.
-$mimeType = mime_content_type($filePath);
+$mimeType = mime_content_type($realFilePath);
 header("Content-Type: " . $mimeType);
 
 // For images, serve inline; for other types, force download.
-$ext = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));
+$ext = strtolower(pathinfo($realFilePath, PATHINFO_EXTENSION));
 if (in_array($ext, ['jpg','jpeg','png','gif','bmp','webp','svg','ico'])) {
-    header('Content-Disposition: inline; filename="' . basename($filePath) . '"');
+    header('Content-Disposition: inline; filename="' . basename($realFilePath) . '"');
 } else {
-    header('Content-Disposition: attachment; filename="' . basename($filePath) . '"');
+    header('Content-Disposition: attachment; filename="' . basename($realFilePath) . '"');
 }
-header('Content-Length: ' . filesize($filePath));
+header('Content-Length: ' . filesize($realFilePath));
 
 // Disable caching.
 header('Cache-Control: no-store, no-cache, must-revalidate');
 header('Pragma: no-cache');
 
-readfile($filePath);
+readfile($realFilePath);
 exit;
 ?>

dragAndDrop.js

@@ -1,364 +0,0 @@
-// dragAndDrop.js
-
-// Moves cards into the sidebar based on the saved order in localStorage.
-export function loadSidebarOrder() {
-  const sidebar = document.getElementById('sidebarDropArea');
-  if (!sidebar) return;
-  const orderStr = localStorage.getItem('sidebarOrder');
-  if (orderStr) {
-      const order = JSON.parse(orderStr);
-      if (order.length > 0) {
-          // Ensure main wrapper is visible.
-          const mainWrapper = document.querySelector('.main-wrapper');
-          if (mainWrapper) {
-              mainWrapper.style.display = 'flex';
-          }
-          // For each saved ID, move the card into the sidebar.
-          order.forEach(id => {
-              const card = document.getElementById(id);
-              if (card && card.parentNode.id !== 'sidebarDropArea') {
-                  sidebar.appendChild(card);
-                  // Animate vertical slide for sidebar card
-                  animateVerticalSlide(card);
-              }
-          });
-      }
-  }
-  updateSidebarVisibility();
-}
-
-// Internal helper: update sidebar visibility based on its content.
-function updateSidebarVisibility() {
-  const sidebar = document.getElementById('sidebarDropArea');
-  if (sidebar) {
-      const cards = sidebar.querySelectorAll('#uploadCard, #folderManagementCard');
-      if (cards.length > 0) {
-          sidebar.classList.add('active');
-          sidebar.style.display = 'block';
-      } else {
-          sidebar.classList.remove('active');
-          sidebar.style.display = 'none';
-      }
-      // Save the current order in localStorage.
-      saveSidebarOrder();
-  }
-}
-
-// Internal helper: update top zone layout (center a card if one column is empty).
-function updateTopZoneLayout() {
-  const leftCol = document.getElementById('leftCol');
-  const rightCol = document.getElementById('rightCol');
-
-  const leftIsEmpty = !leftCol.querySelector('#uploadCard');
-  const rightIsEmpty = !rightCol.querySelector('#folderManagementCard');
-
-  if (leftIsEmpty && !rightIsEmpty) {
-      leftCol.style.display = 'none';
-      rightCol.style.margin = '0 auto';
-  } else if (rightIsEmpty && !leftIsEmpty) {
-      rightCol.style.display = 'none';
-      leftCol.style.margin = '0 auto';
-  } else {
-      leftCol.style.display = '';
-      rightCol.style.display = '';
-      leftCol.style.margin = '';
-      rightCol.style.margin = '';
-  }
-}
-
-// When a card is being dragged, if the top drop zone is empty, set its min-height.
-function addTopZoneHighlight() {
-  const topZone = document.getElementById('uploadFolderRow');
-  if (topZone) {
-      topZone.classList.add('highlight');
-      if (topZone.querySelectorAll('#uploadCard, #folderManagementCard').length === 0) {
-          topZone.style.minHeight = '375px';
-      }
-  }
-}
-
-// When the drag ends, remove the extra min-height.
-function removeTopZoneHighlight() {
-  const topZone = document.getElementById('uploadFolderRow');
-  if (topZone) {
-      topZone.classList.remove('highlight');
-      topZone.style.minHeight = '';
-  }
-}
-
-// Vertical slide/fade animation helper.
-function animateVerticalSlide(card) {
-  card.style.transform = 'translateY(30px)';
-  card.style.opacity = '0';
-  // Force reflow.
-  card.offsetWidth;
-  requestAnimationFrame(() => {
-      card.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
-      card.style.transform = 'translateY(0)';
-      card.style.opacity = '1';
-  });
-  setTimeout(() => {
-      card.style.transition = '';
-      card.style.transform = '';
-      card.style.opacity = '';
-  }, 310);
-}
-
-// Internal helper: insert card into sidebar at a proper position based on event.clientY.
-function insertCardInSidebar(card, event) {
-  const sidebar = document.getElementById('sidebarDropArea');
-  if (!sidebar) return;
-  const existingCards = Array.from(sidebar.querySelectorAll('#uploadCard, #folderManagementCard'));
-  let inserted = false;
-  for (const currentCard of existingCards) {
-      const rect = currentCard.getBoundingClientRect();
-      const midY = rect.top + rect.height / 2;
-      if (event.clientY < midY) {
-          sidebar.insertBefore(card, currentCard);
-          inserted = true;
-          break;
-      }
-  }
-  if (!inserted) {
-      sidebar.appendChild(card);
-  }
-  // Ensure card fills the sidebar.
-  card.style.width = '100%';
-  animateVerticalSlide(card);
-}
-
-// Internal helper: save the current sidebar card order to localStorage.
-function saveSidebarOrder() {
-  const sidebar = document.getElementById('sidebarDropArea');
-  if (sidebar) {
-      const cards = sidebar.querySelectorAll('#uploadCard, #folderManagementCard');
-      const order = Array.from(cards).map(card => card.id);
-      localStorage.setItem('sidebarOrder', JSON.stringify(order));
-  }
-}
-
-// Helper: move cards from sidebar back to the top drop area when on small screens.
-function moveSidebarCardsToTop() {
-  if (window.innerWidth < 1205) {
-      const sidebar = document.getElementById('sidebarDropArea');
-      if (!sidebar) return;
-      const cards = Array.from(sidebar.querySelectorAll('#uploadCard, #folderManagementCard'));
-      cards.forEach(card => {
-          const orig = document.getElementById(card.dataset.originalContainerId);
-          if (orig) {
-              orig.appendChild(card);
-              animateVerticalSlide(card);
-          }
-      });
-      updateSidebarVisibility();
-      updateTopZoneLayout();
-  }
-}
-
-// Listen for window resize to automatically move sidebar cards back to top on small screens.
-window.addEventListener('resize', function () {
-  if (window.innerWidth < 1205) {
-      moveSidebarCardsToTop();
-  }
-});
-
-// This function ensures the top drop zone (#uploadFolderRow) has a stable width when empty.
-function ensureTopZonePlaceholder() {
-  const topZone = document.getElementById('uploadFolderRow');
-  if (!topZone) return;
-  if (topZone.querySelectorAll('#uploadCard, #folderManagementCard').length === 0) {
-      let placeholder = topZone.querySelector('.placeholder');
-      if (!placeholder) {
-          placeholder = document.createElement('div');
-          placeholder.className = 'placeholder';
-          placeholder.style.visibility = 'hidden';
-          placeholder.style.display = 'block';
-          placeholder.style.width = '100%';
-          placeholder.style.height = '375px';
-          topZone.appendChild(placeholder);
-      }
-  } else {
-      const placeholder = topZone.querySelector('.placeholder');
-      if (placeholder) placeholder.remove();
-  }
-}
-
-// This sets up all drag-and-drop event listeners for cards.
-export function initDragAndDrop() {
-  function run() {
-      const draggableCards = document.querySelectorAll('#uploadCard, #folderManagementCard');
-      draggableCards.forEach(card => {
-          if (!card.dataset.originalContainerId) {
-              card.dataset.originalContainerId = card.parentNode.id;
-          }
-          const header = card.querySelector('.card-header');
-          if (header) {
-              header.classList.add('drag-header');
-          }
-
-          let isDragging = false;
-          let dragTimer = null;
-          let offsetX = 0, offsetY = 0;
-          let initialLeft, initialTop;
-
-          if (header) {
-              header.addEventListener('mousedown', function (e) {
-                  e.preventDefault();
-                  const card = this.closest('.card');
-                  // Capture the card's initial bounding rectangle once.
-                  const initialRect = card.getBoundingClientRect();
-                  const originX = ((e.clientX - initialRect.left) / initialRect.width) * 100;
-                  const originY = ((e.clientY - initialRect.top) / initialRect.height) * 100;
-                  card.style.transformOrigin = `${originX}% ${originY}%`;
-
-                  // Store the initial rect so we use it later.
-                  dragTimer = setTimeout(() => {
-                      isDragging = true;
-                      card.classList.add('dragging');
-                      card.style.pointerEvents = 'none';
-                      addTopZoneHighlight();
-
-                      const sidebar = document.getElementById('sidebarDropArea');
-                      if (sidebar) {
-                          sidebar.classList.add('active');
-                          sidebar.style.display = 'block';
-                          sidebar.classList.add('highlight');
-                          sidebar.style.height = '800px';
-                      }
-
-                      // Use the stored initialRect rather than recalculating.
-                      initialLeft = initialRect.left + window.pageXOffset;
-                      initialTop = initialRect.top + window.pageYOffset;
-                      offsetX = e.pageX - initialLeft;
-                      offsetY = e.pageY - initialTop;
-
-                      // Append card to body and fix its dimensions to prevent shrinking.
-                      document.body.appendChild(card);
-                      card.style.position = 'absolute';
-                      card.style.left = initialLeft + 'px';
-                      card.style.top = initialTop + 'px';
-                      card.style.width = initialRect.width + 'px';
-                      card.style.height = initialRect.height + 'px';
-                      card.style.minWidth = initialRect.width + 'px';
-                      card.style.flexShrink = '0';
-                      card.style.zIndex = '10000';
-                  }, 500);
-              });
-              header.addEventListener('mouseup', function () {
-                  clearTimeout(dragTimer);
-              });
-          }
-
-          document.addEventListener('mousemove', function (e) {
-              if (isDragging) {
-                  card.style.left = (e.pageX - offsetX) + 'px';
-                  card.style.top = (e.pageY - offsetY) + 'px';
-              }
-          });
-
-          document.addEventListener('mouseup', function (e) {
-              if (isDragging) {
-                  isDragging = false;
-                  card.style.pointerEvents = '';
-                  card.classList.remove('dragging');
-                  removeTopZoneHighlight();
-
-                  const sidebar = document.getElementById('sidebarDropArea');
-                  if (sidebar) {
-                      sidebar.classList.remove('highlight');
-                      sidebar.style.height = '';
-                  }
-
-                  let droppedInSidebar = false;
-                  let droppedInTop = false;
-
-                  // Check if dropped in sidebar drop zone.
-                  const sidebarElem = document.getElementById('sidebarDropArea');
-                  if (sidebarElem) {
-                      const rect = sidebarElem.getBoundingClientRect();
-                      const dropZoneBottom = rect.top + 800; // Virtual drop zone height.
-                      if (
-                          e.clientX >= rect.left &&
-                          e.clientX <= rect.right &&
-                          e.clientY >= rect.top &&
-                          e.clientY <= dropZoneBottom
-                      ) {
-                          insertCardInSidebar(card, e);
-                          droppedInSidebar = true;
-                      }
-                  }
-                  // If not dropped in sidebar, check the top drop zone.
-                  const topRow = document.getElementById('uploadFolderRow');
-                  if (!droppedInSidebar && topRow) {
-                      const rect = topRow.getBoundingClientRect();
-                      if (
-                          e.clientX >= rect.left &&
-                          e.clientX <= rect.right &&
-                          e.clientY >= rect.top &&
-                          e.clientY <= rect.bottom
-                      ) {
-                          let container;
-                          if (card.id === 'uploadCard') {
-                              container = document.getElementById('leftCol');
-                          } else if (card.id === 'folderManagementCard') {
-                              container = document.getElementById('rightCol');
-                          }
-                          if (container) {
-                              ensureTopZonePlaceholder();
-                              updateTopZoneLayout();
-                              container.appendChild(card);
-                              droppedInTop = true;
-                              // Use computed style to determine container's width.
-                              const containerWidth = parseFloat(window.getComputedStyle(container).width);
-                              card.style.width =  "363px";
-                              // Animate the card sliding in.
-                              animateVerticalSlide(card);
-                              // After animation completes, clear the inline width.
-                              setTimeout(() => {
-                                  card.style.removeProperty('width');
-                              }, 210);
-                          }
-                      }
-                  }
-
-                  // If dropped in neither area, return card to its original container.
-                  if (!droppedInSidebar && !droppedInTop) {
-                      const orig = document.getElementById(card.dataset.originalContainerId);
-                      if (orig) {
-                          orig.appendChild(card);
-                          card.style.removeProperty('width');
-                      }
-                  }
-
-                  // Clear inline styles from dragging.
-                  [
-                      'position',
-                      'left',
-                      'top',
-                      'z-index',
-                      'height',
-                      'min-width',
-                      'flex-shrink',
-                      'transition',
-                      'transform',
-                      'opacity'
-                  ].forEach(prop => card.style.removeProperty(prop));
-
-                  // For sidebar drops, force width to 100%.
-                  if (droppedInSidebar) {
-                      card.style.width = '100%';
-                  }
-
-                  updateTopZoneLayout();
-                  updateSidebarVisibility();
-              }
-          });
-      });
-  }
-
-  if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', run);
-  } else {
-      run();
-  }
-}

extractZip.php

@@ -17,9 +17,9 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     echo json_encode(["error" => "Unauthorized"]);
     exit;
 }
-$userPermissions = loadUserPermissions($username);
-// Check if the user is read-only. (Assuming that if readOnly is true, deletion is disallowed.)
+
 $username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
 if ($username) {
     $userPermissions = loadUserPermissions($username);
     if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {

index.html

@@ -5,6 +5,13 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <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="">
@@ -21,7 +28,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/css/css.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"></script>
-  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="css/styles.css" />
 </head>
 
 <body>
@@ -95,6 +102,9 @@
       <h1>FileRise</h1>
     </div>
     <div class="header-right">
+      <div class="header-buttons-wrapper" style="display: flex; align-items: center; gap: 10px;">
+        <!-- Your header drop zone -->
+        <div id="headerDropArea" class="header-drop-zone"></div>
       <div class="header-buttons">
         <button id="logoutBtn" title="Logout">
           <i class="material-icons">exit_to_app</i>
@@ -123,7 +133,7 @@
             </div>
           </div>
         </div>
-        <button id="addUserBtn"  title="Add User" style="display: none;">
+        <button id="addUserBtn" title="Add User" style="display: none;">
           <i class="material-icons">person_add</i>
         </button>
         <button id="removeUserBtn" title="Remove User" style="display: none;">
@@ -132,10 +142,12 @@
         <button id="darkModeToggle" class="dark-mode-toggle">Dark Mode</button>
       </div>
     </div>
+    </div>
   </header>
 
   <!-- Custom Toast Container -->
   <div id="customToast"></div>
+  <div id="hiddenCardsContainer" style="display:none;"></div>
 
   <!-- Main Wrapper: Hidden by default; remove "display: none;" after login -->
   <div class="main-wrapper">
@@ -390,8 +402,7 @@
       </div>
     </div>
   </div>
-  
-  <script type="module" src="main.js"></script>
+  <script type="module" src="js/main.js"></script>
 </body>
 
 </html>

js/auth.js

@@ -1,15 +1,22 @@
 import { sendRequest } from './networkUtils.js';
-import { toggleVisibility, showToast, attachEnterKeyListener, showCustomConfirmModal } from './domUtils.js';
-import { loadFileList, renderFileTable, displayFilePreview, initFileActions } from './fileManager.js';
+import {
+  toggleVisibility,
+  showToast as originalShowToast,
+  attachEnterKeyListener,
+  showCustomConfirmModal
+} from './domUtils.js';
+import { loadFileList } from './fileListView.js';
+import { initFileActions } from './fileActions.js';
+import { renderFileTable } from './fileListView.js';
 import { loadFolderTree } from './folderManager.js';
-import { 
-  openTOTPLoginModal, 
-  openUserPanel, 
-  openTOTPModal, 
-  closeTOTPModal, 
-  openAdminPanel, 
+import {
+  openTOTPLoginModal as originalOpenTOTPLoginModal,
+  openUserPanel,
+  openTOTPModal,
+  closeTOTPModal,
+  openAdminPanel,
   closeAdminPanel,
-  setLastLoginData 
+  setLastLoginData
 } from './authModals.js';
 
 // Production OIDC configuration (override via API as needed)
@@ -22,6 +29,43 @@ const currentOIDCConfig = {
 };
 window.currentOIDCConfig = currentOIDCConfig;
 
+/* ----------------- TOTP & Toast Overrides ----------------- */
+// detect if we’re in a pending‑TOTP state
+window.pendingTOTP = new URLSearchParams(window.location.search).get('totp_required') === '1';
+
+// override showToast to suppress the "Please log in to continue." toast during TOTP
+function showToast(msg) {
+  if (window.pendingTOTP && msg === "Please log in to continue.") {
+    return;
+  }
+  originalShowToast(msg);
+}
+window.showToast = showToast;
+
+// wrap the TOTP modal opener to disable other login buttons only for Basic/OIDC flows
+function openTOTPLoginModal() {
+  originalOpenTOTPLoginModal();
+
+  const isFormLogin = Boolean(window.__lastLoginData);
+  if (!isFormLogin) {
+    // disable Basic‑Auth link
+    const basicLink = document.querySelector("a[href='login_basic.php']");
+    if (basicLink) {
+      basicLink.style.pointerEvents = 'none';
+      basicLink.style.opacity = '0.5';
+    }
+    // disable OIDC button
+    const oidcBtn = document.getElementById("oidcLoginBtn");
+    if (oidcBtn) {
+      oidcBtn.disabled = true;
+      oidcBtn.style.opacity = '0.5';
+    }
+    // hide the form login
+    const authForm = document.getElementById("authForm");
+    if (authForm) authForm.style.display = 'none';
+  }
+}
+
 /* ----------------- Utility Functions ----------------- */
 function updateItemsPerPageSelect() {
   const selectElem = document.querySelector(".form-control.bottom-select");
@@ -54,14 +98,14 @@ function loadAdminConfigFunc() {
       localStorage.setItem("disableFormLogin", config.loginOptions.disableFormLogin);
       localStorage.setItem("disableBasicAuth", config.loginOptions.disableBasicAuth);
       localStorage.setItem("disableOIDCLogin", config.loginOptions.disableOIDCLogin);
-      localStorage.setItem("globalOtpauthUrl", config.globalOtpauthUrl || "otpauth://totp/FileRise?issuer=FileRise");
+      localStorage.setItem("globalOtpauthUrl", config.globalOtpauthUrl || "otpauth://totp/{label}?secret={secret}&issuer=FileRise");
       updateLoginOptionsUIFromStorage();
     })
     .catch(() => {
       localStorage.setItem("disableFormLogin", "false");
       localStorage.setItem("disableBasicAuth", "false");
       localStorage.setItem("disableOIDCLogin", "false");
-      localStorage.setItem("globalOtpauthUrl", "otpauth://totp/FileRise?issuer=FileRise");
+      localStorage.setItem("globalOtpauthUrl", "otpauth://totp/{label}?secret={secret}&issuer=FileRise");
       updateLoginOptionsUIFromStorage();
     });
 }
@@ -83,7 +127,6 @@ function updateAuthenticatedUI(data) {
   if (typeof data.totp_enabled !== "undefined") {
     localStorage.setItem("userTOTPEnabled", data.totp_enabled ? "true" : "false");
   }
-  
   if (data.username) {
     localStorage.setItem("username", data.username);
   }
@@ -101,11 +144,8 @@ function updateAuthenticatedUI(data) {
       restoreBtn.id = "restoreFilesBtn";
       restoreBtn.classList.add("btn", "btn-warning");
       restoreBtn.innerHTML = '<i class="material-icons" title="Restore/Delete Trash">restore_from_trash</i>';
-      if (firstButton) {
-        insertAfter(restoreBtn, firstButton);
-      } else {
-        headerButtons.appendChild(restoreBtn);
-      }
+      if (firstButton) insertAfter(restoreBtn, firstButton);
+      else headerButtons.appendChild(restoreBtn);
     }
     restoreBtn.style.display = "block";
 
@@ -127,26 +167,21 @@ function updateAuthenticatedUI(data) {
     if (adminPanelBtn) adminPanelBtn.style.display = "none";
   }
 
-  let userPanelBtn = document.getElementById("userPanelBtn");
-  if (!userPanelBtn) {
-    userPanelBtn = document.createElement("button");
-    userPanelBtn.id = "userPanelBtn";
-    userPanelBtn.classList.add("btn", "btn-user");
-    userPanelBtn.innerHTML = '<i class="material-icons" title="User Panel">account_circle</i>';
-    let adminPanelBtn = document.getElementById("adminPanelBtn");
-    if (adminPanelBtn) {
-      insertAfter(userPanelBtn, adminPanelBtn);
+  if (window.location.hostname !== "demo.filerise.net") {
+    let userPanelBtn = document.getElementById("userPanelBtn");
+    if (!userPanelBtn) {
+      userPanelBtn = document.createElement("button");
+      userPanelBtn.id = "userPanelBtn";
+      userPanelBtn.classList.add("btn", "btn-user");
+      userPanelBtn.innerHTML = '<i class="material-icons" title="User Panel">account_circle</i>';
+      const adminBtn = document.getElementById("adminPanelBtn");
+      if (adminBtn) insertAfter(userPanelBtn, adminBtn);
+      else if (firstButton) insertAfter(userPanelBtn, firstButton);
+      else headerButtons.appendChild(userPanelBtn);
+      userPanelBtn.addEventListener("click", openUserPanel);
     } else {
-      const firstButton = headerButtons.firstElementChild;
-      if (firstButton) {
-        insertAfter(userPanelBtn, firstButton);
-      } else {
-        headerButtons.appendChild(userPanelBtn);
-      }
+      userPanelBtn.style.display = "block";
     }
-    userPanelBtn.addEventListener("click", openUserPanel);
-  } else {
-    userPanelBtn.style.display = "block";
   }
 
   updateItemsPerPageSelect();
@@ -189,15 +224,16 @@ function checkAuthentication(showLoginToast = true) {
 /* ----------------- Authentication Submission ----------------- */
 function submitLogin(data) {
   setLastLoginData(data);
-  sendRequest("auth.php", "POST", data, { "X-CSRF-Token": window.csrfToken })
-    .then(response => {
-      if (response.success) {
-        sessionStorage.setItem("welcomeMessage", "Welcome back, " + data.username + "!");
-        window.location.reload();
-      } else if (response.totp_required) {
-        openTOTPLoginModal();
-      } else if (response.error && response.error.includes("Too many failed login attempts")) {
-        showToast(response.error);
+  window.__lastLoginData = data;
+sendRequest("auth.php", "POST", data, { "X-CSRF-Token": window.csrfToken })
+  .then(response => {
+    if (response.success || response.status === "ok") {
+      sessionStorage.setItem("welcomeMessage", "Welcome back, " + data.username + "!");
+      window.location.reload();
+    } else if (response.totp_required) {
+      openTOTPLoginModal();
+    } else if (response.error && response.error.includes("Too many failed login attempts")) {
+      showToast(response.error);
         const loginButton = document.getElementById("authForm").querySelector("button[type='submit']");
         if (loginButton) {
           loginButton.disabled = true;
@@ -216,7 +252,7 @@ function submitLogin(data) {
 }
 window.submitLogin = submitLogin;
 
-/* ----------------- Other Helpers and Initialization ----------------- */
+/* ----------------- Other Helpers ----------------- */
 window.changeItemsPerPage = function (value) {
   localStorage.setItem("itemsPerPage", value);
   if (typeof renderFileTable === "function") renderFileTable(window.currentFolder || "root");
@@ -255,7 +291,7 @@ function loadUserList() {
         closeRemoveUserModal();
       }
     })
-    .catch(() => { });
+    .catch(() => {});
 }
 window.loadUserList = loadUserList;
 
@@ -282,7 +318,7 @@ function initAuth() {
       method: "POST",
       credentials: "include",
       headers: { "X-CSRF-Token": window.csrfToken }
-    }).then(() => window.location.reload(true)).catch(() => { });
+    }).then(() => window.location.reload(true)).catch(() => {});
   });
   document.getElementById("addUserBtn").addEventListener("click", function () {
     resetUserForm();
@@ -348,7 +384,7 @@ function initAuth() {
           showToast("Error: " + (data.error || "Could not remove user"));
         }
       })
-      .catch(() => { });
+      .catch(() => {});
   });
   document.getElementById("cancelRemoveUserBtn").addEventListener("click", closeRemoveUserModal);
   document.getElementById("changePasswordBtn").addEventListener("click", function () {
@@ -400,6 +436,19 @@ document.addEventListener("DOMContentLoaded", function () {
     disableBasicAuth: localStorage.getItem("disableBasicAuth") === "true",
     disableOIDCLogin: localStorage.getItem("disableOIDCLogin") === "true"
   });
+
+  const oidcLoginBtn = document.getElementById("oidcLoginBtn");
+  if (oidcLoginBtn) {
+    oidcLoginBtn.addEventListener("click", () => {
+      window.location.href = "auth.php?oidc=initiate";
+    });
+  }
+
+  // If TOTP is pending, show modal and skip normal auth init
+  if (window.pendingTOTP) {
+    openTOTPLoginModal();
+    return;
+  }
 });
 
 export { initAuth, checkAuthentication };

js/authModals.js

@@ -1,63 +1,99 @@
-import { showToast, toggleVisibility } from './domUtils.js';
+import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
 import { sendRequest } from './networkUtils.js';
 
-const version = "v1.0.5";
+const version = "v1.0.8";
 const adminTitle = `Admin Panel <small style="font-size: 12px; color: gray;">${version}</small>`;
-let lastLoginData = null;
 
+let lastLoginData = null;
 export function setLastLoginData(data) {
-    lastLoginData = data;
+  lastLoginData = data;
+  // expose to auth.js so it can tell form-login vs basic/oidc
+  //window.__lastLoginData = data;
 }
 
 export function openTOTPLoginModal() {
-    let totpLoginModal = document.getElementById("totpLoginModal");
-    const isDarkMode = document.body.classList.contains("dark-mode");
-    const modalBg = isDarkMode ? "#2c2c2c" : "#fff";
-    const textColor = isDarkMode ? "#e0e0e0" : "#000";
+  let totpLoginModal = document.getElementById("totpLoginModal");
+  const isDarkMode = document.body.classList.contains("dark-mode");
+  const modalBg = isDarkMode ? "#2c2c2c" : "#fff";
+  const textColor = isDarkMode ? "#e0e0e0" : "#000";
 
-    if (!totpLoginModal) {
-        totpLoginModal = document.createElement("div");
-        totpLoginModal.id = "totpLoginModal";
-        totpLoginModal.style.cssText = `
+  if (!totpLoginModal) {
+    totpLoginModal = document.createElement("div");
+    totpLoginModal.id = "totpLoginModal";
+    totpLoginModal.style.cssText = `
       position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
+      top: 0; left: 0;
+      width: 100vw; height: 100vh;
       background-color: rgba(0,0,0,0.5);
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      display: flex; justify-content: center; align-items: center;
       z-index: 3200;
     `;
-        totpLoginModal.innerHTML = `
-      <div style="background: ${modalBg}; padding: 20px; border-radius: 8px; text-align: center; position: relative; color: ${textColor};">
-        <span id="closeTOTPLoginModal" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+    totpLoginModal.innerHTML = `
+      <div style="background: ${modalBg}; padding:20px; border-radius:8px; text-align:center; position:relative; color:${textColor};">
+        <span id="closeTOTPLoginModal" style="position:absolute; top:10px; right:10px; cursor:pointer; font-size:24px;">&times;</span>
         <h3>Enter TOTP Code</h3>
-        <input type="text" id="totpLoginInput" maxlength="6" style="font-size:24px; text-align:center; width:100%; padding:10px;" placeholder="6-digit code" />
+        <input type="text" id="totpLoginInput" maxlength="6"
+               style="font-size:24px; text-align:center; width:100%; padding:10px;"
+               placeholder="6-digit code" />
       </div>
     `;
-        document.body.appendChild(totpLoginModal);
-        document.getElementById("closeTOTPLoginModal").addEventListener("click", () => {
-            totpLoginModal.style.display = "none";
-        });
-        const totpInput = document.getElementById("totpLoginInput");
-        totpInput.focus();
-        totpInput.addEventListener("input", function () {
-            if (this.value.trim().length === 6 && lastLoginData) {
-                lastLoginData.totp_code = this.value.trim();
-                totpLoginModal.style.display = "none";
-                if (typeof window.submitLogin === "function") {
-                    window.submitLogin(lastLoginData);
-                }
+    document.body.appendChild(totpLoginModal);
+
+    document.getElementById("closeTOTPLoginModal").addEventListener("click", () => {
+      totpLoginModal.style.display = "none";
+    });
+
+    const totpInput = document.getElementById("totpLoginInput");
+    totpInput.focus();
+
+    totpInput.addEventListener("input", function () {
+      const code = this.value.trim();
+      if (code.length === 6) {
+        if (lastLoginData) {
+          totpLoginModal.style.display = "none";
+          lastLoginData.totp_code = code;
+          window.submitLogin(lastLoginData);
+        } else {
+          fetch("totp_verify.php", {
+            method: "POST",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json",
+              "X-CSRF-Token": window.csrfToken
+            },
+            body: JSON.stringify({ totp_code: code })
+          })
+          .then(res => res.json())
+          .then(json => {
+            if (json.status === "ok") {
+              window.location.href = "index.html";
+            } else {
+              showToast(json.message || "TOTP verification failed");
+              this.value = "";
+              totpLoginModal.style.display = "flex";
+              totpInput.focus();
             }
-        });
-    } else {
-        totpLoginModal.style.display = "flex";
-        const modalContent = totpLoginModal.firstElementChild;
-        modalContent.style.background = modalBg;
-        modalContent.style.color = textColor;
+          })
+          .catch(() => {
+            showToast("TOTP verification failed");
+            this.value = "";
+            totpLoginModal.style.display = "flex";
+            totpInput.focus();
+          });
+        }
+      }
+    });
+  } else {
+    totpLoginModal.style.display = "flex";
+    const modalContent = totpLoginModal.firstElementChild;
+    modalContent.style.background = modalBg;
+    modalContent.style.color = textColor;
+    const totpInput = document.getElementById("totpLoginInput");
+    if (totpInput) {
+      totpInput.value = "";
+      totpInput.focus();
     }
+  }
 }
 
 export function openUserPanel() {
@@ -150,10 +186,10 @@ export function openUserPanel() {
 }
 
 export function openTOTPModal() {
-    let totpModal = document.getElementById("totpModal");
-    const isDarkMode = document.body.classList.contains("dark-mode");
-    const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
-    const modalContentStyles = `
+  let totpModal = document.getElementById("totpModal");
+  const isDarkMode = document.body.classList.contains("dark-mode");
+  const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+  const modalContentStyles = `
     background: ${isDarkMode ? "#2c2c2c" : "#fff"};
     color: ${isDarkMode ? "#e0e0e0" : "#000"};
     padding: 20px;
@@ -191,19 +227,17 @@ export function openTOTPModal() {
       </div>
     `;
     document.body.appendChild(totpModal);
-    // Bind the X button to call closeTOTPModal with disable=true
+    
     document.getElementById("closeTOTPModal").addEventListener("click", () => {
       closeTOTPModal(true);
     });
   
-    // Add event listener for TOTP confirmation
     document.getElementById("confirmTOTPBtn").addEventListener("click", function () {
       const code = document.getElementById("totpConfirmInput").value.trim();
       if (code.length !== 6) {
         showToast("Please enter a valid 6-digit code.");
         return;
       }
-      // Call the endpoint to verify the TOTP code
       fetch("totp_verify.php", {
         method: "POST",
         credentials: "include",
@@ -213,24 +247,45 @@ export function openTOTPModal() {
         },
         body: JSON.stringify({ totp_code: code })
       })
-        .then(r => r.json())
-        .then(result => {
-          if (result.success) {
-            showToast("TOTP successfully enabled.");
-            // On success, close the modal without disabling
-            closeTOTPModal(false);
-          } else {
-            showToast("TOTP verification failed: " + (result.error || "Invalid code."));
-          }
-        })
-        .catch(() => { showToast("Error verifying TOTP code."); });
+      .then(r => r.json())
+      .then(result => {
+        if (result.status === 'ok') {
+          showToast("TOTP successfully enabled.");
+          closeTOTPModal(false);
+        } else {
+          showToast("TOTP verification failed: " + (result.message || "Invalid code."));
+        }
+      })
+      .catch(() => { showToast("Error verifying TOTP code."); });
     });
+
+    // Focus the input and attach enter key listener
+    const totpConfirmInput = document.getElementById("totpConfirmInput");
+    if (totpConfirmInput) {
+      setTimeout(() => {
+        const totpConfirmInput = document.getElementById("totpConfirmInput");
+        if (totpConfirmInput) totpConfirmInput.focus();
+      }, 100);
+    }
+    attachEnterKeyListener("totpModal", "confirmTOTPBtn");
+
   } else {
     totpModal.style.display = "flex";
     totpModal.style.backgroundColor = overlayBackground;
     const modalContent = totpModal.querySelector(".modal-content");
     modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
     modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
+    
+    // Focus the input and attach enter key listener
+    const totpConfirmInput = document.getElementById("totpConfirmInput");
+    if (totpConfirmInput) {
+      totpConfirmInput.value = "";
+      setTimeout(() => {
+        const totpConfirmInput = document.getElementById("totpConfirmInput");
+        if (totpConfirmInput) totpConfirmInput.focus();
+      }, 100);
+    }
+    attachEnterKeyListener("totpModal", "confirmTOTPBtn");
   }
 }
 
@@ -467,7 +522,7 @@ export function openAdminPanel() {
                 document.getElementById("oidcClientId").value = window.currentOIDCConfig.clientId;
                 document.getElementById("oidcClientSecret").value = window.currentOIDCConfig.clientSecret;
                 document.getElementById("oidcRedirectUri").value = window.currentOIDCConfig.redirectUri;
-                document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/FileRise?issuer=FileRise';
+                document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/{label}?secret={secret}&issuer=FileRise';
                 document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin === true;
                 document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth === true;
                 document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin === true;
@@ -488,7 +543,7 @@ export function openAdminPanel() {
                 document.getElementById("oidcClientId").value = window.currentOIDCConfig.clientId;
                 document.getElementById("oidcClientSecret").value = window.currentOIDCConfig.clientSecret;
                 document.getElementById("oidcRedirectUri").value = window.currentOIDCConfig.redirectUri;
-                document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/FileRise?issuer=FileRise';
+                document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/{label}?secret={secret}&issuer=FileRise';
                 document.getElementById("disableFormLogin").checked = localStorage.getItem("disableFormLogin") === "true";
                 document.getElementById("disableBasicAuth").checked = localStorage.getItem("disableBasicAuth") === "true";
                 document.getElementById("disableOIDCLogin").checked = localStorage.getItem("disableOIDCLogin") === "true";

js/domUtils.js

@@ -136,11 +136,11 @@ export function buildFileTableRow(file, folderPath) {
   const safeUploader = escapeHTML(file.uploader || "Unknown");
 
   let previewButton = "";
-  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic|pdf|mp4|webm|mov|mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) {
+  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic|pdf|mp4|webm|mov|mp3|wav|m4a|ogg|flac|aac|wma|opus|mkv|ogv)$/i.test(file.name)) {
     let previewIcon = "";
     if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic)$/i.test(file.name)) {
       previewIcon = `<i class="material-icons">image</i>`;
-    } else if (/\.(mp4|webm|mov)$/i.test(file.name)) {
+    } else if (/\.(mp4|mkv|webm|mov|ogv)$/i.test(file.name)) {
       previewIcon = `<i class="material-icons">videocam</i>`;
     } else if (/\.pdf$/i.test(file.name)) {
       previewIcon = `<i class="material-icons">picture_as_pdf</i>`;

js/dragAndDrop.js

@@ -0,0 +1,599 @@
+// dragAndDrop.js
+// This file handles drag-and-drop functionality for cards in the sidebar, header and top drop zones.
+// It also manages the visibility of the sidebar and header drop zones based on the current state of the application.
+// It includes functions to save and load the order of cards in the sidebar and header from localStorage.
+// It also includes functions to handle the drag-and-drop events, including mouse movements and drop zones.
+// It uses CSS classes to manage the appearance of the sidebar and header drop zones during drag-and-drop operations.
+
+// Moves cards into the sidebar based on the saved order in localStorage.
+export function loadSidebarOrder() {
+    const sidebar = document.getElementById('sidebarDropArea');
+    if (!sidebar) return;
+    const orderStr = localStorage.getItem('sidebarOrder');
+    if (orderStr) {
+      const order = JSON.parse(orderStr);
+      if (order.length > 0) {
+        // Ensure main wrapper is visible.
+        const mainWrapper = document.querySelector('.main-wrapper');
+        if (mainWrapper) {
+          mainWrapper.style.display = 'flex';
+        }
+        // For each saved ID, move the card into the sidebar.
+        order.forEach(id => {
+          const card = document.getElementById(id);
+          if (card && card.parentNode.id !== 'sidebarDropArea') {
+            sidebar.appendChild(card);
+            // Animate vertical slide for sidebar card
+            animateVerticalSlide(card);
+          }
+        });
+      }
+    }
+    updateSidebarVisibility();
+  }
+  
+  // NEW: Load header order from localStorage.
+  export function loadHeaderOrder() {
+    const headerDropArea = document.getElementById('headerDropArea');
+    if (!headerDropArea) return;
+    const orderStr = localStorage.getItem('headerOrder');
+    if (orderStr) {
+      const order = JSON.parse(orderStr);
+      if (order.length > 0) {
+        order.forEach(id => {
+          const card = document.getElementById(id);
+          // Only load if card is not already in header drop zone.
+          if (card && card.parentNode.id !== 'headerDropArea') {
+            insertCardInHeader(card, null);
+          }
+        });
+      }
+    }
+  }
+  
+  // Internal helper: update sidebar visibility based on its content.
+  function updateSidebarVisibility() {
+    const sidebar = document.getElementById('sidebarDropArea');
+    if (sidebar) {
+      const cards = sidebar.querySelectorAll('#uploadCard, #folderManagementCard');
+      if (cards.length > 0) {
+        sidebar.classList.add('active');
+        sidebar.style.display = 'block';
+      } else {
+        sidebar.classList.remove('active');
+        sidebar.style.display = 'none';
+      }
+      // Save the current order in localStorage.
+      saveSidebarOrder();
+    }
+  }
+  
+  // NEW: Save header order to localStorage.
+  function saveHeaderOrder() {
+    const headerDropArea = document.getElementById('headerDropArea');
+    if (headerDropArea) {
+      const icons = Array.from(headerDropArea.children);
+      // Each header icon stores its associated card in the property cardElement.
+      const order = icons.map(icon => icon.cardElement.id);
+      localStorage.setItem('headerOrder', JSON.stringify(order));
+    }
+  }
+  
+  // Internal helper: update top zone layout (center a card if one column is empty).
+  function updateTopZoneLayout() {
+    const leftCol = document.getElementById('leftCol');
+    const rightCol = document.getElementById('rightCol');
+  
+    const leftIsEmpty = !leftCol.querySelector('#uploadCard');
+    const rightIsEmpty = !rightCol.querySelector('#folderManagementCard');
+  
+    if (leftIsEmpty && !rightIsEmpty) {
+      leftCol.style.display = 'none';
+      rightCol.style.margin = '0 auto';
+    } else if (rightIsEmpty && !leftIsEmpty) {
+      rightCol.style.display = 'none';
+      leftCol.style.margin = '0 auto';
+    } else {
+      leftCol.style.display = '';
+      rightCol.style.display = '';
+      leftCol.style.margin = '';
+      rightCol.style.margin = '';
+    }
+  }
+  
+  // When a card is being dragged, if the top drop zone is empty, set its min-height.
+  function addTopZoneHighlight() {
+    const topZone = document.getElementById('uploadFolderRow');
+    if (topZone) {
+      topZone.classList.add('highlight');
+      if (topZone.querySelectorAll('#uploadCard, #folderManagementCard').length === 0) {
+        topZone.style.minHeight = '375px';
+      }
+    }
+  }
+  
+  // When the drag ends, remove the extra min-height.
+  function removeTopZoneHighlight() {
+    const topZone = document.getElementById('uploadFolderRow');
+    if (topZone) {
+      topZone.classList.remove('highlight');
+      topZone.style.minHeight = '';
+    }
+  }
+  
+  // Vertical slide/fade animation helper.
+  function animateVerticalSlide(card) {
+    card.style.transform = 'translateY(30px)';
+    card.style.opacity = '0';
+    // Force reflow.
+    card.offsetWidth;
+    requestAnimationFrame(() => {
+      card.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
+      card.style.transform = 'translateY(0)';
+      card.style.opacity = '1';
+    });
+    setTimeout(() => {
+      card.style.transition = '';
+      card.style.transform = '';
+      card.style.opacity = '';
+    }, 310);
+  }
+  
+  // Internal helper: insert card into sidebar at a proper position based on event.clientY.
+  function insertCardInSidebar(card, event) {
+    const sidebar = document.getElementById('sidebarDropArea');
+    if (!sidebar) return;
+    const existingCards = Array.from(sidebar.querySelectorAll('#uploadCard, #folderManagementCard'));
+    let inserted = false;
+    for (const currentCard of existingCards) {
+      const rect = currentCard.getBoundingClientRect();
+      const midY = rect.top + rect.height / 2;
+      if (event.clientY < midY) {
+        sidebar.insertBefore(card, currentCard);
+        inserted = true;
+        break;
+      }
+    }
+    if (!inserted) {
+      sidebar.appendChild(card);
+    }
+    // Ensure card fills the sidebar.
+    card.style.width = '100%';
+    animateVerticalSlide(card);
+  }
+  
+  // Internal helper: save the current sidebar card order to localStorage.
+  function saveSidebarOrder() {
+    const sidebar = document.getElementById('sidebarDropArea');
+    if (sidebar) {
+      const cards = sidebar.querySelectorAll('#uploadCard, #folderManagementCard');
+      const order = Array.from(cards).map(card => card.id);
+      localStorage.setItem('sidebarOrder', JSON.stringify(order));
+    }
+  }
+  
+  // Helper: move cards from sidebar back to the top drop area when on small screens.
+  function moveSidebarCardsToTop() {
+    if (window.innerWidth < 1205) {
+      const sidebar = document.getElementById('sidebarDropArea');
+      if (!sidebar) return;
+      const cards = Array.from(sidebar.querySelectorAll('#uploadCard, #folderManagementCard'));
+      cards.forEach(card => {
+        const orig = document.getElementById(card.dataset.originalContainerId);
+        if (orig) {
+          orig.appendChild(card);
+          animateVerticalSlide(card);
+        }
+      });
+      updateSidebarVisibility();
+      updateTopZoneLayout();
+    }
+  }
+  
+  // Listen for window resize to automatically move sidebar cards back to top on small screens.
+  window.addEventListener('resize', function () {
+    if (window.innerWidth < 1205) {
+      moveSidebarCardsToTop();
+    }
+  });
+  
+  // This function ensures the top drop zone (#uploadFolderRow) has a stable width when empty.
+  function ensureTopZonePlaceholder() {
+    const topZone = document.getElementById('uploadFolderRow');
+    if (!topZone) return;
+    if (topZone.querySelectorAll('#uploadCard, #folderManagementCard').length === 0) {
+      let placeholder = topZone.querySelector('.placeholder');
+      if (!placeholder) {
+        placeholder = document.createElement('div');
+        placeholder.className = 'placeholder';
+        placeholder.style.visibility = 'hidden';
+        placeholder.style.display = 'block';
+        placeholder.style.width = '100%';
+        placeholder.style.height = '375px';
+        topZone.appendChild(placeholder);
+      }
+    } else {
+      const placeholder = topZone.querySelector('.placeholder');
+      if (placeholder) placeholder.remove();
+    }
+  }
+    
+  // --- NEW HELPER FUNCTIONS FOR HEADER DROP ZONE ---
+  
+  // Show header drop zone and add a "drag-active" class so that the pseudo-element appears.
+  function showHeaderDropZone() {
+    const headerDropArea = document.getElementById('headerDropArea');
+    if (headerDropArea) {
+      headerDropArea.style.display = 'inline-flex';
+      headerDropArea.classList.add('drag-active');
+    }
+  }
+    
+  // Hide header drop zone by removing the "drag-active" class.
+  // If a header icon is present (i.e. a card was dropped), the drop zone remains visible without the dashed border.
+  function hideHeaderDropZone() {
+    const headerDropArea = document.getElementById('headerDropArea');
+    if (headerDropArea) {
+      headerDropArea.classList.remove('drag-active');
+      if (headerDropArea.children.length === 0) {
+        headerDropArea.style.display = 'none';
+      }
+    }
+  }
+    
+  // === NEW FUNCTION: Insert card into header drop zone as a material icon ===
+  function insertCardInHeader(card, event) {
+      const headerDropArea = document.getElementById('headerDropArea');
+      if (!headerDropArea) return;
+      
+      // For folder management and upload cards, preserve the original by moving it to a hidden container.
+      if (card.id === 'folderManagementCard' || card.id === 'uploadCard') {
+        let hiddenContainer = document.getElementById('hiddenCardsContainer');
+        if (!hiddenContainer) {
+          hiddenContainer = document.createElement('div');
+          hiddenContainer.id = 'hiddenCardsContainer';
+          hiddenContainer.style.display = 'none';
+          document.body.appendChild(hiddenContainer);
+        }
+        // Move the original card to the hidden container if it's not already there.
+        if (card.parentNode.id !== 'hiddenCardsContainer') {
+          hiddenContainer.appendChild(card);
+        }
+      } else {
+        // For other cards, simply remove from current container.
+        if (card.parentNode) {
+          card.parentNode.removeChild(card);
+        }
+      }
+      
+      // Create the header icon button.
+      const iconButton = document.createElement('button');
+      iconButton.className = 'header-card-icon';
+      // Remove default button styling.
+      iconButton.style.border = 'none';
+      iconButton.style.background = 'none';
+      iconButton.style.outline = 'none';
+      iconButton.style.cursor = 'pointer';
+        
+      // Choose an icon based on the card type with 24px size.
+      if (card.id === 'uploadCard') {
+        iconButton.innerHTML = '<i class="material-icons" style="font-size:24px;">cloud_upload</i>';
+      } else if (card.id === 'folderManagementCard') {
+        iconButton.innerHTML = '<i class="material-icons" style="font-size:24px;">folder</i>';
+      } else {
+        iconButton.innerHTML = '<i class="material-icons" style="font-size:24px;">insert_drive_file</i>';
+      }
+      
+      // Save a reference to the card in the icon button.
+      iconButton.cardElement = card;
+      // Associate this icon with the card for future removal.
+      card.headerIconButton = iconButton;
+      
+      let modal = null;
+      let isLocked = false;
+      let hoverActive = false;
+      
+      // showModal: When triggered, ensure the card is attached to the modal.
+      function showModal() {
+        if (!modal) {
+          modal = document.createElement('div');
+          modal.className = 'header-card-modal';
+          modal.style.position = 'fixed';
+          modal.style.top = '80px';
+          modal.style.right = '80px';
+          modal.style.zIndex = '11000';
+          // Render the modal but initially keep it hidden.
+          modal.style.display = 'block';
+          modal.style.visibility = 'hidden';
+          modal.style.opacity = '0';
+          modal.style.background = 'none';
+          modal.style.border = 'none';
+          modal.style.padding = '0';
+          modal.style.boxShadow = 'none';
+          document.body.appendChild(modal);
+          // Attach modal hover events.
+          modal.addEventListener('mouseover', handleMouseOver);
+          modal.addEventListener('mouseout', handleMouseOut);
+          iconButton.modalInstance = modal;
+        }
+        // If the card isn't already in the modal, remove it from the hidden container and attach it.
+        if (!modal.contains(card)) {
+          const hiddenContainer = document.getElementById('hiddenCardsContainer');
+          if (hiddenContainer && hiddenContainer.contains(card)) {
+            hiddenContainer.removeChild(card);
+          }
+          modal.appendChild(card);
+        }
+        // Reveal the modal.
+        modal.style.visibility = 'visible';
+        modal.style.opacity = '1';
+      }
+      
+      // hideModal: Hide the modal and return the card to the hidden container.
+      function hideModal() {
+        if (modal && !isLocked && !hoverActive) {
+          modal.style.visibility = 'hidden';
+          modal.style.opacity = '0';
+          // Return the card to the hidden container.
+          const hiddenContainer = document.getElementById('hiddenCardsContainer');
+          if (hiddenContainer && modal.contains(card)) {
+            hiddenContainer.appendChild(card);
+          }
+        }
+      }
+      
+      function handleMouseOver() {
+        hoverActive = true;
+        showModal();
+      }
+      
+      function handleMouseOut() {
+        hoverActive = false;
+        setTimeout(() => {
+          if (!hoverActive && !isLocked) {
+            hideModal();
+          }
+        }, 300);
+      }
+      
+      // Attach hover events to the icon.
+      iconButton.addEventListener('mouseover', handleMouseOver);
+      iconButton.addEventListener('mouseout', handleMouseOut);
+      
+      // Toggle the locked state on click so the modal stays open.
+      iconButton.addEventListener('click', (e) => {
+        isLocked = !isLocked;
+        if (isLocked) {
+          showModal();
+        } else {
+          hideModal();
+        }
+        e.stopPropagation();
+      });
+      
+      // Append the header icon button into the header drop zone.
+      headerDropArea.appendChild(iconButton);
+      // Save the updated header order.
+      saveHeaderOrder();
+    }
+    
+  // === Main Drag and Drop Initialization ===
+  export function initDragAndDrop() {
+    function run() {
+      const draggableCards = document.querySelectorAll('#uploadCard, #folderManagementCard');
+      draggableCards.forEach(card => {
+        if (!card.dataset.originalContainerId) {
+          card.dataset.originalContainerId = card.parentNode.id;
+        }
+        const header = card.querySelector('.card-header');
+        if (header) {
+          header.classList.add('drag-header');
+        }
+    
+        let isDragging = false;
+        let dragTimer = null;
+        let offsetX = 0, offsetY = 0;
+        let initialLeft, initialTop;
+    
+        if (header) {
+          header.addEventListener('mousedown', function (e) {
+            e.preventDefault();
+            const card = this.closest('.card');
+            // Capture the card's initial bounding rectangle.
+            const initialRect = card.getBoundingClientRect();
+            const originX = ((e.clientX - initialRect.left) / initialRect.width) * 100;
+            const originY = ((e.clientY - initialRect.top) / initialRect.height) * 100;
+            card.style.transformOrigin = `${originX}% ${originY}%`;
+    
+            // Store the initial rect so we use it later.
+            dragTimer = setTimeout(() => {
+              isDragging = true;
+              card.classList.add('dragging');
+              card.style.pointerEvents = 'none';
+              addTopZoneHighlight();
+    
+              const sidebar = document.getElementById('sidebarDropArea');
+              if (sidebar) {
+                sidebar.classList.add('active');
+                sidebar.style.display = 'block';
+                sidebar.classList.add('highlight');
+                sidebar.style.height = '800px';
+              }
+    
+              // Show header drop zone while dragging.
+              showHeaderDropZone();
+    
+              // Use the stored initialRect.
+              initialLeft = initialRect.left + window.pageXOffset;
+              initialTop = initialRect.top + window.pageYOffset;
+              offsetX = e.pageX - initialLeft;
+              offsetY = e.pageY - initialTop;
+    
+              // Remove any associated header icon if present.
+              if (card.headerIconButton) {
+                if (card.headerIconButton.parentNode) {
+                  card.headerIconButton.parentNode.removeChild(card.headerIconButton);
+                }
+                if (card.headerIconButton.modalInstance && card.headerIconButton.modalInstance.parentNode) {
+                  card.headerIconButton.modalInstance.parentNode.removeChild(card.headerIconButton.modalInstance);
+                }
+                card.headerIconButton = null;
+                saveHeaderOrder();
+              }
+    
+              // Append card to body and fix its dimensions.
+              document.body.appendChild(card);
+              card.style.position = 'absolute';
+              card.style.left = initialLeft + 'px';
+              card.style.top = initialTop + 'px';
+              card.style.width = initialRect.width + 'px';
+              card.style.height = initialRect.height + 'px';
+              card.style.minWidth = initialRect.width + 'px';
+              card.style.flexShrink = '0';
+              card.style.zIndex = '10000';
+            }, 500);
+          });
+          header.addEventListener('mouseup', function () {
+            clearTimeout(dragTimer);
+          });
+        }
+    
+        document.addEventListener('mousemove', function (e) {
+          if (isDragging) {
+            card.style.left = (e.pageX - offsetX) + 'px';
+            card.style.top = (e.pageY - offsetY) + 'px';
+          }
+        });
+    
+        document.addEventListener('mouseup', function (e) {
+          if (isDragging) {
+            isDragging = false;
+            card.style.pointerEvents = '';
+            card.classList.remove('dragging');
+            removeTopZoneHighlight();
+    
+            const sidebar = document.getElementById('sidebarDropArea');
+            if (sidebar) {
+              sidebar.classList.remove('highlight');
+              sidebar.style.height = '';
+            }
+    
+            // Remove any existing header icon if present.
+            if (card.headerIconButton) {
+              if (card.headerIconButton.parentNode) {
+                card.headerIconButton.parentNode.removeChild(card.headerIconButton);
+              }
+              if (card.headerIconButton.modalInstance && card.headerIconButton.modalInstance.parentNode) {
+                card.headerIconButton.modalInstance.parentNode.removeChild(card.headerIconButton.modalInstance);
+              }
+              card.headerIconButton = null;
+              saveHeaderOrder();
+            }
+    
+            let droppedInSidebar = false;
+            let droppedInTop = false;
+            let droppedInHeader = false;
+    
+            // Check if dropped in sidebar drop zone.
+            const sidebarElem = document.getElementById('sidebarDropArea');
+            if (sidebarElem) {
+              const rect = sidebarElem.getBoundingClientRect();
+              const dropZoneBottom = rect.top + 800; // Virtual drop zone height.
+              if (
+                e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top &&
+                e.clientY <= dropZoneBottom
+              ) {
+                insertCardInSidebar(card, e);
+                droppedInSidebar = true;
+              }
+            }
+            // Check the top drop zone.
+            const topRow = document.getElementById('uploadFolderRow');
+            if (!droppedInSidebar && topRow) {
+              const rect = topRow.getBoundingClientRect();
+              if (
+                e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top &&
+                e.clientY <= rect.bottom
+              ) {
+                let container;
+                if (card.id === 'uploadCard') {
+                  container = document.getElementById('leftCol');
+                } else if (card.id === 'folderManagementCard') {
+                  container = document.getElementById('rightCol');
+                }
+                if (container) {
+                  ensureTopZonePlaceholder();
+                  updateTopZoneLayout();
+                  container.appendChild(card);
+                  droppedInTop = true;
+                  // Set a fixed width during animation.
+                  card.style.width = "363px";
+                  animateVerticalSlide(card);
+                  setTimeout(() => {
+                    card.style.removeProperty('width');
+                  }, 210);
+                }
+              }
+            }
+            // Check the header drop zone.
+            const headerDropArea = document.getElementById('headerDropArea');
+            if (!droppedInSidebar && !droppedInTop && headerDropArea) {
+              const rect = headerDropArea.getBoundingClientRect();
+              if (
+                e.clientX >= rect.left &&
+                e.clientX <= rect.right &&
+                e.clientY >= rect.top &&
+                e.clientY <= rect.bottom
+              ) {
+                insertCardInHeader(card, e);
+                droppedInHeader = true;
+              }
+            }
+            // If card was not dropped in any zone, return it to its original container.
+            if (!droppedInSidebar && !droppedInTop && !droppedInHeader) {
+              const orig = document.getElementById(card.dataset.originalContainerId);
+              if (orig) {
+                orig.appendChild(card);
+                card.style.removeProperty('width');
+              }
+            }
+    
+            // Clear inline drag-related styles.
+            [
+              'position',
+              'left',
+              'top',
+              'z-index',
+              'height',
+              'min-width',
+              'flex-shrink',
+              'transition',
+              'transform',
+              'opacity'
+            ].forEach(prop => card.style.removeProperty(prop));
+    
+            // For sidebar drops, force width to 100%.
+            if (droppedInSidebar) {
+              card.style.width = '100%';
+            }
+    
+            updateTopZoneLayout();
+            updateSidebarVisibility();
+    
+            // Hide header drop zone if no icon is present.
+            hideHeaderDropZone();
+          }
+        });
+      });
+    }
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', run);
+    } else {
+      run();
+    }
+  }

js/fileActions.js

@@ -0,0 +1,476 @@
+// fileActions.js
+import { showToast, attachEnterKeyListener } from './domUtils.js';
+import { loadFileList } from './fileListView.js';
+import { formatFolderName } from './fileListView.js';
+
+export function handleDeleteSelected(e) {
+  e.preventDefault();
+  e.stopImmediatePropagation();
+  const checkboxes = document.querySelectorAll(".file-checkbox:checked");
+  if (checkboxes.length === 0) {
+    showToast("No files selected.");
+    return;
+  }
+  window.filesToDelete = Array.from(checkboxes).map(chk => chk.value);
+  document.getElementById("deleteFilesMessage").textContent =
+    "Are you sure you want to delete " + window.filesToDelete.length + " selected file(s)?";
+  document.getElementById("deleteFilesModal").style.display = "block";
+  attachEnterKeyListener("deleteFilesModal", "confirmDeleteFiles");
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  const cancelDelete = document.getElementById("cancelDeleteFiles");
+  if (cancelDelete) {
+    cancelDelete.addEventListener("click", function () {
+      document.getElementById("deleteFilesModal").style.display = "none";
+      window.filesToDelete = [];
+    });
+  }
+  
+  const confirmDelete = document.getElementById("confirmDeleteFiles");
+  if (confirmDelete) {
+    confirmDelete.addEventListener("click", function () {
+      fetch("deleteFiles.php", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": window.csrfToken
+        },
+        body: JSON.stringify({ folder: window.currentFolder, files: window.filesToDelete })
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            showToast("Selected files deleted successfully!");
+            loadFileList(window.currentFolder);
+          } else {
+            showToast("Error: " + (data.error || "Could not delete files"));
+          }
+        })
+        .catch(error => console.error("Error deleting files:", error))
+        .finally(() => {
+          document.getElementById("deleteFilesModal").style.display = "none";
+          window.filesToDelete = [];
+        });
+    });
+  }
+});
+
+attachEnterKeyListener("downloadZipModal", "confirmDownloadZip");
+export function handleDownloadZipSelected(e) {
+  e.preventDefault();
+  e.stopImmediatePropagation();
+  const checkboxes = document.querySelectorAll(".file-checkbox:checked");
+  if (checkboxes.length === 0) {
+    showToast("No files selected for download.");
+    return;
+  }
+  window.filesToDownload = Array.from(checkboxes).map(chk => chk.value);
+  document.getElementById("downloadZipModal").style.display = "block";
+  setTimeout(() => {
+    const input = document.getElementById("zipFileNameInput");
+    input.focus();
+  }, 100);
+};
+
+export function handleExtractZipSelected(e) {
+  if (e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+  const checkboxes = document.querySelectorAll(".file-checkbox:checked");
+  if (!checkboxes.length) {
+    showToast("No files selected.");
+    return;
+  }
+  const zipFiles = Array.from(checkboxes)
+    .map(chk => chk.value)
+    .filter(name => name.toLowerCase().endsWith(".zip"));
+  if (!zipFiles.length) {
+    showToast("No zip files selected.");
+    return;
+  }
+  fetch("extractZip.php", {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": window.csrfToken
+    },
+    body: JSON.stringify({
+      folder: window.currentFolder || "root",
+      files: zipFiles
+    })
+  })
+    .then(response => response.json())
+    .then(data => {
+      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(", ");
+        }
+        showToast(toastMessage);
+        loadFileList(window.currentFolder);
+      } else {
+        showToast("Error extracting zip: " + (data.error || "Unknown error"));
+      }
+    })
+    .catch(error => {
+      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", function () {
+  const cancelDownloadZip = document.getElementById("cancelDownloadZip");
+  if (cancelDownloadZip) {
+    cancelDownloadZip.addEventListener("click", function () {
+      document.getElementById("downloadZipModal").style.display = "none";
+    });
+  }
+  
+  const confirmDownloadZip = document.getElementById("confirmDownloadZip");
+  if (confirmDownloadZip) {
+    confirmDownloadZip.addEventListener("click", function () {
+      let zipName = document.getElementById("zipFileNameInput").value.trim();
+      if (!zipName) {
+        showToast("Please enter a name for the zip file.");
+        return;
+      }
+      if (!zipName.toLowerCase().endsWith(".zip")) {
+        zipName += ".zip";
+      }
+      document.getElementById("downloadZipModal").style.display = "none";
+      const folder = window.currentFolder || "root";
+      fetch("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();
+          showToast("Download started.");
+        })
+        .catch(error => {
+          console.error("Error downloading zip:", error);
+          showToast("Error downloading selected files as zip: " + error.message);
+        });
+    });
+  }
+});
+
+export function handleCopySelected(e) {
+  e.preventDefault();
+  e.stopImmediatePropagation();
+  const checkboxes = document.querySelectorAll(".file-checkbox:checked");
+  if (checkboxes.length === 0) {
+    showToast("No files selected for copying.", 5000);
+    return;
+  }
+  window.filesToCopy = Array.from(checkboxes).map(chk => chk.value);
+  document.getElementById("copyFilesModal").style.display = "block";
+  loadCopyMoveFolderListForModal("copyTargetFolder");
+}
+
+export async function loadCopyMoveFolderListForModal(dropdownId) {
+  const folderSelect = document.getElementById(dropdownId);
+  folderSelect.innerHTML = "";
+
+  if (window.userFolderOnly) {
+    const username = localStorage.getItem("username") || "root";
+    try {
+      const response = await fetch("getFolderList.php?restricted=1");
+      let folders = await response.json();
+      if (Array.isArray(folders) && folders.length && typeof folders[0] === "object" && folders[0].folder) {
+        folders = folders.map(item => item.folder);
+      }
+      folders = folders.filter(folder =>
+        folder.toLowerCase() !== "trash" &&
+        (folder === username || folder.indexOf(username + "/") === 0)
+      );
+      
+      const rootOption = document.createElement("option");
+      rootOption.value = username;
+      rootOption.textContent = formatFolderName(username);
+      folderSelect.appendChild(rootOption);
+      
+      folders.forEach(folder => {
+        if (folder !== username) {
+          const option = document.createElement("option");
+          option.value = folder;
+          option.textContent = formatFolderName(folder);
+          folderSelect.appendChild(option);
+        }
+      });
+    } catch (error) {
+      console.error("Error loading folder list for modal:", error);
+    }
+    return;
+  }
+  
+  try {
+    const response = await fetch("getFolderList.php");
+    let folders = await response.json();
+    if (Array.isArray(folders) && folders.length && typeof folders[0] === "object" && folders[0].folder) {
+      folders = folders.map(item => item.folder);
+    }
+    folders = folders.filter(folder => folder !== "root" && folder.toLowerCase() !== "trash");
+    
+    const rootOption = document.createElement("option");
+    rootOption.value = "root";
+    rootOption.textContent = "(Root)";
+    folderSelect.appendChild(rootOption);
+    
+    if (Array.isArray(folders) && folders.length > 0) {
+      folders.forEach(folder => {
+        const option = document.createElement("option");
+        option.value = folder;
+        option.textContent = folder;
+        folderSelect.appendChild(option);
+      });
+    }
+  } catch (error) {
+    console.error("Error loading folder list for modal:", error);
+  }
+}
+
+export function handleMoveSelected(e) {
+  e.preventDefault();
+  e.stopImmediatePropagation();
+  const checkboxes = document.querySelectorAll(".file-checkbox:checked");
+  if (checkboxes.length === 0) {
+    showToast("No files selected for moving.");
+    return;
+  }
+  window.filesToMove = Array.from(checkboxes).map(chk => chk.value);
+  document.getElementById("moveFilesModal").style.display = "block";
+  loadCopyMoveFolderListForModal("moveTargetFolder");
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  const cancelCopy = document.getElementById("cancelCopyFiles");
+  if (cancelCopy) {
+    cancelCopy.addEventListener("click", function () {
+      document.getElementById("copyFilesModal").style.display = "none";
+      window.filesToCopy = [];
+    });
+  }
+  const confirmCopy = document.getElementById("confirmCopyFiles");
+  if (confirmCopy) {
+    confirmCopy.addEventListener("click", function () {
+      const targetFolder = document.getElementById("copyTargetFolder").value;
+      if (!targetFolder) {
+        showToast("Please select a target folder for copying.", 5000);
+        return;
+      }
+      if (targetFolder === window.currentFolder) {
+        showToast("Error: Cannot copy files to the same folder.");
+        return;
+      }
+      fetch("copyFiles.php", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": window.csrfToken
+        },
+        body: JSON.stringify({
+          source: window.currentFolder,
+          files: window.filesToCopy,
+          destination: targetFolder
+        })
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            showToast("Selected files copied successfully!", 5000);
+            loadFileList(window.currentFolder);
+          } else {
+            showToast("Error: " + (data.error || "Could not copy files"), 5000);
+          }
+        })
+        .catch(error => console.error("Error copying files:", error))
+        .finally(() => {
+          document.getElementById("copyFilesModal").style.display = "none";
+          window.filesToCopy = [];
+        });
+    });
+  }
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+  const cancelMove = document.getElementById("cancelMoveFiles");
+  if (cancelMove) {
+    cancelMove.addEventListener("click", function () {
+      document.getElementById("moveFilesModal").style.display = "none";
+      window.filesToMove = [];
+    });
+  }
+  const confirmMove = document.getElementById("confirmMoveFiles");
+  if (confirmMove) {
+    confirmMove.addEventListener("click", function () {
+      const targetFolder = document.getElementById("moveTargetFolder").value;
+      if (!targetFolder) {
+        showToast("Please select a target folder for moving.");
+        return;
+      }
+      if (targetFolder === window.currentFolder) {
+        showToast("Error: Cannot move files to the same folder.");
+        return;
+      }
+      fetch("moveFiles.php", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": window.csrfToken
+        },
+        body: JSON.stringify({
+          source: window.currentFolder,
+          files: window.filesToMove,
+          destination: targetFolder
+        })
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            showToast("Selected files moved successfully!");
+            loadFileList(window.currentFolder);
+          } else {
+            showToast("Error: " + (data.error || "Could not move files"));
+          }
+        })
+        .catch(error => console.error("Error moving files:", error))
+        .finally(() => {
+          document.getElementById("moveFilesModal").style.display = "none";
+          window.filesToMove = [];
+        });
+    });
+  }
+});
+
+export function renameFile(oldName, folder) {
+  window.fileToRename = oldName;
+  window.fileFolder = folder || window.currentFolder || "root";
+  document.getElementById("newFileName").value = oldName;
+  document.getElementById("renameFileModal").style.display = "block";
+  setTimeout(() => {
+    const input = document.getElementById("newFileName");
+    input.focus();
+    const lastDot = oldName.lastIndexOf('.');
+    if (lastDot > 0) {
+      input.setSelectionRange(0, lastDot);
+    } else {
+      input.select();
+    }
+  }, 100);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const cancelBtn = document.getElementById("cancelRenameFile");
+  if (cancelBtn) {
+    cancelBtn.addEventListener("click", function () {
+      document.getElementById("renameFileModal").style.display = "none";
+      document.getElementById("newFileName").value = "";
+    });
+  }
+
+  const submitBtn = document.getElementById("submitRenameFile");
+  if (submitBtn) {
+    submitBtn.addEventListener("click", function () {
+      const newName = document.getElementById("newFileName").value.trim();
+      if (!newName || newName === window.fileToRename) {
+        document.getElementById("renameFileModal").style.display = "none";
+        return;
+      }
+      const folderUsed = window.fileFolder;
+      fetch("renameFile.php", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": window.csrfToken
+        },
+        body: JSON.stringify({ folder: folderUsed, oldName: window.fileToRename, newName: newName })
+      })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            showToast("File renamed successfully!");
+            loadFileList(folderUsed);
+          } else {
+            showToast("Error renaming file: " + (data.error || "Unknown error"));
+          }
+        })
+        .catch(error => {
+          console.error("Error renaming file:", error);
+          showToast("Error renaming file");
+        })
+        .finally(() => {
+          document.getElementById("renameFileModal").style.display = "none";
+          document.getElementById("newFileName").value = "";
+        });
+    });
+  }
+});
+
+// Expose initFileActions so it can be called from fileManager.js
+export function initFileActions() {
+  const deleteSelectedBtn = document.getElementById("deleteSelectedBtn");
+  if (deleteSelectedBtn) {
+    deleteSelectedBtn.replaceWith(deleteSelectedBtn.cloneNode(true));
+    document.getElementById("deleteSelectedBtn").addEventListener("click", handleDeleteSelected);
+  }
+  const copySelectedBtn = document.getElementById("copySelectedBtn");
+  if (copySelectedBtn) {
+    copySelectedBtn.replaceWith(copySelectedBtn.cloneNode(true));
+    document.getElementById("copySelectedBtn").addEventListener("click", handleCopySelected);
+  }
+  const moveSelectedBtn = document.getElementById("moveSelectedBtn");
+  if (moveSelectedBtn) {
+    moveSelectedBtn.replaceWith(moveSelectedBtn.cloneNode(true));
+    document.getElementById("moveSelectedBtn").addEventListener("click", handleMoveSelected);
+  }
+  const downloadZipBtn = document.getElementById("downloadZipBtn");
+  if (downloadZipBtn) {
+    downloadZipBtn.replaceWith(downloadZipBtn.cloneNode(true));
+    document.getElementById("downloadZipBtn").addEventListener("click", handleDownloadZipSelected);
+  }
+  const extractZipBtn = document.getElementById("extractZipBtn");
+  if (extractZipBtn) {
+    extractZipBtn.replaceWith(extractZipBtn.cloneNode(true));
+    document.getElementById("extractZipBtn").addEventListener("click", handleExtractZipSelected);
+  }
+}
+
+window.renameFile = renameFile;

js/fileDragDrop.js

@@ -0,0 +1,125 @@
+// dragDrop.js
+import { showToast } from './domUtils.js';
+import { loadFileList } from './fileListView.js';
+
+export function fileDragStartHandler(event) {
+  const row = event.currentTarget;
+  let fileNames = [];
+
+  const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
+  if (selectedCheckboxes.length > 1) {
+    selectedCheckboxes.forEach(chk => {
+      const parentRow = chk.closest("tr");
+      if (parentRow) {
+        const cell = parentRow.querySelector("td:nth-child(2)");
+        if (cell) {
+          let rawName = cell.textContent.trim();
+          const tagContainer = cell.querySelector(".tag-badges");
+          if (tagContainer) {
+            const tagText = tagContainer.innerText.trim();
+            if (rawName.endsWith(tagText)) {
+              rawName = rawName.slice(0, -tagText.length).trim();
+            }
+          }
+          fileNames.push(rawName);
+        }
+      }
+    });
+  } else {
+    const fileNameCell = row.querySelector("td:nth-child(2)");
+    if (fileNameCell) {
+      let rawName = fileNameCell.textContent.trim();
+      const tagContainer = fileNameCell.querySelector(".tag-badges");
+      if (tagContainer) {
+        const tagText = tagContainer.innerText.trim();
+        if (rawName.endsWith(tagText)) {
+          rawName = rawName.slice(0, -tagText.length).trim();
+        }
+      }
+      fileNames.push(rawName);
+    }
+  }
+
+  if (fileNames.length === 0) return;
+
+  const dragData = fileNames.length === 1 
+    ? { fileName: fileNames[0], sourceFolder: window.currentFolder || "root" }
+    : { files: fileNames, sourceFolder: window.currentFolder || "root" };
+
+  event.dataTransfer.setData("application/json", JSON.stringify(dragData));
+
+  let dragImage = document.createElement("div");
+  dragImage.style.display = "inline-flex";
+  dragImage.style.width = "auto";
+  dragImage.style.maxWidth = "fit-content";
+  dragImage.style.padding = "6px 10px";
+  dragImage.style.backgroundColor = "#333";
+  dragImage.style.color = "#fff";
+  dragImage.style.border = "1px solid #555";
+  dragImage.style.borderRadius = "4px";
+  dragImage.style.alignItems = "center";
+  dragImage.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.3)";
+  const icon = document.createElement("span");
+  icon.className = "material-icons";
+  icon.textContent = "insert_drive_file";
+  icon.style.marginRight = "4px";
+  const label = document.createElement("span");
+  label.textContent = fileNames.length === 1 ? fileNames[0] : fileNames.length + " files";
+  dragImage.appendChild(icon);
+  dragImage.appendChild(label);
+  
+  document.body.appendChild(dragImage);
+  event.dataTransfer.setDragImage(dragImage, 5, 5);
+  setTimeout(() => {
+    document.body.removeChild(dragImage);
+  }, 0);
+}
+
+export function folderDragOverHandler(event) {
+  event.preventDefault();
+  event.currentTarget.classList.add("drop-hover");
+}
+
+export function folderDragLeaveHandler(event) {
+  event.currentTarget.classList.remove("drop-hover");
+}
+
+export function folderDropHandler(event) {
+  event.preventDefault();
+  event.currentTarget.classList.remove("drop-hover");
+  const dropFolder = event.currentTarget.getAttribute("data-folder");
+  let dragData;
+  try {
+    dragData = JSON.parse(event.dataTransfer.getData("application/json"));
+  } catch (e) {
+    console.error("Invalid drag data");
+    return;
+  }
+  if (!dragData || !dragData.fileName) return;
+  fetch("moveFiles.php", {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
+    },
+    body: JSON.stringify({
+      source: dragData.sourceFolder,
+      files: [dragData.fileName],
+      destination: dropFolder
+    })
+  })
+    .then(response => response.json())
+    .then(data => {
+      if (data.success) {
+        showToast(`File "${dragData.fileName}" moved successfully to ${dropFolder}!`);
+        loadFileList(dragData.sourceFolder);
+      } else {
+        showToast("Error moving file: " + (data.error || "Unknown error"));
+      }
+    })
+    .catch(error => {
+      console.error("Error moving file via drop:", error);
+      showToast("Error moving file.");
+    });
+}

js/fileEditor.js

@@ -0,0 +1,178 @@
+// editor.js
+import { showToast } from './domUtils.js';
+import { loadFileList } from './fileListView.js';
+
+function getModeForFile(fileName) {
+  const ext = fileName.slice(fileName.lastIndexOf('.') + 1).toLowerCase();
+  switch (ext) {
+    case "css":
+      return "css";
+    case "json":
+      return { name: "javascript", json: true };
+    case "js":
+      return "javascript";
+    case "html":
+    case "htm":
+      return "text/html";
+    case "xml":
+      return "xml";
+    default:
+      return "text/plain";
+  }
+}
+export { getModeForFile };
+
+function adjustEditorSize() {
+  const modal = document.querySelector(".editor-modal");
+  if (modal && window.currentEditor) {
+    const headerHeight = 60; // adjust as needed
+    const availableHeight = modal.clientHeight - headerHeight;
+    window.currentEditor.setSize("100%", availableHeight + "px");
+  }
+}
+export { adjustEditorSize };
+
+function observeModalResize(modal) {
+  if (!modal) return;
+  const resizeObserver = new ResizeObserver(() => {
+    adjustEditorSize();
+  });
+  resizeObserver.observe(modal);
+}
+export { observeModalResize };
+
+export function editFile(fileName, folder) {
+  let existingEditor = document.getElementById("editorContainer");
+  if (existingEditor) {
+    existingEditor.remove();
+  }
+  const folderUsed = folder || window.currentFolder || "root";
+  const folderPath = folderUsed === "root"
+    ? "uploads/"
+    : "uploads/" + folderUsed.split("/").map(encodeURIComponent).join("/") + "/";
+  const fileUrl = folderPath + encodeURIComponent(fileName) + "?t=" + new Date().getTime();
+
+  fetch(fileUrl, { method: "HEAD" })
+    .then(response => {
+      const contentLength = response.headers.get("Content-Length");
+      if (contentLength !== null && parseInt(contentLength) > 10485760) {
+        showToast("This file is larger than 10 MB and cannot be edited in the browser.");
+        throw new Error("File too large.");
+      }
+      return fetch(fileUrl);
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error("HTTP error! Status: " + response.status);
+      }
+      return response.text();
+    })
+    .then(content => {
+      const modal = document.createElement("div");
+      modal.id = "editorContainer";
+      modal.classList.add("modal", "editor-modal");
+      modal.innerHTML = `
+      <div class="editor-header">
+        <h3 class="editor-title">Editing: ${fileName}</h3>
+        <div class="editor-controls">
+           <button id="decreaseFont" class="btn btn-sm btn-secondary">A-</button>
+           <button id="increaseFont" class="btn btn-sm btn-secondary">A+</button>
+        </div>
+        <button id="closeEditorX" class="editor-close-btn">&times;</button>
+      </div>
+      <textarea id="fileEditor" class="editor-textarea">${content}</textarea>
+      <div class="editor-footer">
+        <button id="saveBtn" class="btn btn-primary">Save</button>
+        <button id="closeBtn" class="btn btn-secondary">Close</button>
+      </div>
+    `;
+      document.body.appendChild(modal);
+      modal.style.display = "block";
+
+      const mode = getModeForFile(fileName);
+      const isDarkMode = document.body.classList.contains("dark-mode");
+      const theme = isDarkMode ? "material-darker" : "default";
+
+      const editor = CodeMirror.fromTextArea(document.getElementById("fileEditor"), {
+        lineNumbers: true,
+        mode: mode,
+        theme: theme,
+        viewportMargin: Infinity
+      });
+
+      window.currentEditor = editor;
+
+      setTimeout(() => {
+        adjustEditorSize();
+      }, 50);
+
+      observeModalResize(modal);
+
+      let currentFontSize = 14;
+      editor.getWrapperElement().style.fontSize = currentFontSize + "px";
+      editor.refresh();
+
+      document.getElementById("closeEditorX").addEventListener("click", function () {
+        modal.remove();
+      });
+
+      document.getElementById("decreaseFont").addEventListener("click", function () {
+        currentFontSize = Math.max(8, currentFontSize - 2);
+        editor.getWrapperElement().style.fontSize = currentFontSize + "px";
+        editor.refresh();
+      });
+
+      document.getElementById("increaseFont").addEventListener("click", function () {
+        currentFontSize = Math.min(32, currentFontSize + 2);
+        editor.getWrapperElement().style.fontSize = currentFontSize + "px";
+        editor.refresh();
+      });
+
+      document.getElementById("saveBtn").addEventListener("click", function () {
+        saveFile(fileName, folderUsed);
+      });
+
+      document.getElementById("closeBtn").addEventListener("click", function () {
+        modal.remove();
+      });
+
+      function updateEditorTheme() {
+        const isDarkMode = document.body.classList.contains("dark-mode");
+        editor.setOption("theme", isDarkMode ? "material-darker" : "default");
+      }
+
+      document.getElementById("darkModeToggle").addEventListener("click", updateEditorTheme);
+    })
+    .catch(error => console.error("Error loading file:", error));
+}
+
+
+export function saveFile(fileName, folder) {
+  const editor = window.currentEditor;
+  if (!editor) {
+    console.error("Editor not found!");
+    return;
+  }
+  const folderUsed = folder || window.currentFolder || "root";
+  const fileDataObj = {
+    fileName: fileName,
+    content: editor.getValue(),
+    folder: folderUsed
+  };
+  fetch("saveFile.php", {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": window.csrfToken
+    },
+    body: JSON.stringify(fileDataObj)
+  })
+    .then(response => response.json())
+    .then(result => {
+      showToast(result.success || result.error);
+      document.getElementById("editorContainer")?.remove();
+      loadFileList(folderUsed);
+    })
+    .catch(error => console.error("Error saving file:", error));
+}

js/fileListView.js

@@ -0,0 +1,419 @@
+// fileListView.js
+import {
+    escapeHTML,
+    debounce,
+    buildSearchAndPaginationControls,
+    buildFileTableHeader,
+    buildFileTableRow,
+    buildBottomControls,
+    updateFileActionButtons,
+    showToast,
+    updateRowHighlight,
+    toggleRowSelection,
+    attachEnterKeyListener
+} from './domUtils.js';
+
+import { bindFileListContextMenu } from './fileMenu.js';
+
+export let fileData = [];
+export let sortOrder = { column: "uploaded", ascending: true };
+
+window.itemsPerPage = window.itemsPerPage || 10;
+window.currentPage = window.currentPage || 1;
+window.viewMode = localStorage.getItem("viewMode") || "table"; // "table" or "gallery"
+
+// -----------------------------
+// VIEW MODE TOGGLE BUTTON & Helpers
+// -----------------------------
+export function createViewToggleButton() {
+    let toggleBtn = document.getElementById("toggleViewBtn");
+    if (!toggleBtn) {
+        toggleBtn = document.createElement("button");
+        toggleBtn.id = "toggleViewBtn";
+        toggleBtn.classList.add("btn", "btn-secondary");
+        const titleElem = document.getElementById("fileListTitle");
+        if (titleElem) {
+            titleElem.parentNode.insertBefore(toggleBtn, titleElem.nextSibling);
+        }
+    }
+    toggleBtn.textContent = window.viewMode === "gallery" ? "Switch to Table View" : "Switch to Gallery View";
+    toggleBtn.onclick = () => {
+        window.viewMode = window.viewMode === "gallery" ? "table" : "gallery";
+        localStorage.setItem("viewMode", window.viewMode);
+        loadFileList(window.currentFolder);
+        toggleBtn.textContent = window.viewMode === "gallery" ? "Switch to Table View" : "Switch to Gallery View";
+    };
+    return toggleBtn;
+}
+
+export function formatFolderName(folder) {
+    if (folder === "root") return "(Root)";
+    return folder
+        .replace(/[_-]+/g, " ")
+        .replace(/\b\w/g, char => char.toUpperCase());
+}
+
+// Expose inline DOM helpers.
+window.toggleRowSelection = toggleRowSelection;
+window.updateRowHighlight = updateRowHighlight;
+
+import { openTagModal, openMultiTagModal } from './fileTags.js';
+
+// -----------------------------
+// FILE LIST & VIEW RENDERING
+// -----------------------------
+export function loadFileList(folderParam) {
+    const folder = folderParam || "root";
+    const fileListContainer = document.getElementById("fileList");
+
+    fileListContainer.style.visibility = "hidden";
+    fileListContainer.innerHTML = "<div class='loader'>Loading files...</div>";
+
+    return fetch("getFileList.php?folder=" + encodeURIComponent(folder) + "&recursive=1&t=" + new Date().getTime())
+        .then(response => {
+            if (response.status === 401) {
+                showToast("Session expired. Please log in again.");
+                window.location.href = "logout.php";
+                throw new Error("Unauthorized");
+            }
+            return response.json();
+        })
+        .then(data => {
+            fileListContainer.innerHTML = "";
+            if (data.files && data.files.length > 0) {
+                data.files = data.files.map(file => {
+                    file.fullName = (file.path || file.name).trim().toLowerCase();
+                    file.editable = canEditFile(file.name);
+                    file.folder = folder;
+                    if (!file.type && /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) {
+                        file.type = "image";
+                    }
+                    return file;
+                });
+                fileData = data.files;
+                if (window.viewMode === "gallery") {
+                    renderGalleryView(folder);
+                } else {
+                    renderFileTable(folder);
+                }
+            } else {
+                fileListContainer.textContent = "No files found.";
+                updateFileActionButtons();
+            }
+            return data.files || [];
+        })
+        .catch(error => {
+            console.error("Error loading file list:", error);
+            if (error.message !== "Unauthorized") {
+                fileListContainer.textContent = "Error loading files.";
+            }
+            return [];
+        })
+        .finally(() => {
+            fileListContainer.style.visibility = "visible";
+        });
+}
+
+export function renderFileTable(folder) {
+    const fileListContainer = document.getElementById("fileList");
+    const searchTerm = (window.currentSearchTerm || "").toLowerCase();
+    const itemsPerPageSetting = parseInt(localStorage.getItem("itemsPerPage") || "10", 10);
+    let currentPage = window.currentPage || 1;
+
+    const filteredFiles = fileData.filter(file => {
+        const nameMatch = file.name.toLowerCase().includes(searchTerm);
+        const tagMatch = file.tags && file.tags.some(tag => tag.name.toLowerCase().includes(searchTerm));
+        return nameMatch || tagMatch;
+    });
+
+    const totalFiles = filteredFiles.length;
+    const totalPages = Math.ceil(totalFiles / itemsPerPageSetting);
+    if (currentPage > totalPages) {
+        currentPage = totalPages > 0 ? totalPages : 1;
+        window.currentPage = currentPage;
+    }
+
+    const folderPath = folder === "root"
+        ? "uploads/"
+        : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
+
+    const topControlsHTML = buildSearchAndPaginationControls({
+        currentPage,
+        totalPages,
+        searchTerm: window.currentSearchTerm || ""
+    });
+    let headerHTML = buildFileTableHeader(sortOrder);
+    const startIndex = (currentPage - 1) * itemsPerPageSetting;
+    const endIndex = Math.min(startIndex + itemsPerPageSetting, totalFiles);
+    let rowsHTML = "<tbody>";
+
+    if (totalFiles > 0) {
+        filteredFiles.slice(startIndex, endIndex).forEach((file, idx) => {
+            let rowHTML = buildFileTableRow(file, folderPath);
+            rowHTML = rowHTML.replace("<tr", `<tr id="file-row-${encodeURIComponent(file.name)}-${startIndex + idx}"`);
+
+            let tagBadgesHTML = "";
+            if (file.tags && file.tags.length > 0) {
+                tagBadgesHTML = '<div class="tag-badges" style="display:inline-block; margin-left:5px;">';
+                file.tags.forEach(tag => {
+                    tagBadgesHTML += `<span style="background-color: ${tag.color}; color: #fff; padding: 2px 4px; border-radius: 3px; margin-right: 2px; font-size: 0.8em;">${escapeHTML(tag.name)}</span>`;
+                });
+                tagBadgesHTML += "</div>";
+            }
+
+            rowHTML = rowHTML.replace(/(<td class="file-name-cell">)(.*?)(<\/td>)/, (match, p1, p2, p3) => {
+                return p1 + p2 + tagBadgesHTML + p3;
+            });
+
+            rowHTML = rowHTML.replace(/(<\/div>\s*<\/td>\s*<\/tr>)/, `<button class="share-btn btn btn-sm btn-secondary" data-file="${escapeHTML(file.name)}" title="Share">
+              <i class="material-icons">share</i>
+            </button>$1`);
+
+            rowsHTML += rowHTML;
+        });
+    } else {
+        rowsHTML += `<tr><td colspan="8">No files found.</td></tr>`;
+    }
+    rowsHTML += "</tbody></table>";
+    const bottomControlsHTML = buildBottomControls(itemsPerPageSetting);
+    fileListContainer.innerHTML = topControlsHTML + headerHTML + rowsHTML + bottomControlsHTML;
+
+    createViewToggleButton();
+
+    const newSearchInput = document.getElementById("searchInput");
+    if (newSearchInput) {
+        newSearchInput.addEventListener("input", debounce(function () {
+            window.currentSearchTerm = newSearchInput.value;
+            window.currentPage = 1;
+            renderFileTable(folder);
+            setTimeout(() => {
+                const freshInput = document.getElementById("searchInput");
+                if (freshInput) {
+                    freshInput.focus();
+                    const len = freshInput.value.length;
+                    freshInput.setSelectionRange(len, len);
+                }
+            }, 0);
+        }, 300));
+    }
+
+    document.querySelectorAll("table.table thead th[data-column]").forEach(cell => {
+        cell.addEventListener("click", function () {
+            const column = this.getAttribute("data-column");
+            sortFiles(column, folder);
+        });
+    });
+
+    document.querySelectorAll("#fileList .file-checkbox").forEach(checkbox => {
+        checkbox.addEventListener("change", function (e) {
+            updateRowHighlight(e.target);
+            updateFileActionButtons();
+        });
+    });
+
+    document.querySelectorAll(".share-btn").forEach(btn => {
+        btn.addEventListener("click", function (e) {
+            e.stopPropagation();
+            const fileName = this.getAttribute("data-file");
+            const file = fileData.find(f => f.name === fileName);
+            if (file) {
+                import('./filePreview.js').then(module => {
+                    module.openShareModal(file, folder);
+                });
+            }
+        });
+    });
+
+    updateFileActionButtons();
+
+    // Add drag-and-drop support for each table row.
+    document.querySelectorAll("#fileList tbody tr").forEach(row => {
+        row.setAttribute("draggable", "true");
+        import('./fileDragDrop.js').then(module => {
+            row.addEventListener("dragstart", module.fileDragStartHandler);
+        });
+    });
+
+    // Prevent clicks on these buttons from selecting the row
+    document.querySelectorAll(".download-btn, .edit-btn, .rename-btn").forEach(btn => {
+        btn.addEventListener("click", e => e.stopPropagation());
+    });
+
+    // re‑bind context menu
+    bindFileListContextMenu();
+}
+
+export function renderGalleryView(folder) {
+    const fileListContainer = document.getElementById("fileList");
+    const searchTerm = (window.currentSearchTerm || "").toLowerCase();
+    const filteredFiles = fileData.filter(file => {
+        return file.name.toLowerCase().includes(searchTerm) ||
+            (file.tags && file.tags.some(tag => tag.name.toLowerCase().includes(searchTerm)));
+    });
+
+    const folderPath = folder === "root"
+        ? "uploads/"
+        : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
+    const gridStyle = "display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px;";
+    let galleryHTML = `<div class="gallery-container" style="${gridStyle}">`;
+
+    filteredFiles.forEach((file) => {
+        let thumbnail;
+        if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) {
+            thumbnail = `<img src="${folderPath + encodeURIComponent(file.name)}?t=${new Date().getTime()}" class="gallery-thumbnail" alt="${escapeHTML(file.name)}" style="max-width: 100%; max-height: 150px; 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>`;
+        } else {
+            thumbnail = `<span class="material-icons gallery-icon">insert_drive_file</span>`;
+        }
+
+        let tagBadgesHTML = "";
+        if (file.tags && file.tags.length > 0) {
+            tagBadgesHTML = `<div class="tag-badges" style="margin-top:4px;">`;
+            file.tags.forEach(tag => {
+                tagBadgesHTML += `<span style="background-color: ${tag.color}; color: #fff; padding: 2px 4px; border-radius: 3px; margin-right: 2px; font-size: 0.8em;">${escapeHTML(tag.name)}</span>`;
+            });
+            tagBadgesHTML += `</div>`;
+        }
+
+        galleryHTML += `<div class="gallery-card" style="border: 1px solid #ccc; padding: 5px; text-align: center;">
+        <div class="gallery-preview" style="cursor: pointer;" onclick="previewFile('${folderPath + encodeURIComponent(file.name)}?t=' + new Date().getTime(), '${file.name}')">
+          ${thumbnail}
+        </div>
+        <div class="gallery-info" style="margin-top: 5px;">
+          <span class="gallery-file-name" style="display: block;">${escapeHTML(file.name)}</span>
+          ${tagBadgesHTML}
+          <div class="button-wrap" style="display: flex; justify-content: center; gap: 5px;">
+            <a class="btn btn-sm btn-success download-btn" 
+               href="download.php?folder=${encodeURIComponent(file.folder || 'root')}&file=${encodeURIComponent(file.name)}" 
+               title="Download">
+              <i class="material-icons">file_download</i>
+            </a>
+            ${file.editable ? `
+              <button class="btn btn-sm edit-btn" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})' title="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")})' title="Rename">
+               <i class="material-icons">drive_file_rename_outline</i>
+            </button>
+            <button class="btn btn-sm btn-secondary share-btn" data-file="${escapeHTML(file.name)}" title="Share">
+               <i class="material-icons">share</i>
+            </button>
+          </div>
+        </div>
+      </div>`;
+    });
+
+    galleryHTML += "</div>";
+
+    fileListContainer.innerHTML = galleryHTML;
+
+    createViewToggleButton();
+    updateFileActionButtons();
+
+    // Bind share button clicks
+    document.querySelectorAll(".share-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            const fileName = btn.getAttribute("data-file");
+            const file = fileData.find(f => f.name === fileName);
+            import('./filePreview.js').then(module => {
+                module.openShareModal(file, folder);
+            });
+        });
+    });
+}
+
+export function sortFiles(column, folder) {
+    if (sortOrder.column === column) {
+        sortOrder.ascending = !sortOrder.ascending;
+    } else {
+        sortOrder.column = column;
+        sortOrder.ascending = true;
+    }
+    fileData.sort((a, b) => {
+        let valA = a[column] || "";
+        let valB = b[column] || "";
+        if (column === "modified" || column === "uploaded") {
+            const parsedA = parseCustomDate(valA);
+            const parsedB = parseCustomDate(valB);
+            valA = parsedA;
+            valB = parsedB;
+        } else if (typeof valA === "string") {
+            valA = valA.toLowerCase();
+            valB = valB.toLowerCase();
+        }
+        if (valA < valB) return sortOrder.ascending ? -1 : 1;
+        if (valA > valB) return sortOrder.ascending ? 1 : -1;
+        return 0;
+    });
+    if (window.viewMode === "gallery") {
+        renderGalleryView(folder);
+    } else {
+        renderFileTable(folder);
+    }
+}
+
+function parseCustomDate(dateStr) {
+    dateStr = dateStr.replace(/\s+/g, " ").trim();
+    const parts = dateStr.split(" ");
+    if (parts.length !== 2) {
+        return new Date(dateStr).getTime();
+    }
+    const datePart = parts[0];
+    const timePart = parts[1];
+    const dateComponents = datePart.split("/");
+    if (dateComponents.length !== 3) {
+        return new Date(dateStr).getTime();
+    }
+    let month = parseInt(dateComponents[0], 10);
+    let day = parseInt(dateComponents[1], 10);
+    let year = parseInt(dateComponents[2], 10);
+    if (year < 100) {
+        year += 2000;
+    }
+    const timeRegex = /^(\d{1,2}):(\d{2})(AM|PM)$/i;
+    const match = timePart.match(timeRegex);
+    if (!match) {
+        return new Date(dateStr).getTime();
+    }
+    let hour = parseInt(match[1], 10);
+    const minute = parseInt(match[2], 10);
+    const period = match[3].toUpperCase();
+    if (period === "PM" && hour !== 12) {
+        hour += 12;
+    }
+    if (period === "AM" && hour === 12) {
+        hour = 0;
+    }
+    return new Date(year, month - 1, day, hour, minute).getTime();
+}
+
+export function canEditFile(fileName) {
+    const allowedExtensions = [
+        "txt", "html", "htm", "css", "js", "json", "xml",
+        "md", "py", "ini", "csv", "log", "conf", "config", "bat",
+        "rtf", "doc", "docx"
+    ];
+    const ext = fileName.slice(fileName.lastIndexOf('.') + 1).toLowerCase();
+    return allowedExtensions.includes(ext);
+}
+
+// Expose global functions for pagination and preview.
+window.changePage = function (newPage) {
+    window.currentPage = newPage;
+    renderFileTable(window.currentFolder);
+};
+window.changeItemsPerPage = function (newCount) {
+    window.itemsPerPage = parseInt(newCount);
+    window.currentPage = 1;
+    renderFileTable(window.currentFolder);
+};
+
+// fileListView.js (bottom)
+
+window.loadFileList = loadFileList;
+window.renderFileTable = renderFileTable;
+window.renderGalleryView = renderGalleryView;
+window.sortFiles = sortFiles;

js/fileManager.js

@@ -0,0 +1,40 @@
+// fileManager.js
+import './fileListView.js';
+import './filePreview.js';
+import './fileEditor.js';
+import './fileDragDrop.js';
+import './fileMenu.js';
+import { initFileActions } from './fileActions.js';
+
+// Initialize file action buttons.
+document.addEventListener("DOMContentLoaded", function () {
+  initFileActions();
+});
+
+// Attach folder drag-and-drop support for folder tree nodes.
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll(".folder-option").forEach(el => {
+    import('./fileDragDrop.js').then(module => {
+      el.addEventListener("dragover", module.folderDragOverHandler);
+      el.addEventListener("dragleave", module.folderDragLeaveHandler);
+      el.addEventListener("drop", module.folderDropHandler);
+    });
+  });
+});
+
+// Global keydown listener for file deletion via Delete/Backspace.
+document.addEventListener("keydown", function(e) {
+  const tag = e.target.tagName.toLowerCase();
+  if (tag === "input" || tag === "textarea" || e.target.isContentEditable) {
+    return;
+  }
+  if (e.key === "Delete" || e.key === "Backspace" || e.keyCode === 46 || e.keyCode === 8) {
+    const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
+    if (selectedCheckboxes.length > 0) {
+      e.preventDefault();
+      import('./fileActions.js').then(module => {
+        module.handleDeleteSelected(new Event("click"));
+      });
+    }
+  }
+});

js/fileMenu.js

@@ -0,0 +1,155 @@
+// contextMenu.js
+import { updateRowHighlight, showToast } from './domUtils.js';
+import { handleDeleteSelected, handleCopySelected, handleMoveSelected, handleDownloadZipSelected, handleExtractZipSelected, renameFile } from './fileActions.js';
+import { previewFile } from './filePreview.js';
+import { editFile } from './fileEditor.js';
+import { canEditFile, fileData } from './fileListView.js';
+import { openTagModal, openMultiTagModal } from './fileTags.js';
+
+export function showFileContextMenu(x, y, menuItems) {
+  let menu = document.getElementById("fileContextMenu");
+  if (!menu) {
+    menu = document.createElement("div");
+    menu.id = "fileContextMenu";
+    menu.style.position = "fixed";
+    menu.style.backgroundColor = "#fff";
+    menu.style.border = "1px solid #ccc";
+    menu.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.2)";
+    menu.style.zIndex = "9999";
+    menu.style.padding = "5px 0";
+    menu.style.minWidth = "150px";
+    document.body.appendChild(menu);
+  }
+  menu.innerHTML = "";
+  menuItems.forEach(item => {
+    let menuItem = document.createElement("div");
+    menuItem.textContent = item.label;
+    menuItem.style.padding = "5px 15px";
+    menuItem.style.cursor = "pointer";
+    menuItem.addEventListener("mouseover", () => {
+      menuItem.style.backgroundColor = document.body.classList.contains("dark-mode") ? "#444" : "#f0f0f0";
+    });
+    menuItem.addEventListener("mouseout", () => {
+      menuItem.style.backgroundColor = "";
+    });
+    menuItem.addEventListener("click", () => {
+      item.action();
+      hideFileContextMenu();
+    });
+    menu.appendChild(menuItem);
+  });
+  
+  menu.style.left = x + "px";
+  menu.style.top = y + "px";
+  menu.style.display = "block";
+  
+  const menuRect = menu.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  if (menuRect.bottom > viewportHeight) {
+    let newTop = viewportHeight - menuRect.height;
+    if (newTop < 0) newTop = 0;
+    menu.style.top = newTop + "px";
+  }
+}
+
+export function hideFileContextMenu() {
+  const menu = document.getElementById("fileContextMenu");
+  if (menu) {
+    menu.style.display = "none";
+  }
+}
+
+export function fileListContextMenuHandler(e) {
+  e.preventDefault();
+  
+  let row = e.target.closest("tr");
+  if (row) {
+    const checkbox = row.querySelector(".file-checkbox");
+    if (checkbox && !checkbox.checked) {
+      checkbox.checked = true;
+      updateRowHighlight(checkbox);
+    }
+  }
+  
+  const selected = Array.from(document.querySelectorAll("#fileList .file-checkbox:checked")).map(chk => chk.value);
+  
+  let menuItems = [
+    { label: "Delete Selected", action: () => { handleDeleteSelected(new Event("click")); } },
+    { label: "Copy Selected", action: () => { handleCopySelected(new Event("click")); } },
+    { label: "Move Selected", action: () => { handleMoveSelected(new Event("click")); } },
+    { label: "Download Zip", action: () => { handleDownloadZipSelected(new Event("click")); } }
+  ];
+  
+  if (selected.some(name => name.toLowerCase().endsWith(".zip"))) {
+    menuItems.push({
+      label: "Extract Zip",
+      action: () => { handleExtractZipSelected(new Event("click")); }
+    });
+  }
+  
+  if (selected.length > 1) {
+    menuItems.push({
+      label: "Tag Selected",
+      action: () => {
+        const files = fileData.filter(f => selected.includes(f.name));
+        openMultiTagModal(files);
+      }
+    });
+  }
+  else if (selected.length === 1) {
+    const file = fileData.find(f => f.name === selected[0]);
+    
+    menuItems.push({
+      label: "Preview",
+      action: () => {
+        const folder = window.currentFolder || "root";
+        const folderPath = folder === "root"
+          ? "uploads/"
+          : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
+        previewFile(folderPath + encodeURIComponent(file.name) + "?t=" + new Date().getTime(), file.name);
+      }
+    });
+    
+    if (canEditFile(file.name)) {
+      menuItems.push({
+        label: "Edit",
+        action: () => { editFile(selected[0], window.currentFolder); }
+      });
+    }
+    
+    menuItems.push({
+      label: "Rename",
+      action: () => { renameFile(selected[0], window.currentFolder); }
+    });
+    
+    menuItems.push({
+      label: "Tag File",
+      action: () => { openTagModal(file); }
+    });
+  }
+  
+  showFileContextMenu(e.clientX, e.clientY, menuItems);
+}
+
+export function bindFileListContextMenu() {
+  const fileListContainer = document.getElementById("fileList");
+  if (fileListContainer) {
+    fileListContainer.oncontextmenu = fileListContextMenuHandler;
+  }
+}
+
+document.addEventListener("click", function(e) {
+  const menu = document.getElementById("fileContextMenu");
+  if (menu && menu.style.display === "block") {
+    hideFileContextMenu();
+  }
+});
+
+// Rebind context menu after file table render.
+(function() {
+  const originalRenderFileTable = window.renderFileTable;
+  window.renderFileTable = function(folder) {
+    originalRenderFileTable(folder);
+    bindFileListContextMenu();
+  };
+})();

js/filePreview.js

@@ -0,0 +1,257 @@
+// filePreview.js
+import { escapeHTML, showToast } from './domUtils.js';
+import { fileData } from './fileListView.js';
+
+export function openShareModal(file, folder) {
+  const existing = document.getElementById("shareModal");
+  if (existing) existing.remove();
+
+  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-header">
+        <h3>Share File: ${escapeHTML(file.name)}</h3>
+        <span class="close-image-modal" id="closeShareModal" title="Close">&times;</span>
+      </div>
+      <div class="modal-body">
+        <p>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>
+        <p>Password (optional):</p>
+        <input type="text" id="sharePassword" placeholder="No password by default" style="width: 100%;"/>
+        <br>
+        <button id="generateShareLinkBtn" class="btn btn-primary" style="margin-top:10px;">Generate Share Link</button>
+        <div id="shareLinkDisplay" style="margin-top: 10px; display:none;">
+          <p>Shareable Link:</p>
+          <input type="text" id="shareLinkInput" readonly style="width:100%;"/>
+          <button id="copyShareLinkBtn" class="btn btn-primary" style="margin-top:5px;">Copy Link</button>
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+  modal.style.display = "block";
+
+  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("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
+      })
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.token) {
+          let shareEndpoint = document.querySelector('meta[name="share-url"]')
+            ? document.querySelector('meta[name="share-url"]').getAttribute('content')
+            : (window.SHARE_URL || "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";
+        } else {
+          showToast("Error generating share link: " + (data.error || "Unknown error"));
+        }
+      })
+      .catch(err => {
+        console.error("Error generating share link:", err);
+        showToast("Error generating share link.");
+      });
+  });
+
+  document.getElementById("copyShareLinkBtn").addEventListener("click", () => {
+    const input = document.getElementById("shareLinkInput");
+    input.select();
+    document.execCommand("copy");
+    showToast("Link copied to clipboard!");
+  });
+}
+
+export function previewFile(fileUrl, fileName) {
+  let modal = document.getElementById("filePreviewModal");
+  if (!modal) {
+    modal = document.createElement("div");
+    modal.id = "filePreviewModal";
+    Object.assign(modal.style, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      width: "100vw",
+      height: "100vh",
+      backgroundColor: "rgba(0,0,0,0.7)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: "1000"
+    });
+    modal.innerHTML = `
+      <div class="modal-content image-preview-modal-content" style="position: relative; max-width: 90vw; max-height: 90vh;">
+        <span id="closeFileModal" class="close-image-modal" style="position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer;">&times;</span>
+        <h4 class="image-modal-header"></h4>
+        <div class="file-preview-container" style="position: relative; text-align: center;"></div>
+      </div>`;
+    document.body.appendChild(modal);
+
+    function closeModal() {
+      const mediaElements = modal.querySelectorAll("video, audio");
+      mediaElements.forEach(media => {
+        media.pause();
+        if (media.tagName.toLowerCase() !== 'video') {
+          try {
+            media.currentTime = 0;
+          } catch(e) { }
+        }
+      });
+      modal.style.display = "none";
+    }
+
+    document.getElementById("closeFileModal").addEventListener("click", closeModal);
+    modal.addEventListener("click", function (e) {
+      if (e.target === modal) {
+        closeModal();
+      }
+    });
+  }
+  modal.querySelector("h4").textContent = fileName;
+  const container = modal.querySelector(".file-preview-container");
+  container.innerHTML = "";
+
+  const extension = fileName.split('.').pop().toLowerCase();
+  const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(fileName);
+  if (isImage) {
+    const img = document.createElement("img");
+    img.src = fileUrl;
+    img.className = "image-modal-img";
+    img.style.maxWidth = "80vw";
+    img.style.maxHeight = "80vh";
+    container.appendChild(img);
+
+    const images = fileData.filter(file => /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name));
+    if (images.length > 1) {
+      modal.galleryImages = images;
+      modal.galleryCurrentIndex = images.findIndex(f => f.name === fileName);
+
+      const prevBtn = document.createElement("button");
+      prevBtn.textContent = "‹";
+      prevBtn.className = "gallery-nav-btn";
+      prevBtn.style.cssText = "position: absolute; top: 50%; left: 10px; transform: translateY(-50%); background: transparent; border: none; color: white; font-size: 48px; cursor: pointer;";
+      prevBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        modal.galleryCurrentIndex = (modal.galleryCurrentIndex - 1 + modal.galleryImages.length) % modal.galleryImages.length;
+        let newFile = modal.galleryImages[modal.galleryCurrentIndex];
+        modal.querySelector("h4").textContent = newFile.name;
+        img.src = ((window.currentFolder === "root")
+          ? "uploads/"
+          : "uploads/" + window.currentFolder.split("/").map(encodeURIComponent).join("/") + "/")
+          + encodeURIComponent(newFile.name) + "?t=" + new Date().getTime();
+      });
+      const nextBtn = document.createElement("button");
+      nextBtn.textContent = "›";
+      nextBtn.className = "gallery-nav-btn";
+      nextBtn.style.cssText = "position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: transparent; border: none; color: white; font-size: 48px; cursor: pointer;";
+      nextBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        modal.galleryCurrentIndex = (modal.galleryCurrentIndex + 1) % modal.galleryImages.length;
+        let newFile = modal.galleryImages[modal.galleryCurrentIndex];
+        modal.querySelector("h4").textContent = newFile.name;
+        img.src = ((window.currentFolder === "root")
+          ? "uploads/"
+          : "uploads/" + window.currentFolder.split("/").map(encodeURIComponent).join("/") + "/")
+          + encodeURIComponent(newFile.name) + "?t=" + new Date().getTime();
+      });
+      container.appendChild(prevBtn);
+      container.appendChild(nextBtn);
+    }
+  } else {
+    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)) {
+      const video = document.createElement("video");
+      video.src = fileUrl;
+      video.controls = true;
+      video.className = "image-modal-img";
+    
+      const progressKey = 'videoProgress-' + fileUrl;
+    
+      video.addEventListener("loadedmetadata", () => {
+        const savedTime = localStorage.getItem(progressKey);
+        if (savedTime) {
+          video.currentTime = parseFloat(savedTime);
+        }
+      });
+    
+      video.addEventListener("timeupdate", () => {
+        localStorage.setItem(progressKey, video.currentTime);
+      });
+
+      video.addEventListener("ended", () => {
+        localStorage.removeItem(progressKey);
+      });
+    
+      container.appendChild(video);
+
+    } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(fileName)) {
+      const audio = document.createElement("audio");
+      audio.src = fileUrl;
+      audio.controls = true;
+      audio.className = "audio-modal";
+      audio.style.maxWidth = "80vw";
+      container.appendChild(audio);
+    } else {
+      container.textContent = "Preview not available for this file type.";
+    }
+  }
+  modal.style.display = "flex";
+}
+
+// Added to preserve the original functionality.
+export function displayFilePreview(file, container) {
+  const actualFile = file.file || file;
+  container.style.display = "inline-block";
+  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(actualFile.name)) {
+    const img = document.createElement("img");
+    img.src = URL.createObjectURL(actualFile);
+    img.classList.add("file-preview-img");
+    container.innerHTML = "";
+    container.appendChild(img);
+  } else {
+    container.innerHTML = "";
+    const iconSpan = document.createElement("span");
+    iconSpan.classList.add("material-icons", "file-icon");
+    iconSpan.textContent = "insert_drive_file";
+    container.appendChild(iconSpan);
+  }
+}
+
+window.previewFile = previewFile;
+window.openShareModal = openShareModal;

js/folderManager.js

@@ -1,6 +1,6 @@
 // folderManager.js
 
-import { loadFileList } from './fileManager.js';
+import { loadFileList } from './fileListView.js';
 import { showToast, escapeHTML, attachEnterKeyListener } from './domUtils.js';
 
 /* ----------------------

js/main.js

@@ -0,0 +1,182 @@
+import { sendRequest } from './networkUtils.js';
+import { toggleVisibility, toggleAllCheckboxes, updateFileActionButtons, showToast } from './domUtils.js';
+import { loadFolderTree } from './folderManager.js';
+import { initUpload } from './upload.js';
+import { initAuth, checkAuthentication } from './auth.js';
+import { setupTrashRestoreDelete } from './trashRestoreDelete.js';
+import { initDragAndDrop, loadSidebarOrder, loadHeaderOrder } from './dragAndDrop.js';
+import { initTagSearch, openTagModal, filterFilesByTag } from './fileTags.js';
+import { displayFilePreview } from './filePreview.js';
+import { loadFileList } from './fileListView.js';
+import { initFileActions, renameFile } from './fileActions.js';
+import { editFile, saveFile } from './fileEditor.js';
+
+function loadCsrfTokenWithRetry(retries = 3, delay = 1000) {
+  return fetch('token.php', { credentials: 'include' })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error("Token fetch failed with status: " + response.status);
+      }
+      return response.json();
+    })
+    .then(data => {
+      // Set global variables.
+      window.csrfToken = data.csrf_token;
+      window.SHARE_URL = data.share_url;
+
+      // Update (or create) the CSRF meta tag.
+      let metaCSRF = document.querySelector('meta[name="csrf-token"]');
+      if (!metaCSRF) {
+        metaCSRF = document.createElement('meta');
+        metaCSRF.name = 'csrf-token';
+        document.head.appendChild(metaCSRF);
+      }
+      metaCSRF.setAttribute('content', data.csrf_token);
+
+      // Update (or create) the share URL meta tag.
+      let metaShare = document.querySelector('meta[name="share-url"]');
+      if (!metaShare) {
+        metaShare = document.createElement('meta');
+        metaShare.name = 'share-url';
+        document.head.appendChild(metaShare);
+      }
+      metaShare.setAttribute('content', data.share_url);
+
+      return data;
+    })
+    .catch(error => {
+      if (retries > 0) {
+        console.warn(`CSRF token load failed. Retrying in ${delay}ms... (${retries} retries left)`, error);
+        return new Promise(resolve => setTimeout(resolve, delay))
+          .then(() => loadCsrfTokenWithRetry(retries - 1, delay * 2));
+      }
+      console.error("Failed to load CSRF token after retries.", error);
+      throw error;
+    });
+}
+
+// Expose functions for inline handlers.
+window.sendRequest = sendRequest;
+window.toggleVisibility = toggleVisibility;
+window.toggleAllCheckboxes = toggleAllCheckboxes;
+window.editFile = editFile;
+window.saveFile = saveFile;
+window.renameFile = renameFile;
+
+// Global variable for the current folder.
+window.currentFolder = "root";
+
+document.addEventListener("DOMContentLoaded", function () {
+  // First, load the CSRF token (with retry).
+  loadCsrfTokenWithRetry().then(() => {
+    // Once CSRF token is loaded, initialize authentication.
+    initAuth();
+
+    // Continue with initializations that rely on a valid CSRF token:
+    checkAuthentication().then(authenticated => {
+      if (authenticated) {
+        window.currentFolder = "root";
+        initTagSearch();
+        loadFileList(window.currentFolder);
+        initDragAndDrop();
+        loadSidebarOrder();
+        loadHeaderOrder();
+        initFileActions();
+        initUpload();
+        loadFolderTree();
+        setupTrashRestoreDelete();
+
+        const helpBtn = document.getElementById("folderHelpBtn");
+        const helpTooltip = document.getElementById("folderHelpTooltip");
+        helpBtn.addEventListener("click", function () {
+          // Toggle display of the tooltip.
+          if (helpTooltip.style.display === "none" || helpTooltip.style.display === "") {
+            helpTooltip.style.display = "block";
+          } else {
+            helpTooltip.style.display = "none";
+          }
+        });
+      } else {
+        console.warn("User not authenticated. Data loading deferred.");
+      }
+    });
+
+    // Other DOM initialization that can happen after CSRF is ready.
+    const newPasswordInput = document.getElementById("newPassword");
+    if (newPasswordInput) {
+      newPasswordInput.addEventListener("input", function() {
+        console.log("newPassword input event:", this.value);
+      });
+    } else {
+      console.error("newPassword input not found!");
+    }
+
+    // --- Dark Mode Persistence ---
+    const darkModeToggle = document.getElementById("darkModeToggle");
+    const storedDarkMode = localStorage.getItem("darkMode");
+
+    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) {
+      darkModeToggle.textContent = document.body.classList.contains("dark-mode")
+        ? "Light Mode"
+        : "Dark Mode";
+
+      darkModeToggle.addEventListener("click", function () {
+        if (document.body.classList.contains("dark-mode")) {
+          document.body.classList.remove("dark-mode");
+          localStorage.setItem("darkMode", "false");
+          darkModeToggle.textContent = "Dark Mode";
+        } else {
+          document.body.classList.add("dark-mode");
+          localStorage.setItem("darkMode", "true");
+          darkModeToggle.textContent = "Light Mode";
+        }
+      });
+    }
+
+    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 = "Light Mode";
+        } else {
+          document.body.classList.remove("dark-mode");
+          if (darkModeToggle) darkModeToggle.textContent = "Dark Mode";
+        }
+      });
+    }
+    // --- End Dark Mode Persistence ---
+
+    const message = sessionStorage.getItem("welcomeMessage");
+    if (message) {
+      showToast(message);
+      sessionStorage.removeItem("welcomeMessage");
+    }
+  }).catch(error => {
+    console.error("Initialization halted due to CSRF token load failure.", error);
+  });
+
+  // --- Auto-scroll During Drag ---
+  // Adjust these values as needed:
+  const SCROLL_THRESHOLD = 50; // pixels from edge to start scrolling
+  const SCROLL_SPEED = 20;     // pixels to scroll per event
+
+  document.addEventListener("dragover", function (e) {
+    if (e.clientY < SCROLL_THRESHOLD) {
+      window.scrollBy(0, -SCROLL_SPEED);
+    } else if (e.clientY > window.innerHeight - SCROLL_THRESHOLD) {
+      window.scrollBy(0, SCROLL_SPEED);
+    }
+  });
+});

js/trashRestoreDelete.js

@@ -1,7 +1,7 @@
 // trashRestoreDelete.js
 import { sendRequest } from './networkUtils.js';
 import { toggleVisibility, showToast } from './domUtils.js';
-import { loadFileList } from './fileManager.js';
+import { loadFileList } from './fileListView.js';
 import { loadFolderTree } from './folderManager.js';
 
 function showConfirm(message, onConfirm) {

js/upload.js

@@ -1,6 +1,8 @@
-import { loadFileList, displayFilePreview, initFileActions } from './fileManager.js';
+import { initFileActions } from './fileActions.js';
+import { displayFilePreview } from './filePreview.js';
 import { showToast, escapeHTML } from './domUtils.js';
 import { loadFolderTree } from './folderManager.js';
+import { loadFileList } from './fileListView.js';
 
 /* -----------------------------------------------------
    Helpers for Drag–and–Drop Folder Uploads (Original Code)
@@ -497,11 +499,9 @@ function initResumableUpload() {
   resumableInstance.on("fileSuccess", function(file, message) {
     const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
     if (li && li.progressBar) {
-      // Clear any merging indicators.
       li.progressBar.style.width = "100%";
       li.progressBar.innerText = "Done";
-      
-      // Optionally hide the pause/resume and remove buttons.
+      // Hide pause/resume and remove buttons for successful files.
       const pauseResumeBtn = li.querySelector(".pause-resume-btn");
       if (pauseResumeBtn) {
         pauseResumeBtn.style.display = "none";
@@ -510,9 +510,17 @@ function initResumableUpload() {
       if (removeBtn) {
         removeBtn.style.display = "none";
       }
+      // Schedule removal of the file entry after 5 seconds.
+      setTimeout(() => {
+        li.remove();
+        window.selectedFiles = window.selectedFiles.filter(f => f.uniqueIdentifier !== file.uniqueIdentifier);
+        updateFileInfoCount();
+      }, 5000);
     }
     loadFileList(window.currentFolder);
   });
+  
+
 
   resumableInstance.on("fileError", function (file, message) {
     const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
@@ -521,7 +529,6 @@ function initResumableUpload() {
     }
     // Mark file as errored so that the pause/resume button acts as a restart button.
     file.isError = true;
-    // Change the pause/resume button to show a restart icon.
     const pauseResumeBtn = li ? li.querySelector(".pause-resume-btn") : null;
     if (pauseResumeBtn) {
       pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">replay</span>';
@@ -531,17 +538,17 @@ function initResumableUpload() {
   });
 
   resumableInstance.on("complete", function () {
-    // Check if any file in the current selection is marked with an error.
+    // If any file is marked with an error, leave the list intact.
     const hasError = window.selectedFiles.some(f => f.isError);
     if (!hasError) {
-      // All files succeeded; clear the file list after 5 seconds.
+      // All files succeeded—clear the file input and progress container after 5 seconds.
       setTimeout(() => {
+        const fileInput = document.getElementById("file");
         if (fileInput) fileInput.value = "";
         const progressContainer = document.getElementById("uploadProgressContainer");
         progressContainer.innerHTML = "";
         window.selectedFiles = [];
         adjustFolderHelpExpansionClosed();
-        window.addEventListener("resize", adjustFolderHelpExpansionClosed);
         const fileInfoContainer = document.getElementById("fileInfoContainer");
         if (fileInfoContainer) {
           fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
@@ -668,40 +675,39 @@ function submitFiles(allFiles) {
       .then(serverFiles => {
         initFileActions();
         serverFiles = (serverFiles || []).map(item => item.name.trim().toLowerCase());
-        let allSucceeded = true;
+        let overallSuccess = true;
         allFiles.forEach(file => {
-          // For files without a relative path
-          if ((file.webkitRelativePath || file.customRelativePath || "").trim() === "") {
-            const clientFileName = file.name.trim().toLowerCase();
-            if (!uploadResults[file.uploadIndex] || !serverFiles.includes(clientFileName)) {
-              const li = progressElements[file.uploadIndex];
-              if (li) {
-                li.progressBar.innerText = "Error";
-              }
-              allSucceeded = false;
+          const clientFileName = file.name.trim().toLowerCase();
+          const li = progressElements[file.uploadIndex];
+          if (!uploadResults[file.uploadIndex] || !serverFiles.includes(clientFileName)) {
+            if (li) {
+              li.progressBar.innerText = "Error";
             }
+            overallSuccess = false;
+          } else if (li) {
+            // Schedule removal of successful file entry after 5 seconds.
+            setTimeout(() => {
+              li.remove();
+              delete progressElements[file.uploadIndex];
+              updateFileInfoCount();
+              const progressContainer = document.getElementById("uploadProgressContainer");
+              if (progressContainer && progressContainer.querySelectorAll("li.upload-progress-item").length === 0) {
+                const fileInput = document.getElementById("file");
+                if (fileInput) fileInput.value = "";
+                progressContainer.innerHTML = "";
+                adjustFolderHelpExpansionClosed();
+                const fileInfoContainer = document.getElementById("fileInfoContainer");
+                if (fileInfoContainer) {
+                  fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
+                }
+                const dropArea = document.getElementById("uploadDropArea");
+                if (dropArea) setDropAreaDefault();
+              }
+            }, 5000);
           }
         });
         
-        if (allSucceeded) {
-          // All files succeeded—clear the list after 5 seconds.
-          setTimeout(() => {
-            if (fileInput) fileInput.value = "";
-            const removeBtns = progressContainer.querySelectorAll("button.remove-file-btn");
-            removeBtns.forEach(btn => btn.style.display = "none");
-            progressContainer.innerHTML = "";
-            window.selectedFiles = [];
-            adjustFolderHelpExpansionClosed();
-            window.addEventListener("resize", adjustFolderHelpExpansionClosed);
-            const fileInfoContainer = document.getElementById("fileInfoContainer");
-            if (fileInfoContainer) {
-              fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
-            }
-            const dropArea = document.getElementById("uploadDropArea");
-            if (dropArea) setDropAreaDefault();
-          }, 5000);
-        } else {
-          // Some files failed—keep the list visible and show a toast.
+        if (!overallSuccess) {
           showToast("Some files failed to upload. Please check the list.");
         }
       })

login_basic.php

@@ -3,6 +3,19 @@ require_once 'config.php';
 
 $usersFile = USERS_DIR . USERS_FILE;  // Make sure the users file path is defined
 
+// Helper: retrieve a user's TOTP secret from users.txt
+function getUserTOTPSecret($username) {
+    global $encryptionKey, $usersFile;
+    if (!file_exists($usersFile)) return null;
+    foreach (file($usersFile, FILE_IGNORE_NEW_LINES|FILE_SKIP_EMPTY_LINES) as $line) {
+        $parts = explode(':', trim($line));
+        if (count($parts) >= 4 && $parts[0] === $username && !empty($parts[3])) {
+            return decryptData($parts[3], $encryptionKey);
+        }
+    }
+    return null;
+}
+
 // Reuse the same authentication function
 function authenticate($username, $password)
 {
@@ -43,15 +56,9 @@ function loadFolderPermission($username) {
     $permissionsFile = USERS_DIR . 'userPermissions.json';
     if (file_exists($permissionsFile)) {
         $content = file_get_contents($permissionsFile);
-        // Try to decrypt the content.
-        $decryptedContent = decryptData($content, $encryptionKey);
-        if ($decryptedContent !== false) {
-            $permissions = json_decode($decryptedContent, true);
-        } else {
-            $permissions = json_decode($content, true);
-        }
+        $decrypted = decryptData($content, $encryptionKey);
+        $permissions = $decrypted !== false ? json_decode($decrypted, true) : json_decode($content, true);
         if (is_array($permissions)) {
-            // Use case-insensitive comparison.
             foreach ($permissions as $storedUsername => $data) {
                 if (strcasecmp($storedUsername, $username) === 0 && isset($data['folderOnly'])) {
                     return (bool)$data['folderOnly'];
@@ -59,7 +66,7 @@ function loadFolderPermission($username) {
             }
         }
     }
-    return false; // Default if not set.
+    return false;
 }
 
 // Check if the user has sent HTTP Basic auth credentials.
@@ -68,39 +75,46 @@ if (!isset($_SERVER['PHP_AUTH_USER'])) {
     header('HTTP/1.0 401 Unauthorized');
     echo 'Authorization Required';
     exit;
-} else {
-    $username = trim($_SERVER['PHP_AUTH_USER']);
-    $password = trim($_SERVER['PHP_AUTH_PW']);
-
-    // Validate username format (optional)
-    if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $username)) {
-        header('WWW-Authenticate: Basic realm="FileRise Login"');
-        header('HTTP/1.0 401 Unauthorized');
-        echo 'Invalid username format';
-        exit;
-    }
-
-    // Attempt authentication
-    $roleFromAuth = authenticate($username, $password);
-    if ($roleFromAuth !== false) {
-        // Use getUserRole() to determine the user's role from the file
-        $actualRole = getUserRole($username);
-        session_regenerate_id(true);
-        $_SESSION["authenticated"] = true;
-        $_SESSION["username"] = $username;
-        $_SESSION["isAdmin"] = ($actualRole === "1");
-        // Set the folderOnly flag based on userPermissions.json.
-        $_SESSION["folderOnly"] = loadFolderPermission($username);
-
-        // Redirect to the main page (or output JSON for testing)
-        header("Location: index.html");
-        exit;
-    } else {
-        // Invalid credentials; prompt again
-        header('WWW-Authenticate: Basic realm="FileRise Login"');
-        header('HTTP/1.0 401 Unauthorized');
-        echo 'Invalid credentials';
-        exit;
-    }
 }
+
+$username = trim($_SERVER['PHP_AUTH_USER']);
+$password = trim($_SERVER['PHP_AUTH_PW']);
+
+// Validate username format (optional)
+if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $username)) {
+    header('WWW-Authenticate: Basic realm="FileRise Login"');
+    header('HTTP/1.0 401 Unauthorized');
+    echo 'Invalid username format';
+    exit;
+}
+
+// Attempt authentication
+$roleFromAuth = authenticate($username, $password);
+if ($roleFromAuth !== false) {
+    // --- NEW: check for TOTP secret ---
+    $secret = getUserTOTPSecret($username);
+    if ($secret) {
+        // hold user & secret in session and ask client for TOTP
+        $_SESSION['pending_login_user']   = $username;
+        $_SESSION['pending_login_secret'] = $secret;
+        header("Location: index.html?totp_required=1");
+        exit;
+    }
+
+    // no TOTP, proceed as before
+    session_regenerate_id(true);
+    $_SESSION["authenticated"] = true;
+    $_SESSION["username"]      = $username;
+    $_SESSION["isAdmin"]       = (getUserRole($username) === "1");
+    $_SESSION["folderOnly"]    = loadFolderPermission($username);
+
+    header("Location: index.html");
+    exit;
+}
+
+// Invalid credentials; prompt again
+header('WWW-Authenticate: Basic realm="FileRise Login"');
+header('HTTP/1.0 401 Unauthorized');
+echo 'Invalid credentials';
+exit;
 ?>

logout.php

@@ -5,12 +5,12 @@ require_once 'config.php';
 $headers = array_change_key_case(getallheaders(), CASE_LOWER);
 $receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
 
-// If there's a mismatch, log it but continue with logout.
+// Log CSRF mismatch but proceed with logout.
 if (isset($_SESSION['csrf_token']) && $receivedToken !== $_SESSION['csrf_token']) {
     error_log("CSRF token mismatch on logout. Proceeding with logout.");
 }
 
-// If the remember me token is set, remove it from the persistent tokens file.
+// Remove the remember_me token.
 if (isset($_COOKIE['remember_me_token'])) {
     $token = $_COOKIE['remember_me_token'];
     $persistentTokensFile = USERS_DIR . 'persistent_tokens.json';
@@ -25,13 +25,26 @@ if (isset($_COOKIE['remember_me_token'])) {
         }
     }
     // Clear the cookie.
+    // Ensure $secure is defined; for example:
+    $secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
     setcookie('remember_me_token', '', time() - 3600, '/', '', $secure, true);
 }
 
-// Clear session data and destroy the session.
+// Clear session data and remove session cookie.
 $_SESSION = [];
+
+// Clear the session cookie.
+if (ini_get("session.use_cookies")) {
+    $params = session_get_cookie_params();
+    setcookie(session_name(), '', time() - 42000,
+        $params["path"], $params["domain"],
+        $params["secure"], $params["httponly"]
+    );
+}
+
+// Destroy the session.
 session_destroy();
 
-header("Location: index.html");
+header("Location: index.html?logout=1");
 exit;
 ?>

main.js

@@ -1,168 +0,0 @@
-import { sendRequest } from './networkUtils.js';
-import {
-  toggleVisibility,
-  toggleAllCheckboxes,
-  updateFileActionButtons,
-  showToast
-} from './domUtils.js';
-import {
-  loadFileList,
-  initFileActions,
-  editFile,
-  saveFile,
-  displayFilePreview,
-  renameFile
-} from './fileManager.js';
-import { loadFolderTree } from './folderManager.js';
-import { initUpload } from './upload.js';
-import { initAuth, checkAuthentication } from './auth.js';
-import { setupTrashRestoreDelete } from './trashRestoreDelete.js';
-import { initDragAndDrop, loadSidebarOrder } from './dragAndDrop.js'
-import { initTagSearch, openTagModal, filterFilesByTag } from './fileTags.js';
-
-function loadCsrfToken() {
-  fetch('token.php', { credentials: 'include' })
-    .then(response => response.json())
-    .then(data => {
-      // Set global variables.
-      window.csrfToken = data.csrf_token;
-      window.SHARE_URL = data.share_url;
-
-      // Update (or create) the CSRF meta tag.
-      let metaCSRF = document.querySelector('meta[name="csrf-token"]');
-      if (!metaCSRF) {
-        metaCSRF = document.createElement('meta');
-        metaCSRF.name = 'csrf-token';
-        document.head.appendChild(metaCSRF);
-      }
-      metaCSRF.setAttribute('content', data.csrf_token);
-
-      // Update (or create) the share URL meta tag.
-      let metaShare = document.querySelector('meta[name="share-url"]');
-      if (!metaShare) {
-        metaShare = document.createElement('meta');
-        metaShare.name = 'share-url';
-        document.head.appendChild(metaShare);
-      }
-      metaShare.setAttribute('content', data.share_url);
-    })
-    .catch(error => console.error("Error loading CSRF token and share URL:", error));
-}
-
-document.addEventListener("DOMContentLoaded", loadCsrfToken);
-
-// Expose functions for inline handlers.
-window.sendRequest = sendRequest;
-window.toggleVisibility = toggleVisibility;
-window.toggleAllCheckboxes = toggleAllCheckboxes;
-window.editFile = editFile;
-window.saveFile = saveFile;
-window.renameFile = renameFile;
-
-// Global variable for the current folder.
-window.currentFolder = "root";
-
-document.addEventListener("DOMContentLoaded", function () {
-  // Call initAuth synchronously.
-  initAuth();
-
-  const newPasswordInput = document.getElementById("newPassword");
-  if (newPasswordInput) {
-    newPasswordInput.addEventListener("input", function() {
-      console.log("newPassword input event:", this.value);
-    });
-  } else {
-    console.error("newPassword input not found!");
-  }
-  // --- Dark Mode Persistence ---
-  const darkModeToggle = document.getElementById("darkModeToggle");
-  const storedDarkMode = localStorage.getItem("darkMode");
-
-  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) {
-    darkModeToggle.textContent = document.body.classList.contains("dark-mode")
-      ? "Light Mode"
-      : "Dark Mode";
-
-    darkModeToggle.addEventListener("click", function () {
-      if (document.body.classList.contains("dark-mode")) {
-        document.body.classList.remove("dark-mode");
-        localStorage.setItem("darkMode", "false");
-        darkModeToggle.textContent = "Dark Mode";
-      } else {
-        document.body.classList.add("dark-mode");
-        localStorage.setItem("darkMode", "true");
-        darkModeToggle.textContent = "Light Mode";
-      }
-    });
-  }
-
-  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 = "Light Mode";
-      } else {
-        document.body.classList.remove("dark-mode");
-        if (darkModeToggle) darkModeToggle.textContent = "Dark Mode";
-      }
-    });
-  }
-  // --- End Dark Mode Persistence ---
-
-  const message = sessionStorage.getItem("welcomeMessage");
-  if (message) {
-    showToast(message);
-    sessionStorage.removeItem("welcomeMessage");
-  }
-
-  checkAuthentication().then(authenticated => {
-    if (authenticated) {
-      window.currentFolder = "root";
-      initTagSearch();
-      loadFileList(window.currentFolder);
-      initDragAndDrop();
-      loadSidebarOrder();
-      initFileActions();
-      initUpload();
-      loadFolderTree();
-      setupTrashRestoreDelete();
-      const helpBtn = document.getElementById("folderHelpBtn");
-      const helpTooltip = document.getElementById("folderHelpTooltip");
-      helpBtn.addEventListener("click", function () {
-        // Toggle display of the tooltip.
-        if (helpTooltip.style.display === "none" || helpTooltip.style.display === "") {
-          helpTooltip.style.display = "block";
-        } else {
-          helpTooltip.style.display = "none";
-        }
-      });
-    } else {
-      console.warn("User not authenticated. Data loading deferred.");
-    }
-  });
-
-  // --- Auto-scroll During Drag ---
-  // Adjust these values as needed:
-  const SCROLL_THRESHOLD = 50; // pixels from edge to start scrolling
-  const SCROLL_SPEED = 20;     // pixels to scroll per event
-
-  document.addEventListener("dragover", function (e) {
-    if (e.clientY < SCROLL_THRESHOLD) {
-      window.scrollBy(0, -SCROLL_SPEED);
-    } else if (e.clientY > window.innerHeight - SCROLL_THRESHOLD) {
-      window.scrollBy(0, SCROLL_SPEED);
-    }
-  });
-});

metadata/createdTags.json

@@ -1 +0,0 @@
-[]

moveFiles.php

@@ -20,9 +20,8 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
     exit;
 }
-$userPermissions = loadUserPermissions($username);
-// Check if the user is read-only. (Assuming that if readOnly is true, deletion is disallowed.)
 $username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
 if ($username) {
     $userPermissions = loadUserPermissions($username);
     if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {

renameFile.php

@@ -21,9 +21,9 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
     exit;
 }
-$userPermissions = loadUserPermissions($username);
-// Check if the user is read-only. (Assuming that if readOnly is true, deletion is disallowed.)
+
 $username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
 if ($username) {
     $userPermissions = loadUserPermissions($username);
     if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {

renameFolder.php

@@ -27,9 +27,8 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     http_response_code(403);
     exit;
 }
-$userPermissions = loadUserPermissions($username);
-// Check if the user is read-only. (Assuming that if readOnly is true, deletion is disallowed.)
 $username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
 if ($username) {
     $userPermissions = loadUserPermissions($username);
     if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {

resources/readme.md

@@ -1 +0,0 @@
-This resource folder is just to hold images of design

saveFile.php

@@ -18,9 +18,8 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
     exit;
 }
-$userPermissions = loadUserPermissions($username);
-// Check if the user is read-only. (Assuming that if readOnly is true, deletion is disallowed.)
 $username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
 if ($username) {
     $userPermissions = loadUserPermissions($username);
     if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {

share.php

@@ -1,10 +1,11 @@
 <?php
 // share.php
+
 require_once 'config.php';
 
-// Get token and password (if provided)
-$token = isset($_GET['token']) ? $_GET['token'] : '';
-$providedPass = isset($_GET['pass']) ? $_GET['pass'] : '';
+// Retrieve and sanitize input
+$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);
@@ -12,7 +13,7 @@ if (empty($token)) {
     exit;
 }
 
-// Load share links.
+// Load share links from file
 $shareFile = META_DIR . "share_links.json";
 if (!file_exists($shareFile)) {
     http_response_code(404);
@@ -36,18 +37,54 @@ if (time() > $record['expires']) {
     exit;
 }
 
-// If a password is required and none is provided, show a simple form.
+// If a password is required and none is provided, show a password form.
 if (!empty($record['password']) && empty($providedPass)) {
     ?>
     <!DOCTYPE html>
     <html>
     <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Enter Password</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                padding: 20px;
+                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);
+            }
+            input[type="password"] {
+                width: 100%;
+                padding: 10px;
+                margin: 10px 0;
+                border: 1px solid #ccc;
+                border-radius: 4px;
+            }
+            button {
+                padding: 10px 20px;
+                background: #007BFF;
+                border: none;
+                border-radius: 4px;
+                color: #fff;
+                cursor: pointer;
+            }
+            button:hover {
+                background: #0056b3;
+            }
+        </style>
     </head>
-    <body style="font-family: Arial, sans-serif; padding: 20px;">
+    <body>
         <h2>This file is protected by a password.</h2>
         <form method="get" action="share.php">
-            <input type="hidden" name="token" value="<?php echo htmlspecialchars($token); ?>">
+            <input type="hidden" name="token" value="<?php echo htmlspecialchars($token, ENT_QUOTES, 'UTF-8'); ?>">
             <label for="pass">Password:</label>
             <input type="password" name="pass" id="pass" required>
             <button type="submit">Submit</button>
@@ -58,7 +95,7 @@ if (!empty($record['password']) && empty($providedPass)) {
     exit;
 }
 
-// If a password was set, validate it.
+// Validate provided password if set.
 if (!empty($record['password'])) {
     if (!password_verify($providedPass, $record['password'])) {
         http_response_code(403);
@@ -67,7 +104,7 @@ if (!empty($record['password'])) {
     }
 }
 
-// Build file path.
+// Build file path securely.
 $folder = trim($record['folder'], "/\\ ");
 $file = $record['file'];
 $filePath = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR;
@@ -76,24 +113,37 @@ if (!empty($folder) && strtolower($folder) !== 'root') {
 }
 $filePath .= $file;
 
-if (!file_exists($filePath)) {
+// Resolve the real path and ensure it's within the allowed directory.
+$realFilePath = realpath($filePath);
+$uploadDirReal = realpath(UPLOAD_DIR);
+if ($realFilePath === false || strpos($realFilePath, $uploadDirReal) !== 0) {
+    http_response_code(404);
+    echo json_encode(["error" => "File not found."]);
+    exit;
+}
+
+if (!file_exists($realFilePath)) {
     http_response_code(404);
     echo json_encode(["error" => "File not found."]);
     exit;
 }
 
 // Serve the file.
-$mimeType = mime_content_type($filePath);
+$mimeType = mime_content_type($realFilePath);
 header("Content-Type: " . $mimeType);
 
-// Determine extension and set disposition accordingly.
-$ext = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));
+// Set Content-Disposition based on file type.
+$ext = strtolower(pathinfo($realFilePath, PATHINFO_EXTENSION));
 if (in_array($ext, ['jpg','jpeg','png','gif','bmp','webp','svg','ico'])) {
-    header('Content-Disposition: inline; filename="' . basename($filePath) . '"');
+    header('Content-Disposition: inline; filename="' . basename($realFilePath) . '"');
 } else {
-    header('Content-Disposition: attachment; filename="' . basename($filePath) . '"');
+    header('Content-Disposition: attachment; filename="' . basename($realFilePath) . '"');
 }
 
-readfile($filePath);
+// Optionally disable caching for sensitive files.
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Pragma: no-cache");
+
+readfile($realFilePath);
 exit;
 ?>

totp_verify.php

@@ -1,84 +1,140 @@
 <?php
-// verifyTOTPSetup.php
+// totp_verify.php
 
 require_once 'vendor/autoload.php';
 require_once 'config.php';
 
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    http_response_code(403);
-    echo json_encode(["error" => "Not authenticated"]);
-    exit;
-}
-
-// Verify CSRF token from request headers.
-$csrfHeader = $_SERVER['HTTP_X_CSRF_TOKEN'] ?? '';
-if (!isset($_SESSION['csrf_token']) || $csrfHeader !== $_SESSION['csrf_token']) {
-    http_response_code(403);
-    echo json_encode(["error" => "Invalid CSRF token"]);
-    exit;
-}
-
-// Ensure Content-Type is JSON.
+// JSON + CSP
 header('Content-Type: application/json');
+header("Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';");
 
-// Read and decode the JSON request body.
-$input = json_decode(file_get_contents("php://input"), true);
-if (!isset($input['totp_code']) || strlen(trim($input['totp_code'])) !== 6 || !ctype_digit(trim($input['totp_code']))) {
-    http_response_code(400);
-    echo json_encode(["error" => "A valid 6-digit TOTP code is required"]);
-    exit;
-}
+try {
+    // standardized error helper
+    function respond($status, $code, $message, $data = []) {
+        http_response_code($code);
+        echo json_encode([
+            'status'  => $status,
+            'code'    => $code,
+            'message' => $message,
+            'data'    => $data
+        ]);
+        exit;
+    }
 
-$totpCode = trim($input['totp_code']);
-$username = $_SESSION['username'] ?? '';
-if (empty($username)) {
-    http_response_code(400);
-    echo json_encode(["error" => "Username not found in session"]);
-    exit;
-}
+    // Rate‑limit TOTP attempts
+    if (!isset($_SESSION['totp_failures'])) {
+        $_SESSION['totp_failures'] = 0;
+    }
+    if ($_SESSION['totp_failures'] >= 5) {
+        respond('error', 429, 'Too many TOTP attempts. Please try again later.');
+    }
 
-/**
- * Retrieves the current user's TOTP secret from users.txt.
- *
- * @param string $username
- * @return string|null The decrypted TOTP secret or null if not found.
- */
-function getUserTOTPSecret($username) {
-    global $encryptionKey;
-    // Define the path to your users file.
-    $usersFile = USERS_DIR . USERS_FILE;
-    if (!file_exists($usersFile)) {
+    /**
+     * Helper: Get a user's role from users.txt
+     */
+    function getUserRole(string $username): ?string {
+        $usersFile = USERS_DIR . USERS_FILE;
+        if (!file_exists($usersFile)) return null;
+        foreach (file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) {
+            $parts = explode(':', trim($line));
+            if (count($parts) >= 3 && $parts[0] === $username) {
+                return trim($parts[2]);
+            }
+        }
         return null;
     }
-    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
-    foreach ($lines as $line) {
-        $parts = explode(':', trim($line));
-        // Assuming format: username:hashedPassword:role:encryptedTOTPSecret
-        if (count($parts) >= 4 && $parts[0] === $username && !empty($parts[3])) {
-            return decryptData($parts[3], $encryptionKey);
-        }
+
+    // Must be authenticated or pending TOTP
+    if (
+        !(
+            (isset($_SESSION['authenticated']) && $_SESSION['authenticated'] === true)
+            || isset($_SESSION['pending_login_user'])
+        )
+    ) {
+        respond('error', 403, 'Not authenticated');
     }
-    return null;
-}
 
-// Retrieve the user's TOTP secret.
-$totpSecret = getUserTOTPSecret($username);
-if (!$totpSecret) {
+    // CSRF check
+    $csrfHeader = $_SERVER['HTTP_X_CSRF_TOKEN'] ?? '';
+    if (!isset($_SESSION['csrf_token']) || $csrfHeader !== $_SESSION['csrf_token']) {
+        respond('error', 403, 'Invalid CSRF token');
+    }
+
+    // Parse & validate input
+    $input = json_decode(file_get_contents("php://input"), true);
+    $code  = trim($input['totp_code'] ?? '');
+    if (!preg_match('/^\d{6}$/', $code)) {
+        respond('error', 400, 'A valid 6-digit TOTP code is required');
+    }
+
+    // LOGIN flow (Basic‑Auth or OIDC)
+    if (isset($_SESSION['pending_login_user'])) {
+        $username   = $_SESSION['pending_login_user'];
+        $totpSecret = $_SESSION['pending_login_secret'];
+        $tfa        = new \RobThree\Auth\TwoFactorAuth('FileRise');
+
+        if (!$tfa->verifyCode($totpSecret, $code)) {
+            $_SESSION['totp_failures']++;
+            respond('error', 400, 'Invalid TOTP code');
+        }
+
+        // success → complete login
+        session_regenerate_id(true);
+        $_SESSION['authenticated'] = true;
+        $_SESSION['username']      = $username;
+        $_SESSION['isAdmin']       = (getUserRole($username) === "1");
+        $_SESSION['folderOnly']    = loadUserPermissions($username);
+
+        unset($_SESSION['pending_login_user'], $_SESSION['pending_login_secret'], $_SESSION['totp_failures']);
+
+        respond('ok', 200, 'Login successful');
+    }
+
+    // SETUP‑VERIFICATION flow
+    $username = $_SESSION['username'] ?? '';
+    if (!$username) {
+        respond('error', 400, 'Username not found in session');
+    }
+
+    /**
+     * Helper: retrieve the user's TOTP secret from users.txt
+     */
+    function getUserTOTPSecret(string $username): ?string {
+        global $encryptionKey;
+        $usersFile = USERS_DIR . USERS_FILE;
+        if (!file_exists($usersFile)) return null;
+        foreach (file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) {
+            $parts = explode(':', trim($line));
+            if (count($parts) >= 4 && $parts[0] === $username && !empty($parts[3])) {
+                return decryptData($parts[3], $encryptionKey);
+            }
+        }
+        return null;
+    }
+
+    $totpSecret = getUserTOTPSecret($username);
+    if (!$totpSecret) {
+        respond('error', 500, 'TOTP secret not found. Please set up TOTP again.');
+    }
+
+    $tfa = new \RobThree\Auth\TwoFactorAuth('FileRise');
+    if (!$tfa->verifyCode($totpSecret, $code)) {
+        $_SESSION['totp_failures']++;
+        respond('error', 400, 'Invalid TOTP code');
+    }
+
+    // success
+    unset($_SESSION['totp_failures']);
+    respond('ok', 200, 'TOTP successfully verified');
+
+} catch (\Throwable $e) {
+    // log error internally, then generic response
+    error_log("totp_verify error: " . $e->getMessage());
     http_response_code(500);
-    echo json_encode(["error" => "TOTP secret not found. Please try setting up TOTP again."]);
+    echo json_encode([
+        'status'  => 'error',
+        'code'    => 500,
+        'message' => 'Internal server error'
+    ]);
     exit;
-}
-
-// Verify the provided TOTP code.
-$tfa = new \RobThree\Auth\TwoFactorAuth('FileRise');
-if (!$tfa->verifyCode($totpSecret, $totpCode)) {
-    http_response_code(400);
-    echo json_encode(["error" => "Invalid TOTP code."]);
-    exit;
-}
-
-// If needed, you could update a flag or store the confirmation in the user record here.
-
-// Return a successful response.
-echo json_encode(["success" => true, "message" => "TOTP successfully verified."]);
-?>
+}

upload.php

@@ -18,13 +18,14 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
     exit;
 }
-$userPermissions = loadUserPermissions($username);
+
 $username = $_SESSION['username'] ?? '';
 if ($username) {
     $userPermissions = loadUserPermissions($username);
     if (isset($userPermissions['disableUpload']) && $userPermissions['disableUpload'] === true) {
+        http_response_code(403);  // Return a 403 Forbidden status.
         echo json_encode(["error" => "Disabled upload users are not allowed to upload."]);
-        exit();
+        exit;
     }
 }
 
@@ -62,6 +63,14 @@ if (isset($_POST['resumableChunkNumber'])) {
     $totalSize           = intval($_POST['resumableTotalSize']);
     $resumableIdentifier = $_POST['resumableIdentifier'];           // unique file identifier
     $resumableFilename   = $_POST['resumableFilename'];
+    
+
+if (!preg_match('/^[A-Za-z0-9_\-\.\(\) ]+$/', $resumableFilename)) {
+    http_response_code(400); // Set an error HTTP status code
+    echo json_encode(["error" => "Invalid file name: " . $resumableFilename]);
+    exit;
+}
+    
     $folder = isset($_POST['folder']) ? trim($_POST['folder']) : 'root';
     if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
         echo json_encode(["error" => "Invalid folder name"]);

uploads/.htaccess

@@ -1,7 +1,7 @@
 <IfModule mod_php7.c>
-  php_flag engine off
-</IfModule>
-<IfModule mod_php.c>
-  php_flag engine off
-</IfModule>
-Options -Indexes
+   php_flag engine off
+ </IfModule>
+ <IfModule mod_php.c>
+   php_flag engine off
+ </IfModule>
+ Options -Indexes

users/.htaccess

@@ -1,3 +1,3 @@
 <Files "users.txt">
-    Require all denied
-</Files>
+     Require all denied
+ </Files>