From df76554aaf5ecfa1e31c6694a089a3359627f7a6 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 30 Sep 2015 12:16:30 +0200 Subject: [PATCH] U4-5523: move change password to it's own part of user fly out to minimize visual clutter, use new 7.4 buttons + remove functionality from dashboard files. --- src/Umbraco.Web.UI.Client/src/less/main.less | 5 ++ src/Umbraco.Web.UI.Client/src/less/panel.less | 32 -------- .../views/common/dialogs/user.controller.js | 58 ++++++++++----- .../src/views/common/dialogs/user.html | 74 +++++++++++-------- .../src/views/dashboard/ChangePassword.html | 17 ----- .../dashboard/dashboard.tabs.controller.js | 45 ----------- src/Umbraco.Web.UI/config/Dashboard.config | 7 +- 7 files changed, 91 insertions(+), 147 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/views/dashboard/ChangePassword.html diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index 18d6f639dc..d3c4c0de6e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -152,6 +152,11 @@ h5{ display: inline-block } +.block-form .controls-row { + margin-left: 0; + padding-top: 0; +} + .hidelabel > div > .controls-row, .hidelabel > .controls-row, .hidelabel .controls { padding: 0px; border: none; diff --git a/src/Umbraco.Web.UI.Client/src/less/panel.less b/src/Umbraco.Web.UI.Client/src/less/panel.less index dd3f74d9d7..7c04d953d1 100644 --- a/src/Umbraco.Web.UI.Client/src/less/panel.less +++ b/src/Umbraco.Web.UI.Client/src/less/panel.less @@ -269,38 +269,6 @@ display: none; } -//Change password form in user flyout -//Styling overrides to avoid duplicating property editor code -.umb-panel-body .change-password{ - - .umb-pane{ - margin:0; - - } - - .control-label{ - display: inline-block; - width: 46%; - vertical-align: top; - } - - .controls-row{ - margin-left:0 !important; - display: inline-block; - width: 47%; - - input[type=text], - input[type=password]{ - width: 100%; - } - } - - .umb-control-group{ - padding-bottom: 0; - } -} - - // Utility classes //SD: Had to add these because if we want to use the bootstrap text colors diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.controller.js index 50fe203f2b..3eed9f707d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.controller.js @@ -1,8 +1,10 @@ angular.module("umbraco") - .controller("Umbraco.Dialogs.UserController", function ($scope, $location, $timeout, userService, currentUserResource, historyService, eventsService, externalLoginInfo, authResource) { + .controller("Umbraco.Dialogs.UserController", function ($scope, $location, $timeout, userService, historyService, eventsService, externalLoginInfo, authResource, currentUserResource, formHelper) { $scope.history = historyService.getCurrent(); $scope.version = Umbraco.Sys.ServerVariables.application.version + " assembly: " + Umbraco.Sys.ServerVariables.application.assemblyVersion; + $scope.showPasswordFields = false; + $scope.changePasswordButtonState = "init"; $scope.externalLoginProviders = externalLoginInfo.providers; $scope.externalLinkLoginFormAction = Umbraco.Sys.ServerVariables.umbracoUrls.externalLinkLoginsUrl; @@ -47,7 +49,7 @@ angular.module("umbraco") updateTimeout(); } - }, 1000, false); // 1 second, do NOT execute a global digest + }, 1000, false); // 1 second, do NOT execute a global digest } function updateUserInfo() { @@ -102,30 +104,34 @@ angular.module("umbraco") }); + /* ---------- UPDATE PASSWORD ---------- */ + //create the initial model for change password property editor $scope.changePasswordModel = { - alias: "_umb_password", - view: "changepassword", - config: {}, - value: {} + alias: "_umb_password", + view: "changepassword", + config: {}, + value: {} }; //go get the config for the membership provider and add it to the model - currentUserResource.getMembershipProviderConfig().then(function (data) { - $scope.changePasswordModel.config = data; - //ensure the hasPassword config option is set to true (the user of course has a password already assigned) - //this will ensure the oldPassword is shown so they can change it - $scope.changePasswordModel.config.hasPassword = true; - $scope.changePasswordModel.config.disableToggle = true; + currentUserResource.getMembershipProviderConfig().then(function(data) { + $scope.changePasswordModel.config = data; + //ensure the hasPassword config option is set to true (the user of course has a password already assigned) + //this will ensure the oldPassword is shown so they can change it + // disable reset password functionality beacuse it does not make sense inside the backoffice + $scope.changePasswordModel.config.hasPassword = true; + $scope.changePasswordModel.config.disableToggle = true; + $scope.changePasswordModel.config.enableReset = false; }); - ////this is the model we will pass to the service - //$scope.profile = {}; + $scope.changePassword = function() { - $scope.changePassword = function () { + if (formHelper.submitForm({ scope: $scope })) { - if (formHelper.submitForm({ scope: $scope })) { - currentUserResource.changePassword($scope.changePasswordModel.value).then(function (data) { + $scope.changePasswordButtonState = "busy"; + + currentUserResource.changePassword($scope.changePasswordModel.value).then(function(data) { //if the password has been reset, then update our model if (data.value) { @@ -134,12 +140,28 @@ angular.module("umbraco") formHelper.resetForm({ scope: $scope, notifications: data.notifications }); + $scope.changePasswordButtonState = "success"; + }, function (err) { formHelper.handleError(err); + $scope.changePasswordButtonState = "error"; + }); + } + }; - }); \ No newline at end of file + $scope.togglePasswordFields = function() { + clearPasswordFields(); + $scope.showPasswordFields = !$scope.showPasswordFields; + } + + function clearPasswordFields() { + $scope.changePasswordModel.value.newPassword = ""; + $scope.changePasswordModel.confirm = ""; + } + + }); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.html index 94e94c0839..8627412608 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/user.html @@ -19,18 +19,27 @@
-
-
-

- - Edit - -

+
+ +
+ + + Edit + + + + +
- -
+ +
External login providers
@@ -63,7 +72,7 @@
-
+
  • @@ -74,30 +83,37 @@
-
-
Change password
+
-

Enter your current password, then repeat your new password to change it

-
+
Change password
+ - + - + + - - - + + + + -
-
- -
Umbraco version {{version}}
-
\ No newline at end of file +
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/ChangePassword.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/ChangePassword.html deleted file mode 100644 index 9588ebd714..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/ChangePassword.html +++ /dev/null @@ -1,17 +0,0 @@ -
- -

Change password

- - - - - - - - - - -
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js index 5ba6a10002..9b81d3ce0a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js @@ -209,48 +209,3 @@ function MediaFolderBrowserDashboardController($rootScope, $scope, assetsService } angular.module("umbraco").controller("Umbraco.Dashboard.MediaFolderBrowserDashboardController", MediaFolderBrowserDashboardController); - - -function ChangePasswordDashboardController($scope, xmlhelper, $log, currentUserResource, formHelper) { - - //create the initial model for change password property editor - $scope.changePasswordModel = { - alias: "_umb_password", - view: "changepassword", - config: {}, - value: {} - }; - - //go get the config for the membership provider and add it to the model - currentUserResource.getMembershipProviderConfig().then(function(data) { - $scope.changePasswordModel.config = data; - //ensure the hasPassword config option is set to true (the user of course has a password already assigned) - //this will ensure the oldPassword is shown so they can change it - $scope.changePasswordModel.config.hasPassword = true; - $scope.changePasswordModel.config.disableToggle = true; - }); - - ////this is the model we will pass to the service - //$scope.profile = {}; - - $scope.changePassword = function() { - - if (formHelper.submitForm({ scope: $scope })) { - currentUserResource.changePassword($scope.changePasswordModel.value).then(function(data) { - - //if the password has been reset, then update our model - if (data.value) { - $scope.changePasswordModel.value.generatedPassword = data.value; - } - - formHelper.resetForm({ scope: $scope, notifications: data.notifications }); - - }, function (err) { - - formHelper.handleError(err); - - }); - } - }; -} -angular.module("umbraco").controller("Umbraco.Dashboard.StartupChangePasswordController", ChangePasswordDashboardController); diff --git a/src/Umbraco.Web.UI/config/Dashboard.config b/src/Umbraco.Web.UI/config/Dashboard.config index 93e510f7f8..63e6f5a3a4 100644 --- a/src/Umbraco.Web.UI/config/Dashboard.config +++ b/src/Umbraco.Web.UI/config/Dashboard.config @@ -75,11 +75,6 @@ views/dashboard/default/startupdashboardintro.html - - - views/dashboard/ChangePassword.html - -
@@ -99,4 +94,4 @@ /umbraco/plugins/umbracocontour/formsdashboard.ascx
- \ No newline at end of file +