PDA

View Full Version : Capturing Caps Lock For Passwords



thejoker101
6 Dec 2007, 9:39 PM
Anyone read 24 Ways (http://24ways.org)?

Day 4 had a really great idea, capturing when Caps Lock is on when people are entering passwords.

I re-wrote his code using Ext 2.0.

You can read more about it here (http://17thdegree.com/archives/2007/12/06/capturing-caps-lock-with-the-ext-js-framework/), there's an example on that page, too.

DigitalSkyline
7 Dec 2007, 12:06 PM
Very Cool ... another great idea!

benny_boi
9 Dec 2007, 6:29 PM
Really cool idea!!

I don't know if this is of any use, but I've wrapped your clever code in a user extension for a password field (extends Ext.form.TextBox). To disable the caps warning, you can set the objects "showCapsWarning" config option to false..



// Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');

/**
* Ext.ux.PasswordField Extension Class
*
* @version 0.1
*
* Based on an original implementation by 'thejoker101'
* (http://extjs.com/forum/showthread.php?t=20210)
*
* @class Ext.ux.PasswordField
* @extends Ext.form.Textfield
* @constructor
* @param {Object} config Configuration options
*/

Ext.ux.PasswordField = function(config) {

// call parent constructor
Ext.ux.PasswordField.superclass.constructor.call(this, config);

this.showCapsWarning = config.showCapsWarning || true;

};

Ext.extend(Ext.ux.PasswordField, Ext.form.TextField, {
/**
* @cfg {String} inputType The type attribute for input fields -- e.g. text, password (defaults to "password").
*/
inputType: 'password',
// private
onRender: function(ct, position) {
Ext.ux.PasswordField.superclass.onRender.call(this, ct, position);

// create caps lock warning box
var id = Ext.id();
this.alertBox = Ext.DomHelper.append(document.body,{
tag: 'div',
style: 'width: 10em',
children: [{
tag: 'div',
style: 'text-align: center; color: red;',
html: 'Caps Lock is on.',
id: id
}]
}, true);
Ext.fly(id).boxWrap();
this.alertBox.hide();
},
initEvents: function() {
Ext.ux.PasswordField.superclass.initEvents.call(this);

this.el.on('keypress', this.keypress, this);
},
keypress: function(e) {
var charCode = e.getCharCode();
if(
(e.shiftKey && charCode >= 97 && charCode <= 122) ||
(!e.shiftKey && charCode >= 65 && charCode <= 90)
){
if (this.showCapsWarning) {
this.showWarning(e.target);
}
} else {
this.hideWarning();
}
},
showWarning: function(el) {
this.alertBox.alignTo(el, 'l-r', [5, 0]);
this.alertBox.show();
},
hideWarning: function() {
this.alertBox.hide();
}
}
);
Sample use is as follows:




<div id="password"></div>

<script type="text/javascript">
Ext.onReady(function(){
var password = new Ext.ux.PasswordField({
showCapsWarning: true
});
password.render('password');
});
</script>
Cheers!

Pagebaker
10 Dec 2007, 2:13 AM
Nice work benny, creating a class for it makes more sense and makes it more usable!

benny_boi
10 Dec 2007, 4:30 AM
I've actually built this up into a full UX for Ext 2.0 - combining the excellent work done by Pagebaker (http://extjs.com/forum/showthread.php?t=12155).

Not claiming any innovation on my own part, I just found that by combining both sets of functionality into a 2.0 UX, I ended up with a password field that met my needs, and wanted to post it in case anyone else got some use from the culmination.

http://extjs.com/forum/showthread.php?p=97096

Only one obvious bug that I hope to iron out ASAP.

Cheers,

Ben

efattal
13 Feb 2008, 1:27 AM
As I use the password field in a window (with {autoDestroy: true} of course), I slightly modified your on render function:


onRender: function(ct, position) {
Ext.ux.PasswordField.superclass.onRender.call(this, ct, position);

// create caps lock warning box
var id = Ext.id();
this.alertBox = Ext.DomHelper.append(document.body,{
tag: 'div',
style: 'width: 10em; z-index: 10000',
children: [{
tag: 'div',
style: 'text-align: center; color: red;',
html: l10n('caps_lock_warning'),
id: id
}]
}, true);
Ext.fly(id).boxWrap();
this.alertBox.hide();

this.on('beforedestroy', function(){
this.alertBox.hide()
});

},

Now it works as I expected.

Thanks

djhonyy
20 Oct 2008, 9:41 AM
As I use the password field in a window (with {autoDestroy: true} of course), I slightly modified your on render function:


onRender: function(ct, position) {
Ext.ux.PasswordField.superclass.onRender.call(this, ct, position);

// create caps lock warning box
var id = Ext.id();
this.alertBox = Ext.DomHelper.append(document.body,{
tag: 'div',
style: 'width: 10em; z-index: 10000',
children: [{
tag: 'div',
style: 'text-align: center; color: red;',
html: l10n('caps_lock_warning'),
id: id
}]
}, true);
Ext.fly(id).boxWrap();
this.alertBox.hide();

this.on('beforedestroy', function(){
this.alertBox.hide()
});

},Now it works as I expected.

Thanks

hey efattal,

first, sorry for my english ok?! auhaua

here im doing exactly what r u doing, using the property z-index to make the alertBox appert in front of the login