Failed login feedback

web/static/js/app.js

@@ -33,28 +33,25 @@ class MailingListApp {
      * Setup event listeners
      */
     setupEventListeners() {
-        // Login/logout
-        document.getElementById('loginBtn').addEventListener('click', () => {
+        // Login form submission
+        document.getElementById('loginForm').addEventListener('submit', (e) => {
+            e.preventDefault();
             this.handleLogin();
         });
 
+        // Clear error when user starts typing
+        document.getElementById('username').addEventListener('input', () => {
+            this.clearLoginError();
+        });
+
+        document.getElementById('password').addEventListener('input', () => {
+            this.clearLoginError();
+        });
+
         document.getElementById('logoutBtn').addEventListener('click', () => {
             this.logout();
         });
 
-        // Enter key in login inputs
-        document.getElementById('username').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                this.handleLogin();
-            }
-        });
-
-        document.getElementById('password').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                this.handleLogin();
-            }
-        });
-
         // Bulk import button
         document.getElementById('showBulkImportBtn').addEventListener('click', () => {
             uiManager.showBulkImportModal();
@@ -91,14 +88,53 @@ class MailingListApp {
         const username = usernameInput.value.trim();
         const password = passwordInput.value.trim();
         
+        // Clear previous error states
+        this.clearLoginError();
+        
         if (!username || !password) {
-            uiManager.showNotification('Please enter both username and password', 'error');
+            this.showLoginError('Please enter both username and password');
             return;
         }
         
         await this.login(username, password);
     }
 
+    /**
+     * Show login error message
+     */
+    showLoginError(message) {
+        const errorDiv = document.getElementById('loginError');
+        const errorMessage = document.getElementById('loginErrorMessage');
+        const usernameInput = document.getElementById('username');
+        const passwordInput = document.getElementById('password');
+        
+        errorMessage.textContent = message;
+        errorDiv.style.display = 'flex';
+        
+        // Add error class to inputs
+        usernameInput.classList.add('error');
+        passwordInput.classList.add('error');
+        
+        // Remove animation class and re-add to trigger animation
+        errorDiv.style.animation = 'none';
+        setTimeout(() => {
+            errorDiv.style.animation = '';
+        }, 10);
+    }
+
+    /**
+     * Clear login error message
+     */
+    clearLoginError() {
+        const errorDiv = document.getElementById('loginError');
+        const usernameInput = document.getElementById('username');
+        const passwordInput = document.getElementById('password');
+        
+        errorDiv.style.display = 'none';
+        usernameInput.classList.remove('error');
+        passwordInput.classList.remove('error');
+    }
+
     /**
      * Authenticate with API
      */
@@ -124,7 +160,20 @@ class MailingListApp {
             apiClient.clearToken();
             localStorage.removeItem('authToken');
             
-            uiManager.handleError(error, 'Login failed');
+            // Show error on login form
+            let errorMessage = 'Login failed';
+            if (error.message) {
+                if (error.message.includes('401') || error.message.includes('Unauthorized') || 
+                    error.message.includes('Invalid') || error.message.includes('credentials')) {
+                    errorMessage = 'Invalid username or password';
+                } else if (error.message.includes('network') || error.message.includes('fetch')) {
+                    errorMessage = 'Unable to connect to server';
+                } else {
+                    errorMessage = error.message;
+                }
+            }
+            
+            this.showLoginError(errorMessage);
         } finally {
             uiManager.setLoading(false);
         }
@@ -153,8 +202,8 @@ class MailingListApp {
      * Show authenticated UI
      */
     showAuthenticatedUI() {
-        document.getElementById('authControls').style.display = 'none';
-        document.getElementById('userInfo').style.display = 'flex';
+        document.getElementById('loginPage').style.display = 'none';
+        document.getElementById('mainHeader').style.display = 'block';
         document.getElementById('mainContent').style.display = 'block';
         
         // Clear login inputs
@@ -180,8 +229,8 @@ class MailingListApp {
      * Show unauthenticated UI
      */
     showUnauthenticatedUI() {
-        document.getElementById('authControls').style.display = 'flex';
-        document.getElementById('userInfo').style.display = 'none';
+        document.getElementById('loginPage').style.display = 'flex';
+        document.getElementById('mainHeader').style.display = 'none';
         document.getElementById('mainContent').style.display = 'none';
     }