Update static/login.html

static/login.html

@@ -49,102 +49,98 @@
     </div>
 
 <script>
-    // Since this file is served from the same origin as the API, no base URL is needed.
-    const API_BASE_URL = ''; 
+    // --- FIX: Wait for the page to load before trying to find elements ---
+    document.addEventListener('DOMContentLoaded', () => {
 
-    const loginForm = document.getElementById('loginForm');
-    const signupBtn = document.getElementById('signupBtn');
-    const loginBtn = document.getElementById('loginBtn');
-    const messageEl = document.getElementById('message');
+        // Since this file is served from the same origin as the API, no base URL is needed.
+        const API_BASE_URL = ''; 
 
-    // --- LOGIN LOGIC ---
-    loginForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        messageEl.textContent = '';
-        loginBtn.disabled = true; // Prevent double-clicking
+        // --- FIX: Declarations are now INSIDE the listener ---
+        const loginForm = document.getElementById('loginForm');
+        const signupBtn = document.getElementById('signupBtn');
+        const loginBtn = document.getElementById('loginBtn');
+        const messageEl = document.getElementById('message');
 
-        // 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);
+        // --- LOGIN LOGIC ---
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            messageEl.textContent = '';
+            loginBtn.disabled = true; // This will now work correctly
 
-        try {
-            const response = await fetch(`${API_BASE_URL}/token`, {
-                method: 'POST',
-                body: formData
-            });
+            const formData = new FormData();
+            formData.append('username', e.target.username.value);
+            formData.append('password', e.target.password.value);
 
-            if (response.ok) {
-                // *** THE FIX IS HERE: Parse the JSON response before using it ***
-                const data = await response.json(); 
-                const token = data.access_token;
+            try {
+                const response = await fetch(`${API_BASE_URL}/token`, {
+                    method: 'POST',
+                    body: formData
+                });
 
-                // 1. Save token to this page's localStorage as a fallback.
-                localStorage.setItem('accessToken', token);
+                if (response.ok) {
+                    const data = await response.json(); 
+                    const token = data.access_token;
 
-                // 2. Send the token to the parent window (your local Settings.html)
-                if (window.parent) {
-                    // The second argument is the target origin. '*' is required to allow
-                    // communication with a local file (file://).
-                    window.parent.postMessage({ accessToken: token }, '*');
-                }
-                
-                // 3. Update UI to confirm success.
-                messageEl.style.color = 'green';
-                messageEl.textContent = 'Login Successful! You can return to the settings page.';
+                    localStorage.setItem('accessToken', token);
 
-            } else {
-                const errorData = await response.json();
+                    if (window.parent) {
+                        window.parent.postMessage({ accessToken: token }, '*');
+                    }
+                    
+                    messageEl.style.color = 'green';
+                    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.style.color = 'red';
-                messageEl.textContent = errorData.detail || 'Login failed.';
+                messageEl.textContent = 'An error occurred. Please try again.';
+            } finally {
+                loginBtn.disabled = false; // This will also work correctly
             }
-        } catch (error) {
-            console.error('Login error:', error);
-            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;
+        // --- SIGNUP LOGIC ---
+        signupBtn.addEventListener('click', async () => {
+            messageEl.textContent = '';
+            signupBtn.disabled = true;
 
-        const username = loginForm.username.value;
-        const password = loginForm.password.value;
+            const username = loginForm.username.value;
+            const password = loginForm.password.value;
 
-        if (!username || !password) {
-            messageEl.style.color = 'red';
-            messageEl.textContent = 'Please enter a username and password to sign up.';
-            signupBtn.disabled = false;
-            return;
-        }
+            if (!username || !password) {
+                messageEl.style.color = 'red';
+                messageEl.textContent = 'Please enter a username and password to sign up.';
+                signupBtn.disabled = false;
+                return;
+            }
 
-        try {
-            const response = await fetch(`${API_BASE_URL}/signup`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username, password })
-            });
+            try {
+                const response = await fetch(`${API_BASE_URL}/signup`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password })
+                });
 
-            if (response.status === 201) {
-                messageEl.style.color = 'green';
-                messageEl.textContent = 'Signup successful! Please log in now.';
-            } else {
-                const errorData = await response.json();
+                if (response.status === 201) {
+                    messageEl.style.color = 'green';
+                    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.style.color = 'red';
-                messageEl.textContent = errorData.detail || 'Signup failed.';
+                messageEl.textContent = 'An error occurred. Please try again.';
+            } finally {
+                signupBtn.disabled = false;
             }
-        } catch (error) {
-            console.error('Signup error:', error);
-            messageEl.style.color = 'red';
-            messageEl.textContent = 'An error occurred. Please try again.';
-        } finally {
-            signupBtn.disabled = false;
-        }
+        });
     });
 </script>
 </body>