[WebUI] Show validation feedback inside login modal

instead of overlay alert messages Issue: #4502
rspamd · May 31, 2023 · 2696353 · 2696353
1 parent 8dd05bd
commit 2696353
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git 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
@@ -693,7 +693,10 @@ <h6 class="card-title fw-bolder">HTTP requests timeout, ms</h6>
 	<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
@@ -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();
                         },