From f9a8e7b2545b662344a844b7cf15b57a4269ccd3 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sun, 14 Jun 2026 04:56:37 +0000 Subject: [PATCH] feat: Add async loading states to authentication forms This commit introduces async loading states to the Login, Register, and Google Sign-In buttons in `web-demo/js/app.js`. Changes made: - Passed the event object `e` explicitly in `setupEventListeners` for `handleGoogleSignIn`. - Extracted `e.submitter` or `e.currentTarget` at the start of `handleLogin`, `handleRegister`, and `handleGoogleSignIn` to safely manipulate the button that triggered the event. - Updated button UI to disable it, change the text to indicate loading (e.g., "Logging in...", "Connecting..."), and set `aria-busy="true"` for accessibility. - Refactored `setTimeout` in the Google Sign-In flow to use an awaitable Promise (`await new Promise(resolve => setTimeout(resolve, 1500))`) so the UI doesn't restore prematurely. - Wrapped API calls in `try...finally` blocks to guarantee UI state recovery (restoring original HTML, re-enabling the button, and removing `aria-busy`) regardless of API success or failure. - Documented these learnings in `.Jules/palette.md`. Co-authored-by: singhaditya21 <53948039+singhaditya21@users.noreply.github.com> --- .Jules/palette.md | 4 ++ web-demo/js/app.js | 92 ++++++++++++++++++++++++++++++++++------------ 2 files changed, 72 insertions(+), 24 deletions(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..c0ba716 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,4 @@ + +## 2026-06-14 - [Async Loading States in Forms] +**Learning:** When adding async loading states to vanilla JS form submit events, you must explicitly use `e.submitter` rather than generic selectors to reliably target the button that triggered the submission (crucial when multiple submit buttons exist or they lack explicit types). Also, placing the restoration logic in a `finally` block ensures the button recovers correctly even if the API call throws an error. Using `aria-busy="true"` on the active submitter enhances accessibility during processing. +**Action:** Always intercept form submissions using the `e.submitter` property and wrap the async API call in a `try...finally` block to handle UI state restoration robustly. diff --git a/web-demo/js/app.js b/web-demo/js/app.js index 11508de..1e21079 100644 --- a/web-demo/js/app.js +++ b/web-demo/js/app.js @@ -65,7 +65,7 @@ class ClimaAI { setupEventListeners() { // Auth - document.getElementById('googleSignInBtn').addEventListener('click', () => this.handleGoogleSignIn()); + document.getElementById('googleSignInBtn').addEventListener('click', (e) => this.handleGoogleSignIn(e)); document.getElementById('loginForm').addEventListener('submit', (e) => this.handleLogin(e)); document.getElementById('registerForm').addEventListener('submit', (e) => this.handleRegister(e)); document.getElementById('showRegister').addEventListener('click', (e) => { @@ -145,6 +145,15 @@ class ClimaAI { const email = document.getElementById('loginEmail').value; const password = document.getElementById('loginPassword').value; + const submitBtn = e?.submitter; + let originalContent = ''; + if (submitBtn) { + originalContent = submitBtn.innerHTML; + submitBtn.innerHTML = ' Logging in...'; + submitBtn.disabled = true; + submitBtn.setAttribute('aria-busy', 'true'); + } + try { this.showToast('Logging in...', 'info'); const response = await api.login(email, password); @@ -155,6 +164,12 @@ class ClimaAI { this.checkSubscription(); } catch (error) { this.showToast(error.message || 'Login failed', 'error'); + } finally { + if (submitBtn) { + submitBtn.innerHTML = originalContent; + submitBtn.disabled = false; + submitBtn.removeAttribute('aria-busy'); + } } } @@ -164,6 +179,15 @@ class ClimaAI { const email = document.getElementById('registerEmail').value; const password = document.getElementById('registerPassword').value; + const submitBtn = e?.submitter; + let originalContent = ''; + if (submitBtn) { + originalContent = submitBtn.innerHTML; + submitBtn.innerHTML = ' Creating account...'; + submitBtn.disabled = true; + submitBtn.setAttribute('aria-busy', 'true'); + } + try { this.showToast('Creating account...', 'info'); const response = await api.register(email, password, name); @@ -174,6 +198,12 @@ class ClimaAI { this.checkSubscription(); } catch (error) { this.showToast(error.message || 'Registration failed', 'error'); + } finally { + if (submitBtn) { + submitBtn.innerHTML = originalContent; + submitBtn.disabled = false; + submitBtn.removeAttribute('aria-busy'); + } } } @@ -185,7 +215,16 @@ class ClimaAI { this.showToast('Logged out successfully', 'info'); } - async handleGoogleSignIn() { + async handleGoogleSignIn(e) { + const submitBtn = e?.currentTarget; + let originalContent = ''; + if (submitBtn) { + originalContent = submitBtn.innerHTML; + submitBtn.innerHTML = ' Connecting...'; + submitBtn.disabled = true; + submitBtn.setAttribute('aria-busy', 'true'); + } + try { this.showToast('🔐 Signing in with Google...', 'info'); @@ -197,31 +236,36 @@ class ClimaAI { // 5. Backend creates/updates user and returns JWT // For demo purposes, we'll simulate successful OAuth with demo account - setTimeout(async () => { - try { - // Auto-login with demo account - const response = await api.login('demo@climaai.com', 'Test1234'); - this.user = response.user; - this.showToast('✅ Welcome! Signed in with Google', 'success'); - this.showScreen('homeScreen'); - this.loadWeatherData(); - this.checkSubscription(); - } catch (error) { - this.showToast('Google Sign-In succeeded! Welcome!', 'success'); - // Create a demo user object - this.user = { - email: 'google-user@gmail.com', - full_name: 'Google User', - is_premium: true - }; - this.isPremium = true; - this.showScreen('homeScreen'); - this.loadWeatherData(); - } - }, 1500); // Simulate OAuth redirect delay + await new Promise(resolve => setTimeout(resolve, 1500)); + try { + // Auto-login with demo account + const response = await api.login('demo@climaai.com', 'Test1234'); + this.user = response.user; + this.showToast('✅ Welcome! Signed in with Google', 'success'); + this.showScreen('homeScreen'); + this.loadWeatherData(); + this.checkSubscription(); + } catch (error) { + this.showToast('Google Sign-In succeeded! Welcome!', 'success'); + // Create a demo user object + this.user = { + email: 'google-user@gmail.com', + full_name: 'Google User', + is_premium: true + }; + this.isPremium = true; + this.showScreen('homeScreen'); + this.loadWeatherData(); + } } catch (error) { this.showToast(error.message || 'Google Sign-In failed', 'error'); + } finally { + if (submitBtn) { + submitBtn.innerHTML = originalContent; + submitBtn.disabled = false; + submitBtn.removeAttribute('aria-busy'); + } } }