From a795ed66e8e14eb0d6028c35b8698fc50bfa078e Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Sat, 8 Dec 2018 14:50:05 +0100
Subject: [PATCH] Use a member group picker instead of checkboxes

---
 .../content/content.protect.controller.js     | 62 ++++++++++++++-----
 .../src/views/content/protect.html            | 30 +++++----
 src/Umbraco.Web/Editors/ContentController.cs  |  2 +-
 3 files changed, 64 insertions(+), 30 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.protect.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.protect.controller.js
index 69c73b5ec9..4504ebd372 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/content.protect.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/content.protect.controller.js
@@ -7,7 +7,7 @@
         var id = $scope.currentNode.id;
 
         vm.loading = false;
-        vm.saveButtonState = "init";
+        vm.buttonState = "init";
 
         vm.isValid = isValid;
         vm.next = next;
@@ -16,8 +16,10 @@
         vm.toggle = toggle;
         vm.pickLoginPage = pickLoginPage;
         vm.pickErrorPage = pickErrorPage;
-        vm.remove = remove;
-        vm.removeConfirm = removeConfirm;
+        vm.pickGroup = pickGroup;
+        vm.removeGroup = removeGroup;
+        vm.removeProtection = removeProtection;
+        vm.removeProtectionConfirm = removeProtectionConfirm;
 
         vm.type = null;
         vm.step = null;
@@ -55,10 +57,10 @@
                 // Get all member groups
                 memberGroupResource.getGroups().then(function (groups) {
                     vm.step = vm.type;
-                    vm.groups = groups;
-                    // set groups "selected" according to currently selected roles for public access
-                    _.each(groups, function(group) {
-                        group.selected = _.contains(vm.roles, group.name);
+                    vm.allGroups = groups;
+                    vm.hasGroups = groups.length > 0;
+                    vm.groups = _.filter(groups, function(group) {
+                        return _.contains(vm.roles, group.name);
                     });
                     vm.loading = false;
                 });
@@ -79,15 +81,14 @@
                 return false;
             }
             if (vm.type === "role") {
-                return !!_.find(vm.groups, function(group) { return group.selected; });
+                return vm.groups && vm.groups.length > 0;
             }
             return true;
         }
 
         function save() {
-            vm.saveButtonState = "busy";
-            var selectedGroups = _.filter(vm.groups, function(group) { return group.selected; });
-            var roles = _.map(selectedGroups, function(group) { return group.name; });
+            vm.buttonState = "busy";
+            var roles = _.map(vm.groups, function (group) { return group.name; });
             contentResource.updatePublicAccess(id, vm.userName, vm.password, roles, vm.loginPage.id, vm.errorPage.id).then(
                 function () {
                     localizationService.localize("publicAccess_paIsProtected", [$scope.currentNode.name]).then(function (value) {
@@ -98,7 +99,7 @@
                     navigationService.syncTree({ tree: "content", path: $scope.currentNode.path, forceReload: true });
                 }, function (error) {
                     vm.error = error;
-                    vm.saveButtonState = "error";
+                    vm.buttonState = "error";
                 }
             );
         }
@@ -113,6 +114,35 @@
             group.selected = !group.selected;
         }
 
+        function pickGroup() {
+            navigationService.allowHideDialog(false);
+            editorService.memberGroupPicker({
+                multiPicker: true,
+                submit: function(model) {
+                    var selectedGroupIds = model.selectedMemberGroups
+                        ? model.selectedMemberGroups
+                        : [model.selectedMemberGroup];
+                    _.each(selectedGroupIds,
+                        function(groupId) {
+                            var group = _.find(vm.allGroups, function(g) { return g.id === parseInt(groupId); });
+                            if (group && !_.contains(vm.groups, group)) {
+                                vm.groups.push(group);
+                            }
+                        });
+                    editorService.close();
+                    navigationService.allowHideDialog(true);
+                },
+                close: function() {
+                    editorService.close();
+                    navigationService.allowHideDialog(true);
+                }
+            });
+        }
+
+        function removeGroup(group) {
+            vm.groups = _.without(vm.groups, group);
+        }
+
         function pickLoginPage() {
             pickPage(vm.loginPage);
         }
@@ -141,12 +171,12 @@
             });
         }
 
-        function remove() {
+        function removeProtection() {
             vm.removing = true;
         }
 
-        function removeConfirm() {
-            vm.saveButtonState = "busy";
+        function removeProtectionConfirm() {
+            vm.buttonState = "busy";
             contentResource.removePublicAccess(id).then(
                 function () {
                     localizationService.localize("publicAccess_paIsRemoved", [$scope.currentNode.name]).then(function(value) {
@@ -157,7 +187,7 @@
                     navigationService.syncTree({ tree: "content", path: $scope.currentNode.path, forceReload: true });
                 }, function (error) {
                     vm.error = error;
-                    vm.saveButtonState = "error";
+                    vm.buttonState = "error";
                 }
             );
         }
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/protect.html b/src/Umbraco.Web.UI.Client/src/views/content/protect.html
index 3746e46aa3..4b2bf54b5c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/protect.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/protect.html
@@ -53,22 +53,26 @@
                         </umb-pane>
                     </div>
 
-                    <div ng-show="vm.step === 'role' && !vm.groups.length">
+                    <div ng-show="vm.step === 'role' && !vm.hasGroups">
                         <p><localize key="publicAccess_paAdvancedNoGroups">You need to create a membergroup before you can use role-based authentication</localize></p>
                     </div>
 
-                    <div ng-show="vm.step === 'role' && vm.groups.length">
+                    <div ng-show="vm.step === 'role' && vm.hasGroups">
                         <p><localize key="publicAccess_paSelectRoles" tokens="[currentNode.name]">Pick the roles who have access to this page</localize></p>
                         <umb-pane>
-                            <div ng-repeat="group in vm.groups | orderBy:'name'">
-                                <label>
-                                    <input type="checkbox" ng-model="group.selected"/> {{group.name}}
-                                </label>
-                            </div>
+                            <umb-node-preview ng-repeat="group in vm.groups | orderBy:'name'"
+                                              icon="'icon-users'"
+                                              name="group.name"
+                                              allow-remove="true"
+                                              on-remove="vm.removeGroup(group)">
+                            </umb-node-preview>
+                            <a href ng-click="vm.pickGroup()" class="umb-node-preview-add" prevent-default>
+                                <localize key="general_add">Add</localize>
+                            </a>
                         </umb-pane>
                     </div>
 
-                    <div ng-show="vm.step === 'user' || vm.groups.length">
+                    <div ng-show="vm.step === 'user' || vm.hasGroups">
                         <p class="mt4"><localize key="publicAccess_paSelectPages">Select the pages that contain login form and error messages</localize></p>
                         <umb-pane>
                             <div class="control-group umb-control-group -no-border">
@@ -145,16 +149,16 @@
 
             <umb-button ng-show="vm.canRemove && !vm.removing"
                         type="button"
-                        action="vm.remove()"
+                        action="vm.removeProtection()"
                         button-style="warning"
                         label-key="publicAccess_paRemoveProtection"
-                        disabled="vm.loading">
+                        disabled="vm.buttonState === 'busy'">
             </umb-button>
 
             <umb-button ng-show="vm.step && !vm.removing"
                         type="button"
                         action="vm.save()"
-                        state="vm.saveButtonState"
+                        state="vm.buttonState"
                         button-style="success"
                         label-key="buttons_save"
                         disabled="vm.buttonState === 'busy' || !vm.isValid()">
@@ -169,8 +173,8 @@
 
             <umb-button ng-show="vm.removing"
                         type="button"
-                        action="vm.removeConfirm()"
-                        state="vm.saveButtonState"
+                        action="vm.removeProtectionConfirm()"
+                        state="vm.buttonState"
                         button-style="success"
                         label-key="buttons_confirmActionConfirm"
                         disabled="vm.buttonState === 'busy'">
diff --git a/src/Umbraco.Web/Editors/ContentController.cs b/src/Umbraco.Web/Editors/ContentController.cs
index a026977fc1..b7a33c3ab8 100644
--- a/src/Umbraco.Web/Editors/ContentController.cs
+++ b/src/Umbraco.Web/Editors/ContentController.cs
@@ -2240,7 +2240,7 @@ namespace Umbraco.Web.Editors
                 }
                 foreach (var role in newRoles)
                 {
-                    entry.AddRule(Constants.Conventions.PublicAccess.MemberRoleRuleType, role);
+                    entry.AddRule(role, Constants.Conventions.PublicAccess.MemberRoleRuleType);
                 }
             }