Fix folder share gallery view link

Readme fixes

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,10 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

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

CHANGELOG.md

@@ -0,0 +1,921 @@
+# Changelog
+
+## Changes 4/16 Refactor API endpoints and modularize controllers and models
+
+- Reorganized project structure to separate API logic into dedicated controllers and models:
+  - Created adminController, userController, fileController, folderController, uploadController, and authController.
+  - Created corresponding models (AdminModel, UserModel, FileModel, FolderModel, UploadModel, AuthModel) for business logic.
+
+- Consolidated API endpoints under the /public/api folder with subfolders for admin, auth, file, folder, and upload endpoints.
+
+- Added inline OpenAPI annotations to document key endpoints (e.g., getConfig.php, updateConfig.php) for improved API documentation.
+
+- Updated configuration retrieval and update logic in AdminModel and AdminController to handle OIDC and login option booleans consistently, fixing issues with basic auth settings not updating on the login page.
+
+- Updated the client-side auth.js to correctly reference API endpoints (adjusted query selectors to reflect new document root) and load admin configuration from the updated API endpoints.
+
+- Minor improvements to CSRF token handling, error logging, and overall code readability.
+
+This refactor improves maintainability, testability, and documentation clarity across all API endpoints.
+
+### Refactor fixes and adjustments
+
+- Added fallback checks for disableFormLogin / disableBasicAuth / disableOIDCLogin when coming in either at the top level or under loginOptions.
+- Updated auth.js to read and store the nested loginOptions booleans correctly in localStorage, then show/hide the Basic‑Auth and OIDC buttons as configured.
+- Changed the logout controller to header("Location: /index.html?logout=1") so after /api/auth/logout.php it lands on the root index.html, not under /api/auth/.
+- Switched your share modal code to use a leading slash ("/api/file/share.php") so it generates absolute URLs instead of relative /share.php.
+- In the shared‑folder gallery, adjusted the client‑side image path to point at /uploads/... instead of /api/folder/uploads/...
+- Updated both AdminModel defaults and the AuthController to use the exact full path
+- Network Utilities Overhaul swapped out the old fetch wrapper for one that always reads the raw response, tries to JSON.parse it, and then either returns the parsed object on ok or throws it on error.
+- Adjusted your submitLogin .catch() to grab the thrown object (or string) and pass that through to showToast, so now “Invalid credentials” actually shows up.
+- Pulled the common session‑setup and “remember me” logic into two new helpers, finalizeLogin() (for AJAX/form/basic/TOTP) and finishBrowserLogin() (for OIDC redirects). That removed tons of duplication and ensures every path calls the same permission‑loading code.
+- Ensured that after you POST just a totp_code, we pick up pending_login_user/pending_login_secret, verify it, then immediately call finalizeLogin().
+- Expanded checkAuth.php Response now returns all three flags—folderOnly, readOnly, and disableUpload so client can handle every permission.
+- In auth.js’s updateAuthenticatedUI(), write all three flags into localStorage whenever you land on the app (OIDC, basic or form). That guarantees consistent behavior across page loads.
+- Made sure the OIDC handler reads the live config via AdminModel::getConfig() and pushes you through the TOTP flow if needed, then back to /index.html.
+- Dockerfile, custom-php.ini & start.sh moved into main repo for easier onboarding.
+- filerise-docker changed to dedicated CI/CD pipeline
+
+---
+
+## Changes 4/15/2025
+
+- Adjust Gallery View max columns based on screen size
+- Adjust headerTitle to update globally
+
+## Changes 4/14/2025
+
+- Fix Gallery View: medium screen devices get 3 max columns and small screen devices 2 max columns.
+- Ensure gallery view toggle button displays after refresh page.
+- Force resumable chunk size & fix chunk cleanup
+
+### filePreview.js Enhancements
+
+**Modal Layout Overhaul:**
+
+- **Left Panel:** Holds zoom in/out controls at the top and the "prev" button at the bottom.
+- **Center Panel:** Always centers the preview image.
+- **Right Panel:** Contains rotate left/right controls at the top and the "next" button at the bottom.
+
+**Consistent Control Presence:**
+
+- Both left and right panels are always included. When there’s only one image, placeholders are inserted in place of missing navigation buttons to ensure the image remains centered and that rotate controls are always visible.
+
+**Improved Transform Behavior:**
+
+- Transformation values (scale and rotation) are reset on each navigation event, ensuring predictable behavior and consistent presentation.
+
+---
+
+## Changes 4/13/2025 v1.1.3
+
+- Decreased header height some more and clickable logo.
+- authModals.js fully updated with i18n.js keys.
+- main.js added Dark & Light mode i18n.js keys.
+- New Admin section Header Settings to change Header Title.
+- Admin Panel confirm unsaved changes.
+- Added translations and data attributes for almost all user-facing text
+- Extend i18n support: Add new translation keys for Download and Share modals
+
+- **Slider Integration:**
+  - Added a slider UI (range input, label, and value display) directly above the gallery grid.
+  - The slider allows users to adjust the number of columns in the gallery from 1 to 6.
+- **Dynamic Grid Updates:**
+  - The gallery grid’s CSS is updated in real time via the slider’s value by setting the grid-template-columns property.
+  - As the slider value changes, the layout instantly reflects the new column count.
+- **Dynamic Image Resizing:**
+  - Introduced a helper function (getMaxImageHeight) that calculates the maximum image height based on the current column count.
+  - The max height of each image is updated immediately when the slider is adjusted to create a more dynamic display.
+- **Image Caching:**
+  - Implemented an image caching mechanism using a global window.imageCache object.
+  - Images are cached on load (via an onload event) to prevent unnecessary reloading, improving performance.
+- **Event Handling:**
+  - The slider’s event listener is set up to update both the gallery grid layout and the dimensions of the thumbnails dynamically.
+  - Share button event listeners remain attached for proper functionality across the updated gallery view.
+
+- **Input Validation & Security:**
+  - Used `filter_input()` to sanitize and validate incoming GET parameters (token, pass, page).
+  - Validated file system paths using `realpath()` and ensured the shared folder lies within `UPLOAD_DIR`.
+  - Escaped all dynamic outputs with `htmlspecialchars()` to prevent XSS.
+- **Share Link Verification:**
+  - Loaded and validated share records from the JSON file.
+  - Handled expiration and password protection (with proper HTTP status codes for errors).
+- **Pagination:**
+  - Implemented pagination by slicing the full file list into a limited number of files per page (default of 10).
+  - Calculated total pages and current page to create navigation links.
+- **View Toggle (List vs. Gallery):**
+  - Added a toggle button that switches between a traditional list view and a gallery view.
+  - Maintained two separate view containers (`#listViewContainer` and `#galleryViewContainer`) to support this switching.
+- **Gallery View with Image Caching:**
+  - For the gallery view, implemented a JavaScript function that creates a grid of image thumbnails.
+  - Each image uses a cache-busting query string on first load and caches its URL in a global `window.imageCache` for subsequent renders.
+- **Persistent Pagination Controls:**
+  - Moved the pagination controls outside the individual view containers so that they remain visible regardless of the selected view.
+
+---
+
+## Changes 4/12/2025
+
+- Moved Gallery view toggle button into header.
+- Removed css entries that are not needed anymore for Gallery View Toggle.
+- Change search box text when enabling advanced search.
+- Advanced/Basic search button as material icon on same row as search bar.
+
+### Advanced Search Implementation
+
+- **Advanced Search Toggle:**
+  - Added a global toggle (`window.advancedSearchEnabled`) and a UI button to switch between basic and advanced search modes.
+  - The toggle button label changes between "Advanced Search" and "Basic Search" to reflect the active mode.
+
+- **Fuse.js Integration Updates:**
+  - Modified the `searchFiles()` function to conditionally include the `"content"` key in the Fuse.js keys only when advanced search mode is enabled.
+  - Adjusted Fuse.js options by adding `ignoreLocation: true`, adjusting the `threshold`, and optionally assigning weights (e.g., a lower weight for `name` and a higher weight for `content`) to prioritize matches in file content.
+
+- **Backend (PHP) Enhancements:**
+  - Updated **getFileList.php** to read the content of text-based files (e.g., `.txt`, `.html`, `.md`, etc.) using `file_get_contents()`.
+  - Added a `"content"` property to the JSON response for eligible files to allow for full-text search in advanced mode.
+
+### Fuse.js Integration for Indexed Real-Time Searching**
+
+- **Added Fuse.js Library:** Included Fuse.js via a CDN `<script>` tag to leverage its client‑side fuzzy search capabilities.
+- **Created searchFiles Helper Function:** Introduced a new function that uses Fuse.js to build an index and perform fuzzy searches over file properties (file name, uploader, and nested tag names).
+- **Transformed JSON Object to Array:** Updated the loadFileList() function to convert the returned file data into an array (if it isn’t already) and assign file names from JSON keys.
+- **Updated Rendering Functions:** Modified both renderFileTable() and renderGalleryView() to use the searchFiles() helper instead of a simple in‑array .filter(). This ensures that every search—real‑time by user input—is powered by Fuse.js’s indexed search.
+- **Enhanced Search Configuration:** Configured Fuse.js to search across multiple keys (file name, uploader, and tags) so that users can find files based on any of these properties.
+
+---
+
+## Changes 4/11/2025
+
+- Fixed fileDragDrop issue from previous update.
+- Fixed User Panel height changing unexpectedly on mouse over.
+- Improved JS file comments for better documentation.
+- Fixed userPermissions not updating after initial setting.
+- Disabled folder and file sharing for readOnly users.
+- Moved change password close button to the top right of the modal.
+- Updated upload regex pattern to be Unicode‑enabled and added additional security measures. [(#19)](https://github.com/error311/FileRise/issues/19)
+- Updated filename, folder, and username regex acceptance patterns.
+- Updated robthree/twofactorauth to v3 and endroid/qr-code to v5
+- Updated TOTP integration (namespace, enum, QR provider) accordingly
+- Updated docker image from 22.04 to 24.04 <https://github.com/error311/filerise-docker>
+- Ensure consistent session behavior
+- Fix totp_setup.php to use header-based CSRF token verification
+
+---
+
+## Shift Key Multi‑Selection Changes 4/10/2025 v1.1.1
+
+- **Implemented Range Selection:**
+  - Modified the `toggleRowSelection` function so that when the Shift key is held down, all rows between the last clicked (anchor) row (stored as `window.lastSelectedFileRow`) and the currently clicked row are selected.
+- **Modifier Handling:**
+  - Regular clicks (or Ctrl/Cmd clicks) simply toggle the clicked row without clearing other selections.
+- **Prevented Default Browser Behavior:**
+  - Added `event.preventDefault()` in the Shift‑click branch to avoid unwanted text selection.
+- **Maintaining the Anchor:**
+  - The last clicked row is stored for future range selections.
+
+## Total Files and File Size Summary
+
+- **Size Calculation:**
+  - Created `parseSizeToBytes(sizeStr)` to convert file size strings (e.g. `"456.9KB"`, `"1.2 MB"`) into a numerical byte value.
+  - Created `formatSize(totalBytes)` to format a byte value into a human‑readable string (choosing between Bytes, KB, MB, or GB).
+  - Created `buildFolderSummary(filteredFiles)` to:
+    - Sum the sizes of all files (using `parseSizeToBytes`).
+    - Count the total number of files.
+- **Dynamic Display in `loadFileList`:**
+  - Updated `loadFileList` to update a summary element (with `id="fileSummary"`) inside the `#fileListActions` container when files are present.
+  - When no files are found, the summary element is hidden (setting its `display` to `"none"` or clearing the container).
+- **Responsive Styling:**
+  - Added CSS media queries to the `#fileSummary` element so that on small screens it is centered and any extra side margins are removed. Dark and light mode supported.
+
+- **Other changes**
+
+  - `shareFolder.php` updated to display format size.
+  - Fix to prevent the filename text from overflowing its container in the gallery view.
+  - Reduced header height.
+  - Create Folder changed to Material Icon `create_new_folder`
+
+---
+
+## Folder Sharing Feature - Changelog 4/9/2025 v1.1.0
+
+### New Endpoints
+
+- **createFolderShareLink.php:**  
+  - Generates secure, expiring share tokens for folders (with an optional password and allow-upload flag).  
+  - Stores folder share records separately from file shares in `share_folder_links.json`.  
+  - Builds share links that point to **shareFolder.php**, using a proper BASE_URL or the server’s IP when a default placeholder is detected.
+
+- **shareFolder.php:**  
+  - Serves shared folders via GET requests by reading tokens from `share_folder_links.json`.
+  - Validates token expiration and password (if set).
+  - Displays folder contents with pagination (10 items per page) and shows file sizes in megabytes.
+  - Provides navigation links (Prev, Next, and numbered pages) for folder listings.
+  - Includes an upload form (if allowed) that redirects back to the same share page after upload.
+  
+- **downloadSharedFile.php:**  
+  - A dedicated, secure download endpoint for shared files.
+  - Validates the share token and ensures the requested file is inside the shared folder.
+  - Serves files using proper MIME types and Content-Disposition headers (inline for images, attachment for others).
+
+- **uploadToSharedFolder.php:**  
+  - Handles file uploads for public folder shares.
+  - Enforces file size limits and file type whitelists.
+  - Generates unique filenames (with a unique prefix) to prevent collisions.
+  - Updates metadata for the uploaded file (upload date and sets uploader as "Outside Share").
+  - Redirects back to **shareFolder.php** after a successful upload so the file listing refreshes.
+
+### New Front-End Module
+
+- **folderShareModal.js:**  
+  - Provides a modal interface for users to generate folder share links.
+  - Includes expiration selection, optional password entry, and an allow-upload checkbox.
+  - Uses the **createFolderShareLink.php** endpoint to generate share links.
+  - Displays the generated share link with a “copy to clipboard” button.
+
+---
+
+## Changes 4/8/2025
+
+**May have missed some stuff or could have bugs. Please report any issue you may encounter.**
+
+- **i18n Integration:**
+  - Implemented a semi-complete internationalization (i18n) system for all user-facing texts in FileRise.
+  - Created an `i18n.js` module containing a translations object with full keys for English (en), Spanish (es), and French (fr).
+  - Updated JavaScript code to replace hard-coded strings with the `t()` translation function.
+  - Enhanced HTML and modal templates to support dynamic language translations using data attributes (data-i18n-key, data-i18n-placeholder, etc.).
+
+- **Language Dropdown & Persistence:**
+  - Added a language dropdown to the user panel modal allowing users to select their preferred language.
+  - Persisted the selected language in localStorage, ensuring that the preferred language is automatically applied on page refresh.
+  - Updated main.js to load and set the user’s language preference on DOMContentLoaded by calling `setLocale()` and `applyTranslations()`.
+
+- **Bug Fixes & Improvements:**
+  - Fixed issues with evaluation of translation function calls in template literals (ensured proper syntax with `${t("key")}`).
+  - Updated the t() function to be more defensive against missing keys.
+  - Provided instructions and code examples to ensure the language change settings are reliably saved and applied across sessions.
+
+- **ZIP Download Flow**
+  - Progress Modal: In the ZIP download handler (confirmDownloadZip), added code to show a progress modal (with a spinning icon) as soon as the user confirms the download and before the request to create the ZIP begins. Once the blob is received or an error occurs, we hide the progress modal.
+  - Inline Handlers and Global Exposure: Ensured that functions like confirmDownloadZip are attached to the global window object (or called via appropriate inline handlers) so that the inline onclick events in the HTML work without reference errors.
+
+- **Single File Download Flow**
+  - Modal Popup for Single File: Replaced the direct download link for single files with a modal-driven flow. When the download button is clicked, the openDownloadModal(fileName, folder) function is called. This stores the file details and shows a modal where the user can confirm (or edit) the file name.
+  - Confirm Download Function: When the user clicks the Download button in the modal, the confirmSingleDownload() function is called. This function constructs a URL for download.php (using GET parameters for folder and file), fetches the file as a blob, and triggers a download using a temporary anchor element. A progress modal is also used here to give feedback during the download process.
+
+- **Zip Extraction**
+  - Reused Zip Download modal to use same progress Modal Popup with Extracting files.... text.
+
+---
+
+## Changes 4/7/2025 v1.0.9
+
+- TOTP one time recovery code added
+- fix(security): mitigate CodeQL alerts by adding SRI attributes and sanitizing DOM content
+
+---
+
+## Changes 4/6/2025 v1.0.8
+
+**May need to log out and log back in if using remember me**  
+
+Changelog: Modularize fileManager.js
+
+1. **fileListView.js**  
+ • Extracted all table/gallery rendering logic (loadFileList, renderFileTable, renderGalleryView, sortFiles, date parsing, pagination).  
+ • Kept global helpers on window (changePage, changeItemsPerPage).  
+ • Added explicit re‑binding of context‑menu and drag‑drop handlers after each render.  
+2. **filePreview.js**  
+ • Moved “Preview” and “Share” modal code here (previewFile, openShareModal, plus displayFilePreview helper).  
+ • Exposed window.previewFile for inline onclick compatibility.  
+3. **fileEditor.js**  
+ • Isolated CodeMirror editor logic (editFile, saveFile, sizing, theme toggles).  
+ • Exported utility functions (getModeForFile, adjustEditorSize, observeModalResize).  
+4. **fileDragDrop.js**  
+ • Encapsulated all drag‑start and folder drag/drop handlers (fileDragStartHandler, folderDragOverHandler, etc.).  
+5. **fileMenu.js** (formerly contextMenu.js)  
+ • Centralized right‑click context menu construction and binding (showFileContextMenu, fileListContextMenuHandler, bindFileListContextMenu).  
+ • Now calls the correct single vs. multi‑tag modals.  
+6. **fileActions.js**  
+ • Consolidated all “Delete”, “Copy”, “Move”, “Download Zip”, “Extract Zip”, “Rename” workflows and their modals.  
+ • Exposed initFileActions() to wire up toolbar buttons on page load.  
+7. **fileManager.js** (entry point)  
+ • Imports all the above modules.  
+ • On DOM ready: calls initFileActions(), attaches folder tree drag/drop, and global key handlers.
+
+Changelog: OIDC, Basic Auth & TOTP Integration
+
+1. **auth.php (OIDC)**  
+ • Detects callback via `?code` or `?oidc=callback`.  
+ • Checks for a TOTP secret after OIDC auth, stores pending login in session, redirects with `?totp_required=1`.  
+ • Finalizes session only after successful TOTP verification.  
+
+2. **login_basic.php (Basic Auth)**  
+ • After password verification, checks for TOTP secret.  
+ • Stores pending login & secret in session, redirects to TOTP modal.  
+ • Completes session setup only after TOTP verification.  
+
+3. **authModals.js & auth.js**  
+ • Detect `?totp_required=1` and open the TOTP modal.  
+ • Override `showToast` to suppress “Please log in…” during TOTP.  
+ • Wrap `openTOTPLoginModal` to disable Basic/OIDC buttons (but keep form-login visible).  
+ • On invalid TOTP code, keep modal open, clear input, and refocus for retry.  
+
+4. **totp_verify.php**  
+ • Consolidates login and setup TOTP flows in one endpoint.  
+ • Enforces CSRF token and authentication guard.  
+ • Verifies TOTP, regenerates session on success, and clears pending state.  
+ • Production‑hardened: secure cookies, CSP header, rate‑limiting (5 attempts), standardized JSON responses, and robust error handling.
+
+---
+
+## changes 4/4/2025
+
+- fix(`download.php`): mitigate path traversal vulnerability by validating folder and file inputs
+- Fixed OIDC login button DOM.
+- Fixed userPermissions calling username before declared.
+- Fixed config.php loadUserPermissions issue.
+- Chain Initialization After CSRF Token Is Loaded
+- loadCsrfTokenWithRetry
+
+---
+
+## changes 4/3/2025
+
+Change Log for dragAndDrop.js Enhancements
+
+- **Header Drop Zone Integration:**
+  - Added a new header drop zone (`#headerDropArea`) to support dragging cards (Upload and Folder Management) into the header.
+  - Created functionality to display a compact Material icon in the header when a card is dropped there.
+
+- **Modal Popup for Header Cards:**
+  - Implemented a modal overlay that displays the full card when the user hovers or clicks the header icon.
+  - Added toggle functionality so that the modal can be locked open or auto-hide based on mouse interactions.
+
+- **State Preservation via Hidden Container:**
+  - Introduced a hidden container (`#hiddenCardsContainer`) to preserve the original state of the Upload and Folder Management cards.
+  - Modified logic so that instead of removing these cards from the DOM when dropped into the header, they are moved to the hidden container.
+  - Updated modal show/hide functions to move the card from the hidden container into the modal (and back), ensuring interactive elements (e.g., folder tree, file selection) remain fully initialized and retain their state across page refreshes.
+
+- **Local Storage Integration for Header Order:**
+  - Added `saveHeaderOrder()` and `loadHeaderOrder()` functions to persist the header drop zone order.
+  - Integrated header order saving/updating with drag-and-drop events so that header placements are maintained after refresh.
+
+- **General Drag & Drop Enhancements:**
+  - Maintained smooth drag-and-drop animations and reflow for all drop zones (sidebar, top, and header).
+  - Ensured existing functionalities (like file uploads and folder tree interactions) work seamlessly alongside the new header drop zone.
+  
+## Brief Description
+
+The enhancements extend the existing drag-and-drop functionality by adding a header drop zone where cards are represented by a compact Material icon. To preserve interactive state (such as the folder tree’s current folder or file input functionality) across page refreshes, the original cards are never fully removed from the DOM. Instead, they are moved into a hidden container, and when a user interacts with the header icon, the card is temporarily transferred into a modal overlay for full interaction. When the modal is closed, the card is returned to the hidden container, ensuring that its state remains intact. Additionally, header order is saved to local storage so that user-customized layouts persist across sessions.
+
+---
+
+## changes 4/2/2025
+
+- **Admin Panel - User Permissions**
+  - folderOnly - User gets their own root folder.
+  - readOnly - User can't delete, rename, move, copy and other endpoints are blocked.
+  - disableUpload - User can't upload any files.
+  - Encrypted json 'userPermissions.json'
+  - Created 'updateUserPermissions.php' & 'getUserPermissions.php'
+
+- **TOTP Confirmation**
+  - Must confirm code before it will enable TOTP.
+  - 'totp_verify.php' & 'totp_disable.php' were created
+
+- **Basic Auth & OIDC fixes**
+  - Fixed session issues
+  - Improvements for both Basic Auth & OIDC
+
+- Path Normalization
+- Folder Rendering Adjustments
+- Folder Creation Logic adjusted
+- User Panel added username
+- Admin Panel added version number
+- Metadata Adjustments
+- Toast moved to bottom right
+- Help function 'loadUserPermissions()'
+- 'auth.js' split into 'authModals.js'
+- Empty 'createdTags.json' added
+- Enable MKV video playback if supported
+- Custom toast opacity increased
+- Fixed fileDragStartHandler to work with tagFiles
+- And more
+
+---
+
+## changes 3/31/2025
+
+- **Chunk merging logic updated to attempt to clear any resumable issues**
+
+- **Implemented Video Progress Saving and Resuming**
+
+- **Context Menu Tagging:**  
+  - "Tag File" option for single files; "Tag Selected" for multiple files.
+- **Tagging Modals:**  
+  - Separate modals for single‑ and multi‑file tagging with custom dropdowns.
+- **Global Tag Store:**  
+  - Reusable tags persisted via `createdTags.json`; dropdown shows tag color and remove icon.
+- **Unified Search:**  
+  - Single search box filters files by name or associated tag(s).
+
+- **saveFileTag.php:**  
+  - Saves file-specific tags and updates global tags (supports removal).
+- **getFileList.php:**  
+  - Returns tag data for each file and the global tag list.
+
+- Added `openMultiTagModal()` for batch tagging.
+- Custom dropdowns with colored tag previews and removal buttons.
+- Filtering logic updated in table and gallery views to combine file name and tag searches.
+
+## changes 3/30/2025
+
+- **New Feature:** Generates a QR code for TOTP setup using the Endroid QR Code library.
+- **TOTP Secret Management:**  
+  - Retrieves the current user's TOTP secret from the users file.
+  - If no secret exists, generates a new one using RobThree\Auth\TwoFactorAuth and stores it (encrypted).
+- **Global OTPAuth URL Integration:**  
+  - Checks for a global OTPAuth URL in the admin configuration.
+  - If provided, replaces the `{label}` and `{secret}` placeholders in the URL template; otherwise, falls back to a default otpauth URL.
+- **Security:**  
+  - Enforces session authentication.
+  - Verifies the CSRF token passed via GET parameters.
+
+- **New Feature:** Handles AJAX requests to update the user’s TOTP settings from the User Panel.
+- **TOTP Enable/Disable Handling:**  
+  - If TOTP is disabled, clears the user's TOTP secret from the users file.
+  - If TOTP remains enabled, leaves the stored secret intact.
+- **Security:**  
+  - Validates user authentication and CSRF token before processing the update.
+- **Response:**  
+  - Returns a JSON response indicating whether TOTP has been enabled or disabled successfully.
+
+- **New TOTP Settings Section:**  
+  - A "TOTP Settings" fieldset has been added to the User Panel modal.
+- **Automatic TOTP Setup Trigger:**  
+  - When the "Enable TOTP" checkbox is checked, it automatically triggers the TOTP Setup Modal to display the QR code.
+- **State Management**  
+- **UI Improvements:**  
+  - All modals (User Panel, TOTP Setup, and TOTP Login) now support dark mode styling.
+
+- **Error Handling & Security:**  
+  - Enhanced error handling across all new TOTP-related endpoints.
+  - Added extra CSRF and authentication checks to improve security.
+- **User Experience:**  
+  - Streamlined the onboarding process for TOTP by integrating automatic modal triggers and real-time configuration updates.
+
+---
+
+## changes 3/29/2025
+
+**Frontend (JavaScript)**  
+
+**File:** `auth.js`
+
+- **Added OIDC Login Flow**
+  - Created a dedicated OIDC login button (`oidcLoginBtn`).
+  - Redirects users to OIDC authentication via `auth.php?oidc`.
+
+- **Admin Panel Button**
+  - Added an “Admin Panel” button (`adminPanelBtn`) with a Material icon (`admin_panel_settings`).
+  - Inserted Admin Panel button directly after the Restore button in the header.
+
+- **Admin Panel Modal**
+  - Built a fully-featured admin panel modal with fields to edit:
+    - OIDC Provider URL
+    - Client ID
+    - Client Secret
+    - Redirect URI
+  - Options to disable Form Login, Basic Auth, or OIDC login methods individually.
+  - Integrated real-time constraint enforcement to ensure at least one authentication method is always enabled.
+  - Saved admin preferences into local storage and backend (via `updateConfig.php`).
+
+- **Dynamic UI Updates**
+  - Added functions (`updateLoginOptionsUI`, `updateLoginOptionsUIFromStorage`) to dynamically show/hide login elements based on admin preferences.
+
+⸻
+
+**Backend (PHP)**  
+
+**File:** `auth.php`
+
+- **OIDC Authentication**
+  - Integrated Jumbojett’s OpenID Connect client to handle OIDC flows.
+  - Reads OIDC configuration from an encrypted JSON file (`adminConfig.json`).
+  - Redirects users to OIDC provider and handles callbacks properly, authenticating users and initiating PHP sessions.
+
+- **Security Enhancements**
+  - Implemented robust error handling for authentication failures.
+  - Session regeneration after successful login to mitigate session fixation risks.
+
+**Configuration Handling**  
+
+**File:** `getConfig.php`
+
+- **Secure Configuration Retrieval**
+  - Retrieves encrypted OIDC configuration from disk.
+  - Decrypts and sends JSON configuration securely to the frontend.
+  - Defaults provided if configuration does not exist.
+
+**File:** `updateConfig.php`
+
+- **Secure Configuration Updates**
+  - Strictly checks for authenticated admin sessions and validates CSRF tokens.
+  - Validates and sanitizes user input thoroughly (OIDC URL, client ID, secret, redirect URI).
+  - Updates encrypted configuration file securely, ensuring atomic writes (`LOCK_EX`).
+
+- **Consistent Styling**
+  - Modal dynamically adjusts styling based on dark/light modes.
+  - Improved accessibility with clear icons, visual hierarchy, and structured form fields.
+
+- **Enhanced Feedback**
+  - Toast notifications clearly communicate success/error messages for user/admin actions.
+
+⸻
+
+**Security and Best Practices**  
+
+- OIDC credentials are securely stored in an encrypted JSON configuration file.
+- Implemented proper sanitization and validation of input data.
+- Protected sensitive admin routes (`updateConfig.php`) with CSRF validation and strict access control.
+
+⸻
+
+**Possible Improvements**  
+
+- **OIDC Logout Support:** Add explicit logout from OIDC providers.
+- **OIDC Discovery Endpoint:** Automatically fetch provider details from `.well-known/openid-configuration`.
+- **Advanced User Mapping:** Allow administrators to map OIDC claims to internal user roles dynamically.
+
+---
+
+## changes 3/27/2025
+
+- Basic Auth added for login.
+- Audio files supported for playback mp3|wav|m4a|ogg|flac|aac|wma|opus
+
+---
+
+## changes 3/26/2025
+
+- New name change FileRise - Elevate your file management.
+- Animated logo that rises up once for 3 seconds and falls back down
+- New Side Bar and Top Bar drop areas
+  - Drag and Drop Upload & Folder Management cards
+  - Vertical slide up effect when dropping cards
+- Fixed double root folders when only root folder exist
+- Adjusted side bar drop zone
+
+---
+
+## changes 3/25/2025
+
+- **Context Menu Enhancements:**
+  - **Right‑Click Context Menu:**
+    - Added context menu support for file list rows so that right‑clicking shows a custom menu.
+    - When multiple files are selected, options like “Delete Selected”, “Copy Selected”, “Move Selected”, “Download Zip” are shown.
+    - When a file with a “.zip” extension is among the selections, an “Extract Zip” option is added.
+  - **Single File Options:**
+    - For a single selected file, additional items (“Preview”, “Edit”, and “Rename”) are appended.
+    - The “Edit” option appears only if `canEditFile(file.name)` returns true.
+- **Keyboard Shortcuts:**
+  - **Delete Key Shortcut:**
+    - Added a global keydown listener to detect the Delete (or Backspace on Mac) key.
+    - When pressed (and if no input/textarea is focused) with files selected, it triggers `handleDeleteSelected()` to open the delete confirmation modal.
+- **Modals & Enter-Key Handling:**
+  - **attachEnterKeyListener Update:**
+    - Modified the function to use the “keydown” event (instead of “keypress”) for better reliability.
+    - Ensured the modal is made focusable (by setting a `tabindex="-1"`) and focused immediately after being displayed.
+    - This update was applied to modals for rename, download zip, and delete operations.
+  - **Delete Modal Specific:**
+    - It was necessary to call `attachEnterKeyListener` for the delete modal after setting its display to “block” to ensure it captures the Enter key.
+- **File Editing Adjustments:**
+  - **Content-Length Check:**
+    - Modified the `editFile` function so that it only blocks files when the Content-Length header is non‑null and greater than 10 MB.
+    - This change allows editing of 0 KB files (or files with Content-Length “0”) without triggering the “File too large” error.
+
+- **Context Menu for Folder Manager:**
+  - Provided a separate implementation for a custom context menu for folder manager elements.
+  - Bound the context menu to both folder tree nodes (`.folder-option`) and breadcrumb links (`.breadcrumb-link`) so that right‑clicking on either triggers a custom menu.
+  - The custom menu for folders includes actions for “Create Folder”, “Rename Folder”, and “Delete Folder.”
+  - Added guidance to ensure that breadcrumb HTML elements contain the appropriate class and `data-folder` attribute.
+- **Keyboard Shortcut for Folder Deletion (Suggestion):**
+  - Suggested adding a global keydown listener in `folderManager.js` to trigger folder deletion (via `openDeleteFolderModal()`) when Delete/Backspace is pressed and a folder other than “root” is selected.
+
+- **Event Listener Timing:**
+  - Ensured that context menu and key event listeners are attached after the corresponding DOM elements are rendered.
+  - Added explicit focus calls (and `tabindex` attributes) for modals to capture keyboard events.
+
+---
+
+## changes 3/24/2025
+
+### config.php
+
+- **Encryption Functions Added:**
+  - Introduced `encryptData()` and `decryptData()` functions using AES‑256‑CBC to encrypt and decrypt persistent tokens.
+- **Encryption Key Handling:**
+  - Added code to load the encryption key from an environment variable (`PERSISTENT_TOKENS_KEY`) with a fallback default.
+- **Persistent Token Auto-Login:**
+  - Modified the auto-login logic to check for a `remember_me_token` cookie.
+  - If the persistent tokens file exists, it now reads and decrypts its content before decoding JSON.
+  - If a token is expired, the code removes the token, re-encrypts the updated array, writes it back to disk, and clears the cookie.
+- **Cookie and Session Settings:**
+  - No major changes aside from integrating the encryption functionality into the token handling.
+
+### auth.php
+
+- **Login Process and “Remember Me” Functionality:**
+  - When “Remember me” is checked, generates a secure random token.
+  - Loads the persistent tokens file (if it exists), decrypts its content, and decodes the JSON.
+  - Inserts the new token (with associated username and expiry) into the persistent tokens array.
+  - Encrypts the updated tokens array and writes it back to the file.
+  - Sets the `remember_me_token` cookie using the `$secure` flag and expiry.
+- **Authentication & Brute Force Protection:**
+  - The authentication logic and brute-force protection remain largely unchanged.
+
+### logout.php
+
+- **Persistent Token Removal:**
+  - If a `remember_me_token` cookie exists, the script loads the persistent tokens file, decrypts its content, removes the token if present, re-encrypts the array, and writes it back.
+- **Cookie Clearance and Session Destruction:**
+  - Clears the `remember_me_token` cookie.
+  - Destroys session data as before.
+
+### networkUtils.js
+
+- **Fetch Wrapper Enhancements:**
+  - Modified `sendRequest()` to clone the response before attempting to parse JSON.
+  - If JSON parsing fails (e.g., because of unexpected response content), the cloned response is used to read the text, preventing the “Body is disturbed or locked” error.
+- **Error Handling Improvements:**
+  - Improved error handling by ensuring the response body is read only once.
+
+---
+
+## changes 3/23/2025 v1.0.1
+
+- **Resumable File Upload Integration and Folder Support**
+  - **Legacy Drag-and-Drop Folder Uploads:**
+    - Supports both file and folder uploads via drag-and-drop.
+    - Recursively traverses dropped folders to extract files.
+    - Uses original XHR-based upload code for folder uploads so that files are placed in the correct folder (i.e. based on the current folder in the app’s folder tree).
+  - **Resumable.js for File Picker Uploads:**
+    - Integrates Resumable.js for file uploads via the file picker.
+    - Provides pause, resume, and retry functionality:
+    - Pause/Resume: A pause/resume button is added for each file selected via the file picker. When the user clicks pause, the file upload pauses and the button switches to a “play” icon. When the user clicks it again, the system triggers a resume sequence (calling the upload function twice to ensure proper restart).
+    - Retry: If a file upload encounters an error, the pause/resume button changes to a “replay” icon, allowing the user to retry the upload.
+    - During upload, the UI displays the progress percentage along with the calculated speed (bytes/KB/MB per second).
+    - Files are previewed using material icons for non-image files and actual image previews for image files (using a helper function that creates an object URL for image files).
+  - **Temporary Chunk Folder Removal:**
+    - When a user cancels an upload via the remove button (X), a POST request is sent to a PHP endpoint (removeChunks.php) that:
+    - Validates the CSRF token.
+    - Recursively deletes the temporary folder (which stores file chunks) from the uploads directory.
+  - **Additional Details:**
+    - The file list UI remains visible (instead of auto-disappearing after 5 seconds) if there are any files still present or errors, ensuring that users can retry failed uploads.
+    - The system uses a chunk size of 3MB and supports multiple simultaneous uploads.
+    - All endpoints include CSRF protection and input validation to ensure secure operations.
+
+---
+
+## changes 3/22/2025
+
+- Change Password added and visibile to all users.
+- Brute force protection added and a log file for fail2ban created
+- Fix add user and setup user issue
+- Added folder breadcrumb with drag and drop support
+
+---
+
+## changes 3/21/2025 v1.0.0
+
+- **Trash Feature Implementation**
+  - Added functionality to move deleted files to a Trash folder.
+  - Implemented trash metadata storage (trash.json) capturing original folder, file name, trashed timestamp, uploader, and deletedBy.
+  - Developed restore feature allowing admins to restore individual or all files from Trash.
+  - Developed delete feature allowing permanent deletion (Delete Selected and Delete All) from Trash.
+  - Implemented auto-purge of trash items older than 3 days.
+  - Updated trash modal design for better user experience.
+  - Incorporated material icons with tooltips in restore/delete buttons.
+  - Improved responsiveness of the trash modal with a centered layout and updated CSS.
+  - Fixed issues where trashed files with missing metadata were not restored properly.
+  - Resolved problems with the auto-purge mechanism when trash.json was empty or contained unexpected data.
+  - Adjusted admin button logic to correctly display the restore button for administrators.
+  - Improved error handling on restore and delete actions to provide more informative messages to users.
+- **Other changes**
+  - CSS adjusted (this needs to be refactored)
+  - Fixed setup mode CSRF issue in addUser.php
+  - Adjusted modals buttons in index.html & folderManager.js
+  - Changed upload.php safe pattern
+  - Hide trash folder
+  - Reworked auth.js
+
+---
+
+## changes 3/20/2025
+
+- **Drag & Drop Feature**
+  - For a single file: shows a file icon alongside the file name.
+  - For multiple files: shows a file icon and a count of files.
+  - Styling Adjustments:
+  - Modified drag image styling (using inline-flex, auto width, and appropriate padding) so that the drag image only sizes to its content and does not extend off the screen.
+  - Revised the folder drop handler so that it reads the array of file names from the drag data and sends that array (instead of a single file name) to the server (moveFiles.php) for processing.
+  - Attached dragover, dragleave, and drop event listeners to folder tree nodes (the elements with the class folder-option) to enable a drop target.
+  - Added a global dragover event listener (in main.js) that auto-scrolls the page when the mouse is near the top or bottom of the viewport during a drag operation. This ensures you can reach the folder tree even if you’re far down the file list.
+
+---
+
+## changes 3/19/2025
+
+## Session & Security Enhancements
+
+- **Secure Session Cookies:**  
+  - Configured session cookies with a 2-hour lifetime, HTTPOnly, and SameSite settings.
+  - Regenerating the session ID upon login to mitigate session fixation.
+- **CSRF Protection:**  
+  - Ensured the CSRF token is generated in `config.php` and returned via a `token.php` endpoint.
+  - Updated front-end code (e.g. in `main.js`) to fetch the CSRF token and update meta tags.
+- **Session Expiration Handling:**  
+  - Updated the `loadFileList` and other functions to check for HTTP 401 responses and trigger a logout or redirect if the session has expired.
+
+## File Management Improvements
+
+### Unique Naming to Prevent Overwrites
+
+- **Copy & Move Operations:**  
+  - Added a helper function `getUniqueFileName()` to both `copyFiles.php` and `moveFiles.php` that checks for duplicates and appends a counter (e.g., “ (1)”) until a unique filename is determined.
+  - Updated metadata handling so that when a file is copied/moved and renamed, the corresponding metadata JSON (per-folder) is updated using the new unique filename.
+- **Rename Functionality:**  
+  - Updated `renameFile.php` to:
+    - Allow filenames with parentheses by updating the regex.
+    - Check if a file with the new name already exists.
+    - Generate a unique name using similar logic if needed.
+    - Update folder-specific metadata accordingly.
+
+### Metadata Management
+
+- **Per-Folder Metadata Files:**  
+  - Changed metadata storage so that each folder uses its own metadata file (e.g., `root_metadata.json` for the root folder and `FolderName_metadata.json` for subfolders).
+  - Updated metadata file path generation functions to replace slashes, backslashes, and spaces with dashes.
+
+## Gallery / Grid View Enhancements
+
+- **Gallery (Grid) View:**  
+  - Added a toggle option to switch between a traditional table view and a gallery view.
+  - The gallery view arranges image thumbnails in a grid layout with configurable column options (e.g., 3, 4, or 5 columns).
+  - Under each thumbnail, action buttons (Download, Edit, Rename, Share) are displayed for quick access.
+- **Preview Modal Enhancements:**  
+  - Updated the image preview modal to include navigation buttons (prev/next) for browsing through images.
+  - Improved scaling and styling of preview modals for a better user experience.
+
+## Share Link Functionality
+
+- **Share Link Generation (createShareLink.php):**  
+  - Generate shareable links for files with:
+    - A secure token.
+    - Configurable expiration times (including options for 30, 60, 120, 180, 240 minutes, and a 1-day option).
+    - Optional password protection (passwords are hashed).
+  - Store share links in a JSON file (`share_links.json`) with details (folder, file, expiration timestamp, hashed password).
+- **Share Endpoint (share.php):**  
+  - Validate tokens, expiration, and passwords.
+  - Serve files inline for images or force download for other file types.
+  - Share URL is configurable via environment variables or auto-detected from the server.
+- **Front-End Configuration:**  
+  - Created a `token.php` endpoint that returns CSRF token and SHARE_URL.
+  - Updated the front-end (in `main.js`) to fetch configuration data and update meta tags for CSRF and share URL, allowing index.html to remain static.
+
+## Apache & .htaccess / Server Security
+
+- **Disable Directory Listing:**  
+  - Recommended adding an .htaccess file (e.g., in `uploads/`) with `Options -Indexes` to disable directory indexing.
+- **Restrict Direct File Access:**  
+  - Protected sensitive files (e.g., users.txt) via .htaccess.
+  - Filtered out hidden files (files beginning with a dot) from the file list in `getFileList.php`.
+- **Proxy Download:**  
+  - 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.
+
+---
+
+## changes 3/18/2025
+
+- **CSRF Protection:** All state-changing endpoints (such as those for folder and file operations) include CSRF token validation to ensure that only legitimate requests from authenticated users are processed.
+
+---
+
+## changes 3/17/2025
+
+- refactoring/reorganize domUtils, fileManager.js & folerManager.js
+
+---
+
+## changes 3/15/2025
+
+- Preview video, images or PDFs added
+- Different material icons for each
+- Custom css to adjust centering
+- Persistent folder tree view
+- Fixed folder tree alignment
+- Persistent last opened folder
+
+---
+
+## changes 3/14/2025
+
+- Style adjustments
+- Folder/subfolder upload support
+- Persistent UI elements Items Per Page & Dark/Light modes.
+- File upload scrollbar list
+- Remove files from upload list
+
+---
+
+## changes 3/11/2025
+
+- CSS Refactoring
+- Dark / Light Modes added which automatically adapts to the operating system’s theme preference by default, with a manual toggle option.
+- JS inlines moved to CSS
+
+---
+
+## changes 3/10/2025
+
+- File Editing Enhancements:
+  - Integrated CodeMirror into the file editor modal for syntax highlighting, line numbers, and adjustable font size.
+  - Added zoom in/out controls (“A-” / “A+”) in the editor modal to let users adjust the text size and number of visible lines.
+  - Updated the save function to retrieve edited content from the CodeMirror instance (using editor.getValue()) instead of the underlying textarea.
+- Image Preview Improvements:
+  - Added a new “Preview” button (with a Material icon) in the Actions column for image files.
+  - Implemented an image preview modal that centers content using flexbox, scales images using object-fit: contain, and maintains the original aspect ratio.
+  - Fixed URL encoding for subfolder paths so that images in subfolders (e.g. NewFolder2/Vita) load correctly without encoding slashes.
+- Download ZIP Modal Updates:
+  - Replaced the prompt-based download ZIP with a modal dialog that allows users to enter a custom name for the ZIP file.
+  - Updated the modal logic to ensure proper flow (cancel/confirm) and pass the custom filename to the download process.
+- Folder URL Handling:
+  - Modified the folder path construction in the file list rendering to split folder names into segments and encode each segment individually. This prevents encoding of slashes, ensuring correct URLs for files in subfolders.
+- General UI & Functionality:
+  - Ensured that all global functions (e.g., toggleRowSelection, updateRowHighlight, and sortFiles) are declared and attached to window so that inline event handlers can access them.
+  - Maintained responsive design, preserving existing features such as pagination, sorting, batch operations (delete, copy, move), and folder management.
+  - Updated event listener initialization to work with new modal features and ensure smooth UI interactions.
+
+---
+
+## changes 3/8/2025
+
+- Validation was added in endpoints.
+- Toast notifications were implemented in domUtils.js and integrated throughout the app.
+- Modals replaced inline prompts and confirms for rename, create, delete, copy, and move actions.
+- Folder tree UI was added and improved to be interactive plus reflect the current state after actions.
+
+---
+
+## changes 3/7/2025
+
+- **Module Refactoring:**
+  - Split the original `utils.js` into multiple ES6 modules for network requests, DOM utilities, file management, folder management, uploads, and authentication.
+  - Converted all code to ES6 modules with `import`/`export` syntax and exposed necessary functions globally.
+- **File List Rendering & Pagination:**
+  - Implemented pagination in `fileManager.js` to allow displaying 10, 20, 50, or 100 items per page.
+  - Added global functions (`changePage` and `changeItemsPerPage`) for pagination control.
+  - Added a pagination control section below the file list table.
+- **Date Sorting Enhancements:**
+  - Created a custom date parser (`parseCustomDate`) to convert date strings.
+  - Adjusted the parser to handle two-digit years by adding 2000.
+  - Integrated the parser into the sorting function to reliably sort “Date Modified” and “Upload Date” columns.
+- **File Upload Improvements:**
+  - Enabled multi-file uploads with individual progress tracking (visible for the first 10 files).
+  - Ensured that the file list refreshes immediately after uploads complete.
+  - Kept the upload progress list visible for a configurable delay to allow users to verify upload success.
+  - Reattached event listeners after the file list is re-rendered.
+- **File Action Buttons:**
+  - Unified button state management so that Delete, Copy, and Move buttons remain visible as long as files exist, and are only enabled when files are selected.
+  - Modified the logic in `updateFileActionButtons` and removed conflicting code from `initFileActions`.
+  - Ensured that the folder dropdown for copy/move is hidden when no files exist.
+- **Rename Functionality:**
+  - Added a “Rename” button to the Actions column for every file.
+  - Implemented a `renameFile` function that prompts for a new name, calls a backend script (`renameFile.php`) to perform the rename, updates metadata, and refreshes the file list.
+- **Responsive & UI Tweaks:**
+  - Applied CSS media queries to hide secondary columns on small screens.
+  - Adjusted file preview and icon styling for better alignment.
+  - Centered the header and optimized the layout for a clean, modern appearance.
+  
+*This changelog and feature summary reflect the improvements made during the refactor from a monolithic utils file to modular ES6 components, along with enhancements in UI responsiveness, sorting, file uploads, and file management operations.*
+
+---
+
+## Changes 3/4/2025
+
+- Copy & Move functionality added  
+- Header Layout  
+- Modal Popups (Edit, Add User, Remove User) changes  
+- Consolidated table styling  
+- CSS Consolidation  
+- assets folder  
+- additional changes and fixes
+
+---
+
+## Changes 3/3/2025
+
+- folder management added  
+- some refactoring  
+- config added USERS_DIR & USERS_FILE  

CONTRIBUTING.md

@@ -0,0 +1,243 @@
+# 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)
+- [Adding New Language Translations](#adding-new-language-translations)
+
+## 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.
+
+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.
+
+## Adding New Language Translations
+
+FileRise supports internationalization (i18n) and localization via a central translation file (`i18n.js`). If you would like to contribute a new language translation, please follow these steps:
+
+1. **Update `i18n.js`:**  
+   Open the `i18n.js` file located in the `js` directory. Within the `translations` object, add a new property using the appropriate [ISO language code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) as the key. Copy the structure from an existing language block and translate each key.
+
+   **Example (for German):**
+
+   ```js
+   de: {
+     "please_log_in_to_continue": "Bitte melden Sie sich an, um fortzufahren.",
+     "no_files_selected": "Keine Dateien ausgewählt.",
+     "confirm_delete_files": "Sind Sie sicher, dass Sie {count} ausgewählte Datei(en) löschen möchten?",
+     "element_not_found": "Element mit der ID \"{id}\" wurde nicht gefunden.",
+     "search_placeholder": "Suche nach Dateien oder Tags...",
+     "file_name": "Dateiname",
+     "date_modified": "Änderungsdatum",
+     "upload_date": "Hochladedatum",
+     "file_size": "Dateigröße",
+     "uploader": "Hochgeladen von",
+     "enter_totp_code": "Geben Sie den TOTP-Code ein",
+     "use_recovery_code_instead": "Verwenden Sie stattdessen den Wiederherstellungscode",
+     "enter_recovery_code": "Geben Sie den Wiederherstellungscode ein",
+     "editing": "Bearbeitung",
+     "decrease_font": "A-",
+     "increase_font": "A+",
+     "save": "Speichern",
+     "close": "Schließen",
+     "no_files_found": "Keine Dateien gefunden.",
+     "switch_to_table_view": "Zur Tabellenansicht wechseln",
+     "switch_to_gallery_view": "Zur Galerieansicht wechseln",
+     "share_file": "Datei teilen",
+     "set_expiration": "Ablauf festlegen:",
+     "password_optional": "Passwort (optional):",
+     "generate_share_link": "Freigabelink generieren",
+     "shareable_link": "Freigabelink:",
+     "copy_link": "Link kopieren",
+     "tag_file": "Datei taggen",
+     "tag_name": "Tagname:",
+     "tag_color": "Tagfarbe:",
+     "save_tag": "Tag speichern",
+     "files_in": "Dateien in",
+     "light_mode": "Heller Modus",
+     "dark_mode": "Dunkler Modus",
+     "upload_instruction": "Ziehen Sie Dateien/Ordner hierher oder klicken Sie auf 'Dateien auswählen'",
+     "no_files_selected_default": "Keine Dateien ausgewählt",
+     "choose_files": "Dateien auswählen",
+     "delete_selected": "Ausgewählte löschen",
+     "copy_selected": "Ausgewählte kopieren",
+     "move_selected": "Ausgewählte verschieben",
+     "tag_selected": "Ausgewählte taggen",
+     "download_zip": "Zip herunterladen",
+     "extract_zip": "Zip entpacken",
+     "preview": "Vorschau",
+     "edit": "Bearbeiten",
+     "rename": "Umbenennen",
+     "trash_empty": "Papierkorb ist leer.",
+     "no_trash_selected": "Keine Elemente im Papierkorb für die Wiederherstellung ausgewählt.",
+  
+     // Additional keys for HTML translations:
+     "title": "FileRise",
+     "header_title": "FileRise",
+     "logout": "Abmelden",
+     "change_password": "Passwort ändern",
+     "restore_text": "Wiederherstellen oder",
+     "delete_text": "Papierkorbeinträge löschen",
+     "restore_selected": "Ausgewählte wiederherstellen",
+     "restore_all": "Alle wiederherstellen",
+     "delete_selected_trash": "Ausgewählte löschen",
+     "delete_all": "Alle löschen",
+     "upload_header": "Dateien/Ordner hochladen",
+  
+     // Folder Management keys:
+     "folder_navigation": "Ordnernavigation & Verwaltung",
+     "create_folder": "Ordner erstellen",
+     "create_folder_title": "Ordner erstellen",
+     "enter_folder_name": "Geben Sie den Ordnernamen ein",
+     "cancel": "Abbrechen",
+     "create": "Erstellen",
+     "rename_folder": "Ordner umbenennen",
+     "rename_folder_title": "Ordner umbenennen",
+     "rename_folder_placeholder": "Neuen Ordnernamen eingeben",
+     "delete_folder": "Ordner löschen",
+     "delete_folder_title": "Ordner löschen",
+     "delete_folder_message": "Sind Sie sicher, dass Sie diesen Ordner löschen möchten?",
+     "folder_help": "Ordnerhilfe",
+     "folder_help_item_1": "Klicken Sie auf einen Ordner, um dessen Dateien anzuzeigen.",
+     "folder_help_item_2": "Verwenden Sie [-] um zu minimieren und [+] um zu erweitern.",
+     "folder_help_item_3": "Klicken Sie auf \"Ordner erstellen\", um einen Unterordner hinzuzufügen.",
+     "folder_help_item_4": "Um einen Ordner umzubenennen oder zu löschen, wählen Sie ihn und klicken Sie auf die entsprechende Schaltfläche.",
+  
+     // File List keys:
+     "file_list_title": "Dateien in (Root)",
+     "delete_files": "Dateien löschen",
+     "delete_selected_files_title": "Ausgewählte Dateien löschen",
+     "delete_files_message": "Sind Sie sicher, dass Sie die ausgewählten Dateien löschen möchten?",
+     "copy_files": "Dateien kopieren",
+     "copy_files_title": "Ausgewählte Dateien kopieren",
+     "copy_files_message": "Wählen Sie einen Zielordner, um die ausgewählten Dateien zu kopieren:",
+     "move_files": "Dateien verschieben",
+     "move_files_title": "Ausgewählte Dateien verschieben",
+     "move_files_message": "Wählen Sie einen Zielordner, um die ausgewählten Dateien zu verschieben:",
+     "move": "Verschieben",
+     "extract_zip_button": "Zip entpacken",
+     "download_zip_title": "Ausgewählte Dateien als Zip herunterladen",
+     "download_zip_prompt": "Geben Sie einen Namen für die Zip-Datei ein:",
+     "zip_placeholder": "dateien.zip",
+  
+     // Login Form keys:
+     "login": "Anmelden",
+     "remember_me": "Angemeldet bleiben",
+     "login_oidc": "Mit OIDC anmelden",
+     "basic_http_login": "HTTP-Basisauthentifizierung verwenden",
+  
+     // Change Password keys:
+     "change_password_title": "Passwort ändern",
+     "old_password": "Altes Passwort",
+     "new_password": "Neues Passwort",
+     "confirm_new_password": "Neues Passwort bestätigen",
+  
+     // Add User keys:
+     "create_new_user_title": "Neuen Benutzer erstellen",
+     "username": "Benutzername:",
+     "password": "Passwort:",
+     "grant_admin": "Admin-Rechte vergeben",
+     "save_user": "Benutzer speichern",
+  
+     // Remove User keys:
+     "remove_user_title": "Benutzer entfernen",
+     "select_user_remove": "Wählen Sie einen Benutzer zum Entfernen:",
+     "delete_user": "Benutzer löschen",
+  
+     // Rename File keys:
+     "rename_file_title": "Datei umbenennen",
+     "rename_file_placeholder": "Neuen Dateinamen eingeben",
+  
+     // Custom Confirm Modal keys:
+     "yes": "Ja",
+     "no": "Nein",
+     "delete": "Löschen",
+     "download": "Herunterladen",
+     "upload": "Hochladen",
+     "copy": "Kopieren",
+     "extract": "Entpacken",
+  
+     // Dark Mode Toggle
+     "dark_mode_toggle": "Dunkler Modus"
+   }
+
+---
+
+Thank you for helping to improve FileRise and happy coding!

Dockerfile

@@ -0,0 +1,98 @@
+# syntax=docker/dockerfile:1.4
+
+#############################
+# Source Stage – copy your FileRise app
+#############################
+FROM ubuntu:24.04 AS appsource
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends ca-certificates && \
+    rm -rf /var/lib/apt/lists/*
+
+# prepare the folder and remove Apache’s default index
+RUN mkdir -p /var/www && rm -f /var/www/html/index.html
+
+# **Copy the FileRise source** (where your composer.json lives)
+COPY . /var/www
+
+#############################
+# Composer Stage – install PHP dependencies
+#############################
+FROM composer:2 AS composer
+WORKDIR /app
+
+# **Copy composer files from the source** and install
+COPY --from=appsource /var/www/composer.json /var/www/composer.lock ./
+RUN composer install --no-dev --optimize-autoloader
+
+#############################
+# Final Stage – runtime image
+#############################
+FROM ubuntu:24.04
+
+LABEL by=error311
+
+# Set basic environment variables
+ENV DEBIAN_FRONTEND=noninteractive \
+    HOME=/root \
+    LC_ALL=C.UTF-8 \
+    LANG=en_US.UTF-8 \
+    LANGUAGE=en_US.UTF-8 \
+    TERM=xterm \
+    UPLOAD_MAX_FILESIZE=5G \
+    POST_MAX_SIZE=5G \
+    TOTAL_UPLOAD_SIZE=5G \
+    PERSISTENT_TOKENS_KEY=default_please_change_this_key
+
+ARG PUID=99
+ARG PGID=100
+
+# Install Apache, PHP, and required extensions
+RUN apt-get update && \
+    apt-get upgrade -y && \
+    apt-get install -y --no-install-recommends \
+      apache2 php php-json php-curl php-zip php-mbstring php-gd \
+      ca-certificates curl git openssl && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+# Fix www-data UID/GID
+RUN set -eux; \
+    if [ "$(id -u www-data)" != "${PUID}" ]; then usermod -u ${PUID} www-data || true; fi; \
+    if [ "$(id -g www-data)" != "${PGID}" ]; then groupmod -g ${PGID} www-data || true; fi; \
+    usermod -g ${PGID} www-data
+
+# Copy application code and vendor directory
+COPY custom-php.ini /etc/php/8.3/apache2/conf.d/99-app-tuning.ini
+COPY --from=appsource /var/www /var/www
+COPY --from=composer  /app/vendor /var/www/vendor
+
+# Fix ownership & permissions
+RUN chown -R www-data:www-data /var/www && chmod -R 775 /var/www
+
+# Create a symlink for uploads folder in public directory.
+RUN cd /var/www/public && ln -s ../uploads uploads
+
+# Configure Apache
+RUN cat <<'EOF' > /etc/apache2/sites-available/000-default.conf
+<VirtualHost *:80>
+    ServerAdmin webmaster@localhost
+    DocumentRoot /var/www/public
+    <Directory "/var/www/public">
+        AllowOverride All
+        Require all granted
+        DirectoryIndex index.php index.html
+    </Directory>
+    ErrorLog /var/log/apache2/error.log
+    CustomLog /var/log/apache2/access.log combined
+</VirtualHost>
+EOF
+
+# Enable the rewrite and headers modules
+RUN a2enmod rewrite headers
+
+# Expose ports and set up start script
+EXPOSE 80 443
+COPY start.sh /usr/local/bin/start.sh
+RUN chmod +x /usr/local/bin/start.sh
+
+CMD ["/usr/local/bin/start.sh"]

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 SeNS
+Copyright (c) 2025 FileRise
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,257 +1,202 @@
-# Multi File Upload Editor
+# FileRise
 
-https://github.com/user-attachments/assets/179e6940-5798-4482-9a69-696f806c37de
+**Elevate your File Management** – A modern, self-hosted web file manager.
+Upload, organize, and share files through a sleek web interface. **FileRise** is lightweight yet powerful: think of it as your personal cloud drive that you control. With drag-and-drop uploads, in-browser editing, secure user logins (with SSO and 2FA support), and one-click sharing, **FileRise** makes file management on your server a breeze.
 
-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)
 
 ---
 
-## Features
+## Features at a Glance or [Full Features Wiki](https://github.com/error311/FileRise/wiki/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).
-- **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
-    - Line numbering
-    - Adjustable font sizes
-  - 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.
-- **Built-in File Preview:**
-  - Users can quickly preview images, videos, 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):**
-  - **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.
-- **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.
-- **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.
-- **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).
-  - 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.
-- **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.
-- **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.
-- **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.
-- **Trash Management with Restore & Delete:**
-  - **Trash Storage & Metadata:**
-    - Deleted files are moved to a designated “Trash” folder rather than being immediately removed.
-    - Metadata is stored in a JSON file (`trash.json`) that records:
-      - Original folder and file name
-      - Timestamp when the file was trashed
-      - 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.
-  - **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.
+- 🚀 **Easy File Uploads:** Upload multiple files and folders via drag & drop or file picker. Supports large files with pause/resumable chunked uploads and shows real-time progress for each file. No more failed transfers – FileRise will pick up where it left off if your connection drops.
+
+- 🗂️ **File Management:** Full set of file/folder operations – move or copy files (via intuitive drag-drop or dialogs), rename items, and delete in batches. You can even download selected files as a ZIP archive or extract uploaded ZIP files server-side. Organize content with an interactive folder tree and breadcrumb navigation for quick jumps.
+
+- 🗃️ **Folder Sharing & File Sharing:** Easily share entire folders via secure, expiring public links. Folder shares can be password-protected, and shared folders support file uploads from outside users with a separate, secure upload mechanism. Folder listings are paginated (10 items per page) with navigation controls, and file sizes are displayed in MB for clarity. Share files with others using one-time or expiring public links (with password protection if desired) – convenient for sending individual files without exposing the whole app.
+
+- 📝 **Built-in Editor & Preview:** View images, videos, audio, and PDFs inline with a preview modal – no need to download just to see them. Edit text/code files right in your browser with a CodeMirror-based editor featuring syntax highlighting and line numbers. Great for config files or notes – tweak and save changes without leaving FileRise.
+
+- 🏷️ **Tags & Search:** Categorize your files with color-coded tags and locate them instantly using our indexed real-time search. Easily switch to Advanced Search mode to enable fuzzy matching not only across file names, tags, and uploader fields but also within the content of text files—helping you find that “important” document even if you make a typo or need to search deep within the file.
+
+- 🔒 **User Authentication & User Permissions:** Secure your portal with username/password login. Supports multiple users – create user accounts (admin UI provided) for family or team members. User permissions such as User “Folder Only” feature assigns each user a dedicated folder within the root directory, named after their username, restricting them from viewing or modifying other directories. User Read Only and Disable Upload are additional permissions. FileRise also integrates with Single Sign-On (OIDC) providers (e.g., OAuth2/OIDC for Google/Authentik/Keycloak) and offers optional TOTP two-factor auth for extra security.
+
+- 🎨 **Responsive UI (Dark/Light Mode):** FileRise is mobile-friendly out of the box – manage files from your phone or tablet with a responsive layout. Choose between Dark mode or Light theme, or let it follow your system preference. The interface remembers your preferences (layout, items per page, last visited folder, etc.) for a personalized experience each time.
+
+- 🌐 **Internationalization & Localization:** FileRise supports multiple languages via an integrated i18n system. Users can switch languages through a user panel dropdown, and their choice is saved in local storage for a consistent experience across sessions. Currently available in English, Spanish, and French—please report any translation issues you encounter.
+
+- 🗑️ **Trash & File Recovery:** Mistakenly deleted files? No worries – deleted items go to the Trash instead of immediate removal. Admins can restore files from Trash or empty it to free space. FileRise auto-purges old trash entries (default 3 days) to keep your storage tidy.
+
+- ⚙️ **Lightweight & Self-Contained:** FileRise runs on PHP 8.1+ with no external database required – data is stored in files (users, metadata) for simplicity. It’s a single-folder web app you can drop into any Apache/PHP server or run as a container. Docker & Unraid ready: use our pre-built image for a hassle-free setup. Memory and CPU footprint is minimal, yet the app scales to thousands of files with pagination and sorting features.
+
+(For a full list of features and detailed changelogs, see the [Wiki](https://github.com/error311/FileRise/wiki), [changelog](https://github.com/error311/FileRise/blob/master/CHANGELOG.md) or the [releases](https://github.com/error311/FileRise/releases) pages.)
 
 ---
 
-## Screenshots
+## Live Demo
 
-**Light mode**
-![Light Mode](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/light-mode.png)
-
-**Dark mode**
-![Dark Mode](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-mode.png)
-
-**Dark editor**
-![dark-editor](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-editor.png)
-
-**Dark preview**
-![dark-preview](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/dark-preview.png)
-
-**Restore or Delete Trash**
-![restore-delete](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/restore-delete.png)
-
-**Login page**
-![Login](https://raw.githubusercontent.com/error311/multi-file-upload-editor/refs/heads/master/resources/login-page.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%">
-</p>
+Curious about the UI? **Check out the live demo:** <https://demo.filerise.net> (login with username “demo” and password “demo”). *The demo is read-only for security*. Explore the interface, switch themes, preview files, and see FileRise in action!
 
 ---
 
 ## Installation & Setup
 
-### Manual Installation
+You can deploy FileRise either by running the **Docker container** (quickest way) or by a **manual installation** on a PHP web server. Both methods are outlined below.
 
-1. **Clone or Download the Repository:**
-   - **Clone:**  
+### 1. Running with Docker (Recommended)
+
+If you have Docker installed, you can get FileRise up and running in minutes:
+
+- **Pull the image from Docker Hub:**
 
 ``` bash
-     git clone https://github.com/error311/multi-file-upload-editor.git
+docker pull error311/filerise-docker:latest
 ```
 
-   - **Download:**  
-     Download the latest release from the GitHub releases page and extract it into your desired directory.
+*(For Apple Silicon (M1/M2) users, use --platform linux/amd64 tag until multi-arch support is added.)*  
 
-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.).
-
-3. **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).
-     - `metadata/` – for storing `file_metadata.json` and other metadata.
-   - Example commands:
-
-     ```bash
-     mkdir -p /var/www/uploads /var/www/users /var/www/metadata
-     chmod -R 775 /var/www/uploads /var/www/users /var/www/metadata
-     ```
-
-4. **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:**
-   - 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.
-     - `TIMEZONE`: Set to your preferred timezone.
-     - `TOTAL_UPLOAD_SIZE`: Ensure it matches PHP’s `upload_max_filesize` and `post_max_size` settings in your `php.ini`.
-
-### Initial Setup Instructions
-
-- **First Launch Admin Setup:**  
-  On first launch, if no users exist, the application will enter a setup mode. You will be prompted to create an admin user. This is handled automatically by the application (e.g., via a “Create Admin” form).  
-  **Note:** No default credentials are provided. You must create the first admin account to log in and manage additional users.
-
----
-
-## Docker Usage
-
-For users who prefer containerization, a Docker image is available
-
-### Quickstart
-
-1. **Pull the Docker Image:**
-
-   ```bash
-   docker pull error311/multi-file-upload-editor-docker:latest
-   ```
-
-2. **Run the Container:**
+- **Run a container:**
 
 ``` bash
 docker run -d \
-   -p 80:80 \
+  -p 8080:80 \
   -e TIMEZONE="America/New_York" \
   -e TOTAL_UPLOAD_SIZE="5G" \
   -e SECURE="false" \
-   -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
+  -v ~/filerise/uploads:/var/www/uploads \
+  -v ~/filerise/users:/var/www/users \
+  -v ~/filerise/metadata:/var/www/metadata \
+  --name filerise \
+  error311/filerise-docker:latest
   ```
 
-3. **Using Docker Compose:**
+  This will start FileRise on port 8080. Visit `http://your-server-ip:8080` to access it. Environment variables shown above are optional – for instance, set `SECURE="true"` to enforce HTTPS (assuming you have SSL at proxy level) and adjust `TIMEZONE` as needed. The volume mounts ensure your files and user data persist outside the container.
 
-   Create a docker-compose.yml file with the following content:
+- **Using Docker Compose:**
+Alternatively, use **docker-compose**. Save the snippet below as docker-compose.yml and run `docker-compose up -d`:
 
 ``` yaml
-   version: "3.8"
+version: '3'
 services:
-   web:
-     image: error311/multi-file-upload-editor-docker:latest
+  filerise:
+    image: error311/filerise-docker:latest
     ports:
-       - "80:80"
+      - "8080:80"
     environment:
-       TIMEZONE: "America/New_York"
-       TOTAL_UPLOAD_SIZE: "5G"
+      TIMEZONE: "UTC"
+      TOTAL_UPLOAD_SIZE: "10G"
       SECURE: "false"
+      PERSISTENT_TOKENS_KEY: "please_change_this_@@"
     volumes:
-       - /path/to/your/uploads:/var/www/uploads
-       - /path/to/your/users:/var/www/users
-       - /path/to/your/metadata:/var/www/metadata
+      - ./uploads:/var/www/uploads
+      - ./users:/var/www/users
+      - ./metadata:/var/www/metadata
 ```
 
-**Then start the container with:**
+FileRise will be accessible at `http://localhost:8080` (or your server’s IP). The above example also sets a custom `PERSISTENT_TOKENS_KEY` (used to encrypt “remember me” tokens) – be sure to change it to a random string for security.
+
+**First-time Setup:** On first launch, FileRise will detect no users and prompt you to create an **Admin account**. Choose your admin username & password, and you’re in! You can then head to the **User Management** section to add additional users if needed.
+
+### 2. Manual Installation (PHP/Apache)
+
+If you prefer to run FileRise on a traditional web server (LAMP stack or similar):
+
+- **Requirements:** PHP 8.1 or higher, Apache (with mod_php) or another web server configured for PHP. Ensure PHP extensions json, curl, and zip are enabled. No database needed.
+- **Download Files:** Clone this repo or download the [latest release archive](https://github.com/error311/FileRise/releases).
 
 ``` bash
-   docker-compose up -d
+git clone https://github.com/error311/FileRise.git  
 ```
 
----
+Place the files into your web server’s directory (e.g., `/var/www/html/filerise`). It can be in a subfolder (just adjust the `BASE_URL` in config as below).
 
-## Configuration Guidance
+- **Composer Dependencies:** If you plan to use OIDC (SSO login), install Composer and run `composer install` in the FileRise directory. (This pulls in a couple of PHP libraries like jumbojett/openid-connect for OAuth support.) If you skip this, FileRise will still work, but OIDC login won’t be available.
 
-The `config.php` file contains several key constants that may need adjustment for your deployment:
+- **Folder Permissions:** Ensure the server can write to the following directories (create them if they don’t exist):
 
-- **BASE_URL:**  
-  Set to the URL where your application is hosted (e.g., `http://yourdomain.com/uploads/`).
+``` bash
+mkdir -p uploads users metadata
+chown -R www-data:www-data uploads users metadata   # www-data is Apache user; use appropriate user
+chmod -R 775 uploads users metadata
+```
 
-- **UPLOAD_DIR, USERS_DIR, META_DIR:**  
-  Define the directories for uploads, user data, and metadata. Adjust these to match your server environment or Docker volume mounts.
+The uploads/ folder is where files go, users/ stores the user credentials file, and metadata/ holds metadata like tags and share links.
 
-- **TIMEZONE & DATE_TIME_FORMAT:**  
-  Set according to your regional settings.
+- **Configuration:** Open the `config.php` file in a text editor. You may want to adjust:
 
-- **TOTAL_UPLOAD_SIZE:**  
-  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.
+  - `BASE_URL` – the URL where you will access FileRise (e.g., `“https://files.mydomain.com/”`). This is used for generating share links.
   
-- **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.
+  - `TIMEZONE` and `DATE_TIME_FORMAT` – match your locale (for correct timestamps).
+  
+  - `TOTAL_UPLOAD_SIZE` – max aggregate upload size (default 5G). Also adjust PHP’s `upload_max_filesize` and `post_max_size` to at least this value (the Docker start script auto-adjusts PHP limits).
+  
+  - `PERSISTENT_TOKENS_KEY` – set a unique secret if you use “Remember Me” logins, to encrypt the tokens.
+  
+  - Other settings like `UPLOAD_DIR`, `USERS_FILE` etc. generally don’t need changes unless you move those folders. Defaults are set for the directories mentioned above.
+
+- **Web Server Config:** If using Apache, ensure `.htaccess` files are allowed or manually add the rules from `.htaccess` to your Apache config – these disable directory listings and prevent access to certain files. For Nginx or others, you’ll need to replicate those protections (see Wiki: [Nginx Setup for examples](https://github.com/error311/FileRise/wiki/Nginx-Setup)). Also enable mod_rewrite if not already, as FileRise may use pretty URLs for share links.
+
+Now navigate to the FileRise URL in your browser. On first load, you’ll be prompted to create the Admin user (same as Docker setup). After that, the application is ready to use!
 
 ---
 
-## Additional Information
+## FAQ / Troubleshooting
 
-- **Security:**  
-  All state-changing endpoints use CSRF token validation. Ensure that sessions and tokens are correctly configured as per your deployment environment.
+- **“Upload failed” or large files not uploading:** Make sure `TOTAL_UPLOAD_SIZE` in config and PHP’s `post_max_size` / `upload_max_filesize` are all set high enough. For extremely large files, you might also need to increase max_execution_time in PHP or rely on the resumable upload feature in smaller chunks.
 
-- **Permissions:**  
-  Both manual and Docker installations include steps to ensure that file and directory permissions are set correctly for the web server to read and write as needed.
+- **How to enable HTTPS?** FileRise itself doesn’t handle TLS. Run it behind a reverse proxy like Nginx, Caddy, or Apache with SSL, or use Docker with a companion like nginx-proxy or Caddy. Set `SECURE="true"` env var in Docker so FileRise knows to generate https links.
 
-- **Logging & Troubleshooting:**  
-  Check Apache logs (located in `/var/log/apache2/`) for troubleshooting any issues during deployment or operation.
+- **Changing Admin or resetting password:** Admin can change any user’s password via the UI (User Management section). If you lose admin access, you can edit the `users/users.txt` file on the server – passwords are hashed (bcrypt), but you can delete the admin line and then restart the app to trigger the setup flow again.
 
-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).
+- **Where are my files stored?** In the `uploads/` directory (or the path you set for `UPLOAD_DIR`). Within it, files are organized in the folder structure you see in the app. Deleted files move to `uploads/trash/`. Tag information is in `metadata/file_metadata`.json and trash metadata in `metadata/trash.json`, etc. Regular backups of these folders is recommended if the data is important.
+
+- **Updating FileRise:** If using Docker, pull the new image and recreate the container. For manual installs, download the latest release and replace the files (preserve your `config.php` and the uploads/users/metadata folders). Clear your browser cache if you have issues after an update (in case CSS/JS changed).
+
+For more Q&A or to ask for help, please check the Discussions or open an issue.
+
+---
+
+## Contributing
+
+Contributions are welcome! If you have ideas for new features or have found a bug, feel free to open an issue. Check out the [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines. You can also join the conversation in GitHub Discussions or on Reddit (see links below) to share feedback and suggestions.
+
+Areas where you can help: translations, bug fixes, UI improvements, or building integration with other services. If you like FileRise, giving the project a ⭐ star ⭐ on GitHub is also a much-appreciated contribution!
+
+---
+
+## Community and Support
+
+- **Reddit:** [r/selfhosted: FileRise Discussion](https://www.reddit.com/r/selfhosted/comments/1jl01pi/introducing_filerise_a_modern_selfhosted_file/) – (Announcement and user feedback thread).
+- **Unraid Forums:** [FileRise Support Thread](https://forums.unraid.net/topic/187337-support-filerise/) – for Unraid-specific support or issues.
+- **GitHub Discussions:** Use the Q&A category for any setup questions, and the Ideas category to suggest enhancements.
+
+---
+
+## Dependencies
+
+### PHP Libraries
+
+- **[jumbojett/openid-connect-php](https://github.com/jumbojett/OpenID-Connect-PHP)** (v^1.0.0)
+- **[phpseclib/phpseclib](https://github.com/phpseclib/phpseclib)** (v~3.0.7)
+- **[robthree/twofactorauth](https://github.com/RobThree/TwoFactorAuth)** (v^3.0)
+- **[endroid/qr-code](https://github.com/endroid/qr-code)** (v^5.0)
+
+### Client-Side Libraries
+
+- **Google Fonts** – [Roboto](https://fonts.google.com/specimen/Roboto) and **Material Icons** ([Google Material Icons](https://fonts.google.com/icons))
+- **[Bootstrap](https://getbootstrap.com/)** (v4.5.2)
+- **[CodeMirror](https://codemirror.net/)** (v5.65.5) – For code editing functionality.
+- **[Resumable.js](http://www.resumablejs.com/)** (v1.1.0) – For file uploads.
+- **[DOMPurify](https://github.com/cure53/DOMPurify)** (v2.4.0) – For sanitizing HTML.
+- **[Fuse.js](https://fusejs.io/)** (v6.6.2) – For indexed, fuzzy searching.
+
+---
+
+## License
+
+This project is open-source under the MIT License. That means you’re free to use, modify, and distribute **FileRise**, with attribution. We hope you find it useful and contribute back!

SECURITY.md

@@ -0,0 +1,33 @@
+# Security Policy
+
+## Supported Versions
+
+FileRise is actively maintained. Only supported versions will receive security updates. For details on which versions are currently supported, please see the [Release Notes](https://github.com/error311/FileRise/releases).
+
+## Reporting a Vulnerability
+
+If you discover a security vulnerability, please do not open a public issue. Instead, follow these steps:
+
+1. **Email Us Privately:**  
+   Send an email to [security@filerise.net](mailto:security@filerise.net) with the subject line “[FileRise] Security Vulnerability Report”.
+
+2. **Include Details:**  
+   Provide a detailed description of the vulnerability, steps to reproduce it, and any other relevant information (e.g., affected versions, screenshots, logs).
+
+3. **Secure Communication (Optional):**  
+   If you wish to discuss the vulnerability securely, you can use our PGP key. You can obtain our PGP key by emailing us, and we will send it upon request.
+
+## Disclosure Policy
+
+- **Acknowledgement:**  
+  We will acknowledge receipt of your report within 48 hours.
+  
+- **Resolution Timeline:**  
+  We aim to fix confirmed vulnerabilities within 30 days. In cases where a delay is necessary, we will communicate updates to you directly.
+
+- **Public Disclosure:**  
+  After a fix is available, details of the vulnerability will be disclosed publicly in a way that does not compromise user security.
+
+## Additional Information
+
+We appreciate responsible disclosure of vulnerabilities and thank all researchers who help keep FileRise secure. For any questions related to this policy, please contact us at [admin@filerise.net](mailto:admin@filerise.net).

addUser.php

@@ -1,86 +0,0 @@
-<?php
-require '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)) === '')) {
-    // Allow initial admin creation without session checks.
-    $setupMode = true;
-} else {
-    $setupMode = false;
-    // 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']) {
-        echo json_encode(["error" => "Invalid CSRF token"]);
-        http_response_code(403);
-        exit;
-    }
-    if (
-        !isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true ||
-        !isset($_SESSION['isAdmin']) || $_SESSION['isAdmin'] !== true
-    ) {
-        echo json_encode(["error" => "Unauthorized"]);
-        exit;
-    }
-}
-
-// Get input data from JSON
-$data = json_decode(file_get_contents("php://input"), true);
-$newUsername = trim($data["username"] ?? "");
-$newPassword = trim($data["password"] ?? "");
-
-// In setup mode, force the new user to be admin.
-if ($setupMode) {
-    $isAdmin = "1";
-} else {
-    $isAdmin = !empty($data["isAdmin"]) ? "1" : "0"; // "1" for admin, "0" for regular user.
-}
-
-// Validate input
-if (!$newUsername || !$newPassword) {
-    echo json_encode(["error" => "Username and password required"]);
-    exit;
-}
-
-// Validate username using preg_match (allow letters, numbers, underscores, dashes, and spaces).
-if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $newUsername)) {
-    echo json_encode(["error" => "Invalid username. Only letters, numbers, underscores, dashes, and spaces are allowed."]);
-    exit;
-}
-
-// Ensure users.txt exists
-if (!file_exists($usersFile)) {
-    file_put_contents($usersFile, '');
-}
-
-// 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));
-    if ($newUsername === $storedUser) {
-        echo json_encode(["error" => "User already exists"]);
-        exit;
-    }
-}
-
-// Hash the password
-$hashedPassword = password_hash($newPassword, PASSWORD_BCRYPT);
-
-// Prepare new user line
-$newUserLine = $newUsername . ":" . $hashedPassword . ":" . $isAdmin . PHP_EOL;
-
-// In setup mode, overwrite users.txt; otherwise, append to it.
-if ($setupMode) {
-    file_put_contents($usersFile, $newUserLine);
-} else {
-    file_put_contents($usersFile, $newUserLine, FILE_APPEND);
-}
-
-echo json_encode(["success" => "User added successfully"]);
-?>

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 +0,0 @@
-<?php
-require 'config.php';
-header('Content-Type: application/json');
-
-$usersFile = USERS_DIR . USERS_FILE;
-
-// Function to authenticate user
-function authenticate($username, $password)
-{
-    global $usersFile;
-
-    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
-        }
-    }
-    return false;
-}
-
-// Get JSON input
-$data = json_decode(file_get_contents("php://input"), true);
-$username = trim($data["username"] ?? "");
-$password = trim($data["password"] ?? "");
-
-// Validate input: ensure both fields are provided.
-if (!$username || !$password) {
-    echo json_encode(["error" => "Username and password are required"]);
-    exit;
-}
-
-// Validate username format: allow only letters, numbers, underscores, dashes, and spaces.
-if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $username)) {
-    echo json_encode(["error" => "Invalid username format. Only letters, numbers, underscores, dashes, and spaces are allowed."]);
-    exit;
-}
-
-// Authenticate user
-$userRole = authenticate($username, $password);
-if ($userRole !== false) {
-    // Regenerate session ID to mitigate session fixation attacks
-    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"]]);
-} else {
-    echo json_encode(["error" => "Invalid credentials"]);
-}

checkAuth.php

@@ -1,22 +0,0 @@
-<?php
-require 'config.php';
-header('Content-Type: application/json');
-
-// 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
-    echo json_encode(["setup" => true]);
-    exit();
-}
-
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["authenticated" => false]);
-    exit;
-}
-
-echo json_encode([
-    "authenticated" => true,
-    "isAdmin" => isset($_SESSION["isAdmin"]) ? $_SESSION["isAdmin"] : false
-]);
-?>

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": "^3.0",
+      "endroid/qr-code": "^5.0"
+    }
+  }

composer.lock

@@ -0,0 +1,545 @@
+{
+    "_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": "6b70aec0c1830ebb2b8f9bb625b04a22",
+    "packages": [
+        {
+            "name": "bacon/bacon-qr-code",
+            "version": "v3.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Bacon/BaconQrCode.git",
+                "reference": "f9cc1f52b5a463062251d666761178dbdb6b544f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Bacon/BaconQrCode/zipball/f9cc1f52b5a463062251d666761178dbdb6b544f",
+                "reference": "f9cc1f52b5a463062251d666761178dbdb6b544f",
+                "shasum": ""
+            },
+            "require": {
+                "dasprid/enum": "^1.0.3",
+                "ext-iconv": "*",
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "phly/keep-a-changelog": "^2.12",
+                "phpunit/phpunit": "^10.5.11 || 11.0.4",
+                "spatie/phpunit-snapshot-assertions": "^5.1.5",
+                "squizlabs/php_codesniffer": "^3.9"
+            },
+            "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/v3.0.1"
+            },
+            "time": "2024-10-01T13:55:55+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": "5.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/endroid/qr-code.git",
+                "reference": "393fec6c4cbdc1bd65570ac9d245704428010122"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/endroid/qr-code/zipball/393fec6c4cbdc1bd65570ac9d245704428010122",
+                "reference": "393fec6c4cbdc1bd65570ac9d245704428010122",
+                "shasum": ""
+            },
+            "require": {
+                "bacon/bacon-qr-code": "^3.0",
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "endroid/quality": "dev-main",
+                "ext-gd": "*",
+                "khanamiryan/qrcode-detector-decoder": "^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-main": "5.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/5.1.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/endroid",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-09-08T08:52:55+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": "v3.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/RobThree/TwoFactorAuth.git",
+                "reference": "6d70f9ca8e25568f163a7b3b3ff77bd8ea743978"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/RobThree/TwoFactorAuth/zipball/6d70f9ca8e25568f163a7b3b3ff77bd8ea743978",
+                "reference": "6d70f9ca8e25568f163a7b3b3ff77bd8ea743978",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3.13",
+                "phpstan/phpstan": "^1.9",
+                "phpunit/phpunit": "^9"
+            },
+            "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"
+                },
+                {
+                    "name": "Nicolas CARPi",
+                    "homepage": "https://github.com/NicolasCARPi",
+                    "role": "Developer"
+                },
+                {
+                    "name": "Will Power",
+                    "homepage": "https://github.com/willpower232",
+                    "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": "2024-10-24T15:14:25+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,55 +0,0 @@
-<?php
-// config.php
-
-// Allow an environment variable to override HTTPS detection.
-$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');
-}
-
-$cookieParams = [
-    'lifetime' => 7200,
-    'path'     => '/',
-    'domain'   => '', // Specify your domain if needed
-    'secure'   => $secure,
-    'httponly' => true,
-    'samesite' => 'Lax'
-];
-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)
-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"
-        : "http://localhost/share.php";
-} 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);
-?>

config/config.php

@@ -0,0 +1,172 @@
+<?php
+// config.php
+header("Cache-Control: no-cache, must-revalidate");
+header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
+header("Pragma: no-cache");
+header("Expires: 0");
+header('X-Content-Type-Options: nosniff');
+// Security headers
+header("X-Content-Type-Options: nosniff");
+header("X-Frame-Options: SAMEORIGIN");
+header("Referrer-Policy: no-referrer-when-downgrade");
+// Only include Strict-Transport-Security if you are using HTTPS
+if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') {
+    header("Strict-Transport-Security: max-age=31536000; includeSubDomains; preload");
+}
+header("Permissions-Policy: geolocation=(), microphone=(), camera=()");
+header("X-XSS-Protection: 1; mode=block");
+
+// Define constants.
+define('PROJECT_ROOT', dirname(__DIR__));
+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');
+define('REGEX_FOLDER_NAME', '/^[\p{L}\p{N}_\-\s\/\\\\]+$/u');
+define('PATTERN_FOLDER_NAME', '[\p{L}\p{N}_\-\s\/\\\\]+');
+define('REGEX_FILE_NAME', '/^[\p{L}\p{N}\p{M}%\-\.\(\) _]+$/u');
+define('REGEX_USER', '/^[\p{L}\p{N}_\- ]+$/u');
+
+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).
+$envKey = getenv('PERSISTENT_TOKENS_KEY');
+if ($envKey === false || $envKey === '') {
+    $encryptionKey = 'default_please_change_this_key';
+    error_log('WARNING: Using default encryption key. Please set PERSISTENT_TOKENS_KEY in your environment.');
+} else {
+    $encryptionKey = $envKey;
+}
+
+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) {
+    $secure = filter_var($envSecure, FILTER_VALIDATE_BOOLEAN);
+} else {
+    $secure = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
+}
+
+$cookieParams = [
+    'lifetime' => 7200,
+    'path'     => '/',
+    'domain'   => '', // Set your domain as needed.
+    'secure'   => $secure,
+    'httponly' => true,
+    'samesite' => 'Lax'
+];
+// At the very beginning of config.php
+/*ini_set('session.save_path', __DIR__ . '/../sessions');
+if (!is_dir(__DIR__ . '/../sessions')) {
+    mkdir(__DIR__ . '/../sessions', 0777, true);
+}*/
+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));
+}
+
+// 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 (strpos(BASE_URL, 'yourwebsite') !== false) {
+    $defaultShareUrl = isset($_SERVER['HTTP_HOST'])
+        ? "http://" . $_SERVER['HTTP_HOST'] . "/api/file/share.php"
+        : "http://localhost/api/file/share.php";
+} else {
+    $defaultShareUrl = rtrim(BASE_URL, '/') . "/api/file/share.php";
+}
+define('SHARE_URL', getenv('SHARE_URL') ? getenv('SHARE_URL') : $defaultShareUrl);

copyFiles.php

@@ -1,143 +0,0 @@
-<?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']) {
-    echo json_encode(["error" => "Invalid CSRF token"]);
-    http_response_code(403);
-    exit;
-}
-
-// Ensure user is authenticated
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["error" => "Unauthorized"]);
-    http_response_code(401);
-    exit;
-}
-
-$data = json_decode(file_get_contents("php://input"), true);
-if (
-    !$data || 
-    !isset($data['source']) || 
-    !isset($data['destination']) || 
-    !isset($data['files'])
-) {
-    echo json_encode(["error" => "Invalid request"]);
-    exit;
-}
-
-$sourceFolder = trim($data['source']);
-$destinationFolder = trim($data['destination']);
-$files = $data['files'];
-
-// Validate folder names: allow letters, numbers, underscores, dashes, spaces, and forward slashes.
-$folderPattern = '/^[A-Za-z0-9_\- \/]+$/';
-if ($sourceFolder !== 'root' && !preg_match($folderPattern, $sourceFolder)) {
-    echo json_encode(["error" => "Invalid source folder name."]);
-    exit;
-}
-if ($destinationFolder !== 'root' && !preg_match($folderPattern, $destinationFolder)) {
-    echo json_encode(["error" => "Invalid destination folder name."]);
-    exit;
-}
-
-// Trim any leading/trailing slashes and spaces.
-$sourceFolder = trim($sourceFolder, "/\\ ");
-$destinationFolder = trim($destinationFolder, "/\\ ");
-
-// Build the source and destination directories.
-$baseDir = rtrim(UPLOAD_DIR, '/\\');
-$sourceDir = ($sourceFolder === 'root') 
-    ? $baseDir . DIRECTORY_SEPARATOR 
-    : $baseDir . DIRECTORY_SEPARATOR . $sourceFolder . DIRECTORY_SEPARATOR;
-$destDir = ($destinationFolder === 'root') 
-    ? $baseDir . DIRECTORY_SEPARATOR 
-    : $baseDir . DIRECTORY_SEPARATOR . $destinationFolder . DIRECTORY_SEPARATOR;
-
-// Helper: Generate the metadata file path for a given folder.
-function getMetadataFilePath($folder) {
-    if (strtolower($folder) === 'root' || $folder === '') {
-        return META_DIR . "root_metadata.json";
-    }
-    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
-}
-
-// Helper: Generate a unique file name if a file with the same name exists.
-function getUniqueFileName($destDir, $fileName) {
-    $fullPath = $destDir . $fileName;
-    clearstatcache(true, $fullPath);
-    if (!file_exists($fullPath)) {
-        return $fileName;
-    }
-    $basename = pathinfo($fileName, PATHINFO_FILENAME);
-    $extension = pathinfo($fileName, PATHINFO_EXTENSION);
-    $counter = 1;
-    do {
-        $newName = $basename . " (" . $counter . ")" . ($extension ? "." . $extension : "");
-        $newFullPath = $destDir . $newName;
-        clearstatcache(true, $newFullPath);
-        $counter++;
-    } while (file_exists($destDir . $newName));
-    return $newName;
-}
-
-// Load source and destination metadata.
-$srcMetaFile = getMetadataFilePath($sourceFolder);
-$destMetaFile = getMetadataFilePath($destinationFolder);
-
-$srcMetadata = file_exists($srcMetaFile) ? json_decode(file_get_contents($srcMetaFile), true) : [];
-$destMetadata = file_exists($destMetaFile) ? json_decode(file_get_contents($destMetaFile), true) : [];
-
-$errors = [];
-
-// Define a safe file name pattern: letters, numbers, underscores, dashes, dots, parentheses, and spaces.
-$safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
-
-foreach ($files as $fileName) {
-    // Save the original name for metadata lookup.
-    $originalName = basename(trim($fileName));
-    $basename = $originalName;
-    if (!preg_match($safeFileNamePattern, $basename)) {
-        $errors[] = "$basename has an invalid name.";
-        continue;
-    }
-    
-    $srcPath = $sourceDir . $originalName;
-    $destPath = $destDir . $basename;
-    
-    clearstatcache();
-    if (!file_exists($srcPath)) {
-        $errors[] = "$originalName does not exist in source.";
-        continue;
-    }
-    
-    if (file_exists($destPath)) {
-        $uniqueName = getUniqueFileName($destDir, $basename);
-        $basename = $uniqueName; // update the file name for metadata and destination path
-        $destPath = $destDir . $uniqueName;
-    }
-    
-    if (!copy($srcPath, $destPath)) {
-        $errors[] = "Failed to copy $basename";
-        continue;
-    }
-    
-    // Update destination metadata: if there's metadata for the original file in source, add it under the new name.
-    if (isset($srcMetadata[$originalName])) {
-        $destMetadata[$basename] = $srcMetadata[$originalName];
-    }
-}
-
-if (file_put_contents($destMetaFile, json_encode($destMetadata, JSON_PRETTY_PRINT)) === false) {
-    $errors[] = "Failed to update destination metadata.";
-}
-
-if (empty($errors)) {
-    echo json_encode(["success" => "Files copied successfully"]);
-} else {
-    echo json_encode(["error" => implode("; ", $errors)]);
-}
-?>

createFolder.php

@@ -1,86 +0,0 @@
-<?php
-require 'config.php';
-header('Content-Type: application/json');
-
-// Ensure user is authenticated
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["error" => "Unauthorized"]);
-    http_response_code(401);
-    exit;
-}
-
-// Ensure the request is a POST
-if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
-    echo json_encode(['success' => false, 'error' => 'Invalid request method.']);
-    exit;
-}
-
-$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(['success' => false, 'error' => 'Invalid CSRF token.']);
-    http_response_code(403);
-    exit;
-}
-
-// Get the JSON input and decode it
-$input = json_decode(file_get_contents('php://input'), true);
-if (!isset($input['folderName'])) {
-    echo json_encode(['success' => false, 'error' => 'Folder name not provided.']);
-    exit;
-}
-
-$folderName = trim($input['folderName']);
-$parent = isset($input['parent']) ? trim($input['parent']) : "";
-
-// Basic sanitation: allow only letters, numbers, underscores, dashes, and spaces in folderName
-if (!preg_match('/^[A-Za-z0-9_\- ]+$/', $folderName)) {
-    echo json_encode(['success' => false, 'error' => 'Invalid folder name.']);
-    exit;
-}
-
-// Optionally, sanitize the parent folder if needed.
-if ($parent && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $parent)) {
-    echo json_encode(['success' => false, 'error' => 'Invalid parent folder name.']);
-    exit;
-}
-
-// Build the full folder path.
-$baseDir = rtrim(UPLOAD_DIR, '/\\');
-if ($parent && strtolower($parent) !== "root") {
-    $fullPath = $baseDir . DIRECTORY_SEPARATOR . $parent . DIRECTORY_SEPARATOR . $folderName;
-    $relativePath = $parent . "/" . $folderName;
-} else {
-    $fullPath = $baseDir . DIRECTORY_SEPARATOR . $folderName;
-    $relativePath = $folderName;
-}
-
-// Check if the folder already exists.
-if (file_exists($fullPath)) {
-    echo json_encode(['success' => false, 'error' => 'Folder already exists.']);
-    exit;
-}
-
-// Attempt to create the folder.
-if (mkdir($fullPath, 0755, true)) {
-
-    // --- Create an empty metadata file for the new folder ---
-    // Helper: Generate the metadata file path for a given folder.
-    // For "root", returns "root_metadata.json". Otherwise, replaces slashes, backslashes, and spaces with dashes and appends "_metadata.json".
-    function getMetadataFilePath($folder) {
-        if (strtolower($folder) === 'root' || $folder === '') {
-            return META_DIR . "root_metadata.json";
-        }
-        return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
-    }
-    
-    $metadataFile = getMetadataFilePath($relativePath);
-    // Create an empty associative array (i.e. empty metadata) and write to the metadata file.
-    file_put_contents($metadataFile, json_encode([], JSON_PRETTY_PRINT));
-
-    echo json_encode(['success' => true]);
-} else {
-    echo json_encode(['success' => false, 'error' => 'Failed to create folder.']);
-}
-?>

createShareLink.php

@@ -1,59 +0,0 @@
-<?php
-// createShareLink.php
-require_once 'config.php';
-
-// Get POST input.
-$input = json_decode(file_get_contents("php://input"), true);
-if (!$input) {
-    echo json_encode(["error" => "Invalid input."]);
-    exit;
-}
-
-$folder = isset($input['folder']) ? trim($input['folder']) : "";
-$file = isset($input['file']) ? basename($input['file']) : "";
-$expirationMinutes = isset($input['expirationMinutes']) ? intval($input['expirationMinutes']) : 60;
-$password = isset($input['password']) ? $input['password'] : "";
-
-// Validate folder using regex.
-if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
-    echo json_encode(["error" => "Invalid folder name."]);
-    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.
-
-// Calculate expiration (Unix timestamp).
-$expires = time() + ($expirationMinutes * 60);
-
-// Hash password if provided.
-$hashedPassword = !empty($password) ? password_hash($password, PASSWORD_DEFAULT) : "";
-
-// File to store share links.
-$shareFile = META_DIR . "share_links.json";
-$shareLinks = [];
-if (file_exists($shareFile)) {
-    $data = file_get_contents($shareFile);
-    $shareLinks = json_decode($data, true);
-    if (!is_array($shareLinks)) {
-        $shareLinks = [];
-    }
-}
-
-// Add record.
-$shareLinks[$token] = [
-    "folder" => $folder,
-    "file" => $file,
-    "expires" => $expires,
-    "password" => $hashedPassword
-];
-
-// Save the share links.
-if (file_put_contents($shareFile, json_encode($shareLinks, JSON_PRETTY_PRINT))) {
-    echo json_encode(["token" => $token, "expires" => $expires]);
-} else {
-    echo json_encode(["error" => "Could not save share link."]);
-}
-?>

custom-php.ini

@@ -0,0 +1,52 @@
+; custom-php.ini
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+; OPcache Settings
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+opcache.enable=1
+opcache.enable_cli=0
+; Allocate 128MB of memory for opcode caching
+opcache.memory_consumption=128
+; Increase the maximum number of accelerated files (adjust if you have a large codebase)
+opcache.max_accelerated_files=4000
+; Refresh file timestamp every 60 seconds to avoid too many disk reads
+opcache.revalidate_freq=60
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+; Memory and Execution Time Limits
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+; Increase memory limit to 512M for large file processing or image processing operations
+memory_limit=512M
+; Set execution time limits to accommodate long-running uploads/processes
+max_execution_time=300
+max_input_time=300
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+; Realpath Cache Settings
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+realpath_cache_size=4096k
+realpath_cache_ttl=600
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+; File Upload Settings
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+; Allow a maximum of 20 files per request
+max_file_uploads=20
+; Ensure the temporary directory is set (should exist and be writable)
+upload_tmp_dir=/tmp
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+; Session Configuration (if applicable)
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+session.gc_maxlifetime=1440
+session.gc_probability=1
+session.gc_divisor=100
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+; Error Handling / Logging
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+; Do not display errors publicly in production
+display_errors=Off
+; Log errors to a dedicated file
+log_errors=On
+error_log=/var/log/php8.3-error.log

deleteFiles.php

@@ -1,147 +0,0 @@
-<?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']) {
-    echo json_encode(["error" => "Invalid CSRF token"]);
-    http_response_code(403);
-    exit;
-}
-
-// Ensure user is authenticated
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["error" => "Unauthorized"]);
-    http_response_code(401);
-    exit;
-}
-
-// --- Setup Trash Folder & Metadata ---
-$trashDir = rtrim(TRASH_DIR, '/\\') . DIRECTORY_SEPARATOR;
-if (!file_exists($trashDir)) {
-    mkdir($trashDir, 0755, true);
-}
-$trashMetadataFile = $trashDir . "trash.json";
-$trashData = [];
-if (file_exists($trashMetadataFile)) {
-    $json = file_get_contents($trashMetadataFile);
-    $trashData = json_decode($json, true);
-    if (!is_array($trashData)) {
-        $trashData = [];
-    }
-}
-
-// Helper: Generate the metadata file path for a given folder.
-function getMetadataFilePath($folder) {
-    if (strtolower($folder) === 'root' || $folder === '') {
-        return META_DIR . "root_metadata.json";
-    }
-    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
-}
-
-// Read request body
-$data = json_decode(file_get_contents("php://input"), true);
-
-// Validate request
-if (!isset($data['files']) || !is_array($data['files'])) {
-    echo json_encode(["error" => "No file names provided"]);
-    exit;
-}
-
-// Determine folder – default to 'root'
-$folder = isset($data['folder']) ? trim($data['folder']) : 'root';
-
-// Validate folder: allow letters, numbers, underscores, dashes, spaces, and forward slashes
-if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
-    echo json_encode(["error" => "Invalid folder name."]);
-    exit;
-}
-$folder = trim($folder, "/\\ ");
-
-// Build the upload directory.
-if ($folder !== 'root') {
-    $uploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
-} else {
-    $uploadDir = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR;
-}
-
-// Load folder metadata (if exists) to retrieve uploader and upload date.
-$metadataFile = getMetadataFilePath($folder);
-$folderMetadata = [];
-if (file_exists($metadataFile)) {
-    $folderMetadata = json_decode(file_get_contents($metadataFile), true);
-    if (!is_array($folderMetadata)) {
-        $folderMetadata = [];
-    }
-}
-
-$movedFiles = [];
-$errors = [];
-
-// Define a safe file name pattern: allow letters, numbers, underscores, dashes, dots, and spaces.
-$safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
-
-foreach ($data['files'] as $fileName) {
-    $basename = basename(trim($fileName));
-    
-    // Validate the file name.
-    if (!preg_match($safeFileNamePattern, $basename)) {
-        $errors[] = "$basename has an invalid name.";
-        continue;
-    }
-    
-    $filePath = $uploadDir . $basename;
-    
-    if (file_exists($filePath)) {
-        // Append a timestamp to the file name in trash to avoid collisions.
-        $timestamp = time();
-        $trashFileName = $basename . "_" . $timestamp;
-        if (rename($filePath, $trashDir . $trashFileName)) {
-            $movedFiles[] = $basename;
-            // Record trash metadata for possible restoration.
-            $trashData[] = [
-                'type'           => 'file',
-                'originalFolder' => $uploadDir,  // You could also store a relative path here.
-                'originalName'   => $basename,
-                'trashName'      => $trashFileName,
-                'trashedAt'      => $timestamp,
-                // Enrich trash record with uploader and upload date from folder metadata (if available)
-                'uploaded'       => isset($folderMetadata[$basename]['uploaded']) ? $folderMetadata[$basename]['uploaded'] : "Unknown",
-                'uploader'       => isset($folderMetadata[$basename]['uploader']) ? $folderMetadata[$basename]['uploader'] : "Unknown",
-                // NEW: Record the username of the user who deleted the file.
-                'deletedBy'      => isset($_SESSION['username']) ? $_SESSION['username'] : "Unknown"
-            ];
-        } else {
-            $errors[] = "Failed to move $basename to Trash.";
-        }
-    } else {
-        // Consider file already deleted.
-        $movedFiles[] = $basename;
-    }
-}
-
-// Write back the updated trash metadata.
-file_put_contents($trashMetadataFile, json_encode($trashData, JSON_PRETTY_PRINT));
-
-// Update folder-specific metadata file by removing deleted files.
-if (file_exists($metadataFile)) {
-    $metadata = json_decode(file_get_contents($metadataFile), true);
-    if (is_array($metadata)) {
-        foreach ($movedFiles as $delFile) {
-            if (isset($metadata[$delFile])) {
-                unset($metadata[$delFile]);
-            }
-        }
-        file_put_contents($metadataFile, json_encode($metadata, JSON_PRETTY_PRINT));
-    }
-}
-
-if (empty($errors)) {
-    echo json_encode(["success" => "Files moved to Trash: " . implode(", ", $movedFiles)]);
-} else {
-    echo json_encode(["error" => implode("; ", $errors) . ". Files moved to Trash: " . implode(", ", $movedFiles)]);
-}
-?>

deleteFolder.php

@@ -1,89 +0,0 @@
-<?php
-require 'config.php';
-header('Content-Type: application/json');
-
-// Ensure user is authenticated
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["error" => "Unauthorized"]);
-    http_response_code(401);
-    exit;
-}
-
-// Ensure the request is a POST
-if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
-    echo json_encode(['success' => false, 'error' => 'Invalid request method.']);
-    exit;
-}
-
-$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(['success' => false, 'error' => 'Invalid CSRF token.']);
-    http_response_code(403);
-    exit;
-}
-
-// Get the JSON input and decode it
-$input = json_decode(file_get_contents('php://input'), true);
-if (!isset($input['folder'])) {
-    echo json_encode(['success' => false, 'error' => 'Folder name not provided.']);
-    exit;
-}
-
-$folderName = trim($input['folder']);
-
-// Prevent deletion of root.
-if ($folderName === 'root') {
-    echo json_encode(['success' => false, 'error' => 'Cannot delete root folder.']);
-    exit;
-}
-
-// Allow letters, numbers, underscores, dashes, spaces, and forward slashes.
-if (!preg_match('/^[A-Za-z0-9_\- \/]+$/', $folderName)) {
-    echo json_encode(['success' => false, 'error' => 'Invalid folder name.']);
-    exit;
-}
-
-// Build the folder path (supports subfolder paths like "FolderTest/FolderTestSub")
-$folderPath = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folderName;
-
-// Check if the folder exists and is a directory
-if (!file_exists($folderPath) || !is_dir($folderPath)) {
-    echo json_encode(['success' => false, 'error' => 'Folder does not exist.']);
-    exit;
-}
-
-// Prevent deletion if the folder is not empty
-if (count(scandir($folderPath)) > 2) {
-    echo json_encode(['success' => false, 'error' => 'Folder is not empty.']);
-    exit;
-}
-
-/**
- * Helper: Generate the metadata file path for a given folder.
- * For "root", returns "root_metadata.json". Otherwise, it replaces
- * slashes, backslashes, and spaces with dashes and appends "_metadata.json".
- *
- * @param string $folder The folder's relative path.
- * @return string The full path to the folder's metadata file.
- */
-function getMetadataFilePath($folder) {
-    if (strtolower($folder) === 'root' || $folder === '') {
-        return META_DIR . "root_metadata.json";
-    }
-    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
-}
-
-// Attempt to delete the folder.
-if (rmdir($folderPath)) {
-    // Remove corresponding metadata file if it exists.
-    $metadataFile = getMetadataFilePath($folderName);
-    if (file_exists($metadataFile)) {
-        unlink($metadataFile);
-    }
-    echo json_encode(['success' => true]);
-} else {
-    echo json_encode(['success' => false, 'error' => 'Failed to delete folder.']);
-}
-?>

deleteTrashFiles.php

@@ -1,105 +0,0 @@
-<?php
-session_start();
-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']) {
-    echo json_encode(["error" => "Invalid CSRF token"]);
-    http_response_code(403);
-    exit;
-}
-
-// Ensure user is authenticated
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["error" => "Unauthorized"]);
-    http_response_code(401);
-    exit;
-}
-
-// --- Setup Trash Folder & Metadata ---
-$trashDir = rtrim(TRASH_DIR, '/\\') . DIRECTORY_SEPARATOR;
-if (!file_exists($trashDir)) {
-    mkdir($trashDir, 0755, true);
-}
-$trashMetadataFile = $trashDir . "trash.json";
-
-// Load trash metadata into an associative array keyed by trashName.
-$trashData = [];
-if (file_exists($trashMetadataFile)) {
-    $json = file_get_contents($trashMetadataFile);
-    $tempData = json_decode($json, true);
-    if (is_array($tempData)) {
-        foreach ($tempData as $item) {
-            if (isset($item['trashName'])) {
-                $trashData[$item['trashName']] = $item;
-            }
-        }
-    }
-}
-
-// Read request body.
-$data = json_decode(file_get_contents("php://input"), true);
-if (!$data) {
-    echo json_encode(["error" => "Invalid input"]);
-    exit;
-}
-
-// Determine deletion mode: if "deleteAll" is true, delete all trash items; otherwise, use provided "files" array.
-$filesToDelete = [];
-if (isset($data['deleteAll']) && $data['deleteAll'] === true) {
-    $filesToDelete = array_keys($trashData);
-} elseif (isset($data['files']) && is_array($data['files'])) {
-    $filesToDelete = $data['files'];
-} else {
-    echo json_encode(["error" => "No trash file identifiers provided"]);
-    exit;
-}
-
-$deletedFiles = [];
-$errors = [];
-
-// Define a safe file name pattern.
-$safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
-
-foreach ($filesToDelete as $trashName) {
-    $trashName = trim($trashName);
-    if (!preg_match($safeFileNamePattern, $trashName)) {
-        $errors[] = "$trashName has an invalid format.";
-        continue;
-    }
-    
-    if (!isset($trashData[$trashName])) {
-        $errors[] = "Trash item $trashName not found.";
-        continue;
-    }
-    
-    $filePath = $trashDir . $trashName;
-    
-    if (file_exists($filePath)) {
-        if (unlink($filePath)) {
-            $deletedFiles[] = $trashName;
-            unset($trashData[$trashName]);
-        } else {
-            $errors[] = "Failed to delete $trashName.";
-        }
-    } else {
-        // If the file doesn't exist, remove its metadata entry.
-        unset($trashData[$trashName]);
-        $deletedFiles[] = $trashName;
-    }
-}
-
-// Write the updated trash metadata back (as an indexed array).
-file_put_contents($trashMetadataFile, json_encode(array_values($trashData), JSON_PRETTY_PRINT));
-
-if (empty($errors)) {
-    echo json_encode(["success" => "Trash items deleted: " . implode(", ", $deletedFiles)]);
-} else {
-    echo json_encode(["error" => implode("; ", $errors) . ". Trash items deleted: " . implode(", ", $deletedFiles)]);
-}
-exit;
-?>

download.php

@@ -1,59 +0,0 @@
-<?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);
-    header('Content-Type: application/json');
-    echo json_encode(["error" => "Unauthorized"]);
-    exit;
-}
-
-// Get file parameters from the GET request.
-$file = isset($_GET['file']) ? basename($_GET['file']) : '';
-$folder = isset($_GET['folder']) ? trim($_GET['folder']) : 'root';
-
-// Validate file name (allowing letters, numbers, underscores, dashes, dots, and parentheses)
-if (!preg_match('/^[A-Za-z0-9_\-\.\(\) ]+$/', $file)) {
-    http_response_code(400);
-    echo json_encode(["error" => "Invalid file name."]);
-    exit;
-}
-
-// Determine the directory.
-if ($folder !== 'root') {
-    $directory = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder . DIRECTORY_SEPARATOR;
-} else {
-    $directory = UPLOAD_DIR;
-}
-
-$filePath = $directory . $file;
-
-if (!file_exists($filePath)) {
-    http_response_code(404);
-    echo json_encode(["error" => "File not found."]);
-    exit;
-}
-
-// Serve the file.
-$mimeType = mime_content_type($filePath);
-header("Content-Type: " . $mimeType);
-
-// For images, serve inline; for other types, force download.
-$ext = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));
-if (in_array($ext, ['jpg','jpeg','png','gif','bmp','webp','svg','ico'])) {
-    header('Content-Disposition: inline; filename="' . basename($filePath) . '"');
-} else {
-    header('Content-Disposition: attachment; filename="' . basename($filePath) . '"');
-}
-header('Content-Length: ' . filesize($filePath));
-
-// Disable caching.
-header('Cache-Control: no-store, no-cache, must-revalidate');
-header('Pragma: no-cache');
-
-readfile($filePath);
-exit;
-?>

downloadZip.php

@@ -1,133 +0,0 @@
-<?php
-require_once 'config.php';
-
-// --- 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']) {
-    echo json_encode(["error" => "Invalid CSRF token"]);
-    http_response_code(403);
-    exit;
-}
-
-// Check if the user is authenticated.
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    http_response_code(401);
-    header('Content-Type: application/json');
-    echo json_encode(["error" => "Unauthorized"]);
-    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);
-    header('Content-Type: application/json');
-    echo json_encode(["error" => "Invalid input."]);
-    exit;
-}
-
-$folder = $data['folder'];
-$files = $data['files'];
-
-// Validate folder name to allow subfolders.
-// "root" is allowed; otherwise, split by "/" and validate each segment.
-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);
-            header('Content-Type: application/json');
-            echo json_encode(["error" => "Invalid folder name."]);
-            exit;
-        }
-    }
-    $relativePath = implode(DIRECTORY_SEPARATOR, $parts) . DIRECTORY_SEPARATOR;
-} else {
-    $relativePath = "";
-}
-
-// Use the absolute UPLOAD_DIR from config.php.
-$baseDir = realpath(UPLOAD_DIR);
-if ($baseDir === false) {
-    http_response_code(500);
-    header('Content-Type: application/json');
-    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);
-    header('Content-Type: application/json');
-    echo json_encode(["error" => "Folder not found."]);
-    exit;
-}
-
-if (empty($files)) {
-    http_response_code(400);
-    header('Content-Type: application/json');
-    echo json_encode(["error" => "No files specified."]);
-    exit;
-}
-
-foreach ($files as $fileName) {
-    if (!preg_match('/^[A-Za-z0-9_\-\.\(\) ]+$/', $fileName)) {
-        http_response_code(400);
-        header('Content-Type: application/json');
-        echo json_encode(["error" => "Invalid file name: " . $fileName]);
-        exit;
-    }
-}
-
-// Build an array of files to include in the ZIP.
-$filesToZip = [];
-foreach ($files as $fileName) {
-    $filePath = $folderPathReal . DIRECTORY_SEPARATOR . $fileName;
-    if (file_exists($filePath)) {
-        $filesToZip[] = $filePath;
-    }
-}
-
-if (empty($filesToZip)) {
-    http_response_code(400);
-    header('Content-Type: application/json');
-    echo json_encode(["error" => "No valid files found to zip."]);
-    exit;
-}
-
-// Create a temporary file for the ZIP archive.
-$tempZip = tempnam(sys_get_temp_dir(), 'zip');
-unlink($tempZip); // Remove the temporary file so ZipArchive can create a new one.
-$tempZip .= '.zip';
-
-$zip = new ZipArchive();
-if ($zip->open($tempZip, ZipArchive::CREATE) !== TRUE) {
-    http_response_code(500);
-    header('Content-Type: application/json');
-    echo json_encode(["error" => "Could not create zip archive."]);
-    exit;
-}
-
-// Add each file to the archive using its base name.
-foreach ($filesToZip as $filePath) {
-    $zip->addFile($filePath, basename($filePath));
-}
-$zip->close();
-
-// Send headers to force download and disable caching.
-header('Content-Type: application/zip');
-header('Content-Disposition: attachment; filename="files.zip"');
-header('Content-Length: ' . filesize($tempZip));
-header('Cache-Control: no-store, no-cache, must-revalidate');
-header('Pragma: no-cache');
-
-// Output the file and delete it afterward.
-readfile($tempZip);
-unlink($tempZip);
-exit;
-?>

folderManager.js

@@ -1,487 +0,0 @@
-// folderManager.js
-
-import { loadFileList } from './fileManager.js';
-import { showToast, escapeHTML } from './domUtils.js';
-
-// ----------------------
-// Helper Functions (Data/State)
-// ----------------------
-
-// Formats a folder name for display (e.g. adding indentations).
-export function formatFolderName(folder) {
-  if (typeof folder !== "string") return "";
-  if (folder.indexOf("/") !== -1) {
-    let parts = folder.split("/");
-    let indent = "";
-    for (let i = 1; i < parts.length; i++) {
-      indent += "\u00A0\u00A0\u00A0\u00A0"; // 4 non-breaking spaces per level
-    }
-    return indent + parts[parts.length - 1];
-  } else {
-    return folder;
-  }
-}
-
-// Build a tree structure from a flat array of folder paths.
-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;
-    parts.forEach(part => {
-      if (!current[part]) {
-        current[part] = {};
-      }
-      current = current[part];
-    });
-  });
-  return tree;
-}
-
-// ----------------------
-// Folder Tree State (Save/Load)
-// ----------------------
-function loadFolderTreeState() {
-  const state = localStorage.getItem("folderTreeState");
-  return state ? JSON.parse(state) : {};
-}
-
-function saveFolderTreeState(state) {
-  localStorage.setItem("folderTreeState", JSON.stringify(state));
-}
-
-// Helper for getting the parent folder.
-function getParentFolder(folder) {
-  if (folder === "root") return "root";
-  const lastSlash = folder.lastIndexOf("/");
-  return lastSlash === -1 ? "root" : folder.substring(0, lastSlash);
-}
-
-// ----------------------
-// DOM Building Functions
-// ----------------------
-
-// Recursively builds HTML for the folder tree as nested <ul> elements.
-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;
-    }
-    
-    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") ? "[+]" : "[-]";
-      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);
-    }
-    html += `</li>`;
-  }
-  html += `</ul>`;
-  return html;
-}
-
-// Expands the folder tree along a given path.
-function expandTreePath(path) {
-  const parts = path.split("/");
-  let cumulative = "";
-  parts.forEach((part, index) => {
-    cumulative = index === 0 ? part : cumulative + "/" + part;
-    const option = document.querySelector(`.folder-option[data-folder="${cumulative}"]`);
-    if (option) {
-      const li = option.parentNode;
-      const nestedUl = li.querySelector("ul");
-      if (nestedUl && (nestedUl.classList.contains("collapsed") || !nestedUl.classList.contains("expanded"))) {
-        nestedUl.classList.remove("collapsed");
-        nestedUl.classList.add("expanded");
-        const toggle = li.querySelector(".folder-toggle");
-        if (toggle) {
-          toggle.textContent = "[-]";
-          let state = loadFolderTreeState();
-          state[cumulative] = "block";
-          saveFolderTreeState(state);
-        }
-      }
-    }
-  });
-}
-
-// ----------------------
-// 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.
-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");
-  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;
-  }
-  // 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", {
-    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:", error);
-      showToast("Error moving files.");
-    });
-}
-
-// ----------------------
-// Main Folder Tree Rendering and Event Binding
-// ----------------------
-export async function loadFolderTree(selectedFolder) {
-  try {
-    const response = await fetch('getFolderList.php');
-    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);
-    }
-    // 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;
-    }
-
-    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 {
-      const tree = buildFolderTree(folders);
-      html += renderFolderTree(tree, "", "block");
-    }
-    container.innerHTML = html;
-
-    // Attach drag-and-drop event listeners to folder nodes.
-    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 + ")";
-    loadFileList(window.currentFolder);
-
-    // Expand tree to current folder.
-    const folderState = loadFolderTreeState();
-    if (window.currentFolder !== "root" && folderState[window.currentFolder] !== "none") {
-      expandTreePath(window.currentFolder);
-    }
-
-    // Highlight current folder.
-    const selectedEl = container.querySelector(`.folder-option[data-folder="${window.currentFolder}"]`);
-    if (selectedEl) {
-      selectedEl.classList.add("selected");
-    }
-
-    // Event binding for folder selection.
-    container.querySelectorAll(".folder-option").forEach(el => {
-      el.addEventListener("click", function (e) {
-        e.stopPropagation();
-        container.querySelectorAll(".folder-option").forEach(item => item.classList.remove("selected"));
-        this.classList.add("selected");
-        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 + ")";
-        loadFileList(selected);
-      });
-    });
-
-    // Event binding for toggling folders.
-    const rootToggle = container.querySelector("#rootRow .folder-toggle");
-    if (rootToggle) {
-      rootToggle.addEventListener("click", function (e) {
-        e.stopPropagation();
-        const nestedUl = container.querySelector("#rootRow + ul");
-        if (nestedUl) {
-          let state = loadFolderTreeState();
-          if (nestedUl.classList.contains("collapsed") || !nestedUl.classList.contains("expanded")) {
-            nestedUl.classList.remove("collapsed");
-            nestedUl.classList.add("expanded");
-            this.textContent = "[-]";
-            state["root"] = "block";
-          } else {
-            nestedUl.classList.remove("expanded");
-            nestedUl.classList.add("collapsed");
-            this.textContent = "[+]";
-            state["root"] = "none";
-          }
-          saveFolderTreeState(state);
-        }
-      });
-    }
-
-    container.querySelectorAll(".folder-toggle").forEach(toggle => {
-      toggle.addEventListener("click", function (e) {
-        e.stopPropagation();
-        const siblingUl = this.parentNode.querySelector("ul");
-        const folderPath = this.getAttribute("data-folder");
-        let state = loadFolderTreeState();
-        if (siblingUl) {
-          if (siblingUl.classList.contains("collapsed") || !siblingUl.classList.contains("expanded")) {
-            siblingUl.classList.remove("collapsed");
-            siblingUl.classList.add("expanded");
-            this.textContent = "[-]";
-            state[folderPath] = "block";
-          } else {
-            siblingUl.classList.remove("expanded");
-            siblingUl.classList.add("collapsed");
-            this.textContent = "[+]";
-            state[folderPath] = "none";
-          }
-          saveFolderTreeState(state);
-        }
-      });
-    });
-
-  } catch (error) {
-    console.error("Error loading folder tree:", error);
-  }
-}
-
-// For backward compatibility.
-export function loadFolderList(selectedFolder) {
-  loadFolderTree(selectedFolder);
-}
-
-// ----------------------
-// Folder Management (Rename, Delete, Create)
-// ----------------------
-
-document.getElementById("renameFolderBtn").addEventListener("click", openRenameFolderModal);
-document.getElementById("deleteFolderBtn").addEventListener("click", openDeleteFolderModal);
-
-function openRenameFolderModal() {
-  const selectedFolder = window.currentFolder || "root";
-  if (!selectedFolder || selectedFolder === "root") {
-    showToast("Please select a valid folder to rename.");
-    return;
-  }
-  const parts = selectedFolder.split("/");
-  document.getElementById("newRenameFolderName").value = parts[parts.length - 1];
-  document.getElementById("renameFolderModal").style.display = "block";
-}
-
-document.getElementById("cancelRenameFolder").addEventListener("click", function () {
-  document.getElementById("renameFolderModal").style.display = "none";
-  document.getElementById("newRenameFolderName").value = "";
-});
-
-document.getElementById("submitRenameFolder").addEventListener("click", function (event) {
-  event.preventDefault();
-  const selectedFolder = window.currentFolder || "root";
-  const newNameBasename = document.getElementById("newRenameFolderName").value.trim();
-  if (!newNameBasename || newNameBasename === selectedFolder.split("/").pop()) {
-    showToast("Please enter a valid new folder name.");
-    return;
-  }
-  const parentPath = getParentFolder(selectedFolder);
-  const newFolderFull = parentPath === "root" ? newNameBasename : parentPath + "/" + newNameBasename;
-  const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-  if (!csrfToken) {
-    showToast("CSRF token not loaded yet! Please try again.");
-    return;
-  }
-  fetch("renameFolder.php", {
-    method: "POST",
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRF-Token": csrfToken
-    },
-    body: JSON.stringify({ oldFolder: window.currentFolder, newFolder: newFolderFull })
-  })
-    .then(response => response.json())
-    .then(data => {
-      if (data.success) {
-        showToast("Folder renamed successfully!");
-        window.currentFolder = newFolderFull;
-        localStorage.setItem("lastOpenedFolder", newFolderFull);
-        loadFolderList(newFolderFull);
-      } else {
-        showToast("Error: " + (data.error || "Could not rename folder"));
-      }
-    })
-    .catch(error => console.error("Error renaming folder:", error))
-    .finally(() => {
-      document.getElementById("renameFolderModal").style.display = "none";
-      document.getElementById("newRenameFolderName").value = "";
-    });
-});
-
-function openDeleteFolderModal() {
-  const selectedFolder = window.currentFolder || "root";
-  if (!selectedFolder || selectedFolder === "root") {
-    showToast("Please select a valid folder to delete.");
-    return;
-  }
-  document.getElementById("deleteFolderMessage").textContent =
-    "Are you sure you want to delete folder " + selectedFolder + "?";
-  document.getElementById("deleteFolderModal").style.display = "block";
-}
-
-document.getElementById("cancelDeleteFolder").addEventListener("click", function () {
-  document.getElementById("deleteFolderModal").style.display = "none";
-});
-
-document.getElementById("confirmDeleteFolder").addEventListener("click", function () {
-  const selectedFolder = window.currentFolder || "root";
-  const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-  fetch("deleteFolder.php", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRF-Token": csrfToken
-    },
-    body: JSON.stringify({ folder: selectedFolder })
-  })
-    .then(response => response.json())
-    .then(data => {
-      if (data.success) {
-        showToast("Folder deleted successfully!");
-        window.currentFolder = getParentFolder(selectedFolder);
-        localStorage.setItem("lastOpenedFolder", window.currentFolder);
-        loadFolderList(window.currentFolder);
-      } else {
-        showToast("Error: " + (data.error || "Could not delete folder"));
-      }
-    })
-    .catch(error => console.error("Error deleting folder:", error))
-    .finally(() => {
-      document.getElementById("deleteFolderModal").style.display = "none";
-    });
-});
-
-document.getElementById("createFolderBtn").addEventListener("click", function () {
-  document.getElementById("createFolderModal").style.display = "block";
-});
-
-document.getElementById("cancelCreateFolder").addEventListener("click", function () {
-  document.getElementById("createFolderModal").style.display = "none";
-  document.getElementById("newFolderName").value = "";
-});
-
-document.getElementById("submitCreateFolder").addEventListener("click", function () {
-  const folderInput = document.getElementById("newFolderName").value.trim();
-  if (!folderInput) {
-    showToast("Please enter a folder name.");
-    return;
-  }
-  let selectedFolder = window.currentFolder || "root";
-  let fullFolderName = folderInput;
-  if (selectedFolder && selectedFolder !== "root") {
-    fullFolderName = selectedFolder + "/" + folderInput;
-  }
-  const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-  fetch("createFolder.php", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRF-Token": csrfToken
-    },
-    body: JSON.stringify({
-      folderName: folderInput,
-      parent: selectedFolder === "root" ? "" : selectedFolder
-    })
-  })
-    .then(response => response.json())
-    .then(data => {
-      if (data.success) {
-        showToast("Folder created successfully!");
-        window.currentFolder = fullFolderName;
-        localStorage.setItem("lastOpenedFolder", fullFolderName);
-        loadFolderList(fullFolderName);
-      } else {
-        showToast("Error: " + (data.error || "Could not create folder"));
-      }
-      document.getElementById("createFolderModal").style.display = "none";
-      document.getElementById("newFolderName").value = "";
-    })
-    .catch(error => {
-      console.error("Error creating folder:", error);
-      document.getElementById("createFolderModal").style.display = "none";
-    });
-});

getFileList.php

@@ -1,101 +0,0 @@
-<?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');
-
-// Ensure user is authenticated
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["error" => "Unauthorized"]);
-    http_response_code(401);
-    exit;
-}
-
-$folder = isset($_GET['folder']) ? trim($_GET['folder']) : 'root';
-// Allow only safe characters in the folder parameter (letters, numbers, underscores, dashes, spaces, and forward slashes).
-if ($folder !== 'root' && !preg_match('/^[A-Za-z0-9_\- \/]+$/', $folder)) {
-    echo json_encode(["error" => "Invalid folder name."]);
-    exit;
-}
-
-// Determine the directory based on the folder parameter.
-if ($folder !== 'root') {
-    $directory = rtrim(UPLOAD_DIR, '/\\') . DIRECTORY_SEPARATOR . $folder;
-} else {
-    $directory = UPLOAD_DIR;
-}
-
-/**
- * Helper: Generate the metadata file path for a given folder.
- * For "root", returns "root_metadata.json". Otherwise, replaces slashes,
- * backslashes, and spaces with dashes and appends "_metadata.json".
- *
- * @param string $folder The folder's relative path.
- * @return string The full path to the folder's metadata file.
- */
-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 (!is_dir($directory)) {
-    echo json_encode(["error" => "Directory not found."]);
-    exit;
-}
-
-$files = array_values(array_diff(scandir($directory), array('.', '..')));
-$fileList = [];
-
-// Define a safe file name pattern: letters, numbers, underscores, dashes, dots, parentheses, and spaces.
-$safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
-
-foreach ($files as $file) {
-    // Skip hidden files (those that begin with a dot)
-    if (substr($file, 0, 1) === '.') {
-        continue;
-    }
-    
-    $filePath = $directory . DIRECTORY_SEPARATOR . $file;
-    // Only include files (skip directories)
-    if (!is_file($filePath)) continue;
-    
-    // Optionally, skip files with unsafe names.
-    if (!preg_match($safeFileNamePattern, $file)) {
-        continue;
-    }
-    
-    // Since metadata is stored per folder, the key is simply the file name.
-    $metaKey = $file;
-
-    $fileDateModified = filemtime($filePath) ? date(DATE_TIME_FORMAT, filemtime($filePath)) : "Unknown";
-    $fileUploadedDate = isset($metadata[$metaKey]["uploaded"]) ? $metadata[$metaKey]["uploaded"] : "Unknown";
-    $fileUploader = isset($metadata[$metaKey]["uploader"]) ? $metadata[$metaKey]["uploader"] : "Unknown";
-
-    $fileSizeBytes = filesize($filePath);
-    if ($fileSizeBytes >= 1073741824) {
-        $fileSizeFormatted = sprintf("%.1f GB", $fileSizeBytes / 1073741824);
-    } elseif ($fileSizeBytes >= 1048576) {
-        $fileSizeFormatted = sprintf("%.1f MB", $fileSizeBytes / 1048576);
-    } elseif ($fileSizeBytes >= 1024) {
-        $fileSizeFormatted = sprintf("%.1f KB", $fileSizeBytes / 1024);
-    } else {
-        $fileSizeFormatted = sprintf("%s bytes", number_format($fileSizeBytes));
-    }
-
-    $fileList[] = [
-        'name' => $file,
-        'modified' => $fileDateModified,
-        'uploaded' => $fileUploadedDate,
-        'size' => $fileSizeFormatted,
-        'uploader' => $fileUploader
-    ];
-}
-
-echo json_encode(["files" => $fileList]);
-?>

getFolderList.php

@@ -1,97 +0,0 @@
-<?php
-require 'config.php';
-header('Content-Type: application/json');
-
-// Ensure user is authenticated
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["error" => "Unauthorized"]);
-    http_response_code(401);
-    exit;
-}
-
-/**
- * Recursively scan a directory for subfolders.
- *
- * @param string $dir The full path to the directory.
- * @param string $relative The relative path from the base upload directory.
- * @return array An array of folder paths (relative to the base).
- */
-function getSubfolders($dir, $relative = '') {
-    $folders = [];
-    $items = scandir($dir);
-    // Allow letters, numbers, underscores, dashes, and spaces in folder names.
-    $safeFolderNamePattern = '/^[A-Za-z0-9_\- ]+$/';
-    foreach ($items as $item) {
-        if ($item === '.' || $item === '..') continue;
-        if (!preg_match($safeFolderNamePattern, $item)) {
-            continue;
-        }
-        $path = $dir . DIRECTORY_SEPARATOR . $item;
-        if (is_dir($path)) {
-            // Build the relative path.
-            $folderPath = ($relative ? $relative . '/' : '') . $item;
-            $folders[] = $folderPath;
-            // Recursively get subfolders.
-            $subFolders = getSubfolders($path, $folderPath);
-            $folders = array_merge($folders, $subFolders);
-        }
-    }
-    return $folders;
-}
-
-/**
- * Helper: Generate the metadata file path for a given folder.
- * For "root", it returns "root_metadata.json"; otherwise, it replaces
- * slashes, backslashes, and spaces with dashes and appends "_metadata.json".
- *
- * @param string $folder The folder's relative path.
- * @return string The full path to the folder's metadata file.
- */
-function getMetadataFilePath($folder) {
-    if (strtolower($folder) === 'root' || $folder === '') {
-        return META_DIR . "root_metadata.json";
-    }
-    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
-}
-
-$baseDir = rtrim(UPLOAD_DIR, '/\\');
-
-// Build an array to hold folder information.
-$folderInfoList = [];
-
-// Include "root" as a folder.
-$rootMetaFile = getMetadataFilePath('root');
-$rootFileCount = 0;
-if (file_exists($rootMetaFile)) {
-    $rootMetadata = json_decode(file_get_contents($rootMetaFile), true);
-    $rootFileCount = is_array($rootMetadata) ? count($rootMetadata) : 0;
-}
-$folderInfoList[] = [
-    "folder" => "root",
-    "fileCount" => $rootFileCount,
-    "metadataFile" => basename($rootMetaFile)
-];
-
-// Scan for subfolders.
-$subfolders = [];
-if (is_dir($baseDir)) {
-    $subfolders = getSubfolders($baseDir);
-}
-
-// For each subfolder, load its metadata and record file count.
-foreach ($subfolders as $folder) {
-    $metaFile = getMetadataFilePath($folder);
-    $fileCount = 0;
-    if (file_exists($metaFile)) {
-        $metadata = json_decode(file_get_contents($metaFile), true);
-        $fileCount = is_array($metadata) ? count($metadata) : 0;
-    }
-    $folderInfoList[] = [
-        "folder" => $folder,
-        "fileCount" => $fileCount,
-        "metadataFile" => basename($metaFile)
-    ];
-}
-
-echo json_encode($folderInfoList);
-?>

getTrashItems.php

@@ -1,68 +0,0 @@
-<?php
-require_once 'config.php';
-header('Content-Type: application/json');
-
-// Ensure user is authenticated.
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["error" => "Unauthorized"]);
-    http_response_code(401);
-    exit;
-}
-
-// Define the trash directory and trash metadata file.
-$trashDir = rtrim(TRASH_DIR, '/\\') . DIRECTORY_SEPARATOR;
-$trashMetadataFile = $trashDir . "trash.json";
-
-// Helper: Generate the metadata file path for a given folder.
-// For "root", returns "root_metadata.json". Otherwise, replaces slashes, backslashes, and spaces with dashes and appends "_metadata.json".
-function getMetadataFilePath($folder) {
-    if (strtolower($folder) === 'root' || $folder === '') {
-        return META_DIR . "root_metadata.json";
-    }
-    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
-}
-
-// Read the trash metadata.
-$trashItems = [];
-if (file_exists($trashMetadataFile)) {
-    $json = file_get_contents($trashMetadataFile);
-    $trashItems = json_decode($json, true);
-    if (!is_array($trashItems)) {
-        $trashItems = [];
-    }
-}
-
-// Enrich each trash record.
-foreach ($trashItems as &$item) {
-    // Ensure deletedBy is set and not empty.
-    if (empty($item['deletedBy'])) {
-        $item['deletedBy'] = "Unknown";
-    }
-    // Enrich with uploader and uploaded date if not already present.
-    if (empty($item['uploaded']) || empty($item['uploader'])) {
-        if (isset($item['originalFolder']) && isset($item['originalName'])) {
-            $metadataFile = getMetadataFilePath($item['originalFolder']);
-            if (file_exists($metadataFile)) {
-                $metadata = json_decode(file_get_contents($metadataFile), true);
-                if (is_array($metadata) && isset($metadata[$item['originalName']])) {
-                    $item['uploaded'] = !empty($metadata[$item['originalName']]['uploaded']) ? $metadata[$item['originalName']]['uploaded'] : "Unknown";
-                    $item['uploader'] = !empty($metadata[$item['originalName']]['uploader']) ? $metadata[$item['originalName']]['uploader'] : "Unknown";
-                } else {
-                    $item['uploaded'] = "Unknown";
-                    $item['uploader'] = "Unknown";
-                }
-            } else {
-                $item['uploaded'] = "Unknown";
-                $item['uploader'] = "Unknown";
-            }
-        } else {
-            $item['uploaded'] = "Unknown";
-            $item['uploader'] = "Unknown";
-        }
-    }
-}
-unset($item);
-
-echo json_encode($trashItems);
-exit;
-?>

getUsers.php

@@ -1,24 +0,0 @@
-<?php
-require '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:
-            if (preg_match('/^[A-Za-z0-9_\- ]+$/', $parts[0])) {
-                $users[] = ["username" => $parts[0]];
-            }
-        }
-    }
-}
-echo json_encode($users);
-?>

index.html

@@ -1,374 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Multi File Upload Editor</title>
-  <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="">
-  <meta name="share-url" content="">
-  <!-- Google Fonts and Material Icons -->
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-  <!-- Bootstrap CSS -->
-  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/material-darker.min.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
-  <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" />
-</head>
-
-<body>
-  <header class="header-container">
-    <div class="header-left">
-      <div class="header-logo">
-        <svg version="1.1" id="filingCabinetLogo" xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" xml:space="preserve">
-          <defs>
-            <!-- Gradient for the cabinet body -->
-            <linearGradient id="cabinetGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-              <stop offset="0%" style="stop-color:#2196F3;stop-opacity:1" />
-              <stop offset="100%" style="stop-color:#1976D2;stop-opacity:1" />
-            </linearGradient>
-            <!-- Drop shadow filter -->
-            <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" />
-            </filter>
-          </defs>
-          <style type="text/css">
-            /* Cabinet with gradient, white outline, and drop shadow */
-            .cabinet {
-              fill: url(#cabinetGradient);
-              stroke: white;
-              stroke-width: 2;
-            }
-
-            .divider {
-              stroke: #1565C0;
-              stroke-width: 1.5;
-            }
-
-            .drawer {
-              fill: #FFFFFF;
-            }
-
-            .handle {
-              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" />
-        </svg>
-      </div>
-    </div>
-
-    <div class="header-title">
-      <h1>Multi File Upload Editor</h1>
-    </div>
-
-    <div class="header-right">
-      <div class="header-buttons">
-        <button id="logoutBtn" title="Logout">
-          <i class="material-icons">exit_to_app</i>
-        </button>
-        <!-- Restore Files Modal (Admin Only) -->
-        <div id="restoreFilesModal" class="modal centered-modal" style="display: none;">
-          <div class="modal-content">
-            <h4 class="custom-restore-header">
-              <i class="material-icons orange-icon">restore_from_trash</i>
-              <span>Restore or</span>
-              <i class="material-icons red-icon">delete_for_ever</i>
-              <span>Delete Trash Items</span>
-            </h4>
-            <div id="restoreFilesList"
-              style="max-height:300px; overflow-y:auto; border:1px solid #ccc; padding:10px; margin-bottom:10px;">
-              <!-- Trash items will be loaded here -->
-            </div>
-            <div style="text-align: right;">
-              <button id="restoreSelectedBtn" class="btn btn-primary">Restore Selected</button>
-              <button id="restoreAllBtn" class="btn btn-secondary">Restore All</button>
-              <button id="deleteTrashSelectedBtn" class="btn btn-warning">Delete Selected</button>
-              <button id="deleteAllBtn" class="btn btn-danger">Delete All</button>
-              <button id="closeRestoreModal" class="btn btn-dark">Close</button>
-            </div>
-          </div>
-        </div>
-        <button id="addUserBtn" title="Add User">
-          <i class="material-icons">person_add</i>
-        </button>
-        <button id="removeUserBtn" title="Remove User">
-          <i class="material-icons">person_remove</i>
-        </button>
-        <button id="darkModeToggle" class="dark-mode-toggle">Dark Mode</button>
-      </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>
-
-    <!-- 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>
-              </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>
-              </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>
-                      </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>
-                  </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>
-            </div>
-          </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>
-
-        <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>
-    </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" />
-      <div id="adminCheckboxContainer">
-        <input type="checkbox" id="isAdmin" />
-        <label for="isAdmin">Grant Admin Access</label>
-      </div>
-      <div class="button-container">
-        <button id="cancelUserBtn" class="btn btn-secondary">Cancel</button>
-        <button id="saveUserBtn" class="btn btn-primary">Save User</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Remove User Modal -->
-  <div id="removeUserModal" class="modal">
-    <div class="modal-content">
-      <h3>Remove User</h3>
-      <label for="removeUsernameSelect">Select a user to remove:</label>
-      <select id="removeUsernameSelect" class="form-control"></select>
-      <div class="button-container">
-        <button id="cancelRemoveUserBtn" class="btn btn-secondary">Cancel</button>
-        <button id="deleteUserBtn" class="btn btn-danger">Delete User</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Rename File Modal -->
-  <div id="renameFileModal" class="modal">
-    <div class="modal-content">
-      <h4>Rename File</h4>
-      <input type="text" id="newFileName" class="form-control" placeholder="Enter new file name"
-        style="margin-top:10px;" />
-      <div style="margin-top:15px; text-align:right;">
-        <button id="cancelRenameFile" class="btn btn-secondary">Cancel</button>
-        <button id="submitRenameFile" class="btn btn-primary">Rename</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Custom Confirm Modal -->
-  <div id="customConfirmModal" class="modal" style="display:none;">
-    <div class="modal-content">
-      <p id="confirmMessage"></p>
-      <div class="modal-actions">
-        <button id="confirmYesBtn" class="btn btn-primary">Yes</button>
-        <button id="confirmNoBtn" class="btn btn-secondary">No</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- JavaScript Files -->
-  <script type="module" src="main.js"></script>
-</body>
-
-</html>

logout.php

@@ -1,19 +0,0 @@
-<?php
-session_start();
-$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.
-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
-
-header('Content-Type: application/json');
-echo json_encode(["success" => "Logged out"]);
-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

@@ -1,158 +0,0 @@
-<?php
-require_once 'config.php';
-header('Content-Type: application/json');
-header("Cache-Control: no-cache, no-store, must-revalidate");
-header("Pragma: no-cache");
-header("Expires: 0");
-
-// --- 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']) {
-    echo json_encode(["error" => "Invalid CSRF token"]);
-    http_response_code(403);
-    exit;
-}
-
-// Ensure user is authenticated
-if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
-    echo json_encode(["error" => "Unauthorized"]);
-    http_response_code(401);
-    exit;
-}
-
-$data = json_decode(file_get_contents("php://input"), true);
-if (
-    !$data ||
-    !isset($data['source']) ||
-    !isset($data['destination']) ||
-    !isset($data['files'])
-) {
-    echo json_encode(["error" => "Invalid request"]);
-    exit;
-}
-
-$sourceFolder = trim($data['source']) ?: 'root';
-$destinationFolder = trim($data['destination']) ?: 'root';
-
-// Allow only letters, numbers, underscores, dashes, spaces, and forward slashes in folder names.
-$folderPattern = '/^[A-Za-z0-9_\- \/]+$/';
-if ($sourceFolder !== 'root' && !preg_match($folderPattern, $sourceFolder)) {
-    echo json_encode(["error" => "Invalid source folder name."]);
-    exit;
-}
-if ($destinationFolder !== 'root' && !preg_match($folderPattern, $destinationFolder)) {
-    echo json_encode(["error" => "Invalid destination folder name."]);
-    exit;
-}
-
-// Remove any leading/trailing slashes.
-$sourceFolder = trim($sourceFolder, "/\\ ");
-$destinationFolder = trim($destinationFolder, "/\\ ");
-
-// Build the source and destination directories.
-$baseDir = rtrim(UPLOAD_DIR, '/\\');
-$sourceDir = ($sourceFolder === 'root')
-    ? $baseDir . DIRECTORY_SEPARATOR
-    : $baseDir . DIRECTORY_SEPARATOR . $sourceFolder . DIRECTORY_SEPARATOR;
-$destDir = ($destinationFolder === 'root')
-    ? $baseDir . DIRECTORY_SEPARATOR
-    : $baseDir . DIRECTORY_SEPARATOR . $destinationFolder . DIRECTORY_SEPARATOR;
-
-// Ensure destination directory exists.
-if (!is_dir($destDir)) {
-    if (!mkdir($destDir, 0775, true)) {
-        echo json_encode(["error" => "Could not create destination folder"]);
-        exit;
-    }
-}
-
-// Helper: Generate the metadata file path for a given folder.
-function getMetadataFilePath($folder) {
-    if (strtolower($folder) === 'root' || $folder === '') {
-        return META_DIR . "root_metadata.json";
-    }
-    return META_DIR . str_replace(['/', '\\', ' '], '-', $folder) . '_metadata.json';
-}
-
-// Helper: Generate a unique file name if a file with the same name exists.
-function getUniqueFileName($destDir, $fileName) {
-    $fullPath = $destDir . $fileName;
-    clearstatcache(true, $fullPath);
-    if (!file_exists($fullPath)) {
-        return $fileName;
-    }
-    $basename = pathinfo($fileName, PATHINFO_FILENAME);
-    $extension = pathinfo($fileName, PATHINFO_EXTENSION);
-    $counter = 1;
-    do {
-        $newName = $basename . " (" . $counter . ")" . ($extension ? "." . $extension : "");
-        $newFullPath = $destDir . $newName;
-        clearstatcache(true, $newFullPath);
-        $counter++;
-    } while (file_exists($destDir . $newName));
-    return $newName;
-}
-
-// Prepare metadata files.
-$srcMetaFile = getMetadataFilePath($sourceFolder);
-$destMetaFile = getMetadataFilePath($destinationFolder);
-
-$srcMetadata = file_exists($srcMetaFile) ? json_decode(file_get_contents($srcMetaFile), true) : [];
-$destMetadata = file_exists($destMetaFile) ? json_decode(file_get_contents($destMetaFile), true) : [];
-
-$errors = [];
-$safeFileNamePattern = '/^[A-Za-z0-9_\-\.\(\) ]+$/';
-
-foreach ($data['files'] as $fileName) {
-    // Save the original name for metadata lookup.
-    $originalName = basename(trim($fileName));
-    $basename = $originalName; // Start with the original name.
-    
-    // Validate the file name.
-    if (!preg_match($safeFileNamePattern, $basename)) {
-        $errors[] = "$basename has invalid characters.";
-        continue;
-    }
-    
-    $srcPath = $sourceDir . $originalName;
-    $destPath = $destDir . $basename;
-    
-    clearstatcache();
-    if (!file_exists($srcPath)) {
-        $errors[] = "$originalName does not exist in source.";
-        continue;
-    }
-    
-    // If a file with the same name exists in destination, generate a unique name.
-    if (file_exists($destPath)) {
-        $uniqueName = getUniqueFileName($destDir, $basename);
-        $basename = $uniqueName;
-        $destPath = $destDir . $uniqueName;
-    }
-    
-    if (!rename($srcPath, $destPath)) {
-        $errors[] = "Failed to move $basename";
-        continue;
-    }
-    
-    // Update metadata: if there is metadata for the original file, move it under the new name.
-    if (isset($srcMetadata[$originalName])) {
-        $destMetadata[$basename] = $srcMetadata[$originalName];
-        unset($srcMetadata[$originalName]);
-    }
-}
-
-if (file_put_contents($srcMetaFile, json_encode($srcMetadata, JSON_PRETTY_PRINT)) === false) {
-    $errors[] = "Failed to update source metadata.";
-}
-if (file_put_contents($destMetaFile, json_encode($destMetadata, JSON_PRETTY_PRINT)) === false) {
-    $errors[] = "Failed to update destination metadata.";
-}
-
-if (empty($errors)) {
-    echo json_encode(["success" => "Files moved successfully"]);
-} else {
-    echo json_encode(["error" => implode("; ", $errors)]);
-}
-?>

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();
-      });
-    });
-}

public/api/addUser.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/addUser.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->addUser();

public/api/admin/getConfig.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/admin/getConfig.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/adminController.php';
+
+$adminController = new AdminController();
+$adminController->getConfig();

public/api/admin/updateConfig.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/admin/updateConfig.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/adminController.php';
+
+$adminController = new AdminController();
+$adminController->updateConfig();

public/api/auth/auth.php

@@ -0,0 +1,9 @@
+<?php
+// public/api/auth/auth.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/vendor/autoload.php';
+require_once PROJECT_ROOT . '/src/controllers/authController.php';
+
+$authController = new AuthController();
+$authController->auth();

public/api/auth/checkAuth.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/auth/checkAuth.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/authController.php';
+
+$authController = new AuthController();
+$authController->checkAuth();

public/api/auth/login_basic.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/auth/login_basic.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/authController.php';
+
+$authController = new AuthController();
+$authController->loginBasic();

public/api/auth/logout.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/auth/logout.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/authController.php';
+
+$authController = new AuthController();
+$authController->logout();

public/api/auth/token.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/auth/token.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/authController.php';
+
+$authController = new AuthController();
+$authController->getToken();

public/api/changePassword.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/changePassword.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->changePassword();

public/api/file/copyFiles.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/copyFiles.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->copyFiles();

public/api/file/createShareLink.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/createShareLink.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->createShareLink();

public/api/file/deleteFiles.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/deleteFiles.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->deleteFiles();

public/api/file/deleteTrashFiles.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/deleteTrashFiles.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->deleteTrashFiles();

public/api/file/download.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/download.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->downloadFile();

public/api/file/downloadZip.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/downloadZip.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->downloadZip();

public/api/file/extractZip.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/extractZip.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->extractZip();

public/api/file/getFileList.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/getFileList.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->getFileList();

public/api/file/getFileTag.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/getFileTag.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->getFileTags();

public/api/file/getTrashItems.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/getTrashItems.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->getTrashItems();

public/api/file/moveFiles.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/moveFiles.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->moveFiles();

public/api/file/renameFile.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/renameFile.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->renameFile();

public/api/file/restoreFiles.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/restoreFiles.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->restoreFiles();

public/api/file/saveFile.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/saveFile.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->saveFile();

public/api/file/saveFileTag.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/saveFileTag.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->saveFileTag();

public/api/file/share.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/file/share.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/fileController.php';
+
+$fileController = new FileController();
+$fileController->shareFile();

public/api/file/symlink

@@ -0,0 +1,2 @@
+cd /var/www/public
+ln -s ../uploads uploads

public/api/folder/createFolder.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/folder/createFolder.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/folderController.php';
+
+$folderController = new FolderController();
+$folderController->createFolder();

public/api/folder/createShareFolderLink.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/folder/createShareFolderLink.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/folderController.php';
+
+$folderController = new FolderController();
+$folderController->createShareFolderLink();

public/api/folder/deleteFolder.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/folder/deleteFolder.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/folderController.php';
+
+$folderController = new FolderController();
+$folderController->deleteFolder();

public/api/folder/downloadSharedFile.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/folder/downloadSharedFile.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/folderController.php';
+
+$folderController = new FolderController();
+$folderController->downloadSharedFile();

public/api/folder/getFolderList.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/folder/getFolderList.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/folderController.php';
+
+$folderController = new FolderController();
+$folderController->getFolderList();

public/api/folder/renameFolder.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/folder/renameFolder.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/folderController.php';
+
+$folderController = new FolderController();
+$folderController->renameFolder();

public/api/folder/shareFolder.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/folder/shareFolder.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/folderController.php';
+
+$folderController = new FolderController();
+$folderController->shareFolder();

public/api/folder/uploadToSharedFolder.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/folder/uploadToSharedFolder.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/folderController.php';
+
+$folderController = new FolderController();
+$folderController->uploadToSharedFolder();

public/api/getUserPermissions.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/getUserPermissions.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->getUserPermissions();

public/api/getUsers.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/getUsers.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->getUsers(); // This will output the JSON response

public/api/removeUser.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/removeUser.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->removeUser();

public/api/totp_disable.php

@@ -0,0 +1,9 @@
+<?php
+// public/api/totp_disable.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/vendor/autoload.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->disableTOTP();

public/api/totp_recover.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/totp_recover.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->recoverTOTP();

public/api/totp_saveCode.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/totp_saveCode.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->saveTOTPRecoveryCode();

public/api/totp_setup.php

@@ -0,0 +1,9 @@
+<?php
+// public/api/totp_setup.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/vendor/autoload.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->setupTOTP();

public/api/totp_verify.php

@@ -0,0 +1,9 @@
+<?php
+// public/api/totp_verify.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/vendor/autoload.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->verifyTOTP();

public/api/updateUserPanel.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/updateUserPanel.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->updateUserPanel();

public/api/updateUserPermissions.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/updateUserPermissions.php
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/userController.php';
+
+$userController = new UserController();
+$userController->updateUserPermissions();

public/api/upload/removeChunks.php

@@ -0,0 +1,8 @@
+<?php
+// public/api/upload/removeChunks.php
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/uploadController.php';
+
+$uploadController = new UploadController();
+$uploadController->removeChunks();

public/api/upload/upload.php

@@ -0,0 +1,7 @@
+<?php
+// public/api/upload/upload.php
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/uploadController.php';
+
+$uploadController = new UploadController();
+$uploadController->handleUpload();

public/index.html

@@ -0,0 +1,485 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title data-i18n-key="title">FileRise</title>
+  <script>
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('logout') === '1') {
+      localStorage.removeItem("username");
+      localStorage.removeItem("userTOTPEnabled");
+    }
+  </script>
+  <link rel="icon" type="image/png" href="/assets/logo.png">
+  <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
+  <meta name="csrf-token" content="">
+  <meta name="share-url" content="">
+  <!-- Google Fonts and Material Icons -->
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+  <!-- Bootstrap CSS -->
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/material-darker.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"
+    integrity="sha384-UXbkZAbZYZ/KCAslc6UO4d6UHNKsOxZ/sqROSQaPTZCuEIKhfbhmffQ64uXFOcma"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"
+    integrity="sha384-xPpkMo5nDgD98fIcuRVYhxkZV6/9Y4L8s3p0J5c4MxgJkyKJ8BJr+xfRkq7kn6Tw"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/css/css.min.js"
+    integrity="sha384-to8njsu2GAiXQnY/aLGzz0DIY/SFSeSDodtvSl869n2NmsBdHOTZNNqbEBPYh7Pa"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"
+    integrity="sha384-kmQrbJf09Uo1WRLMDVGoVG3nM6F48frIhcj7f3FDUjeRzsiHwyBWDjMUIttnIeAf"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"
+    integrity="sha384-EXTg7rRfdTPZWoKVCslusAAev2TYw76fm+Wox718iEtFQ+gdAdAc5Z/ndLHSo4mq"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"
+    integrity="sha384-Tsl3d5pUAO7a13enIvSsL3O0/95nsthPJiPto5NtLuY8w3+LbZOpr3Fl2MNmrh1E"
+    crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"
+     integrity="sha384-zPE55eyESN+FxCWGEnlNxGyAPJud6IZ6TtJmXb56OFRGhxZPN4akj9rjA3gw5Qqa" 
+     crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="css/styles.css" />
+</head>
+
+<body>
+  <header class="header-container">
+    <div class="header-left">
+      <a href="index.html">
+        <div class="header-logo">
+          <svg version="1.1" id="filingCabinetLogo" xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" xml:space="preserve">
+            <defs>
+              <!-- Gradient for the cabinet body -->
+              <linearGradient id="cabinetGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" style="stop-color:#2196F3;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#1976D2;stop-opacity:1" />
+              </linearGradient>
+              <!-- Drop shadow filter with animated attributes for a lifting effect -->
+              <filter id="shadowFilter" x="-20%" y="-20%" width="140%" height="140%">
+                <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">
+              /* Cabinet with gradient, white outline, and drop shadow */
+              .cabinet {
+                fill: url(#cabinetGradient);
+                stroke: white;
+                stroke-width: 2;
+              }
+      
+              .divider {
+                stroke: #1565C0;
+                stroke-width: 1.5;
+              }
+      
+              .drawer {
+                fill: #FFFFFF;
+              }
+      
+              .handle {
+                fill: #1565C0;
+              }
+            </style>
+            <!-- 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>
+      </a>
+    </div>
+    <div class="header-title">
+      <h1 data-i18n-key="header_title">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" data-i18n-title="logout">
+            <i class="material-icons">exit_to_app</i>
+          </button>
+          <button id="changePasswordBtn" data-i18n-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">
+                <i class="material-icons orange-icon">restore_from_trash</i>
+                <span data-i18n-key="restore_text">Restore or</span>
+                <i class="material-icons red-icon">delete_for_ever</i>
+                <span data-i18n-key="delete_text">Delete Trash Items</span>
+              </h4>
+              <div id="restoreFilesList"
+                style="max-height:300px; overflow-y:auto; border:1px solid #ccc; padding:10px; margin-bottom:10px;">
+                <!-- Trash items will be loaded here -->
+              </div>
+              <div style="text-align: right;">
+                <button id="restoreSelectedBtn" class="btn btn-primary" data-i18n-key="restore_selected">Restore
+                  Selected</button>
+                <button id="restoreAllBtn" class="btn btn-secondary" data-i18n-key="restore_all">Restore All</button>
+                <button id="deleteTrashSelectedBtn" class="btn btn-warning" data-i18n-key="delete_selected_trash">Delete
+                  Selected</button>
+                <button id="deleteAllBtn" class="btn btn-danger" data-i18n-key="delete_all">Delete All</button>
+                <button id="closeRestoreModal" class="btn btn-dark" data-i18n-key="close">Close</button>
+              </div>
+            </div>
+          </div>
+          <button id="addUserBtn" data-i18n-title="add_user" style="display: none;">
+            <i class="material-icons">person_add</i>
+          </button>
+          <button id="removeUserBtn" data-i18n-title="remove_user" style="display: none;">
+            <i class="material-icons">person_remove</i>
+          </button>
+          <button id="darkModeToggle" class="dark-mode-toggle" data-i18n-key="dark_mode_toggle">Dark Mode</button>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- Custom Toast Container -->
+  <div id="customToast"></div>
+  <div id="hiddenCardsContainer" style="display:none;"></div>
+
+  <!-- Main Wrapper: Hidden by default; remove "display: none;" after login -->
+  <div class="main-wrapper">
+    <!-- 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" data-i18n-key="user">User:</label>
+                <input type="text" class="form-control" id="loginUsername" name="username" required />
+              </div>
+              <div class="form-group">
+                <label for="loginPassword" data-i18n-key="password">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" data-i18n-key="login">Login</button>
+              <div class="form-group remember-me-container">
+                <input type="checkbox" id="rememberMeCheckbox" name="remember_me" />
+                <label for="rememberMeCheckbox" data-i18n-key="remember_me">Remember me</label>
+              </div>
+            </form>
+            <!-- OIDC Login Option -->
+            <div class="text-center mt-3">
+              <button id="oidcLoginBtn" class="btn btn-secondary" data-i18n-key="login_oidc">Login with OIDC</button>
+            </div>
+            <!-- Basic HTTP Login Option -->
+            <div class="text-center mt-3">
+              <a href="/api/auth/login_basic.php" class="btn btn-secondary" data-i18n-key="basic_http_login">Use Basic HTTP
+                Login</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- 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" data-i18n-key="upload_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 data-i18n-key="upload_instruction">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" data-i18n-key="choose_files">Choose Files</button>
+                        </div>
+                      </div>
+                      <button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto"
+                        data-i18n-key="upload">Upload</button>
+                      <div id="uploadProgressContainer"></div>
+                    </form>
+                  </div>
+                </div>
+              </div>
+              <!-- 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 data-i18n-key="folder_navigation">Folder Navigation &amp; Management</span>
+                    <button id="folderHelpBtn" class="btn btn-link" data-i18n-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" data-i18n-title="create_folder">
+                        <i class="material-icons">create_new_folder</i>
+                      </button>
+                      <div id="createFolderModal" class="modal">
+                        <div class="modal-content">
+                          <h4 data-i18n-key="create_folder_title">Create Folder</h4>
+                          <input type="text" id="newFolderName" class="form-control"
+                            data-i18n-placeholder="enter_folder_name" placeholder="Enter folder name"
+                            style="margin-top:10px;" />
+                          <div style="margin-top:15px; text-align:right;">
+                            <button id="cancelCreateFolder" class="btn btn-secondary"
+                              data-i18n-key="cancel">Cancel</button>
+                            <button id="submitCreateFolder" class="btn btn-primary"
+                              data-i18n-key="create">Create</button>
+                          </div>
+                        </div>
+                      </div>
+                      <button id="renameFolderBtn" class="btn btn-warning ml-2" data-i18n-title="rename_folder">
+                        <i class="material-icons">drive_file_rename_outline</i>
+                      </button>
+                      <div id="renameFolderModal" class="modal">
+                        <div class="modal-content">
+                          <h4 data-i18n-key="rename_folder_title">Rename Folder</h4>
+                          <input type="text" id="newRenameFolderName" class="form-control"
+                            data-i18n-placeholder="rename_folder_placeholder" placeholder="Enter new folder name"
+                            style="margin-top:10px;" />
+                          <div style="margin-top:15px; text-align:right;">
+                            <button id="cancelRenameFolder" class="btn btn-secondary"
+                              data-i18n-key="cancel">Cancel</button>
+                            <button id="submitRenameFolder" class="btn btn-primary"
+                              data-i18n-key="rename">Rename</button>
+                          </div>
+                        </div>
+                      </div>
+                    
+                      <button id="shareFolderBtn" class="btn btn-secondary ml-2" data-i18n-title="share_folder">
+                        <i class="material-icons">share</i>
+                     </button>
+                      <button id="deleteFolderBtn" class="btn btn-danger ml-2" data-i18n-title="delete_folder">
+                        <i class="material-icons">delete</i>
+                      </button>
+                      <div id="deleteFolderModal" class="modal">
+                        <div class="modal-content">
+                          <h4 data-i18n-key="delete_folder_title">Delete Folder</h4>
+                          <p id="deleteFolderMessage" data-i18n-key="delete_folder_message">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"
+                              data-i18n-key="cancel">Cancel</button>
+                            <button id="confirmDeleteFolder" class="btn btn-danger"
+                              data-i18n-key="delete">Delete</button>
+                          </div>
+                        </div>
+                      </div>
+                    </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 data-i18n-key="folder_help_item_1">Click on a folder in the tree to view its files.</li>
+                        <li data-i18n-key="folder_help_item_2">Use [-] to collapse and [+] to expand folders.</li>
+                        <li data-i18n-key="folder_help_item_3">Select a folder and click "Create Folder" to add a
+                          subfolder.</li>
+                        <li data-i18n-key="folder_help_item_4">To rename or delete a folder, select it and then click
+                          the appropriate button.</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div> <!-- end uploadFolderRow -->
+          </div> <!-- end container -->
+        </div> <!-- end mainOperations -->
+
+        <!-- File List Section -->
+        <div id="fileListContainer" style="display: none;">
+          <h2 id="fileListTitle" data-i18n-key="file_list_title">Files in (Root)</h2>
+          <div id="fileListActions" class="file-list-actions">
+            <button id="deleteSelectedBtn" class="btn action-btn" style="display: none;"
+              data-i18n-key="delete_files">Delete Files</button>
+            <div id="deleteFilesModal" class="modal">
+              <div class="modal-content">
+                <h4 data-i18n-key="delete_selected_files_title">Delete Selected Files</h4>
+                <p id="deleteFilesMessage" data-i18n-key="delete_files_message">Are you sure you want to delete the
+                  selected files?</p>
+                <div class="modal-footer">
+                  <button id="cancelDeleteFiles" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
+                  <button id="confirmDeleteFiles" class="btn btn-danger" data-i18n-key="delete">Delete</button>
+                </div>
+              </div>
+            </div>
+            <button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled
+              data-i18n-key="copy_files">Copy Files</button>
+            <div id="copyFilesModal" class="modal">
+              <div class="modal-content">
+                <h4 data-i18n-key="copy_files_title">Copy Selected Files</h4>
+                <p id="copyFilesMessage" data-i18n-key="copy_files_message">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" data-i18n-key="cancel">Cancel</button>
+                  <button id="confirmCopyFiles" class="btn btn-primary" data-i18n-key="copy">Copy</button>
+                </div>
+              </div>
+            </div>
+            <button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled
+              data-i18n-key="move_files">Move Files</button>
+            <div id="moveFilesModal" class="modal">
+              <div class="modal-content">
+                <h4 data-i18n-key="move_files_title">Move Selected Files</h4>
+                <p id="moveFilesMessage" data-i18n-key="move_files_message">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" data-i18n-key="cancel">Cancel</button>
+                  <button id="confirmMoveFiles" class="btn btn-primary" data-i18n-key="move">Move</button>
+                </div>
+              </div>
+            </div>
+            <button id="downloadZipBtn" class="btn action-btn" style="display: none;" disabled
+              data-i18n-key="download_zip">Download ZIP</button>
+            <button id="extractZipBtn" class="btn btn-sm btn-info" data-i18n-title="extract_zip"
+              data-i18n-key="extract_zip_button">Extract Zip</button>
+            <div id="downloadZipModal" class="modal" style="display:none;">
+              <div class="modal-content">
+                <h4 data-i18n-key="download_zip_title">Download Selected Files as Zip</h4>
+                <p data-i18n-key="download_zip_prompt">Enter a name for the zip file:</p>
+                <input type="text" id="zipFileNameInput" class="form-control" data-i18n-placeholder="zip_placeholder"
+                  placeholder="files.zip" />
+                <div class="modal-footer" style="margin-top:15px; text-align:right;">
+                  <button id="cancelDownloadZip" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
+                  <button id="confirmDownloadZip" class="btn btn-primary" data-i18n-key="download">Download</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="fileList"></div>
+        </div>
+      </div> <!-- end container-fluid -->
+    </div> <!-- end mainColumn -->
+  </div> <!-- end main-wrapper -->
+
+<!-- Download Progress Modal -->
+<div id="downloadProgressModal" class="modal" style="display: none;">
+  <div class="modal-content" style="text-align: center; padding: 20px;">
+    <!-- Material icon spinner with a dedicated class -->
+    <span class="material-icons download-spinner">autorenew</span>
+    <p data-i18n-key="preparing_download">Preparing your download...</p>
+  </div>
+</div>
+
+<!-- Single File Download Modal -->
+<div id="downloadFileModal" class="modal" style="display: none;">
+  <div class="modal-content" style="text-align: center; padding: 20px;">
+    <h4 data-i18n-key="download_file">Download File</h4>
+    <p data-i18n-key="confirm_or_change_filename">Confirm or change the download file name:</p>
+    <input type="text" id="downloadFileNameInput" class="form-control" data-i18n-placeholder="filename" placeholder="Filename" />
+    <div style="margin-top: 15px; text-align: right;">
+      <button id="cancelDownloadFile" class="btn btn-secondary"
+              onclick="document.getElementById('downloadFileModal').style.display = 'none';"
+              data-i18n-key="cancel">Cancel</button>
+      <button id="confirmSingleDownloadButton" class="btn btn-primary"
+              onclick="confirmSingleDownload()"
+              data-i18n-key="download">Download</button>
+    </div>
+  </div>
+</div>
+
+  <!-- Change Password, Add User, Remove User, Rename File, and Custom Confirm Modals (unchanged) -->
+  <div id="changePasswordModal" class="modal" style="display:none;">
+    <div class="modal-content" style="max-width:400px; margin:auto;">
+      <span id="closeChangePasswordModal" style="position:absolute; top:10px; right:10px; cursor:pointer; font-size:24px;">&times;</span>
+      <h3 data-i18n-key="change_password_title">Change Password</h3>
+      <input type="password" id="oldPassword" class="form-control" data-i18n-placeholder="old_password"
+        placeholder="Old Password" style="width:100%; margin: 5px 0;" />
+      <input type="password" id="newPassword" class="form-control" data-i18n-placeholder="new_password"
+        placeholder="New Password" style="width:100%; margin: 5px 0;" />
+      <input type="password" id="confirmPassword" class="form-control" data-i18n-placeholder="confirm_new_password"
+        placeholder="Confirm New Password" style="width:100%; margin: 5px 0;" />
+      <button id="saveNewPasswordBtn" class="btn btn-primary" data-i18n-key="save" style="width:100%;">Save</button>
+    </div>
+  </div>
+  <div id="addUserModal" class="modal">
+    <div class="modal-content">
+      <h3 data-i18n-key="create_new_user_title">Create New User</h3>
+      <label for="newUsername" data-i18n-key="username">Username:</label>
+      <input type="text" id="newUsername" class="form-control" />
+      <label for="addUserPassword" data-i18n-key="password">Password:</label>
+      <input type="password" id="addUserPassword" class="form-control" />
+      <div id="adminCheckboxContainer">
+        <input type="checkbox" id="isAdmin" />
+        <label for="isAdmin" data-i18n-key="grant_admin">Grant Admin Access</label>
+      </div>
+      <div class="button-container">
+        <button id="cancelUserBtn" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
+        <button id="saveUserBtn" class="btn btn-primary" data-i18n-key="save_user">Save User</button>
+      </div>
+    </div>
+  </div>
+  <div id="removeUserModal" class="modal">
+    <div class="modal-content">
+      <h3 data-i18n-key="remove_user_title">Remove User</h3>
+      <label for="removeUsernameSelect" data-i18n-key="select_user_remove">Select a user to remove:</label>
+      <select id="removeUsernameSelect" class="form-control"></select>
+      <div class="button-container">
+        <button id="cancelRemoveUserBtn" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
+        <button id="deleteUserBtn" class="btn btn-danger" data-i18n-key="delete_user">Delete User</button>
+      </div>
+    </div>
+  </div>
+  <div id="renameFileModal" class="modal">
+    <div class="modal-content">
+      <h4 data-i18n-key="rename_file_title">Rename File</h4>
+      <input type="text" id="newFileName" class="form-control" data-i18n-placeholder="rename_file_placeholder"
+        placeholder="Enter new file name" style="margin-top:10px;" />
+      <div style="margin-top:15px; text-align:right;">
+        <button id="cancelRenameFile" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
+        <button id="submitRenameFile" class="btn btn-primary" data-i18n-key="rename">Rename</button>
+      </div>
+    </div>
+  </div>
+  <div id="customConfirmModal" class="modal" style="display:none;">
+    <div class="modal-content">
+      <p id="confirmMessage"></p>
+      <div class="modal-actions">
+        <button id="confirmYesBtn" class="btn btn-primary" data-i18n-key="yes">Yes</button>
+        <button id="confirmNoBtn" class="btn btn-secondary" data-i18n-key="no">No</button>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="js/main.js"></script>
+</body>
+
+</html>

public/js/auth.js

@@ -0,0 +1,508 @@
+import { sendRequest } from './networkUtils.js';
+import { t, applyTranslations } from './i18n.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/api/auth/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(msgKey) {
+  const msg = t(msgKey);
+  if (window.pendingTOTP && msgKey === "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='/api/auth/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='/api/auth/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"
+  });
+}
+
+export function loadAdminConfigFunc() {
+  return fetch("api/admin/getConfig.php", { credentials: "include" })
+    .then(response => response.json())
+    .then(config => {
+      localStorage.setItem("headerTitle", config.header_title || "FileRise");
+
+      // Update login options using the nested loginOptions object.
+      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();
+
+      const headerTitleElem = document.querySelector(".header-title h1");
+      if (headerTitleElem) {
+        headerTitleElem.textContent = config.header_title || "FileRise";
+      }
+    })
+    .catch(() => {
+      // Use defaults.
+      localStorage.setItem("headerTitle", "FileRise");
+      localStorage.setItem("disableFormLogin", "false");
+      localStorage.setItem("disableBasicAuth", "false");
+      localStorage.setItem("disableOIDCLogin", "false");
+      localStorage.setItem("globalOtpauthUrl", "otpauth://totp/{label}?secret={secret}&issuer=FileRise");
+      updateLoginOptionsUIFromStorage();
+
+      const headerTitleElem = document.querySelector(".header-title h1");
+      if (headerTitleElem) {
+        headerTitleElem.textContent = "FileRise";
+      }
+    });
+}
+
+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");
+    localStorage.setItem("readOnly",      data.readOnly      ? "true" : "false");
+    localStorage.setItem("disableUpload", data.disableUpload ? "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.setAttribute("data-i18n-title", "trash_restore_delete");
+      restoreBtn.innerHTML = '<i class="material-icons">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.setAttribute("data-i18n-title", "admin_panel");
+      adminPanelBtn.innerHTML = '<i class="material-icons">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.setAttribute("data-i18n-title", "user_panel");
+      userPanelBtn.innerHTML = '<i class="material-icons">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";
+    }
+  }
+  applyTranslations();
+  updateItemsPerPageSelect();
+  updateLoginOptionsUIFromStorage();
+}
+
+function checkAuthentication(showLoginToast = true) {
+  return sendRequest("api/auth/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) {
+        localStorage.setItem("folderOnly",   data.folderOnly   );
+        localStorage.setItem("readOnly",     data.readOnly     );
+        localStorage.setItem("disableUpload",data.disableUpload);
+        updateLoginOptionsUIFromStorage();
+        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("api/auth/auth.php", "POST", data, { "X-CSRF-Token": window.csrfToken })
+    .then(response => {
+      if (response.success || response.status === "ok") {
+        sessionStorage.setItem("welcomeMessage", "Welcome back, " + data.username + "!");
+        // Fetch and update permissions, then reload.
+        sendRequest("api/getUserPermissions.php", "GET")
+          .then(permissionData => {
+            if (permissionData && typeof permissionData === "object") {
+              localStorage.setItem("folderOnly", permissionData.folderOnly ? "true" : "false");
+              localStorage.setItem("readOnly", permissionData.readOnly ? "true" : "false");
+              localStorage.setItem("disableUpload", permissionData.disableUpload ? "true" : "false");
+            }
+          })
+          .catch(() => {
+            // ignore permission‐fetch errors
+          })
+          .finally(() => {
+            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.querySelector("#authForm 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(err => {
+      // err may be an Error object or a string
+      let msg = "Unknown error";
+      if (err && typeof err === "object") {
+        msg = err.error || err.message || msg;
+      } else if (typeof err === "string") {
+        msg = err;
+      }
+      showToast(`Login failed: ${msg}`);
+    });
+}
+
+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() {
+  // Updated path: from "getUsers.php" to "api/getUsers.php"
+  fetch("api/getUsers.php", { credentials: "include" })
+    .then(response => response.json())
+    .then(data => {
+      // Assuming the endpoint returns an array of users.
+      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(() => { /* handle errors if needed */ });
+}
+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("api/auth/logout.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "X-CSRF-Token": window.csrfToken }
+    }).then(() => window.location.reload(true)).catch(() => { });
+  });
+  document.getElementById("addUserBtn").addEventListener("click", function () {
+    resetUserForm();
+    toggleVisibility("addUserModal", true);
+    document.getElementById("newUsername").focus();
+  });
+  document.getElementById("saveUserBtn").addEventListener("click", function () {
+    const newUsername = document.getElementById("newUsername").value.trim();
+    const newPassword = document.getElementById("addUserPassword").value.trim();
+    const isAdmin = document.getElementById("isAdmin").checked;
+    if (!newUsername || !newPassword) {
+      showToast("Username and password are required!");
+      return;
+    }
+    let url = "api/addUser.php";
+    if (window.setupMode) url += "?setup=1";
+    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("api/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("api/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 = "/api/auth/auth.php?oidc=initiate";
+    });
+  }
+
+  // If TOTP is pending, show modal and skip normal auth init
+  if (window.pendingTOTP) {
+    openTOTPLoginModal();
+    return;
+  }
+});
+
+export { initAuth, checkAuthentication };

public/js/authModals.js

@@ -0,0 +1,980 @@
+import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
+import { sendRequest } from './networkUtils.js';
+import { t, applyTranslations, setLocale } from './i18n.js';
+import { loadAdminConfigFunc } from './auth.js';
+
+const version = "v1.2.0";
+// Use t() for the admin panel title. (Make sure t("admin_panel") returns "Admin Panel" in English.)
+const adminTitle = `${t("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>
+        <div id="totpSection">
+          <h3>${t("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>
+        <a href="#" id="toggleRecovery" style="display:block; margin-top:10px; font-size:14px;">${t("use_recovery_code_instead")}</a>
+        <div id="recoverySection" style="display:none; margin-top:10px;">
+          <h3>${t("enter_recovery_code")}</h3>
+          <input type="text" id="recoveryInput"
+                 style="font-size:24px; text-align:center; width:100%; padding:10px;"
+                 placeholder="Recovery code" />
+          <button type="button" id="submitRecovery" class="btn btn-secondary" style="margin-top:10px;">${t("submit_recovery_code")}</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(totpLoginModal);
+
+    // Close button
+    document.getElementById("closeTOTPLoginModal").addEventListener("click", () => {
+      totpLoginModal.style.display = "none";
+    });
+
+    // Toggle between TOTP and Recovery
+    document.getElementById("toggleRecovery").addEventListener("click", function (e) {
+      e.preventDefault();
+      const totpSection = document.getElementById("totpSection");
+      const recoverySection = document.getElementById("recoverySection");
+      const toggleLink = this;
+
+      if (recoverySection.style.display === "none") {
+        // Switch to recovery
+        totpSection.style.display = "none";
+        recoverySection.style.display = "block";
+        toggleLink.textContent = t("use_totp_code_instead");
+      } else {
+        // Switch back to TOTP
+        recoverySection.style.display = "none";
+        totpSection.style.display = "block";
+        toggleLink.textContent = t("use_recovery_code_instead");
+      }
+    });
+
+    // Recovery submission
+    document.getElementById("submitRecovery").addEventListener("click", () => {
+      const recoveryCode = document.getElementById("recoveryInput").value.trim();
+      if (!recoveryCode) {
+        showToast(t("please_enter_recovery_code"));
+        return;
+      }
+      fetch("api/totp_recover.php", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": window.csrfToken
+        },
+        body: JSON.stringify({ recovery_code: recoveryCode })
+      })
+        .then(res => res.json())
+        .then(json => {
+          if (json.status === "ok") {
+            // recovery succeeded → finalize login
+            window.location.href = "/index.html";
+          } else {
+            showToast(json.message || t("recovery_code_verification_failed"));
+          }
+        })
+        .catch(() => {
+          showToast(t("error_verifying_recovery_code"));
+        });
+    });
+
+    // TOTP submission
+    const totpInput = document.getElementById("totpLoginInput");
+    totpInput.focus();
+    totpInput.addEventListener("input", function () {
+      const code = this.value.trim();
+      if (code.length === 6) {
+        fetch("api/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 || t("totp_verification_failed"));
+              this.value = "";
+              totpLoginModal.style.display = "flex";
+              totpInput.focus();
+            }
+          })
+          .catch(() => {
+            showToast(t("totp_verification_failed"));
+            this.value = "";
+            totpLoginModal.style.display = "flex";
+            totpInput.focus();
+          });
+      }
+    });
+  } else {
+    // Re-open existing modal
+    totpLoginModal.style.display = "flex";
+    const totpInput = document.getElementById("totpLoginInput");
+    totpInput.value = "";
+    totpInput.style.display = "block";
+    totpInput.focus();
+    document.getElementById("recoverySection").style.display = "none";
+  }
+}
+
+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: fixed;
+    overflow-y: auto;
+    max-height: 350px !important;
+    border: ${isDarkMode ? "1px solid #444" : "1px solid #ccc"};
+    transform: none;
+    transition: none;
+  `;
+  // Retrieve the language setting from local storage, default to English ("en")
+  const savedLanguage = localStorage.getItem("language") || "en";
+  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 user-panel-content" style="${modalContentStyles}">
+          <span id="closeUserPanel" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 24px;">&times;</span>
+          <h3>${t("user_panel")} (${username})</h3>
+          <button type="button" id="openChangePasswordModalBtn" class="btn btn-primary" style="margin-bottom: 15px;">${t("change_password")}</button>
+          <fieldset style="margin-bottom: 15px;">
+            <legend>${t("totp_settings")}</legend>
+            <div class="form-group">
+              <label for="userTOTPEnabled">${t("enable_totp")}:</label>
+              <input type="checkbox" id="userTOTPEnabled" style="vertical-align: middle;" />
+            </div>
+          </fieldset>
+          <fieldset style="margin-bottom: 15px;">
+            <legend>${t("language")}</legend>
+            <div class="form-group">
+              <label for="languageSelector">${t("select_language")}:</label>
+              <select id="languageSelector">
+                <option value="en">${t("english")}</option>
+                <option value="es">${t("spanish")}</option>
+                <option value="fr">${t("french")}</option>
+                <option value="de">${t("german")}</option>
+              </select>
+            </div>
+          </fieldset>
+        </div>
+      `;
+    document.body.appendChild(userPanelModal);
+    // Close button handler
+    document.getElementById("closeUserPanel").addEventListener("click", () => {
+      userPanelModal.style.display = "none";
+    });
+    // Change Password button
+    document.getElementById("openChangePasswordModalBtn").addEventListener("click", () => {
+      document.getElementById("changePasswordModal").style.display = "block";
+    });
+    // TOTP checkbox behavior
+    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("api/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(t("error_updating_totp_setting") + ": " + result.error);
+          } else if (enabled) {
+            openTOTPModal();
+          }
+        })
+        .catch(() => { showToast(t("error_updating_totp_setting")); });
+    });
+    // Language dropdown initialization
+    const languageSelector = document.getElementById("languageSelector");
+    languageSelector.value = savedLanguage;
+    languageSelector.addEventListener("change", function () {
+      const selectedLanguage = this.value;
+      localStorage.setItem("language", selectedLanguage);
+      setLocale(selectedLanguage);
+      applyTranslations();
+    });
+  } else {
+    // If the modal already exists, update its colors
+    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";
+}
+
+function showRecoveryCodeModal(recoveryCode) {
+  const recoveryModal = document.createElement("div");
+  recoveryModal.id = "recoveryModal";
+  recoveryModal.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0,0,0,0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 3200;
+  `;
+  recoveryModal.innerHTML = `
+    <div style="background: #fff; color: #000; padding: 20px; max-width: 400px; width: 90%; border-radius: 8px; text-align: center;">
+      <h3>${t("your_recovery_code")}</h3>
+      <p>${t("please_save_recovery_code")}</p>
+      <code style="display: block; margin: 10px 0; font-size: 20px;">${recoveryCode}</code>
+      <button type="button" id="closeRecoveryModal" class="btn btn-primary">${t("ok")}</button>
+    </div>
+  `;
+  document.body.appendChild(recoveryModal);
+
+  document.getElementById("closeRecoveryModal").addEventListener("click", () => {
+    recoveryModal.remove();
+  });
+}
+
+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>${t("totp_setup")}</h3>
+      <p>${t("scan_qr_code")}</p>
+      <!-- Create an image placeholder without the CSRF token in the src -->
+      <img id="totpQRCodeImage" src="" alt="TOTP QR Code" style="max-width: 100%; height: auto; display: block; margin: 0 auto;">
+      <br/>
+      <p>${t("enter_totp_confirmation")}</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">${t("confirm")}</button>
+    </div>
+  `;
+    document.body.appendChild(totpModal);
+    loadTOTPQRCode();
+
+    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(t("please_enter_valid_code"));
+        return;
+      }
+      fetch("api/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(t("totp_enabled_successfully"));
+            // After successful TOTP verification, fetch the recovery code
+            fetch("api/totp_saveCode.php", {
+              method: "POST",
+              credentials: "include",
+              headers: {
+                "Content-Type": "application/json",
+                "X-CSRF-Token": window.csrfToken
+              }
+            })
+              .then(r => r.json())
+              .then(data => {
+                if (data.status === 'ok' && data.recoveryCode) {
+                  // Show the recovery code in a secure modal
+                  showRecoveryCodeModal(data.recoveryCode);
+                } else {
+                  showToast(t("error_generating_recovery_code") + ": " + (data.message || t("unknown_error")));
+                }
+              })
+              .catch(() => { showToast(t("error_generating_recovery_code")); });
+            closeTOTPModal(false);
+          } else {
+            showToast(t("totp_verification_failed") + ": " + (result.message || t("invalid_code")));
+          }
+        })
+        .catch(() => { showToast(t("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";
+
+    // Clear any previous QR code src if needed and then load it:
+    const qrImg = document.getElementById("totpQRCodeImage");
+    if (qrImg) {
+      qrImg.src = "";
+    }
+    loadTOTPQRCode();
+
+    // 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");
+  }
+}
+
+function loadTOTPQRCode() {
+  fetch("api/totp_setup.php", {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "X-CSRF-Token": window.csrfToken  // Send your CSRF token here
+    }
+  })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error("Failed to fetch QR code. Status: " + response.status);
+      }
+      return response.blob();
+    })
+    .then(blob => {
+      const imageURL = URL.createObjectURL(blob);
+      const qrImg = document.getElementById("totpQRCodeImage");
+      if (qrImg) {
+        qrImg.src = imageURL;
+      }
+    })
+    .catch(error => {
+      console.error("Error loading TOTP QR code:", error);
+      showToast(t("error_loading_qr_code"));
+    });
+}
+
+// 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("api/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(t("error_disabling_totp_setting") + ": " + result.error);
+        }
+      })
+      .catch(() => { showToast(t("error_disabling_totp_setting")); });
+  }
+}
+
+// Global variable to hold the initial state of the admin form.
+let originalAdminConfig = {};
+
+// Capture the initial state of the admin form fields.
+function captureInitialAdminConfig() {
+  originalAdminConfig = {
+    headerTitle: document.getElementById("headerTitle").value.trim(),
+    oidcProviderUrl: document.getElementById("oidcProviderUrl").value.trim(),
+    oidcClientId: document.getElementById("oidcClientId").value.trim(),
+    oidcClientSecret: document.getElementById("oidcClientSecret").value.trim(),
+    oidcRedirectUri: document.getElementById("oidcRedirectUri").value.trim(),
+    disableFormLogin: document.getElementById("disableFormLogin").checked,
+    disableBasicAuth: document.getElementById("disableBasicAuth").checked,
+    disableOIDCLogin: document.getElementById("disableOIDCLogin").checked,
+    globalOtpauthUrl: document.getElementById("globalOtpauthUrl").value.trim()
+  };
+}
+
+// Compare current values to the captured initial state.
+function hasUnsavedChanges() {
+  return (
+    document.getElementById("headerTitle").value.trim() !== originalAdminConfig.headerTitle ||
+    document.getElementById("oidcProviderUrl").value.trim() !== originalAdminConfig.oidcProviderUrl ||
+    document.getElementById("oidcClientId").value.trim() !== originalAdminConfig.oidcClientId ||
+    document.getElementById("oidcClientSecret").value.trim() !== originalAdminConfig.oidcClientSecret ||
+    document.getElementById("oidcRedirectUri").value.trim() !== originalAdminConfig.oidcRedirectUri ||
+    document.getElementById("disableFormLogin").checked !== originalAdminConfig.disableFormLogin ||
+    document.getElementById("disableBasicAuth").checked !== originalAdminConfig.disableBasicAuth ||
+    document.getElementById("disableOIDCLogin").checked !== originalAdminConfig.disableOIDCLogin ||
+    document.getElementById("globalOtpauthUrl").value.trim() !== originalAdminConfig.globalOtpauthUrl
+  );
+}
+
+// Use your custom confirmation modal.
+function showCustomConfirmModal(message) {
+  return new Promise((resolve) => {
+    // Get modal elements from DOM.
+    const modal = document.getElementById("customConfirmModal");
+    const messageElem = document.getElementById("confirmMessage");
+    const yesBtn = document.getElementById("confirmYesBtn");
+    const noBtn = document.getElementById("confirmNoBtn");
+
+    // Set the message in the modal.
+    messageElem.textContent = message;
+    modal.style.display = "block";
+
+    // Define event handlers.
+    function onYes() {
+      cleanup();
+      resolve(true);
+    }
+    function onNo() {
+      cleanup();
+      resolve(false);
+    }
+    // Remove event listeners and hide modal after choice.
+    function cleanup() {
+      yesBtn.removeEventListener("click", onYes);
+      noBtn.removeEventListener("click", onNo);
+      modal.style.display = "none";
+    }
+    
+    yesBtn.addEventListener("click", onYes);
+    noBtn.addEventListener("click", onNo);
+  });
+}
+
+export function openAdminPanel() {
+  fetch("api/admin/getConfig.php", { credentials: "include" })
+    .then(response => response.json())
+    .then(config => {
+      if (config.header_title) {
+        document.querySelector(".header-title h1").textContent = config.header_title;
+        window.headerTitle = config.header_title || "FileRise";
+      }
+      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;
+          `;
+        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>${adminTitle}</h3>
+            <form id="adminPanelForm">
+              <fieldset style="margin-bottom: 15px;">
+                <legend>${t("user_management")}</legend>
+                <div style="display: flex; gap: 10px;">
+                  <button type="button" id="adminOpenAddUser" class="btn btn-success">${t("add_user")}</button>
+                  <button type="button" id="adminOpenRemoveUser" class="btn btn-danger">${t("remove_user")}</button>
+                  <button type="button" id="adminOpenUserPermissions" class="btn btn-secondary">${t("user_permissions")}</button>
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>Header Settings</legend>
+                <div class="form-group">
+                  <label for="headerTitle">Header Title:</label>
+                  <input type="text" id="headerTitle" class="form-control" value="${window.headerTitle}" />
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>${t("login_options")}</legend>
+                <div class="form-group">
+                  <input type="checkbox" id="disableFormLogin" />
+                  <label for="disableFormLogin">${t("disable_login_form")}</label>
+                </div>
+                <div class="form-group">
+                  <input type="checkbox" id="disableBasicAuth" />
+                  <label for="disableBasicAuth">${t("disable_basic_http_auth")}</label>
+                </div>
+                <div class="form-group">
+                  <input type="checkbox" id="disableOIDCLogin" />
+                  <label for="disableOIDCLogin">${t("disable_oidc_login")}</label>
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>${t("oidc_configuration")}</legend>
+                <div class="form-group">
+                  <label for="oidcProviderUrl">${t("oidc_provider_url")}:</label>
+                  <input type="text" id="oidcProviderUrl" class="form-control" value="${window.currentOIDCConfig.providerUrl}" />
+                </div>
+                <div class="form-group">
+                  <label for="oidcClientId">${t("oidc_client_id")}:</label>
+                  <input type="text" id="oidcClientId" class="form-control" value="${window.currentOIDCConfig.clientId}" />
+                </div>
+                <div class="form-group">
+                  <label for="oidcClientSecret">${t("oidc_client_secret")}:</label>
+                  <input type="text" id="oidcClientSecret" class="form-control" value="${window.currentOIDCConfig.clientSecret}" />
+                </div>
+                <div class="form-group">
+                  <label for="oidcRedirectUri">${t("oidc_redirect_uri")}:</label>
+                  <input type="text" id="oidcRedirectUri" class="form-control" value="${window.currentOIDCConfig.redirectUri}" />
+                </div>
+              </fieldset>
+              <fieldset style="margin-bottom: 15px;">
+                <legend>${t("global_totp_settings")}</legend>
+                <div class="form-group">
+                  <label for="globalOtpauthUrl">${t("global_otpauth_url")}:</label>
+                  <input type="text" id="globalOtpauthUrl" class="form-control" value="${window.currentOIDCConfig.globalOtpauthUrl || 'otpauth://totp/{label}?secret={secret}&issuer=FileRise'}" />
+                </div>
+              </fieldset>
+              <div style="display: flex; justify-content: space-between;">
+                <button type="button" id="cancelAdminSettings" class="btn btn-secondary">${t("cancel")}</button>
+                <button type="button" id="saveAdminSettings" class="btn btn-primary">${t("save_settings")}</button>
+              </div>
+            </form>
+          </div>
+        `;
+        document.body.appendChild(adminModal);
+
+        // Bind closing events that will use our enhanced close function.
+        document.getElementById("closeAdminPanel").addEventListener("click", closeAdminPanel);
+        adminModal.addEventListener("click", (e) => {
+          if (e.target === adminModal) closeAdminPanel();
+        });
+        document.getElementById("cancelAdminSettings").addEventListener("click", closeAdminPanel);
+
+        // Bind other buttons.
+        document.getElementById("adminOpenAddUser").addEventListener("click", () => {
+          toggleVisibility("addUserModal", true);
+          document.getElementById("newUsername").focus();
+        });
+        document.getElementById("adminOpenRemoveUser").addEventListener("click", () => {
+          if (typeof window.loadUserList === "function") {
+            window.loadUserList();
+          }
+          toggleVisibility("removeUserModal", true);
+        });
+        document.getElementById("adminOpenUserPermissions").addEventListener("click", () => {
+          openUserPermissionsModal();
+        });
+        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(t("at_least_one_login_method"));
+            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 newHeaderTitle = document.getElementById("headerTitle").value.trim();
+          
+          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("api/admin/updateConfig.php", "POST", {
+            header_title: newHeaderTitle,
+            oidc: newOIDCConfig,
+            disableFormLogin,
+            disableBasicAuth,
+            disableOIDCLogin,
+            globalOtpauthUrl
+          }, { "X-CSRF-Token": window.csrfToken })
+            .then(response => {
+              if (response.success) {
+                showToast(t("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 });
+                }
+                // Update the captured initial state since the changes have now been saved.
+                captureInitialAdminConfig();
+                closeAdminPanel();
+                loadAdminConfigFunc();
+              
+              } else {
+                showToast(t("error_updating_settings") + ": " + (response.error || t("unknown_error")));
+              }
+            })
+            .catch(() => { });
+        });
+        // Enforce login option constraints.
+        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(t("at_least_one_login_method"));
+            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;
+        
+        // Capture initial state after the modal loads.
+        captureInitialAdminConfig();
+      } 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";
+        captureInitialAdminConfig();
+      }
+    })
+    .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";
+        captureInitialAdminConfig();
+      } else {
+        openAdminPanel();
+      }
+    });
+}
+
+export async function closeAdminPanel() {
+  if (hasUnsavedChanges()) {
+    const userConfirmed = await showCustomConfirmModal(t("unsaved_changes_confirm"));
+    if (!userConfirmed) {
+      return;
+    }
+  }
+  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>${t("user_permissions")}</h3>
+          <div id="userPermissionsList" style="max-height: 300px; overflow-y: auto; margin-bottom: 15px;">
+            <!-- User rows will be loaded here -->
+          </div>
+          <div style="display: flex; justify-content: flex-end; gap: 10px;">
+            <button type="button" id="cancelUserPermissionsBtn" class="btn btn-secondary">${t("cancel")}</button>
+            <button type="button" id="saveUserPermissionsBtn" class="btn btn-primary">${t("save_permissions")}</button>
+          </div>
+        </div>
+      `;
+    document.body.appendChild(userPermissionsModal);
+    document.getElementById("closeUserPermissionsModal").addEventListener("click", () => {
+      userPermissionsModal.style.display = "none";
+    });
+    document.getElementById("cancelUserPermissionsBtn").addEventListener("click", () => {
+      userPermissionsModal.style.display = "none";
+    });
+    document.getElementById("saveUserPermissionsBtn").addEventListener("click", () => {
+      // Collect permissions data from each user row.
+      const rows = userPermissionsModal.querySelectorAll(".user-permission-row");
+      const permissionsData = [];
+      rows.forEach(row => {
+        const username = row.getAttribute("data-username");
+        const folderOnlyCheckbox = row.querySelector("input[data-permission='folderOnly']");
+        const readOnlyCheckbox = row.querySelector("input[data-permission='readOnly']");
+        const disableUploadCheckbox = row.querySelector("input[data-permission='disableUpload']");
+        permissionsData.push({
+          username,
+          folderOnly: folderOnlyCheckbox.checked,
+          readOnly: readOnlyCheckbox.checked,
+          disableUpload: disableUploadCheckbox.checked
+        });
+      });
+      // Send the permissionsData to the server.
+      sendRequest("api/updateUserPermissions.php", "POST", { permissions: permissionsData }, { "X-CSRF-Token": window.csrfToken })
+        .then(response => {
+          if (response.success) {
+            showToast(t("user_permissions_updated_successfully"));
+            userPermissionsModal.style.display = "none";
+          } else {
+            showToast(t("error_updating_permissions") + ": " + (response.error || t("unknown_error")));
+          }
+        })
+        .catch(() => {
+          showToast(t("error_updating_permissions"));
+        });
+    });
+  } else {
+    userPermissionsModal.style.display = "flex";
+  }
+  // Load the list of users into the modal.
+  loadUserPermissionsList();
+}
+
+function loadUserPermissionsList() {
+  const listContainer = document.getElementById("userPermissionsList");
+  if (!listContainer) return;
+  listContainer.innerHTML = "";
+
+  // First, fetch the current permissions from the server.
+  fetch("api/getUserPermissions.php", { credentials: "include" })
+    .then(response => response.json())
+    .then(permissionsData => {
+      // Then, fetch the list of users.
+      return fetch("api/getUsers.php", { credentials: "include" })
+        .then(response => response.json())
+        .then(usersData => {
+          const users = Array.isArray(usersData) ? usersData : (usersData.users || []);
+          if (users.length === 0) {
+            listContainer.innerHTML = "<p>" + t("no_users_found") + "</p>";
+            return;
+          }
+          users.forEach(user => {
+            // Skip admin users.
+            if ((user.role && user.role === "1") || user.username.toLowerCase() === "admin") return;
+
+            // Use stored permissions if available; otherwise fall back to defaults.
+            const defaultPerm = {
+              folderOnly: false,
+              readOnly: false,
+              disableUpload: false,
+            };
+
+            // Normalize the username key to match server storage (e.g., lowercase)
+            const usernameKey = user.username.toLowerCase();
+
+            const userPerm = (permissionsData && typeof permissionsData === "object" && (usernameKey in permissionsData))
+              ? permissionsData[usernameKey]
+              : defaultPerm;
+
+            // Create a row for the user.
+            const row = document.createElement("div");
+            row.classList.add("user-permission-row");
+            row.setAttribute("data-username", user.username);
+            row.style.padding = "10px 0";
+            row.innerHTML = `
+                <div style="font-weight: bold; margin-bottom: 5px;">${user.username}</div>
+                <div style="display: flex; flex-direction: column; gap: 5px;">
+                  <label style="display: flex; align-items: center; gap: 5px;">
+                    <input type="checkbox" data-permission="folderOnly" ${userPerm.folderOnly ? "checked" : ""} />
+                    ${t("user_folder_only")}
+                  </label>
+                  <label style="display: flex; align-items: center; gap: 5px;">
+                    <input type="checkbox" data-permission="readOnly" ${userPerm.readOnly ? "checked" : ""} />
+                    ${t("read_only")}
+                  </label>
+                  <label style="display: flex; align-items: center; gap: 5px;">
+                    <input type="checkbox" data-permission="disableUpload" ${userPerm.disableUpload ? "checked" : ""} />
+                    ${t("disable_upload")}
+                  </label>
+                </div>
+                <hr style="margin-top: 10px; border: 0; border-bottom: 1px solid #ccc;">
+              `;
+            listContainer.appendChild(row);
+          });
+        });
+    })
+    .catch(() => {
+      listContainer.innerHTML = "<p>" + t("error_loading_users") + "</p>";
+    });
+}

public/js/domUtils.js

@@ -1,4 +1,6 @@
 // domUtils.js
+import { t } from './i18n.js';
+import { openDownloadModal } from './fileActions.js';
 
 // Basic DOM Helpers
 export function toggleVisibility(elementId, shouldShow) {
@@ -6,7 +8,7 @@ export function toggleVisibility(elementId, shouldShow) {
   if (element) {
     element.style.display = shouldShow ? "block" : "none";
   } else {
-    console.error(`Element with id "${elementId}" not found.`);
+    console.error(t("element_not_found", { id: elementId }));
   }
 }
 
@@ -28,35 +30,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;
     }
   }
 }
@@ -84,23 +90,36 @@ export function showToast(message, duration = 3000) {
 
 export function buildSearchAndPaginationControls({ currentPage, totalPages, searchTerm }) {
   const safeSearchTerm = escapeHTML(searchTerm);
+  // Choose the placeholder text based on advanced search mode
+  const placeholderText = window.advancedSearchEnabled 
+    ? t("search_placeholder_advanced")
+    : t("search_placeholder");
+
   return `
     <div class="row align-items-center mb-3">
       <div class="col-12 col-md-8 mb-2 mb-md-0">
         <div class="input-group">
+          <!-- Advanced Search Toggle Button -->
+          <div class="input-group-prepend">
+            <button id="advancedSearchToggle" class="btn btn-outline-secondary btn-icon" onclick="toggleAdvancedSearch()" title="${window.advancedSearchEnabled ? t("basic_search_tooltip") : t("advanced_search_tooltip")}">
+              <i class="material-icons">${window.advancedSearchEnabled ? "filter_alt_off" : "filter_alt"}</i>
+            </button>
+          </div>
+          <!-- Search Icon -->
           <div class="input-group-prepend">
             <span class="input-group-text" id="searchIcon">
               <i class="material-icons">search</i>
             </span>
           </div>
-          <input type="text" id="searchInput" class="form-control" placeholder="Search files..." value="${safeSearchTerm}" aria-describedby="searchIcon">
+          <!-- Search Input -->
+          <input type="text" id="searchInput" class="form-control" placeholder="${placeholderText}" value="${safeSearchTerm}" aria-describedby="searchIcon">
         </div>
       </div>
       <div class="col-12 col-md-4 text-left">
         <div class="d-flex justify-content-center justify-content-md-start align-items-center">
-          <button class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">Prev</button>
-          <span class="page-indicator">Page ${currentPage} of ${totalPages || 1}</span>
-          <button class="custom-prev-next-btn" ${currentPage === totalPages ? "disabled" : ""} onclick="changePage(${currentPage + 1})">Next</button>
+          <button class="custom-prev-next-btn" ${currentPage === 1 ? "disabled" : ""} onclick="changePage(${currentPage - 1})">${t("prev")}</button>
+          <span class="page-indicator">${t("page")} ${currentPage} ${t("of")} ${totalPages || 1}</span>
+          <button class="custom-prev-next-btn" ${currentPage === totalPages ? "disabled" : ""} onclick="changePage(${currentPage + 1})">${t("next")}</button>
         </div>
       </div>
     </div>
@@ -113,12 +132,12 @@ export function buildFileTableHeader(sortOrder) {
       <thead>
         <tr>
           <th class="checkbox-col"><input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes(this)"></th>
-          <th data-column="name" class="sortable-col">File Name ${sortOrder.column === "name" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
-          <th data-column="modified" class="hide-small sortable-col">Date Modified ${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
-          <th data-column="uploaded" class="hide-small hide-medium sortable-col">Upload Date ${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
-          <th data-column="size" class="hide-small sortable-col">File Size ${sortOrder.column === "size" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
-          <th data-column="uploader" class="hide-small hide-medium sortable-col">Uploader ${sortOrder.column === "uploader" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
-          <th>Actions</th>
+          <th data-column="name" class="sortable-col">${t("file_name")} ${sortOrder.column === "name" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
+          <th data-column="modified" class="hide-small sortable-col">${t("date_modified")} ${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
+          <th data-column="uploaded" class="hide-small hide-medium sortable-col">${t("upload_date")} ${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
+          <th data-column="size" class="hide-small sortable-col">${t("file_size")} ${sortOrder.column === "size" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
+          <th data-column="uploader" class="hide-small hide-medium sortable-col">${t("uploader")} ${sortOrder.column === "uploader" ? (sortOrder.ascending ? "▲" : "▼") : ""}</th>
+          <th>${t("actions")}</th>
         </tr>
       </thead>
   `;
@@ -132,14 +151,16 @@ 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}
@@ -151,29 +172,29 @@ 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>
     <td class="hide-small hide-medium nowrap">${safeUploader}</td>
     <td>
       <div class="button-wrap" style="display: flex; justify-content: left; 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">
+        <button type="button" class="btn btn-sm btn-success download-btn" 
+          onclick="openDownloadModal('${file.name}', '${file.folder || 'root'}')" 
+          title="${t('download')}">
           <i class="material-icons">file_download</i>
-        </a>
+        </button>
         ${file.editable ? `
           <button class="btn btn-sm edit-btn" 
                   onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})'
-                  title="Edit">
+                  title="${t('edit')}">
             <i class="material-icons">edit</i>
           </button>
         ` : ""}
         ${previewButton}
         <button class="btn btn-sm btn-warning rename-btn" 
                 onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})'
-                title="Rename">
+                title="${t('rename')}">
           <i class="material-icons">drive_file_rename_outline</i>
         </button>
       </div>
@@ -185,11 +206,13 @@ export function buildFileTableRow(file, folderPath) {
 export function buildBottomControls(itemsPerPageSetting) {
   return `
     <div class="d-flex align-items-center mt-3 bottom-controls">
-      <label class="label-inline mr-2 mb-0">Show</label>
+      <label class="label-inline mr-2 mb-0">${t("show")}</label>
       <select class="form-control bottom-select" onchange="changeItemsPerPage(this.value)">
-        ${[10, 20, 50, 100].map(num => `<option value="${num}" ${num === itemsPerPageSetting ? "selected" : ""}>${num}</option>`).join("")}
+        ${[10, 20, 50, 100]
+          .map(num => `<option value="${num}" ${num === itemsPerPageSetting ? "selected" : ""}>${num}</option>`)
+          .join("")}
       </select>
-      <span class="items-per-page-text ml-2 mb-0">items per page</span>
+      <span class="items-per-page-text ml-2 mb-0">${t("items_per_page")}</span>
     </div>
   `;
 }
@@ -215,94 +238,111 @@ export function updateRowHighlight(checkbox) {
 }
 
 export function toggleRowSelection(event, fileName) {
+  // Prevent default text selection when shift is held.
+  if (event.shiftKey) {
+    event.preventDefault();
+  }
+
+  // Ignore clicks on interactive elements.
   const targetTag = event.target.tagName.toLowerCase();
-  if (targetTag === 'a' || targetTag === 'button' || targetTag === 'input') {
+  if (["a", "button", "input"].includes(targetTag)) {
     return;
   }
+
+  // Get the clicked row and its checkbox.
   const row = event.currentTarget;
-  const checkbox = row.querySelector('.file-checkbox');
+  const checkbox = row.querySelector(".file-checkbox");
   if (!checkbox) return;
+
+  // Get all rows in the current file list view.
+  const allRows = Array.from(document.querySelectorAll("#fileList tbody tr"));
+
+  // Helper: clear all selections (not used in this updated version).
+  const clearAllSelections = () => {
+    allRows.forEach(r => {
+      const cb = r.querySelector(".file-checkbox");
+      if (cb) {
+        cb.checked = false;
+        updateRowHighlight(cb);
+      }
+    });
+  };
+
+  // If the user is holding the Shift key, perform range selection.
+  if (event.shiftKey) {
+    // Use the last clicked row as the anchor.
+    const lastRow = window.lastSelectedFileRow || row;
+    const currentIndex = allRows.indexOf(row);
+    const lastIndex = allRows.indexOf(lastRow);
+    const start = Math.min(currentIndex, lastIndex);
+    const end = Math.max(currentIndex, lastIndex);
+
+    // If neither CTRL nor Meta is pressed, you might choose
+    // to clear existing selections. For this example we leave existing selections intact.
+    for (let i = start; i <= end; i++) {
+      const cb = allRows[i].querySelector(".file-checkbox");
+      if (cb) {
+        cb.checked = true;
+        updateRowHighlight(cb);
+      }
+    }
+  }
+  // Otherwise, for all non-shift clicks simply toggle the selected state.
+  else {
     checkbox.checked = !checkbox.checked;
     updateRowHighlight(checkbox);
+  }
+
+  // Update the anchor row to the row that was clicked.
+  window.lastSelectedFileRow = row;
   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;
+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();
         }
+      }
+    });
+  }
+}
+
+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");
+
+    messageElem.textContent = message;
+    modal.style.display = "block";
+
+    // 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.addEventListener("click", function (e) {
-      if (e.target === modal) {
-        const video = modal.querySelector("video");
-        if (video) {
-          video.pause();
-          video.currentTime = 0;
+    function onYes() {
+      cleanup();
+      resolve(true);
     }
-        modal.style.display = "none";
+    function onNo() {
+      cleanup();
+      resolve(false);
     }
+
+    yesBtn.addEventListener("click", onYes);
+    noBtn.addEventListener("click", onNo);
   });
 }
-
-  modal.querySelector("h4").textContent = fileName;
-  const container = modal.querySelector(".file-preview-container");
-  container.innerHTML = "";
-
-  const extension = fileName.split('.').pop().toLowerCase();
-
-  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.";
-  }
-
-  modal.style.display = "flex";
-}

public/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 = '55px';
+          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();
+    }
+  }

public/js/fileActions.js

@@ -0,0 +1,576 @@
+// fileActions.js
+import { showToast, attachEnterKeyListener } from './domUtils.js';
+import { loadFileList } from './fileListView.js';
+import { formatFolderName } from './fileListView.js';
+import { t } from './i18n.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);
+  const count = window.filesToDelete.length;
+  document.getElementById("deleteFilesMessage").textContent = t("confirm_delete_files", { count: count });
+  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("api/file/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 openDownloadModal(fileName, folder) {
+  // Store file details globally for the download confirmation function.
+  window.singleFileToDownload = fileName;
+  window.currentFolder = folder || "root";
+  
+  // Optionally pre-fill the file name input in the modal.
+  const input = document.getElementById("downloadFileNameInput");
+  if (input) {
+    input.value = fileName; // Use file name as-is (or modify if desired)
+  }
+  
+  // Show the single file download modal (a new modal element).
+  document.getElementById("downloadFileModal").style.display = "block";
+  
+  // Optionally focus the input after a short delay.
+  setTimeout(() => {
+    if (input) input.focus();
+  }, 100);
+}
+
+export function confirmSingleDownload() {
+  // Get the file name from the modal. Users can change it if desired.
+  let fileName = document.getElementById("downloadFileNameInput").value.trim();
+  if (!fileName) {
+    showToast("Please enter a name for the file.");
+    return;
+  }
+  
+  // Hide the download modal.
+  document.getElementById("downloadFileModal").style.display = "none";
+  // Show the progress modal (same as in your ZIP download flow).
+  document.getElementById("downloadProgressModal").style.display = "block";
+  
+  // Build the URL for download.php using GET parameters.
+  const folder = window.currentFolder || "root";
+  const downloadURL = "/api/file/download.php?folder=" + encodeURIComponent(folder) +
+                      "&file=" + encodeURIComponent(window.singleFileToDownload);
+  
+  fetch(downloadURL, {
+    method: "GET",
+    credentials: "include"
+  })
+    .then(response => {
+      if (!response.ok) {
+        return response.text().then(text => {
+          throw new Error("Failed to download file: " + text);
+        });
+      }
+      return response.blob();
+    })
+    .then(blob => {
+      if (!blob || blob.size === 0) {
+        throw new Error("Received empty file.");
+      }
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.style.display = "none";
+      a.href = url;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      a.remove();
+      // Hide the progress modal.
+      document.getElementById("downloadProgressModal").style.display = "none";
+      showToast("Download started.");
+    })
+    .catch(error => {
+      // Hide progress modal and show error.
+      document.getElementById("downloadProgressModal").style.display = "none";
+      console.error("Error downloading file:", error);
+      showToast("Error downloading file: " + error.message);
+    });
+}
+
+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;
+  }
+  
+  // Change progress modal text to "Extracting files..."
+  const progressText = document.querySelector("#downloadProgressModal p");
+  if (progressText) {
+    progressText.textContent = "Extracting files...";
+  }
+  
+  // Show the progress modal.
+  document.getElementById("downloadProgressModal").style.display = "block";
+  
+  fetch("api/file/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 => {
+      // Hide the progress modal once the request has completed.
+      document.getElementById("downloadProgressModal").style.display = "none";
+      if (data.success) {
+        let toastMessage = "Zip file(s) extracted successfully!";
+        if (data.extractedFiles && Array.isArray(data.extractedFiles) && data.extractedFiles.length) {
+          toastMessage = "Extracted: " + data.extractedFiles.join(", ");
+        }
+        showToast(toastMessage);
+        loadFileList(window.currentFolder);
+      } else {
+        showToast("Error extracting zip: " + (data.error || "Unknown error"));
+      }
+    })
+    .catch(error => {
+      // Hide the progress modal on error.
+      document.getElementById("downloadProgressModal").style.display = "none";
+      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";
+    });
+  }
+
+  // This part remains in your confirmDownloadZip event handler:
+  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";
+      }
+      // Hide the ZIP name input modal
+      document.getElementById("downloadZipModal").style.display = "none";
+      // Show the progress modal here only on confirm
+      console.log("Download confirmed. Showing progress modal.");
+      document.getElementById("downloadProgressModal").style.display = "block";
+      const folder = window.currentFolder || "root";
+      fetch("api/file/downloadZip.php", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": window.csrfToken
+        },
+        body: JSON.stringify({ folder: folder, files: window.filesToDownload })
+      })
+        .then(response => {
+          if (!response.ok) {
+            return response.text().then(text => {
+              throw new Error("Failed to create zip file: " + text);
+            });
+          }
+          return response.blob();
+        })
+        .then(blob => {
+          if (!blob || blob.size === 0) {
+            throw new Error("Received empty zip file.");
+          }
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.style.display = "none";
+          a.href = url;
+          a.download = zipName;
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+          a.remove();
+          // Hide the progress modal after download starts
+          document.getElementById("downloadProgressModal").style.display = "none";
+          showToast("Download started.");
+        })
+        .catch(error => {
+          // Hide the progress modal on error
+          document.getElementById("downloadProgressModal").style.display = "none";
+          console.error("Error downloading zip:", error);
+          showToast("Error downloading selected files as zip: " + error.message);
+        });
+    });
+  }
+});
+
+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("api/folder/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("api/folder/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("api/file/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("api/file/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("api/file/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;

public/js/fileDragDrop.js

@@ -0,0 +1,125 @@
+// fileDragDrop.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("api/file/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.");
+    });
+}

public/js/fileEditor.js

@@ -0,0 +1,179 @@
+// fileEditor.js
+import { escapeHTML, showToast } from './domUtils.js';
+import { loadFileList } from './fileListView.js';
+import { t } from './i18n.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">${t("editing")}: ${escapeHTML(fileName)}</h3>
+        <div class="editor-controls">
+           <button id="decreaseFont" class="btn btn-sm btn-secondary">${t("decrease_font")}</button>
+           <button id="increaseFont" class="btn btn-sm btn-secondary">${t("increase_font")}</button>
+        </div>
+        <button id="closeEditorX" class="editor-close-btn">&times;</button>
+      </div>
+      <textarea id="fileEditor" class="editor-textarea">${escapeHTML(content)}</textarea>
+      <div class="editor-footer">
+        <button id="saveBtn" class="btn btn-primary">${t("save")}</button>
+        <button id="closeBtn" class="btn btn-secondary">${t("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("api/file/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));
+}

public/js/fileListView.js

@@ -0,0 +1,654 @@
+// fileListView.js
+import {
+    escapeHTML,
+    debounce,
+    buildSearchAndPaginationControls,
+    buildFileTableHeader,
+    buildFileTableRow,
+    buildBottomControls,
+    updateFileActionButtons,
+    showToast,
+    updateRowHighlight,
+    toggleRowSelection,
+    attachEnterKeyListener
+} from './domUtils.js';
+import { t } from './i18n.js';
+import { bindFileListContextMenu } from './fileMenu.js';
+import { openDownloadModal } from './fileActions.js';
+import { openTagModal, openMultiTagModal } from './fileTags.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"
+
+// Global flag for advanced search mode.
+window.advancedSearchEnabled = false;
+
+/**
+ * --- Helper Functions ---
+ */
+
+/**
+ * Convert a file size string (e.g. "456.9KB", "1.2 MB", "1024") into bytes.
+ */
+function parseSizeToBytes(sizeStr) {
+    if (!sizeStr) return 0;
+    let s = sizeStr.trim();
+    let value = parseFloat(s);
+    let upper = s.toUpperCase();
+    if (upper.includes("KB")) {
+        value *= 1024;
+    } else if (upper.includes("MB")) {
+        value *= 1024 * 1024;
+    } else if (upper.includes("GB")) {
+        value *= 1024 * 1024 * 1024;
+    }
+    return value;
+}
+
+/**
+ * Format the total bytes as a human-readable string.
+ */
+function formatSize(totalBytes) {
+    if (totalBytes < 1024) {
+        return totalBytes + " Bytes";
+    } else if (totalBytes < 1024 * 1024) {
+        return (totalBytes / 1024).toFixed(2) + " KB";
+    } else if (totalBytes < 1024 * 1024 * 1024) {
+        return (totalBytes / (1024 * 1024)).toFixed(2) + " MB";
+    } else {
+        return (totalBytes / (1024 * 1024 * 1024)).toFixed(2) + " GB";
+    }
+}
+
+/**
+ * Build the folder summary HTML using the filtered file list.
+ */
+function buildFolderSummary(filteredFiles) {
+    const totalFiles = filteredFiles.length;
+    const totalBytes = filteredFiles.reduce((sum, file) => {
+        return sum + parseSizeToBytes(file.size);
+    }, 0);
+    const sizeStr = formatSize(totalBytes);
+    return `<strong>${t('total_files')}:</strong> ${totalFiles} &nbsp;|&nbsp; <strong>${t('total_size')}:</strong> ${sizeStr}`;
+}
+
+/**
+ * --- Advanced Search Toggle ---
+ * Toggles advanced search mode. When enabled, the search will include additional keys (e.g. "content").
+ */
+function toggleAdvancedSearch() {
+    window.advancedSearchEnabled = !window.advancedSearchEnabled;
+    const advancedBtn = document.getElementById("advancedSearchToggle");
+    if (advancedBtn) {
+        advancedBtn.textContent = window.advancedSearchEnabled ? "Basic Search" : "Advanced Search";
+    }
+    // Re-run the file table rendering with updated search settings.
+    renderFileTable(window.currentFolder);
+}
+
+window.imageCache = window.imageCache || {};
+function cacheImage(imgElem, key) {
+    // Save the current src for future renders.
+    window.imageCache[key] = imgElem.src;
+}
+window.cacheImage = cacheImage;
+
+/**
+ * --- Fuse.js Search Helper ---
+ * Uses Fuse.js to perform a fuzzy search on fileData.
+ * By default, searches over file name, uploader, and tag names.
+ * When advanced search is enabled, it also includes the 'content' property.
+ */
+function searchFiles(searchTerm) {
+    if (!searchTerm) return fileData;
+
+    // Define search keys.
+    let keys = [
+        { name: 'name', weight: 0.1 },
+        { name: 'uploader', weight: 0.1 },
+        { name: 'tags.name', weight: 0.1 }
+    ];
+    if (window.advancedSearchEnabled) {
+        keys.push({ name: 'content', weight: 0.7 });
+    }
+
+    const options = {
+        keys: keys,
+        threshold: 0.4,
+        minMatchCharLength: 2,
+        ignoreLocation: true
+    };
+
+    const fuse = new Fuse(fileData, options);
+    let results = fuse.search(searchTerm);
+    return results.map(result => result.item);
+}
+
+/**
+ * --- 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-toggleview");
+
+        // Set initial icon and tooltip based on current view mode.
+        if (window.viewMode === "gallery") {
+            toggleBtn.innerHTML = '<i class="material-icons">view_list</i>';
+            toggleBtn.title = t("switch_to_table_view");
+        } else {
+            toggleBtn.innerHTML = '<i class="material-icons">view_module</i>';
+            toggleBtn.title = t("switch_to_gallery_view");
+        }
+
+        // Insert the button before the last button in the header.
+        const headerButtons = document.querySelector(".header-buttons");
+        if (headerButtons && headerButtons.lastElementChild) {
+            headerButtons.insertBefore(toggleBtn, headerButtons.lastElementChild);
+        } else if (headerButtons) {
+            headerButtons.appendChild(toggleBtn);
+        }
+    }
+
+    toggleBtn.onclick = () => {
+        window.viewMode = window.viewMode === "gallery" ? "table" : "gallery";
+        localStorage.setItem("viewMode", window.viewMode);
+        loadFileList(window.currentFolder);
+        if (window.viewMode === "gallery") {
+            toggleBtn.innerHTML = '<i class="material-icons">view_list</i>';
+            toggleBtn.title = t("switch_to_table_view");
+        } else {
+            toggleBtn.innerHTML = '<i class="material-icons">view_module</i>';
+            toggleBtn.title = t("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;
+
+/**
+ * --- 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("api/file/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 = "/api/auth/logout.php";
+                throw new Error("Unauthorized");
+            }
+            return response.json();
+        })
+        .then(data => {
+            fileListContainer.innerHTML = ""; // Clear loading message.
+            if (data.files && Object.keys(data.files).length > 0) {
+                // If the returned "files" is an object instead of an array, transform it.
+                if (!Array.isArray(data.files)) {
+                    data.files = Object.entries(data.files).map(([name, meta]) => {
+                        meta.name = name;
+                        return meta;
+                    });
+                }
+                // Process each file – add computed properties.
+                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";
+                    }
+                    // OPTIONAL: For text documents, preload content (if available from backend)
+                    // Example: if (/\.txt|html|md|js|css|json|xml$/i.test(file.name)) { file.content = file.content || ""; }
+                    return file;
+                });
+                fileData = data.files;
+
+                // Update file summary.
+                const actionsContainer = document.getElementById("fileListActions");
+                if (actionsContainer) {
+                    let summaryElem = document.getElementById("fileSummary");
+                    if (!summaryElem) {
+                        summaryElem = document.createElement("div");
+                        summaryElem.id = "fileSummary";
+                        summaryElem.style.float = "right";
+                        summaryElem.style.marginLeft = "auto";
+                        summaryElem.style.marginRight = "60px";
+                        summaryElem.style.fontSize = "0.9em";
+                        actionsContainer.appendChild(summaryElem);
+                    } else {
+                        summaryElem.style.display = "block";
+                    }
+                    summaryElem.innerHTML = buildFolderSummary(fileData);
+                }
+
+                // Render view based on the view mode.
+                if (window.viewMode === "gallery") {
+                    renderGalleryView(folder);
+                    updateFileActionButtons();
+                } else {
+                    renderFileTable(folder);
+                }
+            } else {
+                fileListContainer.textContent = t("no_files_found");
+                const summaryElem = document.getElementById("fileSummary");
+                if (summaryElem) {
+                    summaryElem.style.display = "none";
+                }
+                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";
+        });
+}
+
+/**
+ * Update renderFileTable so it writes its content into the provided container.
+ */
+export function renderFileTable(folder, container) {
+    const fileListContent = container || document.getElementById("fileList");
+    const searchTerm = (window.currentSearchTerm || "").toLowerCase();
+    const itemsPerPageSetting = parseInt(localStorage.getItem("itemsPerPage") || "10", 10);
+    let currentPage = window.currentPage || 1;
+
+    // Use Fuse.js search via our helper function.
+    const filteredFiles = searchFiles(searchTerm);
+
+    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("/") + "/";
+
+    // Build the top controls and append the advanced search toggle button.
+    const topControlsHTML = buildSearchAndPaginationControls({
+        currentPage,
+        totalPages,
+        searchTerm: window.currentSearchTerm || ""
+    });
+
+    const combinedTopHTML = topControlsHTML;
+
+    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="${t('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);
+
+    fileListContent.innerHTML = combinedTopHTML + headerHTML + rowsHTML + bottomControlsHTML;
+
+    createViewToggleButton();
+
+    // Setup event listeners.
+    const newSearchInput = document.getElementById("searchInput");
+    if (newSearchInput) {
+        newSearchInput.addEventListener("input", debounce(function () {
+            window.currentSearchTerm = newSearchInput.value;
+            window.currentPage = 1;
+            renderFileTable(folder, container);
+            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();
+    document.querySelectorAll("#fileList tbody tr").forEach(row => {
+        row.setAttribute("draggable", "true");
+        import('./fileDragDrop.js').then(module => {
+            row.addEventListener("dragstart", module.fileDragStartHandler);
+        });
+    });
+    document.querySelectorAll(".download-btn, .edit-btn, .rename-btn").forEach(btn => {
+        btn.addEventListener("click", e => e.stopPropagation());
+    });
+    bindFileListContextMenu();
+}
+
+// A helper to compute the max image height based on the current column count.
+function getMaxImageHeight() {
+    const columns = parseInt(window.galleryColumns || 3, 10);
+    return 150 * (7 - columns); // adjust the multiplier as needed.
+}
+
+export function renderGalleryView(folder, container) {
+    const fileListContent = container || document.getElementById("fileList");
+    const searchTerm = (window.currentSearchTerm || "").toLowerCase();
+    const filteredFiles = searchFiles(searchTerm);
+    const folderPath = folder === "root"
+        ? "uploads/"
+        : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
+
+    // Use the current global column value (default to 3).
+    const numColumns = window.galleryColumns || 3;
+
+    // --- Insert slider controls ---
+    const sliderHTML = `
+      <div class="gallery-slider" style="margin: 10px; text-align: center;">
+        <label for="galleryColumnsSlider" style="margin-right: 5px;">${t('columns')}:</label>
+        <input type="range" id="galleryColumnsSlider" min="1" max="6" value="${numColumns}" style="vertical-align: middle;">
+        <span id="galleryColumnsValue">${numColumns}</span>
+      </div>
+    `;
+
+    // Set up the grid container using the slider's current value.
+    const gridStyle = `display: grid; grid-template-columns: repeat(${numColumns}, 1fr); gap: 10px; padding: 10px;`;
+
+    // Build the gallery container HTML including the slider.
+    let galleryHTML = sliderHTML;
+    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)) {
+            const cacheKey = folderPath + encodeURIComponent(file.name);
+            if (window.imageCache && window.imageCache[cacheKey]) {
+                thumbnail = `<img src="${window.imageCache[cacheKey]}" class="gallery-thumbnail" alt="${escapeHTML(file.name)}" style="max-width: 100%; max-height: ${getMaxImageHeight()}px; display: block; margin: 0 auto;">`;
+            } else {
+                const imageUrl = folderPath + encodeURIComponent(file.name) + "?t=" + new Date().getTime();
+                thumbnail = `<img src="${imageUrl}" onload="cacheImage(this, '${cacheKey}')" class="gallery-thumbnail" alt="${escapeHTML(file.name)}" style="max-width: 100%; max-height: ${getMaxImageHeight()}px; display: block; margin: 0 auto;">`;
+            }
+        } 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; white-space: normal; overflow-wrap: break-word; word-wrap: break-word;">${escapeHTML(file.name)}</span>
+            ${tagBadgesHTML}
+            <div class="button-wrap" style="display: flex; justify-content: center; gap: 5px;">
+              <button type="button" class="btn btn-sm btn-success download-btn" 
+                  onclick="openDownloadModal('${file.name}', '${file.folder || 'root'}')" 
+                  title="${t('download')}">
+                  <i class="material-icons">file_download</i>
+              </button>
+              ${file.editable ? `
+                <button class="btn btn-sm edit-btn" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})' title="${t('Edit')}">
+                  <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="${t('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="${t('share')}">
+                 <i class="material-icons">share</i>
+              </button>
+            </div>
+          </div>
+        </div>`;
+    });
+    galleryHTML += "</div>"; // End gallery container.
+
+    fileListContent.innerHTML = galleryHTML;
+
+    // Re-apply slider constraints for the newly rendered slider.
+    updateSliderConstraints();
+    createViewToggleButton();
+    // Attach share button event listeners.
+    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);
+            if (file) {
+                import('./filePreview.js').then(module => {
+                    module.openShareModal(file, folder);
+                });
+            }
+        });
+    });
+
+    // --- Slider Event Listener ---
+    const slider = document.getElementById("galleryColumnsSlider");
+    if (slider) {
+        slider.addEventListener("input", function () {
+            const value = this.value;
+            document.getElementById("galleryColumnsValue").textContent = value;
+            window.galleryColumns = value;
+            const galleryContainer = document.querySelector(".gallery-container");
+            if (galleryContainer) {
+                galleryContainer.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
+            }
+            const newMaxHeight = getMaxImageHeight();
+            document.querySelectorAll(".gallery-thumbnail").forEach(img => {
+                img.style.maxHeight = newMaxHeight + "px";
+            });
+        });
+    }
+}
+
+// Responsive slider constraints based on screen size.
+function updateSliderConstraints() {
+    const slider = document.getElementById("galleryColumnsSlider");
+    if (!slider) return;
+
+    const width = window.innerWidth;
+    let min = 1;
+    let max;
+
+    // Set maximum based on screen size.
+    if (width < 600) {           // small devices (phones)
+        max = 2;
+    } else if (width < 1024) {     // medium devices
+        max = 3;
+    } else if (width < 1440) {     // between medium and large devices
+        max = 4;
+    } else {                     // large devices and above
+        max = 6;
+    }
+
+    // Adjust the slider's current value if needed
+    let currentVal = parseInt(slider.value, 10);
+    if (currentVal > max) {
+        currentVal = max;
+        slider.value = max;
+    }
+
+    slider.min = min;
+    slider.max = max;
+    document.getElementById("galleryColumnsValue").textContent = currentVal;
+
+    // Update the grid layout based on the current slider value.
+    const galleryContainer = document.querySelector(".gallery-container");
+    if (galleryContainer) {
+        galleryContainer.style.gridTemplateColumns = `repeat(${currentVal}, 1fr)`;
+    }
+}
+
+window.addEventListener('load', updateSliderConstraints);
+window.addEventListener('resize', updateSliderConstraints);
+
+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;
+window.toggleAdvancedSearch = toggleAdvancedSearch;

public/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"));
+      });
+    }
+  }
+});

public/js/fileMenu.js

@@ -0,0 +1,156 @@
+// fileMenu.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';
+import { t } from './i18n.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: t("delete_selected"), action: () => { handleDeleteSelected(new Event("click")); } },
+    { label: t("copy_selected"), action: () => { handleCopySelected(new Event("click")); } },
+    { label: t("move_selected"), action: () => { handleMoveSelected(new Event("click")); } },
+    { label: t("download_zip"), action: () => { handleDownloadZipSelected(new Event("click")); } }
+  ];
+  
+  if (selected.some(name => name.toLowerCase().endsWith(".zip"))) {
+    menuItems.push({
+      label: t("extract_zip"),
+      action: () => { handleExtractZipSelected(new Event("click")); }
+    });
+  }
+  
+  if (selected.length > 1) {
+    menuItems.push({
+      label: t("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: t("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: t("edit"),
+        action: () => { editFile(selected[0], window.currentFolder); }
+      });
+    }
+    
+    menuItems.push({
+      label: t("rename"),
+      action: () => { renameFile(selected[0], window.currentFolder); }
+    });
+    
+    menuItems.push({
+      label: t("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();
+  };
+})();