Enhance login UX with JS feedback and update docs

Added a new login.js script to provide visual feedback and prevent double submission on the login form. Updated login.html to include the script and wire up the login button. Clarified credential configuration instructions in README.md.
This commit is contained in:
Jon Ander Oribe
2026-01-20 07:07:47 +01:00
parent 14f5375279
commit a0c1766803
3 changed files with 39 additions and 2 deletions
+34
View File
@@ -0,0 +1,34 @@
/**
* Handles the visual transition and submission lock for the authorization terminal.
* @param {Event} event - The click event from the submission button.
*/
function login(event) {
const btn = event.currentTarget;
const form = btn.closest('form');
// Validate form requirements before triggering visual effects
if (!form.checkValidity()) {
return; // Allow the browser to handle native "required" field alerts
}
// 1. Visual Feedback: Transition to "Processing" state
btn.style.color = "#ff4d4d";
btn.style.borderColor = "#ff4d4d";
btn.style.textShadow = "0 0 10px #ff4d4d";
btn.style.transform = "scale(0.95)";
// Update button text to reflect terminal status
const btnText = btn.querySelector('.btn-text');
if (btnText) {
btnText.innerText = "AUTHORIZING...";
}
// 2. Security Lock: Prevent redundant requests (Double-click spam)
// A 10ms delay ensures the browser successfully dispatches the POST request
// before the UI element becomes non-interactive.
setTimeout(() => {
btn.style.pointerEvents = "none";
btn.style.opacity = "0.7";
btn.style.cursor = "not-allowed";
}, 10);
}