angular-password-enforcement

An Angular directive for validating password input against a set of rules

Installation

$ bower install angular-password-enforcement

Setup

Include angular-password-enforcement' in your module's dependencies:

angular.module('myApp', ['angular-password-enforcement']);

Configuration

By default, the directive includes a loose policy for the valid password (defaults are shown in the example below). This is configurable based on your needs. Simple add a config block for your app:

angular.module('myApp', ['angular-password-enforcement'])
.config(function(validPasswordConfigProvider) {
  validPasswordConfigProvider.setConfig({
    minLength: 7,
    maxLength: 30,
    pattern: /^((?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).{7,30})$/;
  });
});

It is recommended to also set a constant for the explanation of your password rules, that you can inject to use in all the views you'll have password fields:

.constant('PASSWORD_RULES', '7-30 characters. At least 1 uppercase, 1 lowercase, 1 number, and 1 symbol. Symbols include: `~!@#$%^&*()-_=+[]{}\\|;:\'",.<>/?');


app.controller('MyController', function(PASSWORD_RULES) {
  var vm = this;
  vm.passwordRules = PASSWORD_RULES;
});

Usage

Simply add the valid-password attribute to your <input> field.

The directive attaches ng-minlength and ng-maxlength attributes to your form field. It also attaches an invalidPassword property to the $error on your form field, so it can be used like any of the built-in validation directives.

Note: This does NOT FAIL if the password field is empty. This is for cases where the user may be editing their profile and should be allowed to leave the field empty. If you want to test for the empty field, you must add ng-required="true" to the input.

The examples below assume the configuration block and constant are configured as shown above.

Example with ng-messages

<form name="newUserForm">
  <input type="text" ng-model="vm.password" name="userPassword" ng-required="true" valid-password>
  <div ng-messages="newUserForm.userPassword.$error" ng-if="newUserForm.userPassword.$dirty">
    <div ng-message="required">Password is required</div>
    <div ng-message-exp="['minlength', 'maxlength', 'invalidPassword']">{{ vm.passwordRules }}</div>
  </div>
</form>

Without ng-messages

<form name="newUserForm">
  <input type="text" ng-model="vm.password" name="userPassword" ng-required="true" valid-password>
  <div ng-if="newUserForm.userPassword.$dirty && newUserForm.userPassword.$invalid">
    <div ng-if="newUserForm.userPassword.$error.required">Routing number is required</div>
    <div ng-if="newUserForm.userPassword.$error.minlength || newUserform.userPassword.$error.maxlength || newUserForm.userPassword.$error.invalidPassword">
      {{ vm.passwordRules }}
    </div>
  </div>
</form>

Tests

A round of tests is included. To run the tests, execute:

gulp test

Contributions

Contributions are always welcome. Please submit issues and pull requests.

License

MIT