diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..425b0fa --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,6 @@ +## 2026-06-10 - [Initial UX check] +**Learning:** Checking for standard UX loading states. +**Action:** Need to add loading state to buttons. +## 2026-06-10 - [Accessible Async Loading States] +**Learning:** Vanilla JS forms need explicit UI feedback during async operations, but standard DOM methods like `e.target.querySelector` can fail if the click intercepted by child elements. +**Action:** Used `e.submitter` to robustly capture the submitting button, allowing temporary text modification (`⏳ Logging in...`), `disabled` state, and `aria-busy` attribute implementation within a `try/finally` block to ensure robust cleanup without adding custom CSS. diff --git a/web-demo/js/app.js b/web-demo/js/app.js index 11508de..55894e9 100644 --- a/web-demo/js/app.js +++ b/web-demo/js/app.js @@ -142,6 +142,13 @@ class ClimaAI { async handleLogin(e) { e.preventDefault(); + const submitBtn = e.submitter; + if (submitBtn) { + submitBtn.disabled = true; + submitBtn.setAttribute('aria-busy', 'true'); + submitBtn.dataset.originalText = submitBtn.innerHTML; + submitBtn.innerHTML = '⏳ Logging in...'; + } const email = document.getElementById('loginEmail').value; const password = document.getElementById('loginPassword').value; @@ -155,11 +162,24 @@ 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 = submitBtn.dataset.originalText || submitBtn.innerHTML; + } } } async handleRegister(e) { e.preventDefault(); + const submitBtn = e.submitter; + if (submitBtn) { + submitBtn.disabled = true; + submitBtn.setAttribute('aria-busy', 'true'); + submitBtn.dataset.originalText = submitBtn.innerHTML; + submitBtn.innerHTML = '⏳ Signing up...'; + } const name = document.getElementById('registerName').value; const email = document.getElementById('registerEmail').value; const password = document.getElementById('registerPassword').value; @@ -174,6 +194,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 = submitBtn.dataset.originalText || submitBtn.innerHTML; + } } }