Advanced Password Strength Indicator – pswmeter

Preview:

Description:

pswmeter is a simple yet highly customizable password strength indicator which can be used to help a user type a secured password.

The plugin adds a progress bar style password strength indicator to the password field and automatically updates bar colors to represent the current password score.

Default Password Strength Requirments:

• At least 9 characters.
• Contains uppercase and lowercase letters.
• Contains numbers.

How to use it:

Download and put the minified version of the pswmeter library in the document.

<script src="pswmeter.min.js"></script>

Create a container to place the password strength meter.

<div id="pswmeter"></div>

Create a container to place the feedback message.

<div id="pswmeter-message"></div>

The library also needs a password field.

<input id="psw-input" type="password">

Initialize the library and activate the password strength meter.

const myPassMeter = passwordStrengthMeter({
      containerElement: '#pswmeter',
      passwordInput: '#psw-input'
 });

Customize the feedback messages when you type characters in the password field.

const myPassMeter = passwordStrengthMeter({
      containerElement: '#pswmeter',
      passwordInput: '#psw-input',
      showMessage: true, // default: false
      messageContainer: '#pswmeter-message',
      messagesList: [
        'Write your password...',
        'Easy peasy!',
        'That is a simple one',
        'That is better',
        'Yeah! that password rocks ;)'
      ]
 });

Customize the appearance of the password strength meter.

const myPassMeter = passwordStrengthMeter({
      containerElement: '#pswmeter',
      passwordInput: '#psw-input',
      height: 4,
      borderRadius: 2,
      pswMinLength: 8,
 });

Apply different colors to the meter depending on the current password score.

const myPassMeter = passwordStrengthMeter({
      containerElement: '#pswmeter',
      passwordInput: '#psw-input',
      colorScore1: '#ff7700',
      colorScore2: '#ffff00',
      colorScore3: '#aeff00',
      colorScore4: '#00ff00'
 });

Get the current password score.

myPassMeter.getScore()

Event handlers.

myPassMeter.containerElement.addEventListener('onScore0', function() { 
  // on score 0
})
myPassMeter.containerElement.addEventListener('onScore1', function() { 
  // on score 1
})
myPassMeter.containerElement.addEventListener('onScore2', function() { 
  // on score 2
})
myPassMeter.containerElement.addEventListener('onScore3', function() { 
  // on score 3
})
myPassMeter.containerElement.addEventListener('onScore4', function() { 
  // on score 4
})