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.

README.md

@@ -61,7 +61,9 @@ docker compose up -d
 
 ### Open the Interface
 
-After starting, open **http://localhost:5050** in your browser. The username and password is admin:admin 
+After starting, open **http://localhost:5050** in your browser. The username and password is <b>admin</b>:<b>admin</b> 
+
+The credentials can be change in the ADMIN_USERNAME & ADMIN_PASSWORD variables in config.py
 
 ---
 

static/js/core/login.js

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

templates/login.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>iNTERCEPT // Restricted Access</title>
+    <script src="{{ url_for('static', filename='js/core/login.js') }}"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}" />
   </head>
@@ -48,7 +49,7 @@
             <input type="text" name="username" placeholder="OPERATOR ID" class="form-input" required autofocus autocomplete="off" />
             <input type="password" name="password" placeholder="ENCRYPTION KEY" class="form-input" required />
 
-            <button type="submit" class="landing-enter-btn">
+            <button type="submit" class="landing-enter-btn"  onclick="login(event)">
               <span class="btn-text">INITIALIZE SESSION</span>
             </button>
           </form>