feat: add styled error message and input handlers to login form

src/rust/lqosd/src/node_manager/js_build/src/login.js

@@ -20,19 +20,27 @@ $("#btnLogin").on('click', () => {
         url: "/doLogin",
         data: JSON.stringify(login),
         contentType: 'application/json',
+        beforeSend: () => {
+            $("#loginError").removeClass("show").addClass("d-none");
+        },
         success: () => {
             window.location.href = "/index.html";
         },
         error: () => {
-            alert("Login Incorrect");
+            $("#loginError").removeClass("d-none").addClass("show");
         }
     })
 });
 
 // Add keypress handler for Enter key
 $('#username, #password').on('keypress', function(e) {
-    if (e.which === 13) { // 13 is Enter key code
+    if (e.which === 13) {
         e.preventDefault();
         $('#btnLogin').click();
     }
 });
+
+// Hide error when typing
+$('#username, #password').on('input', function() {
+    $("#loginError").fadeOut();
+});

src/rust/lqosd/src/node_manager/static2/login.html

@@ -40,6 +40,11 @@ <h5 class="card-title">Login</h5>
     </div>
 </div>
 
+<div id="loginError" class="alert alert-danger d-none mt-3">
+    <i class="fas fa-exclamation-triangle me-2"></i>
+    Login failed. You can manage users via the <code>lqusers</code> CLI tool on the LibreQoS server.
+</div>
+
 <script src="login.js"></script>
 
 <footer class="justify-content-center">
@@ -48,4 +53,4 @@ <h5 class="card-title">Login</h5>
 
 <script src="vendor/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>