Password tip not updated correct on init (#10814)

* Angular binding in curly brackets not necessary when using ng-bind or ng-bind-html * Update password tip on init * Update comment
umbraco · Aug 17, 2021 · f4504d7 · f4504d7
1 parent 22c80f0
commit f4504d7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/...co.Web.UI.Client/src/common/directives/components/application/umbpasswordtip.directive.js b/...co.Web.UI.Client/src/common/directives/components/application/umbpasswordtip.directive.js
@@ -7,7 +7,7 @@
             controller: UmbPasswordTipController,
             controllerAs: 'vm',
             template:
-                '<span class="help-inline" style="display: block;" ng-if="vm.passwordTip" ng-bind-html="vm.passwordTip">{{vm.passwordTip}}</span>',
+                '<span class="help-inline" style="display: block;" ng-if="vm.passwordTip" ng-bind-html="vm.passwordTip"></span>',
             bindings: {
                 passwordVal: "<",
                 minPwdLength: "<",
@@ -21,6 +21,11 @@
         let defaultMinPwdNonAlphaNum = Umbraco.Sys.ServerVariables.umbracoSettings.minimumPasswordNonAlphaNum;
 
         var vm = this;
+
+        vm.passwordNonAlphaTip = '';
+        vm.passwordTip = '';
+        vm.passwordLength = 0;
+
         vm.$onInit = onInit;
         vm.$onChanges = onChanges;
 
@@ -36,26 +41,27 @@
             if (vm.minPwdNonAlphaNum > 0) {
                 localizationService.localize('user_newPasswordFormatNonAlphaTip', [vm.minPwdNonAlphaNum]).then(data => {
                     vm.passwordNonAlphaTip = data;
-                    updatePasswordTip(0);
+                    updatePasswordTip(vm.passwordLength);
                 });
             } else {
                 vm.passwordNonAlphaTip = '';
-                updatePasswordTip(0);
+                updatePasswordTip(vm.passwordLength);
             }
         }
 
         function onChanges(simpleChanges) {
+
             if (simpleChanges.passwordVal) {
-                if (simpleChanges.passwordVal.currentValue) {
-                    updatePasswordTip(simpleChanges.passwordVal.currentValue.length);
-                } else {
-                    updatePasswordTip(0);
-                }
+                vm.passwordLength = simpleChanges.passwordVal.currentValue ? simpleChanges.passwordVal.currentValue.length : 0;
+
+                updatePasswordTip(vm.passwordLength);
             }
         }
 
         const updatePasswordTip = passwordLength => {
+
             const remainingLength = vm.minPwdLength - passwordLength;
+
             if (remainingLength > 0) {
                 localizationService.localize('user_newPasswordFormatLengthTip', [remainingLength]).then(data => {
                     vm.passwordTip = data;

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
@@ -83,6 +83,9 @@
                 vm.passwordValues.answer = null;
             }
 
+            // set initial value for new password value
+            vm.passwordVal = vm.passwordValues.newPassword;
+
             //the value to compare to match passwords
             if (!isNew) {
                 vm.passwordValues.confirm = "";

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
@@ -38,13 +38,14 @@
                 </umb-control-group>
 
                 <umb-control-group alias="password" label="@user_newPassword" ng-if="!vm.showReset" required="true">
-                    <input type="password" name="password" id="password" ng-model="vm.passwordValues.newPassword"
+                    <input type="password" name="password" id="password"
                            class="input-block-level umb-textstring textstring"
                            required
                            val-server-field="password"
+                           ng-model="vm.passwordValues.newPassword"
                            ng-minlength="{{vm.config.minPasswordLength}}"
                            no-dirty-check
-                           ng-keyup="vm.newPasswordKeyUp($event)"/>
+                           ng-keyup="vm.newPasswordKeyUp($event)" />
                     <span ng-messages="changePasswordForm.password.$error" show-validation-on-submit>
                         <span class="help-inline" ng-message="required">Required</span>
                         <span class="help-inline" ng-message="minlength">Minimum {{vm.config.minPasswordLength}} characters</span>