👀 feat: Implement initial client-side views including file upload, history, and general layout components.

pphatdev · pphatdev · commit 06551ef5f1c4 · 2026-02-21T10:27:24.000+07:00
diff --git a/src/client/views/components/header.ejs b/src/client/views/components/header.ejs
@@ -28,16 +28,22 @@
         </button>
 
         <div class="relative">
-            <button type="button" data-dropdown-toggle="user-menu" data-dropdown-placement="bottom-end" class="flex items-center gap-2 rounded-full border border-slate-200 bg-white p-0 shadow-sm hover:border-slate-300" aria-expanded="false" aria-haspopup="true">
-                <img id="user-avatar" src="https://ui-avatars.com/api/?name=User&background=0f766e&color=fff" alt="Avatar" class="w-9 h-9 rounded-full">
-                <!-- <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                </svg> -->
+            <button type="button" id="avatar-container" data-dropdown-toggle="user-menu" data-dropdown-placement="bottom-end" class="flex items-center gap-2 rounded-full border border-slate-200 bg-white p-0 shadow-sm hover:border-slate-300" aria-expanded="false" aria-haspopup="true">
+                <img id="user-avatar" src="https://ui-avatars.com/api/?name=User&background=0f766e&color=fff" alt="Avatar" class="w-9 h-9 rounded-full object-cover">
+                <input type="file" id="avatar-input" class="hidden" accept="image/jpeg,image/png,image/webp">
             </button>
 
             <div id="user-menu" class="hidden absolute right-0 mt-2 w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-lg">
                 <div class="flex items-center gap-3 border-b border-slate-100 pb-3">
-                    <img id="user-avatar-menu" src="https://ui-avatars.com/api/?name=User&background=0f766e&color=fff" alt="Avatar" class="w-10 h-10 rounded-full">
+                    <div class="relative group">
+                        <img id="user-avatar-menu" src="https://ui-avatars.com/api/?name=User&background=0f766e&color=fff" alt="Avatar" class="w-10 h-10 rounded-full object-cover">
+                        <button id="change-avatar-btn" class="absolute inset-0 bg-black/40 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity text-white" title="Change Avatar">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                            </svg>
+                        </button>
+                    </div>
                     <div>
                         <p id="user-name" class="text-sm font-semibold text-slate-900">User</p>
                         <p id="user-email" class="text-xs text-slate-500">user@stackdev.cloud</p>
@@ -62,62 +68,58 @@
     </div>
 </header>
 
-<script>
-    (function () {
-        const logoutButton = document.getElementById("logout-button");
+<script type="module">
+    import { authProvider } from '/utils/auth.js';
+
+    document.addEventListener("DOMContentLoaded", () => {
         const userName = document.getElementById("user-name");
         const userEmail = document.getElementById("user-email");
         const userAvatar = document.getElementById("user-avatar");
         const userAvatarMenu = document.getElementById("user-avatar-menu");
+        const avatarInput = document.getElementById("avatar-input");
+        const changeAvatarBtn = document.getElementById("change-avatar-btn");
+        const logoutButton = document.getElementById("logout-button");
 
-        const readCookie = (name) => {
-            return document.cookie
-                .split(";")
-                .map((cookie) => cookie.trim())
-                .find((cookie) => cookie.startsWith(`${name}=`))
-                ?.split("=")[1];
-        };
-
-        const clearCookie = (name) => {
-            document.cookie = `${name}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax`;
-        };
+        authProvider.subscribe((user) => {
+            if (user) {
+                if (userName) userName.textContent = user.name;
+                if (userEmail) userEmail.textContent = user.email || "";
+                
+                const defaultAvatar = `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=0f766e&color=fff`;
+                const avatarUrl = user.avatar || defaultAvatar;
 
-        try {
-            const storedUser = localStorage.getItem("user");
-            if (storedUser) {
-                const parsed = JSON.parse(storedUser);
-                if (parsed?.name && userName) userName.textContent = parsed.name;
-                if (parsed?.email && userEmail) userEmail.textContent = parsed.email;
-                if (parsed?.name && userAvatar && userAvatarMenu) {
-                    const avatarUrl = `https://ui-avatars.com/api/?name=${encodeURIComponent(parsed.name)}&background=0f766e&color=fff`;
-                    userAvatar.src = avatarUrl;
-                    userAvatarMenu.src = avatarUrl;
-                }
+                if (userAvatar) userAvatar.src = avatarUrl;
+                if (userAvatarMenu) userAvatarMenu.src = avatarUrl;
             }
-        } catch (error) {
-            // Ignore localStorage errors
-        }
+        });
 
-        if (!logoutButton) return;
+        if (changeAvatarBtn && avatarInput) {
+            changeAvatarBtn.addEventListener("click", (e) => {
+                e.stopPropagation();
+                avatarInput.click();
+            });
 
-        logoutButton.addEventListener("click", async () => {
-            const token = localStorage.getItem("accessToken") || readCookie("accessToken");
+            avatarInput.addEventListener("change", async (e) => {
+                const file = e.target.files[0];
+                if (!file) return;
 
-            if (token) {
-                await fetch("/api/auth/logout", {
-                    method: "POST",
-                    headers: {
-                        Authorization: `Bearer ${token}`
-                    }
-                }).catch(() => null);
-            }
+                try {
+                    changeAvatarBtn.disabled = true;
+                    await authProvider.uploadAvatar(file);
+                } catch (err) {
+                    console.error("Upload error:", err);
+                    alert(err.message || "Failed to upload avatar");
+                } finally {
+                    changeAvatarBtn.disabled = false;
+                    avatarInput.value = "";
+                }
+            });
+        }
 
-            localStorage.removeItem("accessToken");
-            localStorage.removeItem("refreshToken");
-            localStorage.removeItem("user");
-            clearCookie("accessToken");
-            clearCookie("refreshToken");
-            window.location.href = "/login";
-        });
-    })();
+        if (logoutButton) {
+            logoutButton.addEventListener("click", () => {
+                authProvider.logout();
+            });
+        }
+    });
 </script>
diff --git a/src/client/views/layouts/main.ejs b/src/client/views/layouts/main.ejs
@@ -26,6 +26,7 @@
         <%- include('../pages/' + (typeof page !== 'undefined' ? page : 'dashboard')); %>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
+    <script type="module" src="/utils/auth.js"></script>
     <script type="module" src="/utils/dropdown.js"></script>
     <script type="module" src="/utils/sidebar.js"></script>
 </body>
diff --git a/src/client/views/pages/detail.ejs b/src/client/views/pages/detail.ejs
@@ -416,7 +416,9 @@
     </div>
 </main>
 
-<script>
+<script type="module">
+    import { authProvider } from '/utils/auth.js';
+
     const loadBtn = document.getElementById('load-btn');
     const loadingState = document.getElementById('loading-state');
     const emptyState = document.getElementById('empty-state');
@@ -439,18 +441,7 @@
     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}` } : {};
-    };
+    // Auth helpers removed as they are handled by AuthProvider
 
     // File type mappings
     const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'tiff', 'tif', 'avif'];
@@ -628,7 +619,7 @@
             try {
                 const headRes = await fetch(fileUrl, { 
                     method: 'HEAD',
-                    headers: getAuthHeaders()
+                    headers: authProvider.getAuthHeaders()
                 });
                 if (headRes.ok) {
                     fileSize = parseInt(headRes.headers.get('content-length') || '0');
@@ -685,7 +676,7 @@
                 pdfPreviewContainer.classList.remove('hidden');
             } else if (isCode || isText) {
                 const res = await fetch(fileUrl, {
-                    headers: getAuthHeaders()
+                    headers: authProvider.getAuthHeaders()
                 });
                 if (!res.ok) throw new Error('Failed to load file');
                 const text = await res.text();
diff --git a/src/client/views/pages/my-file.ejs b/src/client/views/pages/my-file.ejs
@@ -177,18 +177,7 @@
     </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}` } : {};
-        };
+        import { authProvider } from '/utils/auth.js';
 
         // Initialize delete action handlers
         const initDeleteActions = () => {
@@ -208,7 +197,7 @@
                         try {
                             const res = await fetch(`/api/file/delete/${filename}`, {
                                 method: 'DELETE',
-                                headers: getAuthHeaders()
+                                headers: authProvider.getAuthHeaders()
                             });
 
                             if (res.ok) {
diff --git a/src/client/views/pages/recent.ejs b/src/client/views/pages/recent.ejs
@@ -159,7 +159,9 @@
     </div>
 </main>
 
-<script>
+<script type="module">
+    import { authProvider } from '/utils/auth.js';
+
     // Elements
     const recentSearch = document.getElementById('recent-search');
     const recentFilter = document.getElementById('recent-filter');
@@ -210,18 +212,7 @@
         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}` } : {};
-    };
+    // Auth helpers removed as they are handled by AuthProvider
 
     const timeAgo = (isoString) => {
         if (!isoString) return '—';
@@ -538,7 +529,7 @@
                     try {
                         const res = await fetch(`/api/file/delete/${encodeURIComponent(filename)}`, { 
                             method: 'DELETE',
-                            headers: getAuthHeaders()
+                            headers: authProvider.getAuthHeaders()
                         });
                         if (res.ok) {
                             loadFiles();
@@ -571,7 +562,7 @@
     const loadFiles = async () => {
         try {
             const response = await fetch('/api/database/files', {
-                headers: getAuthHeaders()
+                headers: authProvider.getAuthHeaders()
             });
             if (!response.ok) throw new Error('Failed to load files');
             const data = await response.json();
diff --git a/src/client/views/pages/upload-history.ejs b/src/client/views/pages/upload-history.ejs
@@ -103,7 +103,9 @@
     </div>
 </main>
 
-<script>
+<script type="module">
+    import { authProvider } from '/utils/auth.js';
+
     const historyTable = document.getElementById('history-table');
     const historySearch = document.getElementById('history-search');
     const historyFilter = document.getElementById('history-filter');
@@ -254,7 +256,9 @@
     const loadHistory = async () => {
         if (!historyTable) return;
         try {
-            const response = await fetch('/api/database/files');
+            const response = await fetch('/api/database/files', {
+                headers: authProvider.getAuthHeaders()
+            });
             if (!response.ok) {
                 throw new Error('Failed to load uploads');
             }
@@ -320,7 +324,10 @@
                 log('Attempting to delete file:', filename);
                 if (filename && confirm('Are you sure you want to delete this file?')) {
                     try {
-                        const res = await fetch(`/api/file/delete/${filename}`, { method: 'DELETE' });
+                        const res = await fetch(`/api/file/delete/${filename}`, { 
+                            method: 'DELETE',
+                            headers: authProvider.getAuthHeaders()
+                        });
                         if (res.ok) {
                             loadHistory();
                         } else {
diff --git a/src/client/views/pages/upload.ejs b/src/client/views/pages/upload.ejs
@@ -152,7 +152,9 @@
     </div>
 </main>
 
-<script>
+<script type="module">
+    import { authProvider } from '/utils/auth.js';
+
     const uploadInput = document.getElementById('upload-input');
     const uploadList = document.getElementById('upload-list');
     const clearButton = document.getElementById('clear-upload');
@@ -189,18 +191,7 @@
         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}` } : {};
-    };
+    // Auth helpers removed as they are handled by AuthProvider
 
     const renderRecentUploads = (files) => {
         if (!recentUploads) return;
@@ -228,7 +219,7 @@
         if (!recentUploads) return;
         try {
             const response = await fetch('/api/database/files', {
-                headers: getAuthHeaders()
+                headers: authProvider.getAuthHeaders()
             });
             if (!response.ok) {
                 throw new Error('Failed to load uploads');
@@ -385,9 +376,9 @@
             xhr.open('POST', uploadForm.action, true);
 
             // Add Authorization header
-            const token = getAccessToken();
-            if (token) {
-                xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+            const headers = authProvider.getAuthHeaders();
+            if (headers.Authorization) {
+                xhr.setRequestHeader('Authorization', headers.Authorization);
             }
 
             if (storagePath && storagePath.value.trim()) {
diff --git a/src/client/views/pages/users.ts b/src/client/views/pages/users.ts
