added password length checker

This commit is contained in:
Mario Colque 2014-05-26 15:03:39 -03:00
parent cb03424e7a
commit 941d516485
2 changed files with 77 additions and 5 deletions

View File

@ -192,8 +192,8 @@
<h3>Create a new wallet</h3>
<form name="createForm" ng-submit="create(createForm)" novalidate>
<input type="text" class="form-control" ng-model="walletName" name="walletName" placeholder="Wallet name (optional)">
<input type="password" class="form-control" placeholder="Choose your password" name="createPassword" ng-model="createPassword" required>
<button type="submit" class="button secondary radius" ng-disabled="createForm.$invalid || loading" loading="Creating">Create</button>
<input type="password" class="form-control" placeholder="Choose your password" name="createPassword" ng-model="createPassword" check-strength="createPassword" required>
<button type="submit" class="button secondary radius" ng-disabled="createForm.$invalid || loading" loading="Creating">Create</button>
</form>
</div>
</div>
@ -203,7 +203,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="joinPassword" required>
<input type="password" class="form-control" placeholder="Choose your password" name="joinPassword" ng-model="joinPassword" check-strength="joinPassword" 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>
@ -294,7 +294,7 @@
</div>
<div class="small-12 medium-6 medium-centered large-6 large-centered columns m30v">
<h6>Your Wallet Password (you don't need to share this) <small>Required</small></h6>
<input type="password" class="form-control" ng-model="walletPassword" required>
<input type="password" class="form-control" ng-model="walletPassword" check-strength="walletPassword" required>
</div>
<div class="small-12 medium-6 medium-centered large-6 large-centered columns m30v">
<h6>Wallet name <small>Optional</small></h6>

View File

@ -105,7 +105,8 @@ angular.module('copay.directives')
});
}
}
}).directive('avatar', function($rootScope, controllerUtils) {
})
.directive('avatar', function($rootScope, controllerUtils) {
return {
link: function(scope, element, attrs) {
var peer = JSON.parse(attrs.peer)
@ -118,4 +119,75 @@ angular.module('copay.directives')
}
}
}
})
.directive('checkStrength', function() {
return {
replace: false,
restrict: 'EACM',
scope: { model: '=checkStrength' },
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 = {
colors: ['#c0392b', '#e74c3c', '#d35400', '#f39c12', '#27ae60'],
mesureStrength: function (p) {
var _force = 0;
var _regex = /[$-/:-?{-~!"^_`\[\]]/g;
var _lowerLetters = /[a-z]+/.test(p);
var _upperLetters = /[A-Z]+/.test(p);
var _numbers = /[0-9]+/.test(p);
var _symbols = _regex.test(p);
var _flags = [_lowerLetters, _upperLetters, _numbers, _symbols];
var _passedMatches = _grep(_flags, function (el) { return el === true; }).length;
_force += 2 * p.length + ((p.length >= 10) ? 1 : 0);
_force += _passedMatches * 10;
// penality (short password)
_force = (p.length <= 6) ? Math.min(_force, 10) : _force;
// penality (poor variety of characters)
_force = (_passedMatches == 1) ? Math.min(_force, 10) : _force;
_force = (_passedMatches == 2) ? Math.min(_force, 20) : _force;
_force = (_passedMatches == 3) ? Math.min(_force, 40) : _force;
return _force;
},
getColor: function (s) {
var idx = 0;
if (s <= 10) { idx = 0; }
else if (s <= 20) { idx = 1; }
else if (s <= 30) { idx = 2; }
else if (s <= 40) { idx = 3; }
else { idx = 4; }
return { idx: idx + 1, col: this.colors[idx] };
}
};
scope.$watch('model', function (newValue, oldValue) {
if (newValue && newValue !== '') {
var c = strength.getColor(strength.mesureStrength(newValue));
element.css({ 'border-color': c.col })
}
});
}
};
});