feat: Add new EJS view templates for file detail, my files, recent files, and upload pages.

Author: pphatdev

src/client/views/pages/detail.ejs

@@ -439,6 +439,19 @@
     let zoomLevel = 100;
     let rotation = 0;
 
+    const getAccessToken = () => {
+        const readCookie = (name) => {
+            const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+            if (match) return match[2];
+        };
+        return localStorage.getItem("accessToken") || readCookie("accessToken") || "";
+    };
+
+    const getAuthHeaders = () => {
+        const token = getAccessToken();
+        return token ? { 'Authorization': `Bearer ${token}` } : {};
+    };
+
     // File type mappings
     const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'tiff', 'tif', 'avif'];
     const videoExts = ['mp4', 'webm', 'ogg', 'ogv', 'mov', 'avi', 'mkv'];
@@ -613,7 +626,10 @@
             let fileSize = null;
             let lastModified = null;
             try {
-                const headRes = await fetch(fileUrl, { method: 'HEAD' });
+                const headRes = await fetch(fileUrl, { 
+                    method: 'HEAD',
+                    headers: getAuthHeaders()
+                });
                 if (headRes.ok) {
                     fileSize = parseInt(headRes.headers.get('content-length') || '0');
                     lastModified = headRes.headers.get('last-modified');
@@ -668,7 +684,9 @@
                 document.getElementById('preview-pdf').src = fileUrl;
                 pdfPreviewContainer.classList.remove('hidden');
             } else if (isCode || isText) {
-                const res = await fetch(fileUrl);
+                const res = await fetch(fileUrl, {
+                    headers: getAuthHeaders()
+                });
                 if (!res.ok) throw new Error('Failed to load file');
                 const text = await res.text();
                 document.getElementById('preview-text').textContent = text;

src/client/views/pages/my-file.ejs

@@ -177,6 +177,19 @@
     </div>
 
     <script type="module">
+        const getAccessToken = () => {
+            const readCookie = (name) => {
+                const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+                if (match) return match[2];
+            };
+            return localStorage.getItem("accessToken") || readCookie("accessToken") || "";
+        };
+
+        const getAuthHeaders = () => {
+            const token = getAccessToken();
+            return token ? { 'Authorization': `Bearer ${token}` } : {};
+        };
+
         // Initialize delete action handlers
         const initDeleteActions = () => {
             document.querySelectorAll('[data-action="delete"]').forEach(btn => {
@@ -194,7 +207,8 @@
                     if (confirm(`Are you sure you want to delete "${filename}"?`)) {
                         try {
                             const res = await fetch(`/api/file/delete/${filename}`, {
-                                method: 'DELETE'
+                                method: 'DELETE',
+                                headers: getAuthHeaders()
                             });
 
                             if (res.ok) {

src/client/views/pages/recent.ejs

@@ -210,6 +210,19 @@
         return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
     };
 
+    const getAccessToken = () => {
+        const readCookie = (name) => {
+            const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+            if (match) return match[2];
+        };
+        return localStorage.getItem("accessToken") || readCookie("accessToken") || "";
+    };
+
+    const getAuthHeaders = () => {
+        const token = getAccessToken();
+        return token ? { 'Authorization': `Bearer ${token}` } : {};
+    };
+
     const timeAgo = (isoString) => {
         if (!isoString) return '—';
         const time = new Date(isoString).getTime();
@@ -523,7 +536,10 @@
                 const filename = btn.getAttribute('data-filename');
                 if (filename && confirm('Are you sure you want to delete this file?')) {
                     try {
-                        const res = await fetch(`/api/file/delete/${encodeURIComponent(filename)}`, { method: 'DELETE' });
+                        const res = await fetch(`/api/file/delete/${encodeURIComponent(filename)}`, { 
+                            method: 'DELETE',
+                            headers: getAuthHeaders()
+                        });
                         if (res.ok) {
                             loadFiles();
                         } else {
@@ -554,7 +570,9 @@
     // Load files
     const loadFiles = async () => {
         try {
-            const response = await fetch('/api/database/files');
+            const response = await fetch('/api/database/files', {
+                headers: getAuthHeaders()
+            });
             if (!response.ok) throw new Error('Failed to load files');
             const data = await response.json();
             allFiles = Array.isArray(data?.result) ? data.result : [];

src/client/views/pages/upload.ejs

@@ -189,6 +189,19 @@
         return new Date(isoString).toLocaleDateString();
     };
 
+    const getAccessToken = () => {
+        const readCookie = (name) => {
+            const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+            if (match) return match[2];
+        };
+        return localStorage.getItem("accessToken") || readCookie("accessToken") || "";
+    };
+
+    const getAuthHeaders = () => {
+        const token = getAccessToken();
+        return token ? { 'Authorization': `Bearer ${token}` } : {};
+    };
+
     const renderRecentUploads = (files) => {
         if (!recentUploads) return;
         if (!files || files.length === 0) {
@@ -214,7 +227,9 @@
     const loadRecentUploads = async () => {
         if (!recentUploads) return;
         try {
-            const response = await fetch('/api/database/files');
+            const response = await fetch('/api/database/files', {
+                headers: getAuthHeaders()
+            });
             if (!response.ok) {
                 throw new Error('Failed to load uploads');
             }
@@ -369,6 +384,12 @@
             const xhr = new XMLHttpRequest();
             xhr.open('POST', uploadForm.action, true);
 
+            // Add Authorization header
+            const token = getAccessToken();
+            if (token) {
+                xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+            }
+
             if (storagePath && storagePath.value.trim()) {
                 xhr.setRequestHeader('storage', storagePath.value.trim());
             }