Update static/login.html

static/login.html

@@ -49,17 +49,21 @@
     </div>
 
 <script>
-    // In a Hugging Face Space, the API is at the same origin, so no base URL is needed.
+    // Since this file is served from the same origin as the API, no base URL is needed.
     const API_BASE_URL = ''; 
 
     const loginForm = document.getElementById('loginForm');
     const signupBtn = document.getElementById('signupBtn');
+    const loginBtn = document.getElementById('loginBtn');
     const messageEl = document.getElementById('message');
 
+    // --- LOGIN LOGIC ---
     loginForm.addEventListener('submit', async (e) => {
         e.preventDefault();
         messageEl.textContent = '';
+        loginBtn.disabled = true; // Prevent double-clicking
 
+        // FormData is used because the /token endpoint expects "form" data
         const formData = new FormData();
         formData.append('username', e.target.username.value);
         formData.append('password', e.target.password.value);
@@ -71,35 +75,51 @@
             });
 
             if (response.ok) {
-                const token = data.access_token; // 'data' is the response from the /token endpoint
+                // *** THE FIX IS HERE: Parse the JSON response before using it ***
+                const data = await response.json(); 
+                const token = data.access_token;
+
+                // 1. Save token to this page's localStorage as a fallback.
                 localStorage.setItem('accessToken', token);
-                
-                // Send the token to the parent window (Settings.html)
+
+                // 2. Send the token to the parent window (your local Settings.html)
                 if (window.parent) {
-                    // The second argument is the target origin. '*' is less secure but works for local files.
-                    window.parent.postMessage({ accessToken: token }, '*'); 
+                    // The second argument is the target origin. '*' is required to allow
+                    // communication with a local file (file://).
+                    window.parent.postMessage({ accessToken: token }, '*');
                 }
                 
-                // Update UI to show success message instead of redirecting
+                // 3. Update UI to confirm success.
                 messageEl.style.color = 'green';
-                messageEl.textContent = 'Login successful! You can now close this window.';
+                messageEl.textContent = 'Login Successful! You can return to the settings page.';
+
             } else {
                 const errorData = await response.json();
+                messageEl.style.color = 'red';
                 messageEl.textContent = errorData.detail || 'Login failed.';
             }
         } catch (error) {
             console.error('Login error:', error);
-            messageEl.textContent = 'An error occurred. Check console.';
+            messageEl.style.color = 'red';
+            messageEl.textContent = 'An error occurred. Please try again.';
+        } finally {
+            loginBtn.disabled = false; // Re-enable the button
         }
     });
 
+
+    // --- SIGNUP LOGIC ---
     signupBtn.addEventListener('click', async () => {
         messageEl.textContent = '';
+        signupBtn.disabled = true;
+
         const username = loginForm.username.value;
         const password = loginForm.password.value;
 
         if (!username || !password) {
-            messageEl.textContent = 'Please enter username and password to sign up.';
+            messageEl.style.color = 'red';
+            messageEl.textContent = 'Please enter a username and password to sign up.';
+            signupBtn.disabled = false;
             return;
         }
 
@@ -115,11 +135,15 @@
                 messageEl.textContent = 'Signup successful! Please log in now.';
             } else {
                 const errorData = await response.json();
+                messageEl.style.color = 'red';
                 messageEl.textContent = errorData.detail || 'Signup failed.';
             }
         } catch (error) {
             console.error('Signup error:', error);
-            messageEl.textContent = 'An error occurred. Check console.';
+            messageEl.style.color = 'red';
+            messageEl.textContent = 'An error occurred. Please try again.';
+        } finally {
+            signupBtn.disabled = false;
         }
     });
 </script>