commit 2696353: [WebUI] Show validation feedback inside login modal

[moisseev]

Author: moisseev
Date: 2023-05-31 21:22:40 +0300
URL: https://github.com/rspamd/rspamd/commit/26963536bb4de8c7032834c5608e3bf08d44a515

[WebUI] Show validation feedback inside login modal
instead of overlay alert messages

Issue: #4502

---
 interface/css/rspamd.css   |  7 +++++++
 interface/index.html       |  5 ++++-
 interface/js/app/rspamd.js | 31 ++++++++++++++++++++++++++-----
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 9ca5e366b..577fe4a6a 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -201,6 +201,13 @@ table#symbolsTable input[type="number"] {
     color: #3a87ad;
 }
 
+#authInvalidCharFeedback,
+#authUnauthorizedFeedback {
+    position: unset;
+    padding-top: 0.1rem;
+    padding-bottom: 0.1rem;
+}
+
 /* widget */
 .card-header,
 .modal-header {
diff --git a/interface/index.html b/interface/index.html
index ca991a8d2..82dc8a898 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -693,7 +693,10 @@
 	<div class="modal-dialog modal-sm modal-dialog-centered">
 		<div class="modal-content shadow">
 			<div class="modal-header text-secondary py-2">
-				<i class="fas fa-key my-auto"></i><h6 class="modal-title fw-bolder">Login to Rspamd</h6>
+				<i class="fas fa-key my-auto"></i>
+				<div id="authInvalidCharFeedback" class="invalid-tooltip">Invalid characters</div>
+				<div id="authUnauthorizedFeedback" class="invalid-tooltip">Wrong password</div>
+				<h6 class="modal-title fw-bolder">Login to Rspamd</h6>
 			</div>
 			<div class="modal-body" id="connectBody">
 				<form id="connectForm">
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index cb9640712..c570789fb 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -588,18 +588,35 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
                 displayUI();
             },
             error: function () {
+                function clearFeedback() {
+                    $("#connectPassword").off("input").removeClass("is-invalid");
+                    $("#authInvalidCharFeedback,#authUnauthorizedFeedback").hide();
+                }
+
                 $("#connectDialog")
-                    .on("shown.bs.modal", function () {
+                    .on("show.bs.modal", () => {
+                        $("#connectDialog").off("show.bs.modal");
+                        clearFeedback();
+                    })
+                    .on("shown.bs.modal", () => {
                         $("#connectDialog").off("shown.bs.modal");
                         $("#connectPassword").focus();
                     })
                     .modal("show");
 
-                $("#connectForm").on("submit", function (e) {
+                $("#connectForm").off("submit").on("submit", function (e) {
                     e.preventDefault();
                     var password = $("#connectPassword").val();
+
+                    function invalidFeedback(tooltip) {
+                        $("#connectPassword")
+                            .addClass("is-invalid")
+                            .off("input").on("input", () => clearFeedback());
+                        $(tooltip).show();
+                    }
+
                     if (!(/^[\u0020-\u007e]*$/).test(password)) {
-                        alertMessage("alert-modal alert-error", "Invalid characters in the password");
+                        invalidFeedback("#authInvalidCharFeedback");
                         $("#connectPassword").focus();
                         return;
                     }
@@ -619,8 +636,12 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
                                 displayUI();
                             }
                         },
-                        error: function (jqXHR) {
-                            ui.alertMessage("alert-modal alert-error", jqXHR.statusText);
+                        error: function (jqXHR, textStatus) {
+                            if (textStatus.statusText === "Unauthorized") {
+                                invalidFeedback("#authUnauthorizedFeedback");
+                            } else {
+                                ui.alertMessage("alert-modal alert-error", textStatus.statusText);
+                            }
                             $("#connectPassword").val("");
                             $("#connectPassword").focus();
                         },