change_email: Migrate modal to dialog_widget.

static/js/settings_account.js

@@ -1,5 +1,6 @@
 import $ from "jquery";
 
+import render_change_email_modal from "../templates/change_email_modal.hbs";
 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";
@@ -558,12 +559,12 @@ export function set_up() {
         );
     });
 
-    $("#change_email_button").on("click", (e) => {
+    function do_change_email(e) {
         e.preventDefault();
         e.stopPropagation();
-        const change_email_error = $("#change_email_modal").find(".change_email_info").expectOne();
+        const change_email_error = $("#change_email_modal").find("#dialog_error");
         const data = {};
-        data.email = $(".email_change_container").find("input[name='email']").val();
+        data.email = $("#change_email_container").find("input[name='email']").val();
 
         const opts = {
             success_continuation() {
@@ -575,7 +576,10 @@ export function set_up() {
                         4000,
                     );
                 }
-                overlays.close_modal("#change_email_modal");
+                dialog_widget.close_modal();
+            },
+            error_continuation() {
+                dialog_widget.hide_dialog_spinner();
             },
             error_msg_element: change_email_error,
             success_msg_html: $t_html(
@@ -591,15 +595,31 @@ export function set_up() {
             $("#account-settings-status").expectOne(),
             opts,
         );
-    });
+    }
+
+    function change_email_post_render() {
+        const input_elem = $("#change_email_container").find("input[name='email']");
+        const email = $("#change_email").text().trim();
+        input_elem.val(email);
+    }
 
     $("#change_email").on("click", (e) => {
         e.preventDefault();
         e.stopPropagation();
         if (!page_params.realm_email_changes_disabled || page_params.is_admin) {
-            overlays.open_modal("#change_email_modal");
-            const email = $("#change_email").text().trim();
-            $(".email_change_container").find("input[name='email']").val(email);
+            dialog_widget.launch({
+                html_heading: $t_html({defaultMessage: "Change email"}),
+                html_body: render_change_email_modal(),
+                html_submit_button: $t_html({defaultMessage: "Change"}),
+                loading_spinner: true,
+                id: "change_email_modal",
+                form_id: "change_email_container",
+                on_click: do_change_email,
+                post_render: change_email_post_render,
+                on_shown: () => {
+                    $("#change_email_container input").trigger("focus");
+                },
+            });
         }
     });
 

static/styles/settings.css

@@ -125,6 +125,12 @@ h3 .fa-question-circle-o {
     max-width: 480px;
 }
 
+#change_email_modal {
+    #change_email_container {
+        margin: 0;
+    }
+}
+
 .admin-realm-description {
     height: 16em;
     width: 100%;
@@ -1537,10 +1543,6 @@ input[type="checkbox"] {
     .display-settings-form select {
         width: 245px;
     }
-
-    #change_email_modal .change_email_info {
-        margin-top: 3px;
-    }
 }
 
 #profile-settings,

static/templates/change_email_modal.hbs

@@ -0,0 +1,4 @@
+<form id="change_email_container" class="new-style">
+    <label for="email">{{t "New email" }}</label>
+    <input type="text" name="email" value="{{ page_params.delivery_email }}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
+</form>

static/templates/settings/account_settings.hbs

@@ -15,25 +15,6 @@
                         </button>
                         <i class="tippy-zulip-tooltip fa fa-question-circle change_email_tooltip settings-info-icon" {{#if (or (not page_params.realm_email_changes_disabled) page_params.is_admin)}}style="display: none;"{{/if}} data-tippy-content="{{t 'Email address changes are disabled in this organization.' }}"></i>
                     </div>
-
-                    <div id="change_email_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
-                      aria-labelledby="change_email_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_email_modal_label">{{t "Change email" }}</h3>
-                            <div class="alert-notification change_email_info"></div>
-                        </div>
-                        <div class="modal-body">
-                            <div class="input-group email_change_container">
-                                <label for="email">{{t "New email" }}</label>
-                                <input type="text" name="email" value="{{ page_params.delivery_email }}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
-                            </div>
-                        </div>
-                        <div class="modal-footer">
-                            <button class="button white rounded" type="button" data-dismiss="modal">{{t "Cancel" }}</button>
-                            <button id='change_email_button' class="button rounded sea-green" data-dismiss="modal">{{t "Change" }}</button>
-                        </div>
-                    </div>
                 </form>
 
                 {{#if page_params.two_fa_enabled }}