From dc67870e0c885144bb008a13805ed91527744d50 Mon Sep 17 00:00:00 2001
From: Tushar912 <tushar.912u@gmail.com>
Date: Mon, 18 Jan 2021 17:01:44 +0530
Subject: [PATCH] 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                           | 36 +++++++++++++------
 .../templates/confirm_delete_user_avatar.hbs  |  5 +++
 2 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 static/templates/confirm_delete_user_avatar.hbs

diff --git a/static/js/avatar.js b/static/js/avatar.js
index a672b35791..bbcecc4db9 100644
--- a/static/js/avatar.js
+++ b/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,
         });
     });
 
diff --git a/static/templates/confirm_delete_user_avatar.hbs b/static/templates/confirm_delete_user_avatar.hbs
new file mode 100644
index 0000000000..26ca53a1de
--- /dev/null
+++ b/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>