View Full Version : Ext.plugin.extjs.form.PasswordStrength

25 Mar 2011, 8:29 AM
A simple plugin that will change the background color of a TextField based on the score of the value entered. On every keystroke, this plugin will test that value against 16 tests and scores it.


Ext.apply(Ext.form.VTypes, {
strength : function(val, field) {
return field.score > field.strength;
strengthText : "Password is not strong enough"
Ext.onReady(function() {
var form = Ext.create("Ext.form.FormPanel", {
renderTo : Ext.getBody(),
width : 300,
title : "Password Strength Plugin",
defaultType : "textfield",
defaults : {
anchor : "99%",
msgTarget : "side"
items : [
fieldLabel : "Username"
fieldLabel : "Password",
inputType : "password",
vtype : "strength",
strength : 24,
plugins : {
ptype : "passwordstrength"

You can override the colors use by doing this, I don't claim to be an artist:

plugins : {
ptype : "passwordstrength",
colors : ["C11B17", "FDD017", "4AA02C", "6AFB92", "00FF00"]

There must be 5 values. The score will also be appended to the field so you can do a VType.

Github: https://github.com/mitchellsimoens/Ext.plugin.extjs.form.PasswordStrength
Demo: http://www.simoens.org/Ext.plugin.extjs.form.PasswordStrength/

19 Apr 2011, 1:06 PM
That is really neat!

One suggestion, would be to, in some fashion. Show the user that there are multiple levels of acceptable passwords. without knowing that there are 5 levels, a use may simply stop at the first green level, and not know they could make something stronger.

23 Apr 2011, 12:05 AM
Hi Mitchell,

this is a cool thing as passwordstrength is an important one to prevent being hacked.

While testing it i have an issue from usability:

* if you color the background it's difficult to see the input, it would be needed to calculate the complementary color for text color
* the colors are fancy but need description. The user might think: That's funny, i get changing colors. But he don't understand what's about, you would need to descibe that.

I think the simplest way to display passwordstrength is kind of filled bar beside with
bad .......... good label beside, so it's easy to understand while typing.

27 Oct 2011, 4:58 AM
I modified the code from 1.x forum ( here: http://www.sencha.com/forum/showthread.php?12155-0.2-Ext.ux.PasswordMeter ) . I created a password meter widget that is Ext 4 compatible. You can check it from my blog post (http://yiyujia.blogspot.com/2011/09/ext-js-4-password-meter-widget.html).
With a quick test, it works fine. I have not done extensive test on it. Please let me know if you test on it and find any issue.