added basic functionality

app/templates/index.html

@@ -36,7 +36,32 @@
   <!-- Header -->
   <header class="bg-surface border-b border-border shadow-sm">
     <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
-      <div class="text-sm text-muted font-medium">{{ user_name }}</div>
+      <!-- Editable Username Form -->
+      <form method="POST" action="/retrieve-token" class="flex items-center space-x-2">
+        <input
+          type="text"
+          name="user_name"
+          value="{{ user_name }}"
+          class="bg-transparent text-muted text-sm font-medium px-2 py-1 rounded-md border border-transparent focus:border-primary focus:outline-none focus:bg-background"
+          readonly
+          id="usernameInput"
+        />
+        <button
+          type="button"
+          onclick="enableUsernameEdit()"
+          class="text-sm text-primary hover:underline"
+          id="editBtn"
+        >
+          Edit
+        </button>
+        <button
+          type="submit"
+          class="hidden text-sm text-white bg-primary px-3 py-1 rounded-md hover:bg-blue-700"
+          id="saveBtn"
+        >
+          Save
+        </button>
+      </form>
       <div class="text-lg font-semibold">GRNVS Tutorium</div>
       <a href="/admin">
         <button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-md transition">
@@ -104,5 +129,19 @@
   </main>
 
   <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
+  <script>
+    function enableUsernameEdit() {
+      const input = document.getElementById('usernameInput');
+      const editBtn = document.getElementById('editBtn');
+      const saveBtn = document.getElementById('saveBtn');
+
+      input.removeAttribute('readonly');
+      input.classList.add('border-border');
+      input.focus();
+
+      editBtn.classList.add('hidden');
+      saveBtn.classList.remove('hidden');
+    }
+  </script>
 </body>
 </html>