🎨 Palette: Add Loading States to Auth Forms

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2026-06-04 - Missing Loading State on Authentication Forms
+**Learning:** Found that auth forms (login and register) in the vanilla JS app don't show a loading state on the submit button, keeping it clickable and confusing users during the API call. Also `.btn:disabled` styles were missing.
+**Action:** Implemented async loading states with try/finally to ensure the UI handles API delays gracefully and buttons visually reflect the loading state.

web-demo/css/style.css

@@ -218,6 +218,11 @@ body {
     transition: all 0.3s ease;
 }
 
+.btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
 .btn-primary {
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white;

web-demo/js/app.js

@@ -144,6 +144,14 @@ class ClimaAI {
         e.preventDefault();
         const email = document.getElementById('loginEmail').value;
         const password = document.getElementById('loginPassword').value;
+        const submitBtn = e.submitter;
+        let originalText = '';
+
+        if (submitBtn) {
+            originalText = submitBtn.innerHTML;
+            submitBtn.innerHTML = 'Loading...';
+            submitBtn.disabled = true;
+        }
 
         try {
             this.showToast('Logging in...', 'info');
@@ -155,6 +163,11 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Login failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.innerHTML = originalText;
+                submitBtn.disabled = false;
+            }
         }
     }
 
@@ -163,6 +176,14 @@ class ClimaAI {
         const name = document.getElementById('registerName').value;
         const email = document.getElementById('registerEmail').value;
         const password = document.getElementById('registerPassword').value;
+        const submitBtn = e.submitter;
+        let originalText = '';
+
+        if (submitBtn) {
+            originalText = submitBtn.innerHTML;
+            submitBtn.innerHTML = 'Loading...';
+            submitBtn.disabled = true;
+        }
 
         try {
             this.showToast('Creating account...', 'info');
@@ -174,6 +195,11 @@ class ClimaAI {
             this.checkSubscription();
         } catch (error) {
             this.showToast(error.message || 'Registration failed', 'error');
+        } finally {
+            if (submitBtn) {
+                submitBtn.innerHTML = originalText;
+                submitBtn.disabled = false;
+            }
         }
     }