avatar: Add confirmation dialog before deleting profile picture.

Use confirm_dialog here as this change is destructive and thus not
easy to undo.

We may want to consider using settings_ui.do_settings_change()
instead.

Fixes #17073.

static/js/avatar.js

@@ -1,7 +1,10 @@
 import * as channel from "./channel";
+import * as confirm_dialog from "./confirm_dialog";
 import * as settings_account from "./settings_account";
 import * as upload_widget from "./upload_widget";
 
+const render_confirm_delete_user_avatar = require("../templates/confirm_delete_user_avatar.hbs");
+
 export function build_bot_create_widget() {
     // We have to do strange gyrations with the file input to clear it,
     // where we replace it wholesale, so we generalize the file input with
@@ -58,16 +61,29 @@ export function build_user_avatar_widget(upload_function) {
     $("#user-avatar-upload-widget .image-delete-button").on("click keydown", (e) => {
         e.preventDefault();
         e.stopPropagation();
-        channel.del({
-            url: "/json/users/me/avatar",
-            success() {
-                $("#user-avatar-upload-widget .image-delete-button").hide();
-                $("#user-avatar-source").show();
-                // Need to clear input because of a small edge case
-                // where you try to upload the same image you just deleted.
-                get_file_input().val("");
-                // Rest of the work is done via the user_events -> avatar_url event we will get
-            },
+        function delete_user_avatar() {
+            channel.del({
+                url: "/json/users/me/avatar",
+                success() {
+                    $("#user-avatar-upload-widget .image-delete-button").hide();
+                    $("#user-avatar-source").show();
+                    // Need to clear input because of a small edge case
+                    // where you try to upload the same image you just deleted.
+                    get_file_input().val("");
+                    // Rest of the work is done via the user_events -> avatar_url event we will get
+                },
+            });
+        }
+        const modal_parent = $("#account-settings");
+
+        const html_body = render_confirm_delete_user_avatar();
+
+        confirm_dialog.launch({
+            parent: modal_parent,
+            html_heading: i18n.t("Delete profile picture"),
+            html_body,
+            html_yes_button: i18n.t("Delete"),
+            on_click: delete_user_avatar,
         });
     });
 

static/templates/confirm_delete_user_avatar.hbs

@@ -0,0 +1,5 @@
+<p>
+    {{#tr this}}
+    Are you sure you want to delete your profile picture?
+    {{/tr}}
+</p>