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