Merge branch 'user-group-permissions' of https://github.com/umbraco/Umbraco-CMS into user-group-permissions

2017-06-28 23:38:51 +10:00
parent 8023a89b10 de00b2ef00
commit 3cd39fee94
7 changed files with 279 additions and 56 deletions
--- a/src/Umbraco.Web.UI.Client/bower.json
+++ b/src/Umbraco.Web.UI.Client/bower.json
@@ -29,6 +29,7 @@
    "codemirror": "~5.3.0",
    "angular-local-storage": "~0.2.3",
    "moment": "~2.10.3",
-    "ace-builds": "^1.2.3"
+    "ace-builds": "^1.2.3",
+    "clipboard": "1.7.1"
  }
 }
--- a/src/Umbraco.Web.UI.Client/gruntFile.js
+++ b/src/Umbraco.Web.UI.Client/gruntFile.js
@@ -556,6 +556,10 @@ module.exports = function (grunt) {
                                
                                'src-min-noconflict/worker-javascript.js',
                            ]
+                        },
+                        'clipboard': {
+                            keepExpandedHierarchy: false,
+                            files: ['dist/clipboard.min.js']
                       }
                    }
                }
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbclipboard.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbclipboard.directive.js
@@ -0,0 +1,166 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbClipboard
+@restrict E
+@scope
+
+@description
+<strong>Added in Umbraco v. 7.7:</strong> Use this directive to copy content to the clipboard
+
+<h3>Markup example</h3>
+<pre>
+    <div ng-controller="My.ClipBoardController as vm">
+        
+        <!-- Copy text from an element -->
+        <div id="copy-text">Copy me!</div>
+        
+        <umb-button
+            umb-clipboard
+            umb-clipboard-success="vm.copySuccess()"
+            umb-clipboard-error="vm.copyError()"
+            umb-clipboard-target="#copy-text"
+            state="vm.clipboardButtonState"
+            type="button"
+            label="Copy">
+        </umb-button>
+
+        <!-- Cut text from a textarea -->
+        <textarea id="cut-text" ng-model="vm.cutText"></textarea>
+
+        <umb-button
+            umb-clipboard
+            umb-clipboard-success="vm.copySuccess()"
+            umb-clipboard-error="vm.copyError()"
+            umb-clipboard-target="#cut-text"
+            umb-clipboard-action="cut"
+            state="vm.clipboardButtonState"
+            type="button"
+            label="Copy">
+        </umb-button>
+
+        <!-- Copy text without an element -->
+        <umb-button
+            ng-if="vm.copyText"
+            umb-clipboard
+            umb-clipboard-success="vm.copySuccess()"
+            umb-clipboard-error="vm.copyError()"
+            umb-clipboard-text="vm.copyText"
+            state="vm.clipboardButtonState"
+            type="button"
+            label="Copy">
+        </umb-button>
+    
+    </div>
+</pre>
+
+<h3>Controller example</h3>
+<pre>
+    (function () {
+        "use strict";
+
+        function Controller() {
+
+            var vm = this;
+
+            vm.copyText = "Copy text without element";
+            vm.cutText = "Text to cut";
+
+            vm.copySuccess = copySuccess;
+            vm.copyError = copyError;
+
+            function copySuccess() {
+                vm.clipboardButtonState = "success";
+            }
+            
+            function copyError() {
+                vm.clipboardButtonState = "error";
+            }
+
+        }
+
+        angular.module("umbraco").controller("My.ClipBoardController", Controller);
+
+    })();
+</pre>
+
+@param {callback} umbClipboardSuccess (<code>expression</code>): Callback function when the content is copied.
+@param {callback} umbClipboardError (<code>expression</code>): Callback function if the copy fails.
+@param {string} umbClipboardTarget (<code>attribute</code>): The target element to copy.
+@param {string} umbClipboardAction (<code>attribute</code>): Specify if you want to copy or cut content ("copy", "cut"). Cut only works on <code>input</code> and <code>textarea</code> elements.
+@param {string} umbClipboardText (<code>attribute</code>): Use this attribute if you don't have an element to copy from.
+
+**/
+
+(function () {
+    'use strict';
+
+    function umbClipboardDirective($timeout, assetsService) {
+
+        function link(scope, element, attrs, ctrl) {
+
+            var clipboard;
+            var target = element[0];
+            
+            assetsService.loadJs("lib/clipboard/clipboard.min.js")
+                .then(function () {
+
+                    if(scope.umbClipboardTarget) {
+                        target.setAttribute("data-clipboard-target", scope.umbClipboardTarget);
+                    }
+
+                    if(scope.umbClipboardAction) {
+                        target.setAttribute("data-clipboard-action", scope.umbClipboardAction);
+                    }
+
+                    if(scope.umbClipboardText) {
+                        target.setAttribute("data-clipboard-text", scope.umbClipboardText);
+                    }
+
+                    clipboard = new Clipboard(target);
+
+                    clipboard.on('success', function (e) {
+                        e.clearSelection();
+                        if (scope.umbClipboardSuccess) {
+                            scope.$apply(function () {
+                                scope.umbClipboardSuccess({ e: e });
+                            });
+                        }
+                    });
+
+                    clipboard.on('error', function (e) {
+                        if (scope.umbClipboardError) {
+                            scope.$apply(function () {
+                                scope.umbClipboardError({ e: e });
+                            });
+                        }
+                    });
+
+                });
+
+            // clean up
+            scope.$on('$destroy', function(){
+                clipboard.destroy();
+            });
+
+        }
+
+        ////////////
+
+        var directive = {
+            restrict: 'A',
+            scope: {
+                umbClipboardSuccess: '&?',
+                umbClipboardError: '&?',
+                umbClipboardTarget: "@?",
+                umbClipboardAction: "@?",
+                umbClipboardText: "=?"
+            },
+            link: link
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco').directive('umbClipboard', umbClipboardDirective);
+
+})();
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -55,7 +55,7 @@

 .umb-button__progress.-white {
   border-color: rgba(255, 255, 255, 0.4);
-   border-left-color: #ffffff;
+   border-left-color: @white;
 }

 .umb-button__success,
@@ -67,18 +67,9 @@
   transform: translate(-50%, -50%);
   opacity: 1;
   font-size: 20px;
-   color: @green;
   transition: opacity 0.25s ease;
 }

-.umb-button__success {
-   color: @green;
-}
-
-.umb-button__error {
-   color: @red;
-}
-
 .umb-button__success.-hidden,
 .umb-button__error.-hidden {
   opacity: 0;
@@ -87,7 +78,7 @@

 .umb-button__success.-white,
 .umb-button__error.-white {
-   color: #ffffff;
+   color: @white;
 }

 .umb-button__overlay {
@@ -95,7 +86,7 @@
   width: 100%;
   height: 100%;
   z-index: 10;
-   background: #ffffff;
+   background: @white;
   opacity: 0;
 }

--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -182,7 +182,6 @@
                  <ng-form name="avatarForm" class="flex flex-column justify-center items-center">

                    <umb-avatar style="margin-bottom: 10px;"
-                                ng-if="invitedUser.avatars.length > 0"
                                color="secondary"
                                size="xxl"
                                name="{{vm.user.name}}"
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
@@ -6,6 +6,7 @@
        var vm = this;
        var localizeSaving = localizationService.localize("general_saving");

+        vm.page = {};
        vm.users = [];
        vm.userGroups = [];
        vm.userStates = [];
@@ -85,6 +86,10 @@
        vm.createUser = createUser;
        vm.inviteUser = inviteUser;
        vm.getSortLabel = getSortLabel;
+        vm.toggleNewUserPassword = toggleNewUserPassword;
+        vm.copySuccess = copySuccess;
+        vm.copyError = copyError;
+        vm.goToUser = goToUser;

        function init() {

@@ -110,6 +115,11 @@
        }

        function setUsersViewState(state) {
+
+            if (state === "createUser") {
+                clearAddUserForm();
+            }
+
            vm.usersViewState = state;
        }

@@ -155,7 +165,7 @@
            if(vm.selection.length > 0) {
                selectUser(user, vm.selection);
            } else {
-                $location.path('users/users/user/' + user.id);
+                goToUser(user.id);
            }
        }

@@ -336,52 +346,61 @@

        function createUser(addUserForm) {

-          if (formHelper.submitForm({ formCtrl: addUserForm,scope: $scope, statusMessage: "Saving..." })) {
+            if (formHelper.submitForm({ formCtrl: addUserForm, scope: $scope, statusMessage: "Saving..." })) {

-            vm.newUser.id = -1;
-            vm.newUser.parentId = -1;
-            vm.page.createButtonState = "busy";
+                vm.newUser.id = -1;
+                vm.newUser.parentId = -1;
+                vm.page.createButtonState = "busy";

-            usersResource.createUser(vm.newUser)
-              .then(function (saved) {
-
-                //success
-                vm.page.createButtonState = "success";
-                vm.newUser = saved;
-                setUsersViewState('createUserSuccess');
-                clearAddUserForm();
-
-              }, function (err) {
-
-                //error
-                formHelper.handleError(err);
-                vm.page.createButtonState = "error";
-              });            
-          }
+                usersResource.createUser(vm.newUser)
+                    .then(function (saved) {
+                        vm.page.createButtonState = "success";
+                        vm.newUser = saved;
+                        setUsersViewState('createUserSuccess');
+                    }, function (err) {
+                        formHelper.handleError(err);
+                        vm.page.createButtonState = "error";
+                    });
+            }

        }

        function inviteUser(addUserForm) {

-          if (formHelper.submitForm({ formCtrl: addUserForm, scope: $scope, statusMessage: "Saving..." })) {
-            vm.newUser.id = -1;
-            vm.newUser.parentId = -1;
-            vm.page.createButtonState = "busy";
+            if (formHelper.submitForm({ formCtrl: addUserForm, scope: $scope, statusMessage: "Saving..." })) {
+                vm.newUser.id = -1;
+                vm.newUser.parentId = -1;
+                vm.page.createButtonState = "busy";

-            usersResource.inviteUser(vm.newUser)
-              .then(function (saved) {
+                usersResource.inviteUser(vm.newUser)
+                    .then(function (saved) {
+                        //success
+                        vm.page.createButtonState = "success";
+                    }, function (err) {
+                        //error
+                        formHelper.handleError(err);
+                        vm.page.createButtonState = "error";
+                    });
+            }

-                //success
-                vm.page.createButtonState = "success";
+        }

-              }, function (err) {
+        function toggleNewUserPassword() {
+            vm.newUser.showPassword = !vm.newUser.showPassword;
+        }

-                //error
-                formHelper.handleError(err);
-                vm.page.createButtonState = "error";
-              });                    
-          }
+        // copy to clip board success
+        function copySuccess() {
+            vm.page.copyPasswordButtonState = "success";
+        }
+        
+        // copy to clip board error
+        function copyError() {
+            vm.page.copyPasswordButtonState = "error";
+        }

+        function goToUser(userId) {
+            $location.path('users/users/user/' + userId);
        }

        // helpers
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
@@ -379,14 +379,57 @@
    </umb-editor-sub-header>

    <div class="flex justify-center">
-      <div style="max-width: 500px;" class="tc">
-        <div class="flex justify-center" style="margin-bottom: 15px;">
-          <umb-checkmark checked="vm.usersViewState === 'createUserSuccess'"
-                         size="xl">
+      <div style="max-width: 500px;">
+        <div class="flex items-center" style="margin-bottom: 15px;">
+          <umb-checkmark
+            checked="vm.usersViewState === 'createUserSuccess'"
+            size="m">
          </umb-checkmark>
+          <h3 class="bold" style="margin: 0 0 0 10px;">{{vm.newUser.name | umbWordLimit:1}} has been created</h3>
+        </div>
+        <p style="line-height: 1.6em; margin-bottom: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.</p>
+        <div>
+
+          <label class="bold">Password</label>
+
+          <div class="flex items-center justify-between" style="background-color: #f3f3f5; padding: 10px 20px; border-radius: 3px; margin-bottom: 30px;">
+            
+            <div ng-show="vm.newUser.showPassword">{{vm.newUser.resetPasswordValue}}</div>
+            <div ng-show="!vm.newUser.showPassword">&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</div>
+
+            <div>
+              <umb-button
+                ng-if="!vm.newUser.showPassword"
+                type="button"
+                action="vm.toggleNewUserPassword()"
+                label="Show"
+                size="xs">
+              </umb-button>
+
+              <umb-button
+                ng-if="vm.newUser.showPassword"
+                type="button"
+                action="vm.toggleNewUserPassword()"
+                label="Hide"
+                size="xs">
+              </umb-button>
+
+              <umb-button
+                  ng-if="vm.newUser.resetPasswordValue"
+                  umb-clipboard
+                  umb-clipboard-success="vm.copySuccess()"
+                  umb-clipboard-error="vm.copyError()"
+                  umb-clipboard-text="vm.newUser.resetPasswordValue"
+                  state="vm.page.copyPasswordButtonState"
+                  type="button"
+                  label="Copy"
+                  size="xs">
+              </umb-button>
+
+            </div>
+          </div>
+
        </div>
-        <h3 class="bold" style="margin-bottom: 0;">{{vm.newUser.name | umbWordLimit:1}} has been created</h3>
-        <p style="line-height: 1.6em; margin-bottom: 30px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.</p>
        <div>
          <umb-button type="button"
                      button-style="info"
@@ -397,7 +440,7 @@
          <umb-button type="button"
                      button-style="success"
                      label-key="user_goToProfile"
-                      action="vm.goToUser(vm.newUser);"
+                      action="vm.goToUser(vm.newUser.id);"
                      size="m">
          </umb-button>
        </div>