angular-zxcvbn

This is a simple directive for the zxcvbn library.

Table of Contents

• Installation
• Usage
• Attribute
• Element
• History
• Author
• Contributors
• License

Installation

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']);

Usage

Attribute

The main way to use the directive is as an attribute alongside the ng-model attribute:

<input type='password' ng-model='userPassword' zxcvbn>

This will set $scope.zxcvbn to the result of calling the zxcvbn function on $scope.userPassword.

---

Attribute Values

The attribute can also be passed an "extras" value. 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="myForm">
  <input type="password" ng-model="confirmPassword" name="confirmPassword">
</form>

• Here you can see we give the 3rd input element the attribute
• We pass it the value myForm, which is the value of the name attribute of the parent form element - this allows the directive to access the associated scope property.*
• 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. These 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.

---

Form Validation

If you have passed in a form object as the extras value, then you may also want to have the password field marked as invalid when below a certain score. This can be done in 2 ways:

<input type="password" ng-model="password" name="password" zxcvbn="myForm" zxcvbn-min-score="2"> // hard code the value
<input type="password" ng-model="password" name="password" zxcvbn="myForm" zxcvbn-min-score="minScore"> // pass it a scope variable

Live plunker: http://plnkr.co/edit/COTgky?p=preview

---

Element

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

History

Refer to the History.md file.

Author

© 2014, Jose Luis Rivas, [email protected].

Contributors

2015, James Clark, [email protected].

License

The files are licensed under the MIT terms.