PDA

View Full Version : [2.0] Ext.ux.PasswordField (v0.21)



benny_boi
10 Dec 2007, 4:21 AM
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
10 Dec 2007, 4:28 AM
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
10 Dec 2007, 5:00 AM
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
11 Dec 2007, 12:43 AM
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
11 Dec 2007, 2:10 AM
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
11 Dec 2007, 4:43 AM
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
12 Dec 2007, 3:46 AM
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
12 Dec 2007, 4:48 AM
this.hideCapsWarning is not a function
[Break on this error] this.hideCapsWarning();


on blur

benny_boi
12 Dec 2007, 6:37 AM
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
14 Dec 2007, 4:24 PM
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
18 Dec 2007, 9:01 PM
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
21 Dec 2007, 3:23 AM
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
22 Dec 2007, 12:01 PM
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
23 Dec 2007, 2:23 AM
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
23 Dec 2007, 2:26 AM
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
24 Dec 2007, 6:24 AM
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
3 Jan 2008, 6:24 AM
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
3 Jan 2008, 4:22 PM
I added :
Ext.reg('uxpassword', Ext.ux.PasswordField);

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

WebArchitect
7 Apr 2008, 1:56 AM
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
13 May 2008, 12:12 AM
somewhere it should have a high z-index otherwise the caps warning can be hidden by other items :(

ramaboo
13 May 2008, 12:35 AM
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
27 May 2008, 9:22 AM
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
27 May 2008, 6:21 PM
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
28 May 2008, 12:41 AM
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
28 May 2008, 12:46 AM
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
11 Jun 2008, 10:54 PM
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
12 Jun 2008, 12:03 AM
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
12 Jun 2008, 12:23 AM
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
12 Jun 2008, 12:39 AM
do normal DateFields and TextFields display correctly with that setup?

anjelika
12 Jun 2008, 12:41 AM
Nope, none of the fields are displayed untill the windows is moved (refreshed).

anjelika
12 Jun 2008, 6:32 AM
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
12 Jun 2008, 11:06 PM
I'm stuck at this point, any ideea on how to solve this?
Thanks

wm003
12 Jun 2008, 11:16 PM
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
12 Jun 2008, 11:47 PM
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
13 Jun 2008, 3:47 AM
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
13 Jun 2008, 4:16 AM
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
16 Jun 2008, 10:51 PM
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
17 Jun 2009, 9:30 AM
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
28 Sep 2009, 7:29 AM
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 ;)

tobiu
7 Dec 2009, 3:22 AM
hi together,

is there a version for ext-3.0.3 already?


kind regards,
tobiu

tobiu
7 Dec 2009, 4:44 AM
after changing the following part, this ux works with ext-3.0.3 for me:



reset : function(){
Ext.ux.PasswordField.superclass.reset.call(this);

if (this.rendered && this.showStrengthMeter) {
this.scoreBar.setWidth(0, true)
}
}


red: setting the scorebar to zero is nice, but resetting the field itself should not be forgotten.
green: if the form is in a window (or other container) it is not guaranteed, that the form-element is already rendered when reset is called. beforeRender, there is no scorebar so setWidth will lead to an error.


kind regards,
tobiu

Sentry1
13 Feb 2010, 6:42 PM
Do you have a demonstration as very interested to get something to work in our ExtJs within a form (nothing seems to work). We are using version 3

Any assistance would be appreciated.


Cheers

Mac

tobiu
14 Feb 2010, 1:10 AM
Hi Sentry1,

look at the first posting (page 1), there is a link to a working demo. this addon works with ext 3.* too, but it is not able to handle resizing yet.

kind regards,
tobiu

Sentry1
14 Feb 2010, 1:26 AM
Thanks tobiu

I just thought that there has been a lot people who have made little changes to the original download I was wondering if anyone had compiled a new updated version.

Cheers
Mac ~o)

tobiu
14 Feb 2010, 1:34 AM
no, no one took the time to do so yet ;)

i am using the 0.22 version, although the resizing issue is bad (if you use the form inside windows, that are resizeable and the form fields use anchors, the strength-bar won't change).

i am porting my app over to 3.1.1 at the moment, so i am really short in time (porting over the DDTabPanel took me a bunch of hours yesterday), so i am hoping someone else can do this.

kind regards,
tobiu

wemerson.januario
14 Feb 2010, 5:59 PM
nice work. Is it work in Ext 3.1.1?

Tuxinator
27 Jul 2010, 3:35 PM
Hi,

is there something like this Passwordfield for newer Versions of ext (3.x) ?