From 3c1ad02126bde5c4821cf9c6c7f780d837e7a546 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Mon, 31 Aug 2020 20:17:17 +0200
Subject: [PATCH] Userpicker: Add warning overlay when the "Remove" button is
 hit (#8739)

---
 .../src/views/users/group.controller.js       | 22 +++++++++++++++++--
 .../views/users/views/overlays/remove.html    |  9 ++++++++
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  2 ++
 .../Umbraco/config/lang/en_us.xml             |  2 ++
 4 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/users/views/overlays/remove.html

diff --git a/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
index 469c845c45..c29bda19ed 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function UserGroupEditController($scope, $location, $routeParams, userGroupsResource, localizationService, contentEditingHelper, editorService) {
+    function UserGroupEditController($scope, $location, $routeParams, userGroupsResource, localizationService, contentEditingHelper, editorService, overlayService) {
 
         var infiniteMode = $scope.model && $scope.model.infiniteMode;
         var id = infiniteMode ? $scope.model.id : $routeParams.id;
@@ -283,7 +283,25 @@
 
         function removeSelectedItem(index, selection) {
             if (selection && selection.length > 0) {
-                selection.splice(index, 1);
+
+                const dialog = {
+                    view: "views/users/views/overlays/remove.html",
+                    username: selection[index].username,
+                    userGroupName: vm.userGroup.name.toLowerCase(),
+                    submitButtonLabelKey: "defaultdialogs_yesRemove",
+                    submitButtonStyle: "danger",
+
+                    submit: function () {
+                        selection.splice(index, 1);
+
+                        overlayService.close();
+                    },
+                    close: function () {
+                        overlayService.close();
+                    }
+                };
+
+                overlayService.open(dialog);
             }
         }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/overlays/remove.html b/src/Umbraco.Web.UI.Client/src/views/users/views/overlays/remove.html
new file mode 100644
index 0000000000..97eb7db0b6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/overlays/remove.html
@@ -0,0 +1,9 @@
+<div>
+
+    <div class="umb-alert umb-alert--warning mb2">
+        <localize key="defaultdialogs_userremovewarning" tokens="[model.username, model.userGroupName]">This will remove the user <strong>{{ model.username }} from the {{ model.userGropName }} group</strong>.</localize>
+    </div>
+
+    <localize key="defaultdialogs_confirmremove">Yes, remove</localize>?
+
+</div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 7fa1249828..5c13a25a49 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -514,6 +514,8 @@
     <key alias="selectEditor">Select editor</key>
     <key alias="selectSnippet">Select snippet</key>
     <key alias="variantdeletewarning">This will delete the node and all its languages. If you only want to delete one language, you should unpublish the node in that language instead.</key>
+    <key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
+    <key alias="yesRemove">Yes, remove</key>
   </area>
   <area alias="dictionary">
     <key alias="noItems">There are no dictionary items.</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 464e8bbb02..d5ebdb76af 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -519,6 +519,8 @@
     <key alias="selectEditorConfiguration">Select configuration</key>
     <key alias="selectSnippet">Select snippet</key>
     <key alias="variantdeletewarning">This will delete the node and all its languages. If you only want to delete one language, you should unpublish the node in that language instead.</key>
+    <key alias="userremovewarning"><![CDATA[This will remove the user <b>%0%</b> from the <b>%1%</b> group]]></key>
+    <key alias="yesRemove">Yes, remove</key>
   </area>
   <area alias="dictionary">
     <key alias="noItems">There are no dictionary items.</key>