Advanced Password Strength Indicator – pswmeter

Category: Form , Javascript | September 10, 2019
Author: pascualmj
Views Total: 36
Official Page: Go to website
Last Update: September 10, 2019
License: MIT

Preview:

Advanced Password Strength Indicator – pswmeter

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
})

You Might Be Interested In:


Leave a Reply