npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

password-strength-meter

v2.1.0

Published

A password strength meter plugin for jQuery

Downloads

3,673

Readme

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

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.