[WebUI] Show validation feedback inside login modal

instead of overlay alert messages

Issue: #4502

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 9ca5e366ba8a66d57a7d0b2fd52a24503931c43a..577fe4a6a261113d736be2a4a0b79db4916a6e31 100644 (file)
--- 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 ca991a8d2e305d8262c06b87e70ffd34a549be6b..82dc8a898834cac64104122fc80aea76817253e9 100644 (file)
--- 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 cb964071211dd48aa83018ae5bff7be32a04409a..c570789fb3ad366bea201cc6a14485ef61deb023 100644 (file)
--- 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();
                         },