Module to create the trusty password security checklist for Angular.

angular-trustpass module

angular-trustpass

Stars : 10

Forks : 10

Created by Trustroots

bower install trustpass

Demo Download GitHub

Angular Trustpass

The trusty password security checklist.

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

See demo

Screenshot

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

OptionDefaultDescription
lowercasetrueFind a-z
uppercasetrueFind A-Z
numbertrueFind 0-9
specialtrueFind a non-word character or the _ (underscore) character
minimumtrueCheck minimum length. Defaults to 8 but you can set it with ng-minlength or minlength attributes, or maxlength option.
maximumfalseCheck maximum length. Defaults to 50 but you can set it with ng-maxlength or maxlength attributes, or maxlength option).
wordfalseFind a word character.

"A word character" is a character from a-z, A-Z, 0-9, including the _ (underscore) character.

Other settings

OptionDefaultDescription
togglefalseShould checklist be visible only on focus?
keepHeightfalseShould dropdown area keep its initially rendered height?
minlength8Minimum length of the password, if minimum test is enabled (on by default).
maxlength50Maximum length of the password, if maximum test is enabled (off by default).

Labels and messages

OptionDefaultDescription
messageDoneGreat! Your password is secure.A message shown after all tests pass.
messageGuideA message on top of checklist. Leave empty to hide.
lowercaseLabelOne lowercase characterLabel for the lowercase test
uppercaseLabelOne uppercase characterLabel for the uppercase test
numberLabelOne numberLabel for the number test
specialLabelOne special characterLabel for the special test
minimumLabelcharacters minimumLabel for the minimum test. The ng-minlength value will be prepend to the label (f.i.: 8 characters minimum)
maximumLabelcharacters maximumLabel for the maximum test. The ng-maxlength value will be prepend to the label (f.i.: 8 characters maximum)
wordLabelAlphanumeric charactersLabel 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

Javscript

Javascript plugin

Angular-js