From 6de24fc7f147d73c6c9006591233cd36731de988 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Mon, 31 Aug 2020 20:27:07 +0200
Subject: [PATCH] User property editor: Add "Remove" warning dialog (#8745)

---
 .../userpicker/overlays/remove.html           |  9 ++++++++
 .../userpicker/userpicker.controller.js       | 23 ++++++++++++++++---
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  3 ++-
 .../Umbraco/config/lang/en_us.xml             |  1 +
 4 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/userpicker/overlays/remove.html

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/userpicker/overlays/remove.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/userpicker/overlays/remove.html
new file mode 100644
index 0000000000..69812032e7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/userpicker/overlays/remove.html
@@ -0,0 +1,9 @@
+<div>
+
+    <div class="umb-alert umb-alert--warning mb2">
+        <localize key="defaultdialogs_propertyuserpickerremovewarning" tokens="[model.username]">This will remove the user <strong>{{ model.username }}</strong>.</localize>
+    </div>
+
+    <localize key="defaultdialogs_confirmremove">Yes, remove</localize>?
+
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/userpicker/userpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/userpicker/userpicker.controller.js
index b7412970eb..f2055fea3a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/userpicker/userpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/userpicker/userpicker.controller.js
@@ -1,4 +1,4 @@
-function userPickerController($scope, usersResource , iconHelper, editorService){
+function userPickerController($scope, usersResource , iconHelper, editorService, overlayService){
 
     function trim(str, chr) {
         var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^' + chr + '+|' + chr + '+$', 'g');
@@ -33,7 +33,24 @@ function userPickerController($scope, usersResource , iconHelper, editorService)
     };
 
     $scope.remove = function (index) {
-        $scope.renderModel.splice(index, 1);
+        const dialog = {
+            view: "views/propertyeditors/userpicker/overlays/remove.html",
+            username: $scope.renderModel[index].name,
+            submitButtonLabelKey: "defaultdialogs_yesRemove",
+            submitButtonStyle: "danger",
+
+            submit: function () {
+                $scope.renderModel.splice(index, 1);
+                $scope.userName = '';
+
+                overlayService.close();
+            },
+            close: function () {
+                overlayService.close();
+            }
+        };
+
+        overlayService.open(dialog);
     };
 
     $scope.add = function (item) {
@@ -43,7 +60,7 @@ function userPickerController($scope, usersResource , iconHelper, editorService)
             }
             else {
                 return i.id;
-            }            
+            }
         });
 
         var itemId = $scope.model.config.idType === "udi" ? item.udi : item.id;
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 5c13a25a49..97bd470a07 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -514,7 +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="propertyuserpickerremovewarning"><![CDATA[This will remove the user <b>%0%</b>.]]></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">
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 d5ebdb76af..9a297e424b 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,7 @@
     <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="propertyuserpickerremovewarning"><![CDATA[This will remove the user <b>%0%</b>.]]></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>