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

Readme fixes

.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]

CONTRIBUTING.md

@@ -0,0 +1,92 @@
+# Contributing to FileRise
+
+Thank you for your interest in contributing to FileRise! We appreciate your help in making this self-hosted file manager even better.
+
+## Table of Contents
+
+- [Getting Started](#getting-started)
+- [Reporting Bugs](#reporting-bugs)
+- [Suggesting Enhancements](#suggesting-enhancements)
+- [Pull Requests](#pull-requests)
+- [Coding Guidelines](#coding-guidelines)
+- [Documentation](#documentation)
+- [Questions and Support](#questions-and-support)
+
+## Getting Started
+
+1. **Fork the Repository**  
+   Click the **Fork** button on the top-right of the FileRise GitHub page to create your own copy.
+
+2. **Clone Your Fork**  
+
+   ```bash
+   git clone https://github.com/yourusername/FileRise.git
+   cd FileRise
+   ```
+
+3. **Set Up a Local Environment**
+FileRise runs on a standard LAMP stack. Ensure you have PHP, Apache, and the necessary dependencies installed. For frontend development, Node.js may be required for build tasks if applicable.
+
+4. **Configuration**
+Copy any example configuration files (if provided) and adjust them as needed for your local setup.
+
+## Reporting Bugs
+
+If you discover a bug, please open an issue on GitHub and include:
+
+- A clear and descriptive title.
+- Detailed steps to reproduce the bug.
+- The expected and actual behavior.
+- Screenshots or error logs (if applicable).
+- Environment details (PHP version, Apache version, OS, etc.).
+
+## Suggesting Enhancements
+
+Have an idea for a new feature or improvement? Before opening a new issue, please check if a similar suggestion already exists. If not, open an issue with:
+
+- A clear description of the enhancement.
+- Use cases or examples of how it would be beneficial.
+- Any potential drawbacks or alternatives.
+
+## Pull Requests
+
+We welcome pull requests! To submit one, please follow these guidelines:
+
+1. **Create a New Branch**  
+   Always create a feature branch from master.
+
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+2. **Make Your Changes**  
+   Commit your changes with clear, descriptive messages. Make sure your code follows the project’s style guidelines.
+
+3. **Write Tests**  
+   If applicable, add tests to cover your changes to help us maintain code quality.
+
+4. **Submit the Pull Request**  
+   Push your branch to your fork and open a pull request against the master branch in the main repository. Provide a detailed description of your changes and why they’re needed.
+
+## Coding Guidelines
+
+- **Code Style:**  
+  Follow the conventions used in the project. Consistent indentation, naming conventions, and clear code organization are key.
+
+- **Documentation:**  
+  Update documentation if your changes affect the usage or configuration of FileRise.
+
+- **Commit Messages:**  
+  Write meaningful commit messages that clearly describe the purpose of your changes.
+
+## Documentation
+
+If you notice any areas in the documentation that need improvement or updating, please feel free to include those changes in your pull requests. Clear documentation is essential for helping others understand and use FileRise.
+
+## Questions and Support
+
+If you have any questions, ideas, or need support, please open an issue or join our discussion on [GitHub Discussions](https://github.com/error311/FileRise/discussions). We’re here to help and appreciate your contributions.
+
+---
+
+Thank you for helping to improve FileRise and happy coding!

README.md

@@ -1,19 +1,33 @@
-# Multi File Upload Editor
+# FileRise - Elevate your File Management
 
-https://github.com/user-attachments/assets/179e6940-5798-4482-9a69-696f806c37de
+**Demo link:** https://demo.filerise.net   
+**UserName:** demo   
+**Password:** demo   
+Read only permissions but can view the interface.   
 
-changelogs available here: <https://github.com/error311/multi-file-upload-editor-docker/>
+**4/3/2025 Video demo:**
 
-Multi File Upload Editor is a lightweight, secure, self-hosted web application for uploading, editing, and managing files. Built with an Apache/PHP backend and a modern JavaScript (ES6 modules) frontend, it offers a responsive, dynamic file management interface. It serves as an alternative to solutions like FileGator or ProjectSend, providing an easy-to-setup experience ideal for document management, image galleries, firmware file hosting, and more.
+https://github.com/user-attachments/assets/221f6a53-85f5-48d4-9abe-89445e0af90e
+
+**Dark mode:**
+![Dark Header](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-header.png)
+
+changelogs available here: <https://github.com/error311/FileRise-docker/>
+
+FileRise is a lightweight, secure, self-hosted web application for uploading, syntax-highlight editing, drag & drop file management, and more. Built with an Apache/PHP backend and a modern JavaScript (ES6 modules) frontend, it offers a responsive and dynamic interface designed to simplify file handling. As an alternative to solutions like FileGator, TinyFileManager, or ProjectSend, FileRise provides an easy-to-set-up experience ideal for document management, image galleries, firmware hosting, and other file-intensive applications.
 
 ---
 
 ## Features
 
-- **Multiple File/Folder Uploads with Progress:**
-  - Users can select and upload multiple files & folders at once.
-  - Each file upload displays an individual progress bar with percentage and upload speed.
-  - Image files show a small thumbnail preview (with default Material icons for other file types).
+- **Multiple File/Folder Uploads with Progress (Resumable.js Integration):**
+  - Users can effortlessly upload multiple files and folders simultaneously by either selecting them through the file picker or dragging and dropping them directly into the interface.
+  - **Chunked Uploads:** Files are uploaded in configurable chunks (default set as 3 MB) to efficiently handle large files.
+  - **Pause, Resume, and Retry:** Uploads can be paused and resumed at any time, with support for retrying failed chunks.
+  - **Real-Time Progress:** Each file shows an individual progress bar that displays percentage complete and upload speed.
+  - **File & Folder Grouping:** When many files are dropped, files are automatically grouped into a scrollable wrapper, ensuring the interface remains clean.
+  - **Secure Uploads:** All uploads integrate CSRF token validation and other security checks.
+
 - **Built-in File Editing & Renaming:**
   - Text-based files (e.g., .txt, .html, .js) can be opened and edited in a modal window using CodeMirror for:
     - Syntax highlighting
@@ -22,50 +36,95 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
   - Files can be renamed directly through the interface.
   - The renaming functionality now supports names with parentheses and checks for duplicate names, automatically generating a unique name (e.g., appending “ (1)”) when needed.
   - Folder-specific metadata is updated accordingly.
+  - **Enhanced File Editing Check:** Files with a Content-Length of 0 KB are now allowed to be edited.
+
 - **Built-in File Preview:**
-  - Users can quickly preview images, videos, and PDFs directly in modal popups without leaving the page.
+  - Users can quickly preview images, videos, audio and PDFs directly in modal popups without leaving the page.
   - The preview modal supports inline display of images (with proper scaling) and videos with playback controls.
   - Navigation (prev/next) within image previews is supported for a seamless browsing experience.
+
 - **Gallery (Grid) View:**
   - In addition to the traditional table view, users can toggle to a gallery view that arranges image thumbnails in a grid layout.
   - The gallery view offers multiple column options (e.g., 3, 4, or 5 columns) so that users can choose the layout that best fits their screen.
   - Action buttons (Download, Edit, Rename, Share) appear beneath each thumbnail for quick access.
-- **Batch Operations (Delete/Copy/Move/Download):**
+
+- **Batch Operations (Delete/Copy/Move/Download/Extract Zip):**
   - **Delete Files:** Delete multiple files at once.
   - **Copy Files:** Copy selected files to another folder with a unique-naming feature to prevent overwrites.
   - **Move Files:** Move selected files to a different folder, automatically generating a unique filename if needed to avoid data loss.
   - **Download Files as ZIP:** Download selected files as a ZIP archive. Users can specify a custom name for the ZIP file via a modal dialog.
-  - **Drag & Drop:** Easily move files by selecting them from the file list and simply dragging them onto your desired folder in the folder tree. When you drop the files onto a folder, the system automatically moves them, updating your file organization in one seamless action.
+  - **Extract Zip:** When one or more ZIP files are selected, users can extract the archive(s) directly into the current folder.
+  - **Drag & Drop (File Movement):** Easily move files by selecting them from the file list and dragging them onto your desired folder in the folder tree or breadcrumb. When you drop the files onto a folder, the system automatically moves them, updating your file organization in one seamless action.
+  - **Enhanced Context Menu & Keyboard Shortcuts:**
+    - **Right-Click Context Menu:**
+      - A custom context menu appears on right-clicking within the file list.
+      - For multiple selections, options include Delete Selected, Copy Selected, Move Selected, Download Zip, and (if applicable) Extract Zip.
+      - When exactly one file is selected, additional options (Preview, Edit [if editable], Rename, and Tag File) are available.
+    - **Keyboard Shortcut for Deletion:**
+      - A global keydown listener detects Delete/Backspace key presses (when no input is focused) to trigger the delete operation.
+
+- **File Tagging and Global Tag Management:**
+  - **Context Menu Tagging:**
+    - Single-file tagging: “Tag File” option in the right-click menu opens a modal to add a tag (with name and color) to the file.
+    - Multi-file tagging: When multiple files are selected, a “Tag Selected” option opens a multi‑file tagging modal to apply the same tag to all selected files.
+  - **Tagging Modals & Custom Dropdown:**
+    - Dedicated modals provide an interface for adding and updating tags.
+    - A custom dropdown in each modal displays available global tags with a colored preview and a remove icon.
+  - **Global Tag Store:**
+    - Tags are stored globally (persisted in a JSON file) for reuse across files and sessions.
+    - New tags added to any file are automatically added to the global store.
+    - Users can remove a global tag directly from the dropdown, which removes it from the available tag list for all files.
+  - **Unified Search Filtering:**
+    - The single search box now filters files based on both file names and tag names (case‑insensitive).
+
 - **Folder Management:**
   - Organize files into folders and subfolders with the ability to create, rename, and delete folders.
-  - A dynamic folder tree in the UI allows users to navigate directories easily, and any changes are immediately reflected in real time.
-  - **Per-Folder Metadata Storage:** Each folder has its own metadata JSON file (e.g., `root_metadata.json`, `FolderName_metadata.json`), and operations (copy/move/rename) update these metadata files accordingly.
+  - A dynamic folder tree in the UI allows users to navigate directories easily, with real-time updates.
+  - **Per-Folder Metadata Storage:** Each folder has its own metadata JSON file (e.g., `root_metadata.json`, `FolderName_metadata.json`), updated with operations like copy/move/rename.
+  - **Intuitive Breadcrumb Navigation:** Clickable breadcrumbs enable users to quickly jump to any parent folder; supports drag & drop for moving files.
+  - **Folder Manager Context Menu:**
+    - Right-clicking on a folder brings up a custom context menu with options for creating, renaming, and deleting folders.
+  - **Keyboard Shortcut for Folder Deletion:**
+    - A global key listener (Delete/Backspace) triggers folder deletion with safeguards to prevent deletion of the root folder.
+
 - **Sorting & Pagination:**
-  - The file list can be sorted by name, modified date, upload date, file size, or uploader.
-  - Pagination controls let users navigate through files with selectable page sizes (10, 20, 50, or 100 items per page) and “Prev”/“Next” navigation buttons.
+  - Files can be sorted by name, modified date, upload date, file size, or uploader.
+  - Pagination controls let users navigate through files with selectable page sizes (10, 20, 50, or 100 items per page) and “Prev”/“Next” buttons.
+
 - **Share Link Functionality:**
-  - Generate shareable links for files with configurable expiration times (e.g., 30, 60, 120, 180, 240 minutes, and a 1-day option) and optional password protection.
-  - Share links are stored in a JSON file with details including the folder, file, expiration timestamp, and hashed password.
-  - The share endpoint (`share.php`) validates tokens, expiration, and password before serving files (or forcing downloads).
+  - Generate shareable links for files with configurable expiration times (e.g., 30, 60, 120, 180, 240 minutes, and 1 day) and optional password protection.
+  - Share links are stored in a JSON file with details including folder, file, expiration timestamp, and hashed password.
+  - The share endpoint validates tokens, expiration, and password before serving files (or forcing downloads).
   - The share URL is configurable via environment variables or auto-detected from the server.
+
 - **User Authentication & Management:**
   - Secure, session-based authentication protects the file manager.
   - Admin users can add or remove users through the interface.
   - Passwords are hashed using PHP’s `password_hash()` for security.
   - All state-changing endpoints include CSRF token validation.
+  - Password change functionality is supported for all users.
+  - Basic Auth is available for login.
+  - **Persistent Login (Remember Me) with Encrypted Tokens:**
+    - Users can remain logged in across sessions securely.
+    - Persistent tokens are encrypted using AES‑256‑CBC before being stored in a JSON file.
+    - On auto-login, tokens are decrypted on the server to re-establish user sessions without re-authentication.
+
 - **Responsive, Dynamic & Persistent UI:**
   - The interface is mobile-friendly and adapts to various screen sizes by hiding non-critical columns on small devices.
   - Asynchronous updates (via Fetch API and XMLHttpRequest) keep the UI responsive without full page reloads.
-  - Persistent settings (such as items per page, dark/light mode preference, folder tree state, and the last open folder) ensure a smooth and customized user experience.
+  - Persistent settings (such as items per page, dark/light mode preference, folder tree state, and the last open folder) ensure a smooth, customized user experience.
+
 - **Dark Mode/Light Mode:**
-  - The application automatically adapts to the operating system’s theme preference by default and offers a manual toggle.
-  - The dark mode provides a darker background with lighter text and adjusts UI elements (including the CodeMirror editor) for optimal readability in low-light conditions.
-  - The light mode maintains a bright interface for well-lit environments.
+  - The application automatically adapts to the operating system’s theme preference by default, with a manual toggle available.
+  - Dark mode provides a darker background with lighter text, and UI elements (including the CodeMirror editor) are adjusted for optimal readability in low-light conditions.
+  - Light mode maintains a bright interface suitable for well-lit environments.
+
 - **Server & Security Enhancements:**
-  - The Apache configuration (or .htaccess files) is set to disable directory indexing (e.g., using `Options -Indexes` in the uploads directory), preventing unauthorized users from viewing directory contents.
-  - Direct access to sensitive files (e.g., `users.txt`) is restricted through .htaccess rules.
-  - A proxy download mechanism has been implemented (via endpoints like `download.php` and `downloadZip.php`) so that every file download request goes through a PHP script. This script validates the session and CSRF token before streaming the file, ensuring that even if a file URL is guessed, only authenticated users can access it.
-  - Administrators are advised to deploy the app on a secure internal network or use the proxy download mechanism for public deployments to further protect file content.
+  - Apache (or .htaccess) configurations disable directory indexing (e.g., using `Options -Indexes` in the uploads directory), preventing unauthorized file browsing.
+  - Direct access to sensitive files (e.g., `users.txt`) is restricted via .htaccess rules.
+  - A proxy download mechanism (via endpoints like `download.php` and `downloadZip.php`) routes all file downloads through PHP, ensuring session and CSRF token validation before file access.
+  - Administrators are advised to deploy the app on a secure internal network or use the proxy download mechanism for public deployments.
+
 - **Trash Management with Restore & Delete:**
   - **Trash Storage & Metadata:**
     - Deleted files are moved to a designated “Trash” folder rather than being immediately removed.
@@ -75,44 +134,88 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
       - Uploader information (and optionally who deleted it)
       - Additional metadata (e.g., file type)
   - **Restore Functionality:**
-    - Admins can view trashed files in a modal.
-    - They can restore individual files (with conflict checks) or restore all files back to their original location.
+    - Admins can view trashed files in a modal and restore individual or all files back to their original location (with conflict checks).
   - **Delete Functionality:**
     - Users can permanently delete trashed files via:
       - **Delete Selected:** Remove specific files from the Trash and update `trash.json`.
       - **Delete All:** Permanently remove every file from the Trash after confirmation.
   - **Auto-Purge Mechanism:**
-    - The system automatically purges (permanently deletes) any files in the Trash older than three days, helping manage storage and prevent the accumulation of outdated files.
-  - **User Interface:**
-    - The trash modal displays details such as file name, uploader/deleter, and the trashed date/time.
-    - Material icons with tooltips visually represent the restore and delete actions.
+    - The system automatically purges files in the Trash older than three days, managing storage and preventing accumulation of outdated files.
+  - **Trash UI:**
+    - The trash modal displays file name, uploader/deleter, and trashed date/time.
+    - Material icons with tooltips represent restore and delete actions.
+
+- **Drag & Drop Cards with Dedicated Drop Zones:**
+  - **Sidebar Drop Zone:**  
+    - Cards (e.g., upload or folder management) can be dragged into a dedicated sidebar drop zone for quick access to frequently used operations.
+    - The sidebar drop zone expands dynamically to accept drops anywhere within its visual area.
+  - **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.
+
+## 🔒 Admin Panel, TOTP & OpenID Connect (OIDC) Integration
+
+- **Flexible Authentication:**
+  - Supports multiple authentication methods including Form-based Login, Basic Auth, OpenID Connect (OIDC), and TOTP-based Two-Factor Authentication.
+  - Ensures continuous secure access by allowing administrators to disable only two of the available login options at any time.
+
+- **Secure OIDC Authentication:**
+  - Seamlessly integrates with OIDC providers (e.g., Keycloak, Okta).
+  - Provides admin-configurable OIDC settings—including Provider URL, Client ID, Client Secret, and Redirect URI.
+  - Stores all sensitive configurations in an encrypted JSON file.
+
+- **TOTP Two-Factor Authentication:**
+  - Enhances security by integrating Time-based One-Time Password (TOTP) functionality.
+  - The new User Panel automatically displays the TOTP setup modal when users enable TOTP, presenting a QR code for easy configuration in authenticator apps.
+  - Administrators can customize a global OTPAuth URL template for consistent TOTP provisioning across accounts.
+
+- **Dynamic Admin Panel:**
+  - 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 the user can only read the files.
+    - *Disable Upload* prevents file uploads.
 
 ---
 
 ## Screenshots
 
-**Light mode**
-![Light Mode](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/light-mode.png)
+**Admin Panel:**
+![Light Admin Panel](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-admin-panel.png)
 
-**Dark mode**
-![Dark Mode](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-mode.png)
+**Light mode:**
+![Dark SideBar](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-sidebar.png)
 
-**Dark editor**
-![dark-editor](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-editor.png)
+**Light mode default:**
+![Default Layout](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-topbar.png)
 
-**Dark preview**
-![dark-preview](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-preview.png)
+**Dark editor:**
+![dark-editor](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-editor.png)
 
-**Restore or Delete Trash**
-![restore-delete](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/restore-delete.png)
+**Light preview**
+![dark-preview](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-preview.png)
 
-**Login page**
-![Login](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/login-page.png)
+**Restore or Delete Trash:**
+![restore-delete](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-trash.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)
 
   **iphone screenshots:**  
 <p align="center">
-  <img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-iphone.png" width="45%">
-  <img src="https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/light-preview-iphone.png" width="45%">
+  <img src="https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-iphone.png" width="45%">
+  <img src="https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/light-preview-iphone.png" width="45%">
 </p>
 
 ---
@@ -125,7 +228,7 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
    - **Clone:**  
 
      ```bash
-     git clone https://github.com/error311/multi-file-upload-editor.git
+     git clone https://github.com/error311/FileRise.git
      ```
 
    - **Download:**  
@@ -133,9 +236,19 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
 
 2. **Deploy to Your Web Server:**
    - Place the project files in your Apache web directory (e.g., `/var/www/html`).
-   - Ensure PHP 8.1+ is installed along with the required extensions (php-json, php-curl, php-zip, etc.).
+   - Ensure PHP 8.1+ is installed along with the required extensions (`php-json`, `php-curl`, `php-zip`, etc.).
 
-3. **Directory Setup & Permissions:**
+3. **Install Composer Dependencies (Required for OIDC Support):**
+   - Install Composer if you haven't already ([Installation Guide](https://getcomposer.org/download/)).
+   - Navigate to the project directory and run:
+
+     ```bash
+     composer install
+     ```
+
+   - This step will install necessary dependencies like `jumbojett/openid-connect-php` and `phpseclib/phpseclib`.
+
+4. **Directory Setup & Permissions:**
    - Create the following directories if they do not exist, and set appropriate permissions:
      - `uploads/` – for file storage.
      - `users/` – to store `users.txt` (user authentication data).
@@ -147,11 +260,11 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
      chmod -R 775 /var/www/uploads /var/www/users /var/www/metadata
      ```
 
-4. **Configure Apache:**
+5. **Configure Apache:**
    - Ensure that directory indexing is disabled (using `Options -Indexes` in your `.htaccess` or Apache configuration).
    - Make sure the Apache configuration allows URL rewriting if needed.
 
-5. **Configuration File:**
+6. **Configuration File:**
    - Open `config.php` and adjust the following constants as necessary:
      - `BASE_URL`: Set this to your web app’s base URL.
      - `UPLOAD_DIR`: Adjust the directory path for uploads.
@@ -168,14 +281,22 @@ Multi File Upload Editor is a lightweight, secure, self-hosted web application f
 
 ## Docker Usage
 
-For users who prefer containerization, a Docker image is available
+For users who prefer containerization, a Docker image is available.
+
+**Note:** The Docker image already includes Composer dependencies pre-installed (including OIDC support).
 
 ### Quickstart
 
 1. **Pull the Docker Image:**
 
    ```bash
-   docker pull error311/multi-file-upload-editor-docker:latest
+   docker pull error311/filerise-docker:latest
+   ```
+
+   macos M series:
+
+   ```bash
+   docker pull --platform linux/x86_64 error311/filerise-docker:latest
    ```
 
 2. **Run the Container:**
@@ -189,8 +310,8 @@ For users who prefer containerization, a Docker image is available
    -v /path/to/your/uploads:/var/www/uploads \
    -v /path/to/your/users:/var/www/users \
    -v /path/to/your/metadata:/var/www/metadata \
-   --name multi-file-upload-editor \
-   error311/multi-file-upload-editor-docker:latest
+   --name FileRise \
+   error311/filerise-docker:latest
    ```
 
 3. **Using Docker Compose:**
@@ -200,18 +321,19 @@ For users who prefer containerization, a Docker image is available
    ```yaml
    version: "3.8"
    services:
-   web:
-     image: error311/multi-file-upload-editor-docker:latest
-     ports:
-       - "80:80"
-     environment:
-       TIMEZONE: "America/New_York"
-       TOTAL_UPLOAD_SIZE: "5G"
-       SECURE: "false"
-     volumes:
-       - /path/to/your/uploads:/var/www/uploads
-       - /path/to/your/users:/var/www/users
-       - /path/to/your/metadata:/var/www/metadata
+     web:
+       image: error311/filerise-docker:latest
+       ports:
+         - "80:80"
+       environment:
+         TIMEZONE: "America/New_York"
+         TOTAL_UPLOAD_SIZE: "5G"
+         SECURE: "false"
+         PERSISTENT_TOKENS_KEY: "default_please_change_this_key"
+       volumes:
+         - /path/to/your/uploads:/var/www/uploads
+         - /path/to/your/users:/var/www/users
+         - /path/to/your/metadata:/var/www/metadata
    ```
 
 **Then start the container with:**
@@ -239,7 +361,7 @@ The `config.php` file contains several key constants that may need adjustment fo
   Defines the maximum upload size (default is `5G`). Ensure that PHP’s `upload_max_filesize` and `post_max_size` in your `php.ini` are consistent with this setting. The startup script (`start.sh`) updates PHP limits at runtime based on this value.
 
 - **Environment Variables (Docker):**  
-  The Docker image supports overriding configuration via environment variables. For example, you can set `SECURE`, `SHARE_URL`, and port settings via the container’s environment.
+  The Docker image supports overriding configuration via environment variables. For example, you can set `SECURE`, `SHARE_URL`, `PERSISTENT_TOKENS_KEY` and port settings via the container’s environment.
 
 ---
 
@@ -254,4 +376,8 @@ The `config.php` file contains several key constants that may need adjustment fo
 - **Logging & Troubleshooting:**  
   Check Apache logs (located in `/var/log/apache2/`) for troubleshooting any issues during deployment or operation.
 
-Enjoy using the Multi File Upload Editor! For any issues or contributions, please refer to the [GitHub repository](https://github.com/error311/multi-file-upload-editor).
+---
+
+## Contributing
+
+We welcome contributions! Please check out our [Contributing Guidelines](CONTRIBUTING.md) before getting started.

addUser.php

@@ -1,14 +1,14 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 $usersFile = USERS_DIR . USERS_FILE;
 
 // Determine if we are in setup mode:
 // - Query parameter setup=1 is passed
-// - And users.txt is either missing or empty
-$isSetup = (isset($_GET['setup']) && $_GET['setup'] == '1');
-if ($isSetup && (!file_exists($usersFile) || trim(file_get_contents($usersFile)) === '')) {
+// - And users.txt is either missing or empty (zero bytes or trimmed content is empty)
+$isSetup = (isset($_GET['setup']) && $_GET['setup'] === '1');
+if ($isSetup && (!file_exists($usersFile) || filesize($usersFile) == 0 || trim(file_get_contents($usersFile)) === '')) {
     // Allow initial admin creation without session checks.
     $setupMode = true;
 } else {
@@ -16,7 +16,7 @@ if ($isSetup && (!file_exists($usersFile) || trim(file_get_contents($usersFile))
     // In non-setup mode, check CSRF token and require admin privileges.
     $headers = array_change_key_case(getallheaders(), CASE_LOWER);
     $receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
-    if ($receivedToken !== $_SESSION['csrf_token']) {
+    if (!isset($_SESSION['csrf_token']) || $receivedToken !== $_SESSION['csrf_token']) {
         echo json_encode(["error" => "Invalid CSRF token"]);
         http_response_code(403);
         exit;
@@ -30,7 +30,7 @@ if ($isSetup && (!file_exists($usersFile) || trim(file_get_contents($usersFile))
     }
 }
 
-// Get input data from JSON
+// Get input data from JSON.
 $data = json_decode(file_get_contents("php://input"), true);
 $newUsername = trim($data["username"] ?? "");
 $newPassword = trim($data["password"] ?? "");
@@ -42,7 +42,7 @@ if ($setupMode) {
     $isAdmin = !empty($data["isAdmin"]) ? "1" : "0"; // "1" for admin, "0" for regular user.
 }
 
-// Validate input
+// Validate input.
 if (!$newUsername || !$newPassword) {
     echo json_encode(["error" => "Username and password required"]);
     exit;
@@ -54,12 +54,12 @@ if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $newUsername)) {
     exit;
 }
 
-// Ensure users.txt exists
+// Ensure users.txt exists.
 if (!file_exists($usersFile)) {
     file_put_contents($usersFile, '');
 }
 
-// Check if username already exists
+// Check if username already exists.
 $existingUsers = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
 foreach ($existingUsers as $line) {
     list($storedUser, $storedHash, $storedRole) = explode(':', trim($line));
@@ -69,10 +69,10 @@ foreach ($existingUsers as $line) {
     }
 }
 
-// Hash the password
+// Hash the password.
 $hashedPassword = password_hash($newPassword, PASSWORD_BCRYPT);
 
-// Prepare new user line
+// Prepare new user line.
 $newUserLine = $newUsername . ":" . $hashedPassword . ":" . $isAdmin . PHP_EOL;
 
 // In setup mode, overwrite users.txt; otherwise, append to it.

auth.js

@@ -1,283 +0,0 @@
-import { sendRequest } from './networkUtils.js';
-import { toggleVisibility, showToast } from './domUtils.js';
-import { loadFileList, renderFileTable, displayFilePreview, initFileActions } from './fileManager.js';
-import { loadFolderTree } from './folderManager.js';
-
-function initAuth() {
-  // First, check if the user is already authenticated.
-  checkAuthentication(false).then(data => {
-    if (data.setup) {
-      window.setupMode = true;
-      showToast("Setup mode: No users found. Please add an admin user.");
-      toggleVisibility("loginForm", false);
-      toggleVisibility("mainOperations", false);
-      document.querySelector(".header-buttons").style.visibility = "hidden";
-      toggleVisibility("addUserModal", true);
-      return;
-    }
-    window.setupMode = false;
-    if (data.authenticated) {
-      // User is logged in—show the main UI.
-      toggleVisibility("loginForm", false);
-      toggleVisibility("mainOperations", true);
-      toggleVisibility("uploadFileForm", true);
-      toggleVisibility("fileListContainer", true);
-      document.querySelector(".header-buttons").style.visibility = "visible";
-      // If admin, show admin-only buttons.
-      if (data.isAdmin) {
-        const addUserBtn = document.getElementById("addUserBtn");
-        const removeUserBtn = document.getElementById("removeUserBtn");
-        if (addUserBtn) addUserBtn.style.display = "block";
-        if (removeUserBtn) removeUserBtn.style.display = "block";
-        // Create and show the restore button.
-        let restoreBtn = document.getElementById("restoreFilesBtn");
-        if (!restoreBtn) {
-          restoreBtn = document.createElement("button");
-          restoreBtn.id = "restoreFilesBtn";
-          restoreBtn.classList.add("btn", "btn-warning");
-          // Use a material icon.
-          restoreBtn.innerHTML = '<i class="material-icons" title="Restore/Delete Trash">restore_from_trash</i>';
-
-          const headerButtons = document.querySelector(".header-buttons");
-          if (headerButtons) {
-            // Insert after the third child if available.
-            if (headerButtons.children.length >= 4) {
-              headerButtons.insertBefore(restoreBtn, headerButtons.children[4]);
-            } else {
-              headerButtons.appendChild(restoreBtn);
-            }
-          }
-        }
-        restoreBtn.style.display = "block";
-      } else {
-        const addUserBtn = document.getElementById("addUserBtn");
-        const removeUserBtn = document.getElementById("removeUserBtn");
-        if (addUserBtn) addUserBtn.style.display = "none";
-        if (removeUserBtn) removeUserBtn.style.display = "none";
-        // If not admin, hide the restore button.
-        const restoreBtn = document.getElementById("restoreFilesBtn");
-        if (restoreBtn) {
-          restoreBtn.style.display = "none";
-        }
-      }
-      // Set items-per-page.
-      const selectElem = document.querySelector(".form-control.bottom-select");
-      if (selectElem) {
-        const stored = localStorage.getItem("itemsPerPage") || "10";
-        selectElem.value = stored;
-      }
-    } else {
-      // Do not show a toast message repeatedly during initial check.
-      toggleVisibility("loginForm", true);
-      toggleVisibility("mainOperations", false);
-      toggleVisibility("uploadFileForm", false);
-      toggleVisibility("fileListContainer", false);
-      document.querySelector(".header-buttons").style.visibility = "hidden";
-    }
-  }).catch(error => {
-    console.error("Error checking authentication:", error);
-  });
-
-  // Attach login event listener once.
-  const authForm = document.getElementById("authForm");
-  if (authForm) {
-    authForm.addEventListener("submit", function (event) {
-      event.preventDefault();
-      const formData = {
-        username: document.getElementById("loginUsername").value.trim(),
-        password: document.getElementById("loginPassword").value.trim()
-      };
-      sendRequest("auth.php", "POST", formData, { "X-CSRF-Token": window.csrfToken })
-        .then(data => {
-          if (data.success) {
-            console.log("✅ Login successful. Reloading page.");
-            sessionStorage.setItem("welcomeMessage", "Welcome back, " + formData.username + "!");
-            window.location.reload();
-          } else {
-            showToast("Login failed: " + (data.error || "Unknown error"));
-          }
-        })
-        .catch(error => console.error("❌ Error logging in:", error));
-    });
-  }
-
-  // Attach logout event listener.
-  document.getElementById("logoutBtn").addEventListener("click", function () {
-    fetch("logout.php", {
-      method: "POST",
-      credentials: "include",
-      headers: { "X-CSRF-Token": window.csrfToken }
-    })
-      .then(() => window.location.reload(true))
-      .catch(error => console.error("Logout error:", error));
-  });
-
-  // Add User functionality.
-  document.getElementById("addUserBtn").addEventListener("click", function () {
-    resetUserForm();
-    toggleVisibility("addUserModal", true);
-  });
-  document.getElementById("saveUserBtn").addEventListener("click", function () {
-    const newUsername = document.getElementById("newUsername").value.trim();
-    const newPassword = document.getElementById("newPassword").value.trim();
-    const isAdmin = document.getElementById("isAdmin").checked;
-    if (!newUsername || !newPassword) {
-      showToast("Username and password are required!");
-      return;
-    }
-    let url = "addUser.php";
-    if (window.setupMode) {
-      url += "?setup=1";
-    }
-    fetch(url, {
-      method: "POST",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": window.csrfToken
-      },
-      body: JSON.stringify({ username: newUsername, password: newPassword, isAdmin })
-    })
-      .then(response => response.json())
-      .then(data => {
-        if (data.success) {
-          showToast("User added successfully!");
-          closeAddUserModal();
-          checkAuthentication(false); // Re-check without showing toast
-        } else {
-          showToast("Error: " + (data.error || "Could not add user"));
-        }
-      })
-      .catch(error => console.error("Error adding user:", error));
-  });
-  document.getElementById("cancelUserBtn").addEventListener("click", function () {
-    closeAddUserModal();
-  });
-
-  // Remove User functionality.
-  document.getElementById("removeUserBtn").addEventListener("click", function () {
-    loadUserList();
-    toggleVisibility("removeUserModal", true);
-  });
-  document.getElementById("deleteUserBtn").addEventListener("click", function () {
-    const selectElem = document.getElementById("removeUsernameSelect");
-    const usernameToRemove = selectElem.value;
-    if (!usernameToRemove) {
-      showToast("Please select a user to remove.");
-      return;
-    }
-    if (!confirm("Are you sure you want to delete user " + usernameToRemove + "?")) {
-      return;
-    }
-    fetch("removeUser.php", {
-      method: "POST",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-        "X-CSRF-Token": window.csrfToken
-      },
-      body: JSON.stringify({ username: usernameToRemove })
-    })
-      .then(response => response.json())
-      .then(data => {
-        if (data.success) {
-          showToast("User removed successfully!");
-          closeRemoveUserModal();
-          loadUserList();
-        } else {
-          showToast("Error: " + (data.error || "Could not remove user"));
-        }
-      })
-      .catch(error => console.error("Error removing user:", error));
-  });
-  document.getElementById("cancelRemoveUserBtn").addEventListener("click", function () {
-    closeRemoveUserModal();
-  });
-}
-
-function checkAuthentication(showLoginToast = true) {
-  // Optionally pass a flag so we don't show a toast every time.
-  return sendRequest("checkAuth.php")
-    .then(data => {
-      if (data.setup) {
-        window.setupMode = true;
-        if (showLoginToast) showToast("Setup mode: No users found. Please add an admin user.");
-        toggleVisibility("loginForm", false);
-        toggleVisibility("mainOperations", false);
-        document.querySelector(".header-buttons").style.visibility = "hidden";
-        toggleVisibility("addUserModal", true);
-        return false;
-      }
-      window.setupMode = false;
-      if (data.authenticated) {
-        return data;
-      } else {
-        if (showLoginToast) showToast("Please log in to continue.");
-        toggleVisibility("loginForm", true);
-        toggleVisibility("mainOperations", false);
-        toggleVisibility("uploadFileForm", false);
-        toggleVisibility("fileListContainer", false);
-        document.querySelector(".header-buttons").style.visibility = "hidden";
-        return false;
-      }
-    })
-    .catch(error => {
-      console.error("Error checking authentication:", error);
-      return false;
-    });
-}
-window.checkAuthentication = checkAuthentication;
-
-window.changeItemsPerPage = function (value) {
-  localStorage.setItem("itemsPerPage", value);
-  const folder = window.currentFolder || "root";
-  if (typeof renderFileTable === "function") {
-    renderFileTable(folder);
-  }
-};
-
-document.addEventListener("DOMContentLoaded", function () {
-  const selectElem = document.querySelector(".form-control.bottom-select");
-  if (selectElem) {
-    const stored = localStorage.getItem("itemsPerPage") || "10";
-    selectElem.value = stored;
-  }
-});
-
-function resetUserForm() {
-  document.getElementById("newUsername").value = "";
-  document.getElementById("newPassword").value = "";
-}
-
-function closeAddUserModal() {
-  toggleVisibility("addUserModal", false);
-  resetUserForm();
-}
-
-function closeRemoveUserModal() {
-  toggleVisibility("removeUserModal", false);
-  document.getElementById("removeUsernameSelect").innerHTML = "";
-}
-
-function loadUserList() {
-  fetch("getUsers.php", { credentials: "include" })
-    .then(response => response.json())
-    .then(data => {
-      const users = Array.isArray(data) ? data : (data.users || []);
-      const selectElem = document.getElementById("removeUsernameSelect");
-      selectElem.innerHTML = "";
-      users.forEach(user => {
-        const option = document.createElement("option");
-        option.value = user.username;
-        option.textContent = user.username;
-        selectElem.appendChild(option);
-      });
-      if (selectElem.options.length === 0) {
-        showToast("No other users found to remove.");
-        closeRemoveUserModal();
-      }
-    })
-    .catch(error => console.error("Error loading user list:", error));
-}
-
-export { initAuth, checkAuthentication };

auth.php

@@ -1,55 +1,259 @@
 <?php
-require 'config.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)) {
+        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;
+}
+
+/* --- OIDC Authentication Flow --- */
+// 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)) {
+        $enc = file_get_contents($adminConfigFile);
+        $dec = decryptData($enc, $encryptionKey);
+        $cfg = $dec !== false ? json_decode($dec, true) : [];
+    } else {
+        $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,
+        $oidc_client_id,
+        $oidc_client_secret
+    );
+    $oidc->setRedirectURL($oidc_redirect_uri);
+
+    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;
+            $_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();
+        }
+    }
+}
+
+/* --- Fallback: Form-based Authentication --- */
 $usersFile = USERS_DIR . USERS_FILE;
+$maxAttempts = 5;
+$lockoutTime = 30 * 60; // 30 minutes
+$attemptsFile = USERS_DIR . 'failed_logins.json';
+$failedLogFile = USERS_DIR . 'failed_login.log';
+$persistentTokensFile = USERS_DIR . 'persistent_tokens.json';
 
-// Function to authenticate user
-function authenticate($username, $password)
-{
-    global $usersFile;
+function loadFailedAttempts($file) {
+    if (file_exists($file)) {
+        $data = json_decode(file_get_contents($file), true);
+        if (is_array($data)) {
+            return $data;
+        }
+    }
+    return [];
+}
 
+function saveFailedAttempts($file, $data) {
+    file_put_contents($file, json_encode($data, JSON_PRETTY_PRINT), LOCK_EX);
+}
+
+$ip = $_SERVER['REMOTE_ADDR'];
+$currentTime = time();
+$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();
+    }
+}
+
+function authenticate($username, $password) {
+    global $usersFile, $encryptionKey;
     if (!file_exists($usersFile)) {
         return false;
     }
-
     $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
     foreach ($lines as $line) {
-        list($storedUser, $storedPass, $storedRole) = explode(':', trim($line), 3);
-        if ($username === $storedUser && password_verify($password, $storedPass)) {
-            return $storedRole; // Return the user's role
+        $parts = explode(':', trim($line));
+        if (count($parts) < 3) continue;
+        if ($username === $parts[0] && password_verify($password, $parts[1])) {
+            $result = ['role' => $parts[2]];
+            $result['totp_secret'] = (isset($parts[3]) && !empty($parts[3]))
+                ? decryptData($parts[3], $encryptionKey)
+                : null;
+            return $result;
         }
     }
     return false;
 }
 
-// Get JSON input
 $data = json_decode(file_get_contents("php://input"), true);
 $username = trim($data["username"] ?? "");
 $password = trim($data["password"] ?? "");
+$rememberMe = isset($data["remember_me"]) && $data["remember_me"] === true;
 
-// Validate input: ensure both fields are provided.
 if (!$username || !$password) {
+    http_response_code(400);
     echo json_encode(["error" => "Username and password are required"]);
-    exit;
+    exit();
 }
 
-// Validate username format: allow only letters, numbers, underscores, dashes, and spaces.
 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;
+    exit();
 }
 
-// Authenticate user
-$userRole = authenticate($username, $password);
-if ($userRole !== false) {
-    // Regenerate session ID to mitigate session fixation attacks
+$user = authenticate($username, $password);
+if ($user !== false) {
+    if (!empty($user['totp_secret'])) {
+        // 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"
+            ]);
+            exit();
+        } else {
+            $tfa = new \RobThree\Auth\TwoFactorAuth('FileRise');
+            $providedCode = trim($data['totp_code']);
+            if (!$tfa->verifyCode($user['totp_secret'], $providedCode)) {
+                echo json_encode(["error" => "Invalid TOTP code"]);
+                exit();
+            }
+        }
+    }
+    if (isset($failedAttempts[$ip])) {
+        unset($failedAttempts[$ip]);
+        saveFailedAttempts($attemptsFile, $failedAttempts);
+    }
     session_regenerate_id(true);
     $_SESSION["authenticated"] = true;
     $_SESSION["username"] = $username;
-    $_SESSION["isAdmin"] = ($userRole === "1"); // "1" indicates admin
-
-    echo json_encode(["success" => "Login successful", "isAdmin" => $_SESSION["isAdmin"]]);
+    $_SESSION["isAdmin"] = ($user['role'] === "1");
+    $_SESSION["folderOnly"] = loadUserPermissions($username);
+    
+    if ($rememberMe) {
+        $token = bin2hex(random_bytes(32));
+        $expiry = time() + (30 * 24 * 60 * 60);
+        $persistentTokens = [];
+        if (file_exists($persistentTokensFile)) {
+            $encryptedContent = file_get_contents($persistentTokensFile);
+            $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+            $persistentTokens = json_decode($decryptedContent, true);
+            if (!is_array($persistentTokens)) {
+                $persistentTokens = [];
+            }
+        }
+        $persistentTokens[$token] = [
+            "username" => $username,
+            "expiry"   => $expiry,
+            "isAdmin"  => ($_SESSION["isAdmin"] === true)
+        ];
+        $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"],
+      "username"  => $_SESSION["username"]
+    ]);
 } else {
+    if (isset($failedAttempts[$ip])) {
+        $failedAttempts[$ip]['count']++;
+        $failedAttempts[$ip]['last_attempt'] = $currentTime;
+    } else {
+        $failedAttempts[$ip] = ['count' => 1, 'last_attempt' => $currentTime];
+    }
+    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"]);
 }
+?>

changePassword.php

@@ -0,0 +1,99 @@
+<?php
+// changePassword.php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+$username = $_SESSION['username'] ?? '';
+if (!$username) {
+    echo json_encode(["error" => "No username in session"]);
+    exit;
+}
+
+// CSRF token check.
+$headers = array_change_key_case(getallheaders(), CASE_LOWER);
+$receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+if ($receivedToken !== $_SESSION['csrf_token']) {
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    http_response_code(403);
+    exit;
+}
+
+// Get POST data.
+$data = json_decode(file_get_contents("php://input"), true);
+$oldPassword = trim($data["oldPassword"] ?? "");
+$newPassword = trim($data["newPassword"] ?? "");
+$confirmPassword = trim($data["confirmPassword"] ?? "");
+
+// Validate input.
+if (!$oldPassword || !$newPassword || !$confirmPassword) {
+    echo json_encode(["error" => "All fields are required."]);
+    exit;
+}
+if ($newPassword !== $confirmPassword) {
+    echo json_encode(["error" => "New passwords do not match."]);
+    exit;
+}
+
+// Path to users file.
+$usersFile = USERS_DIR . USERS_FILE;
+if (!file_exists($usersFile)) {
+    echo json_encode(["error" => "Users file not found"]);
+    exit;
+}
+
+// Read current users.
+$lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+$userFound = false;
+$newLines = [];
+
+foreach ($lines as $line) {
+    $parts = explode(':', trim($line));
+    // Expect at least 3 parts: username, hashed password, and role.
+    if (count($parts) < 3) {
+        // Skip invalid lines.
+        $newLines[] = $line;
+        continue;
+    }
+    $storedUser = $parts[0];
+    $storedHash = $parts[1];
+    $storedRole = $parts[2];
+    // Preserve TOTP secret if it exists.
+    $totpSecret = (count($parts) >= 4) ? $parts[3] : "";
+    
+    if ($storedUser === $username) {
+        $userFound = true;
+        // Verify the old password.
+        if (!password_verify($oldPassword, $storedHash)) {
+            echo json_encode(["error" => "Old password is incorrect."]);
+            exit;
+        }
+        // Hash the new password.
+        $newHashedPassword = password_hash($newPassword, PASSWORD_BCRYPT);
+        // Rebuild the line with the new hash and preserve TOTP secret if present.
+        if ($totpSecret !== "") {
+            $newLines[] = $username . ":" . $newHashedPassword . ":" . $storedRole . ":" . $totpSecret;
+        } else {
+            $newLines[] = $username . ":" . $newHashedPassword . ":" . $storedRole;
+        }
+    } else {
+        $newLines[] = $line;
+    }
+}
+
+if (!$userFound) {
+    echo json_encode(["error" => "User not found."]);
+    exit;
+}
+
+// Save updated users file.
+if (file_put_contents($usersFile, implode(PHP_EOL, $newLines) . PHP_EOL)) {
+    echo json_encode(["success" => "Password updated successfully."]);
+} else {
+    echo json_encode(["error" => "Could not update password."]);
+}
+?>

checkAuth.php

@@ -1,22 +1,70 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
-// Check if users.txt is empty or doesn't exist
+// Check if users.txt is empty or doesn't exist.
 $usersFile = USERS_DIR . USERS_FILE;
 if (!file_exists($usersFile) || trim(file_get_contents($usersFile)) === '') {
-    // Return JSON indicating setup mode
+    // In production, you might log that the system is in setup mode.
+    error_log("checkAuth: users file not found or empty; entering setup mode.");
     echo json_encode(["setup" => true]);
     exit();
 }
 
+// Check session authentication.
 if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     echo json_encode(["authenticated" => false]);
-    exit;
+    exit();
 }
 
-echo json_encode([
+/**
+ * Helper function to get a user's role from users.txt.
+ * Returns the role as a string (e.g. "1") or null if not found.
+ */
+function getUserRole($username) {
+    global $usersFile;
+    if (file_exists($usersFile)) {
+        $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+        foreach ($lines as $line) {
+            $parts = explode(":", trim($line));
+            if (count($parts) >= 3 && $parts[0] === $username) {
+                return trim($parts[2]);
+            }
+        }
+    }
+    return null;
+}
+
+// Determine if TOTP is enabled by checking users.txt.
+$totp_enabled = false;
+$username = $_SESSION['username'] ?? '';
+if ($username) {
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        $parts = explode(":", trim($line));
+        // Assuming first field is username and fourth (if exists) is the TOTP secret.
+        if ($parts[0] === $username) {
+            if (isset($parts[3]) && trim($parts[3]) !== "") {
+                $totp_enabled = true;
+            }
+            break;
+        }
+    }
+}
+
+// Use getUserRole() to determine admin status.
+// We cast the role to an integer so that "1" (string) is treated as true.
+$userRole = getUserRole($username);
+$isAdmin = ((int)$userRole === 1);
+
+// Build and return the JSON response.
+$response = [
     "authenticated" => true,
-    "isAdmin" => isset($_SESSION["isAdmin"]) ? $_SESSION["isAdmin"] : false
-]);
+    "isAdmin"       => $isAdmin,
+    "totp_enabled"  => $totp_enabled,
+    "username"      => $username,
+    "folderOnly"    => isset($_SESSION["folderOnly"]) ? $_SESSION["folderOnly"] : false
+];
+
+echo json_encode($response);
 ?>

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

@@ -1,10 +1,86 @@
 <?php
 // config.php
 
-// Allow an environment variable to override HTTPS detection.
+// Define constants.
+define('UPLOAD_DIR', '/var/www/uploads/');
+define('USERS_DIR', '/var/www/users/');
+define('USERS_FILE', 'users.txt');
+define('META_DIR', '/var/www/metadata/');
+define('META_FILE', 'file_metadata.json');
+define('TRASH_DIR', UPLOAD_DIR . 'trash/');
+define('TIMEZONE', 'America/New_York');
+define('DATE_TIME_FORMAT', 'm/d/y  h:iA');
+define('TOTAL_UPLOAD_SIZE', '5G');
+
+date_default_timezone_set(TIMEZONE);
+
+/**
+ * Encrypts data using AES-256-CBC.
+ *
+ * @param string $data The plaintext.
+ * @param string $encryptionKey The encryption key.
+ * @return string Base64-encoded string containing IV and ciphertext.
+ */
+function encryptData($data, $encryptionKey)
+{
+    $cipher = 'AES-256-CBC';
+    $ivlen = openssl_cipher_iv_length($cipher);
+    $iv = openssl_random_pseudo_bytes($ivlen);
+    $ciphertext = openssl_encrypt($data, $cipher, $encryptionKey, OPENSSL_RAW_DATA, $iv);
+    return base64_encode($iv . $ciphertext);
+}
+
+/**
+ * Decrypts data encrypted with AES-256-CBC.
+ *
+ * @param string $encryptedData Base64-encoded data containing IV and ciphertext.
+ * @param string $encryptionKey The encryption key.
+ * @return string|false The decrypted plaintext or false on failure.
+ */
+function decryptData($encryptedData, $encryptionKey)
+{
+    $cipher = 'AES-256-CBC';
+    $data = base64_decode($encryptedData);
+    $ivlen = openssl_cipher_iv_length($cipher);
+    $iv = substr($data, 0, $ivlen);
+    $ciphertext = substr($data, $ivlen);
+    return openssl_decrypt($ciphertext, $cipher, $encryptionKey, OPENSSL_RAW_DATA, $iv);
+}
+
+// Load encryption key from environment (override in production).
+$encryptionKey = getenv('PERSISTENT_TOKENS_KEY') ?: 'default_please_change_this_key';
+if (!$encryptionKey) {
+    die('Encryption key for persistent tokens is not set.');
+}
+
+function loadUserPermissions($username)
+{
+    global $encryptionKey;
+    $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);
+        }
+
+        if (is_array($permissions) && array_key_exists($username, $permissions)) {
+            $result = $permissions[$username];
+            return !empty($result) ? $result : false;
+        }
+    }
+    // Removed error_log() to prevent flooding logs when file is not found.
+    return false; // Return false if no permissions found.
+}
+
+// Determine whether HTTPS is used.
 $envSecure = getenv('SECURE');
 if ($envSecure !== false) {
-    // Convert the environment variable value to a boolean.
     $secure = filter_var($envSecure, FILTER_VALIDATE_BOOLEAN);
 } else {
     $secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
@@ -13,25 +89,52 @@ if ($envSecure !== false) {
 $cookieParams = [
     'lifetime' => 7200,
     'path'     => '/',
-    'domain'   => '', // Specify your domain if needed
+    'domain'   => '', // Set your domain as needed.
     'secure'   => $secure,
     'httponly' => true,
     'samesite' => 'Lax'
 ];
-session_set_cookie_params($cookieParams);
 
-ini_set('session.gc_maxlifetime', 7200);
-session_start();
+if (session_status() === PHP_SESSION_NONE) {
+    session_set_cookie_params($cookieParams);
+    ini_set('session.gc_maxlifetime', 7200);
+    session_start();
+}
 
 if (empty($_SESSION['csrf_token'])) {
     $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
 }
 
-// Define BASE_URL (this should point to where index.html is, e.g. your uploads directory)
+// Auto-login via persistent token.
+if (!isset($_SESSION["authenticated"]) && isset($_COOKIE['remember_me_token'])) {
+    $persistentTokensFile = USERS_DIR . 'persistent_tokens.json';
+    $persistentTokens = [];
+    if (file_exists($persistentTokensFile)) {
+        $encryptedContent = file_get_contents($persistentTokensFile);
+        $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+        $persistentTokens = json_decode($decryptedContent, true);
+        if (!is_array($persistentTokens)) {
+            $persistentTokens = [];
+        }
+    }
+    if (isset($persistentTokens[$_COOKIE['remember_me_token']])) {
+        $tokenData = $persistentTokens[$_COOKIE['remember_me_token']];
+        if ($tokenData['expiry'] >= time()) {
+            $_SESSION["authenticated"] = true;
+            $_SESSION["username"] = $tokenData["username"];
+            // IMPORTANT: Set the folderOnly flag here for auto-login.
+            $_SESSION["folderOnly"] = loadUserPermissions($tokenData["username"]);
+        } else {
+            unset($persistentTokens[$_COOKIE['remember_me_token']]);
+            $newEncryptedContent = encryptData(json_encode($persistentTokens, JSON_PRETTY_PRINT), $encryptionKey);
+            file_put_contents($persistentTokensFile, $newEncryptedContent, LOCK_EX);
+            setcookie('remember_me_token', '', time() - 3600, '/', '', $secure, true);
+        }
+    }
+}
+
 define('BASE_URL', 'http://yourwebsite/uploads/');
 
-// If BASE_URL is still the default placeholder, use the server's HTTP_HOST.
-// Otherwise, use BASE_URL and append share.php.
 if (strpos(BASE_URL, 'yourwebsite') !== false) {
     $defaultShareUrl = isset($_SERVER['HTTP_HOST'])
         ? "http://" . $_SERVER['HTTP_HOST'] . "/share.php"
@@ -39,17 +142,4 @@ if (strpos(BASE_URL, 'yourwebsite') !== false) {
 } else {
     $defaultShareUrl = rtrim(BASE_URL, '/') . "/share.php";
 }
-
 define('SHARE_URL', getenv('SHARE_URL') ? getenv('SHARE_URL') : $defaultShareUrl);
-
-define('UPLOAD_DIR', '/var/www/uploads/');
-define('TIMEZONE', 'America/New_York');
-define('DATE_TIME_FORMAT', 'm/d/y  h:iA');
-define('TOTAL_UPLOAD_SIZE', '5G');
-define('USERS_DIR', '/var/www/users/');
-define('USERS_FILE', 'users.txt');
-define('META_DIR','/var/www/metadata/');
-define('META_FILE','file_metadata.json');
-define('TRASH_DIR', UPLOAD_DIR . 'trash/');
-date_default_timezone_set(TIMEZONE);
-?>

copyFiles.php

@@ -18,6 +18,16 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     exit;
 }
 
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to copy files."]);
+        exit();
+    }
+}
+
 $data = json_decode(file_get_contents("php://input"), true);
 if (
     !$data || 

createFolder.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 // Ensure user is authenticated
@@ -24,6 +24,16 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     exit;
 }
 
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to create folders."]);
+        exit();
+    }
+}
+
 // Get the JSON input and decode it
 $input = json_decode(file_get_contents('php://input'), true);
 if (!isset($input['folderName'])) {

createShareLink.php

@@ -20,10 +20,8 @@ if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
     exit;
 }
 
-// Optionally, you could check if the file exists in the uploads directory here.
-
 // Generate a secure token.
-$token = bin2hex(random_bytes(4)); // 8 hex characters.
+$token = bin2hex(random_bytes(16)); // 32 hex characters.
 
 // Calculate expiration (Unix timestamp).
 $expires = time() + ($expirationMinutes * 60);
@@ -42,6 +40,14 @@ if (file_exists($shareFile)) {
     }
 }
 
+// Clean up expired share links.
+$currentTime = time();
+foreach ($shareLinks as $key => $link) {
+    if ($link["expires"] < $currentTime) {
+        unset($shareLinks[$key]);
+    }
+}
+
 // Add record.
 $shareLinks[$token] = [
     "folder" => $folder,

css/styles.css

@@ -12,31 +12,28 @@ body {
 
 body {
   letter-spacing: 0.2px;
+  overflow-x: hidden;
+}
+
+.custom-dash {
+  display: inline-block;
+  transform: scaleX(1.5);
+  padding-left: 2px !important;
+  padding-right: 2px !important;
 }
 
 /* CONTAINER */
-.container {
-  margin-top: 20px;
-}
-
+.container,
 .container-fluid {
-  padding-left: 5px !important;
-  padding-right: 5px !important;
-  margin-top: 20px;
+  margin-top: 10px;
+  padding-right: 4px !important;
+  padding-left: 4px !important;
 }
 
-/* Increase left/right padding for larger screens */
-@media (min-width: 768px) {
+@media (min-width: 1300px) {
   .container-fluid {
-    padding-left: 50px !important;
-    padding-right: 50px !important;
-  }
-}
-
-@media (min-width: 1200px) {
-  .container-fluid {
-    padding-left: 100px !important;
-    padding-right: 100px !important;
+    padding-left: 40px !important;
+    padding-right: 40px !important;
   }
 }
 
@@ -47,9 +44,6 @@ body {
 /************************************************************/
 /* FLEXBOX HEADER: LOGO, TITLE, BUTTONS FIXED               */
 /************************************************************/
-#uploadCard, #folderManagementCard {
-  min-height: 342px;
-}
 
 .btn-login {
   margin-top: 10px;
@@ -142,14 +136,14 @@ body.dark-mode header {
   justify-content: flex-end;
   flex: 1;
   min-width: 150px;
-  gap: 10px;
+  gap: 0px;
 }
 
 .header-buttons button {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 10px;
+  padding: 9px;
   border-radius: 50%;
   color: #fff;
   transition: background-color 0.2s ease, box-shadow 0.2s ease;
@@ -229,17 +223,19 @@ body.dark-mode .folder-help-tooltip {
 #folderHelpBtn i.material-icons.folder-help-icon {
   -webkit-text-fill-color: orange !important;
   color: inherit !important;
+  padding-right: 10px !important;
 }
 
 body.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
   -webkit-text-fill-color: #ffa500 !important;
+  padding-right: 10px !important;
 }
 
 /************************************************************/
 /* RESPONSIVE HEADER FIXES                                 */
 /************************************************************/
 
-@media (max-width: 970px) {
+@media (max-width: 790px) {
   .header-container {
     flex-wrap: wrap;
     height: auto;
@@ -279,7 +275,7 @@ body.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
     flex-direction: row;
     justify-content: center;
     gap: 5px;
-    margin-top: 10px;
+    margin-top: 5px;
   }
 }
 
@@ -292,12 +288,14 @@ body.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
   color: white;
 }
 
-.material-icons.folder-icon {
+.material-icons.folder-icon,
+.material-icons.gallery-icon {
   color: black;
   margin-right: 5px;
 }
 
-body.dark-mode .material-icons.folder-icon {
+body.dark-mode .material-icons.folder-icon,
+body.dark-mode .material-icons.gallery-icon {
   color: white;
   margin-right: 5px;
 }
@@ -311,7 +309,7 @@ body.dark-mode .material-icons.folder-icon {
   border: none;
   color: red;
   cursor: pointer;
-  margin-right: 8px;
+  margin-right: 0px;
   padding: 0;
   border-radius: 50%;
   transition: background-color 0.3s;
@@ -325,6 +323,10 @@ body.dark-mode .material-icons.folder-icon {
 /* ===========================================================
    FORMS & LOGIN
    =========================================================== */
+.remember-me-container {
+  margin-top: 20px !important;
+}
+
 #loginForm {
   margin: 0 auto;
   max-width: 400px;
@@ -366,21 +368,6 @@ body.dark-mode #loginForm button:hover {
    CARDS & MODALS
    =========================================================== */
 
-.card {
-  background-color: #fff;
-  color: #000;
-  border: 1px solid #ddd;
-  max-width: 900px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-body.dark-mode .card {
-  background-color: #2c2c2c;
-  color: #e0e0e0;
-  border: 1px solid #444;
-}
-
 #restoreFilesModal .modal-content {
   position: fixed !important;
   top: 50% !important;
@@ -521,17 +508,6 @@ body.dark-mode .modal .modal-content {
   border-color: #444;
 }
 
-.editor-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 5px 10px;
-}
-
-body.dark-mode .editor-header {
-  background-color: #2c2c2c;
-}
-
 .editor-close-btn {
   position: absolute;
   top: 10px;
@@ -574,12 +550,12 @@ body.dark-mode .editor-close-btn:hover {
 /* Editor Modal */
 .editor-modal {
   position: fixed;
-  top: 5%;
+  top: 2%;
   left: 5%;
   width: 90vw;
   height: 90vh;
   background-color: #fff;
-  padding: 20px;
+  padding: 10px 20px 20px 20px;
   border: 1px solid #ccc;
   border-radius: 4px !important;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
@@ -616,15 +592,25 @@ body.dark-mode .editor-modal {
   }
 }
 
-.editor-title {
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  font-size: 1.5rem;
-  max-width: 95%;
-  display: block;
+.editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 33px;
+  padding: 0 10px;
+  margin-bottom: 7px;
 }
 
+.editor-title {
+  margin: 0;
+  line-height: 33px;
+}
+
+body.dark-mode .editor-header {
+  background-color: #2c2c2c;
+}
+
+
 @media (max-width: 600px) {
   .editor-title {
     font-size: 1.2rem;
@@ -634,6 +620,7 @@ body.dark-mode .editor-modal {
 
 .editor-controls {
   text-align: right;
+  margin-right: 30px;
   margin-bottom: 5px;
 }
 
@@ -690,6 +677,37 @@ body.dark-mode .editor-modal {
 /* ===========================================================
    UPLOAD PROGRESS STYLES
    =========================================================== */
+.pause-resume-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  outline: none;
+  margin-right: 5px;
+}
+
+.material-icons.pauseResumeBtn {
+  color: black !important;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+body.dark-mode .material-icons.pauseResumeBtn {
+  color: white !important;
+}
+
+body.dark-mode .material-icons.pauseResumeBtn:hover {
+  background-color: rgba(255, 215, 0, 0.3);
+  color: #fff;
+}
+
+body:not(.dark-mode) .material-icons.pauseResumeBtn:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #000;
+}
+
 #uploadProgressContainer ul {
   list-style: none;
   padding: 0;
@@ -899,6 +917,7 @@ body.dark-mode #fileList table tr {
   word-break: break-word !important;
   text-align: left !important;
   line-height: 1.2 !important;
+  vertical-align: middle !important;
   padding: 8px 10px !important;
   max-width: 250px !important;
   min-width: 120px !important;
@@ -978,29 +997,6 @@ label {
   display: none;
 }
 
-#uploadFolderRow {
-  margin-bottom: 20px;
-}
-
-@media (max-width: 768px) {
-  #uploadFolderRow .col-md-6 {
-    margin-bottom: 15px;
-  }
-
-  #uploadFolderRow .col-md-6:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.card-header {
-  font-size: 1.2rem;
-  font-weight: bold;
-}
-
-.card-body .form-group {
-  margin-bottom: 5px !important;
-}
-
 #createFolderBtn {
   margin-top: 0px !important;
   height: 40px !important;
@@ -1055,37 +1051,9 @@ body.dark-mode .custom-prev-next-btn:hover:not(:disabled) {
   background-color: #555;
 }
 
-.folder-option:hover {
-  background-color: #f0f0f0;
-  padding: 2px 4px;
-}
-
-.folder-option.selected {
-  background-color: #d0d0d0;
-  border-radius: 4px;
-  padding: 2px 4px;
-}
-
-body.dark-mode .folder-option.selected {
-  background-color: #444;
-  color: #fff;
-  border-radius: 4px;
-  padding: 2px 4px;
-}
-
-body.dark-mode .folder-option:hover {
-  background-color: #333;
-  color: #fff;
-  padding: 2px 4px;
-}
-
-.custom-folder-card-body {
-  padding-top: 5px !important;
-}
-
 #customToast {
   position: fixed;
-  top: 20px;
+  bottom: 20px;
   right: 20px;
   background: #333;
   color: #fff;
@@ -1100,7 +1068,7 @@ body.dark-mode .folder-option:hover {
 }
 
 #customToast.show {
-  opacity: 1;
+  opacity: 0.9;
 }
 
 .button-wrap {
@@ -1129,9 +1097,17 @@ body.dark-mode .folder-option:hover {
 }
 
 #fileListContainer {
-  padding: 10px;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  max-width: 100%;
+  padding-bottom: 10px !important;
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+  margin: 0 auto 20px;
+}
+
+@media (max-width: 750px) {
+  #fileListContainer {
+    width: 99%;
+  }
 }
 
 body.dark-mode #fileListContainer {
@@ -1139,9 +1115,6 @@ body.dark-mode #fileListContainer {
   color: #e0e0e0;
   border: 1px solid #444;
   border-radius: 8px;
-  padding: 10px;
-  margin-top: 20px;
-
 }
 
 #fileListContainer>h2,
@@ -1160,7 +1133,7 @@ body.dark-mode #fileListContainer {
 }
 
 .col-12.col-md-4.text-left {
-  margin-left: -15px;
+  margin-left: -17px;
 }
 
 @media (max-width: 600px) {
@@ -1171,6 +1144,7 @@ body.dark-mode #fileListContainer {
 
 #fileListTitle {
   font-size: 1.8em;
+  margin-top: 10px;
   margin-bottom: 15px;
 }
 
@@ -1231,6 +1205,24 @@ body.dark-mode #fileListContainer {
 /* ===========================================================
    FOLDER TREE STYLES
    =========================================================== */
+/* Make breadcrumb links look clickable */
+.breadcrumb-link {
+  cursor: pointer;
+  color: #007bff;
+  text-decoration: underline;
+}
+
+.breadcrumb-link:hover {
+  color: #0056b3;
+}
+
+.breadcrumb-link.selected {
+  background-color: #e9ecef;
+  font-weight: bold;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
 .folder-tree {
   list-style-type: none;
   padding-left: 10px;
@@ -1263,15 +1255,38 @@ body.dark-mode #fileListContainer {
   width: 30px;
 }
 
-.folder-option {
-  cursor: pointer;
-
-}
-
 #folderTreeContainer {
   display: block;
 }
 
+.folder-option {
+  cursor: pointer;
+}
+
+.folder-option:hover {
+  background-color: #f0f0f0;
+  padding: 2px 4px;
+}
+
+.folder-option.selected {
+  background-color: #d0d0d0;
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+
+body.dark-mode .folder-option.selected {
+  background-color: #444;
+  color: #fff;
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+
+body.dark-mode .folder-option:hover {
+  background-color: #333;
+  color: #fff;
+  padding: 2px 4px;
+}
+
 /* ===========================================================
    FILE MANAGER INLINE STYLE REMOVAL - New Classes
    =========================================================== */
@@ -1280,12 +1295,13 @@ body.dark-mode #fileListContainer {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: nowrap;
-  text-align: center;
-  min-height: 30px;
-  margin: 0 auto 10px;
-  padding: 10px;
-  width: 90% !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 25px;
+  padding: 5px;
+  margin-bottom: 10px;
+  max-width: 90%;
 }
 
 .image-preview-modal-content {
@@ -1329,7 +1345,6 @@ body.dark-mode .image-preview-modal-content {
 }
 
 .share-btn {
-  /* Your custom styles here */
   border: none;
   color: white;
   padding: 8px 12px;
@@ -1567,7 +1582,7 @@ body.dark-mode .btn-secondary {
 
 #toggleViewBtn {
   margin-bottom: 20px;
-  margin-left: 15px;
+  margin-left: 14px;
   padding: 10px 20px;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
@@ -1579,9 +1594,15 @@ body.dark-mode .btn-secondary {
   transition: background 0.3s ease, box-shadow 0.3s ease;
 }
 
+@media (max-width: 768px) {
+  #toggleViewBtn {
+    margin-left: 0 !important;
+  }
+}
+
 @media (max-width: 600px) {
   #toggleViewBtn {
-    margin-left: auto !important;
+    margin-left: 0 !important;
     margin-right: auto !important;
     display: block !important;
   }
@@ -1701,7 +1722,7 @@ body.dark-mode .folder-help-summary {
 body.dark-mode .folder-help-icon {
   color: #f6a72c;
   font-size: 20px;
-  
+
 }
 
 body.dark-mode #searchIcon {
@@ -1796,4 +1817,306 @@ body.dark-mode .drop-hover {
 
 #restoreFilesList li label {
   margin-left: 8px !important;
+}
+
+body.dark-mode #fileContextMenu {
+  background-color: #2c2c2c !important;
+  border: 1px solid #555 !important;
+  color: #e0e0e0 !important;
+}
+body.dark-mode #fileContextMenu div {
+  color: #e0e0e0 !important;
+}
+
+#folderContextMenu {
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+}
+body.dark-mode #folderContextMenu {
+  background-color: #2c2c2c;
+  border-color: #555;
+  color: #e0e0e0;
+}
+
+.main-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.drop-target-sidebar {
+  display: none;
+  width: 50px;
+  transition: width 0.3s ease;
+  background-color: #f8f9fa;
+  border-right: 2px dashed #1565C0;
+  padding: 10px;
+}
+@media (min-width: 769px) {
+  .drop-target-sidebar {
+    display: block;
+  }
+}
+.drop-target-sidebar.active {
+  width: 350px;
+}
+
+.main-column {
+  flex: 1;
+  transition: margin-left 0.3s ease;
+}
+
+#uploadFolderRow {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 1rem;
+}
+@media (max-width: 768px) {
+  #uploadFolderRow {
+    gap: 0px;
+  }
+}
+#leftCol,
+#rightCol {
+  display: flex;
+  justify-content: center;
+  min-width: 370px;
+  align-self: flex-start;
+}
+
+#leftCol {
+  flex: 0 1 60%;
+}
+#rightCol {
+  flex: 0 1 40%;
+
+}
+
+@media (max-width: 768px) {
+  .main-wrapper {
+    flex-direction: column;
+  }
+  .drop-target-sidebar {
+    display: none !important;
+  }
+  #uploadFolderRow {
+    flex-wrap: wrap;
+  }
+  #leftCol, #rightCol {
+    flex: 0 1 100% !important;
+  }
+  #rightCol {
+    margin-bottom: 0;
+  }
+}
+
+#sidebarDropArea.highlight,
+#uploadFolderRow.highlight {
+  border: 2px dashed #1565C0;
+  background-color: #eef;
+}
+
+.drag-header {
+  cursor: grab;
+  user-select: none;
+  position: relative;
+}
+
+.drag-header::after {
+  content: '⋮⋮';
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: #1565C0;
+  pointer-events: none;
+}
+
+.dragging {
+  transform: scale(1.05);
+  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  z-index: 10000;
+}
+
+#uploadCard,
+#folderManagementCard {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  width: 100%;
+  margin-bottom: 20px;
+  min-height: 353px;
+}
+
+
+#uploadFolderRow.highlight {
+  min-height: 353px;
+  margin-bottom: 20px;
+}
+
+#sidebarDropArea,
+#uploadFolderRow {
+  background-color: transparent;
+}
+#sidebarDropArea {
+  display: none;
+}
+
+body.dark-mode #sidebarDropArea,
+body.dark-mode #uploadFolderRow {
+  background-color: transparent;
+}
+
+body.dark-mode #sidebarDropArea.highlight,
+body.dark-mode #uploadFolderRow.highlight { 
+  background-color: #333; 
+  border: 2px dashed #555; 
+  color: #fff;
+}
+
+.drop-target-sidebar.highlight {
+  margin-top: 10px;
+}
+
+.drop-target-sidebar:not(.highlight) {
+  border: none !important;
+}
+
+.dragging:focus {
+  outline: none;
+}
+
+#sidebarDropArea > .card {
+  margin-bottom: 1rem;
+}
+
+.card {
+  background-color: #fff;
+  color: #000;
+  border: 1px solid #ddd;
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+body.dark-mode .card {
+  background-color: #2c2c2c;
+  color: #e0e0e0;
+  border: 1px solid #444;
+}
+
+.card-header {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.custom-folder-card-body {
+  padding-top: 5px !important;
+  padding-right: 0 !important;
+}
+
+#addUserModal,
+#removeUserModal {
+  z-index: 5000 !important;
+}
+
+#customConfirmModal {
+  z-index: 6000 !important;  
+}
+
+.admin-panel-content {
+  background: #fff;
+  color: #000;
+}
+
+body.dark-mode .admin-panel-content {
+  background: #2c2c2c;
+  color: #e0e0e0;
+  border: 1px solid #444;
+}
+
+body.dark-mode .admin-panel-content input,
+body.dark-mode .admin-panel-content select,
+body.dark-mode .admin-panel-content textarea {
+  background: #3a3a3a;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+
+body.dark-mode .admin-panel-content label {
+  color: #e0e0e0;
+}
+
+#openChangePasswordModalBtn {
+  width: auto;
+  padding: 5px 10px;
+  font-size: 14px;
+  margin-right: 300px;
+}
+
+#changePasswordModal {
+  z-index: 9999;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.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;
 }

deleteFiles.php

@@ -19,6 +19,20 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     exit;
 }
 
+// Define $username first.
+$username = $_SESSION['username'] ?? '';
+
+// Now load the user's permissions.
+$userPermissions = loadUserPermissions($username);
+
+// Check if the user is read-only.
+if ($username) {
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to delete files."]);
+        exit();
+    }
+}
+
 // --- Setup Trash Folder & Metadata ---
 $trashDir = rtrim(TRASH_DIR, '/\\') . DIRECTORY_SEPARATOR;
 if (!file_exists($trashDir)) {

deleteFolder.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 // Ensure user is authenticated
@@ -24,6 +24,16 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     exit;
 }
 
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to delete folders."]);
+        exit();
+    }
+}
+
 // Get the JSON input and decode it
 $input = json_decode(file_get_contents('php://input'), true);
 if (!isset($input['folder'])) {

deleteTrashFiles.php

@@ -1,5 +1,4 @@
 <?php
-session_start();
 require_once 'config.php';
 header('Content-Type: application/json');
 

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;
 ?>

extractZip.php

@@ -0,0 +1,165 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// --- CSRF Protection ---
+$headers = array_change_key_case(getallheaders(), CASE_LOWER);
+$receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+if ($receivedToken !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    exit;
+}
+
+// Ensure user is authenticated.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    http_response_code(401);
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to extract zip files"]);
+        exit();
+    }
+}
+
+// Read and decode the JSON input.
+$rawData = file_get_contents("php://input");
+$data = json_decode($rawData, true);
+if (!is_array($data) || !isset($data['folder']) || !isset($data['files']) || !is_array($data['files'])) {
+    http_response_code(400);
+    echo json_encode(["error" => "Invalid input."]);
+    exit;
+}
+
+$folder = $data['folder'];
+$files = $data['files'];
+
+if (empty($files)) {
+    http_response_code(400);
+    echo json_encode(["error" => "No files specified."]);
+    exit;
+}
+
+// Validate folder name (allow "root" or valid subfolder names).
+if ($folder !== "root") {
+    $parts = explode('/', $folder);
+    foreach ($parts as $part) {
+        if (empty($part) || $part === '.' || $part === '..' || !preg_match('/^[A-Za-z0-9_\-\.\(\) ]+$/', $part)) {
+            http_response_code(400);
+            echo json_encode(["error" => "Invalid folder name."]);
+            exit;
+        }
+    }
+    $relativePath = implode(DIRECTORY_SEPARATOR, $parts) . DIRECTORY_SEPARATOR;
+} else {
+    $relativePath = "";
+}
+
+$baseDir = realpath(UPLOAD_DIR);
+if ($baseDir === false) {
+    http_response_code(500);
+    echo json_encode(["error" => "Uploads directory not configured correctly."]);
+    exit;
+}
+
+$folderPath = $baseDir . DIRECTORY_SEPARATOR . $relativePath;
+$folderPathReal = realpath($folderPath);
+if ($folderPathReal === false || strpos($folderPathReal, $baseDir) !== 0) {
+    http_response_code(404);
+    echo json_encode(["error" => "Folder not found."]);
+    exit;
+}
+
+// ---------- Metadata Setup ----------
+function getMetadataFilePath($folder) {
+    if (strtolower($folder) === 'root' || $folder === '') {
+        return META_DIR . "root_metadata.json";
+    }
+    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
+}
+
+$srcMetaFile = getMetadataFilePath($folder);
+$destMetaFile = getMetadataFilePath($folder);
+$srcMetadata = file_exists($srcMetaFile) ? json_decode(file_get_contents($srcMetaFile), true) : [];
+$destMetadata = file_exists($destMetaFile) ? json_decode(file_get_contents($destMetaFile), true) : [];
+
+$errors = [];
+$allSuccess = true;
+$extractedFiles = array(); // Array to collect names of extracted files
+$safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
+
+// ---------- Process Each File ----------
+foreach ($files as $zipFileName) {
+    $originalName = basename(trim($zipFileName));
+    // Process only .zip files.
+    if (strtolower(substr($originalName, -4)) !== '.zip') {
+        continue;
+    }
+    if (!preg_match($safeFileNamePattern, $originalName)) {
+        $errors[] = "$originalName has an invalid name.";
+        $allSuccess = false;
+        continue;
+    }
+    
+    $zipFilePath = $folderPathReal . DIRECTORY_SEPARATOR . $originalName;
+    if (!file_exists($zipFilePath)) {
+        $errors[] = "$originalName does not exist in folder.";
+        $allSuccess = false;
+        continue;
+    }
+    
+    $zip = new ZipArchive();
+    if ($zip->open($zipFilePath) !== TRUE) {
+        $errors[] = "Could not open $originalName as a zip file.";
+        $allSuccess = false;
+        continue;
+    }
+    
+    // Attempt extraction.
+    if (!$zip->extractTo($folderPathReal)) {
+        $errors[] = "Failed to extract $originalName.";
+        $allSuccess = false;
+    } else {
+        // Collect extracted file names from this zip.
+        for ($i = 0; $i < $zip->numFiles; $i++) {
+            $entryName = $zip->getNameIndex($i);
+            $extractedFileName = basename($entryName);
+            if ($extractedFileName) {
+                $extractedFiles[] = $extractedFileName;
+            }
+        }
+        // Update metadata for each extracted file if the zip file has metadata.
+        if (isset($srcMetadata[$originalName])) {
+            $zipMeta = $srcMetadata[$originalName];
+            // Iterate through all entries in the zip.
+            for ($i = 0; $i < $zip->numFiles; $i++) {
+                $entryName = $zip->getNameIndex($i);
+                $extractedFileName = basename($entryName);
+                if ($extractedFileName) {
+                    $destMetadata[$extractedFileName] = $zipMeta;
+                }
+            }
+        }
+    }
+    $zip->close();
+}
+
+// Write updated metadata back to the destination metadata file.
+if (file_put_contents($destMetaFile, json_encode($destMetadata, JSON_PRETTY_PRINT)) === false) {
+    $errors[] = "Failed to update metadata.";
+    $allSuccess = false;
+}
+
+if ($allSuccess) {
+    echo json_encode(["success" => true, "extractedFiles" => $extractedFiles]);
+} else {
+    echo json_encode(["success" => false, "error" => implode(" ", $errors)]);
+}
+exit;
+?>

getConfig.php

@@ -0,0 +1,36 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+$configFile = USERS_DIR . 'adminConfig.json';
+if (file_exists($configFile)) {
+    $encryptedContent = file_get_contents($configFile);
+    $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+    if ($decryptedContent === false) {
+        http_response_code(500);
+        echo json_encode(['error' => 'Failed to decrypt configuration.']);
+        exit;
+    }
+    // Decode the configuration and ensure globalOtpauthUrl is set
+    $config = json_decode($decryptedContent, true);
+    if (!isset($config['globalOtpauthUrl'])) {
+        $config['globalOtpauthUrl'] = "";
+    }
+    echo json_encode($config);
+} else {
+    echo json_encode([
+        'oidc' => [
+            'providerUrl'  => 'https://your-oidc-provider.com',
+            'clientId'     => 'YOUR_CLIENT_ID',
+            'clientSecret' => 'YOUR_CLIENT_SECRET',
+            'redirectUri'  => 'https://yourdomain.com/auth.php?oidc=callback'
+        ],
+        'loginOptions' => [
+            'disableFormLogin' => false,
+            'disableBasicAuth' => false,
+            'disableOIDCLogin' => false
+        ],
+        'globalOtpauthUrl' => ""
+    ]);
+}
+?>

getFileList.php

@@ -93,9 +93,14 @@ foreach ($files as $file) {
         'modified' => $fileDateModified,
         'uploaded' => $fileUploadedDate,
         'size' => $fileSizeFormatted,
-        'uploader' => $fileUploader
+        'uploader' => $fileUploader,
+        'tags' => isset($metadata[$metaKey]['tags']) ? $metadata[$metaKey]['tags'] : []
     ];
 }
 
-echo json_encode(["files" => $fileList]);
+// Load global tags from createdTags.json.
+$globalTagsFile = META_DIR . "createdTags.json";
+$globalTags = file_exists($globalTagsFile) ? json_decode(file_get_contents($globalTagsFile), true) : [];
+
+echo json_encode(["files" => $fileList, "globalTags" => $globalTags]);
 ?>

getFolderList.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 // Ensure user is authenticated

getUserPermissions.php

@@ -0,0 +1,47 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Check if the user is authenticated.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+$permissionsFile = USERS_DIR . "userPermissions.json";
+$permissionsArray = [];
+
+// Load permissions file if it exists.
+if (file_exists($permissionsFile)) {
+    $content = file_get_contents($permissionsFile);
+    // Attempt to decrypt the content.
+    $decryptedContent = decryptData($content, $encryptionKey);
+    if ($decryptedContent === false) {
+        // If decryption fails, assume the file is plain JSON.
+        $permissionsArray = json_decode($content, true);
+    } else {
+        $permissionsArray = json_decode($decryptedContent, true);
+    }
+    if (!is_array($permissionsArray)) {
+        $permissionsArray = [];
+    }
+}
+
+// If the user is an admin, return all permissions.
+if (isset($_SESSION['isAdmin']) && $_SESSION['isAdmin'] === true) {
+    echo json_encode($permissionsArray);
+    exit;
+}
+
+// Otherwise, return only the current user's permissions.
+$username = $_SESSION['username'] ?? '';
+foreach ($permissionsArray as $storedUsername => $data) {
+    if (strcasecmp($storedUsername, $username) === 0) {
+        echo json_encode($data);
+        exit;
+    }
+}
+
+// If no permissions are found for the current user, return an empty object.
+echo json_encode(new stdClass());
+?>

getUsers.php

@@ -1,24 +1,31 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
+
 if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true ||
     !isset($_SESSION['isAdmin']) || $_SESSION['isAdmin'] !== true) {
     echo json_encode(["error" => "Unauthorized"]);
     exit;
 }
+
 $usersFile = USERS_DIR . USERS_FILE;
 $users = [];
+
 if (file_exists($usersFile)) {
     $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
     foreach ($lines as $line) {
         $parts = explode(':', trim($line));
         if (count($parts) >= 3) {
-            // Optionally, validate username format:
+            // Validate username format:
             if (preg_match('/^[A-Za-z0-9_\- ]+$/', $parts[0])) {
-                $users[] = ["username" => $parts[0]];
+                $users[] = [
+                    "username" => $parts[0],
+                    "role" => trim($parts[2])
+                ];
             }
         }
     }
 }
+
 echo json_encode($users);
-?>
+?>

index.html

@@ -4,7 +4,14 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Multi File Upload Editor</title>
+  <title>FileRise</title>
+  <script>
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('logout') === '1') {
+      localStorage.removeItem("username");
+      localStorage.removeItem("userTOTPEnabled");
+    }
+  </script>
   <link rel="icon" type="image/png" href="/assets/logo.png">
   <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
   <meta name="csrf-token" content="">
@@ -20,7 +27,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"></script>
   <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>
-  <link rel="stylesheet" href="styles.css" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"></script>
+  <link rel="stylesheet" href="css/styles.css" />
 </head>
 
 <body>
@@ -35,9 +43,15 @@
               <stop offset="0%" style="stop-color:#2196F3;stop-opacity:1" />
               <stop offset="100%" style="stop-color:#1976D2;stop-opacity:1" />
             </linearGradient>
-            <!-- Drop shadow filter -->
+            <!-- Drop shadow filter with animated attributes for a lifting effect -->
             <filter id="shadowFilter" x="-20%" y="-20%" width="140%" height="140%">
-              <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.2" />
+              <feDropShadow id="dropShadow" dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.2">
+                <!-- Animate the vertical offset: from 2 to 1 (as it rises), hold, then back to 2 -->
+                <animate attributeName="dy" values="2;1;1;2" keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
+                <!-- Animate the blur similarly: from 2 to 1.5 then back to 2 -->
+                <animate attributeName="stdDeviation" values="2;1.5;1.5;2" keyTimes="0;0.2;0.8;1" dur="5s"
+                  fill="freeze" />
+              </feDropShadow>
             </filter>
           </defs>
           <style type="text/css">
@@ -61,37 +75,43 @@
               fill: #1565C0;
             }
           </style>
-          <!-- Cabinet Body with rounded corners, white outline, and drop shadow -->
-          <rect x="4" y="4" width="56" height="56" rx="6" ry="6" class="cabinet" filter="url(#shadowFilter)" />
-          <!-- Divider lines for drawers -->
-          <line x1="5" y1="22" x2="59" y2="22" class="divider" />
-          <line x1="5" y1="34" x2="59" y2="34" class="divider" />
-          <!-- Drawers with Handles -->
-          <rect x="8" y="24" width="48" height="6" rx="1" ry="1" class="drawer" />
-          <circle cx="54" cy="27" r="1.5" class="handle" />
-
-          <rect x="8" y="36" width="48" height="6" rx="1" ry="1" class="drawer" />
-          <circle cx="54" cy="39" r="1.5" class="handle" />
-
-          <rect x="8" y="48" width="48" height="6" rx="1" ry="1" class="drawer" />
-          <circle cx="54" cy="51" r="1.5" class="handle" />
-
-          <!-- Additional detail: a small top handle on the cabinet door -->
-          <rect x="28" y="10" width="8" height="4" rx="1" ry="1" fill="#1565C0" />
+          <!-- Group that will animate upward and then back down once -->
+          <g id="cabinetGroup">
+            <!-- Cabinet Body with rounded corners, white outline, and drop shadow -->
+            <rect x="4" y="4" width="56" height="56" rx="6" ry="6" class="cabinet" filter="url(#shadowFilter)" />
+            <!-- Divider lines for drawers -->
+            <line x1="5" y1="22" x2="59" y2="22" class="divider" />
+            <line x1="5" y1="34" x2="59" y2="34" class="divider" />
+            <!-- Drawers with Handles -->
+            <rect x="8" y="24" width="48" height="6" rx="1" ry="1" class="drawer" />
+            <circle cx="54" cy="27" r="1.5" class="handle" />
+            <rect x="8" y="36" width="48" height="6" rx="1" ry="1" class="drawer" />
+            <circle cx="54" cy="39" r="1.5" class="handle" />
+            <rect x="8" y="48" width="48" height="6" rx="1" ry="1" class="drawer" />
+            <circle cx="54" cy="51" r="1.5" class="handle" />
+            <!-- Additional detail: a small top handle on the cabinet door -->
+            <rect x="28" y="10" width="8" height="4" rx="1" ry="1" fill="#1565C0" />
+            <!-- Animate transform: rises by 2 pixels over 1s, holds for 3s, then falls over 1s (total 5s) -->
+            <animateTransform attributeName="transform" type="translate" values="0 0; 0 -2; 0 -2; 0 0"
+              keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
+          </g>
         </svg>
       </div>
     </div>
-
     <div class="header-title">
-      <h1>Multi File Upload Editor</h1>
+      <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>
         </button>
-        <!-- Restore Files Modal (Admin Only) -->
+        <button id="changePasswordBtn" title="Change Password" style="display: none;">
+          <i class="material-icons">vpn_key</i>
+        </button>
         <div id="restoreFilesModal" class="modal centered-modal" style="display: none;">
           <div class="modal-content">
             <h4 class="custom-restore-header">
@@ -113,212 +133,234 @@
             </div>
           </div>
         </div>
-        <button id="addUserBtn" title="Add User">
+        <button id="addUserBtn" title="Add User" style="display: none;">
           <i class="material-icons">person_add</i>
         </button>
-        <button id="removeUserBtn" title="Remove User">
+        <button id="removeUserBtn" title="Remove User" style="display: none;">
           <i class="material-icons">person_remove</i>
         </button>
         <button id="darkModeToggle" class="dark-mode-toggle">Dark Mode</button>
       </div>
     </div>
+    </div>
   </header>
 
   <!-- Custom Toast Container -->
   <div id="customToast"></div>
-  <div class="container-fluid">
-    <!-- Login Form -->
-    <div class="row" id="loginForm">
-      <div class="col-12">
-        <form id="authForm" method="post">
-          <div class="form-group">
-            <label for="loginUsername">User:</label>
-            <input type="text" class="form-control" id="loginUsername" name="username" required />
-          </div>
-          <div class="form-group">
-            <label for="loginPassword">Password:</label>
-            <input type="password" class="form-control" id="loginPassword" name="password" required />
-          </div>
-          <button type="submit" class="btn btn-primary btn-block btn-login">Login</button>
-        </form>
-      </div>
-    </div>
+  <div id="hiddenCardsContainer" style="display:none;"></div>
 
-    <!-- Main Operations: Upload and Folder Management -->
-    <div id="mainOperations">
-      <div class="container" style="max-width: 1400px; margin: 0 auto;">
-        <div class="row align-items-start" id="uploadFolderRow">
-          <!-- Upload Card: 50% width on medium, 58% on large -->
-          <div class="col-md-6 col-lg-7 d-flex">
-            <div id="uploadCard" class="card flex-fill" style="max-width: 900px; width: 100%;">
-              <div class="card-header">Upload Files/Folders</div>
-              <div class="card-body d-flex flex-column">
-                <form id="uploadFileForm" method="post" enctype="multipart/form-data" class="d-flex flex-column"
-                  style="height: 100%;">
-                  <div class="form-group flex-grow-1" style="margin-bottom: 1rem;">
-                    <div id="uploadDropArea"
-                      style="border:2px dashed #ccc; padding:20px; cursor:pointer; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
-                      <span>Drop files/folders here or click 'Choose files'</span>
-                      <br />
-                      <input type="file" id="file" name="file[]" class="form-control-file" multiple required
-                        webkitdirectory directory mozdirectory style="opacity:0; position:absolute; z-index:-1;" />
-                      <button type="button" onclick="document.getElementById('file').click();">Choose Folder</button>
-                    </div>
-                  </div>
-                  <button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
-                  <div id="uploadProgressContainer"></div>
-                </form>
+  <!-- Main Wrapper: Hidden by default; remove "display: none;" after login -->
+  <div class="main-wrapper">
+    <!-- Sidebar Drop Zone: Hidden until you drag a card (display controlled by JS) -->
+    <div id="sidebarDropArea" class="drop-target-sidebar"></div>
+    <!-- Main Column -->
+    <div id="mainColumn" class="main-column">
+      <div class="container-fluid">
+        <!-- Login Form (unchanged) -->
+        <div class="row" id="loginForm">
+          <div class="col-12">
+            <form id="authForm" method="post">
+              <div class="form-group">
+                <label for="loginUsername">User:</label>
+                <input type="text" class="form-control" id="loginUsername" name="username" required />
               </div>
+              <div class="form-group">
+                <label for="loginPassword">Password:</label>
+                <input type="password" class="form-control" id="loginPassword" name="password" required />
+              </div>
+              <button type="submit" class="btn btn-primary btn-block btn-login">Login</button>
+              <div class="form-group remember-me-container">
+                <input type="checkbox" id="rememberMeCheckbox" name="remember_me" />
+                <label for="rememberMeCheckbox">Remember me</label>
+              </div>
+            </form>
+            <!-- OIDC Login Option -->
+            <div class="text-center mt-3">
+              <button id="oidcLoginBtn" class="btn btn-secondary">Login with OIDC</button>
+            </div>
+            <!-- Basic HTTP Login Option -->
+            <div class="text-center mt-3">
+              <a href="login_basic.php" class="btn btn-secondary">Use Basic HTTP Login</a>
             </div>
           </div>
+        </div>
 
-          <!-- Folder Management Card -->
-          <div class="col-md-6 col-lg-5 d-flex">
-            <div id="folderManagementCard" class="card flex-fill" style="max-width: 900px; width: 100%; position: relative;">
-              <!-- Card header with folder management title and help icon -->
-              <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
-                <span>Folder Navigation &amp; Management</span>
-                <button id="folderHelpBtn" class="btn btn-link" title="Folder Help"
-                  style="padding: 0; border: none; background: none;">
-                  <i class="material-icons folder-help-icon" style="font-size: 24px;">info</i>
-                </button>
+        <!-- Main Operations: Upload and Folder Management -->
+        <div id="mainOperations">
+          <div class="container" style="max-width: 1400px; margin: 0 auto;">
+            <!-- Top Zone: Two columns (60% and 40%) -->
+            <div id="uploadFolderRow" class="row">
+              <!-- Left Column (60% for Upload Card) -->
+              <div id="leftCol" class="col-md-7" style="display: flex; justify-content: center;">
+                <div id="uploadCard" class="card" style="width: 100%;">
+                  <div class="card-header">Upload Files/Folders</div>
+                  <div class="card-body d-flex flex-column">
+                    <form id="uploadFileForm" method="post" enctype="multipart/form-data" class="d-flex flex-column">
+                      <div class="form-group flex-grow-1" style="margin-bottom: 1rem;">
+                        <div id="uploadDropArea"
+                          style="border:2px dashed #ccc; padding:20px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative;">
+                          <span>Drop files/folders here or click 'Choose Files'</span>
+                          <br />
+                          <input type="file" id="file" name="file[]" class="form-control-file" multiple
+                            style="opacity:0; position:absolute; width:1px; height:1px;" />
+                          <button type="button" id="customChooseBtn">Choose Files</button>
+                        </div>
+                      </div>
+                      <button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
+                      <div id="uploadProgressContainer"></div>
+                    </form>
+                  </div>
+                </div>
               </div>
-              <div class="card-body custom-folder-card-body">
-                <div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;">
-                  <div id="folderTreeContainer"></div>
-                </div>
-                <!-- Folder actions (create, rename, delete) -->
-                <div class="folder-actions mt-3">
-                  <button id="createFolderBtn" class="btn btn-primary">Create Folder</button>
-                  <!-- Create Folder Modal -->
-                  <div id="createFolderModal" class="modal">
-                    <div class="modal-content">
-                      <h4>Create Folder</h4>
-                      <input type="text" id="newFolderName" class="form-control" placeholder="Enter folder name"
-                        style="margin-top:10px;" />
-                      <div style="margin-top:15px; text-align:right;">
-                        <button id="cancelCreateFolder" class="btn btn-secondary">Cancel</button>
-                        <button id="submitCreateFolder" class="btn btn-primary">Create</button>
+              <!-- Right Column (40% for Folder Management Card) -->
+              <div id="rightCol" class="col-md-5" style="display: flex; justify-content: center;">
+                <div id="folderManagementCard" class="card" style="width: 100%; position: relative;">
+                  <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
+                    <span>Folder Navigation &amp; Management</span>
+                    <button id="folderHelpBtn" class="btn btn-link" title="Folder Help"
+                      style="padding: 0; border: none; background: none;">
+                      <i class="material-icons folder-help-icon" style="font-size: 24px;">info</i>
+                    </button>
+                  </div>
+                  <div class="card-body custom-folder-card-body">
+                    <div class="form-group d-flex align-items-top" style="padding-top:0; margin-bottom:0;">
+                      <div id="folderTreeContainer"></div>
+                    </div>
+                    <div class="folder-actions mt-3">
+                      <button id="createFolderBtn" class="btn btn-primary">Create Folder</button>
+                      <div id="createFolderModal" class="modal">
+                        <div class="modal-content">
+                          <h4>Create Folder</h4>
+                          <input type="text" id="newFolderName" class="form-control" placeholder="Enter folder name"
+                            style="margin-top:10px;" />
+                          <div style="margin-top:15px; text-align:right;">
+                            <button id="cancelCreateFolder" class="btn btn-secondary">Cancel</button>
+                            <button id="submitCreateFolder" class="btn btn-primary">Create</button>
+                          </div>
+                        </div>
+                      </div>
+                      <button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder">
+                        <i class="material-icons">drive_file_rename_outline</i>
+                      </button>
+                      <div id="renameFolderModal" class="modal">
+                        <div class="modal-content">
+                          <h4>Rename Folder</h4>
+                          <input type="text" id="newRenameFolderName" class="form-control"
+                            placeholder="Enter new folder name" style="margin-top:10px;" />
+                          <div style="margin-top:15px; text-align:right;">
+                            <button id="cancelRenameFolder" class="btn btn-secondary">Cancel</button>
+                            <button id="submitRenameFolder" class="btn btn-primary">Rename</button>
+                          </div>
+                        </div>
+                      </div>
+                      <button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
+                        <i class="material-icons">delete</i>
+                      </button>
+                      <div id="deleteFolderModal" class="modal">
+                        <div class="modal-content">
+                          <h4>Delete Folder</h4>
+                          <p id="deleteFolderMessage">Are you sure you want to delete this folder?</p>
+                          <div style="margin-top:15px; text-align:right;">
+                            <button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button>
+                            <button id="confirmDeleteFolder" class="btn btn-danger">Delete</button>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder">
-                    <i class="material-icons">drive_file_rename_outline</i>
-                  </button>
-                  <!-- Rename Folder Modal -->
-                  <div id="renameFolderModal" class="modal">
-                    <div class="modal-content">
-                      <h4>Rename Folder</h4>
-                      <input type="text" id="newRenameFolderName" class="form-control"
-                        placeholder="Enter new folder name" style="margin-top:10px;" />
-                      <div style="margin-top:15px; text-align:right;">
-                        <button id="cancelRenameFolder" class="btn btn-secondary">Cancel</button>
-                        <button id="submitRenameFolder" class="btn btn-primary">Rename</button>
-                      </div>
-                    </div>
-                  </div>
-                  <button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
-                    <i class="material-icons">delete</i>
-                  </button>
-                  <!-- Delete Folder Modal -->
-                  <div id="deleteFolderModal" class="modal">
-                    <div class="modal-content">
-                      <h4>Delete Folder</h4>
-                      <p id="deleteFolderMessage">Are you sure you want to delete this folder?</p>
-                      <div style="margin-top:15px; text-align:right;">
-                        <button id="cancelDeleteFolder" class="btn btn-secondary">Cancel</button>
-                        <button id="confirmDeleteFolder" class="btn btn-danger">Delete</button>
-                      </div>
+                    <div id="folderHelpTooltip" class="folder-help-tooltip"
+                      style="display: none; position: absolute; top: 50px; right: 15px; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000; box-shadow: 2px 2px 6px rgba(0,0,0,0.2);">
+                      <ul class="folder-help-list" style="margin: 0; padding-left: 20px;">
+                        <li>Click on a folder in the tree to view its files.</li>
+                        <li>Use [-] to collapse and [+] to expand folders.</li>
+                        <li>Select a folder and click "Create Folder" to add a subfolder.</li>
+                        <li>To rename or delete a folder, select it and then click the appropriate button.</li>
+                      </ul>
                     </div>
                   </div>
                 </div>
-                <!-- Help Tooltip: Initially hidden -->
-                <div id="folderHelpTooltip" class="folder-help-tooltip"
-                  style="display: none; position: absolute; top: 50px; right: 15px; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000; box-shadow: 2px 2px 6px rgba(0,0,0,0.2);">
-                  <ul class="folder-help-list" style="margin: 0; padding-left: 20px;">
-                    <li>Click on a folder in the tree to view its files.</li>
-                    <li>Use [-] to collapse and [+] to expand folders.</li>
-                    <li>Select a folder and click "Create Folder" to add a subfolder.</li>
-                    <li>To rename or delete a folder, select it and then click the appropriate button.</li>
-                  </ul>
+              </div>
+            </div> <!-- end uploadFolderRow -->
+          </div> <!-- end container -->
+        </div> <!-- end mainOperations -->
+
+        <!-- File List Section -->
+        <div id="fileListContainer" style="display: none;">
+          <h2 id="fileListTitle">Files in (Root)</h2>
+          <div id="fileListActions" class="file-list-actions">
+            <button id="deleteSelectedBtn" class="btn action-btn" style="display: none;">Delete Files</button>
+            <div id="deleteFilesModal" class="modal">
+              <div class="modal-content">
+                <h4>Delete Selected Files</h4>
+                <p id="deleteFilesMessage">Are you sure you want to delete the selected files?</p>
+                <div class="modal-footer">
+                  <button id="cancelDeleteFiles" class="btn btn-secondary">Cancel</button>
+                  <button id="confirmDeleteFiles" class="btn btn-danger">Delete</button>
+                </div>
+              </div>
+            </div>
+            <button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled>Copy Files</button>
+            <div id="copyFilesModal" class="modal">
+              <div class="modal-content">
+                <h4>Copy Selected Files</h4>
+                <p id="copyFilesMessage">Select a target folder for copying the selected files:</p>
+                <select id="copyTargetFolder" class="form-control modal-input"></select>
+                <div class="modal-footer">
+                  <button id="cancelCopyFiles" class="btn btn-secondary">Cancel</button>
+                  <button id="confirmCopyFiles" class="btn btn-primary">Copy</button>
+                </div>
+              </div>
+            </div>
+            <button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled>Move Files</button>
+            <div id="moveFilesModal" class="modal">
+              <div class="modal-content">
+                <h4>Move Selected Files</h4>
+                <p id="moveFilesMessage">Select a target folder for moving the selected files:</p>
+                <select id="moveTargetFolder" class="form-control modal-input"></select>
+                <div class="modal-footer">
+                  <button id="cancelMoveFiles" class="btn btn-secondary">Cancel</button>
+                  <button id="confirmMoveFiles" class="btn btn-primary">Move</button>
+                </div>
+              </div>
+            </div>
+            <button id="downloadZipBtn" class="btn action-btn" style="display: none;" disabled>Download ZIP</button>
+            <button id="extractZipBtn" class="btn btn-sm btn-info" title="Extract Zip">Extract Zip</button>
+            <div id="downloadZipModal" class="modal" style="display:none;">
+              <div class="modal-content">
+                <h4>Download Selected Files as Zip</h4>
+                <p>Enter a name for the zip file:</p>
+                <input type="text" id="zipFileNameInput" class="form-control" placeholder="files.zip" />
+                <div class="modal-footer" style="margin-top:15px; text-align:right;">
+                  <button id="cancelDownloadZip" class="btn btn-secondary">Cancel</button>
+                  <button id="confirmDownloadZip" class="btn btn-primary">Download</button>
                 </div>
               </div>
             </div>
           </div>
+          <div id="fileList"></div>
         </div>
-      </div>
-    </div>
-    <!-- File List Section -->
-    <div id="fileListContainer" style="display: none;">
-      <h2 id="fileListTitle">Files in (Root)</h2>
-      <div id="fileListActions" class="file-list-actions">
-        <button id="deleteSelectedBtn" class="btn action-btn" style="display: none;">Delete Files</button>
-        <!-- Delete Files Modal -->
-        <div id="deleteFilesModal" class="modal">
-          <div class="modal-content">
-            <h4>Delete Selected Files</h4>
-            <p id="deleteFilesMessage">Are you sure you want to delete the selected files?</p>
-            <div class="modal-footer">
-              <button id="cancelDeleteFiles" class="btn btn-secondary">Cancel</button>
-              <button id="confirmDeleteFiles" class="btn btn-danger">Delete</button>
-            </div>
-          </div>
-        </div>
+      </div> <!-- end container-fluid -->
+    </div> <!-- end mainColumn -->
+  </div> <!-- end main-wrapper -->
 
-        <button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled>Copy Files</button>
-        <!-- Copy Files Modal -->
-        <div id="copyFilesModal" class="modal">
-          <div class="modal-content">
-            <h4>Copy Selected Files</h4>
-            <p id="copyFilesMessage">Select a target folder for copying the selected files:</p>
-            <select id="copyTargetFolder" class="form-control modal-input"></select>
-            <div class="modal-footer">
-              <button id="cancelCopyFiles" class="btn btn-secondary">Cancel</button>
-              <button id="confirmCopyFiles" class="btn btn-primary">Copy</button>
-            </div>
-          </div>
-        </div>
-
-        <button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled>Move Files</button>
-        <!-- Move Files Modal -->
-        <div id="moveFilesModal" class="modal">
-          <div class="modal-content">
-            <h4>Move Selected Files</h4>
-            <p id="moveFilesMessage">Select a target folder for moving the selected files:</p>
-            <select id="moveTargetFolder" class="form-control modal-input"></select>
-            <div class="modal-footer">
-              <button id="cancelMoveFiles" class="btn btn-secondary">Cancel</button>
-              <button id="confirmMoveFiles" class="btn btn-primary">Move</button>
-            </div>
-          </div>
-        </div>
-
-        <button id="downloadZipBtn" class="btn action-btn" style="display: none;" disabled>Download ZIP</button>
-        <!-- Download Zip Modal -->
-        <div id="downloadZipModal" class="modal" style="display:none;">
-          <div class="modal-content">
-            <h4>Download Selected Files as Zip</h4>
-            <p>Enter a name for the zip file:</p>
-            <input type="text" id="zipFileNameInput" class="form-control" placeholder="files.zip" />
-            <div class="modal-footer" style="margin-top:15px; text-align:right;">
-              <button id="cancelDownloadZip" class="btn btn-secondary">Cancel</button>
-              <button id="confirmDownloadZip" class="btn btn-primary">Download</button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div id="fileList"></div>
+  <!-- Change Password, Add User, Remove User, Rename File, and Custom Confirm Modals (unchanged) -->
+  <div id="changePasswordModal" class="modal" style="display:none;">
+    <div class="modal-content" style="max-width:400px; margin:auto;">
+      <span id="closeChangePasswordModal" style="cursor:pointer;">&times;</span>
+      <h3>Change Password</h3>
+      <input type="password" id="oldPassword" placeholder="Old Password" style="width:100%; margin: 5px 0;" />
+      <input type="password" id="newPassword" placeholder="New Password" style="width:100%; margin: 5px 0;" />
+      <input type="password" id="confirmPassword" placeholder="Confirm New Password"
+        style="width:100%; margin: 5px 0;" />
+      <button id="saveNewPasswordBtn" class="btn btn-primary" style="width:100%;">Save</button>
     </div>
   </div>
-
-  <!-- Add User Modal -->
   <div id="addUserModal" class="modal">
     <div class="modal-content">
       <h3>Create New User</h3>
       <label for="newUsername">Username:</label>
       <input type="text" id="newUsername" class="form-control" />
-      <label for="newPassword">Password:</label>
-      <input type="password" id="newPassword" class="form-control" />
+      <label for="addUserPassword">Password:</label>
+      <input type="password" id="addUserPassword" class="form-control" />
       <div id="adminCheckboxContainer">
         <input type="checkbox" id="isAdmin" />
         <label for="isAdmin">Grant Admin Access</label>
@@ -329,8 +371,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Remove User Modal -->
   <div id="removeUserModal" class="modal">
     <div class="modal-content">
       <h3>Remove User</h3>
@@ -342,8 +382,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Rename File Modal -->
   <div id="renameFileModal" class="modal">
     <div class="modal-content">
       <h4>Rename File</h4>
@@ -355,8 +393,6 @@
       </div>
     </div>
   </div>
-
-  <!-- Custom Confirm Modal -->
   <div id="customConfirmModal" class="modal" style="display:none;">
     <div class="modal-content">
       <p id="confirmMessage"></p>
@@ -366,9 +402,7 @@
       </div>
     </div>
   </div>
-
-  <!-- JavaScript Files -->
-  <script type="module" src="main.js"></script>
+  <script type="module" src="js/main.js"></script>
 </body>
 
 </html>

js/auth.js

@@ -0,0 +1,454 @@
+import { sendRequest } from './networkUtils.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 as originalOpenTOTPLoginModal,
+  openUserPanel,
+  openTOTPModal,
+  closeTOTPModal,
+  openAdminPanel,
+  closeAdminPanel,
+  setLastLoginData
+} from './authModals.js';
+
+// Production OIDC configuration (override via API as needed)
+const currentOIDCConfig = {
+  providerUrl: "https://your-oidc-provider.com",
+  clientId: "YOUR_CLIENT_ID",
+  clientSecret: "YOUR_CLIENT_SECRET",
+  redirectUri: "https://yourdomain.com/auth.php?oidc=callback",
+  globalOtpauthUrl: ""
+};
+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");
+  if (selectElem) {
+    selectElem.value = localStorage.getItem("itemsPerPage") || "10";
+  }
+}
+
+function updateLoginOptionsUI({ disableFormLogin, disableBasicAuth, disableOIDCLogin }) {
+  const authForm = document.getElementById("authForm");
+  if (authForm) authForm.style.display = disableFormLogin ? "none" : "block";
+  const basicAuthLink = document.querySelector("a[href='login_basic.php']");
+  if (basicAuthLink) basicAuthLink.style.display = disableBasicAuth ? "none" : "inline-block";
+  const oidcLoginBtn = document.getElementById("oidcLoginBtn");
+  if (oidcLoginBtn) oidcLoginBtn.style.display = disableOIDCLogin ? "none" : "inline-block";
+}
+
+function updateLoginOptionsUIFromStorage() {
+  updateLoginOptionsUI({
+    disableFormLogin: localStorage.getItem("disableFormLogin") === "true",
+    disableBasicAuth: localStorage.getItem("disableBasicAuth") === "true",
+    disableOIDCLogin: localStorage.getItem("disableOIDCLogin") === "true"
+  });
+}
+
+function loadAdminConfigFunc() {
+  return fetch("getConfig.php", { credentials: "include" })
+    .then(response => response.json())
+    .then(config => {
+      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/{label}?secret={secret}&issuer=FileRise");
+      updateLoginOptionsUIFromStorage();
+    })
+    .catch(() => {
+      localStorage.setItem("disableFormLogin", "false");
+      localStorage.setItem("disableBasicAuth", "false");
+      localStorage.setItem("disableOIDCLogin", "false");
+      localStorage.setItem("globalOtpauthUrl", "otpauth://totp/{label}?secret={secret}&issuer=FileRise");
+      updateLoginOptionsUIFromStorage();
+    });
+}
+
+function insertAfter(newNode, referenceNode) {
+  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+
+function updateAuthenticatedUI(data) {
+  toggleVisibility("loginForm", false);
+  toggleVisibility("mainOperations", true);
+  toggleVisibility("uploadFileForm", true);
+  toggleVisibility("fileListContainer", true);
+  attachEnterKeyListener("addUserModal", "saveUserBtn");
+  attachEnterKeyListener("removeUserModal", "deleteUserBtn");
+  attachEnterKeyListener("changePasswordModal", "saveNewPasswordBtn");
+  document.querySelector(".header-buttons").style.visibility = "visible";
+
+  if (typeof data.totp_enabled !== "undefined") {
+    localStorage.setItem("userTOTPEnabled", data.totp_enabled ? "true" : "false");
+  }
+  if (data.username) {
+    localStorage.setItem("username", data.username);
+  }
+  if (typeof data.folderOnly !== "undefined") {
+    localStorage.setItem("folderOnly", data.folderOnly ? "true" : "false");
+  }
+
+  const headerButtons = document.querySelector(".header-buttons");
+  const firstButton = headerButtons.firstElementChild;
+
+  if (data.isAdmin) {
+    let restoreBtn = document.getElementById("restoreFilesBtn");
+    if (!restoreBtn) {
+      restoreBtn = document.createElement("button");
+      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);
+    }
+    restoreBtn.style.display = "block";
+
+    let adminPanelBtn = document.getElementById("adminPanelBtn");
+    if (!adminPanelBtn) {
+      adminPanelBtn = document.createElement("button");
+      adminPanelBtn.id = "adminPanelBtn";
+      adminPanelBtn.classList.add("btn", "btn-info");
+      adminPanelBtn.innerHTML = '<i class="material-icons" title="Admin Panel">admin_panel_settings</i>';
+      insertAfter(adminPanelBtn, restoreBtn);
+      adminPanelBtn.addEventListener("click", openAdminPanel);
+    } else {
+      adminPanelBtn.style.display = "block";
+    }
+  } else {
+    const restoreBtn = document.getElementById("restoreFilesBtn");
+    if (restoreBtn) restoreBtn.style.display = "none";
+    const adminPanelBtn = document.getElementById("adminPanelBtn");
+    if (adminPanelBtn) adminPanelBtn.style.display = "none";
+  }
+
+  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 {
+      userPanelBtn.style.display = "block";
+    }
+  }
+
+  updateItemsPerPageSelect();
+  updateLoginOptionsUIFromStorage();
+}
+
+function checkAuthentication(showLoginToast = true) {
+  return sendRequest("checkAuth.php")
+    .then(data => {
+      if (data.setup) {
+        window.setupMode = true;
+        if (showLoginToast) showToast("Setup mode: No users found. Please add an admin user.");
+        toggleVisibility("loginForm", false);
+        toggleVisibility("mainOperations", false);
+        document.querySelector(".header-buttons").style.visibility = "hidden";
+        toggleVisibility("addUserModal", true);
+        document.getElementById("newUsername").focus();
+        return false;
+      }
+      window.setupMode = false;
+      if (data.authenticated) {
+        if (typeof data.totp_enabled !== "undefined") {
+          localStorage.setItem("userTOTPEnabled", data.totp_enabled ? "true" : "false");
+        }
+        updateAuthenticatedUI(data);
+        return data;
+      } else {
+        if (showLoginToast) showToast("Please log in to continue.");
+        toggleVisibility("loginForm", true);
+        toggleVisibility("mainOperations", false);
+        toggleVisibility("uploadFileForm", false);
+        toggleVisibility("fileListContainer", false);
+        document.querySelector(".header-buttons").style.visibility = "hidden";
+        return false;
+      }
+    })
+    .catch(() => false);
+}
+
+/* ----------------- Authentication Submission ----------------- */
+function submitLogin(data) {
+  setLastLoginData(data);
+  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;
+          setTimeout(() => {
+            loginButton.disabled = false;
+            showToast("You can now try logging in again.");
+          }, 30 * 60 * 1000);
+        }
+      } else {
+        showToast("Login failed: " + (response.error || "Unknown error"));
+      }
+    })
+    .catch(() => {
+      showToast("Login failed: Unknown error");
+    });
+}
+window.submitLogin = submitLogin;
+
+/* ----------------- Other Helpers ----------------- */
+window.changeItemsPerPage = function (value) {
+  localStorage.setItem("itemsPerPage", value);
+  if (typeof renderFileTable === "function") renderFileTable(window.currentFolder || "root");
+};
+
+function resetUserForm() {
+  document.getElementById("newUsername").value = "";
+  document.getElementById("addUserPassword").value = "";
+}
+
+function closeAddUserModal() {
+  toggleVisibility("addUserModal", false);
+  resetUserForm();
+}
+
+function closeRemoveUserModal() {
+  toggleVisibility("removeUserModal", false);
+  document.getElementById("removeUsernameSelect").innerHTML = "";
+}
+
+function loadUserList() {
+  fetch("getUsers.php", { credentials: "include" })
+    .then(response => response.json())
+    .then(data => {
+      const users = Array.isArray(data) ? data : (data.users || []);
+      const selectElem = document.getElementById("removeUsernameSelect");
+      selectElem.innerHTML = "";
+      users.forEach(user => {
+        const option = document.createElement("option");
+        option.value = user.username;
+        option.textContent = user.username;
+        selectElem.appendChild(option);
+      });
+      if (selectElem.options.length === 0) {
+        showToast("No other users found to remove.");
+        closeRemoveUserModal();
+      }
+    })
+    .catch(() => {});
+}
+window.loadUserList = loadUserList;
+
+function initAuth() {
+  checkAuthentication(false);
+  loadAdminConfigFunc();
+  const authForm = document.getElementById("authForm");
+  if (authForm) {
+    authForm.addEventListener("submit", function (event) {
+      event.preventDefault();
+      const rememberMe = document.getElementById("rememberMeCheckbox")
+        ? document.getElementById("rememberMeCheckbox").checked
+        : false;
+      const formData = {
+        username: document.getElementById("loginUsername").value.trim(),
+        password: document.getElementById("loginPassword").value.trim(),
+        remember_me: rememberMe
+      };
+      submitLogin(formData);
+    });
+  }
+  document.getElementById("logoutBtn").addEventListener("click", function () {
+    fetch("logout.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "X-CSRF-Token": window.csrfToken }
+    }).then(() => window.location.reload(true)).catch(() => {});
+  });
+  document.getElementById("addUserBtn").addEventListener("click", function () {
+    resetUserForm();
+    toggleVisibility("addUserModal", true);
+    document.getElementById("newUsername").focus();
+  });
+  document.getElementById("saveUserBtn").addEventListener("click", function () {
+    const newUsername = document.getElementById("newUsername").value.trim();
+    const newPassword = document.getElementById("addUserPassword").value.trim();
+    const isAdmin = document.getElementById("isAdmin").checked;
+    if (!newUsername || !newPassword) {
+      showToast("Username and password are required!");
+      return;
+    }
+    let url = "addUser.php";
+    if (window.setupMode) url += "?setup=1";
+    fetch(url, {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+      body: JSON.stringify({ username: newUsername, password: newPassword, isAdmin })
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          showToast("User added successfully!");
+          closeAddUserModal();
+          checkAuthentication(false);
+        } else {
+          showToast("Error: " + (data.error || "Could not add user"));
+        }
+      })
+      .catch(() => { });
+  });
+  document.getElementById("cancelUserBtn").addEventListener("click", closeAddUserModal);
+
+  document.getElementById("removeUserBtn").addEventListener("click", function () {
+    loadUserList();
+    toggleVisibility("removeUserModal", true);
+  });
+  document.getElementById("deleteUserBtn").addEventListener("click", async function () {
+    const selectElem = document.getElementById("removeUsernameSelect");
+    const usernameToRemove = selectElem.value;
+    if (!usernameToRemove) {
+      showToast("Please select a user to remove.");
+      return;
+    }
+    const confirmed = await showCustomConfirmModal("Are you sure you want to delete user " + usernameToRemove + "?");
+    if (!confirmed) return;
+    fetch("removeUser.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+      body: JSON.stringify({ username: usernameToRemove })
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          showToast("User removed successfully!");
+          closeRemoveUserModal();
+          loadUserList();
+        } else {
+          showToast("Error: " + (data.error || "Could not remove user"));
+        }
+      })
+      .catch(() => {});
+  });
+  document.getElementById("cancelRemoveUserBtn").addEventListener("click", closeRemoveUserModal);
+  document.getElementById("changePasswordBtn").addEventListener("click", function () {
+    document.getElementById("changePasswordModal").style.display = "block";
+    document.getElementById("oldPassword").focus();
+  });
+  document.getElementById("closeChangePasswordModal").addEventListener("click", function () {
+    document.getElementById("changePasswordModal").style.display = "none";
+  });
+  document.getElementById("saveNewPasswordBtn").addEventListener("click", function () {
+    const oldPassword = document.getElementById("oldPassword").value.trim();
+    const newPassword = document.getElementById("newPassword").value.trim();
+    const confirmPassword = document.getElementById("confirmPassword").value.trim();
+    if (!oldPassword || !newPassword || !confirmPassword) {
+      showToast("Please fill in all fields.");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      showToast("New passwords do not match.");
+      return;
+    }
+    const data = { oldPassword, newPassword, confirmPassword };
+    fetch("changePassword.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+      body: JSON.stringify(data)
+    })
+      .then(response => response.json())
+      .then(result => {
+        if (result.success) {
+          showToast(result.success);
+          document.getElementById("oldPassword").value = "";
+          document.getElementById("newPassword").value = "";
+          document.getElementById("confirmPassword").value = "";
+          document.getElementById("changePasswordModal").style.display = "none";
+        } else {
+          showToast("Error: " + (result.error || "Could not change password."));
+        }
+      })
+      .catch(() => { showToast("Error changing password."); });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  updateItemsPerPageSelect();
+  updateLoginOptionsUI({
+    disableFormLogin: localStorage.getItem("disableFormLogin") === "true",
+    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

@@ -0,0 +1,710 @@
+import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
+import { sendRequest } from './networkUtils.js';
+
+const version = "v1.0.8";
+const adminTitle = `Admin Panel <small style="font-size: 12px; color: gray;">${version}</small>`;
+
+let lastLoginData = null;
+export function setLastLoginData(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";
+
+  if (!totpLoginModal) {
+    totpLoginModal = document.createElement("div");
+    totpLoginModal.id = "totpLoginModal";
+    totpLoginModal.style.cssText = `
+      position: fixed;
+      top: 0; left: 0;
+      width: 100vw; height: 100vh;
+      background-color: rgba(0,0,0,0.5);
+      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>
+        <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" />
+      </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 () {
+      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();
+            }
+          })
+          .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() {
+  const username = localStorage.getItem("username") || "User";
+  let userPanelModal = document.getElementById("userPanelModal");
+  const isDarkMode = document.body.classList.contains("dark-mode");
+  const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+  const modalContentStyles = `
+    background: ${isDarkMode ? "#2c2c2c" : "#fff"};
+    color: ${isDarkMode ? "#e0e0e0" : "#000"};
+    padding: 20px;
+    max-width: 600px;
+    width: 90%;
+    border-radius: 8px;
+    position: relative;
+    overflow-y: auto;
+    max-height: 90vh;
+    border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
+    transform: none;
+    transition: none;
+  `;
+  if (!userPanelModal) {
+      userPanelModal = document.createElement("div");
+      userPanelModal.id = "userPanelModal";
+      userPanelModal.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: ${overlayBackground};
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 3000;
+      `;
+      userPanelModal.innerHTML = `
+        <div class="modal-content" style="${modalContentStyles}">
+          <span id="closeUserPanel" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+          <h3>User Panel (${username})</h3>
+          <button type="button" id="openChangePasswordModalBtn" class="btn btn-primary" style="margin-bottom: 15px;">Change Password</button>
+          <fieldset style="margin-bottom: 15px;">
+            <legend>TOTP Settings</legend>
+            <div class="form-group">
+              <label for="userTOTPEnabled">Enable TOTP:</label>
+              <input type="checkbox" id="userTOTPEnabled" style="vertical-align: middle;" />
+            </div>
+          </fieldset>
+        </div>
+      `;
+      document.body.appendChild(userPanelModal);
+      document.getElementById("closeUserPanel").addEventListener("click", () => {
+          userPanelModal.style.display = "none";
+      });
+      document.getElementById("openChangePasswordModalBtn").addEventListener("click", () => {
+          document.getElementById("changePasswordModal").style.display = "block";
+      });
+      const totpCheckbox = document.getElementById("userTOTPEnabled");
+      totpCheckbox.checked = localStorage.getItem("userTOTPEnabled") === "true";
+      totpCheckbox.addEventListener("change", function () {
+          localStorage.setItem("userTOTPEnabled", this.checked ? "true" : "false");
+          const enabled = this.checked;
+          fetch("updateUserPanel.php", {
+              method: "POST",
+              credentials: "include",
+              headers: {
+                  "Content-Type": "application/json",
+                  "X-CSRF-Token": window.csrfToken
+              },
+              body: JSON.stringify({ totp_enabled: enabled })
+          })
+              .then(r => r.json())
+              .then(result => {
+                  if (!result.success) {
+                      showToast("Error updating TOTP setting: " + result.error);
+                  } else if (enabled) {
+                      openTOTPModal();
+                  }
+              })
+              .catch(() => { showToast("Error updating TOTP setting."); });
+      });
+  } else {
+      userPanelModal.style.backgroundColor = overlayBackground;
+      const modalContent = userPanelModal.querySelector(".modal-content");
+      modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
+      modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
+      modalContent.style.border = isDarkMode ? "1px solid #444" : "1px solid #ccc";
+  }
+  userPanelModal.style.display = "flex";
+}
+
+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 = `
+    background: ${isDarkMode ? "#2c2c2c" : "#fff"};
+    color: ${isDarkMode ? "#e0e0e0" : "#000"};
+    padding: 20px;
+    max-width: 400px;
+    width: 90%;
+    border-radius: 8px;
+    position: relative;
+  `;
+  if (!totpModal) {
+    totpModal = document.createElement("div");
+    totpModal.id = "totpModal";
+    totpModal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: ${overlayBackground};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 3100;
+    `;
+    totpModal.innerHTML = `
+      <div class="modal-content" style="${modalContentStyles}">
+        <span id="closeTOTPModal" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+        <h3>TOTP Setup</h3>
+        <p>Scan this QR code with your authenticator app:</p>
+        <img src="totp_setup.php?csrf=${encodeURIComponent(window.csrfToken)}" alt="TOTP QR Code" style="max-width: 100%; height: auto; display: block; margin: 0 auto;">
+        <br/>
+        <p>Enter the 6-digit code from your app to confirm setup:</p>
+        <input type="text" id="totpConfirmInput" maxlength="6" style="font-size:24px; text-align:center; width:100%; padding:10px;" placeholder="6-digit code" />
+        <br/><br/>
+        <button type="button" id="confirmTOTPBtn" class="btn btn-primary">Confirm</button>
+      </div>
+    `;
+    document.body.appendChild(totpModal);
+    
+    document.getElementById("closeTOTPModal").addEventListener("click", () => {
+      closeTOTPModal(true);
+    });
+  
+    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;
+      }
+      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(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");
+  }
+}
+
+// Updated closeTOTPModal function with a disable parameter
+export function closeTOTPModal(disable = true) {
+    const totpModal = document.getElementById("totpModal");
+    if (totpModal) totpModal.style.display = "none";
+    
+    if (disable) {
+      // Uncheck the Enable TOTP checkbox
+      const totpCheckbox = document.getElementById("userTOTPEnabled");
+      if (totpCheckbox) {
+        totpCheckbox.checked = false;
+        localStorage.setItem("userTOTPEnabled", "false");
+      }
+      // Call endpoint to remove the TOTP secret from the user's record
+      fetch("totp_disable.php", {
+        method: "POST",
+        credentials: "include",
+        headers: { 
+          "Content-Type": "application/json", 
+          "X-CSRF-Token": window.csrfToken 
+        }
+      })
+        .then(r => r.json())
+        .then(result => {
+          if (!result.success) {
+            showToast("Error disabling TOTP setting: " + result.error);
+          }
+        })
+        .catch(() => { showToast("Error disabling TOTP setting."); });
+    }
+  }
+
+export function openAdminPanel() {
+    fetch("getConfig.php", { credentials: "include" })
+        .then(response => response.json())
+        .then(config => {
+            if (config.oidc) Object.assign(window.currentOIDCConfig, config.oidc);
+            if (config.globalOtpauthUrl) window.currentOIDCConfig.globalOtpauthUrl = config.globalOtpauthUrl;
+            const isDarkMode = document.body.classList.contains("dark-mode");
+            const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+            const modalContentStyles = `
+          background: ${isDarkMode ? "#2c2c2c" : "#fff"};
+          color: ${isDarkMode ? "#e0e0e0" : "#000"};
+          padding: 20px;
+          max-width: 600px;
+          width: 90%;
+          border-radius: 8px;
+          position: relative;
+          overflow-y: auto;
+          max-height: 90vh;
+          border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
+        `;
+            let adminModal = document.getElementById("adminPanelModal");
+
+            if (!adminModal) {
+                adminModal = document.createElement("div");
+                adminModal.id = "adminPanelModal";
+                adminModal.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background-color: ${overlayBackground};
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 3000;
+          `;
+                // Added a version number next to "Admin Panel"
+                adminModal.innerHTML = `
+          <div class="modal-content" style="${modalContentStyles}">
+            <span id="closeAdminPanel" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+            <h3>
+              <h3>${adminTitle}</h3>
+            </h3>
+            <form id="adminPanelForm">
+              <fieldset style="margin-bottom: 15px;">
+                <legend>User Management</legend>
+                <div style="display: flex; gap: 10px;">
+                  <button type="button" id="adminOpenAddUser" class="btn btn-success">Add User</button>
+                  <button type="button" id="adminOpenRemoveUser" class="btn btn-danger">Remove User</button>
+                  <button type="button" id="adminOpenUserPermissions" class="btn btn-secondary">User Permissions</button>
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>OIDC Configuration</legend>
+                <div class="form-group">
+                  <label for="oidcProviderUrl">OIDC Provider URL:</label>
+                  <input type="text" id="oidcProviderUrl" class="form-control" value="${window.currentOIDCConfig.providerUrl}" />
+                </div>
+                <div class="form-group">
+                  <label for="oidcClientId">OIDC Client ID:</label>
+                  <input type="text" id="oidcClientId" class="form-control" value="${window.currentOIDCConfig.clientId}" />
+                </div>
+                <div class="form-group">
+                  <label for="oidcClientSecret">OIDC Client Secret:</label>
+                  <input type="text" id="oidcClientSecret" class="form-control" value="${window.currentOIDCConfig.clientSecret}" />
+                </div>
+                <div class="form-group">
+                  <label for="oidcRedirectUri">OIDC Redirect URI:</label>
+                  <input type="text" id="oidcRedirectUri" class="form-control" value="${window.currentOIDCConfig.redirectUri}" />
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>Global TOTP Settings</legend>
+                <div class="form-group">
+                  <label for="globalOtpauthUrl">Global OTPAuth URL:</label>
+                  <input type="text" id="globalOtpauthUrl" class="form-control" value="${window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/{label}?secret={secret}&issuer=FileRise'}" />
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>Login Options</legend>
+                <div class="form-group">
+                  <input type="checkbox" id="disableFormLogin" />
+                  <label for="disableFormLogin">Disable Login Form</label>
+                </div>
+                <div class="form-group">
+                  <input type="checkbox" id="disableBasicAuth" />
+                  <label for="disableBasicAuth">Disable Basic HTTP Auth</label>
+                </div>
+                <div class="form-group">
+                  <input type="checkbox" id="disableOIDCLogin" />
+                  <label for="disableOIDCLogin">Disable OIDC Login</label>
+                </div>
+              </fieldset>
+              <div style="display: flex; justify-content: space-between;">
+                <button type="button" id="cancelAdminSettings" class="btn btn-secondary">Cancel</button>
+                <button type="button" id="saveAdminSettings" class="btn btn-primary">Save Settings</button>
+              </div>
+            </form>
+          </div>
+        `;
+                document.body.appendChild(adminModal);
+
+                document.getElementById("closeAdminPanel").addEventListener("click", closeAdminPanel);
+                adminModal.addEventListener("click", (e) => {
+                    if (e.target === adminModal) closeAdminPanel();
+                });
+                document.getElementById("cancelAdminSettings").addEventListener("click", closeAdminPanel);
+                document.getElementById("adminOpenAddUser").addEventListener("click", () => {
+                    toggleVisibility("addUserModal", true);
+                    document.getElementById("newUsername").focus();
+                });
+                document.getElementById("adminOpenRemoveUser").addEventListener("click", () => {
+                    if (typeof window.loadUserList === "function") {
+                        window.loadUserList();
+                    }
+                    toggleVisibility("removeUserModal", true);
+                });
+                // New event binding for the User Permissions button:
+                document.getElementById("adminOpenUserPermissions").addEventListener("click", () => {
+                    openUserPermissionsModal();
+                });
+                document.getElementById("saveAdminSettings").addEventListener("click", () => {
+                    const disableFormLoginCheckbox = document.getElementById("disableFormLogin");
+                    const disableBasicAuthCheckbox = document.getElementById("disableBasicAuth");
+                    const disableOIDCLoginCheckbox = document.getElementById("disableOIDCLogin");
+                    const totalDisabled = [disableFormLoginCheckbox, disableBasicAuthCheckbox, disableOIDCLoginCheckbox].filter(cb => cb.checked).length;
+                    if (totalDisabled === 3) {
+                        showToast("At least one login method must remain enabled.");
+                        disableOIDCLoginCheckbox.checked = false;
+                        localStorage.setItem("disableOIDCLogin", "false");
+                        if (typeof window.updateLoginOptionsUI === "function") {
+                            window.updateLoginOptionsUI({
+                                disableFormLogin: disableFormLoginCheckbox.checked,
+                                disableBasicAuth: disableBasicAuthCheckbox.checked,
+                                disableOIDCLogin: disableOIDCLoginCheckbox.checked
+                            });
+                        }
+                        return;
+                    }
+                    const newOIDCConfig = {
+                        providerUrl: document.getElementById("oidcProviderUrl").value.trim(),
+                        clientId: document.getElementById("oidcClientId").value.trim(),
+                        clientSecret: document.getElementById("oidcClientSecret").value.trim(),
+                        redirectUri: document.getElementById("oidcRedirectUri").value.trim()
+                    };
+                    const disableFormLogin = disableFormLoginCheckbox.checked;
+                    const disableBasicAuth = disableBasicAuthCheckbox.checked;
+                    const disableOIDCLogin = disableOIDCLoginCheckbox.checked;
+                    const globalOtpauthUrl = document.getElementById("globalOtpauthUrl").value.trim();
+                    sendRequest("updateConfig.php", "POST", {
+                        oidc: newOIDCConfig,
+                        disableFormLogin,
+                        disableBasicAuth,
+                        disableOIDCLogin,
+                        globalOtpauthUrl
+                    }, { "X-CSRF-Token": window.csrfToken })
+                        .then(response => {
+                            if (response.success) {
+                                showToast("Settings updated successfully.");
+                                localStorage.setItem("disableFormLogin", disableFormLogin);
+                                localStorage.setItem("disableBasicAuth", disableBasicAuth);
+                                localStorage.setItem("disableOIDCLogin", disableOIDCLogin);
+                                if (typeof window.updateLoginOptionsUI === "function") {
+                                    window.updateLoginOptionsUI({ disableFormLogin, disableBasicAuth, disableOIDCLogin });
+                                }
+                                closeAdminPanel();
+                            } else {
+                                showToast("Error updating settings: " + (response.error || "Unknown error"));
+                            }
+                        })
+                        .catch(() => { });
+                });
+                const disableFormLoginCheckbox = document.getElementById("disableFormLogin");
+                const disableBasicAuthCheckbox = document.getElementById("disableBasicAuth");
+                const disableOIDCLoginCheckbox = document.getElementById("disableOIDCLogin");
+                function enforceLoginOptionConstraint(changedCheckbox) {
+                    const totalDisabled = [disableFormLoginCheckbox, disableBasicAuthCheckbox, disableOIDCLoginCheckbox].filter(cb => cb.checked).length;
+                    if (changedCheckbox.checked && totalDisabled === 3) {
+                        showToast("At least one login method must remain enabled.");
+                        changedCheckbox.checked = false;
+                    }
+                }
+                disableFormLoginCheckbox.addEventListener("change", function () { enforceLoginOptionConstraint(this); });
+                disableBasicAuthCheckbox.addEventListener("change", function () { enforceLoginOptionConstraint(this); });
+                disableOIDCLoginCheckbox.addEventListener("change", function () { enforceLoginOptionConstraint(this); });
+
+                document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin === true;
+                document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth === true;
+                document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin === true;
+            } else {
+                adminModal.style.backgroundColor = overlayBackground;
+                const modalContent = adminModal.querySelector(".modal-content");
+                if (modalContent) {
+                    modalContent.style.background = isDarkMode ? "#2c2c2c" : "#fff";
+                    modalContent.style.color = isDarkMode ? "#e0e0e0" : "#000";
+                    modalContent.style.border = isDarkMode ? "1px solid #444" : "1px solid #ccc";
+                }
+                document.getElementById("oidcProviderUrl").value = window.currentOIDCConfig.providerUrl;
+                document.getElementById("oidcClientId").value = window.currentOIDCConfig.clientId;
+                document.getElementById("oidcClientSecret").value = window.currentOIDCConfig.clientSecret;
+                document.getElementById("oidcRedirectUri").value = window.currentOIDCConfig.redirectUri;
+                document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig.globalOtpauthUrl || '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;
+                adminModal.style.display = "flex";
+            }
+        })
+        .catch(() => {
+            let adminModal = document.getElementById("adminPanelModal");
+            if (adminModal) {
+                adminModal.style.backgroundColor = "rgba(0,0,0,0.5)";
+                const modalContent = adminModal.querySelector(".modal-content");
+                if (modalContent) {
+                    modalContent.style.background = "#fff";
+                    modalContent.style.color = "#000";
+                    modalContent.style.border = "1px solid #ccc";
+                }
+                document.getElementById("oidcProviderUrl").value = window.currentOIDCConfig.providerUrl;
+                document.getElementById("oidcClientId").value = window.currentOIDCConfig.clientId;
+                document.getElementById("oidcClientSecret").value = window.currentOIDCConfig.clientSecret;
+                document.getElementById("oidcRedirectUri").value = window.currentOIDCConfig.redirectUri;
+                document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig.globalOtpauthUrl || '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";
+                adminModal.style.display = "flex";
+            } else {
+                openAdminPanel();
+            }
+        });
+}
+
+export function closeAdminPanel() {
+    const adminModal = document.getElementById("adminPanelModal");
+    if (adminModal) adminModal.style.display = "none";
+}
+
+// --- New: User Permissions Modal ---
+
+export function openUserPermissionsModal() {
+    let userPermissionsModal = document.getElementById("userPermissionsModal");
+    const isDarkMode = document.body.classList.contains("dark-mode");
+    const overlayBackground = isDarkMode ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.3)";
+    const modalContentStyles = `
+      background: ${isDarkMode ? "#2c2c2c" : "#fff"};
+      color: ${isDarkMode ? "#e0e0e0" : "#000"};
+      padding: 20px;
+      max-width: 500px;
+      width: 90%;
+      border-radius: 8px;
+      position: relative;
+    `;
+
+    if (!userPermissionsModal) {
+        userPermissionsModal = document.createElement("div");
+        userPermissionsModal.id = "userPermissionsModal";
+        userPermissionsModal.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: ${overlayBackground};
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 3500;
+      `;
+        userPermissionsModal.innerHTML = `
+        <div class="modal-content" style="${modalContentStyles}">
+          <span id="closeUserPermissionsModal" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+          <h3>User Permissions</h3>
+          <div id="userPermissionsList" style="max-height: 300px; overflow-y: auto; margin-bottom: 15px;">
+            <!-- User rows will be loaded here -->
+          </div>
+          <div style="display: flex; justify-content: flex-end; gap: 10px;">
+            <button type="button" id="cancelUserPermissionsBtn" class="btn btn-secondary">Cancel</button>
+            <button type="button" id="saveUserPermissionsBtn" class="btn btn-primary">Save Permissions</button>
+          </div>
+        </div>
+      `;
+        document.body.appendChild(userPermissionsModal);
+        document.getElementById("closeUserPermissionsModal").addEventListener("click", () => {
+            userPermissionsModal.style.display = "none";
+        });
+        document.getElementById("cancelUserPermissionsBtn").addEventListener("click", () => {
+            userPermissionsModal.style.display = "none";
+        });
+        document.getElementById("saveUserPermissionsBtn").addEventListener("click", () => {
+            // Collect permissions data from each user row.
+            const rows = userPermissionsModal.querySelectorAll(".user-permission-row");
+            const permissionsData = [];
+            rows.forEach(row => {
+                const username = row.getAttribute("data-username");
+                const folderOnlyCheckbox = row.querySelector("input[data-permission='folderOnly']");
+                const readOnlyCheckbox = row.querySelector("input[data-permission='readOnly']");
+                const disableUploadCheckbox = row.querySelector("input[data-permission='disableUpload']");
+                permissionsData.push({
+                    username,
+                    folderOnly: folderOnlyCheckbox.checked,
+                    readOnly: readOnlyCheckbox.checked,
+                    disableUpload: disableUploadCheckbox.checked
+                });
+            });
+            // Send the permissionsData to the server.
+            sendRequest("updateUserPermissions.php", "POST", { permissions: permissionsData }, { "X-CSRF-Token": window.csrfToken })
+                .then(response => {
+                    if (response.success) {
+                        showToast("User permissions updated successfully.");
+                        userPermissionsModal.style.display = "none";
+                    } else {
+                        showToast("Error updating permissions: " + (response.error || "Unknown error"));
+                    }
+                })
+                .catch(() => {
+                    showToast("Error updating permissions.");
+                });
+        });
+    } else {
+        userPermissionsModal.style.display = "flex";
+    }
+    // Load the list of users into the modal.
+    loadUserPermissionsList();
+}
+
+function loadUserPermissionsList() {
+    const listContainer = document.getElementById("userPermissionsList");
+    if (!listContainer) return;
+    listContainer.innerHTML = "";
+
+    // First, fetch the current permissions from the server.
+    fetch("getUserPermissions.php", { credentials: "include" })
+        .then(response => response.json())
+        .then(permissionsData => {
+            // Then, fetch the list of users.
+            return fetch("getUsers.php", { credentials: "include" })
+                .then(response => response.json())
+                .then(usersData => {
+                    const users = Array.isArray(usersData) ? usersData : (usersData.users || []);
+                    if (users.length === 0) {
+                        listContainer.innerHTML = "<p>No users found.</p>";
+                        return;
+                    }
+                    users.forEach(user => {
+                        // Skip admin users.
+                        if ((user.role && user.role === "1") || user.username.toLowerCase() === "admin") return;
+
+                        // Use stored permissions if available; otherwise fall back to localStorage defaults.
+                        const defaultPerm = {
+                            folderOnly: localStorage.getItem("folderOnly") === "true",
+                            readOnly: localStorage.getItem("readOnly") === "true",
+                            disableUpload: localStorage.getItem("disableUpload") === "true"
+                        };
+                        const userPerm = (permissionsData && typeof permissionsData === "object" && permissionsData[user.username]) || defaultPerm;
+
+                        // Create a row for the user.
+                        const row = document.createElement("div");
+                        row.classList.add("user-permission-row");
+                        row.setAttribute("data-username", user.username);
+                        row.style.padding = "10px 0";
+                        row.innerHTML = `
+                <div style="font-weight: bold; margin-bottom: 5px;">${user.username}</div>
+                <div style="display: flex; flex-direction: column; gap: 5px;">
+                  <label style="display: flex; align-items: center; gap: 5px;">
+                    <input type="checkbox" data-permission="folderOnly" ${userPerm.folderOnly ? "checked" : ""} />
+                    User Folder Only
+                  </label>
+                  <label style="display: flex; align-items: center; gap: 5px;">
+                    <input type="checkbox" data-permission="readOnly" ${userPerm.readOnly ? "checked" : ""} />
+                    Read Only
+                  </label>
+                  <label style="display: flex; align-items: center; gap: 5px;">
+                    <input type="checkbox" data-permission="disableUpload" ${userPerm.disableUpload ? "checked" : ""} />
+                    Disable Upload
+                  </label>
+                </div>
+                <hr style="margin-top: 10px; border: 0; border-bottom: 1px solid #ccc;">
+              `;
+                        listContainer.appendChild(row);
+                    });
+                });
+        })
+        .catch(() => {
+            listContainer.innerHTML = "<p>Error loading users.</p>";
+        });
+}

js/domUtils.js

@@ -28,35 +28,39 @@ export function toggleAllCheckboxes(masterCheckbox) {
 }
 
 export function updateFileActionButtons() {
-  const fileListContainer = document.getElementById("fileList");
   const fileCheckboxes = document.querySelectorAll("#fileList .file-checkbox");
   const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
   const copyBtn = document.getElementById("copySelectedBtn");
   const moveBtn = document.getElementById("moveSelectedBtn");
   const deleteBtn = document.getElementById("deleteSelectedBtn");
   const zipBtn = document.getElementById("downloadZipBtn");
+  const extractZipBtn = document.getElementById("extractZipBtn");
 
   if (fileCheckboxes.length === 0) {
     if (copyBtn) copyBtn.style.display = "none";
     if (moveBtn) moveBtn.style.display = "none";
     if (deleteBtn) deleteBtn.style.display = "none";
     if (zipBtn) zipBtn.style.display = "none";
+    if (extractZipBtn) extractZipBtn.style.display = "none";
   } else {
     if (copyBtn) copyBtn.style.display = "inline-block";
     if (moveBtn) moveBtn.style.display = "inline-block";
     if (deleteBtn) deleteBtn.style.display = "inline-block";
     if (zipBtn) zipBtn.style.display = "inline-block";
+    if (extractZipBtn) extractZipBtn.style.display = "inline-block";
 
-    if (selectedCheckboxes.length > 0) {
-      if (copyBtn) copyBtn.disabled = false;
-      if (moveBtn) moveBtn.disabled = false;
-      if (deleteBtn) deleteBtn.disabled = false;
-      if (zipBtn) zipBtn.disabled = false;
-    } else {
-      if (copyBtn) copyBtn.disabled = true;
-      if (moveBtn) moveBtn.disabled = true;
-      if (deleteBtn) deleteBtn.disabled = true;
-      if (zipBtn) zipBtn.disabled = true;
+    const anySelected = selectedCheckboxes.length > 0;
+    if (copyBtn) copyBtn.disabled = !anySelected;
+    if (moveBtn) moveBtn.disabled = !anySelected;
+    if (deleteBtn) deleteBtn.disabled = !anySelected;
+    if (zipBtn) zipBtn.disabled = !anySelected;
+
+    if (extractZipBtn) {
+      // Enable only if at least one selected file ends with .zip (case-insensitive).
+      const anyZipSelected = Array.from(selectedCheckboxes).some(chk =>
+        chk.value.toLowerCase().endsWith(".zip")
+      );
+      extractZipBtn.disabled = !anyZipSelected;
     }
   }
 }
@@ -93,7 +97,7 @@ export function buildSearchAndPaginationControls({ currentPage, totalPages, sear
               <i class="material-icons">search</i>
             </span>
           </div>
-          <input type="text" id="searchInput" class="form-control" placeholder="Search files..." value="${safeSearchTerm}" aria-describedby="searchIcon">
+          <input type="text" id="searchInput" class="form-control" placeholder="Search files or tag..." value="${safeSearchTerm}" aria-describedby="searchIcon">
         </div>
       </div>
       <div class="col-12 col-md-4 text-left">
@@ -132,18 +136,20 @@ 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|ogg)$/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|ogg)$/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>`;
+    } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) {
+      previewIcon = `<i class="material-icons">audiotrack</i>`;
     }
     previewButton = `<button class="btn btn-sm btn-info preview-btn" onclick="event.stopPropagation(); previewFile('${folderPath + encodeURIComponent(file.name)}', '${safeFileName}')">
-               ${previewIcon}
-             </button>`;
+                 ${previewIcon}
+               </button>`;
   }
 
   return `
@@ -151,7 +157,7 @@ export function buildFileTableRow(file, folderPath) {
     <td>
       <input type="checkbox" class="file-checkbox" value="${safeFileName}" onclick="event.stopPropagation(); updateRowHighlight(this);">
     </td>
-    <td>${safeFileName}</td>
+    <td class="file-name-cell">${safeFileName}</td>
     <td class="hide-small nowrap">${safeModified}</td>
     <td class="hide-small hide-medium nowrap">${safeUploaded}</td>
     <td class="hide-small nowrap">${safeSize}</td>
@@ -227,82 +233,51 @@ export function toggleRowSelection(event, fileName) {
   updateFileActionButtons();
 }
 
-export function previewFile(fileUrl, fileName) {
-  let modal = document.getElementById("filePreviewModal");
-  if (!modal) {
-    modal = document.createElement("div");
-    modal.id = "filePreviewModal";
-    Object.assign(modal.style, {
-      display: "none",
-      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">
-        <span id="closeFileModal" class="close-image-modal">&times;</span>
-        <h4 class="image-modal-header"></h4>
-        <div class="file-preview-container"></div>
-      </div>`;
-    document.body.appendChild(modal);
-
-    document.getElementById("closeFileModal").addEventListener("click", function () {
-      const video = modal.querySelector("video");
-      if (video) {
-        video.pause();
-        video.currentTime = 0;
-      }
-      modal.style.display = "none";
-    });
-
-    modal.addEventListener("click", function (e) {
-      if (e.target === modal) {
-        const video = modal.querySelector("video");
-        if (video) {
-          video.pause();
-          video.currentTime = 0;
+export function attachEnterKeyListener(modalId, buttonId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    // Make the modal focusable
+    modal.setAttribute("tabindex", "-1");
+    modal.focus();
+    modal.addEventListener("keydown", function(e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const btn = document.getElementById(buttonId);
+        if (btn) {
+          btn.click();
         }
-        modal.style.display = "none";
       }
     });
   }
+}
 
-  modal.querySelector("h4").textContent = fileName;
-  const container = modal.querySelector(".file-preview-container");
-  container.innerHTML = "";
+export function showCustomConfirmModal(message) {
+  return new Promise((resolve) => {
+    const modal = document.getElementById("customConfirmModal");
+    const messageElem = document.getElementById("confirmMessage");
+    const yesBtn = document.getElementById("confirmYesBtn");
+    const noBtn = document.getElementById("confirmNoBtn");
 
-  const extension = fileName.split('.').pop().toLowerCase();
+    messageElem.textContent = message;
+    modal.style.display = "block";
 
-  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico|tif|tiff|eps|heic)$/i.test(fileName)) {
-    const img = document.createElement("img");
-    img.src = fileUrl;
-    img.className = "image-modal-img";
-    container.appendChild(img);
-  } 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|webm|mov|ogg)$/i.test(fileName)) {
-    const video = document.createElement("video");
-    video.src = fileUrl;
-    video.controls = true;
-    video.className = "image-modal-img";
-    container.appendChild(video);
-  } else {
-    container.textContent = "Preview not available for this file type.";
-  }
+    // Cleanup function to hide the modal and remove event listeners.
+    function cleanup() {
+      modal.style.display = "none";
+      yesBtn.removeEventListener("click", onYes);
+      noBtn.removeEventListener("click", onNo);
+    }
 
-  modal.style.display = "flex";
+    function onYes() {
+      cleanup();
+      resolve(true);
+    }
+    function onNo() {
+      cleanup();
+      resolve(false);
+    }
+
+    yesBtn.addEventListener("click", onYes);
+    noBtn.addEventListener("click", onNo);
+  });
 }

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/fileTags.js

@@ -0,0 +1,466 @@
+// fileTags.js
+// This module provides functions for opening the tag modal,
+// adding tags to files (with a global tag store for reuse),
+// updating the file row display with tag badges,
+// filtering the file list by tag, and persisting tag data.
+import { escapeHTML } from './domUtils.js';
+
+export function openTagModal(file) {
+  // Create the modal element.
+  let modal = document.createElement('div');
+  modal.id = 'tagModal';
+  modal.className = 'modal';
+  modal.innerHTML = `
+    <div class="modal-content" style="width: 400px; max-width:90vw;">
+      <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
+        <h3 style="margin:0;">Tag File: ${file.name}</h3>
+        <span id="closeTagModal" style="cursor:pointer; font-size:24px;">&times;</span>
+      </div>
+      <div class="modal-body" style="margin-top:10px;">
+        <label for="tagNameInput">Tag Name:</label>
+        <input type="text" id="tagNameInput" placeholder="Enter tag name" style="width:100%; padding:5px;"/>
+        <br><br>
+        <label for="tagColorInput">Tag Color:</label>
+        <input type="color" id="tagColorInput" value="#ff0000" style="width:100%; padding:5px;"/>
+        <br><br>
+        <div id="customTagDropdown" style="max-height:150px; overflow-y:auto; border:1px solid #ccc; margin-top:5px; padding:5px;">
+          <!-- Custom tag options will be populated here -->
+        </div>
+        <br>
+        <div style="text-align:right;">
+          <button id="saveTagBtn" class="btn btn-primary">Save Tag</button>
+        </div>
+        <div id="currentTags" style="margin-top:10px; font-size:0.9em;">
+          <!-- Existing tags will be listed here -->
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+  modal.style.display = 'block';
+
+  updateCustomTagDropdown();
+
+  document.getElementById('closeTagModal').addEventListener('click', () => {
+    modal.remove();
+  });
+
+  updateTagModalDisplay(file);
+
+  document.getElementById('tagNameInput').addEventListener('input', (e) => {
+    updateCustomTagDropdown(e.target.value);
+  });
+
+  document.getElementById('saveTagBtn').addEventListener('click', () => {
+    const tagName = document.getElementById('tagNameInput').value.trim();
+    const tagColor = document.getElementById('tagColorInput').value;
+    if (!tagName) {
+      alert('Please enter a tag name.');
+      return;
+    }
+    addTagToFile(file, { name: tagName, color: tagColor });
+    updateTagModalDisplay(file);
+    updateFileRowTagDisplay(file);
+    saveFileTags(file);
+    document.getElementById('tagNameInput').value = '';
+    updateCustomTagDropdown();
+  });
+}
+
+/**
+ * Open a modal to tag multiple files.
+ * @param {Array} files - Array of file objects to tag.
+ */
+export function openMultiTagModal(files) {
+  let modal = document.createElement('div');
+  modal.id = 'multiTagModal';
+  modal.className = 'modal';
+  modal.innerHTML = `
+    <div class="modal-content" style="width: 400px; max-width:90vw;">
+      <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
+        <h3 style="margin:0;">Tag Selected Files (${files.length})</h3>
+        <span id="closeMultiTagModal" style="cursor:pointer; font-size:24px;">&times;</span>
+      </div>
+      <div class="modal-body" style="margin-top:10px;">
+        <label for="multiTagNameInput">Tag Name:</label>
+        <input type="text" id="multiTagNameInput" placeholder="Enter tag name" style="width:100%; padding:5px;"/>
+        <br><br>
+        <label for="multiTagColorInput">Tag Color:</label>
+        <input type="color" id="multiTagColorInput" value="#ff0000" style="width:100%; padding:5px;"/>
+        <br><br>
+        <div id="multiCustomTagDropdown" style="max-height:150px; overflow-y:auto; border:1px solid #ccc; margin-top:5px; padding:5px;">
+          <!-- Custom tag options will be populated here -->
+        </div>
+        <br>
+        <div style="text-align:right;">
+          <button id="saveMultiTagBtn" class="btn btn-primary">Save Tag to Selected</button>
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+  modal.style.display = 'block';
+
+  updateMultiCustomTagDropdown();
+
+  document.getElementById('closeMultiTagModal').addEventListener('click', () => {
+    modal.remove();
+  });
+
+  document.getElementById('multiTagNameInput').addEventListener('input', (e) => {
+    updateMultiCustomTagDropdown(e.target.value);
+  });
+
+  document.getElementById('saveMultiTagBtn').addEventListener('click', () => {
+    const tagName = document.getElementById('multiTagNameInput').value.trim();
+    const tagColor = document.getElementById('multiTagColorInput').value;
+    if (!tagName) {
+      alert('Please enter a tag name.');
+      return;
+    }
+    files.forEach(file => {
+      addTagToFile(file, { name: tagName, color: tagColor });
+      updateFileRowTagDisplay(file);
+      saveFileTags(file);
+    });
+    modal.remove();
+  });
+}
+
+/**
+ * Update the custom dropdown for multi-tag modal.
+ * Similar to updateCustomTagDropdown but includes a remove icon.
+ */
+function updateMultiCustomTagDropdown(filterText = "") {
+  const dropdown = document.getElementById("multiCustomTagDropdown");
+  if (!dropdown) return;
+  dropdown.innerHTML = "";
+  let tags = window.globalTags || [];
+  if (filterText) {
+    tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase()));
+  }
+  if (tags.length > 0) {
+    tags.forEach(tag => {
+      const item = document.createElement("div");
+      item.style.cursor = "pointer";
+      item.style.padding = "5px";
+      item.style.borderBottom = "1px solid #eee";
+      // Display colored square and tag name with remove icon.
+      item.innerHTML = `
+        <span style="display:inline-block; width:16px; height:16px; background-color:${tag.color}; border:1px solid #ccc; margin-right:5px; vertical-align:middle;"></span>
+        ${escapeHTML(tag.name)}
+        <span class="global-remove" style="color:red; font-weight:bold; margin-left:5px; cursor:pointer;">×</span>
+      `;
+      item.addEventListener("click", function(e) {
+        if (e.target.classList.contains("global-remove")) return;
+        document.getElementById("multiTagNameInput").value = tag.name;
+        document.getElementById("multiTagColorInput").value = tag.color;
+      });
+      item.querySelector('.global-remove').addEventListener("click", function(e){
+        e.stopPropagation();
+        removeGlobalTag(tag.name);
+      });
+      dropdown.appendChild(item);
+    });
+  } else {
+    dropdown.innerHTML = "<div style='padding:5px;'>No tags available</div>";
+  }
+}
+
+function updateCustomTagDropdown(filterText = "") {
+  const dropdown = document.getElementById("customTagDropdown");
+  if (!dropdown) return;
+  dropdown.innerHTML = "";
+  let tags = window.globalTags || [];
+  if (filterText) {
+    tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase()));
+  }
+  if (tags.length > 0) {
+    tags.forEach(tag => {
+      const item = document.createElement("div");
+      item.style.cursor = "pointer";
+      item.style.padding = "5px";
+      item.style.borderBottom = "1px solid #eee";
+      item.innerHTML = `
+        <span style="display:inline-block; width:16px; height:16px; background-color:${tag.color}; border:1px solid #ccc; margin-right:5px; vertical-align:middle;"></span>
+        ${escapeHTML(tag.name)}
+        <span class="global-remove" style="color:red; font-weight:bold; margin-left:5px; cursor:pointer;">×</span>
+      `;
+      item.addEventListener("click", function(e){
+        if (e.target.classList.contains('global-remove')) return;
+        document.getElementById("tagNameInput").value = tag.name;
+        document.getElementById("tagColorInput").value = tag.color;
+      });
+      item.querySelector('.global-remove').addEventListener("click", function(e){
+        e.stopPropagation();
+        removeGlobalTag(tag.name);
+      });
+      dropdown.appendChild(item);
+    });
+  } else {
+    dropdown.innerHTML = "<div style='padding:5px;'>No tags available</div>";
+  }
+}
+    
+// Update the modal display to show current tags on the file.
+function updateTagModalDisplay(file) {
+  const container = document.getElementById('currentTags');
+  if (!container) return;
+  container.innerHTML = '<strong>Current Tags:</strong> ';
+  if (file.tags && file.tags.length > 0) {
+    file.tags.forEach(tag => {
+      const tagElem = document.createElement('span');
+      tagElem.textContent = tag.name;
+      tagElem.style.backgroundColor = tag.color;
+      tagElem.style.color = '#fff';
+      tagElem.style.padding = '2px 6px';
+      tagElem.style.marginRight = '5px';
+      tagElem.style.borderRadius = '3px';
+      tagElem.style.display = 'inline-block';
+      tagElem.style.position = 'relative';
+      
+      const removeIcon = document.createElement('span');
+      removeIcon.textContent = ' ✕';
+      removeIcon.style.fontWeight = 'bold';
+      removeIcon.style.marginLeft = '3px';
+      removeIcon.style.cursor = 'pointer';
+      
+      removeIcon.addEventListener('click', (e) => {
+        e.stopPropagation();
+        removeTagFromFile(file, tag.name);
+      });
+      
+      tagElem.appendChild(removeIcon);
+      container.appendChild(tagElem);
+    });
+  } else {
+    container.innerHTML += 'None';
+  }
+}
+
+function removeTagFromFile(file, tagName) {
+  file.tags = file.tags.filter(t => t.name.toLowerCase() !== tagName.toLowerCase());
+  updateTagModalDisplay(file);
+  updateFileRowTagDisplay(file);
+  saveFileTags(file);
+}
+
+/**
+ * Remove a tag from the global tag store.
+ * This function updates window.globalTags and calls the backend endpoint
+ * to remove the tag from the persistent store.
+ */
+function removeGlobalTag(tagName) {
+  window.globalTags = window.globalTags.filter(t => t.name.toLowerCase() !== tagName.toLowerCase());
+  localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+  updateCustomTagDropdown();
+  updateMultiCustomTagDropdown();
+  saveGlobalTagRemoval(tagName);
+}
+
+// NEW: Save global tag removal to the server.
+function saveGlobalTagRemoval(tagName) {
+  fetch("saveFileTag.php", {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": window.csrfToken
+    },
+    body: JSON.stringify({
+      folder: "root",
+      file: "global",
+      deleteGlobal: true,
+      tagToDelete: tagName,
+      tags: []
+    })
+  })
+    .then(response => response.json())
+    .then(data => {
+      if (data.success) {
+        console.log("Global tag removed:", tagName);
+        if (data.globalTags) {
+          window.globalTags = data.globalTags;
+          localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+          updateCustomTagDropdown();
+          updateMultiCustomTagDropdown();
+        }
+      } else {
+        console.error("Error removing global tag:", data.error);
+      }
+    })
+    .catch(err => {
+      console.error("Error removing global tag:", err);
+    });
+}
+  
+// Global store for reusable tags.
+window.globalTags = window.globalTags || [];
+if (localStorage.getItem('globalTags')) {
+  try {
+    window.globalTags = JSON.parse(localStorage.getItem('globalTags'));
+  } catch (e) { }
+}
+  
+// New function to load global tags from the server's persistent JSON.
+export function loadGlobalTags() {
+  fetch("metadata/createdTags.json", { credentials: "include" })
+    .then(response => {
+      if (!response.ok) {
+        // If the file doesn't exist, assume there are no global tags.
+        return [];
+      }
+      return response.json();
+    })
+    .then(data => {
+      window.globalTags = data;
+      localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+      updateCustomTagDropdown();
+      updateMultiCustomTagDropdown();
+    })
+    .catch(err => {
+      console.error("Error loading global tags:", err);
+      window.globalTags = [];
+      updateCustomTagDropdown();
+      updateMultiCustomTagDropdown();
+    });
+}
+  
+loadGlobalTags();
+  
+// Add (or update) a tag in the file object.
+export function addTagToFile(file, tag) {
+  if (!file.tags) {
+    file.tags = [];
+  }
+  const exists = file.tags.find(t => t.name.toLowerCase() === tag.name.toLowerCase());
+  if (exists) {
+    exists.color = tag.color;
+  } else {
+    file.tags.push(tag);
+  }
+  const globalExists = window.globalTags.find(t => t.name.toLowerCase() === tag.name.toLowerCase());
+  if (!globalExists) {
+    window.globalTags.push(tag);
+    localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+  }
+}
+  
+// Update the file row (in table view) to show tag badges.
+export function updateFileRowTagDisplay(file) {
+  const rows = document.querySelectorAll(`[id^="file-row-${encodeURIComponent(file.name)}"]`);
+  console.log('Updating tags for rows:', rows);
+  rows.forEach(row => {
+    let cell = row.querySelector('.file-name-cell');
+    if (cell) {
+      let badgeContainer = cell.querySelector('.tag-badges');
+      if (!badgeContainer) {
+        badgeContainer = document.createElement('div');
+        badgeContainer.className = 'tag-badges';
+        badgeContainer.style.display = 'inline-block';
+        badgeContainer.style.marginLeft = '5px';
+        cell.appendChild(badgeContainer);
+      }
+      badgeContainer.innerHTML = '';
+      if (file.tags && file.tags.length > 0) {
+        file.tags.forEach(tag => {
+          const badge = document.createElement('span');
+          badge.textContent = tag.name;
+          badge.style.backgroundColor = tag.color;
+          badge.style.color = '#fff';
+          badge.style.padding = '2px 4px';
+          badge.style.marginRight = '2px';
+          badge.style.borderRadius = '3px';
+          badge.style.fontSize = '0.8em';
+          badge.style.verticalAlign = 'middle';
+          badgeContainer.appendChild(badge);
+        });
+      }
+    }
+  });
+}
+  
+export function initTagSearch() {
+  const searchInput = document.getElementById('searchInput');
+  if (searchInput) {
+    let tagSearchInput = document.getElementById('tagSearchInput');
+    if (!tagSearchInput) {
+      tagSearchInput = document.createElement('input');
+      tagSearchInput.id = 'tagSearchInput';
+      tagSearchInput.placeholder = 'Filter by tag';
+      tagSearchInput.style.marginLeft = '10px';
+      tagSearchInput.style.padding = '5px';
+      searchInput.parentNode.insertBefore(tagSearchInput, searchInput.nextSibling);
+      tagSearchInput.addEventListener('input', () => {
+        window.currentTagFilter = tagSearchInput.value.trim().toLowerCase();
+        if (window.currentFolder) {
+          renderFileTable(window.currentFolder);
+        }
+      });
+    }
+  }
+}
+  
+export function filterFilesByTag(files) {
+  if (window.currentTagFilter && window.currentTagFilter !== '') {
+    return files.filter(file => {
+      if (file.tags && file.tags.length > 0) {
+        return file.tags.some(tag => tag.name.toLowerCase().includes(window.currentTagFilter));
+      }
+      return false;
+    });
+  }
+  return files;
+}
+  
+function updateGlobalTagList() {
+  const dataList = document.getElementById("globalTagList");
+  if (dataList) {
+    dataList.innerHTML = "";
+    window.globalTags.forEach(tag => {
+      const option = document.createElement("option");
+      option.value = tag.name;
+      dataList.appendChild(option);
+    });
+  }
+}
+  
+export function saveFileTags(file, deleteGlobal = false, tagToDelete = null) {
+  const folder = file.folder || "root";
+  const payload = {
+    folder: folder,
+    file: file.name,
+    tags: file.tags
+  };
+  if (deleteGlobal && tagToDelete) {
+    payload.file = "global";
+    payload.deleteGlobal = true;
+    payload.tagToDelete = tagToDelete;
+  }
+  fetch("saveFileTag.php", {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": window.csrfToken
+    },
+    body: JSON.stringify(payload)
+  })
+    .then(response => response.json())
+    .then(data => {
+      if (data.success) {
+        console.log("Tags saved:", data);
+        if (data.globalTags) {
+          window.globalTags = data.globalTags;
+          localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+          updateCustomTagDropdown();
+          updateMultiCustomTagDropdown();
+        }
+      } else {
+        console.error("Error saving tags:", data.error);
+      }
+    })
+    .catch(err => {
+      console.error("Error saving tags:", err);
+    });
+}

js/folderManager.js

@@ -1,11 +1,11 @@
 // folderManager.js
 
-import { loadFileList } from './fileManager.js';
-import { showToast, escapeHTML } from './domUtils.js';
+import { loadFileList } from './fileListView.js';
+import { showToast, escapeHTML, attachEnterKeyListener } from './domUtils.js';
 
-// ----------------------
-// Helper Functions (Data/State)
-// ----------------------
+/* ----------------------
+   Helper Functions (Data/State)
+----------------------*/
 
 // Formats a folder name for display (e.g. adding indentations).
 export function formatFolderName(folder) {
@@ -26,7 +26,6 @@ export function formatFolderName(folder) {
 function buildFolderTree(folders) {
   const tree = {};
   folders.forEach(folderPath => {
-    // Ensure folderPath is a string
     if (typeof folderPath !== "string") return;
     const parts = folderPath.split('/');
     let current = tree;
@@ -40,9 +39,9 @@ function buildFolderTree(folders) {
   return tree;
 }
 
-// ----------------------
-// Folder Tree State (Save/Load)
-// ----------------------
+/* ----------------------
+   Folder Tree State (Save/Load)
+----------------------*/
 function loadFolderTreeState() {
   const state = localStorage.getItem("folderTreeState");
   return state ? JSON.parse(state) : {};
@@ -59,31 +58,151 @@ function getParentFolder(folder) {
   return lastSlash === -1 ? "root" : folder.substring(0, lastSlash);
 }
 
-// ----------------------
-// DOM Building Functions
-// ----------------------
+/* ----------------------
+   Breadcrumb Functions
+----------------------*/
+function renderBreadcrumb(normalizedFolder) {
+  if (!normalizedFolder || normalizedFolder === "") return "";
+  const parts = normalizedFolder.split("/");
+  let breadcrumbItems = [];
+  // Use the first segment as the root.
+  breadcrumbItems.push(`<span class="breadcrumb-link" data-folder="${parts[0]}">${escapeHTML(parts[0])}</span>`);
+  let cumulative = parts[0];
+  parts.slice(1).forEach(part => {
+    cumulative += "/" + part;
+    breadcrumbItems.push(`<span class="breadcrumb-separator"> / </span>`);
+    breadcrumbItems.push(`<span class="breadcrumb-link" data-folder="${cumulative}">${escapeHTML(part)}</span>`);
+  });
+  return breadcrumbItems.join('');
+}
 
-// Recursively builds HTML for the folder tree as nested <ul> elements.
+function bindBreadcrumbEvents() {
+  const breadcrumbLinks = document.querySelectorAll(".breadcrumb-link");
+  breadcrumbLinks.forEach(link => {
+    link.addEventListener("click", function (e) {
+      e.stopPropagation();
+      let folder = this.getAttribute("data-folder");
+      window.currentFolder = folder;
+      localStorage.setItem("lastOpenedFolder", folder);
+      const titleEl = document.getElementById("fileListTitle");
+      titleEl.innerHTML = "Files in (" + renderBreadcrumb(folder) + ")";
+      expandTreePath(folder);
+      document.querySelectorAll(".folder-option").forEach(item => item.classList.remove("selected"));
+      const targetOption = document.querySelector(`.folder-option[data-folder="${folder}"]`);
+      if (targetOption) targetOption.classList.add("selected");
+      loadFileList(folder);
+      bindBreadcrumbEvents();
+    });
+    link.addEventListener("dragover", function (e) {
+      e.preventDefault();
+      this.classList.add("drop-hover");
+    });
+    link.addEventListener("dragleave", function (e) {
+      this.classList.remove("drop-hover");
+    });
+    link.addEventListener("drop", function (e) {
+      e.preventDefault();
+      this.classList.remove("drop-hover");
+      const dropFolder = this.getAttribute("data-folder");
+      let dragData;
+      try {
+        dragData = JSON.parse(e.dataTransfer.getData("application/json"));
+      } catch (err) {
+        console.error("Invalid drag data on breadcrumb:", err);
+        return;
+      }
+      const filesToMove = dragData.files ? dragData.files : (dragData.fileName ? [dragData.fileName] : []);
+      if (filesToMove.length === 0) 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: filesToMove,
+          destination: dropFolder
+        })
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          showToast(`File(s) moved successfully to ${dropFolder}!`);
+          loadFileList(dragData.sourceFolder);
+        } else {
+          showToast("Error moving files: " + (data.error || "Unknown error"));
+        }
+      })
+      .catch(error => {
+        console.error("Error moving files via drop on breadcrumb:", error);
+        showToast("Error moving files.");
+      });
+    });
+  });
+}
+
+/* ----------------------
+   Check Current User's Folder-Only Permission
+----------------------*/
+// This function uses localStorage values (set during login) to determine if the current user is restricted.
+// If folderOnly is "true", then the personal folder (i.e. username) is forced as the effective root.
+function checkUserFolderPermission() {
+  const username = localStorage.getItem("username");
+  console.log("checkUserFolderPermission: username =", username);
+  if (!username) {
+    console.warn("No username in localStorage; skipping getUserPermissions fetch.");
+    return Promise.resolve(false);
+  }
+  if (localStorage.getItem("folderOnly") === "true") {
+    window.userFolderOnly = true;
+    console.log("checkUserFolderPermission: using localStorage.folderOnly = true");
+    localStorage.setItem("lastOpenedFolder", username);
+    window.currentFolder = username;
+    return Promise.resolve(true);
+  }
+  return fetch("getUserPermissions.php", { credentials: "include" })
+    .then(response => response.json())
+    .then(permissionsData => {
+      console.log("checkUserFolderPermission: permissionsData =", permissionsData);
+      if (permissionsData && permissionsData[username] && permissionsData[username].folderOnly) {
+        window.userFolderOnly = true;
+        localStorage.setItem("folderOnly", "true");
+        localStorage.setItem("lastOpenedFolder", username);
+        window.currentFolder = username;
+        return true;
+      } else {
+        window.userFolderOnly = false;
+        localStorage.setItem("folderOnly", "false");
+        return false;
+      }
+    })
+    .catch(err => {
+      console.error("Error fetching user permissions:", err);
+      window.userFolderOnly = false;
+      return false;
+    });
+}
+
+/* ----------------------
+   DOM Building Functions for Folder Tree
+----------------------*/
 function renderFolderTree(tree, parentPath = "", defaultDisplay = "block") {
   const state = loadFolderTreeState();
   let html = `<ul class="folder-tree ${defaultDisplay === 'none' ? 'collapsed' : 'expanded'}">`;
   for (const folder in tree) {
-    // Skip the trash folder (case-insensitive)
-    if (folder.toLowerCase() === "trash") {
-      continue;
-    }
-    
+    if (folder.toLowerCase() === "trash") continue;
     const fullPath = parentPath ? parentPath + "/" + folder : folder;
     const hasChildren = Object.keys(tree[folder]).length > 0;
     const displayState = state[fullPath] !== undefined ? state[fullPath] : defaultDisplay;
     html += `<li class="folder-item">`;
     if (hasChildren) {
-      const toggleSymbol = (displayState === "none") ? "[+]" : "[-]";
+      const toggleSymbol = (displayState === 'none') ? '[+]' : '[' + '<span class="custom-dash">-</span>' + ']';
       html += `<span class="folder-toggle" data-folder="${fullPath}">${toggleSymbol}</span>`;
     } else {
       html += `<span class="folder-indent-placeholder"></span>`;
     }
-    // Use escapeHTML to safely render the folder name.
     html += `<span class="folder-option" data-folder="${fullPath}">${escapeHTML(folder)}</span>`;
     if (hasChildren) {
       html += renderFolderTree(tree[folder], fullPath, displayState);
@@ -94,7 +213,6 @@ function renderFolderTree(tree, parentPath = "", defaultDisplay = "block") {
   return html;
 }
 
-// Expands the folder tree along a given path.
 function expandTreePath(path) {
   const parts = path.split("/");
   let cumulative = "";
@@ -109,7 +227,7 @@ function expandTreePath(path) {
         nestedUl.classList.add("expanded");
         const toggle = li.querySelector(".folder-toggle");
         if (toggle) {
-          toggle.textContent = "[-]";
+          toggle.innerHTML = "[" + '<span class="custom-dash">-</span>' + "]";
           let state = loadFolderTreeState();
           state[cumulative] = "block";
           saveFolderTreeState(state);
@@ -119,22 +237,18 @@ function expandTreePath(path) {
   });
 }
 
-// ----------------------
-// Drag & Drop Support for Folder Tree Nodes
-// ----------------------
-
-// When a draggable file is dragged over a folder node, allow the drop and add a visual cue.
+/* ----------------------
+   Drag & Drop Support for Folder Tree Nodes
+----------------------*/
 function folderDragOverHandler(event) {
   event.preventDefault();
   event.currentTarget.classList.add("drop-hover");
 }
 
-// Remove the visual cue when the drag leaves.
 function folderDragLeaveHandler(event) {
   event.currentTarget.classList.remove("drop-hover");
 }
 
-// When a file is dropped onto a folder node, send a move request.
 function folderDropHandler(event) {
   event.preventDefault();
   event.currentTarget.classList.remove("drop-hover");
@@ -143,10 +257,9 @@ function folderDropHandler(event) {
   try {
     dragData = JSON.parse(event.dataTransfer.getData("application/json"));
   } catch (e) {
-    console.error("Invalid drag data");
+    console.error("Invalid drag data", e);
     return;
   }
-  // Use the files array if present, or fall back to a single file.
   const filesToMove = dragData.files ? dragData.files : (dragData.fileName ? [dragData.fileName] : []);
   if (filesToMove.length === 0) return;
   fetch("moveFiles.php", {
@@ -177,85 +290,110 @@ function folderDropHandler(event) {
     });
 }
 
-// ----------------------
-// Main Folder Tree Rendering and Event Binding
-// ----------------------
+/* ----------------------
+   Main Folder Tree Rendering and Event Binding
+----------------------*/
 export async function loadFolderTree(selectedFolder) {
   try {
-    const response = await fetch('getFolderList.php');
+    // Check if the user has folder-only permission.
+    await checkUserFolderPermission();
+    
+    // Determine effective root folder.
+    const username = localStorage.getItem("username") || "root";
+    let effectiveRoot = "root";
+    let effectiveLabel = "(Root)";
+    if (window.userFolderOnly) {
+      effectiveRoot = username; // Use the username as the personal root.
+      effectiveLabel = `(Root)`;
+      // Force override of any saved folder.
+      localStorage.setItem("lastOpenedFolder", username);
+      window.currentFolder = username;
+    } else {
+      window.currentFolder = localStorage.getItem("lastOpenedFolder") || "root";
+    }
+    
+    // Build fetch URL.
+    let fetchUrl = 'getFolderList.php';
+    if (window.userFolderOnly) {
+      fetchUrl += '?restricted=1';
+    }
+    console.log("Fetching folder list from:", fetchUrl);
+    
+    // Fetch folder list from the server.
+    const response = await fetch(fetchUrl);
     if (response.status === 401) {
       console.error("Unauthorized: Please log in to view folders.");
       showToast("Session expired. Please log in again.");
       window.location.href = "logout.php";
       return;
     }
-    let folders = await response.json();
-
-    // If returned items are objects (with a "folder" property), extract folder paths.
-    if (Array.isArray(folders) && folders.length && typeof folders[0] === "object" && folders[0].folder) {
-      folders = folders.map(item => item.folder);
+    let folderData = await response.json();
+    console.log("Folder data received:", folderData);
+    let folders = [];
+    if (Array.isArray(folderData) && folderData.length && typeof folderData[0] === "object" && folderData[0].folder) {
+      folders = folderData.map(item => item.folder);
+    } else if (Array.isArray(folderData)) {
+      folders = folderData;
     }
-    // Filter out duplicate "root" entries if present.
-    folders = folders.filter(folder => folder !== "root");
-
-    if (!Array.isArray(folders)) {
-      console.error("Folder list response is not an array:", folders);
-      return;
+    
+    // Remove any global "root" entry.
+    folders = folders.filter(folder => folder.toLowerCase() !== "root");
+    
+    // If restricted, filter folders: keep only those that start with effectiveRoot + "/" (do not include effectiveRoot itself).
+    if (window.userFolderOnly && effectiveRoot !== "root") {
+      folders = folders.filter(folder => folder.startsWith(effectiveRoot + "/"));
+      // Force current folder to be the effective root.
+      localStorage.setItem("lastOpenedFolder", effectiveRoot);
+      window.currentFolder = effectiveRoot;
     }
-
+    
+    localStorage.setItem("lastOpenedFolder", window.currentFolder);
+    
+    // Render the folder tree.
     const container = document.getElementById("folderTreeContainer");
     if (!container) {
       console.error("Folder tree container not found.");
       return;
     }
-
+    
     let html = `<div id="rootRow" class="root-row">
-                  <span class="folder-toggle" data-folder="root">[-]</span>
-                  <span class="folder-option root-folder-option" data-folder="root">(Root)</span>
-                </div>`;
-    if (folders.length === 0) {
-      html += `<ul class="folder-tree expanded">
-                 <li class="folder-item">
-                   <span class="folder-option" data-folder="root">(Root)</span>
-                 </li>
-               </ul>`;
-    } else {
+      <span class="folder-toggle" data-folder="${effectiveRoot}">[<span class="custom-dash">-</span>]</span>
+      <span class="folder-option root-folder-option" data-folder="${effectiveRoot}">${effectiveLabel}</span>
+    </div>`;
+    if (folders.length > 0) {
       const tree = buildFolderTree(folders);
       html += renderFolderTree(tree, "", "block");
     }
     container.innerHTML = html;
-
-    // Attach drag-and-drop event listeners to folder nodes.
+    
+    // Attach drag/drop event listeners.
     container.querySelectorAll(".folder-option").forEach(el => {
       el.addEventListener("dragover", folderDragOverHandler);
       el.addEventListener("dragleave", folderDragLeaveHandler);
       el.addEventListener("drop", folderDropHandler);
     });
-
-    // Determine current folder.
+    
     if (selectedFolder) {
       window.currentFolder = selectedFolder;
-    } else {
-      window.currentFolder = localStorage.getItem("lastOpenedFolder") || "root";
     }
     localStorage.setItem("lastOpenedFolder", window.currentFolder);
-    document.getElementById("fileListTitle").textContent =
-      window.currentFolder === "root" ? "Files in (Root)" : "Files in (" + window.currentFolder + ")";
+    
+    const titleEl = document.getElementById("fileListTitle");
+    titleEl.innerHTML = "Files in (" + renderBreadcrumb(window.currentFolder) + ")";
+    bindBreadcrumbEvents();
     loadFileList(window.currentFolder);
-
-    // Expand tree to current folder.
+    
     const folderState = loadFolderTreeState();
-    if (window.currentFolder !== "root" && folderState[window.currentFolder] !== "none") {
+    if (window.currentFolder !== effectiveRoot && folderState[window.currentFolder] !== "none") {
       expandTreePath(window.currentFolder);
     }
-
-    // Highlight current folder.
+    
     const selectedEl = container.querySelector(`.folder-option[data-folder="${window.currentFolder}"]`);
     if (selectedEl) {
+      container.querySelectorAll(".folder-option").forEach(item => item.classList.remove("selected"));
       selectedEl.classList.add("selected");
     }
-
-    // Event binding for folder selection.
+    
     container.querySelectorAll(".folder-option").forEach(el => {
       el.addEventListener("click", function (e) {
         e.stopPropagation();
@@ -264,13 +402,13 @@ export async function loadFolderTree(selectedFolder) {
         const selected = this.getAttribute("data-folder");
         window.currentFolder = selected;
         localStorage.setItem("lastOpenedFolder", selected);
-        document.getElementById("fileListTitle").textContent =
-          selected === "root" ? "Files in (Root)" : "Files in (" + selected + ")";
+        const titleEl = document.getElementById("fileListTitle");
+        titleEl.innerHTML = "Files in (" + renderBreadcrumb(selected) + ")";
+        bindBreadcrumbEvents();
         loadFileList(selected);
       });
     });
-
-    // Event binding for toggling folders.
+    
     const rootToggle = container.querySelector("#rootRow .folder-toggle");
     if (rootToggle) {
       rootToggle.addEventListener("click", function (e) {
@@ -281,19 +419,19 @@ export async function loadFolderTree(selectedFolder) {
           if (nestedUl.classList.contains("collapsed") || !nestedUl.classList.contains("expanded")) {
             nestedUl.classList.remove("collapsed");
             nestedUl.classList.add("expanded");
-            this.textContent = "[-]";
-            state["root"] = "block";
+            this.innerHTML = "[" + '<span class="custom-dash">-</span>' + "]";
+            state[effectiveRoot] = "block";
           } else {
             nestedUl.classList.remove("expanded");
             nestedUl.classList.add("collapsed");
             this.textContent = "[+]";
-            state["root"] = "none";
+            state[effectiveRoot] = "none";
           }
           saveFolderTreeState(state);
         }
       });
     }
-
+    
     container.querySelectorAll(".folder-toggle").forEach(toggle => {
       toggle.addEventListener("click", function (e) {
         e.stopPropagation();
@@ -304,7 +442,7 @@ export async function loadFolderTree(selectedFolder) {
           if (siblingUl.classList.contains("collapsed") || !siblingUl.classList.contains("expanded")) {
             siblingUl.classList.remove("collapsed");
             siblingUl.classList.add("expanded");
-            this.textContent = "[-]";
+            this.innerHTML = "[" + '<span class="custom-dash">-</span>' + "]";
             state[folderPath] = "block";
           } else {
             siblingUl.classList.remove("expanded");
@@ -316,7 +454,7 @@ export async function loadFolderTree(selectedFolder) {
         }
       });
     });
-
+    
   } catch (error) {
     console.error("Error loading folder tree:", error);
   }
@@ -327,10 +465,9 @@ export function loadFolderList(selectedFolder) {
   loadFolderTree(selectedFolder);
 }
 
-// ----------------------
-// Folder Management (Rename, Delete, Create)
-// ----------------------
-
+/* ----------------------
+   Folder Management (Rename, Delete, Create)
+----------------------*/
 document.getElementById("renameFolderBtn").addEventListener("click", openRenameFolderModal);
 document.getElementById("deleteFolderBtn").addEventListener("click", openDeleteFolderModal);
 
@@ -343,13 +480,18 @@ function openRenameFolderModal() {
   const parts = selectedFolder.split("/");
   document.getElementById("newRenameFolderName").value = parts[parts.length - 1];
   document.getElementById("renameFolderModal").style.display = "block";
+  setTimeout(() => {
+    const input = document.getElementById("newRenameFolderName");
+    input.focus();
+    input.select();
+  }, 100);
 }
 
 document.getElementById("cancelRenameFolder").addEventListener("click", function () {
   document.getElementById("renameFolderModal").style.display = "none";
   document.getElementById("newRenameFolderName").value = "";
 });
-
+attachEnterKeyListener("renameFolderModal", "submitRenameFolder");
 document.getElementById("submitRenameFolder").addEventListener("click", function (event) {
   event.preventDefault();
   const selectedFolder = window.currentFolder || "root";
@@ -406,7 +548,7 @@ function openDeleteFolderModal() {
 document.getElementById("cancelDeleteFolder").addEventListener("click", function () {
   document.getElementById("deleteFolderModal").style.display = "none";
 });
-
+attachEnterKeyListener("deleteFolderModal", "confirmDeleteFolder");
 document.getElementById("confirmDeleteFolder").addEventListener("click", function () {
   const selectedFolder = window.currentFolder || "root";
   const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
@@ -437,13 +579,14 @@ document.getElementById("confirmDeleteFolder").addEventListener("click", functio
 
 document.getElementById("createFolderBtn").addEventListener("click", function () {
   document.getElementById("createFolderModal").style.display = "block";
+  document.getElementById("newFolderName").focus();
 });
 
 document.getElementById("cancelCreateFolder").addEventListener("click", function () {
   document.getElementById("createFolderModal").style.display = "none";
   document.getElementById("newFolderName").value = "";
 });
-
+attachEnterKeyListener("createFolderModal", "submitCreateFolder");
 document.getElementById("submitCreateFolder").addEventListener("click", function () {
   const folderInput = document.getElementById("newFolderName").value.trim();
   if (!folderInput) {
@@ -484,4 +627,123 @@ document.getElementById("submitCreateFolder").addEventListener("click", function
       console.error("Error creating folder:", error);
       document.getElementById("createFolderModal").style.display = "none";
     });
-});
+});
+
+// ---------- CONTEXT MENU SUPPORT FOR FOLDER MANAGER ----------
+function showFolderManagerContextMenu(x, y, menuItems) {
+  let menu = document.getElementById("folderManagerContextMenu");
+  if (!menu) {
+    menu = document.createElement("div");
+    menu.id = "folderManagerContextMenu";
+    menu.style.position = "absolute";
+    menu.style.padding = "5px 0";
+    menu.style.minWidth = "150px";
+    menu.style.zIndex = "9999";
+    document.body.appendChild(menu);
+  }
+  if (document.body.classList.contains("dark-mode")) {
+    menu.style.backgroundColor = "#2c2c2c";
+    menu.style.border = "1px solid #555";
+    menu.style.color = "#e0e0e0";
+  } else {
+    menu.style.backgroundColor = "#fff";
+    menu.style.border = "1px solid #ccc";
+    menu.style.color = "#000";
+  }
+  menu.innerHTML = "";
+  menuItems.forEach(item => {
+    const menuItem = document.createElement("div");
+    menuItem.textContent = item.label;
+    menuItem.style.padding = "5px 15px";
+    menuItem.style.cursor = "pointer";
+    menuItem.addEventListener("mouseover", () => {
+      if (document.body.classList.contains("dark-mode")) {
+        menuItem.style.backgroundColor = "#444";
+      } else {
+        menuItem.style.backgroundColor = "#f0f0f0";
+      }
+    });
+    menuItem.addEventListener("mouseout", () => {
+      menuItem.style.backgroundColor = "";
+    });
+    menuItem.addEventListener("click", () => {
+      item.action();
+      hideFolderManagerContextMenu();
+    });
+    menu.appendChild(menuItem);
+  });
+  menu.style.left = x + "px";
+  menu.style.top = y + "px";
+  menu.style.display = "block";
+}
+
+function hideFolderManagerContextMenu() {
+  const menu = document.getElementById("folderManagerContextMenu");
+  if (menu) {
+    menu.style.display = "none";
+  }
+}
+
+function folderManagerContextMenuHandler(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  const target = e.target.closest(".folder-option, .breadcrumb-link");
+  if (!target) return;
+  const folder = target.getAttribute("data-folder");
+  if (!folder) return;
+  window.currentFolder = folder;
+  document.querySelectorAll(".folder-option, .breadcrumb-link").forEach(el => el.classList.remove("selected"));
+  target.classList.add("selected");
+  const menuItems = [
+    {
+      label: "Create Folder",
+      action: () => {
+        document.getElementById("createFolderModal").style.display = "block";
+        document.getElementById("newFolderName").focus();
+      }
+    },
+    {
+      label: "Rename Folder",
+      action: () => { openRenameFolderModal(); }
+    },
+    {
+      label: "Delete Folder",
+      action: () => { openDeleteFolderModal(); }
+    }
+  ];
+  showFolderManagerContextMenu(e.pageX, e.pageY, menuItems);
+}
+
+function bindFolderManagerContextMenu() {
+  const container = document.getElementById("folderTreeContainer");
+  if (container) {
+    container.removeEventListener("contextmenu", folderManagerContextMenuHandler);
+    container.addEventListener("contextmenu", folderManagerContextMenuHandler, false);
+  }
+  const breadcrumbNodes = document.querySelectorAll(".breadcrumb-link");
+  breadcrumbNodes.forEach(node => {
+    node.removeEventListener("contextmenu", folderManagerContextMenuHandler);
+    node.addEventListener("contextmenu", folderManagerContextMenuHandler, false);
+  });
+}
+
+document.addEventListener("click", function () {
+  hideFolderManagerContextMenu();
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+  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) {
+      if (window.currentFolder && window.currentFolder !== "root") {
+        e.preventDefault();
+        openDeleteFolderModal();
+      }
+    }
+  });
+});
+
+bindFolderManagerContextMenu();

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/networkUtils.js

@@ -0,0 +1,31 @@
+export function sendRequest(url, method = "GET", data = null, customHeaders = {}) {
+  const options = {
+    method,
+    credentials: 'include',
+    headers: {}
+  };
+
+  // Merge custom headers
+  Object.assign(options.headers, customHeaders);
+
+  // If data is provided and is not FormData, assume JSON.
+  if (data && !(data instanceof FormData)) {
+    if (!options.headers["Content-Type"]) {
+      options.headers["Content-Type"] = "application/json";
+    }
+    options.body = JSON.stringify(data);
+  } else if (data instanceof FormData) {
+    options.body = data;
+  }
+
+  return fetch(url, options)
+    .then(response => {
+      if (!response.ok) {
+        return response.text().then(text => {
+          throw new Error(`HTTP error ${response.status}: ${text}`);
+        });
+      }
+      const clonedResponse = response.clone();
+      return response.json().catch(() => clonedResponse.text());
+    });
+}

js/trashRestoreDelete.js

@@ -1,23 +1,16 @@
 // 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';
 
-/**
- * Displays a custom confirmation modal with the given message.
- * Calls onConfirm() if the user confirms.
- */
 function showConfirm(message, onConfirm) {
-    // Assume your custom confirm modal exists with id "customConfirmModal"
-    // and has elements "confirmMessage", "confirmYesBtn", and "confirmNoBtn".
     const modal = document.getElementById("customConfirmModal");
     const messageElem = document.getElementById("confirmMessage");
     const yesBtn = document.getElementById("confirmYesBtn");
     const noBtn = document.getElementById("confirmNoBtn");
 
     if (!modal || !messageElem || !yesBtn || !noBtn) {
-        // Fallback to browser confirm if custom modal is not found.
         if (confirm(message)) {
             onConfirm();
         }
@@ -42,12 +35,7 @@ function showConfirm(message, onConfirm) {
     });
 }
 
-/**
- * Sets up event listeners for trash restore and delete operations.
- * This function should be called from main.js after authentication.
- */
 export function setupTrashRestoreDelete() {
-    console.log("Setting up trash restore/delete listeners.");
 
     // --- Attach listener to the restore button (created in auth.js) to open the modal.
     const restoreBtn = document.getElementById("restoreFilesBtn");
@@ -57,7 +45,6 @@ export function setupTrashRestoreDelete() {
             loadTrashItems();
         });
     } else {
-        console.warn("restoreFilesBtn not found. It may not be available for the current user.");
         setTimeout(() => {
             const retryBtn = document.getElementById("restoreFilesBtn");
             if (retryBtn) {

js/upload.js

@@ -0,0 +1,811 @@
+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)
+----------------------------------------------------- */
+// Recursively traverse a dropped folder.
+function traverseFileTreePromise(item, path = "") {
+  return new Promise((resolve) => {
+    if (item.isFile) {
+      item.file(file => {
+        // Store relative path for folder uploads.
+        Object.defineProperty(file, 'customRelativePath', {
+          value: path + file.name,
+          writable: true,
+          configurable: true
+        });
+        resolve([file]);
+      });
+    } else if (item.isDirectory) {
+      const dirReader = item.createReader();
+      dirReader.readEntries(entries => {
+        const promises = [];
+        for (let i = 0; i < entries.length; i++) {
+          promises.push(traverseFileTreePromise(entries[i], path + item.name + "/"));
+        }
+        Promise.all(promises).then(results => resolve(results.flat()));
+      });
+    } else {
+      resolve([]);
+    }
+  });
+}
+
+// Recursively retrieve files from DataTransfer items.
+function getFilesFromDataTransferItems(items) {
+  const promises = [];
+  for (let i = 0; i < items.length; i++) {
+    const entry = items[i].webkitGetAsEntry();
+    if (entry) {
+      promises.push(traverseFileTreePromise(entry));
+    }
+  }
+  return Promise.all(promises).then(results => results.flat());
+}
+
+/* -----------------------------------------------------
+   UI Helpers (Mostly unchanged from your original code)
+----------------------------------------------------- */
+function setDropAreaDefault() {
+  const dropArea = document.getElementById("uploadDropArea");
+  if (dropArea) {
+    dropArea.innerHTML = `
+      <div id="uploadInstruction" class="upload-instruction">
+        Drop files/folders here or click 'Choose files'
+      </div>
+      <div id="uploadFileRow" class="upload-file-row">
+        <button id="customChooseBtn" type="button">Choose files</button>
+      </div>
+      <div id="fileInfoWrapper" class="file-info-wrapper">
+        <div id="fileInfoContainer" class="file-info-container">
+          <span id="fileInfoDefault">No files selected</span>
+        </div>
+      </div>
+      <!-- File input for file picker (files only) -->
+      <input type="file" id="file" name="file[]" class="form-control-file" multiple style="opacity:0; position:absolute; width:1px; height:1px;" />
+    `;
+  }
+}
+
+function adjustFolderHelpExpansion() {
+  const uploadCard = document.getElementById("uploadCard");
+  const folderHelpDetails = document.querySelector(".folder-help-details");
+  if (uploadCard && folderHelpDetails) {
+    if (uploadCard.offsetHeight > 400) {
+      folderHelpDetails.setAttribute("open", "");
+    } else {
+      folderHelpDetails.removeAttribute("open");
+    }
+  }
+}
+
+function adjustFolderHelpExpansionClosed() {
+  const folderHelpDetails = document.querySelector(".folder-help-details");
+  if (folderHelpDetails) {
+    folderHelpDetails.removeAttribute("open");
+  }
+}
+
+function updateFileInfoCount() {
+  const fileInfoContainer = document.getElementById("fileInfoContainer");
+  if (fileInfoContainer && window.selectedFiles) {
+    if (window.selectedFiles.length === 0) {
+      fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
+    } else if (window.selectedFiles.length === 1) {
+      fileInfoContainer.innerHTML = `
+        <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;">
+          <span class="material-icons file-icon">insert_drive_file</span>
+        </div>
+        <span id="fileNameDisplay" class="file-name-display">${escapeHTML(window.selectedFiles[0].name || window.selectedFiles[0].fileName || "Unnamed File")}</span>
+      `;
+    } else {
+      fileInfoContainer.innerHTML = `
+        <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;">
+          <span class="material-icons file-icon">insert_drive_file</span>
+        </div>
+        <span id="fileCountDisplay" class="file-name-display">${window.selectedFiles.length} files selected</span>
+      `;
+    }
+    const previewContainer = document.getElementById("filePreviewContainer");
+    if (previewContainer && window.selectedFiles.length > 0) {
+      previewContainer.innerHTML = "";
+      // For image files, try to show a preview (if available from the file object).
+      displayFilePreview(window.selectedFiles[0].file || window.selectedFiles[0], previewContainer);
+    }
+  }
+}
+
+// Helper function to repeatedly call removeChunks.php
+function removeChunkFolderRepeatedly(identifier, csrfToken, maxAttempts = 3, interval = 1000) {
+  let attempt = 0;
+  const removalInterval = setInterval(() => {
+    attempt++;
+    const params = new URLSearchParams();
+    // Prefix with "resumable_" to match your PHP regex.
+    params.append('folder', 'resumable_' + identifier);
+    params.append('csrf_token', csrfToken);
+    fetch('removeChunks.php', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      body: params.toString()
+    })
+      .then(response => response.json())
+      .then(data => {
+        console.log(`Chunk folder removal attempt ${attempt}:`, data);
+      })
+      .catch(err => {
+        console.error(`Error on removal attempt ${attempt}:`, err);
+      });
+    if (attempt >= maxAttempts) {
+      clearInterval(removalInterval);
+    }
+  }, interval);
+}
+
+/* -----------------------------------------------------
+   File Entry Creation (with Pause/Resume and Restart)
+----------------------------------------------------- */
+// Create a file entry element with a remove button and a pause/resume button.
+function createFileEntry(file) {
+  const li = document.createElement("li");
+  li.classList.add("upload-progress-item");
+  li.style.display = "flex";
+  li.dataset.uploadIndex = file.uploadIndex;
+
+  // Remove button (always added)
+  const removeBtn = document.createElement("button");
+  removeBtn.classList.add("remove-file-btn");
+  removeBtn.textContent = "×";
+// In your remove button event listener, replace the fetch call with:
+removeBtn.addEventListener("click", function (e) {
+  e.stopPropagation();
+  const uploadIndex = file.uploadIndex;
+  window.selectedFiles = window.selectedFiles.filter(f => f.uploadIndex !== uploadIndex);
+  
+  // Cancel the file upload if possible.
+  if (typeof file.cancel === "function") {
+    file.cancel();
+    console.log("Canceled file upload:", file.fileName);
+  }
+  
+  // Remove file from the resumable queue.
+  if (resumableInstance && typeof resumableInstance.removeFile === "function") {
+    resumableInstance.removeFile(file);
+  }
+  
+  // Call our helper repeatedly to remove the chunk folder.
+  if (file.uniqueIdentifier) {
+    removeChunkFolderRepeatedly(file.uniqueIdentifier, window.csrfToken, 3, 1000);
+  }
+  
+  li.remove();
+  updateFileInfoCount();
+});
+  li.removeBtn = removeBtn;
+  li.appendChild(removeBtn);
+
+  // Add pause/resume/restart button if the file supports pause/resume.
+// Conditionally add the pause/resume button only if file.pause is available
+// Pause/Resume button (for resumable file–picker uploads)
+if (typeof file.pause === "function") {
+  const pauseResumeBtn = document.createElement("button");
+  pauseResumeBtn.setAttribute("type", "button"); // not a submit button
+  pauseResumeBtn.classList.add("pause-resume-btn");
+  // Start with pause icon and disable button until upload starts
+  pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
+  pauseResumeBtn.disabled = true; 
+  pauseResumeBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    if (file.isError) {
+      // If the file previously failed, try restarting upload.
+      if (typeof file.retry === "function") {
+        file.retry();
+        file.isError = false;
+        pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
+      }
+    } else if (!file.paused) {
+      // Pause the upload (if possible)
+      if (typeof file.pause === "function") {
+        file.pause();
+        file.paused = true;
+        pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">play_circle_outline</span>';
+      } else {
+      }
+    } else if (file.paused) {
+      // Resume sequence: first call to resume (or upload() fallback)
+      if (typeof file.resume === "function") {
+        file.resume();
+      } else {
+        resumableInstance.upload();
+      }
+      // After a short delay, pause again then resume
+      setTimeout(() => {
+        if (typeof file.pause === "function") {
+          file.pause();
+        } else {
+          resumableInstance.upload();
+        }
+        setTimeout(() => {
+          if (typeof file.resume === "function") {
+            file.resume();
+          } else {
+            resumableInstance.upload();
+          }
+        }, 100);
+      }, 100);
+      file.paused = false;
+      pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
+    } else {
+      console.error("Pause/resume function not available for file", file);
+    }
+  });
+  li.appendChild(pauseResumeBtn);
+}
+
+  // Preview element
+  const preview = document.createElement("div");
+  preview.className = "file-preview";
+  displayFilePreview(file, preview);
+  li.appendChild(preview);
+
+  // File name display
+  const nameDiv = document.createElement("div");
+  nameDiv.classList.add("upload-file-name");
+  nameDiv.textContent = file.name || file.fileName || "Unnamed File";
+  li.appendChild(nameDiv);
+
+  // Progress bar container
+  const progDiv = document.createElement("div");
+  progDiv.classList.add("progress", "upload-progress-div");
+  progDiv.style.flex = "0 0 250px";
+  progDiv.style.marginLeft = "5px";
+  const progBar = document.createElement("div");
+  progBar.classList.add("progress-bar");
+  progBar.style.width = "0%";
+  progBar.innerText = "0%";
+  progDiv.appendChild(progBar);
+  li.appendChild(progDiv);
+
+  li.progressBar = progBar;
+  li.startTime = Date.now();
+  return li;
+}
+
+/* -----------------------------------------------------
+   Processing Files
+   - For drag–and–drop, use original processing (supports folders).
+   - For file picker, if using Resumable, those files use resumable.
+----------------------------------------------------- */
+function processFiles(filesInput) {
+  const fileInfoContainer = document.getElementById("fileInfoContainer");
+  const files = Array.from(filesInput);
+
+  if (fileInfoContainer) {
+    if (files.length > 0) {
+      if (files.length === 1) {
+        fileInfoContainer.innerHTML = `
+          <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;">
+            <span class="material-icons file-icon">insert_drive_file</span>
+          </div>
+          <span id="fileNameDisplay" class="file-name-display">${escapeHTML(files[0].name || files[0].fileName || "Unnamed File")}</span>
+        `;
+      } else {
+        fileInfoContainer.innerHTML = `
+          <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;">
+            <span class="material-icons file-icon">insert_drive_file</span>
+          </div>
+          <span id="fileCountDisplay" class="file-name-display">${files.length} files selected</span>
+        `;
+      }
+      const previewContainer = document.getElementById("filePreviewContainer");
+      if (previewContainer) {
+        previewContainer.innerHTML = "";
+        displayFilePreview(files[0], previewContainer);
+      }
+    } else {
+      fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
+    }
+  }
+
+  files.forEach((file, index) => {
+    file.uploadIndex = index;
+  });
+
+  const progressContainer = document.getElementById("uploadProgressContainer");
+  progressContainer.innerHTML = "";
+
+  if (files.length > 0) {
+    const maxDisplay = 10;
+    const list = document.createElement("ul");
+    list.classList.add("upload-progress-list");
+
+    // Check for relative paths (for folder uploads).
+    const hasRelativePaths = files.some(file => {
+      const rel = file.webkitRelativePath || file.customRelativePath || "";
+      return rel.trim() !== "";
+    });
+
+    if (hasRelativePaths) {
+      // Group files by folder.
+      const fileGroups = {};
+      files.forEach(file => {
+        let folderName = "Root";
+        const relativePath = file.webkitRelativePath || file.customRelativePath || "";
+        if (relativePath.trim() !== "") {
+          const parts = relativePath.split("/");
+          if (parts.length > 1) {
+            folderName = parts.slice(0, parts.length - 1).join("/");
+          }
+        }
+        if (!fileGroups[folderName]) {
+          fileGroups[folderName] = [];
+        }
+        fileGroups[folderName].push(file);
+      });
+
+      Object.keys(fileGroups).forEach(folderName => {
+        // Only show folder grouping if folderName is not "Root"
+        if (folderName !== "Root") {
+          const folderLi = document.createElement("li");
+          folderLi.classList.add("upload-folder-group");
+          folderLi.innerHTML = `<i class="material-icons folder-icon" style="vertical-align:middle; margin-right:8px;">folder</i> ${folderName}:`;
+          list.appendChild(folderLi);
+        }
+        const nestedUl = document.createElement("ul");
+        nestedUl.classList.add("upload-folder-group-list");
+        fileGroups[folderName]
+          .sort((a, b) => a.uploadIndex - b.uploadIndex)
+          .forEach(file => {
+            const li = createFileEntry(file);
+            nestedUl.appendChild(li);
+          });
+        list.appendChild(nestedUl);
+      });
+    } else {
+      // No relative paths – list files directly.
+      files.forEach((file, index) => {
+        const li = createFileEntry(file);
+        li.style.display = (index < maxDisplay) ? "flex" : "none";
+        li.dataset.uploadIndex = index;
+        list.appendChild(li);
+      });
+      if (files.length > maxDisplay) {
+        const extra = document.createElement("li");
+        extra.classList.add("upload-progress-extra");
+        extra.textContent = `Uploading additional ${files.length - maxDisplay} file(s)...`;
+        extra.style.display = "flex";
+        list.appendChild(extra);
+      }
+    }
+    const listWrapper = document.createElement("div");
+    listWrapper.classList.add("upload-progress-wrapper");
+    listWrapper.style.maxHeight = "300px";
+    listWrapper.style.overflowY = "auto";
+    listWrapper.appendChild(list);
+    progressContainer.appendChild(listWrapper);
+  }
+
+  adjustFolderHelpExpansion();
+  window.addEventListener("resize", adjustFolderHelpExpansion);
+
+  window.selectedFiles = files;
+  updateFileInfoCount();
+}
+
+/* -----------------------------------------------------
+   Resumable.js Integration for File Picker Uploads
+   (Only files chosen via file input use Resumable; folder uploads use original code.)
+----------------------------------------------------- */
+const useResumable = true; // Enable resumable for file picker uploads
+let resumableInstance;
+function initResumableUpload() {
+  resumableInstance = new Resumable({
+    target: "upload.php",
+    query: { folder: window.currentFolder || "root", upload_token: window.csrfToken },
+    chunkSize: 1.5 * 1024 * 1024, // 1.5 MB chunks
+    simultaneousUploads: 3,
+    testChunks: false,
+    throttleProgressCallbacks: 1,
+    headers: { "X-CSRF-Token": window.csrfToken }
+  });
+
+  const fileInput = document.getElementById("file");
+  if (fileInput) {
+    // Assign Resumable to file input for file picker uploads.
+    resumableInstance.assignBrowse(fileInput);
+    fileInput.addEventListener("change", function () {
+      for (let i = 0; i < fileInput.files.length; i++) {
+        resumableInstance.addFile(fileInput.files[i]);
+      }
+    });
+  }
+
+  resumableInstance.on("fileAdded", function (file) {
+    // Initialize custom paused flag
+    file.paused = false;
+    file.uploadIndex = file.uniqueIdentifier;
+    if (!window.selectedFiles) {
+      window.selectedFiles = [];
+    }
+    window.selectedFiles.push(file);
+    const progressContainer = document.getElementById("uploadProgressContainer");
+
+    // Check if a wrapper already exists; if not, create one with a UL inside.
+    let listWrapper = progressContainer.querySelector(".upload-progress-wrapper");
+    let list;
+    if (!listWrapper) {
+      listWrapper = document.createElement("div");
+      listWrapper.classList.add("upload-progress-wrapper");
+      listWrapper.style.maxHeight = "300px";
+      listWrapper.style.overflowY = "auto";
+      list = document.createElement("ul");
+      list.classList.add("upload-progress-list");
+      listWrapper.appendChild(list);
+      progressContainer.appendChild(listWrapper);
+    } else {
+      list = listWrapper.querySelector("ul.upload-progress-list");
+    }
+
+    const li = createFileEntry(file);
+    li.dataset.uploadIndex = file.uniqueIdentifier;
+    list.appendChild(li);
+    updateFileInfoCount();
+  });
+
+  resumableInstance.on("fileProgress", function(file) {
+    const progress = file.progress(); // value between 0 and 1
+    const percent = Math.floor(progress * 100);
+    const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
+    if (li && li.progressBar) {
+      if (percent < 99) {
+        li.progressBar.style.width = percent + "%";
+        
+        // Calculate elapsed time and speed.
+        const elapsed = (Date.now() - li.startTime) / 1000;
+        let speed = "";
+        if (elapsed > 0) {
+          const bytesUploaded = progress * file.size;
+          const spd = bytesUploaded / elapsed;
+          if (spd < 1024) {
+            speed = spd.toFixed(0) + " B/s";
+          } else if (spd < 1048576) {
+            speed = (spd / 1024).toFixed(1) + " KB/s";
+          } else {
+            speed = (spd / 1048576).toFixed(1) + " MB/s";
+          }
+        }
+        li.progressBar.innerText = percent + "% (" + speed + ")";
+      } else {
+        // When progress reaches 99% or higher, show only a spinner icon.
+        li.progressBar.style.width = "100%";
+        li.progressBar.innerHTML = '<i class="material-icons spinning" style="vertical-align: middle;">autorenew</i>';
+      }
+      
+      // Enable the pause/resume button once progress starts.
+      const pauseResumeBtn = li.querySelector(".pause-resume-btn");
+      if (pauseResumeBtn) {
+        pauseResumeBtn.disabled = false;
+      }
+    }
+  });
+  
+  resumableInstance.on("fileSuccess", function(file, message) {
+    const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
+    if (li && li.progressBar) {
+      li.progressBar.style.width = "100%";
+      li.progressBar.innerText = "Done";
+      // Hide pause/resume and remove buttons for successful files.
+      const pauseResumeBtn = li.querySelector(".pause-resume-btn");
+      if (pauseResumeBtn) {
+        pauseResumeBtn.style.display = "none";
+      }
+      const removeBtn = li.querySelector(".remove-file-btn");
+      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}"]`);
+    if (li && li.progressBar) {
+      li.progressBar.innerText = "Error";
+    }
+    // Mark file as errored so that the pause/resume button acts as a restart button.
+    file.isError = true;
+    const pauseResumeBtn = li ? li.querySelector(".pause-resume-btn") : null;
+    if (pauseResumeBtn) {
+      pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">replay</span>';
+      pauseResumeBtn.disabled = false;
+    }
+    showToast("Error uploading file: " + file.fileName);
+  });
+
+  resumableInstance.on("complete", function () {
+    // 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 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();
+        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 {
+      showToast("Some files failed to upload. Please check the list.");
+    }
+  });
+}
+
+/* -----------------------------------------------------
+   XHR-based submitFiles for Drag–and–Drop (Folder) Uploads
+----------------------------------------------------- */
+function submitFiles(allFiles) {
+  const folderToUse = window.currentFolder || "root";
+  const progressContainer = document.getElementById("uploadProgressContainer");
+  const fileInput = document.getElementById("file");
+
+  const progressElements = {};
+  const listItems = progressContainer.querySelectorAll("li.upload-progress-item");
+  listItems.forEach(item => {
+    progressElements[item.dataset.uploadIndex] = item;
+  });
+
+  let finishedCount = 0;
+  let allSucceeded = true;
+  const uploadResults = new Array(allFiles.length).fill(false);
+
+  allFiles.forEach(file => {
+    const formData = new FormData();
+    formData.append("file[]", file);
+    formData.append("folder", folderToUse);
+    // Append CSRF token as "upload_token"
+    formData.append("upload_token", window.csrfToken);
+    const relativePath = file.webkitRelativePath || file.customRelativePath || "";
+    if (relativePath.trim() !== "") {
+      formData.append("relativePath", relativePath);
+    }
+    const xhr = new XMLHttpRequest();
+    let currentPercent = 0;
+
+    xhr.upload.addEventListener("progress", function (e) {
+      if (e.lengthComputable) {
+        currentPercent = Math.round((e.loaded / e.total) * 100);
+        const li = progressElements[file.uploadIndex];
+        if (li) {
+          const elapsed = (Date.now() - li.startTime) / 1000;
+          let speed = "";
+          if (elapsed > 0) {
+            const spd = e.loaded / elapsed;
+            if (spd < 1024) speed = spd.toFixed(0) + " B/s";
+            else if (spd < 1048576) speed = (spd / 1024).toFixed(1) + " KB/s";
+            else speed = (spd / 1048576).toFixed(1) + " MB/s";
+          }
+          li.progressBar.style.width = currentPercent + "%";
+          li.progressBar.innerText = currentPercent + "% (" + speed + ")";
+        }
+      }
+    });
+
+    xhr.addEventListener("load", function () {
+      let jsonResponse;
+      try {
+        jsonResponse = JSON.parse(xhr.responseText);
+      } catch (e) {
+        jsonResponse = null;
+      }
+      const li = progressElements[file.uploadIndex];
+      if (xhr.status >= 200 && xhr.status < 300 && (!jsonResponse || !jsonResponse.error)) {
+        if (li) {
+          li.progressBar.style.width = "100%";
+          li.progressBar.innerText = "Done";
+          if (li.removeBtn) li.removeBtn.style.display = "none";
+        }
+        uploadResults[file.uploadIndex] = true;
+      } else {
+        if (li) {
+          li.progressBar.innerText = "Error";
+        }
+        allSucceeded = false;
+      }
+      finishedCount++;
+      if (finishedCount === allFiles.length) {
+        refreshFileList(allFiles, uploadResults, progressElements);
+      }
+    });
+
+    xhr.addEventListener("error", function () {
+      const li = progressElements[file.uploadIndex];
+      if (li) {
+        li.progressBar.innerText = "Error";
+      }
+      uploadResults[file.uploadIndex] = false;
+      allSucceeded = false;
+      finishedCount++;
+      if (finishedCount === allFiles.length) {
+        refreshFileList(allFiles, uploadResults, progressElements);
+      }
+    });
+
+    xhr.addEventListener("abort", function () {
+      const li = progressElements[file.uploadIndex];
+      if (li) {
+        li.progressBar.innerText = "Aborted";
+      }
+      uploadResults[file.uploadIndex] = false;
+      allSucceeded = false;
+      finishedCount++;
+      if (finishedCount === allFiles.length) {
+        refreshFileList(allFiles, uploadResults, progressElements);
+      }
+    });
+
+    xhr.open("POST", "upload.php", true);
+    xhr.setRequestHeader("X-CSRF-Token", window.csrfToken);
+    xhr.send(formData);
+  });
+
+  function refreshFileList(allFiles, uploadResults, progressElements) {
+    loadFileList(folderToUse)
+      .then(serverFiles => {
+        initFileActions();
+        serverFiles = (serverFiles || []).map(item => item.name.trim().toLowerCase());
+        let overallSuccess = true;
+        allFiles.forEach(file => {
+          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 (!overallSuccess) {
+          showToast("Some files failed to upload. Please check the list.");
+        }
+      })
+      .catch(error => {
+        console.error("Error fetching file list:", error);
+        showToast("Some files may have failed to upload. Please check the list.");
+      })
+      .finally(() => {
+        loadFolderTree(window.currentFolder);
+      });
+  }
+}
+
+/* -----------------------------------------------------
+   Main initUpload: Sets up file input, drop area, and form submission.
+----------------------------------------------------- */
+function initUpload() {
+  const fileInput = document.getElementById("file");
+  const dropArea = document.getElementById("uploadDropArea");
+  const uploadForm = document.getElementById("uploadFileForm");
+
+  // For file picker, remove directory attributes so only files can be chosen.
+  if (fileInput) {
+    fileInput.removeAttribute("webkitdirectory");
+    fileInput.removeAttribute("mozdirectory");
+    fileInput.removeAttribute("directory");
+    fileInput.setAttribute("multiple", "");
+  }
+
+  setDropAreaDefault();
+
+  // Drag–and–drop events (for folder uploads) use original processing.
+  if (dropArea) {
+    dropArea.classList.add("upload-drop-area");
+    dropArea.addEventListener("dragover", function (e) {
+      e.preventDefault();
+      dropArea.style.backgroundColor = document.body.classList.contains("dark-mode") ? "#333" : "#f8f8f8";
+    });
+    dropArea.addEventListener("dragleave", function (e) {
+      e.preventDefault();
+      dropArea.style.backgroundColor = "";
+    });
+    dropArea.addEventListener("drop", function (e) {
+      e.preventDefault();
+      dropArea.style.backgroundColor = "";
+      const dt = e.dataTransfer;
+      if (dt.items && dt.items.length > 0) {
+        getFilesFromDataTransferItems(dt.items).then(files => {
+          if (files.length > 0) {
+            processFiles(files);
+          }
+        });
+      } else if (dt.files && dt.files.length > 0) {
+        processFiles(dt.files);
+      }
+    });
+    // Clicking drop area triggers file input.
+    dropArea.addEventListener("click", function () {
+      if (fileInput) fileInput.click();
+    });
+  }
+
+  if (fileInput) {
+    fileInput.addEventListener("change", function () {
+      if (useResumable) {
+        // For file picker, if resumable is enabled, let it handle the files.
+        for (let i = 0; i < fileInput.files.length; i++) {
+          resumableInstance.addFile(fileInput.files[i]);
+        }
+      } else {
+        processFiles(fileInput.files);
+      }
+    });
+  }
+
+  if (uploadForm) {
+    uploadForm.addEventListener("submit", function (e) {
+      e.preventDefault();
+      const files = window.selectedFiles || (fileInput ? fileInput.files : []);
+      if (!files || files.length === 0) {
+        showToast("No files selected.");
+        return;
+      }
+      // If files come from file picker (no relative path), use Resumable.
+      if (useResumable && (!files[0].customRelativePath || files[0].customRelativePath === "")) {
+        // Ensure current folder is updated.
+        resumableInstance.opts.query.folder = window.currentFolder || "root";
+        resumableInstance.upload();
+        showToast("Resumable upload started...");
+      } else {
+        submitFiles(files);
+      }
+    });
+  }
+
+  if (useResumable) {
+    initResumableUpload();
+  }
+}
+
+export { initUpload };

login_basic.php

@@ -0,0 +1,120 @@
+<?php
+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)
+{
+    global $usersFile;
+    if (!file_exists($usersFile)) {
+        error_log("authenticate(): users file not found");
+        return false;
+    }
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        list($storedUser, $storedPass, $storedRole) = explode(':', trim($line), 3);
+        if ($username === $storedUser && password_verify($password, $storedPass)) {
+            return $storedRole; // Return the user's role
+        }
+    }
+    error_log("authenticate(): authentication failed for '$username'");
+    return false;
+}
+
+// Define helper function to get a user's role from users.txt
+function getUserRole($username) {
+    global $usersFile;
+    if (file_exists($usersFile)) {
+        $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+        foreach ($lines as $line) {
+            $parts = explode(":", trim($line));
+            if (count($parts) >= 3 && $parts[0] === $username) {
+                return trim($parts[2]);
+            }
+        }
+    }
+    return null;
+}
+
+// Add the loadFolderPermission function here:
+function loadFolderPermission($username) {
+    global $encryptionKey;
+    $permissionsFile = USERS_DIR . 'userPermissions.json';
+    if (file_exists($permissionsFile)) {
+        $content = file_get_contents($permissionsFile);
+        $decrypted = decryptData($content, $encryptionKey);
+        $permissions = $decrypted !== false ? json_decode($decrypted, true) : json_decode($content, true);
+        if (is_array($permissions)) {
+            foreach ($permissions as $storedUsername => $data) {
+                if (strcasecmp($storedUsername, $username) === 0 && isset($data['folderOnly'])) {
+                    return (bool)$data['folderOnly'];
+                }
+            }
+        }
+    }
+    return false;
+}
+
+// Check if the user has sent HTTP Basic auth credentials.
+if (!isset($_SERVER['PHP_AUTH_USER'])) {
+    header('WWW-Authenticate: Basic realm="FileRise Login"');
+    header('HTTP/1.0 401 Unauthorized');
+    echo 'Authorization Required';
+    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

@@ -1,19 +1,50 @@
 <?php
-session_start();
+require_once 'config.php';
+
+// Retrieve headers and check CSRF token.
 $headers = array_change_key_case(getallheaders(), CASE_LOWER);
 $receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
 
-// Fallback: If a CSRF token exists in the session and doesn't match the one provided,
-// log the mismatch but proceed with logout.
+// Log CSRF mismatch but proceed with logout.
 if (isset($_SESSION['csrf_token']) && $receivedToken !== $_SESSION['csrf_token']) {
-    // Optionally log this event:
     error_log("CSRF token mismatch on logout. Proceeding with logout.");
 }
 
-$_SESSION = []; // Clear session data
-session_destroy(); // Destroy session
+// Remove the remember_me token.
+if (isset($_COOKIE['remember_me_token'])) {
+    $token = $_COOKIE['remember_me_token'];
+    $persistentTokensFile = USERS_DIR . 'persistent_tokens.json';
+    if (file_exists($persistentTokensFile)) {
+        $encryptedContent = file_get_contents($persistentTokensFile);
+        $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+        $persistentTokens = json_decode($decryptedContent, true);
+        if (is_array($persistentTokens) && isset($persistentTokens[$token])) {
+            unset($persistentTokens[$token]);
+            $newEncryptedContent = encryptData(json_encode($persistentTokens, JSON_PRETTY_PRINT), $encryptionKey);
+            file_put_contents($persistentTokensFile, $newEncryptedContent, LOCK_EX);
+        }
+    }
+    // Clear the cookie.
+    // Ensure $secure is defined; for example:
+    $secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
+    setcookie('remember_me_token', '', time() - 3600, '/', '', $secure, true);
+}
 
-header('Content-Type: application/json');
-echo json_encode(["success" => "Logged out"]);
+// 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?logout=1");
 exit;
 ?>

main.js

@@ -1,155 +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';
-
-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();
-
-  // --- 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";
-      loadFileList(window.currentFolder);
-      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/file_metadata.json

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

moveFiles.php

@@ -20,6 +20,15 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
     exit;
 }
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to move files."]);
+        exit();
+    }
+}
 
 $data = json_decode(file_get_contents("php://input"), true);
 if (

networkUtils.js

@@ -1,32 +0,0 @@
-// networkUtils.js
-export function sendRequest(url, method = "GET", data = null) {
-  console.log("Sending request to:", url, "with method:", method);
-  const options = {
-    method,
-    credentials: 'include', // include cookies in requests
-    headers: {}
-  };
-
-  // If data is provided and is not FormData, assume JSON.
-  if (data && !(data instanceof FormData)) {
-    options.headers["Content-Type"] = "application/json";
-    options.body = JSON.stringify(data);
-  } else if (data instanceof FormData) {
-    // For FormData, don't set the Content-Type header; the browser will handle it.
-    options.body = data;
-  }
-
-  return fetch(url, options)
-    .then(response => {
-      console.log("Response status:", response.status);
-      if (!response.ok) {
-        return response.text().then(text => {
-          throw new Error(`HTTP error ${response.status}: ${text}`);
-        });
-      }
-      return response.json().catch(() => {
-        console.warn("Response is not JSON, returning as text");
-        return response.text();
-      });
-    });
-}

removeChunks.php

@@ -0,0 +1,64 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Validate CSRF token from POST
+$receivedToken = isset($_POST['csrf_token']) ? trim($_POST['csrf_token']) : '';
+if ($receivedToken !== $_SESSION['csrf_token']) {
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    http_response_code(403);
+    exit;
+}
+
+// Ensure a folder parameter is provided
+if (!isset($_POST['folder'])) {
+    echo json_encode(["error" => "No folder specified"]);
+    http_response_code(400);
+    exit;
+}
+
+$folder = $_POST['folder'];
+// Validate the folder name (only alphanumerics, dashes allowed)
+if (!preg_match('/^resumable_[A-Za-z0-9\-]+$/', $folder)) {
+    echo json_encode(["error" => "Invalid folder name"]);
+    http_response_code(400);
+    exit;
+}
+
+$tempDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder;
+
+// If the folder doesn't exist, simply return success.
+if (!is_dir($tempDir)) {
+    echo json_encode(["success" => true, "message" => "Temporary folder already removed."]);
+    exit;
+}
+
+// Recursively delete directory using RecursiveDirectoryIterator
+function rrmdir($dir) {
+    if (!is_dir($dir)) {
+        return;
+    }
+    $it = new RecursiveIteratorIterator(
+        new RecursiveDirectoryIterator($dir, FilesystemIterator::SKIP_DOTS),
+        RecursiveIteratorIterator::CHILD_FIRST
+    );
+    foreach ($it as $file) {
+        if ($file->isDir()){
+            rmdir($file->getRealPath());
+        } else {
+            unlink($file->getRealPath());
+        }
+    }
+    rmdir($dir);
+}
+
+rrmdir($tempDir);
+
+// Verify removal
+if (!is_dir($tempDir)) {
+    echo json_encode(["success" => true, "message" => "Temporary folder removed."]);
+} else {
+    echo json_encode(["error" => "Failed to remove temporary folder."]);
+    http_response_code(500);
+}
+?>

removeUser.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 
 $usersFile = USERS_DIR . USERS_FILE;
@@ -72,5 +72,17 @@ if (!$userFound) {
 
 // Write the updated list back to users.txt
 file_put_contents($usersFile, implode(PHP_EOL, $newUsers) . PHP_EOL);
+
+// Also update the userPermissions.json file
+$permissionsFile = USERS_DIR . "userPermissions.json";
+if (file_exists($permissionsFile)) {
+    $permissionsJson = file_get_contents($permissionsFile);
+    $permissionsArray = json_decode($permissionsJson, true);
+    if (is_array($permissionsArray) && isset($permissionsArray[$usernameToRemove])) {
+        unset($permissionsArray[$usernameToRemove]);
+        file_put_contents($permissionsFile, json_encode($permissionsArray, JSON_PRETTY_PRINT));
+    }
+}
+
 echo json_encode(["success" => "User removed successfully"]);
 ?>

renameFile.php

@@ -22,6 +22,16 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     exit;
 }
 
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to rename files."]);
+        exit();
+    }
+}
+
 $data = json_decode(file_get_contents("php://input"), true);
 if (!$data || !isset($data['folder']) || !isset($data['oldName']) || !isset($data['newName'])) {
     echo json_encode(["error" => "Invalid input"]);

renameFolder.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 header("Cache-Control: no-cache, no-store, must-revalidate");
 header("Pragma: no-cache");
@@ -27,6 +27,15 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     http_response_code(403);
     exit;
 }
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to rename folders."]);
+        exit();
+    }
+}
 
 // Get the JSON input and decode it
 $input = json_decode(file_get_contents('php://input'), true);

resources/readme.md

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

saveFile.php

@@ -18,6 +18,15 @@ if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     http_response_code(401);
     exit;
 }
+$username = $_SESSION['username'] ?? '';
+$userPermissions = loadUserPermissions($username);
+if ($username) {
+    $userPermissions = loadUserPermissions($username);
+    if (isset($userPermissions['readOnly']) && $userPermissions['readOnly'] === true) {
+        echo json_encode(["error" => "Read-only users are not allowed to save files."]);
+        exit();
+    }
+}
 
 $data = json_decode(file_get_contents("php://input"), true);
 

saveFileTag.php

@@ -0,0 +1,138 @@
+<?php
+require_once 'config.php';
+header("Cache-Control: no-cache, no-store, must-revalidate");
+header("Pragma: no-cache");
+header("Expires: 0");
+header('Content-Type: application/json');
+
+// Check authentication.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    echo json_encode(["error" => "Unauthorized"]);
+    http_response_code(401);
+    exit;
+}
+
+// CSRF Protection: validate token from header.
+$headers = getallheaders();
+if (!isset($headers['X-CSRF-Token']) || $headers['X-CSRF-Token'] !== $_SESSION['csrf_token']) {
+    echo json_encode(["error" => "Invalid CSRF token."]);
+    http_response_code(403);
+    exit;
+}
+
+// Retrieve and sanitize input.
+$data = json_decode(file_get_contents('php://input'), true);
+$file = isset($data['file']) ? trim($data['file']) : '';
+$folder = isset($data['folder']) ? trim($data['folder']) : 'root';
+$tags = isset($data['tags']) ? $data['tags'] : [];
+
+// Basic validation.
+if ($file === '') {
+    echo json_encode(["error" => "No file specified."]);
+    exit;
+}
+
+$globalTagsFile = META_DIR . "createdTags.json";
+
+// If file is "global", update the global tags only.
+if ($file === "global") {
+    if (!file_exists($globalTagsFile)) {
+        if (file_put_contents($globalTagsFile, json_encode([], JSON_PRETTY_PRINT)) === false) {
+            echo json_encode(["error" => "Failed to create global tags file."]);
+            exit;
+        }
+    }
+    $globalTags = json_decode(file_get_contents($globalTagsFile), true);
+    if (!is_array($globalTags)) {
+        $globalTags = [];
+    }
+    // If deleteGlobal flag is set and tagToDelete is provided, remove it.
+    if (isset($data['deleteGlobal']) && $data['deleteGlobal'] === true && isset($data['tagToDelete'])) {
+        $tagToDelete = strtolower($data['tagToDelete']);
+        $globalTags = array_values(array_filter($globalTags, function($globalTag) use ($tagToDelete) {
+            return strtolower($globalTag['name']) !== $tagToDelete;
+        }));
+    } else {
+        // Otherwise, merge new tags.
+        foreach ($tags as $tag) {
+            $found = false;
+            foreach ($globalTags as &$globalTag) {
+                if (strtolower($globalTag['name']) === strtolower($tag['name'])) {
+                    $globalTag['color'] = $tag['color'];
+                    $found = true;
+                    break;
+                }
+            }
+            if (!$found) {
+                $globalTags[] = $tag;
+            }
+        }
+    }
+    if (file_put_contents($globalTagsFile, json_encode($globalTags, JSON_PRETTY_PRINT)) === false) {
+        echo json_encode(["error" => "Failed to save global tags."]);
+        exit;
+    }
+    echo json_encode(["success" => "Global tags updated successfully.", "globalTags" => $globalTags]);
+    exit;
+}
+
+// Validate folder name.
+if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
+    echo json_encode(["error" => "Invalid folder name."]);
+    exit;
+}
+
+function getMetadataFilePath($folder) {
+    if (strtolower($folder) === 'root' || $folder === '') {
+        return META_DIR . "root_metadata.json";
+    }
+    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
+}
+
+$metadataFile = getMetadataFilePath($folder);
+$metadata = file_exists($metadataFile) ? json_decode(file_get_contents($metadataFile), true) : [];
+
+if (!isset($metadata[$file])) {
+    $metadata[$file] = [];
+}
+$metadata[$file]['tags'] = $tags;
+
+if (file_put_contents($metadataFile, json_encode($metadata, JSON_PRETTY_PRINT)) === false) {
+    echo json_encode(["error" => "Failed to save tag data."]);
+    exit;
+}
+
+// Now update the global tags file as well.
+if (!file_exists($globalTagsFile)) {
+    if (file_put_contents($globalTagsFile, json_encode([], JSON_PRETTY_PRINT)) === false) {
+        echo json_encode(["error" => "Failed to create global tags file."]);
+        exit;
+    }
+}
+
+$globalTags = json_decode(file_get_contents($globalTagsFile), true);
+if (!is_array($globalTags)) {
+    $globalTags = [];
+}
+
+foreach ($tags as $tag) {
+    $found = false;
+    foreach ($globalTags as &$globalTag) {
+        if (strtolower($globalTag['name']) === strtolower($tag['name'])) {
+            $globalTag['color'] = $tag['color'];
+            $found = true;
+            break;
+        }
+    }
+    if (!$found) {
+        $globalTags[] = $tag;
+    }
+}
+
+if (file_put_contents($globalTagsFile, json_encode($globalTags, JSON_PRETTY_PRINT)) === false) {
+    echo json_encode(["error" => "Failed to save global tags."]);
+    exit;
+}
+
+echo json_encode(["success" => "Tag data saved successfully.", "tags" => $tags, "globalTags" => $globalTags]);
+?>

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;
 ?>

token.php

@@ -1,5 +1,5 @@
 <?php
-require 'config.php';
+require_once 'config.php';
 header('Content-Type: application/json');
 echo json_encode([
     "csrf_token" => $_SESSION['csrf_token'],

totp_disable.php

@@ -0,0 +1,74 @@
+<?php
+// disableTOTP.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;
+}
+
+header('Content-Type: application/json');
+
+$username = $_SESSION['username'] ?? '';
+if (empty($username)) {
+    http_response_code(400);
+    echo json_encode(["error" => "Username not found in session"]);
+    exit;
+}
+
+/**
+ * Removes the TOTP secret for the given user in users.txt.
+ *
+ * @param string $username
+ * @return bool True on success, false otherwise.
+ */
+function removeUserTOTPSecret($username) {
+    global $encryptionKey;
+    $usersFile = USERS_DIR . USERS_FILE;
+    if (!file_exists($usersFile)) {
+        return false;
+    }
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    $modified = false;
+    $newLines = [];
+    foreach ($lines as $line) {
+        $parts = explode(':', trim($line));
+        if (count($parts) < 3) {
+            $newLines[] = $line;
+            continue;
+        }
+        if ($parts[0] === $username) {
+            // Remove the TOTP secret by setting it to an empty string.
+            if (count($parts) >= 4) {
+                $parts[3] = "";
+            }
+            $modified = true;
+            $newLines[] = implode(":", $parts);
+        } else {
+            $newLines[] = $line;
+        }
+    }
+    if ($modified) {
+        file_put_contents($usersFile, implode(PHP_EOL, $newLines) . PHP_EOL, LOCK_EX);
+    }
+    return $modified;
+}
+
+if (removeUserTOTPSecret($username)) {
+    echo json_encode(["success" => true, "message" => "TOTP disabled successfully."]);
+} else {
+    http_response_code(500);
+    echo json_encode(["error" => "Failed to disable TOTP."]);
+}
+?>

totp_setup.php

@@ -0,0 +1,148 @@
+<?php
+// totp_setup.php
+
+require_once 'vendor/autoload.php';
+require_once 'config.php';
+
+use Endroid\QrCode\Builder\Builder;
+use Endroid\QrCode\Writer\PngWriter;
+use Endroid\QrCode\ErrorCorrectionLevel\ErrorCorrectionLevelHigh;
+
+// For debugging purposes, you might enable error reporting temporarily:
+// ini_set('display_errors', 1);
+// error_reporting(E_ALL);
+
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    http_response_code(403);
+    exit;
+}
+
+// Verify CSRF token provided as a GET parameter.
+if (!isset($_GET['csrf']) || $_GET['csrf'] !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    exit;
+}
+
+$username = $_SESSION['username'] ?? '';
+if (!$username) {
+    http_response_code(400);
+    exit;
+}
+
+// Set header to output a PNG image.
+header("Content-Type: image/png");
+
+// Define the path to your users.txt file.
+$usersFile = USERS_DIR . USERS_FILE;
+
+/**
+ * Updates the TOTP secret for the given user in users.txt.
+ *
+ * @param string $username
+ * @param string $encryptedSecret The encrypted TOTP secret.
+ */
+function updateUserTOTPSecret($username, $encryptedSecret) {
+    global $usersFile;
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    $newLines = [];
+    foreach ($lines as $line) {
+        $parts = explode(':', trim($line));
+        if (count($parts) < 3) {
+            $newLines[] = $line;
+            continue;
+        }
+        if ($parts[0] === $username) {
+            // If a fourth field exists, update it; otherwise, append it.
+            if (count($parts) >= 4) {
+                $parts[3] = $encryptedSecret;
+            } else {
+                $parts[] = $encryptedSecret;
+            }
+            $newLines[] = implode(':', $parts);
+        } else {
+            $newLines[] = $line;
+        }
+    }
+    file_put_contents($usersFile, implode(PHP_EOL, $newLines) . PHP_EOL, LOCK_EX);
+}
+
+/**
+ * Retrieves the current user's TOTP secret from users.txt (if present).
+ *
+ * @param string $username
+ * @return string|null The decrypted TOTP secret or null if not found.
+ */
+function getUserTOTPSecret($username) {
+    global $usersFile, $encryptionKey;
+    if (!file_exists($usersFile)) {
+        return null;
+    }
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    foreach ($lines as $line) {
+        $parts = explode(':', trim($line));
+        if (count($parts) >= 4 && $parts[0] === $username && !empty($parts[3])) {
+            return decryptData($parts[3], $encryptionKey);
+        }
+    }
+    return null;
+}
+
+/**
+ * Retrieves the global OTPAuth URL from admin configuration.
+ *
+ * @return string Global OTPAuth URL template or an empty string if not set.
+ */
+function getGlobalOtpauthUrl() {
+    global $encryptionKey;
+    $adminConfigFile = USERS_DIR . 'adminConfig.json';
+    if (file_exists($adminConfigFile)) {
+        $encryptedContent = file_get_contents($adminConfigFile);
+        $decryptedContent = decryptData($encryptedContent, $encryptionKey);
+        if ($decryptedContent !== false) {
+            $config = json_decode($decryptedContent, true);
+            if (isset($config['globalOtpauthUrl']) && !empty($config['globalOtpauthUrl'])) {
+                return $config['globalOtpauthUrl'];
+            }
+        }
+    }
+    return "";
+}
+
+$tfa = new \RobThree\Auth\TwoFactorAuth('FileRise');
+
+// Retrieve the current TOTP secret for the user.
+$totpSecret = getUserTOTPSecret($username);
+if (!$totpSecret) {
+    // If no TOTP secret exists, generate a new one.
+    $totpSecret = $tfa->createSecret();
+    $encryptedSecret = encryptData($totpSecret, $encryptionKey);
+    updateUserTOTPSecret($username, $encryptedSecret);
+}
+
+// Determine the otpauth URL to use.
+// If a global OTPAuth URL template is defined, replace placeholders {label} and {secret}.
+// Otherwise, use the default method.
+$globalOtpauthUrl = getGlobalOtpauthUrl();
+if (!empty($globalOtpauthUrl)) {
+    $label = "FileRise:" . $username;
+    $otpauthUrl = str_replace(
+        ["{label}", "{secret}"],
+        [urlencode($label), $totpSecret],
+        $globalOtpauthUrl
+    );
+} else {
+    $label = urlencode("FileRise:" . $username);
+    $issuer = urlencode("FileRise");
+    $otpauthUrl = "otpauth://totp/{$label}?secret={$totpSecret}&issuer={$issuer}";
+}
+
+// Build the QR code using Endroid QR Code.
+$result = Builder::create()
+    ->writer(new PngWriter())
+    ->data($otpauthUrl)
+    ->errorCorrectionLevel(new ErrorCorrectionLevelHigh())
+    ->build();
+
+header('Content-Type: ' . $result->getMimeType());
+echo $result->getString();
+?>

totp_verify.php

@@ -0,0 +1,140 @@
+<?php
+// totp_verify.php
+
+require_once 'vendor/autoload.php';
+require_once 'config.php';
+
+// JSON + CSP
+header('Content-Type: application/json');
+header("Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';");
+
+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;
+    }
+
+    // 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.');
+    }
+
+    /**
+     * 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;
+    }
+
+    // Must be authenticated or pending TOTP
+    if (
+        !(
+            (isset($_SESSION['authenticated']) && $_SESSION['authenticated'] === true)
+            || isset($_SESSION['pending_login_user'])
+        )
+    ) {
+        respond('error', 403, 'Not authenticated');
+    }
+
+    // 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([
+        'status'  => 'error',
+        'code'    => 500,
+        'message' => 'Internal server error'
+    ]);
+    exit;
+}

updateConfig.php

@@ -0,0 +1,100 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Verify that the user is authenticated and is an admin.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true || 
+    !isset($_SESSION['isAdmin']) || !$_SESSION['isAdmin']) {
+    http_response_code(403);
+    echo json_encode(['error' => 'Unauthorized access.']);
+    exit;
+}
+
+// Validate CSRF token.
+$receivedToken = '';
+if (isset($_SERVER['HTTP_X_CSRF_TOKEN'])) {
+    $receivedToken = trim($_SERVER['HTTP_X_CSRF_TOKEN']);
+} else {
+    $headers = array_change_key_case(getallheaders(), CASE_LOWER);
+    $receivedToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+}
+if (!isset($_SESSION['csrf_token']) || $receivedToken !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(['error' => 'Invalid CSRF token.']);
+    exit;
+}
+
+// Retrieve and decode JSON input.
+$input = file_get_contents('php://input');
+$data = json_decode($input, true);
+if (!is_array($data)) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Invalid input.']);
+    exit;
+}
+
+// Validate and sanitize OIDC configuration.
+$oidc = isset($data['oidc']) ? $data['oidc'] : [];
+$oidcProviderUrl = isset($oidc['providerUrl']) ? filter_var($oidc['providerUrl'], FILTER_SANITIZE_URL) : '';
+$oidcClientId    = isset($oidc['clientId']) ? trim($oidc['clientId']) : '';
+$oidcClientSecret = isset($oidc['clientSecret']) ? trim($oidc['clientSecret']) : '';
+$oidcRedirectUri = isset($oidc['redirectUri']) ? filter_var($oidc['redirectUri'], FILTER_SANITIZE_URL) : '';
+
+if (!$oidcProviderUrl || !$oidcClientId || !$oidcClientSecret || !$oidcRedirectUri) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Incomplete OIDC configuration.']);
+    exit;
+}
+
+// Validate login option booleans.
+$disableFormLogin = isset($data['disableFormLogin']) ? filter_var($data['disableFormLogin'], FILTER_VALIDATE_BOOLEAN) : false;
+$disableBasicAuth = isset($data['disableBasicAuth']) ? filter_var($data['disableBasicAuth'], FILTER_VALIDATE_BOOLEAN) : false;
+$disableOIDCLogin = isset($data['disableOIDCLogin']) ? filter_var($data['disableOIDCLogin'], FILTER_VALIDATE_BOOLEAN) : false;
+
+// Retrieve the global OTPAuth URL (new field). If not provided, default to an empty string.
+$globalOtpauthUrl = isset($data['globalOtpauthUrl']) ? trim($data['globalOtpauthUrl']) : "";
+
+// Prepare configuration array.
+$configUpdate = [
+    'oidc' => [
+        'providerUrl'  => $oidcProviderUrl,
+        'clientId'     => $oidcClientId,
+        'clientSecret' => $oidcClientSecret,
+        'redirectUri'  => $oidcRedirectUri,
+    ],
+    'loginOptions' => [
+        'disableFormLogin' => $disableFormLogin,
+        'disableBasicAuth' => $disableBasicAuth,
+        'disableOIDCLogin' => $disableOIDCLogin,
+    ],
+    'globalOtpauthUrl' => $globalOtpauthUrl
+];
+
+// Define the configuration file path.
+$configFile = USERS_DIR . 'adminConfig.json';
+
+// Convert and encrypt configuration.
+$plainTextConfig = json_encode($configUpdate, JSON_PRETTY_PRINT);
+$encryptedContent = encryptData($plainTextConfig, $encryptionKey);
+
+// Attempt to write the new configuration.
+if (file_put_contents($configFile, $encryptedContent, LOCK_EX) === false) {
+    // Log the error.
+    error_log("updateConfig.php: Initial write failed, attempting to delete the old configuration file.");
+    
+    // Delete the old file.
+    if (file_exists($configFile)) {
+        unlink($configFile);
+    }
+    
+    // Try writing again.
+    if (file_put_contents($configFile, $encryptedContent, LOCK_EX) === false) {
+        error_log("updateConfig.php: Failed to write configuration even after deletion.");
+        http_response_code(500);
+        echo json_encode(['error' => 'Failed to update configuration even after cleanup.']);
+        exit;
+    }
+}
+
+echo json_encode(['success' => 'Configuration updated successfully.']);
+?>

updateUserPanel.php

@@ -0,0 +1,80 @@
+<?php
+// updateUserPanel.php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Ensure the user is authenticated.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
+    http_response_code(403);
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+// Verify the CSRF token from headers.
+$headers = array_change_key_case(getallheaders(), CASE_LOWER);
+$csrfToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+if (!isset($_SESSION['csrf_token']) || $csrfToken !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    exit;
+}
+
+$data = json_decode(file_get_contents("php://input"), true);
+if (!is_array($data)) {
+    http_response_code(400);
+    echo json_encode(["error" => "Invalid input"]);
+    exit;
+}
+
+$username = $_SESSION['username'] ?? '';
+if (!$username) {
+    http_response_code(400);
+    echo json_encode(["error" => "No username in session"]);
+    exit;
+}
+
+$totp_enabled = isset($data['totp_enabled']) ? filter_var($data['totp_enabled'], FILTER_VALIDATE_BOOLEAN) : false;
+$usersFile = USERS_DIR . USERS_FILE;
+
+/**
+ * Clears the TOTP secret for a given user by removing or emptying the fourth field.
+ *
+ * @param string $username
+ */
+function disableUserTOTP($username) {
+    global $usersFile;
+    $lines = file($usersFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    $newLines = [];
+    foreach ($lines as $line) {
+        $parts = explode(':', trim($line));
+        // If the line doesn't have at least three parts, leave it alone.
+        if (count($parts) < 3) {
+            $newLines[] = $line;
+            continue;
+        }
+        if ($parts[0] === $username) {
+            // If a fourth field exists, clear it; otherwise, append an empty field.
+            if (count($parts) >= 4) {
+                $parts[3] = "";
+            } else {
+                $parts[] = "";
+            }
+            $newLines[] = implode(':', $parts);
+        } else {
+            $newLines[] = $line;
+        }
+    }
+    file_put_contents($usersFile, implode(PHP_EOL, $newLines) . PHP_EOL, LOCK_EX);
+}
+
+// If TOTP is disabled, clear the user's TOTP secret.
+if (!$totp_enabled) {
+    disableUserTOTP($username);
+    echo json_encode(["success" => "User panel updated: TOTP disabled"]);
+    exit;
+} else {
+    // If TOTP is enabled, do not change the stored secret.
+    echo json_encode(["success" => "User panel updated: TOTP remains enabled"]);
+    exit;
+}
+?>

updateUserPermissions.php

@@ -0,0 +1,71 @@
+<?php
+require_once 'config.php';
+header('Content-Type: application/json');
+
+// Only admins should update user permissions.
+if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true ||
+    !isset($_SESSION['isAdmin']) || $_SESSION['isAdmin'] !== true) {
+    echo json_encode(["error" => "Unauthorized"]);
+    exit;
+}
+
+// Verify the CSRF token from headers.
+$headers = array_change_key_case(getallheaders(), CASE_LOWER);
+$csrfToken = isset($headers['x-csrf-token']) ? trim($headers['x-csrf-token']) : '';
+if (!isset($_SESSION['csrf_token']) || $csrfToken !== $_SESSION['csrf_token']) {
+    http_response_code(403);
+    echo json_encode(["error" => "Invalid CSRF token"]);
+    exit;
+}
+
+// Read the POST input.
+$input = json_decode(file_get_contents("php://input"), true);
+if (!isset($input['permissions']) || !is_array($input['permissions'])) {
+    echo json_encode(["error" => "Invalid input"]);
+    exit;
+}
+
+$permissions = $input['permissions'];
+$permissionsFile = USERS_DIR . "userPermissions.json";
+
+// Load existing permissions if available and decrypt.
+if (file_exists($permissionsFile)) {
+    $encryptedContent = file_get_contents($permissionsFile);
+    $json = decryptData($encryptedContent, $encryptionKey);
+    $existingPermissions = json_decode($json, true);
+    if (!is_array($existingPermissions)) {
+        $existingPermissions = [];
+    }
+} else {
+    $existingPermissions = [];
+}
+
+// Loop through each permission update.
+foreach ($permissions as $perm) {
+    // Ensure username is provided.
+    if (!isset($perm['username'])) continue;
+    $username = $perm['username'];
+    // Skip updating permissions for admin users.
+    if (strtolower($username) === "admin") continue;
+    
+    // Update permissions: default any missing value to false.
+    $existingPermissions[$username] = [
+        'folderOnly'    => isset($perm['folderOnly']) ? (bool)$perm['folderOnly'] : false,
+        'readOnly'      => isset($perm['readOnly']) ? (bool)$perm['readOnly'] : false,
+        'disableUpload' => isset($perm['disableUpload']) ? (bool)$perm['disableUpload'] : false
+    ];
+}
+
+// Convert the permissions array to JSON.
+$plainText = json_encode($existingPermissions, JSON_PRETTY_PRINT);
+// Encrypt the JSON data.
+$encryptedData = encryptData($plainText, $encryptionKey);
+// Save encrypted permissions back to the JSON file.
+$result = file_put_contents($permissionsFile, $encryptedData);
+if ($result === false) {
+    echo json_encode(["error" => "Failed to save user permissions."]);
+    exit;
+}
+
+echo json_encode(["success" => "User permissions updated successfully."]);
+?>

upload.js

@@ -1,485 +0,0 @@
-import { loadFileList, displayFilePreview, initFileActions } from './fileManager.js';
-import { showToast, escapeHTML } from './domUtils.js';
-import { loadFolderTree } from './folderManager.js';
-
-// Helper: Recursively traverse a dropped folder.
-function traverseFileTreePromise(item, path = "") {
-  return new Promise((resolve, reject) => {
-    if (item.isFile) {
-      item.file(file => {
-        Object.defineProperty(file, 'customRelativePath', {
-          value: path + file.name,
-          writable: true,
-          configurable: true
-        });
-        resolve([file]);
-      });
-    } else if (item.isDirectory) {
-      const dirReader = item.createReader();
-      dirReader.readEntries(entries => {
-        const promises = [];
-        for (let i = 0; i < entries.length; i++) {
-          promises.push(traverseFileTreePromise(entries[i], path + item.name + "/"));
-        }
-        Promise.all(promises).then(results => resolve(results.flat()));
-      });
-    } else {
-      resolve([]);
-    }
-  });
-}
-
-// Helper: Given DataTransfer items, recursively retrieve files.
-function getFilesFromDataTransferItems(items) {
-  const promises = [];
-  for (let i = 0; i < items.length; i++) {
-    const entry = items[i].webkitGetAsEntry();
-    if (entry) {
-      promises.push(traverseFileTreePromise(entry));
-    }
-  }
-  return Promise.all(promises).then(results => results.flat());
-}
-
-// Helper: Set default drop area content.
-function setDropAreaDefault() {
-  const dropArea = document.getElementById("uploadDropArea");
-  if (dropArea) {
-    dropArea.innerHTML = `
-          <div id="uploadInstruction" class="upload-instruction">
-            Drop files/folders here or click 'Choose files'
-          </div>
-          <div id="uploadFileRow" class="upload-file-row">
-            <button id="customChooseBtn" type="button">
-              Choose files
-            </button>
-          </div>
-          <div id="fileInfoWrapper" class="file-info-wrapper">
-            <div id="fileInfoContainer" class="file-info-container">
-              <span id="fileInfoDefault">No files selected</span>
-            </div>
-          </div>
-        `;
-  }
-}
-
-function adjustFolderHelpExpansion() {
-  const uploadCard = document.getElementById("uploadCard");
-  const folderHelpDetails = document.querySelector(".folder-help-details");
-  if (uploadCard && folderHelpDetails) {
-    if (uploadCard.offsetHeight > 400) {
-      folderHelpDetails.setAttribute("open", "");
-    } else {
-      folderHelpDetails.removeAttribute("open");
-    }
-  }
-}
-
-function adjustFolderHelpExpansionClosed() {
-  const folderHelpDetails = document.querySelector(".folder-help-details");
-  if (folderHelpDetails) {
-    folderHelpDetails.removeAttribute("open");
-  }
-}
-
-// Helper: Update file info container count/preview.
-function updateFileInfoCount() {
-  const fileInfoContainer = document.getElementById("fileInfoContainer");
-  if (fileInfoContainer && window.selectedFiles) {
-    if (window.selectedFiles.length === 0) {
-      fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
-    } else if (window.selectedFiles.length === 1) {
-      fileInfoContainer.innerHTML = `
-        <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;"></div>
-        <span id="fileNameDisplay" class="file-name-display">${escapeHTML(window.selectedFiles[0].name)}</span>
-      `;
-    } else {
-      fileInfoContainer.innerHTML = `
-        <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;"></div>
-        <span id="fileCountDisplay" class="file-name-display">${window.selectedFiles.length} files selected</span>
-      `;
-    }
-    const previewContainer = document.getElementById("filePreviewContainer");
-    if (previewContainer && window.selectedFiles.length > 0) {
-      previewContainer.innerHTML = "";
-      displayFilePreview(window.selectedFiles[0], previewContainer);
-    }
-  }
-}
-
-// Helper: Create a file entry element with a remove button.
-function createFileEntry(file) {
-  const li = document.createElement("li");
-  li.classList.add("upload-progress-item");
-  li.style.display = "flex";
-  li.dataset.uploadIndex = file.uploadIndex;
-
-  const removeBtn = document.createElement("button");
-  removeBtn.classList.add("remove-file-btn");
-  removeBtn.textContent = "×";
-  removeBtn.addEventListener("click", function (e) {
-    e.stopPropagation();
-    const uploadIndex = file.uploadIndex;
-    window.selectedFiles = window.selectedFiles.filter(f => f.uploadIndex !== uploadIndex);
-    li.remove();
-    updateFileInfoCount();
-  });
-  li.removeBtn = removeBtn;
-
-  const preview = document.createElement("div");
-  preview.className = "file-preview";
-  displayFilePreview(file, preview);
-
-  const nameDiv = document.createElement("div");
-  nameDiv.classList.add("upload-file-name");
-  nameDiv.textContent = file.name;
-
-  const progDiv = document.createElement("div");
-  progDiv.classList.add("progress", "upload-progress-div");
-  progDiv.style.flex = "0 0 250px";
-  progDiv.style.marginLeft = "5px";
-
-  const progBar = document.createElement("div");
-  progBar.classList.add("progress-bar");
-  progBar.style.width = "0%";
-  progBar.innerText = "0%";
-
-  progDiv.appendChild(progBar);
-  li.appendChild(removeBtn);
-  li.appendChild(preview);
-  li.appendChild(nameDiv);
-  li.appendChild(progDiv);
-
-  li.progressBar = progBar;
-  li.startTime = Date.now();
-  return li;
-}
-
-// Process selected files: Build preview/progress list and store files for later submission.
-function processFiles(filesInput) {
-  const fileInfoContainer = document.getElementById("fileInfoContainer");
-  const files = Array.from(filesInput);
-
-  if (fileInfoContainer) {
-    if (files.length > 0) {
-      if (files.length === 1) {
-        fileInfoContainer.innerHTML = `
-          <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;"></div>
-          <span id="fileNameDisplay" class="file-name-display">${escapeHTML(files[0].name)}</span>
-        `;
-      } else {
-        fileInfoContainer.innerHTML = `
-          <div id="filePreviewContainer" class="file-preview-container" style="display:inline-block;"></div>
-          <span id="fileCountDisplay" class="file-name-display">${files.length} files selected</span>
-        `;
-      }
-      const previewContainer = document.getElementById("filePreviewContainer");
-      if (previewContainer) {
-        previewContainer.innerHTML = "";
-        displayFilePreview(files[0], previewContainer);
-      }
-    } else {
-      fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
-    }
-  }
-
-  files.forEach((file, index) => {
-    file.uploadIndex = index;
-  });
-
-  const progressContainer = document.getElementById("uploadProgressContainer");
-  progressContainer.innerHTML = "";
-
-  if (files.length > 0) {
-    const maxDisplay = 10;
-    const list = document.createElement("ul");
-    list.classList.add("upload-progress-list");
-
-    const hasRelativePaths = files.some(file => {
-      const rel = file.webkitRelativePath || file.customRelativePath || "";
-      return rel.trim() !== "";
-    });
-
-    if (hasRelativePaths) {
-      const fileGroups = {};
-      files.forEach(file => {
-        let folderName = "Root";
-        const relativePath = file.webkitRelativePath || file.customRelativePath || "";
-        if (relativePath.trim() !== "") {
-          const parts = relativePath.split("/");
-          if (parts.length > 1) {
-            folderName = parts.slice(0, parts.length - 1).join("/");
-          }
-        }
-        if (!fileGroups[folderName]) {
-          fileGroups[folderName] = [];
-        }
-        fileGroups[folderName].push(file);
-      });
-
-      Object.keys(fileGroups).forEach(folderName => {
-        const folderLi = document.createElement("li");
-        folderLi.classList.add("upload-folder-group");
-        folderLi.innerHTML = `<i class="material-icons folder-icon" style="vertical-align:middle; margin-right:8px;">folder</i> ${folderName}:`;
-        list.appendChild(folderLi);
-
-        const nestedUl = document.createElement("ul");
-        nestedUl.classList.add("upload-folder-group-list");
-        fileGroups[folderName]
-          .sort((a, b) => a.uploadIndex - b.uploadIndex)
-          .forEach(file => {
-            const li = createFileEntry(file);
-            nestedUl.appendChild(li);
-          });
-        list.appendChild(nestedUl);
-      });
-    } else {
-      files.forEach((file, index) => {
-        const li = createFileEntry(file);
-        li.style.display = (index < maxDisplay) ? "flex" : "none";
-        li.dataset.uploadIndex = index;
-        list.appendChild(li);
-      });
-      if (files.length > maxDisplay) {
-        const extra = document.createElement("li");
-        extra.classList.add("upload-progress-extra");
-        extra.textContent = `Uploading additional ${files.length - maxDisplay} file(s)...`;
-        extra.style.display = "flex";
-        list.appendChild(extra);
-      }
-    }
-    const listWrapper = document.createElement("div");
-    listWrapper.classList.add("upload-progress-wrapper");
-    listWrapper.style.maxHeight = "300px";
-    listWrapper.style.overflowY = "auto";
-    listWrapper.appendChild(list);
-    progressContainer.appendChild(listWrapper);
-  }
-
-  adjustFolderHelpExpansion();
-  window.addEventListener("resize", adjustFolderHelpExpansion);
-
-  window.selectedFiles = files;
-  updateFileInfoCount();
-}
-
-// Function to handle file uploads; triggered when the user clicks the "Upload" button.
-function submitFiles(allFiles) {
-  const folderToUse = window.currentFolder || "root";
-  const progressContainer = document.getElementById("uploadProgressContainer");
-  const fileInput = document.getElementById("file");
-
-  const progressElements = {};
-  const listItems = progressContainer.querySelectorAll("li.upload-progress-item");
-  listItems.forEach(item => {
-    progressElements[item.dataset.uploadIndex] = item;
-  });
-
-  let finishedCount = 0;
-  let allSucceeded = true;
-  const uploadResults = new Array(allFiles.length).fill(false);
-
-  allFiles.forEach(file => {
-    const formData = new FormData();
-    formData.append("file[]", file);
-    formData.append("folder", folderToUse);
-    // Append CSRF token as "upload_token"
-    formData.append("upload_token", window.csrfToken);
-    const relativePath = file.webkitRelativePath || file.customRelativePath || "";
-    if (relativePath.trim() !== "") {
-      formData.append("relativePath", relativePath);
-    }
-    const xhr = new XMLHttpRequest();
-    let currentPercent = 0;
-
-    xhr.upload.addEventListener("progress", function (e) {
-      if (e.lengthComputable) {
-        currentPercent = Math.round((e.loaded / e.total) * 100);
-        const li = progressElements[file.uploadIndex];
-        if (li) {
-          const elapsed = (Date.now() - li.startTime) / 1000;
-          let speed = "";
-          if (elapsed > 0) {
-            const spd = e.loaded / elapsed;
-            if (spd < 1024) speed = spd.toFixed(0) + " B/s";
-            else if (spd < 1048576) speed = (spd / 1024).toFixed(1) + " KB/s";
-            else speed = (spd / 1048576).toFixed(1) + " MB/s";
-          }
-          li.progressBar.style.width = currentPercent + "%";
-          li.progressBar.innerText = currentPercent + "% (" + speed + ")";
-        }
-      }
-    });
-
-    xhr.addEventListener("load", function () {
-      let jsonResponse;
-      try {
-        jsonResponse = JSON.parse(xhr.responseText);
-      } catch (e) {
-        jsonResponse = null;
-      }
-      const li = progressElements[file.uploadIndex];
-      if (xhr.status >= 200 && xhr.status < 300 && (!jsonResponse || !jsonResponse.error)) {
-        if (li) {
-          li.progressBar.style.width = "100%";
-          li.progressBar.innerText = "Done";
-          if (li.removeBtn) {
-            li.removeBtn.style.display = "none";
-          }
-        }
-        uploadResults[file.uploadIndex] = true;
-      } else {
-        if (li) {
-          li.progressBar.innerText = "Error";
-        }
-        allSucceeded = false;
-      }
-      finishedCount++;
-      if (finishedCount === allFiles.length) {
-        refreshFileList(allFiles, uploadResults, progressElements);
-      }
-    });
-
-    xhr.addEventListener("error", function () {
-      const li = progressElements[file.uploadIndex];
-      if (li) {
-        li.progressBar.innerText = "Error";
-      }
-      uploadResults[file.uploadIndex] = false;
-      allSucceeded = false;
-      finishedCount++;
-      if (finishedCount === allFiles.length) {
-        refreshFileList(allFiles, uploadResults, progressElements);
-      }
-    });
-
-    xhr.addEventListener("abort", function () {
-      const li = progressElements[file.uploadIndex];
-      if (li) {
-        li.progressBar.innerText = "Aborted";
-      }
-      uploadResults[file.uploadIndex] = false;
-      allSucceeded = false;
-      finishedCount++;
-      if (finishedCount === allFiles.length) {
-        refreshFileList(allFiles, uploadResults, progressElements);
-      }
-    });
-
-    xhr.open("POST", "upload.php", true);
-    // Set the CSRF token header to match the folderManager approach.
-    xhr.setRequestHeader("X-CSRF-Token", window.csrfToken);
-    xhr.send(formData);
-  });
-
-  function refreshFileList(allFiles, uploadResults, progressElements) {
-    loadFileList(folderToUse)
-      .then(serverFiles => {
-        initFileActions();
-        serverFiles = (serverFiles || []).map(item => item.name.trim().toLowerCase());
-        allFiles.forEach(file => {
-          if ((file.webkitRelativePath || file.customRelativePath || "").trim() !== "") {
-            return;
-          }
-          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;
-          }
-        });
-        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);
-        if (!allSucceeded) {
-          showToast("Some files failed to upload. Please check the list.");
-        }
-      })
-      .catch(error => {
-        console.error("Error fetching file list:", error);
-        showToast("Some files may have failed to upload. Please check the list.");
-      })
-      .finally(() => {
-        loadFolderTree(window.currentFolder);
-      });
-  }
-}
-
-// Main initUpload: sets up file input, drop area, and form submission.
-function initUpload() {
-  const fileInput = document.getElementById("file");
-  const dropArea = document.getElementById("uploadDropArea");
-  const uploadForm = document.getElementById("uploadFileForm");
-
-  if (fileInput) {
-    fileInput.removeAttribute("webkitdirectory");
-    fileInput.removeAttribute("mozdirectory");
-    fileInput.removeAttribute("directory");
-    fileInput.setAttribute("multiple", "");
-  }
-
-  setDropAreaDefault();
-
-  if (dropArea) {
-    dropArea.classList.add("upload-drop-area");
-    dropArea.addEventListener("dragover", function (e) {
-      e.preventDefault();
-      dropArea.style.backgroundColor = document.body.classList.contains("dark-mode") ? "#333" : "#f8f8f8";
-    });
-    dropArea.addEventListener("dragleave", function (e) {
-      e.preventDefault();
-      dropArea.style.backgroundColor = "";
-    });
-    dropArea.addEventListener("drop", function (e) {
-      e.preventDefault();
-      dropArea.style.backgroundColor = "";
-      const dt = e.dataTransfer;
-      if (dt.items && dt.items.length > 0) {
-        getFilesFromDataTransferItems(dt.items).then(files => {
-          if (files.length > 0) {
-            processFiles(files);
-          }
-        });
-      } else if (dt.files && dt.files.length > 0) {
-        processFiles(dt.files);
-      }
-    });
-    dropArea.addEventListener("click", function () {
-      if (fileInput) fileInput.click();
-    });
-  }
-
-  if (fileInput) {
-    fileInput.addEventListener("change", function () {
-      processFiles(fileInput.files);
-    });
-  }
-
-  if (uploadForm) {
-    uploadForm.addEventListener("submit", function (e) {
-      e.preventDefault();
-      const files = window.selectedFiles || (fileInput ? fileInput.files : []);
-      if (!files || files.length === 0) {
-        showToast("No files selected.");
-        return;
-      }
-      submitFiles(files);
-    });
-  }
-}
-
-export { initUpload };

upload.php

@@ -12,122 +12,268 @@ if ($receivedToken !== $_SESSION['csrf_token']) {
     exit;
 }
 
-// Ensure user is authenticated
+// Ensure user is authenticated.
 if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
     echo json_encode(["error" => "Unauthorized"]);
     http_response_code(401);
     exit;
 }
 
-// Validate folder name input.
-$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"]);
+$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;
+    }
+}
+
+/*
+ * Handle test chunk requests.
+ * When testChunks is enabled in Resumable.js, the client sends GET requests with a "resumableTest" parameter.
+ */
+if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['resumableTest'])) {
+    $chunkNumber = intval($_GET['resumableChunkNumber']);
+    $resumableIdentifier = $_GET['resumableIdentifier'];
+    $folder = isset($_GET['folder']) ? trim($_GET['folder']) : 'root';
+    // Determine the base upload directory.
+    $baseUploadDir = UPLOAD_DIR;
+    if ($folder !== 'root') {
+        $baseUploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
+    }
+    $tempDir = $baseUploadDir . 'resumable_' . $resumableIdentifier . DIRECTORY_SEPARATOR;
+    $chunkFile = $tempDir . $chunkNumber;
+    if (file_exists($chunkFile)) {
+        http_response_code(200);
+    } else {
+        http_response_code(404);
+    }
     exit;
 }
 
-// Determine the base upload directory.
-$baseUploadDir = UPLOAD_DIR;
-if ($folder !== 'root') {
-    $baseUploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
-    if (!is_dir($baseUploadDir)) {
-        mkdir($baseUploadDir, 0775, true);
-    }
-} else {
-    if (!is_dir($baseUploadDir)) {
-        mkdir($baseUploadDir, 0775, true);
-    }
+// ---------------------
+// Chunked upload handling (POST requests)
+// ---------------------
+if (isset($_POST['resumableChunkNumber'])) {
+    // ------------- Chunked Upload Handling -------------
+    $chunkNumber         = intval($_POST['resumableChunkNumber']); // current chunk (1-indexed)
+    $totalChunks         = intval($_POST['resumableTotalChunks']);
+    $chunkSize           = intval($_POST['resumableChunkSize']);
+    $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;
 }
-
-// Prepare a collection to hold metadata for each folder.
-$metadataCollection = []; // key: folder path, value: metadata array
-$metadataChanged = [];    // key: folder path, value: boolean
-
-$safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
-
-foreach ($_FILES["file"]["name"] as $index => $fileName) {
-    $safeFileName = basename($fileName);
-    if (!preg_match($safeFileNamePattern, $safeFileName)) {
-        echo json_encode(["error" => "Invalid file name: " . $fileName]);
+    
+    $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"]);
         exit;
     }
-    
-    // --- Minimal Folder/Subfolder Logic ---
-    $relativePath = '';
-    if (isset($_POST['relativePath'])) {
-        if (is_array($_POST['relativePath'])) {
-            $relativePath = $_POST['relativePath'][$index] ?? '';
-        } else {
-            $relativePath = $_POST['relativePath'];
-        }
-    }
-    
-    // Determine the complete folder path for upload and for metadata.
-    $folderPath = $folder; // Base folder as provided ("root" or a subfolder)
-    $uploadDir = $baseUploadDir; // Start with the base upload directory
-    if (!empty($relativePath)) {
-        $subDir = dirname($relativePath);
-        if ($subDir !== '.' && $subDir !== '') {
-            // If base folder is 'root', then folderPath is just the subDir
-            // Otherwise, append the subdirectory to the base folder
-            $folderPath = ($folder === 'root') ? $subDir : $folder . "/" . $subDir;
-            // Update the upload directory accordingly.
-            $uploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR 
-                        . str_replace('/', DIRECTORY_SEPARATOR, $folderPath) . DIRECTORY_SEPARATOR;
-        }
-        // Ensure the file name is taken from the relative path.
-        $safeFileName = basename($relativePath);
-    }
-    // --- End Minimal Folder/Subfolder Logic ---
-
-    // Make sure the final upload directory exists.
-    if (!is_dir($uploadDir)) {
-        mkdir($uploadDir, 0775, true);
-    }
-    
-    $targetPath = $uploadDir . $safeFileName;
-    
-    if (move_uploaded_file($_FILES["file"]["tmp_name"][$index], $targetPath)) {
-        // Generate a unique metadata file name based on the folder path.
-        // Replace slashes, backslashes, and spaces with dashes.
-        $metadataKey = ($folderPath === '' || $folderPath === 'root') ? "root" : $folderPath;
-        $metadataFileName = str_replace(['/', '\\', ' '], '-', $metadataKey) . '_metadata.json';
-        $metadataFile = META_DIR . $metadataFileName;
-        
-        // Load metadata for this folder if not already loaded.
-        if (!isset($metadataCollection[$metadataKey])) {
-            if (file_exists($metadataFile)) {
-                $metadataCollection[$metadataKey] = json_decode(file_get_contents($metadataFile), true);
-            } else {
-                $metadataCollection[$metadataKey] = [];
-            }
-            $metadataChanged[$metadataKey] = false;
-        }
-        
-        // Add metadata for this file if not already present.
-        if (!isset($metadataCollection[$metadataKey][$safeFileName])) {
-            $uploadedDate = date(DATE_TIME_FORMAT);
-            $uploader = $_SESSION['username'] ?? "Unknown";
-            $metadataCollection[$metadataKey][$safeFileName] = [
-                "uploaded" => $uploadedDate,
-                "uploader" => $uploader
-            ];
-            $metadataChanged[$metadataKey] = true;
+    // Determine the base upload directory.
+    $baseUploadDir = UPLOAD_DIR;
+    if ($folder !== 'root') {
+        $baseUploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
+        if (!is_dir($baseUploadDir)) {
+            mkdir($baseUploadDir, 0775, true);
         }
     } else {
-        echo json_encode(["error" => "Error uploading file"]);
+        if (!is_dir($baseUploadDir)) {
+            mkdir($baseUploadDir, 0775, true);
+        }
+    }
+    
+    // Use a temporary directory for the chunks.
+    $tempDir = $baseUploadDir . 'resumable_' . $resumableIdentifier . DIRECTORY_SEPARATOR;
+    if (!is_dir($tempDir)) {
+        mkdir($tempDir, 0775, true);
+    }
+    
+    // Save the current chunk.
+    $chunkFile = $tempDir . $chunkNumber; // store chunk using its number as filename
+    if (!move_uploaded_file($_FILES["file"]["tmp_name"], $chunkFile)) {
+        echo json_encode(["error" => "Failed to move uploaded chunk"]);
         exit;
     }
-}
-
-// After processing all files, write out metadata files for folders that changed.
-foreach ($metadataCollection as $folderKey => $data) {
-    if ($metadataChanged[$folderKey]) {
-        $metadataFileName = str_replace(['/', '\\', ' '], '-', $folderKey) . '_metadata.json';
-        $metadataFile = META_DIR . $metadataFileName;
-        file_put_contents($metadataFile, json_encode($data, JSON_PRETTY_PRINT));
+    
+    // Check if all chunks have been uploaded.
+    $uploadedChunks = glob($tempDir . "*");
+    if (count($uploadedChunks) < $totalChunks) {
+        // More chunks remain – respond and let the client continue.
+        echo json_encode(["status" => "chunk uploaded"]);
+        exit;
     }
+    
+    // All chunks are present. Merge chunks.
+    $targetPath = $baseUploadDir . $resumableFilename;
+    if (!$out = fopen($targetPath, "wb")) {
+        echo json_encode(["error" => "Failed to open target file for writing"]);
+        exit;
+    }
+    // Concatenate each chunk in order.
+    for ($i = 1; $i <= $totalChunks; $i++) {
+        $chunkPath = $tempDir . $i;
+        if (!$in = fopen($chunkPath, "rb")) {
+            fclose($out);
+            echo json_encode(["error" => "Failed to open chunk $i"]);
+            exit;
+        }
+        while ($buff = fread($in, 4096)) {
+            fwrite($out, $buff);
+        }
+        fclose($in);
+    }
+    fclose($out);
+    
+    // --- Metadata Update for Chunked Upload ---
+    // For chunked uploads, assume no relativePath; so folderPath is simply $folder.
+    $folderPath = $folder;
+    $metadataKey = ($folderPath === '' || $folderPath === 'root') ? "root" : $folderPath;
+    // Generate a metadata file name based on the folder path.
+    $metadataFileName = str_replace(['/', '\\', ' '], '-', $metadataKey) . '_metadata.json';
+    $metadataFile = META_DIR . $metadataFileName;
+    
+    $uploadedDate = date(DATE_TIME_FORMAT);
+    $uploader = $_SESSION['username'] ?? "Unknown";
+    
+    // Load existing metadata, if any.
+    if (file_exists($metadataFile)) {
+        $metadataCollection = json_decode(file_get_contents($metadataFile), true);
+        if (!is_array($metadataCollection)) {
+            $metadataCollection = [];
+        }
+    } else {
+        $metadataCollection = [];
+    }
+    
+    // Add metadata for this file if not already present.
+    if (!isset($metadataCollection[$resumableFilename])) {
+        $metadataCollection[$resumableFilename] = [
+            "uploaded" => $uploadedDate,
+            "uploader" => $uploader
+        ];
+        file_put_contents($metadataFile, json_encode($metadataCollection, JSON_PRETTY_PRINT));
+    }
+    // --- End Metadata Update ---
+    
+    // Cleanup: remove the temporary directory and its chunks.
+    array_map('unlink', glob("$tempDir*"));
+    rmdir($tempDir);
+    
+    echo json_encode(["success" => "File uploaded successfully"]);
+    exit;
+    
+} else {
+    // ------------- Full Upload (Non-chunked) -------------
+    // Validate folder name input.
+    $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"]);
+        exit;
+    }
+    
+    // Determine the base upload directory.
+    $baseUploadDir = UPLOAD_DIR;
+    if ($folder !== 'root') {
+        $baseUploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
+        if (!is_dir($baseUploadDir)) {
+            mkdir($baseUploadDir, 0775, true);
+        }
+    } else {
+        if (!is_dir($baseUploadDir)) {
+            mkdir($baseUploadDir, 0775, true);
+        }
+    }
+    
+    // Prepare a collection to hold metadata for each folder.
+    $metadataCollection = []; // key: folder path, value: metadata array
+    $metadataChanged = [];    // key: folder path, value: boolean
+    
+    $safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
+    
+    foreach ($_FILES["file"]["name"] as $index => $fileName) {
+        $safeFileName = basename($fileName);
+        if (!preg_match($safeFileNamePattern, $safeFileName)) {
+            echo json_encode(["error" => "Invalid file name: " . $fileName]);
+            exit;
+        }
+        
+        // --- Minimal Folder/Subfolder Logic ---
+        $relativePath = '';
+        if (isset($_POST['relativePath'])) {
+            if (is_array($_POST['relativePath'])) {
+                $relativePath = $_POST['relativePath'][$index] ?? '';
+            } else {
+                $relativePath = $_POST['relativePath'];
+            }
+        }
+        
+        // Determine the complete folder path for upload and for metadata.
+        $folderPath = $folder; // Base folder as provided ("root" or a subfolder)
+        $uploadDir = $baseUploadDir; // Start with the base upload directory
+        if (!empty($relativePath)) {
+            $subDir = dirname($relativePath);
+            if ($subDir !== '.' && $subDir !== '') {
+                $folderPath = ($folder === 'root') ? $subDir : $folder . "/" . $subDir;
+                $uploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR 
+                            . str_replace('/', DIRECTORY_SEPARATOR, $folderPath) . DIRECTORY_SEPARATOR;
+            }
+            $safeFileName = basename($relativePath);
+        }
+        // --- End Minimal Folder/Subfolder Logic ---
+        
+        // Make sure the final upload directory exists.
+        if (!is_dir($uploadDir)) {
+            mkdir($uploadDir, 0775, true);
+        }
+        
+        $targetPath = $uploadDir . $safeFileName;
+        
+        if (move_uploaded_file($_FILES["file"]["tmp_name"][$index], $targetPath)) {
+            // Generate a unique metadata file name based on the folder path.
+            $metadataKey = ($folderPath === '' || $folderPath === 'root') ? "root" : $folderPath;
+            $metadataFileName = str_replace(['/', '\\', ' '], '-', $metadataKey) . '_metadata.json';
+            $metadataFile = META_DIR . $metadataFileName;
+            
+            if (!isset($metadataCollection[$metadataKey])) {
+                if (file_exists($metadataFile)) {
+                    $metadataCollection[$metadataKey] = json_decode(file_get_contents($metadataFile), true);
+                } else {
+                    $metadataCollection[$metadataKey] = [];
+                }
+                $metadataChanged[$metadataKey] = false;
+            }
+            
+            if (!isset($metadataCollection[$metadataKey][$safeFileName])) {
+                $uploadedDate = date(DATE_TIME_FORMAT);
+                $uploader = $_SESSION['username'] ?? "Unknown";
+                $metadataCollection[$metadataKey][$safeFileName] = [
+                    "uploaded" => $uploadedDate,
+                    "uploader" => $uploader
+                ];
+                $metadataChanged[$metadataKey] = true;
+            }
+        } else {
+            echo json_encode(["error" => "Error uploading file"]);
+            exit;
+        }
+    }
+    
+    // After processing all files, write out metadata files for folders that changed.
+    foreach ($metadataCollection as $folderKey => $data) {
+        if ($metadataChanged[$folderKey]) {
+            $metadataFileName = str_replace(['/', '\\', ' '], '-', $folderKey) . '_metadata.json';
+            $metadataFile = META_DIR . $metadataFileName;
+            file_put_contents($metadataFile, json_encode($data, JSON_PRETTY_PRINT));
+        }
+    }
+    
+    echo json_encode(["success" => "Files uploaded successfully"]);
 }
-
-echo json_encode(["success" => "Files uploaded successfully"]);
 ?>

uploads/.htaccess

@@ -1 +1,7 @@
-Options -Indexes
+<IfModule mod_php7.c>
+   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>