Angular Trustpass
The trusty password security checklist.
This is a simple password strength meter & validator inspired by MailChimp's signup form.
Done by folks at Trustroots.org
install
You can install this package either with npm
or with bower
.
npm
npm install angular-trustpass --save
Then add trTrustpass
as a dependency for your app:
angular;
bower
bower install angular-trustpass --save
Add <script>
and <link>
to your page:
Then add trTrustpass
as a dependency for your app:
angular;
Usage
Basic
With options
Bootstrap classes:
Using with Password Sign in
Password model will have $invalid
set true and $error.trustpass
set true when any of the tests fail. You can then style your form or input with Angular validation classes.
Options
Pass a json object to tr-trustpass
like this: tr-trustpass="{maximum: true, special: false}"
Available tests
Option | Default | Description |
---|---|---|
lowercase | true | Find a-z |
uppercase | true | Find A-Z |
number | true | Find 0-9 |
special | true | Find a non-word character or the _ (underscore) character |
minimum | true | Check minimum length. Defaults to 8 but you can set it with ng-minlength or minlength attributes, or maxlength option. |
maximum | false | Check maximum length. Defaults to 50 but you can set it with ng-maxlength or maxlength attributes, or maxlength option). |
word | false | Find a word character. |
"A word character" is a character from a-z, A-Z, 0-9, including the _ (underscore) character.
Other settings
Option | Default | Description |
---|---|---|
toggle | false | Should checklist be visible only on focus? |
keepHeight | false | Should dropdown area keep its initially rendered height? |
minlength | 8 | Minimum length of the password, if minimum test is enabled (on by default). |
maxlength | 50 | Maximum length of the password, if maximum test is enabled (off by default). |
Labels and messages
Option | Default | Description |
---|---|---|
messageDone | Great! Your password is secure. | A message shown after all tests pass. |
messageGuide | A message on top of checklist. Leave empty to hide. | |
lowercaseLabel | One lowercase character | Label for the lowercase test |
uppercaseLabel | One uppercase character | Label for the uppercase test |
numberLabel | One number | Label for the number test |
specialLabel | One special character | Label for the special test |
minimumLabel | characters minimum | Label for the minimum test. The ng-minlength value will be prepend to the label (f.i.: 8 characters minimum) |
maximumLabel | characters maximum | Label for the maximum test. The ng-maxlength value will be prepend to the label (f.i.: 8 characters maximum) |
wordLabel | Alphanumeric characters | Label for the word test |
Development
Ideas and pull requests totally welcome!
Install dependencies
npm install
Build
gulp
Run the example
gulp demo
...and open http://localhost:3000/ to your browser.