This is a simple directive for the zxcvbn library.
Install with bower:
bower install zxcvbn angular-zxcvbn
Include the following javascript source files:
<script src='/bower_components/zxcvbn/dist/zxcvbn.js'></script>
<script src='/bower_components/angular-zxcvbn/dist/angular-zxcvbn.js'></script>
Add zxcvbn
as an angular dependency. E.G. If your module is called myApp
then you would do:
angular.module('myApp', ['zxcvbn']);
Live plunker: http://plnkr.co/edit/COTgky?p=preview
The main way to use the directive is as an attribute alongside the ng-model
attribute:
<input type='password' ng-model='userPassword' zxcvbn="passwordStrength">
This will set $scope.passwordStrength
to the result of calling the zxcvbn function on
$scope.userPassword
.
The directive has an optional attribute of zx-extras
. This takes either an array
or an [angular form object](https://docs.angularjs
.org/api/ng/type/form.FormController), which will be passed as the optional argument to the zxcvbn
call.
The optional argument is an array of strings that zxcvbn will treat as an extra dictionary. This can be whatever list of strings you like, but is meant for user inputs from other fields of the form, like name and email. That way a password that includes a user's personal information can be heavily penalized. This list is also good for site-specific vocabulary โ Acme Brick Co. might want to include ['acme', 'brick', 'acmebrick', etc]. -- zxcvbn readme.md
Example:
<form name="myForm">
<input type="email" ng-model="email" name="emailAddress">
<input type="text" ng-model="username" name="username">
<input type="password" ng-model="password" name="password" zxcvbn="passwordStrength" zx-extras="myForm">
<input type="password" ng-model="confirmPassword" name="confirmPassword">
</form>
We pass zx-extras
the value myForm
, which is the value of the name
attribute of the parent <form>
element.
angular-zxcvbn
will look at all <input>
elements with name
and ng-model
attributes inside the <form>
element - ignoring
fields with 'password' in their name. Found fields are then used as the extras parameter in the zxcvbn call.
Note: if you do not wish to pass in a form object, you can also pass a scope variable that is an array of strings.
If you are using the AngularJS form directive you may also want to have the password field marked as invalid when below a certain score.
This can be done by passing a zx-min-score
attribute, which takes an integer between 0 and 4 inclusive. For example: zx-min-score="2"
would invalidate passwords with scores 0 or 1.
<input type="password" ng-model="password" name="password" zxcvbn="passwordStrength" zx-min-score="2">
You can also pass an interpolated scope value: zx-min-score="{{ minScore }}"
You can use the directive as an element. The element takes 3 attributes:
password
required - the password that you want to be tested (scope variable).extras
optional - an array of strings that zxcvbn will use to get a better "crack time" estimate. Here you would normally have other form fields such as name, email address, username...data
optional - a scope object that will contain the returned data from the zxcvbn call.
<zxcvbn password='passwordVar' extras='extrasArray' data='zxcvbnData'></zxcvbn>
Live plunker: http://plnkr.co/edit/CYtyRA?p=preview
Refer to the CHANGELOG file.
ยฉ 2014, Jose Luis Rivas, [email protected].
2015, James Clark, [email protected]
2016, Giovanni Pellerano, [email protected]
The files are licensed under the MIT terms.