diff --git a/web-demo/css/style.css b/web-demo/css/style.css index e0d4506..95aa42d 100644 --- a/web-demo/css/style.css +++ b/web-demo/css/style.css @@ -218,6 +218,13 @@ body { transition: all 0.3s ease; } +.btn:disabled, +.btn[aria-busy="true"] { + opacity: 0.7; + cursor: not-allowed; + pointer-events: none; +} + .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; diff --git a/web-demo/js/app.js b/web-demo/js/app.js index 11508de..790cab1 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.innerHTML = ' Logging 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.innerHTML = ' Creating account...'; + } 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; + } } }