[2.0] Ext.ux.PasswordField (v0.21)

[benny_boi]

Hi All,

On searching these forums, I've seen a couple of really good ideas for password fields - one was a code example put up by TheJoker101 (http://extjs.com/forum/member.php?u=148) to detect if caps lock is on while entering a password (http://extjs.com/forum/showthread.php?t=20210), and the other was an Ext 1.1 UX by Pagebaker (http://extjs.com/forum/member.php?u=2703) which implemented a really clean-look password strength meter (http://extjs.com/forum/showthread.php?t=12155).

I'm not pretending to have come up with anything innovative, I've just updated Pagebakers UX to work cleanly (almost!) on Ext 2.0 release, and combined it with the code of TheJoker101's to produce a flexible password field.

DEMO:

http://dev.b2bwebsolutions.com.au/ext/ux/passwordfield/demo.html

TESTED ON:

Internet Explorer 7 (Windows)
FireFox 2 (Windows)

RELEASE HISTORY:

v0.21 (Updated 12.12.2007)

Fixed error with hiding caps lock warning on field blur (thanks to krycek (http://extjs.com/forum/member.php?u=5769)) for picking up on this!v0.20 (Updated 12.12.2007)

Fixed password strength meter width issues (input field size captured in afterRender method)
Added config property: pwStrengthMeter [function] - Overrides regular password strength calculation algorithm if desired. Recieves 'password [string]' as only property and returns a value between 0 (weakest) and 100 (strongest) to indicate password strength. This could be used to call a web service or perform more advanced analysis of the password (internal algorithm will be further developed in further versions).
Added config properties: pwStrengthMeterCls [string], pwStrengthMeterFocusCls [string] and pwStrengthMeterScoreBarCls [string] - Allow override of the default CSS classes for the password strength meter.v0.10 (Updated 11.12.2007)

Initial releaseFeel free to have a play - any improvements welcome. As previously mentioned, all praise for the original implementations should be sent to Pagebaker and TheJoker101 - nice work guys!

[JeffHowden]

If you're going to take on the notion of the community ux password field, I'd suggest that you look to support a couple of things. First, with the password strength, there really needs to be a reasonably good bit of logic behind it. Search the forums and you'll find one or two really good threads chock full of info you can use. Second, some manner of hook that can be toggled via the field's config to hash the password value prior to sending it over the wire to help folks creating chap systems. Third, the ability to toggle on in the config a second "confirm/verify" password field.

[benny_boi]

Looks like I've got my homework list... :-)

All great ideas - I'll keep tinkering and see if I can evolve the functionality to include as many of those features as possible.

Jeff - this might be an absolute no-brainer for you - do you know where I'm going wrong with obtaining the width of the input field to size the strength meter? The problem is demo'd at the following: http://dev.b2bwebsolutions.com.au/ext/ux/passwordfield/demo2.html


<script language="javascript" type="text/javascript">
Ext.onReady(function(){
var password = new Ext.ux.PasswordField({
width: 300,
showCapsWarning: true,
showStrengthMeter: true
});
password.render('pass1');
});
</script>
I'm extending the onRender() of Ext.form.TextField with the following code to insert the strength meter:


// create password strength meter
if (this.showStrengthMeter) {
this.objMeter = ct.createChild({tag: "div", 'class': "x-form-password-strengthMeter"});
this.objMeter.setWidth(ct.first('INPUT').getWidth(false));
this.scoreBar = this.objMeter.createChild({tag: "div", 'class': "x-form-password-scoreBar"});
if(Ext.isIE && !Ext.isIE7) { // Fix style for IE6
this.objMeter.setStyle('margin-left', '3px');
}
}
Working through this with FireBug - at the time that onRender() is called, an input object has been inserted into the control with a seemingly default width (125px width) - then my code runs and grabs the width to size the meter.

After onRender() has completed, the input field is resized to the size I specify with the width config property for the field. I haven't been able to find an event trap late enough to pick up the input's width when it's been sized properly. (I tried wiring a handler to this.el.on('render', .....), but it doesnt appear to fire).

I sooo love working with Ext 2.0 by the way - great work guys!! =D>

Cheers,

Ben

[JeffHowden]

Looks like I've got my homework list... :-)

There's certainly more, but better to take babysteps (if that's what you'd call my ideas *grin*).

Jeff - this might be an absolute no-brainer for you - do you know where I'm going wrong with obtaining the width of the input field to size the strength meter?

I actually don't know either. Like you, I'd have to dig through the inner workings of Ext form fields to figure it out myself. If I were doing it, I'd probably start with a field that's a combination of things, like maybe the combobox, as it has to adjust its width to accommodate the triggerfield.

[Pagebaker]

Nice work, very good combination. Also good to see my work is being adapted by others ;D

Third, the ability to toggle on in the config a second "confirm/verify" password field.

I agree with this

cheers

[benny_boi]

Ah - found the blighter that was causing the meter sizing issues!

The text field seems to get resized from it's default to the required width as part of afterRender() in the lifecycle. By extending that method in my component, calling the superclass's method first (which resizes the input to the width set in the components width property) and THEN resizing my strength meter, everything lines up!...

I'll post v0.2 tomorrow with the bug fix. I've also changed it so that you can override with your own function for scoring the password strength (ie: call a web service or similar).

Next on the list (as Jeff suggested), extending the component further so that it can render two password boxes and wiring up the validation surrounding this...

[benny_boi]

OK.. Just posting v0.20 as promised...

CHANGES:

Fixed password strength meter width issues (input field size captured in afterRender method)
Added config property: pwStrengthMeter [function] - Overrides regular password strength calculation algorithm if desired. Recieves 'password [string]' as only property and returns a value between 0 (weakest) and 100 (strongest) to indicate password strength. This could be used to call a web service or perform more advanced analysis of the password (internal algorithm will be further developed in further versions).
Added config properties: pwStrengthMeterCls [string], pwStrengthMeterFocusCls [string] and pwStrengthMeterScoreBarCls [string] - Allow override of the default CSS classes for the password strength meter.More to come. Thanks to Jeff for his ideas, and Pagebaker and TheJoker101 for their original work. Anyone else's feedback very welcome!

Cheers,

Ben

[krycek]

this.hideCapsWarning is not a function
[Break on this error] this.hideCapsWarning();


on blur

[benny_boi]

Thanks for picking up on this krycek .. Was a simple attempt to rename the method to something more meaningful but I obviously missed replacing one of them... Fixed now in 0.21 (available for download above).

Cheers,

Ben

[franklt69]

Hi benny_boi I was testing your good Ext.ux.PasswordField (v0.21) inside an windows, and work ok but when I set the caps lock don't appear the warning side the Ext.ux.PasswordField it is render in the body, out side the windows, do you are testing it inside a windows?

I am doing it;

formNewUserLogin = function(grid) {

this.password = new Ext.ux.PasswordField({

id: 'uxpf1',
showCapsWarning: true,
allowBlank:false,
fieldLabel:"Current Password",
showStrengthMeter: true,
pwStrengthTest: function(pw) {
return (pw.length * 10);
}
});
formNewUserLogin.superclass.constructor.call(this, {
id:'frm-party-form-userlogin',
xtype:"form",
title:this.title,
width:600,
frame: true,
closable:true,
header: false,
url:"/asfa/PartyManager/Manager/Services/PartyServicesHandler.ashx",
autoScroll:true,
defaults:{
width:200
},
items:[{
xtype:"textfield",
fieldLabel:"User Login Id",
name:"tfId",
allowBlank:false,
id:"Id"
},this.password,
{
xtype:"textfield",
fieldLabel:"Confirm Password Verify",
name:"tfConfirmPassword",
allowBlank:false,
inputType: 'password',
id:"ConfirmPassword"
},
{
xtype:"textfield",
fieldLabel:"Password Hint",
name:"tfPasswordHint",
id:"PasswordHint"
}]

});

this form is an items inside a windows.

Note I don't use password.render('pass1'); because I don't want to use a div.

regards
Frank

[benny_boi]

Thanks for the detailed code for reproducing this. The extension uses Ext element methods for calculating it's placement so I'll try to reproduce this and see what I can find by tinkering...

Sorry it's taken a few days to respond - had my laptop hard drive toast itself, so a few days building up a machine and pulling in backups of my data.. Will hopefully post a code revision in the next day or two...

Cheers! :-)

[krycek]

I've added 3 ifs:


afterRender: function() {
Ext.ux.PasswordField.superclass.afterRender.call(this);
if (this.showStrengthMeter)
this.objMeter.setWidth(this.el.getWidth(false));
},


here:

handleFocus: function(e) {
if(!Ext.isOpera) { // don't touch in Opera
if (this.showStrengthMeter)
this.objMeter.addClass(this.pwStrengthMeterFocusCls);
}
},
handleBlur: function(e) {
if(!Ext.isOpera) { // don't touch in Opera
if (this.showStrengthMeter)
this.objMeter.removeClass(this.pwStrengthMeterFocusCls);
}
if (this.showCapsWarning) {
this.hideCapsMessage();
}
},

[medusadelft]

Benny Boi,

I haven't looked at the original password strenght meter, but I found that entering 5 times 1 gives the same strength as entering $rY#2
Is this on purpose? The last one should be harder to guess/crack compared to 11111.

How about an algoritme that 'gives' points based on the type of character entered and the length of the password? These points can be used to feed the strength meter.

Just my two cents.

Maurice.

[benny_boi]

Hi Maurice...

Included in the HTML file is a sample override for the strength calculation function - it just shows that you can plug in your own function to calculate strength, and the dummy function looks at the length of the string... remove the config line from the object:

pwStrengthTest: function(pw) {
return (pw.length * 10);
}

If you dont set pwStrengthTest to a custom function, it uses it's internal function which is a bit more advanced.. For future releases I'll comment the above out as it seems to be causing confusion as to how the user extension behaves by default.

Hope this helps..

Cheers,

Ben

[benny_boi]

Hi Medusadelf -

Thanks for those improvements - lazy coding on my part for not putting those conditionals in to start with.. I'll integrate into the next release...

Sorry it's taken a few days to implement the next minor release of this control - had to rebuild my development environment, on top of the mayhem that is the Christmas period..

Good to see people are interested in seeing this progress - lots of extra improvements in the works at the moment.

Stay tuned over the next few days (he says optimistically!)

Cheers,

Ben

[sanjshah]

Hi,

How can I apply the guague to a textfield - similar to the other form fields:


Ext.onReady(function(){
var password = new Ext.ux.PasswordField({
width: 200,
showCapsWarning: true,
showStrengthMeter: true,
applyto:'password',
pwStrengthTest: function(pw) {
return (pw.length * 10);
}
});
});


Regards,

Sanj

[Dumbledore]

perhaps you can add:

reset : function(){
if (this.showStrengthMeter)
this.scoreBar.setWidth(0, true)
}

When the form is reset the scoreBar becomes the correct width...


Bye

[DigitalSkyline]

I added :
Ext.reg('uxpassword', Ext.ux.PasswordField);

can now use as xtype:'uxpassword' in form configs.

[WebArchitect]

Hi, very nice work!

However, it seems to have some problem when it is used in tabs. It doesnt show at all... Any help on this one ?

[ramaboo]

somewhere it should have a high z-index otherwise the caps warning can be hidden by other items :(

[ramaboo]

I made a few changes (mentioned above) and renamed the css classs to be lower case only (in fitting with Ext style). I also cleaned up a few things in the code (mostly spacing issues). Here is the result. Hopefully these changes can be made into an official release when the original other has time. // Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');
// Tweaked by David Singer (david@ramaboo.com)
/**
* Ext.ux.PasswordField Extension Class
*
* @author Benjamin Horan (benh@b2bwebsolutions.com.au)
* @version 0.22
*
* @license MIT License: http://www.opensource.org/licenses/mit-license.php
*
* Combines the existing work of:
* CAPS detection code by James Asher
* (http://17thdegree.com/archives/2007/12/06/capturing-caps-lock-with-the-ext-js-framework/)
* - Initial concept by Stuart Langridge
* http://24ways.org/2007/capturing-caps-lock
* and
* Password Strength UX code by Eelco Wiersma
* (http://testcases.pagebakers.com/PasswordMeter/)
* - Algorithm based on code of Tane
* http://digitalspaghetti.me.uk/index.php?q=jquery-pstrength
* and
* - Steve Moitozo
* http://www.geekwisdom.com/dyn/passwdmeter
*
* @class Ext.ux.PasswordField
* @extends Ext.form.Textfield
* @constructor
* @param {Object} config Configuration options
*
* EXT Version: 2.0 or 2.1
*
* Refer to config options for Ext.form.TextField
*
* showCapsWarning : boolean -
* If 'true', will show warning message beside password
* field if CAPS LOCK is detected.
*
* showStrengthMeter : boolean -
* If 'true', will show password strength meter immediately
* below password field.
*
* pwStrengthMeter : function(password [string]) -
* If set, must point to a function that recieves the password
* as a string, performs strength ratings on it, and returns an
* integer value between 0 and 100 (0 = weakest, 100 = strongest)
*
* pwStrengthMeterCls : string -
* CSS Class to apply to the password strength meter.
*
* pwStrengthMeterFocusCls : string -
* CSS Class to apply to strength meter when the password field has focus.
*
* pwStrengthMeterScoreBarCls : string -
* CSS Class to apply to the score bar within the pw strength meter.
*
*/

Ext.ux.PasswordField = function(config) {
if (!config) config = {};
// call parent constructor
Ext.ux.PasswordField.superclass.constructor.call(this, config);

// set custom config properties (or assume component defaults)
this.showCapsWarning = config.showCapsWarning || true;
this.showStrengthMeter = config.showStrengthMeter || false;
this.pwStrengthTest = config.pwStrengthTest || this.calcStrength;
this.pwStrengthMeterCls = config.pwStrengthMeterCls || 'x-form-password-meter';
this.pwStrengthMeterFocusCls = config.pwStrengthMeterFocusCls || 'x-form-password-meter-focus';
this.pwStrengthScoreBarCls = config.pwStrengthScoreBarCls || 'x-form-password-scorebar';
};

Ext.extend(Ext.ux.PasswordField, Ext.form.TextField, {
inputType: 'password',
// private
onRender: function(ct, position) {
Ext.ux.PasswordField.superclass.onRender.call(this, ct, position);

// create caps lock warning box
if (this.showCapsWarning) {
var id = Ext.id();
this.alertBox = Ext.DomHelper.append(document.body,{
tag: 'div',
style: 'width: 10em; z-index: 99999;',
cls: 'x-alert',
children: [{
tag: 'div',
style: 'text-align: center; color: red;',
html: 'Caps Lock is on.',
id: id
}]
}, true);
Ext.fly(id).boxWrap();
this.alertBox.hide();

}
// create password strength meter
if (this.showStrengthMeter) {
this.objMeter = ct.createChild({tag: "div", 'class': this.pwStrengthMeterCls});
this.objMeter.setWidth(ct.first('INPUT').getWidth(false));
this.scoreBar = this.objMeter.createChild({tag: "div", 'class': this.pwStrengthScoreBarCls});
if(Ext.isIE && !Ext.isIE7) { // Fix style for IE6
this.objMeter.setStyle('margin-left', '3px');
}
}
},
afterRender: function() {
Ext.ux.PasswordField.superclass.afterRender.call(this);
if (this.showStrengthMeter) {
this.objMeter.setWidth(this.el.getWidth(false));
}
},
initEvents: function() {
Ext.ux.PasswordField.superclass.initEvents.call(this);

this.el.on('keypress', this.handleKeypress, this);
this.el.on('blur', this.handleBlur, this);
this.el.on('focus', this.handleFocus, this);
this.el.on('keyup', this.handleKeyUp, this);
},
handleFocus: function(e) {
if(!Ext.isOpera) { // don't touch in Opera
if (this.showStrengthMeter) {
this.objMeter.addClass(this.pwStrengthMeterFocusCls);
}
}
},
handleBlur: function(e) {
if(!Ext.isOpera) { // don't touch in Opera
if (this.showStrengthMeter) {
this.objMeter.removeClass(this.pwStrengthMeterFocusCls);
}
}
if (this.showCapsWarning) {
this.hideCapsMessage();
}
},
handleKeypress: function(e) {
var charCode = e.getCharCode();
// blank field if ESC pressed
if (charCode == e.ESC) {
this.setRawValue('');
}
// detect if CAPS LOCK is on and show warning if appropriate
if (this.showCapsWarning) {
if(
(e.shiftKey && charCode >= 97 && charCode <= 122) ||
(!e.shiftKey && charCode >= 65 && charCode <= 90)
){
this.showCapsMessage(e.target);
} else {
this.hideCapsMessage();
}
}
},
handleKeyUp: function(e) {
if (this.showStrengthMeter) {

this.updateMeter(e);
}
},
showCapsMessage: function(el) {
// set position of caps warning based on whether field is stand-alone
// or has strength meter immediately below it.
var position = this.showStrengthMeter ? 'tl-tr': 'l-r';

this.alertBox.alignTo(el, position, [5, 0]);
this.alertBox.show();
},
hideCapsMessage: function() {
this.alertBox.hide();
},
/**
* Sets the width of the meter, based on the score
* @param {Object} e
* Private function
*/
updateMeter: function(e) {
var score = 0
var p = e.target.value;

var maxWidth = this.objMeter.getWidth() - 2;

var nScore = this.pwStrengthTest(p);

if (nScore > 100) {
nScore = 100;
}

var scoreWidth = (maxWidth / 100) * nScore;

this.scoreBar.setWidth(scoreWidth, true);
},
/**
* Calculates the strength of a password
* @param {Object} p The password that needs to be calculated
* @return {int} intScore The strength score of the password (max = 100)
*/
calcStrength: function(p) {
var intScore = 0;

if (p.length == 0) return (intScore);

// PASSWORD LENGTH
intScore += p.length;

if(p.length > 0 && p.length <= 4) { // length 4 or less
intScore += p.length;
}
else if (p.length >= 5 && p.length <= 7) { // length between 5 and 7
intScore += 6;
}
else if (p.length >= 8 && p.length <= 15) { // length between 8 and 15
intScore += 12;
}
else if (p.length >= 16) { // length 16 or more
intScore += 18;
}

// LETTERS (Not exactly implemented as dictacted above because of my limited understanding of Regex)
if (p.match(/[a-z]/)) { // [verified] at least one lower case letter
intScore += 1;
}
if (p.match(/[A-Z]/)) { // [verified] at least one upper case letter
intScore += 5;
}
// NUMBERS
if (p.match(/\d/)) { // [verified] at least one number
intScore += 5;
}
if (p.match(/.*\d.*\d.*\d/)) { // [verified] at least three numbers
intScore += 5;
}

// SPECIAL CHAR
if (p.match(/[!,@,#,$,%,^,&,*,?,_,~]/)) { // [verified] at least one special character
intScore += 5;
}
// [verified] at least two special characters
if (p.match(/.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~]/)) {
intScore += 5;
}

// COMBOS
if (p.match(/(?=.*[a-z])(?=.*[A-Z])/)) { // [verified] both upper and lower case
intScore += 2;
}
if (p.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/)) { // [verified] both letters and numbers
intScore += 2;
}
// [verified] letters, numbers, and special characters
if (p.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!,@,#,$,%,^,&,*,?,_,~])/)) {
intScore += 2;
}

// return score (max = 100)
return Math.round(intScore * 2);
},
reset : function(){
if (this.showStrengthMeter) {
this.scoreBar.setWidth(0, true)
}
}
}
);
Ext.reg('uxpassword', Ext.ux.PasswordField);

[temporary]

Any news here? :)

I'm having two problems, first, the field doesn't work with anchoring, second, I can't get it to run with a card layout when the the panel with the password field isn't activated at start.
When I switch to the panel with the password field the strength meter has a width of 0.

Can someone help?

Stephan

[mystix]

second, I can't get it to run with a card layout when the the panel with the password field isn't activated at start.
When I switch to the panel with the password field the strength meter has a width of 0.

for that, try adding deferredRender: true to your Panel's layout config, and hideMode: 'offsets' to all children under the CardLayout.

[temporary]

thx mystix, the hideMode: 'offsets' fixed it. But deferredRender has no effect, it worked without it (i'm not in a tabpanel but in a window with card-layout).

[temporary]

Another thing - the Caps Lock message isn't shown on Firefox 3rc1.
showCapsMessage() is called, but the warning doesn't show up.

Also nice would be a textual representation of the password strange (from very weak to very strong or similar).

[anjelika]

thx mystix, the hideMode: 'offsets' fixed it. But deferredRender has no effect, it worked without it (i'm not in a tabpanel but in a window with card-layout).
Still wasn't able to show the strengthbar by using "hideMode: 'offsets'" in IE 7.0. This only worked in FF2 but in IE7 some rendering method is needed in order to display the bar.
I am using a card layout in a window.
Any toughts?

[mystix]

Still wasn't able to show the strengthbar by using "hideMode: 'offsets'" in IE 7.0. This only worked in FF2 but in IE7 some rendering method is needed in order to display the bar.
I am using a card layout in a window.
Any toughts?

post some code.

[anjelika]

I am using this extension inside another one (the Wizard) which uses Card layout.

var wizard = new Ext.ux.Wiz({

title : 'Web2SMS - Inregistrare',
height: 350,
width: 500,
listeners: {
'finish': {
fn : function(t)
{console.log (this.getWizardData())}
}
},

headerConfig : {
title : 'Vreau sa devin membru Web2SMS !'
},

cardPanelConfig : {
defaults : {
baseCls : 'x-small-editor',
bodyStyle : 'padding:20px 15px 5px 120px;background-color:#F6F6F6;',
border : false,
labelAlign : 'right'
}
},

cards : [

// first card with welcome message
new Ext.ux.Wiz.Card({
title : 'Bine ai venit!',
items : [{
border : false,
bodyStyle : 'background:none;',
html : 'Bine ai venit la <b>Telcor Web2SMS!</b><br>'+
'Este necesar sa ai la indemana doar telefonul mobil pentru a-ti putea crea contul tau Web2SMS in numai <b>3 minute</b>.<br>'+
'Dupa aceea poti trimite <b>3 mesaje gratuite!</b>'
}]
}),

// second card with input fields last/firstname
new Ext.ux.Wiz.Card({

title : 'Cont si parola',
hideMode: 'offsets',
monitorValid : true,
defaults : {
labelStyle : 'font-size:11px'
},
items : [{
border : false,
bodyStyle : 'background:none;padding-bottom:30px;',
html : 'Alege un nume de cont si o parola pentru accessul la serviciul Web2SMS.<br>'
},
new Ext.form.TextField({
name : 'username',
fieldLabel : 'Nume cont',
allowBlank : false,
plugins:[Ext.ux.plugins.RemoteValidator],
rvOptions: {url:'validate_username.php'},
validator : function(v){
var t = /^[0-9a-zA-Z_\- ]+$/;
return t.test(v);
}
}),
new Ext.ux.PasswordField({
name: 'parola',
fieldLabel:"Parola",
showCapsWarning: true,
allowBlank:false,
showStrengthMeter: true
})
]
}),

This works fine in FF and Safari for Windows, but in IE7 it displays nothing (none of the 2 inputs) on the second card (where the password field is).
If I move the window or gat back to the first card and then back to the second one , the fields are displaying fine ( the Strength field appears a bit left side but I think I can fix this from css).
Thanks

[mystix]

do normal DateFields and TextFields display correctly with that setup?

[anjelika]

Nope, none of the fields are displayed untill the windows is moved (refreshed).

[anjelika]

deferredRender: true does not help either, as this being a window, the only browser that does not 'refresh' the window is IE, in FF2.0, Safari for Windows and Opera 9 works fine.

[anjelika]

I'm stuck at this point, any ideea on how to solve this?
Thanks

[wm003]

I'm stuck at this point, any ideea on how to solve this?
Thanks

Have you changed the zseed of Windows Manager (or does any of your ux so?)
This could get into an issue i described here (http://extjs.com/forum/showthread.php?p=168299#post168299)

[anjelika]

No, this did not solved my problem.
It looks more like rendering something to the window but not applying a doLayout function or something. This only happens when I use this password extension, otherwise everything was fine, only the card (I am using a card layout) that contains the password extension does not show, the others are displaying correctly.
Thanks anyway for your help ;)

[wm003]

try to call the plugin with

showCapsWarning: false,

If that works without your issues than the alertbox appended to the document.body may cause the problem. Try to change to plugins "onrender" function

this.alertBox = Ext.DomHelper.append(document.body,{

with something like


this.alertBox = Ext.DomHelper.insertFirst(document.body,{

or another Domhelper method(insertBefore,insertAfter,insertHTML...)

I haven't tested this, so i'm curious if it might help you.

[anjelika]

Ok, I've put showCapsWarning: false, (I tought it was false anyway:P), still no luck :(
The other methods to add the div (insertChild) does not work either :(

[anjelika]

hideMode : 'offsets' is the cause of not displaying the page in IE 7.
By removing this, the inputs are displaying correctly, but the PasswordStrength bar is not shown (only few pixels of it).
By using "hideMode : 'offsets'" the PasswordStrength bar is displayed correctly but the input fields (I have 2 fields on this card) are only visible after I move the window a bit.

[evilkate]

For those having issues getting the Strength Meter to render properly under some circumstances, such as Tabpanels etc, there is an easy fix and it seems to be working in all situations so far.

First - remove the entire 'afterRender' function (comment it out if you just want to test)

Then, to the end of the InitEvents function, add the following:

// Added to auto adjust meter width. This also means afterRender is not needed
// AND fixes issues in tabpanels: No hidemode:offset or deferredRender:true required.
this.on('resize', function(cm,aw,ah,rw,rh)
{
this.objMeter.setWidth(this.el.getWidth(false))
}, this);
Hope that helps those concerned. Please, do post if rendering issues continue and under what circumstance.

Regards,
Kate

[andreros]

Hey Benny_boy, here's some code I want to share with you. The following code compares the value between your password text field and a confirm text field that I added after yours. If the text matches, a valid icon is placed on the right side of the box. This code mimcs the Ext Widget native code.


The code:
ConfirmTextField.on('keyup', function(txt, e) {
var newPass = newPassTextField.getValue();
var confirmPass = txt.getValue();
if (newPass == confirmPass) {
var label = txt.el.findParent('.x-form-element', 5, true) || // use form element wrap if available
txt.el.findParent('.x-form-field-wrap', 5, true); // else direct field wrap
var icon = label.createChild({cls:'x-form-isvalid-icon'});
icon.alignTo(txt.el, 'tl-tr', [2, 0]);
icon.show();
} else {
var label = txt.el.findParent('.x-form-element', 5, true) || // use form element wrap if available
txt.el.findParent('.x-form-field-wrap', 5, true); // else direct field wrap
label.dom.removeChild(label.dom.lastChild);
}
})The CSS:
.x-form-isvalid-icon ,textarea.x-form-isvalid-icon{
background: transparent url(../images/silkIcons/accept.png) no-repeat 0 2px;
display: block;
height: 18px;
left: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 16px;
}Hope you do something with this ;)