Hiding the Password Strength progress when the field is empty

gruntfile.js

@@ -258,6 +258,26 @@ module.exports = function (grunt) {
     });
   });
 
+  // Drops the MongoDB database, used in e2e testing
+  grunt.task.registerTask('dropdb', 'drop the database', function () {
+    // async mode
+    var done = this.async();
+
+    // Use mongoose configuration
+    var mongoose = require('./config/lib/mongoose.js');
+
+    mongoose.connect(function (db) {
+      db.connection.db.dropDatabase(function (err) {
+        if (err) {
+          console.log(err);
+        } else {
+          console.log('Successfully dropped db: ', db.connection.db.databaseName);
+        }
+        db.connection.db.close(done);
+      });
+    });
+  });
+
   grunt.task.registerTask('server', 'Starting the server', function () {
     // Get the callback
     var done = this.async();
@@ -279,7 +299,7 @@ module.exports = function (grunt) {
   grunt.registerTask('test', ['env:test', 'lint', 'mkdir:upload', 'copy:localConfig', 'server', 'mochaTest', 'karma:unit', 'protractor']);
   grunt.registerTask('test:server', ['env:test', 'lint', 'server', 'mochaTest']);
   grunt.registerTask('test:client', ['env:test', 'lint', 'server', 'karma:unit']);
-  grunt.registerTask('test:e2e', ['env:test', 'lint', 'server', 'protractor']);
+  grunt.registerTask('test:e2e', ['env:test', 'lint', 'dropdb', 'server', 'protractor']);
 
   // Run project coverage
   grunt.registerTask('coverage', ['env:test', 'lint', 'mocha_istanbul:coverage']);

gulpfile.js

@@ -199,6 +199,23 @@ gulp.task('karma', function (done) {
     }));
 });
 
+// Drops the MongoDB database, used in e2e testing
+gulp.task('dropdb', function (done) {
+  // Use mongoose configuration
+  var mongoose = require('./config/lib/mongoose.js');
+
+  mongoose.connect(function (db) {
+    db.connection.db.dropDatabase(function (err) {
+      if(err) {
+        console.log(err);
+      } else {
+        console.log('Successfully dropped db: ', db.connection.db.databaseName);
+      }
+      db.connection.db.close(done);
+    });
+  });
+});
+
 // Downloads the selenium webdriver
 gulp.task('webdriver_update', webdriver_update);
 
@@ -248,7 +265,7 @@ gulp.task('test:client', function (done) {
 });
 
 gulp.task('test:e2e', function (done) {
-  runSequence('env:test', 'lint', 'nodemon', 'protractor', done);
+  runSequence('env:test', 'lint', 'dropdb', 'nodemon', 'protractor', done);
 });
 
 // Run the project in development mode

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

@@ -4,39 +4,41 @@ 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.strengthColor = strengthMeter[strengthIdx].color;
-          scope.strengthProgress = strengthMeter[strengthIdx].progress;
+            scope.requirementsColor = requirementsMeter[requirementsIdx].color;
+            scope.requirementsProgress = requirementsMeter[requirementsIdx].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;
+            if (result.errors.length) {
+              scope.popoverMsg = PasswordValidator.getPopoverMsg();
+              scope.passwordErrors = result.errors;
+              status = false;
+            } else {
+              scope.popoverMsg = '';
+              scope.passwordErrors = [];
+              status = true;
+            }
           }
-        });
+          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 @@ <h3 class="col-md-12 text-center">Or sign up using your email</h3>
           <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 @@ <h3 class="col-md-12 text-center">Reset your password</h3>
           <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 @@ <h3 class="col-md-12 text-center">Reset your password</h3>
             <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>