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;
+ }
}
}