Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ghostbar/angular-zxcvbn
Simple zxcvbn directive for Angular.js
https://github.com/ghostbar/angular-zxcvbn
Last synced: 8 days ago
JSON representation
Simple zxcvbn directive for Angular.js
- Host: GitHub
- URL: https://github.com/ghostbar/angular-zxcvbn
- Owner: ghostbar
- License: mit
- Created: 2014-06-12T08:38:02.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-12-05T20:03:36.000Z (almost 7 years ago)
- Last Synced: 2024-10-14T02:15:53.748Z (about 1 month ago)
- Language: JavaScript
- Size: 65.4 KB
- Stars: 55
- Watchers: 4
- Forks: 10
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
README
# angular-zxcvbn [](https://travis-ci.org/ghostbar/angular-zxcvbn) [](https://codeclimate.com/github/ghostbar/angular-zxcvbn) [](https://codeclimate.com/github/ghostbar/angular-zxcvbn/coverage)
[](https://saucelabs.com/u/angular-zxcvbn)
This is a simple directive for the [zxcvbn](https://github.com/dropbox/zxcvbn) library.
## Table of Contents
* [Installation](#installation)
* [Usage](#usage)
* [Attribute](#attribute)
* [Element](#element)
* [History](#history)
* [Author](#author)
* [Contributors](#contributors)
* [License](#license)
## Installation
Install with bower:
```bash
bower install zxcvbn angular-zxcvbn
```
Include the following javascript source files:
```html
```
Add `zxcvbn` as an angular dependency. E.G. If your module is called `myApp` then you would do:
```javascript
angular.module('myApp', ['zxcvbn']);
```
## Usage
##### Attribute
Live plunker:
The main way to use the directive is as an attribute alongside the `ng-model` attribute:
```html
```
This will set `$scope.passwordStrength` to the [result](https://github.com/dropbox/zxcvbn#usage) of calling the zxcvbn function on
`$scope.userPassword`.
---
##### Extras
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:
```html
```
We pass `zx-extras` the value `myForm`, which is the value of the `name` attribute of the parent `` element.
`angular-zxcvbn` will look at all `` elements with `name` and `ng-model` attributes inside the `` 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*.
---
##### Form Validation
If you are using the [AngularJS form directive](https://docs.angularjs.org/api/ng/directive/form) 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.
```html
```
You can also pass an interpolated scope value: `zx-min-score="{{ minScore }}"`
---
### 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](https://github.com/dropbox/zxcvbn#usage) from the zxcvbn call.
```html
```
Live plunker:
## Changelog ##
Refer to the [CHANGELOG](CHANGELOG) file.
## Author ##
© 2014, Jose Luis Rivas, .
## Contributors ##
2015, James Clark,
2016, Giovanni Pellerano,
## License ##
The files are licensed under the MIT terms.