fixed 404

frontend/upload.html

@@ -114,17 +114,35 @@
         }
       }
 
-      // Dynamic auth check using /api/whoami
+      <!-- JavaScript for dynamic auth section -->
+
       (async function checkAuth() {
         try {
           const resp = await fetch("/api/whoami");
           if (resp.ok) {
             const data = await resp.json();
-            document.getElementById("authSection").innerHTML = `
-              <img src="${data.picture}" alt="User Avatar" class="inline-block h-8 w-8 rounded-full mr-2">
-              Logged in as <strong>${data.email}</strong>
-              <a href="/logout" class="ml-4 text-blue-600 hover:text-blue-800">Logout</a>
-            `;
+            // data.picture is expected to be a Gravatar URL
+            const authSection = document.getElementById("authSection");
+            authSection.innerHTML = '';
+            
+            const img = document.createElement('img');
+            img.src = data.picture;
+            img.alt = 'User Avatar';
+            img.className = 'inline-block h-8 w-8 rounded-full mr-2';
+            
+            const textNode = document.createTextNode('Logged in as ');
+            const strong = document.createElement('strong');
+            strong.textContent = data.email;
+            
+            const logoutLink = document.createElement('a');
+            logoutLink.href = '/logout';
+            logoutLink.className = 'ml-4 text-blue-600 hover:text-blue-800';
+            logoutLink.textContent = 'Logout';
+            
+            authSection.appendChild(img);
+            authSection.appendChild(textNode);
+            authSection.appendChild(strong);
+            authSection.appendChild(logoutLink);
           } else {
             document.getElementById("authSection").innerHTML = 
               `<a href="/login" class="text-blue-600">Login</a>`;