From d2be30a228af13e34967e89fe11010749b1bad1b Mon Sep 17 00:00:00 2001 From: Shannon Date: Wed, 14 Aug 2019 12:26:49 +1000 Subject: [PATCH] converting to component --- .../users/changepassword.directive.js | 191 +++++++++--------- .../components/users/change-password.html | 55 ++--- 2 files changed, 128 insertions(+), 118 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/users/changepassword.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/changepassword.directive.js index 8919a26dcb..97eb2bf708 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/users/changepassword.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/changepassword.directive.js @@ -3,6 +3,17 @@ function ChangePasswordController($scope) { + var vm = this; + + vm.$onInit = onInit; + vm.$onDestroy = onDestroy; + vm.doChange = doChange; + vm.cancelChange = cancelChange; + vm.showOldPass = showOldPass; + vm.showCancelBtn = showCancelBtn; + + var unsubscribe = []; + function resetModel(isNew) { //the model config will contain an object, if it does not we'll create defaults //NOTE: We will not support doing the password regex on the client side because the regex on the server side @@ -17,37 +28,37 @@ } */ - $scope.showReset = false; + vm.showReset = false; //set defaults if they are not available - if ($scope.config.disableToggle === undefined) { - $scope.config.disableToggle = false; + if (vm.config.disableToggle === undefined) { + vm.config.disableToggle = false; } - if ($scope.config.hasPassword === undefined) { - $scope.config.hasPassword = false; + if (vm.config.hasPassword === undefined) { + vm.config.hasPassword = false; } - if ($scope.config.enablePasswordRetrieval === undefined) { - $scope.config.enablePasswordRetrieval = true; + if (vm.config.enablePasswordRetrieval === undefined) { + vm.config.enablePasswordRetrieval = true; } - if ($scope.config.requiresQuestionAnswer === undefined) { - $scope.config.requiresQuestionAnswer = false; + if (vm.config.requiresQuestionAnswer === undefined) { + vm.config.requiresQuestionAnswer = false; } //don't enable reset if it is new - that doesn't make sense if (isNew === "true") { - $scope.config.enableReset = false; + vm.config.enableReset = false; } - else if ($scope.config.enableReset === undefined) { - $scope.config.enableReset = true; + else if (vm.config.enableReset === undefined) { + vm.config.enableReset = true; } - if ($scope.config.minPasswordLength === undefined) { - $scope.config.minPasswordLength = 0; + if (vm.config.minPasswordLength === undefined) { + vm.config.minPasswordLength = 0; } //set the model defaults - if (!angular.isObject($scope.passwordValues)) { + if (!angular.isObject(vm.passwordValues)) { //if it's not an object then just create a new one - $scope.passwordValues = { + vm.passwordValues = { newPassword: null, oldPassword: null, reset: null, @@ -59,109 +70,103 @@ if (!isNew) { //if it is new, then leave the generated pass displayed - $scope.passwordValues.newPassword = null; - $scope.passwordValues.oldPassword = null; + vm.passwordValues.newPassword = null; + vm.passwordValues.oldPassword = null; } - $scope.passwordValues.reset = null; - $scope.passwordValues.answer = null; + vm.passwordValues.reset = null; + vm.passwordValues.answer = null; } //the value to compare to match passwords if (!isNew) { - $scope.passwordValues.confirm = ""; + vm.passwordValues.confirm = ""; } - else if ($scope.passwordValues.newPassword && $scope.passwordValues.newPassword.length > 0) { + else if (vm.passwordValues.newPassword && vm.passwordValues.newPassword.length > 0) { //if it is new and a new password has been set, then set the confirm password too - $scope.passwordValues.confirm = $scope.passwordValues.newPassword; + vm.passwordValues.confirm = vm.passwordValues.newPassword; } } - resetModel($scope.isNew); - - //if there is no password saved for this entity , it must be new so we do not allow toggling of the change password, it is always there - //with validators turned on. - $scope.changing = $scope.config.disableToggle === true || !$scope.config.hasPassword; - - //we're not currently changing so set the model to null - if (!$scope.changing) { - $scope.passwordValues = null; - } - - $scope.doChange = function () { - resetModel(); - $scope.changing = true; - //if there was a previously generated password displaying, clear it - $scope.passwordValues.generatedPassword = null; - $scope.passwordValues.confirm = null; - }; - - $scope.cancelChange = function () { - $scope.changing = false; - //set model to null - $scope.passwordValues = null; - }; - - var unsubscribe = []; - - //listen for the saved event, when that occurs we'll - //change to changing = false; - unsubscribe.push($scope.$on("formSubmitted", function () { - if ($scope.config.disableToggle === false) { - $scope.changing = false; - } - })); - unsubscribe.push($scope.$on("formSubmitting", function () { - //if there was a previously generated password displaying, clear it - if ($scope.changing && $scope.passwordValues) { - $scope.passwordValues.generatedPassword = null; - } - else if (!$scope.changing) { - //we are not changing, so the model needs to be null - $scope.passwordValues = null; - } - })); - //when the scope is destroyed we need to unsubscribe - $scope.$on('$destroy', function () { + function onDestroy() { for (var u in unsubscribe) { unsubscribe[u](); } - }); + } - $scope.showOldPass = function () { - return $scope.config.hasPassword && - !$scope.config.allowManuallyChangingPassword && - !$scope.config.enablePasswordRetrieval && !$scope.showReset; - }; + function onInit() { + //listen for the saved event, when that occurs we'll + //change to changing = false; + unsubscribe.push($scope.$on("formSubmitted", function () { + if (vm.config.disableToggle === false) { + vm.changing = false; + } + })); - // TODO: I don't think we need this or the cancel button, this can be up to the editor rendering this directive - $scope.showCancelBtn = function () { - return $scope.config.disableToggle !== true && $scope.config.hasPassword; - }; + unsubscribe.push($scope.$on("formSubmitting", function () { + //if there was a previously generated password displaying, clear it + if (vm.changing && vm.passwordValues) { + vm.passwordValues.generatedPassword = null; + } + else if (!vm.changing) { + //we are not changing, so the model needs to be null + vm.passwordValues = null; + } + })); - } + resetModel(vm.isNew); - function ChangePasswordDirective() { + //if there is no password saved for this entity , it must be new so we do not allow toggling of the change password, it is always there + //with validators turned on. + vm.changing = vm.config.disableToggle === true || !vm.config.hasPassword; - var directive = { - restrict: 'E', - replace: true, - templateUrl: 'views/components/users/change-password.html', - controller: 'Umbraco.Editors.Users.ChangePasswordDirectiveController', - scope: { - isNew: "=?", - passwordValues: "=", - config: "=" + //we're not currently changing so set the model to null + if (!vm.changing) { + vm.passwordValues = null; } + } + + function doChange() { + resetModel(); + vm.changing = true; + //if there was a previously generated password displaying, clear it + vm.passwordValues.generatedPassword = null; + vm.passwordValues.confirm = null; }; - return directive; + function cancelChange() { + vm.changing = false; + //set model to null + vm.passwordValues = null; + }; + + function showOldPass() { + return vm.config.hasPassword && + !vm.config.allowManuallyChangingPassword && + !vm.config.enablePasswordRetrieval && !vm.showReset; + }; + + // TODO: I don't think we need this or the cancel button, this can be up to the editor rendering this component + function showCancelBtn() { + return vm.config.disableToggle !== true && vm.config.hasPassword; + }; } - angular.module('umbraco.directives').controller('Umbraco.Editors.Users.ChangePasswordDirectiveController', ChangePasswordController); - angular.module('umbraco.directives').directive('changePassword', ChangePasswordDirective); + var component = { + templateUrl: 'views/components/users/change-password.html', + controller: ChangePasswordController, + controllerAs: 'vm', + bindings: { + isNew: "<", + passwordValues: "=", //TODO: Do we need bi-directional vals? + config: "=" //TODO: Do we need bi-directional vals? + //TODO: Do we need callbacks? + } + }; + + angular.module('umbraco.directives').component('changePassword', component); })(); diff --git a/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html b/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html index 150fbf892b..026918231e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html @@ -1,68 +1,73 @@
-
+
Password has been reset to:
- {{passwordValues.generatedPassword}} + {{vm.passwordValues.generatedPassword}}
-
+
- - - Hello + 
{{vm.showReset}}
+ 
{{vm.passwordValues | json}}
+ + + + - - {{passwordForm.resetPassword.errorMsg}} + ng-change="vm.showReset = !vm.showReset" /> + + {{vm.passwordForm.resetPassword.errorMsg}} - + - - + - + Required - {{passwordForm.oldPassword.errorMsg}} + {{vm.passwordForm.oldPassword.errorMsg}} - - + - + Required - Minimum {{config.minPasswordLength}} characters - {{passwordForm.password.errorMsg}} + Minimum {{vm.config.minPasswordLength}} characters + {{vm.passwordForm.password.errorMsg}} - - + - + The confirmed password doesn't match the new password! - + Cancel