From 426e3af0f6ab803bd0296b62cee2aadb4b2ec152 Mon Sep 17 00:00:00 2001
From: Christian Krakau-Louis <christianlouis@gmail.com>
Date: Tue, 25 Mar 2025 22:05:43 +0100
Subject: [PATCH] Update frontend/index.html

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 frontend/index.html | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 06d56a91..6c183692 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -73,11 +73,27 @@
           if (resp.ok) {
             const data = await resp.json();
             // data.picture is expected to be a Gravatar URL
-            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>
-            `;
+            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>`;