renaming strength meter, hiding when password field is empty, and refactoring directives to use $validators

modules/users/client/directives/password-validator.client.directive.js

@@ -4,39 +4,40 @@ angular.module('users')
   .directive('passwordValidator', ['PasswordValidator', function(PasswordValidator) {
     return {
       require: 'ngModel',
-      link: function(scope, element, attrs, modelCtrl) {
-        modelCtrl.$parsers.unshift(function (password) {
-          var result = PasswordValidator.getResult(password);
-          var strengthIdx = 0;
+      link: function(scope, element, attrs, ngModel) {
+        ngModel.$validators.requirements = function (password) {
+          var status = true;
+          if (password) {
+            var result = PasswordValidator.getResult(password);
+            var requirementsIdx = 0;
 
-          // Strength Meter - visual indicator for users
-          var strengthMeter = [
-            { color: 'danger', progress: '20' },
-            { color: 'warning', progress: '40' },
-            { color: 'info', progress: '60' },
-            { color: 'primary', progress: '80' },
-            { color: 'success', progress: '100' }
-          ];
-          var strengthMax = strengthMeter.length;
+            // requirements Meter - visual indicator for users
+            var requirementsMeter = [
+              { color: 'danger', progress: '20' },
+              { color: 'warning', progress: '40' },
+              { color: 'info', progress: '60' },
+              { color: 'primary', progress: '80' },
+              { color: 'success', progress: '100' }
+            ];
 
-          if (result.errors.length < strengthMeter.length) {
-            strengthIdx = strengthMeter.length - result.errors.length - 1;
+            if (result.errors.length < requirementsMeter.length) {
+              requirementsIdx = requirementsMeter.length - result.errors.length - 1;
+            }
+
+            scope.requirementsColor = requirementsMeter[requirementsIdx].color;
+            scope.requirementsProgress = requirementsMeter[requirementsIdx].progress;
+
+            if (result.errors.length) {
+              scope.popoverMsg = PasswordValidator.getPopoverMsg();
+              scope.passwordErrors = result.errors;
+              status = false;
+            } else {
+              scope.popoverMsg = '';
+              status = true;
+            }
           }
-
-          scope.strengthColor = strengthMeter[strengthIdx].color;
-          scope.strengthProgress = strengthMeter[strengthIdx].progress;
-
-          if (result.errors.length) {
-            scope.popoverMsg = PasswordValidator.getPopoverMsg();
-            scope.passwordErrors = result.errors;
-            modelCtrl.$setValidity('strength', false);
-            return undefined;
-          } else {
-            scope.popoverMsg = '';
-            modelCtrl.$setValidity('strength', true);
-            return password;
-          }
-        });
+          return status;
+        };
       }
     };
 }]);

modules/users/client/directives/password-verify.client.directive.js

@@ -7,27 +7,22 @@ angular.module('users')
       scope: {
         passwordVerify: '='
       },
-      link: function(scope, element, attrs, modelCtrl) {
+      link: function(scope, element, attrs, ngModel) {
+        var status = true;
         scope.$watch(function() {
           var combined;
-          if (scope.passwordVerify || modelCtrl.$viewValue) {
-            combined = scope.passwordVerify + '_' + modelCtrl.$viewValue;
+          if (scope.passwordVerify || ngModel) {
+            combined = scope.passwordVerify + '_' + ngModel;
           }
           return combined;
         }, function(value) {
           if (value) {
-            modelCtrl.$parsers.unshift(function(viewValue) {
+            ngModel.$validators.passwordVerify = function (password) {
               var origin = scope.passwordVerify;
-              if (origin !== viewValue) {
-                modelCtrl.$setValidity('passwordVerify', false);
-                return undefined;
-              } else {
-                modelCtrl.$setValidity('passwordVerify', true);
-                return viewValue;
-              }
-            });
+              return (origin !== password) ? false : true;
+            };
           }
         });
-     }
+      }
     };
 });

modules/users/client/views/authentication/signup.client.view.html

@@ -38,13 +38,13 @@
           <div ng-messages="userForm.password.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Password is required.</p>
             <div ng-repeat="passwordError in passwordErrors">
-              <p class="help-block error-text" ng-show="userForm.password.$error.strength">{{passwordError}}</p>
+              <p class="help-block error-text" ng-show="userForm.password.$error.requirements">{{passwordError}}</p>
             </div>
           </div>
         </div>
-        <div class="form-group" ng-show="!userForm.password.$pristine">
-          <label>Password Strength</label>
-          <progressbar value="strengthProgress" type="{{strengthColor}}"><span style="color:white; white-space:nowrap;">{{strengthProgress}}%</span></progressbar>
+        <div class="form-group" ng-show="!userForm.password.$error.required">
+          <label>Password Requirements</label>
+          <progressbar value="requirementsProgress" type="{{requirementsColor}}"><span style="color:white; white-space:nowrap;">{{requirementsProgress}}%</span></progressbar>
         </div>
         <div class="text-center form-group">
           <button type="submit" class="btn btn-primary">Sign up</button>

modules/users/client/views/password/reset-password.client.view.html

@@ -9,7 +9,7 @@
           <div ng-messages="resetPasswordForm.newPassword.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Enter a new password.</p>
             <div ng-repeat="passwordError in passwordErrors">
-              <p class="help-block error-text" ng-show="resetPasswordForm.newPassword.$error.strength">{{passwordError}}</p>
+              <p class="help-block error-text" ng-show="resetPasswordForm.newPassword.$error.requirements">{{passwordError}}</p>
             </div>
           </div>
         </div>
@@ -21,9 +21,9 @@
             <p class="help-block error-text" ng-show=resetPasswordForm.verifyPassword.$error.passwordVerify>Passwords do not match.</p>
           </div>
         </div>
-        <div class="form-group" ng-show="!resetPasswordForm.newPassword.$pristine">
-          <label>Password Strength</label>
-          <progressbar value="strengthProgress" type="{{strengthColor}}"><span style="color:white; white-space:nowrap;">{{strengthProgress}}%</span></progressbar>
+        <div class="form-group" ng-show="!resetPasswordForm.newPassword.$error.required">
+          <label>Password Requirements</label>
+          <progressbar value="requirementsProgress" type="{{requirementsColor}}"><span style="color:white; white-space:nowrap;">{{requirementsProgress}}%</span></progressbar>
         </div>
         <div class="text-center form-group">
           <button type="submit" class="btn btn-primary">Update Password</button>

modules/users/client/views/settings/change-password.client.view.html

@@ -15,7 +15,7 @@
           <div ng-messages="passwordForm.newPassword.$error" role="alert">
             <p class="help-block error-text" ng-message="required">Enter a new password.</p>
             <div ng-repeat="passwordError in passwordErrors">
-              <p class="help-block error-text" ng-show="passwordForm.newPassword.$error.strength">{{passwordError}}</p>
+              <p class="help-block error-text" ng-show="passwordForm.newPassword.$error.requirements">{{passwordError}}</p>
             </div>
           </div>
         </div>
@@ -27,9 +27,9 @@
             <p class="help-block error-text" ng-show=passwordForm.verifyPassword.$error.passwordVerify>Passwords do not match.</p>
           </div>
         </div>
-        <div class="form-group" ng-show="!passwordForm.newPassword.$pristine">
-          <label>Password Strength</label>
-          <progressbar value="strengthProgress" type="{{strengthColor}}"><span style="color:white; white-space:nowrap;">{{strengthProgress}}%</span></progressbar>
+        <div class="form-group" ng-show="!passwordForm.newPassword.$error.required">
+          <label>Password Requirements</label>
+          <progressbar value="requirementsProgress" type="{{requirementsColor}}"><span style="color:white; white-space:nowrap;">{{requirementsProgress}}%</span></progressbar>
         </div>
         <div class="text-center form-group">
           <button type="submit" class="btn btn-primary">Save Password</button>