Merge pull request #662 from yemel/fix/password-strength-hint

Change wording of very weak password, add strength tip, add tests

index.html

@@ -230,7 +230,7 @@
                 <h3>Join a Wallet in Creation</h3>
                 <form name="joinForm" ng-submit="join(joinForm)" novalidate>
                   <input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
-                  <input type="password" class="form-control" placeholder="Choose your password" name="joinPassword" ng-model="$parent.joinPassword" check-strength="passwordStrength" tooltip="Password strength: {{passwordStrength}}" tooltip-trigger="focus" required>
+                  <input type="password" class="form-control" placeholder="Choose your password" name="joinPassword" ng-model="$parent.joinPassword" check-strength="passwordStrength" tooltip-html-unsafe="Password strength: {{passwordStrength}}<br/><small>Tip: Use lower and uppercase, numbers and symbols</small>" tooltip-trigger="focus" required>
                   <input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
                   <button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
                 </form>
@@ -316,7 +316,7 @@
                 <div class="small-12 medium-6 large-6 columns">
                   <label>Your Wallet Password <small class="has-tip" tooltip="doesn't need to be shared">Required</small>
                   <input type="password" placeholder="Choose your password" class="form-control"
-                    ng-model="$parent.walletPassword" check-strength="passwordStrength" tooltip="Password strength: {{passwordStrength}}" tooltip-trigger="focus" required>
+                    ng-model="$parent.walletPassword" check-strength="passwordStrength" tooltip-html-unsafe="Password strength: {{passwordStrength}}<br/><small>Tip: Use lower and uppercase, numbers and symbols</small>" tooltip-trigger="focus" required>
                   </label>
                 </div>
               </div>

js/directives.js

@@ -126,49 +126,30 @@ angular.module('copayApp.directives')
       restrict: 'EACM',
       require: 'ngModel',
       link: function(scope, element, attrs) {
-        var _grep = function(elems, callback, invert) {
-          var callbackInverse,
-              matches = [],
-              i = 0,
-              length = elems.length,
-              callbackExpect = !invert;
-
-          // Go through the array, only saving the items
-          // that pass the validator function
-          for (; i < length; i++) {
-            callbackInverse = !callback(elems[i], i);
-            if (callbackInverse !== callbackExpect) {
-              matches.push(elems[i]);
-            }
-          }
-
-          return matches;
-        };
-
         var strength = {
-          messages: ['too weak', 'weak', 'weak', 'medium', 'strong'],
+          messages: ['very weak', 'weak', 'weak', 'medium', 'strong'],
           colors: ['#c0392b', '#e74c3c', '#d35400', '#f39c12', '#27ae60'],
           mesureStrength: function (p) {
-            var _force = 0;
+            var force = 0;
-            var _regex = /[$-/:-?{-~!"^_`\[\]]/g;
+            var regex = /[$-/:-?{-~!"^_`\[\]]/g;
-            var _lowerLetters = /[a-z]+/.test(p);
+            var lowerLetters = /[a-z]+/.test(p);
-            var _upperLetters = /[A-Z]+/.test(p);
+            var upperLetters = /[A-Z]+/.test(p);
-            var _numbers = /[0-9]+/.test(p);
+            var numbers = /[0-9]+/.test(p);
-            var _symbols = _regex.test(p);
+            var symbols = regex.test(p);
-            var _flags = [_lowerLetters, _upperLetters, _numbers, _symbols];
+            var flags = [lowerLetters, upperLetters, numbers, symbols];
-            var _passedMatches = _grep(_flags, function (el) { return el === true; }).length;
+            var passedMatches = flags.filter(function (el) { return !!el; }).length;
             
-            _force += 2 * p.length + ((p.length >= 10) ? 1 : 0);
+            force = 2 * p.length + (p.length >= 10 ? 1 : 0);
-            _force += _passedMatches * 10;
+            force += passedMatches * 10;
             
             // penality (short password)
-            _force = (p.length <= 6) ? Math.min(_force, 10) : _force;
+            force = (p.length <= 6) ? Math.min(force, 10) : force;
             
             // penality (poor variety of characters)
-            _force = (_passedMatches == 1) ? Math.min(_force, 10) : _force;
+            force = (passedMatches == 1) ? Math.min(force, 10) : force;
-            _force = (_passedMatches == 2) ? Math.min(_force, 20) : _force;
+            force = (passedMatches == 2) ? Math.min(force, 20) : force;
-            _force = (_passedMatches == 3) ? Math.min(_force, 40) : _force;
+            force = (passedMatches == 3) ? Math.min(force, 40) : force;
-            return _force;
+            return force;
           },
           getColor: function (s) {
             var idx = 0;

test/unit/directives/directivesSpec.js

@@ -63,4 +63,39 @@ describe("Unit: Testing Directives", function() {
     });
   });
 
+  describe('Password strength', function() {
+      beforeEach(inject(function($compile, $rootScope) {
+      $scope = $rootScope;
+      var element = angular.element(
+        '<input type="password" name="password" ng-model="password" check-strength="passwordStrength" value="asd" required>'
+        );
+      $compile(element)($scope);
+      $scope.$digest();
+    }));
+
+    it('should check very weak password', function() {
+      $scope.password = 'asd';
+      $scope.$digest();
+      expect($scope.passwordStrength).to.equal('very weak');
+    });
+
+    it('should check weak password', function() {
+      $scope.password = 'asdasdASDASD';
+      $scope.$digest();
+      expect($scope.passwordStrength).to.equal('weak');
+    });
+
+    it('should check medium password', function() {
+      $scope.password = 'asdasdASDASD1';
+      $scope.$digest();
+      expect($scope.passwordStrength).to.equal('medium');
+    });
+
+    it('should check strong password', function() {
+      $scope.password = 'asdasdASDASD1{';
+      $scope.$digest();
+      expect($scope.passwordStrength).to.equal('strong');
+    });
+
+  });
 });