angular-trustpass

Angular Trustpass

The trusty password security checklist.

This is a simple password strength meter & validator inspired by MailChimp's signup form.

See demo

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.module('demoApp', ['trTrustpass']);

bower

bower install angular-trustpass --save

Add <script> and <link> to your page:

<link rel="stylesheet" href="bower_modules/angular-trustpass/dist/tr-trustpass.css">
<script src="bower_modules/angular-trustpass/dist/tr-trustpass.js"></script>

Then add trTrustpass as a dependency for your app:

angular.module('demoApp', ['trTrustpass']);

Usage

Basic

<input type="password" tr-trustpass>

With options

<input type="password" tr-trustpass="{special: false}" ng-minlength="9">

Using with Bootstrap classes:

<form name="demo">
  <div class="form-group" ng-class="{'has-error': demoForm.password.$invalid && demoForm.password.$dirty,
                                     'has-success': !demoForm.password.$invalid && demoForm.password.$dirty}">
    <label for="password">Password</label>
    <input id="password"
           class="form-control"
           type="password"
           name="password"
           placeholder="Password"
           tr-trustpass="{maximum: true, special: false, messageGuide: 'Make sure your password meets these requirements:'}"
           ng-minlength="9"
           ng-maxlength="90"
           ng-model="password">
  </div>
  <button type="submit" ng-disabled="demo.password.$invalid" class="btn btn-primary">Sign in</button>
</form>

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.

License

MIT