add endpoint and UI for users to update their own username

static/app.js

@@ -14,6 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const usersList = document.getElementById('users-list');
     const createUserForm = document.getElementById('create-user-form');
     const changePasswordForm = document.getElementById('change-password-form');
+    const changeUsernameForm = document.getElementById('change-username-form');
     const profileSuccess = document.getElementById('profile-success');
     const helpBtn = document.getElementById('help-btn');
     const helpModal = document.getElementById('help-modal');
@@ -265,6 +266,7 @@ document.addEventListener('DOMContentLoaded', () => {
         } else {
             navAdmin.style.display = 'none';
         }
+        document.getElementById('profile-username').value = currentUser.username;
     };
 
     logoutBtn.addEventListener('click', async () => {
@@ -277,6 +279,28 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    changeUsernameForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const username = document.getElementById('profile-username').value;
+        try {
+            const res = await fetch('/api/users/me/username', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username })
+            });
+            if (res.ok) {
+                currentUser.username = username;
+                profileSuccess.style.display = 'block';
+                setTimeout(() => profileSuccess.style.display = 'none', 3000);
+            } else {
+                const data = await res.json();
+                alert(data.detail || 'Failed to update username');
+            }
+        } catch (e) {
+            console.error('Error changing username', e);
+        }
+    });
+
     createUserForm.addEventListener('submit', async (e) => {
         e.preventDefault();
         const username = document.getElementById('new-username').value;