From 22949400388d42c23894148b551ed3891be4b6e0 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 27 Jun 2017 12:53:41 +0200 Subject: [PATCH 1/2] bring back the avatar in the edit user editor --- src/Umbraco.Web.UI.Client/src/views/users/user.html | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.html b/src/Umbraco.Web.UI.Client/src/views/users/user.html index 321be37bf0..d57867d283 100644 --- 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 @@ Date: Wed, 28 Jun 2017 10:29:16 +0200 Subject: [PATCH 2/2] fixes: U4-10061 Add functionality for show/hide/copy password when creating new user --- src/Umbraco.Web.UI.Client/bower.json | 3 +- src/Umbraco.Web.UI.Client/gruntFile.js | 4 + .../components/umbclipboard.directive.js | 166 ++++++++++++++++++ .../less/components/buttons/umb-button.less | 15 +- .../users/views/users/users.controller.js | 89 ++++++---- .../src/views/users/views/users/users.html | 57 +++++- 6 files changed, 279 insertions(+), 55 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbclipboard.directive.js diff --git a/src/Umbraco.Web.UI.Client/bower.json b/src/Umbraco.Web.UI.Client/bower.json index f630be147e..70accbdcca 100644 --- 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" } } diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index 83cb15df64..31c0ac9aa6 100644 --- 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'] } } } diff --git 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 new file mode 100644 index 0000000000..cf52af6bb1 --- /dev/null +++ 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 +Added in Umbraco v. 7.7: Use this directive to copy content to the clipboard + +

Markup example

+
+    

+        
+        
+        
Copy me!

+        
+        
+        
+
+        
+        
+
+        
+        
+
+        
+        
+        
+    
+    

+
+ +

Controller example

+
+    (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);
+
+    })();
+
+ +@param {callback} umbClipboardSuccess (expression): Callback function when the content is copied. +@param {callback} umbClipboardError (expression): Callback function if the copy fails. +@param {string} umbClipboardTarget (attribute): The target element to copy. +@param {string} umbClipboardAction (attribute): Specify if you want to copy or cut content ("copy", "cut"). Cut only works on input and textarea elements. +@param {string} umbClipboardText (attribute): 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); + +})(); diff --git 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 index 4d9b07737c..82e3afbb83 100644 --- 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; } diff --git 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 index bde0e2461b..5cb88ce1a4 100644 --- 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 diff --git 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 index d36f8c4b79..581dad0c24 100644 --- 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 @@
-
-
- +
+
+ +

{{vm.newUser.name | umbWordLimit:1}} has been created

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.

+
+ + + +
+ +
{{vm.newUser.resetPasswordValue}}
+
••••••••
+ +
+ + + + + + + + + +
+
+
-

{{vm.newUser.name | umbWordLimit:1}} has been created

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.