change_password: Migrate modal to dialog_widget.

frontend_tests/puppeteer_tests/settings.ts

@@ -50,22 +50,17 @@ async function test_change_password(page: Page): Promise<void> {
     await page.click('[data-section="account-and-privacy"]');
     await page.click("#change_password");
 
-    const change_password_button_selector = "#change_password_button";
+    const change_password_button_selector = "#change_password_modal .dialog_submit_button";
     await page.waitForSelector(change_password_button_selector, {visible: true});
 
-    // For some strange reason #change_password_modal:focus is not working with Firefox.
+    await common.wait_for_micromodal_to_open(page);
-    // The below line is an alternative to that.
-    // TODO: Replace the below line with `await page.waitForSelector("#change_password_modal:focus", {visible: true})`
-    // when the above issue is resolved.
-    await page.waitForFunction(() => document.activeElement!.id === "change_password_modal");
     await page.type("#old_password", test_credentials.default_user.password);
     test_credentials.default_user.password = "new_password";
     await page.type("#new_password", test_credentials.default_user.password);
     await page.click(change_password_button_selector);
 
     // On success the change password modal gets closed.
-    await page.waitForFunction(() => $("#change_password_modal").attr("aria-hidden") === "true");
+    await common.wait_for_micromodal_to_close(page);
-    await common.wait_for_modal_to_close(page);
 }
 
 async function test_get_api_key(page: Page): Promise<void> {

static/js/settings.js

@@ -7,7 +7,6 @@ import render_settings_tab from "../templates/settings_tab.hbs";
 
 import * as admin from "./admin";
 import * as blueslip from "./blueslip";
-import * as common from "./common";
 import {$t, $t_html} from "./i18n";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
@@ -103,16 +102,6 @@ export function build_page() {
     });
 
     $(".settings-box").html(rendered_settings_tab);
-    common.setup_password_visibility_toggle(
-        "#old_password",
-        "#old_password + .password_visibility_toggle",
-        {tippy_tooltips: true},
-    );
-    common.setup_password_visibility_toggle(
-        "#new_password",
-        "#new_password + .password_visibility_toggle",
-        {tippy_tooltips: true},
-    );
 }
 
 export function launch(section) {

static/js/settings_account.js

@@ -2,6 +2,7 @@ import $ from "jquery";
 import _ from "lodash";
 
 import render_confirm_deactivate_own_user from "../templates/confirm_dialog/confirm_deactivate_own_user.hbs";
+import render_dialog_change_password from "../templates/dialog_change_password.hbs";
 import render_settings_api_key_modal from "../templates/settings/api_key_modal.hbs";
 import render_settings_custom_user_profile_field from "../templates/settings/custom_user_profile_field.hbs";
 import render_settings_dev_env_email_access from "../templates/settings/dev_env_email_access.hbs";
@@ -392,12 +393,38 @@ export function set_up() {
         password_quality?.("", $("#pw_strength .bar"), $("#new_password"));
     }
 
-    clear_password_change();
+    function change_password_post_render() {
+        $("#change_password_modal")
+            .find("[data-micromodal-close]")
+            .on("click", () => {
+                clear_password_change();
+            });
+        common.setup_password_visibility_toggle(
+            "#old_password",
+            "#old_password + .password_visibility_toggle",
+            {tippy_tooltips: true},
+        );
+        common.setup_password_visibility_toggle(
+            "#new_password",
+            "#new_password + .password_visibility_toggle",
+            {tippy_tooltips: true},
+        );
+        clear_password_change();
+    }
 
     $("#change_password").on("click", async (e) => {
         e.preventDefault();
         e.stopPropagation();
-        overlays.open_modal("#change_password_modal");
+        dialog_widget.launch({
+            html_heading: $t_html({defaultMessage: "Change password"}),
+            html_body: render_dialog_change_password(),
+            html_submit_button: $t_html({defaultMessage: "Change"}),
+            loading_spinner: true,
+            id: "change_password_modal",
+            form_id: "change_password_container",
+            post_render: change_password_post_render,
+            on_click: do_change_password,
+        });
         $("#pw_change_controls").show();
         if (page_params.realm_password_auth_enabled !== false) {
             // zxcvbn.js is pretty big, and is only needed on password
@@ -407,18 +434,10 @@ export function set_up() {
         }
     });
 
-    $("#change_password_modal")
+    function do_change_password(e) {
-        .find("[data-dismiss=modal]")
-        .on("click", () => {
-            clear_password_change();
-        });
-
-    $("#change_password_button").on("click", (e) => {
         e.preventDefault();
         e.stopPropagation();
-        const change_password_error = $("#change_password_modal")
+        const change_password_error = $("#change_password_modal").find("#dialog_error");
-            .find(".change_password_info")
-            .expectOne();
 
         const data = {
             old_password: $("#old_password").val(),
@@ -446,9 +465,10 @@ export function set_up() {
         const opts = {
             success_continuation() {
                 channel.set_password_change_in_progress(false);
-                overlays.close_modal("#change_password_modal");
+                dialog_widget.close_modal();
             },
             error_continuation() {
+                dialog_widget.hide_dialog_spinner();
                 channel.set_password_change_in_progress(false);
             },
             error_msg_element: change_password_error,
@@ -462,7 +482,7 @@ export function set_up() {
             opts,
         );
         clear_password_change();
-    });
+    }
 
     $("#new_password").on("input", () => {
         const field = $("#new_password");

static/styles/settings.css

@@ -983,6 +983,13 @@ input[type="checkbox"] {
     }
 }
 
+#change_password_modal {
+    .change_password_info,
+    #change_password_container {
+        margin: 0;
+    }
+}
+
 #api_key_form,
 #change_password_modal {
     .password-div {
@@ -994,8 +1001,8 @@ input[type="checkbox"] {
 
         .password_visibility_toggle {
             position: absolute;
-            left: 190px;
+            left: 194px;
-            top: 28px;
+            top: 32px;
             width: 14px;
             opacity: 0.6;
 
@@ -1520,7 +1527,6 @@ input[type="checkbox"] {
     }
 
     #change_email_modal .change_email_info,
-    #change_password_modal .change_password_info,
     #api_key_modal #api_key_status {
         margin-top: 3px;
     }

static/styles/zulip.css

@@ -1400,6 +1400,7 @@ a.dark_background:hover,
     display: inline-block;
     position: relative;
     color: hsl(0, 0%, 73%);
+    bottom: 4px;
 }
 
 div.message_table {

static/templates/dialog_change_password.hbs

@@ -0,0 +1,19 @@
+<form id="change_password_container">
+    <div class="field password-div">
+        <label for="old_password" class="title">{{t "Old password" }}</label>
+        <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block" value="" />
+        <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
+        <div class="settings-forgot-password">
+            <a href="/accounts/password/reset/" class="sea-green" target="_blank" rel="noopener noreferrer">{{t "Forgotten it?" }}</a>
+        </div>
+    </div>
+    <div class="field password-div">
+        <label for="new_password" class="title">{{t "New password" }}</label>
+        <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="w-200 inline-block" value=""
+          data-min-length="{{ page_params.password_min_length }}" data-min-guesses="{{ page_params.password_min_guesses }}" />
+        <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
+        <div class="progress inline-block" id="pw_strength">
+            <div class="bar bar-danger fade" style="width: 10%;"></div>
+        </div>
+    </div>
+</form>

static/templates/settings/account_settings.hbs

@@ -52,39 +52,6 @@
                         </div>
                     </div>
                     {{/if}}
-
-                    <div id="change_password_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
-                      aria-labelledby="change_password_modal_label" aria-hidden="true">
-                        <div class="modal-header">
-                            <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
-                            <h3 class="inline-block" id="change_password_modal_label">{{t "Change password" }}</h3>
-                            <div class="alert-notification change_password_info"></div>
-                        </div>
-                        <div class="modal-body">
-                            <div class="field password-div">
-                                <label for="old_password" class="title">{{t "Old password" }}</label>
-                                <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block" value="" />
-                                <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
-                                <div class="settings-forgot-password">
-                                    <a href="/accounts/password/reset/" class="sea-green" target="_blank" rel="noopener noreferrer">{{t "Forgotten it?" }}</a>
-                                </div>
-
-                            </div>
-                            <div class="field password-div">
-                                <label for="new_password" class="title">{{t "New password" }}</label>
-                                <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="w-200 inline-block" value=""
-                                  data-min-length="{{ page_params.password_min_length }}" data-min-guesses="{{ page_params.password_min_guesses }}" />
-                                <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
-                                <div class="progress inline-block" id="pw_strength">
-                                    <div class="bar bar-danger fade" style="width: 10%;"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="modal-footer">
-                            <button class="button white rounded" type="button" data-dismiss="modal">{{t "Cancel" }}</button>
-                            <button id='change_password_button' class="button rounded sea-green">{{t "Change" }}</button>
-                        </div>
-                    </div>
                 </form>
 
                 <div class="input-group">

tools/linter_lib/custom_check.py

@@ -697,7 +697,7 @@ html_rules: List["Rule"] = [
             "templates/zerver/accounts_home.html",
             "templates/zerver/login.html",
             # Needs the width cleaned up; display: none is fine
-            "static/templates/settings/account_settings.hbs",
+            "static/templates/dialog_change_password.hbs",
             # background image property is dynamically generated
             "static/templates/user_profile_modal.hbs",
             "static/templates/pm_list_item.hbs",