Ember-CLI-Password-Strength

This addon is an Ember-CLI wrapper for zxcvbn, a "realistic password strength estimator". In addition to bringing that package into your project, Ember-CLI-Password-Strength exposes a password-strength shim as an ES6 module you can import anywhere in your application, rather than using the Bower package's global variable.

Check out the Demo!

Installation

ember install ember-cli-password-strength

Configuration

Load the Zxcvbn Library Only When Needed

Zxcvbn is a large library (400kB gzipped). You can load it asynchronously by configuring your ember-cli-build.js. This is the recommended configuration, but is not the default so as to maintain backwards compatibility:

let app = new EmberAddon(defaults, {
  'ember-cli-password-strength': {
    bundleZxcvbn: false
  }
});

Usage

Use the passwordStrength service:

//components/foo.js
import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject } from '@ember/service';

export default Component.extend({
  passwordStrength: inject(),
  password: '',

  /**
   * passwordStrength.strength returns a promise which
   * will resolve after the zxcvbn library has been loaded.
   *
   */
  strength: computed('password', function () {
    const passwordStrength = this.get('passwordStrength');
    passwordStrength.strength(this.get('password')).then(obj => {
      console.log(obj);
    });
  }),

  /**
   * strengthSync expects zxcvbn to be loaded already
   */
  strengthSync: computed('password', function () {
    const passwordStrength = this.get('passwordStrength');
    const obj = passwordStrength.strength(this.get('password');
    console.log(obj);
  }),

  /**
   * If you are using the result in a template then strengthProxy saves 
   * a step in wrapping the returned promise in an Ember.ObjectProxy
   */
  strengthProxy: computed('password', function () {
    const passwordStrength = this.get('passwordStrength');
    const obj = passwordStrength.strength(this.get('password');
    console.log(obj);
  })
});

Preload the zxcvbn library to make the first run of strength() faster:

//routes/foo.js
import Route from '@ember/routing/route';
import { inject } from '@ember/service';

export default Route.extend({
  passwordStrength: inject(),
  beforeModel() {
    const passwordStrength = this.get('passwordStrength');
    return passwordStrength.load();
  }
});

Import the shim (deprecated):

Simply import the password-strength shim into your project:

//components/foo.js
import Ember from 'ember';
import strength from 'password-strength';

const { Component, computed } = Ember;

export default Component.extend({
  password: '',

  strength: computed('password', function () {
    return strength(this.get('password'));
  })
});

Full documentation for the strength checking method can be found here.

Contributing

This README outlines the details of collaborating on this Ember addon.

Installation

• git clone [email protected]:elwayman02/ember-cli-password-strength.git
• cd ember-cli-password-strength
• npm install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.