From 282ab3f285005c0e6ff66045bad20139ebd1ab43 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sun, 24 May 2026 05:05:32 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20async=20loading?= =?UTF-8?q?=20states=20to=20authentication=20buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added visual and accessible loading states (disabled, aria-busy, and updated text) to the login, register, and Google sign-in buttons while authentication requests are processed, improving user feedback. Ensure states are consistently cleaned up in finally blocks. Co-authored-by: singhaditya21 <53948039+singhaditya21@users.noreply.github.com> --- .Jules/palette.md | 3 ++ web-demo/js/app.js | 88 ++++++++++++++++++++++++++++++++++------------ 2 files changed, 69 insertions(+), 22 deletions(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..f8374f5 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-05-18 - Async Loading State Patterns in Vanilla JS +**Learning:** When adding loading states to simulated async operations (e.g. `setTimeout`), standard `try/finally` blocks will not execute correctly. The `setTimeout` must be converted to an awaitable Promise to guarantee the `finally` block restores the UI state (`disabled=false`, removing `aria-busy`). Additionally, accessing `e.submitter.innerHTML` requires a null-check to prevent `TypeError`s if the submitter is null. +**Action:** Always wrap simulated delays in `await new Promise(...)` when relying on `try/finally` for state cleanup, and always use a null-check block `if (submitBtn) { ... }` when manipulating `e.submitter` in form events. diff --git a/web-demo/js/app.js b/web-demo/js/app.js index 11508de..a6e12dc 100644 --- a/web-demo/js/app.js +++ b/web-demo/js/app.js @@ -144,6 +144,15 @@ 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.disabled = true; + submitBtn.setAttribute('aria-busy', 'true'); + submitBtn.textContent = 'Signing in...'; + } try { this.showToast('Logging in...', 'info'); @@ -155,6 +164,12 @@ class ClimaAI { this.checkSubscription(); } catch (error) { this.showToast(error.message || 'Login failed', 'error'); + } finally { + if (submitBtn) { + submitBtn.disabled = false; + submitBtn.removeAttribute('aria-busy'); + submitBtn.innerHTML = originalText; + } } } @@ -163,6 +178,15 @@ 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.disabled = true; + submitBtn.setAttribute('aria-busy', 'true'); + submitBtn.textContent = 'Signing up...'; + } try { this.showToast('Creating account...', 'info'); @@ -174,6 +198,12 @@ class ClimaAI { this.checkSubscription(); } catch (error) { this.showToast(error.message || 'Registration failed', 'error'); + } finally { + if (submitBtn) { + submitBtn.disabled = false; + submitBtn.removeAttribute('aria-busy'); + submitBtn.innerHTML = originalText; + } } } @@ -186,6 +216,15 @@ class ClimaAI { } async handleGoogleSignIn() { + const btn = document.getElementById('googleSignInBtn'); + let originalText = ''; + if (btn) { + originalText = btn.innerHTML; + btn.disabled = true; + btn.setAttribute('aria-busy', 'true'); + btn.textContent = 'Signing in...'; + } + 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 (btn) { + btn.disabled = false; + btn.removeAttribute('aria-busy'); + btn.innerHTML = originalText; + } } }