• Stars
    star
    107
  • Rank 323,587 (Top 7 %)
  • Language
    JavaScript
  • License
    GNU General Publi...
  • Created over 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ”‘ A password strength meter for jQuery

Password Strength Meter plugin for jQuery

Build status Code coverage License Latest stable version Total downloads Code climate jsDelivr CDN

A password strength meter for jQuery. Give it a try!

password example

Installation

Using npm

npm install --save password-strength-meter

Using bower

bower install --save password-strength-meter

Or much better, using yarn

yarn add password-strength-meter

For manual installations check out the releases section for tarballs.

Usage

Import the required scripts:

<script src="./js/password-strength-meter/password.min.js"></script>
<script src="./js/password-strength-meter/password.min.css"></script>

Ensure your password field has a wrapper div, like in Bootstrap:

<div class="form-group">
  <label for="password">
    Password
  </label>
  <input id="password" type="password" class="form-control" />
</div>

And call the plugin when you wanna enable it:

$('#password').password({ /* options */ });

Available options

Here's the list of available options you can pass to the password plugin:

$('#password').password({
  enterPass: 'Type your password',
  shortPass: 'The password is too short',
  containsField: 'The password contains your username',
  steps: {
    // Easily change the steps' expected score here
    13: 'Really insecure password',
    33: 'Weak; try combining letters & numbers',
    67: 'Medium; try using special characters',
    94: 'Strong password',
  },
  showPercent: false,
  showText: true, // shows the text tips
  animate: true, // whether or not to animate the progress bar on input blur/focus
  animateSpeed: 'fast', // the above animation speed
  field: false, // select the match field (selector or jQuery instance) for better password checks
  fieldPartialMatch: true, // whether to check for partials in field
  minimumLength: 4, // minimum password length (below this threshold, the score is 0)
  useColorBarImage: true, // use the (old) colorbar image
  customColorBarRGB: {
    red: [0, 240],
    green: [0, 240],
    blue: 10,
  } // set custom rgb color ranges for colorbar.
});

NOTE: The custom color bar values use rgb color codes within a reasonable range. The blue must be a single value as we need a base value on which to calculate the color changes.

Events

There are two events fired by the password plugin:

$('#password').on('password.score', (e, score) => {
  console.log('Called every time a new score is calculated (this means on every keyup)')
  console.log('Current score is %d', score)
})

$('#password').on('password.text', (e, text, score) => {
  console.log('Called every time the text is changed (less updated than password.score)')
  console.log('Current message is %s with a score of %d', text, score)
})

Compatiblity

This plugin was originally created in 2010 for jQuery 1.14, and the current release has been tested under jQuery 1, 2 & 3.

It should work in all browsers (even IE 666).

Testing

First you'll need to grab the code, as the npm version does not come with the source files:

git clone https://github.com/elboletaire/password-strength-meter.git
cd password-strength-meter
npm install
npm test

Note: tests are just run using jQuery 3.

Why?

Why another library? Well, I found this on March 11th (of 2017) cleaning up my documents folder and noticed I made it in 2010 and never published it, so I decided to refactor it "a bit" (simply remade it from the ground-up) and publish it, so others can use it.

Credits

Created by ร’scar Casajuana .

Based on unlicensed work by Firas Kassem, published in 2007 and modified by Amin Rajaee in 2009.

This code is licensed under a GPL 3.0 license.

More Repositories

1

tabbedcontent

๐Ÿ“‚ jQuery / Zepto lightweight tabs plugin
JavaScript
45
star
2

php-crawler

๐Ÿ•ท๏ธ A simple crawler (spider) writen in php just for fun, with zero dependencies
PHP
40
star
3

twbs-cake-plugin

๐Ÿฐ Twitter Bootstrap Plugin for CakePHP 3 with bundled less.php parser, helpers and bake templates
CSS
28
star
4

Watimage

๐Ÿ–ผ๏ธ PHP image manipulation class
PHP
25
star
5

ansible-transmission

๐Ÿ•น๏ธ A TransmissionBT installation role for Ansible
Dockerfile
12
star
6

zsh-theme-racotecnic

A ZSH theme based on af-magic and posh-git
10
star
7

manga-downloader

๐Ÿ“š Download mangas (and comics) from online reading websites
Go
8
star
8

ue-tower-defense-game

Unreal Engine's Tower Defense Game (learning content not available anymore). Property of Epic Games.
C++
7
star
9

cities-skylines-destroy-everything

๐Ÿ—๏ธ A Cities: Skylines WIP Mod for destroying everything in the map
C#
4
star
10

piwik-cakephp-plugin

๐Ÿฐ Piwik Analytics plugin for CakePHP 1.3.X
PHP
3
star
11

remuxing

An utility to easily use mkvmerge.
Go
3
star
12

postfixadmin-cyrus

An attempt to add cyrus-imap support to postfixadmin
PHP
3
star
13

CakePHP-SwiftMailer-Component

๐Ÿฐ An extension of the CakePHP's EmailComponent using SwiftMailer as sending engine.
2
star
14

laravel-utils-and-extensions

Some things that Laravel should have
PHP
1
star
15

dotfiles

My dotfiles (use at your own risk)
Shell
1
star
16

jQuery.innerlabel

A simple jQuery plugin to convert labels into crossbrowser placeholders
JavaScript
1
star
17

docker-project-zomboid-gog

๐Ÿณ Docker image for the GOG.com version of Project Zomboid
Shell
1
star
18

racotecnic

http://racotecnic.com
JavaScript
1
star
19

data-attribute-parser

jQuery helper plugin to parse `data-` attributes and load other plugins using that parsed attributes as plugin params.
JavaScript
1
star
20

ansible-amule

An aMule installation role for Ansible
Shell
1
star
21

docker-angular-filemanager

๐Ÿณ A dockerized web file manager created using angular-filemanager ๐Ÿ“‚
HTML
1
star
22

docs-cake-plugin

๐Ÿฐ A simple CakePHP plugin that parses/renders markdown files
CSS
1
star