settings: Use confirm_dialog for deactivating own account modal.

This refactor changes two things - position of the modal, as it
is moved up by some amount because of using confirm_dialog and
also loading spinner of confirm_dialog widget is used.

static/js/settings_account.js

@@ -1,6 +1,7 @@
 import $ from "jquery";
 import _ from "lodash";
 
+import render_confirm_deactivate_own_user from "../templates/confirm_dialog/confirm_deactivate_own_user.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";
@@ -9,6 +10,7 @@ import * as avatar from "./avatar";
 import * as blueslip from "./blueslip";
 import * as channel from "./channel";
 import * as common from "./common";
+import * as confirm_dialog from "./confirm_dialog";
 import {csrf_token} from "./csrf";
 import {$t_html} from "./i18n";
 import * as overlays from "./overlays";
@@ -553,14 +555,6 @@ export function set_up() {
         }
     });
 
-    $("#user_deactivate_account_button").on("click", (e) => {
-        // This click event must not get propagated to parent container otherwise the modal
-        // will not show up because of a call to `close_active_modal` in `settings.js`.
-        e.preventDefault();
-        e.stopPropagation();
-        overlays.open_modal("#deactivate_self_modal");
-    });
-
     $("#account-settings").on("click", ".custom_user_field .remove_date", (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -585,20 +579,19 @@ export function set_up() {
         }
     });
 
-    $("#do_deactivate_self_button").on("click", () => {
+    $("#user_deactivate_account_button").on("click", (e) => {
-        $("#do_deactivate_self_button .loader").css("display", "inline-block");
+        // This click event must not get propagated to parent container otherwise the modal
-        $("#do_deactivate_self_button span").hide();
+        // will not show up because of a call to `close_active_modal` in `settings.js`.
-        $("#do_deactivate_self_button object").on("load", function () {
+        e.preventDefault();
-            const doc = this.getSVGDocument();
+        e.stopPropagation();
-            const $svg = $(doc).find("svg");
-            $svg.find("rect").css("fill", "#000");
-        });
 
+        function handle_confirm() {
             setTimeout(() => {
                 channel.del({
                     url: "/json/users/me",
                     success() {
-                    overlays.close_modal("#deactivate_self_modal");
+                        confirm_dialog.hide_confirm_dialog_spinner();
+                        overlays.close_modal("#confirm_dialog_modal");
                         window.location.href = "/login/";
                     },
                     error(xhr) {
@@ -623,7 +616,8 @@ export function set_up() {
                                 rendered_error_msg = error_last_user;
                             }
                         }
-                    overlays.close_modal("#deactivate_self_modal");
+                        confirm_dialog.hide_confirm_dialog_spinner();
+                        overlays.close_modal("#confirm_dialog_modal");
                         $("#account-settings-status")
                             .addClass("alert-error")
                             .html(rendered_error_msg)
@@ -631,6 +625,19 @@ export function set_up() {
                     },
                 });
             }, 5000);
+        }
+        const html_body = render_confirm_deactivate_own_user();
+        const modal_parent = $("#account-settings .account-settings-form");
+        confirm_dialog.launch({
+            parent: modal_parent,
+            html_heading: $t_html({defaultMessage: "Deactivate your account"}),
+            html_body,
+            html_yes_button: $t_html({defaultMessage: "Confirm"}),
+            on_click: handle_confirm,
+            help_link: "/help/deactivate-your-account",
+            fade: true,
+            loading_spinner: true,
+        });
     });
 
     $("#show_my_user_profile_modal").on("click", () => {

static/templates/confirm_dialog/confirm_deactivate_own_user.hbs

@@ -0,0 +1,3 @@
+<p>{{#tr}}By deactivating your account, you will be logged out immediately.{{/tr}}</p>
+<p>{{t "Note that any bots that you maintain will be disabled." }}</p>
+<p>{{t "Are you sure you want to deactivate your account?"}}</p>

static/templates/settings/account_settings.hbs

@@ -158,28 +158,6 @@
             <i class="fa fa-external-link" aria-hidden="true" title="{{t 'Preview profile' }}"></i>
         </button>
 
-        <div id="deactivate_self_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_self_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 id="deactivation_self_modal_label">
-                    {{t "Deactivate your account" }}
-                    {{> ../help_link_widget link="/help/deactivate-your-account" }}
-                </h3>
-            </div>
-            <div class="modal-body">
-                <p>{{#tr}}By deactivating your account, you will be logged out immediately.{{/tr}}</p>
-                <p>{{t "Note that any bots that you maintain will be disabled." }}</p>
-                <p>{{t "Are you sure you want to deactivate your account?"}}</p>
-            </div>
-            <div class="modal-footer">
-                <button class="button" data-dismiss="modal">{{t "Cancel" }}</button>
-                <button class="button btn-danger rounded" id="do_deactivate_self_button">
-                    <object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
-                    <span>{{t "Confirm" }}</span>
-                </button>
-            </div>
-        </div>
-
         <hr class="settings_separator" />
 
         <div class="form-horizontal" id="api_key_button_box">