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

passmeter

v1.0.4

Published

A plugin jQuery for measure password force very cool! ;-)

Downloads

56

Readme

jQuery plugin passMeter

Helping in delicated moment.

npm version GitHub issues GitHub forks GitHub stars GitHub license

What does this do?

  • PassMeter analyzes entered password strings and helps you alert the user with the strength.
  • The plugin works in real-time as the user types in his password.
  • Along with changing the color, a small text can also be displayed.
  • Text and decoration configurable.

How does it do it ?

  1. Call the plugin
  • Specify the id of the password field and a result element.
  • Specify custom messages for bad , weak, good, and strong.
  1. The plugin updates the contents of id_result with the result message, and changes the css of the id_result and id_password to reflect the current status.
  • passMeter-bad
  • passMeter-weak
  • passMeter-good
  • passMeter-strong

You can write css to target .passMeter-bad or specifically #password .passMeter-bad

Usage

  1. Include jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  1. Include plugin's code:
<script src="dist/jquery.passMeter.min.js"></script>
  1. Call the plugin:
$(document).ready(function(){
	$.passMeter({
		// Config local
		id_password   :   '#password',
		id_resul   	  :   '#password-result',

		// Msg level pass
		msg_bad       :   'Nooooo',
		msg_low       :   'More',
		msg_good      :   'Okay',
		msg_strong    :   'Yeah!'
	});
)}
  1. Write some css
<style type="text/css">
/* style the password meter */
	.passMeter-bad{color:#FF0000;}
	.passMeter-low{color:#E66C2C;}
	.passMeter-good{color:#2D98F3;}
	.passMeter-strong{color:#006400;}
</style>

Advanced Customization

There are some advanced customization options for the configuration.

The "special characters" were pulled out into a configurable regex, because some backend systems may not support the default options.

These are the defaults:

// configurable length
min_chars       : 6,
min_chars_boost : 8,

// configurable strength check
min_strength_good : 2,
min_strength_strong : 3,

// configurable regex for special chars
regex_special_chars : /[!%&@#$\^*?_~]/,

// at least 2 special chars
regex_advanced : /.*[!%&@#$\^*?_~].*[!%&@#$\^*?_~].*/,

min_chars

Minimum strength to display msg_low. Lower than this, and msg_bad appears

min_chars_boost

If the password is at least this long, the strength gets an extra point

min_strength_good

Minimum strength to display msg_good

min_strength_strong

Minimum strength to display msg_strong

regex_special_chars

If the password has a special char, the strength gets an extra point

regex_advanced

If the password matches this (default 1 or more special chars), the strength gets an extra point

callback

If defined, this will be run after checking the password. It will be called with the message as the only argument. This can allow you to customize actions for each strength level.

callback example:

$.passMeter({
	...
	callback: function(message){
		console.log(message == this.msg_bad);
	}
	...
});

Example

File: index.html

Contains a simple HTML file to demonstrate the usage.

Live: ruanaragao.github.io/passMeter

License

MIT License