From c20f5a98667176feb8f78be40851d2d6d30b3d28 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Mon, 29 Nov 2021 23:12:33 +0530
Subject: [PATCH] dialog_widget: Add a new optional parameter validate_input.

This commit extends dialog_widget class by adding a new
optional paramter validate_input which will be a function
to validate the inputs in the dialog and will be called
before showing the spinner and calling the on_click function.

Currently, the password change modal uses this paramter to
validate that the old and new password inputs must not be
empty. Since the spinner will not be initiated in the case
where form is invalid, we need not hide the spinner after
showing the error and thus we can simplify the code to use
ui_report.error to show the error messages of empty fields.
---
 static/js/dialog_widget.js    |  4 ++++
 static/js/settings_account.js | 44 ++++++++++++++++++++++-------------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/static/js/dialog_widget.js b/static/js/dialog_widget.js
index 7df8f4f2a3..c16b0517cd 100644
--- a/static/js/dialog_widget.js
+++ b/static/js/dialog_widget.js
@@ -81,6 +81,7 @@ export function launch(conf) {
     // * id: Custom id to the container element to modify styles.
     // * single_footer_button: If true, don't include the "Cancel" button.
     // * form_id: Id of the form element in the modal if it exists.
+    // * validate_input: Function to validate the input of the modal.
     // * on_show: Callback to run when the modal is triggered to show.
     // * on_shown: Callback to run when the modal is shown.
     // * on_hide: Callback to run when the modal is triggered to hide.
@@ -125,6 +126,9 @@ export function launch(conf) {
 
     // Set up handlers.
     submit_button.on("click", (e) => {
+        if (conf.validate_input && !conf.validate_input(e)) {
+            return;
+        }
         if (conf.loading_spinner) {
             show_dialog_spinner();
         } else if (conf.close_on_submit) {
diff --git a/static/js/settings_account.js b/static/js/settings_account.js
index 6de16bb7a2..1756a06c07 100644
--- a/static/js/settings_account.js
+++ b/static/js/settings_account.js
@@ -436,6 +436,33 @@ export function set_up() {
     $("#change_password").on("click", async (e) => {
         e.preventDefault();
         e.stopPropagation();
+
+        function validate_input(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const old_password = $("#old_password").val();
+            const new_password = $("#new_password").val();
+
+            if (old_password === "") {
+                ui_report.error(
+                    $t_html({defaultMessage: "Please enter your password"}),
+                    undefined,
+                    $("#dialog_error"),
+                );
+                return false;
+            }
+
+            if (new_password === "") {
+                ui_report.error(
+                    $t_html({defaultMessage: "Please choose a new password"}),
+                    undefined,
+                    $("#dialog_error"),
+                );
+                return false;
+            }
+            return true;
+        }
+
         dialog_widget.launch({
             html_heading: $t_html({defaultMessage: "Change password"}),
             html_body: render_dialog_change_password(),
@@ -445,6 +472,7 @@ export function set_up() {
             form_id: "change_password_container",
             post_render: change_password_post_render,
             on_click: do_change_password,
+            validate_input,
         });
         $("#pw_change_controls").show();
         if (page_params.realm_password_auth_enabled !== false) {
@@ -466,22 +494,6 @@ export function set_up() {
             new_password: $("#new_password").val(),
         };
 
-        function show_error_message(rendered_error_msg) {
-            change_password_error.html(rendered_error_msg);
-            change_password_error.addClass("alert-error").show();
-            dialog_widget.hide_dialog_spinner();
-        }
-
-        if (data.old_password === "") {
-            show_error_message($t_html({defaultMessage: "Please enter your password"}));
-            return;
-        }
-
-        if (data.new_password === "") {
-            show_error_message($t_html({defaultMessage: "Please choose a new password"}));
-            return;
-        }
-
         const new_pw_field = $("#new_password");
         const new_pw = data.new_password;
         if (new_pw !== "") {