PDA

View Full Version : [3.x] Login Dialog Extension



sumit.madan
3 May 2009, 12:34 AM
ExtJS 3.x extension for a Login Dialog Window. Please check the included README.txt for API reference.

Extract the attached zip file to ExtJS examples folder.

Screenshots:
http://img33.imageshack.us/img33/9265/41038806.png

P.S. - There are no config options yet for changing language icon combo. I thought the best place to change it is directly in the extension as most of your applications will have only one language option. If requested, language combo can be exposed and the dialog can be localized for multiple languages.

Changes:


Version 1.2, 08/08/2009
> Added: Option to SHA1 encrypt password before submit (credits: Chris Veness (http://ext.vosandhowden.com/ux/crypto/sha1.cfm))
> Added: Option to Enable / Disable virtual keyboard plugin and enable forced password entry through virtual keyboard.

Version 1.1, 07/18/2009
> Added: Caps Lock warning for password field (credits: http://17thdegree.com/)
> Added: Virtual Keyboard password entry plugin (VirtualKeyboard extension/plugin by efattal)
> Updated: High-resolution PNG images (sorry IE6 folks, please supply your own images)
> Updated: Misc css, code changes, README help corrections.

Version 1.0, 05/03/2009 - Upgraded albeva's original extension for ExtJS 2.x to ExtJS 3.x
> Added: Language Icon Combo (IconCombo extension by Saki)
> Added: Remember Me Checkbox and config option
> Added: Forgot Password Link and config option
> Updated: Login Buttons to ExtJS 3.0 style buttons - medium (24x24 icons)
> Updated: Misc css and code changes


(Use Firefox to download the attachment below, Internet Explorer downloaded files from this forum get double zipped.)

evant
3 May 2009, 2:40 AM
Neat, thanks!

wemerson.januario
3 May 2009, 2:56 PM
nice work. it is very nice. Congratulation

albeva
4 May 2009, 3:20 AM
hey nice work :) maybe this could be added to official extensions list? I'll have a look. I've been long planning on updating the dialog a bit but seems you beat me to it

sumit.madan
4 May 2009, 4:04 AM
hey nice work :) maybe this could be added to official extensions list? I'll have a look. I've been long planning on updating the dialog a bit but seems you beat me to it
Your extension for ExtJS 2.x had stable code (don't know why you kept it beta). I recently needed a login dialog for an application with more options and extended yours. Thanks for your original work!

raphac
4 May 2009, 5:17 AM
1) Thanks, great job.

2) I suggest the following extensions:

Capturing Caps Lock For Passwords
http://extjs.com/forum/showthread.php?t=20210

Ext.ux.VirtualKeyboard and its plugin
https://extjs.com/forum/showthread.php?p=223683

SHA-1 Cryptographic Hash Algorithm
http://ext.vosandhowden.com/ux/crypto/sha1.cfm

dawesi
5 May 2009, 12:52 AM
nice

bull
6 May 2009, 4:40 AM
Thanks, it's very nice! An error occurred when I tried to click the text area of the language combo box when it's dropdown, and here's the error message:

Line: 9
Error: 'Ext.fly(...)' is null or not an object

Anyone got the same problem or just me?

jimmyphp
6 May 2009, 6:44 AM
focus not working on Firefox.

change code to this for fix:



...
// when window is visible set focus to the username field
// and fire "show" event
this._window.on ('show', function () {
var f = this._formPanel.getEl().child("input[type!=hidden]");
f.focus.defer(100, f);
this.fireEvent('show', this);
}, this);
};
...

bull
6 May 2009, 5:01 PM
focus not working on Firefox.

change code to this for fix:



...
// when window is visible set focus to the username field
// and fire "show" event
this._window.on ('show', function () {
var f = this._formPanel.getEl().child("input[type!=hidden]");
f.focus.defer(100, f);
this.fireEvent('show', this);
}, this);
};
...


Great code. A little change for focusing on the User Name field text, is it better?




var f = Ext.getCmp(this.usernameId);

wemerson.januario
9 May 2009, 7:31 PM
Hi, thanks for sharing. I am about to finish an ux like that, The one will be have almost the same functions and more. I thank you sumit.madan for you work. Your extension was the base for my first ux and the most clear code that I have understand. You teached me!! hehehe. I will keep yours credits (Albert Varaksin and Sumit Madan) and add my credits too. Can I? heheh. The name will be Ext.ux.LoginWindow. Just wait

sumit.madan
10 May 2009, 9:32 AM
@wemerson.januario
Thanks for asking, I would say the more the merrier! If all ExtJS developers can have professional extensions to use in their applications, it would make everyone's lives easier.

raphac had some excellent suggestions for this extension on the previous page, you might want to consider adding some of these.

Sumit

albeva
11 May 2009, 1:19 AM
fine by me :)

wemerson.januario
12 May 2009, 5:39 PM
Hello .I have just uploaded the new post that i promissed! The Ext.ux.LoginWindow is now avaible. Thanks .
here is the link
http://extjs.com/forum/showthread.php?t=68275

sumit.madan
18 Jul 2009, 4:33 AM
Login Dialog Extension updated to version 1.1

Changes:


Version 1.1, 07/18/2009
> Added: Caps Lock warning for password field (credits: http://17thdegree.com/)
> Added: Virtual Keyboard password entry plugin (VirtualKeyboard extension/plugin by efattal
> Updated: High-resolution PNG images (sorry IE6 folks, please supply your own images)
> Updated: Misc css, code changes, README help corrections.
Thanks raphac for the excellent suggestions!

lightglitch
24 Jul 2009, 7:06 AM
Login Dialog Extension updated to version 1.1

Changes:


Version 1.1, 07/18/2009
> Added: Caps Lock warning for password field (credits: http://17thdegree.com/)
> Added: Virtual Keyboard password entry plugin (VirtualKeyboard extension/plugin by efattal
> Updated: High-resolution PNG images (sorry IE6 folks, please supply your own images)
> Updated: Misc css, code changes, README help corrections.
Thanks raphac for the excellent suggestions!


There is a bug in keyboard selection because the array store change a bit in version 3.
In line 328 change of Ext.ux.VirtualKeyboard file:


this.language = record.data.value; to


this.language = record.data.field2;

salihgedik
29 Jul 2009, 5:09 AM
Wow! Lookin cool and useful

zenigold
4 Aug 2009, 5:36 AM
Great Job !
Thank You.
Only a little problem (probably is a my error): the checkbox isn't displayed !
What is the cause ?
Bye.
Zen.

SOLVED !
Sorry it was a my mistake.

sumit.madan
8 Aug 2009, 4:38 AM
Login Dialog Extension updated to version 1.2

Changes:


Version 1.2, 08/08/2009
> Added: Option to SHA1 encrypt password before submit (credits: Chris Veness)
> Added: Option to Enable / Disable virtual keyboard plugin and enable forced password entry through virtual keyboard.

simon1118
10 Aug 2009, 1:47 AM
Hi, I have downloaded your attachment and there is one file named 'logindialog1_2', I wonder how can I use it in my project?
Thanks for your help in advance.

72
10 Aug 2009, 2:42 PM
Hi, I have downloaded your attachment and there is one file named 'logindialog1_2', I wonder how can I use it in my project?


What about readme file?

sumit.madan
10 Aug 2009, 11:25 PM
Hi, I have downloaded your attachment and there is one file named 'logindialog1_2', I wonder how can I use it in my project?
Thanks for your help in advance.
If you downloaded the attachment using Internet Explorer, extracting it would give you the same file (without any filename extension). Rename the extracted file to add a .zip extension and extract again.

Alternatively use Firefox to download attachments from this forum, Internet Explorer somehow messes up on the attachments here.

simon1118
11 Aug 2009, 4:53 AM
Thanks for your replay!
I got it now.

roady001
21 Aug 2009, 2:40 PM
If requested, language combo can be exposed and the dialog can be localized for multiple languages.


Well, I'm for one are requesting it! It would be nice if there is an easy, documented, way to do this.

sumit.madan
24 Aug 2009, 10:07 PM
An interface to language combo is easy to integrate, but with that, the login dialog itself would have to be localized for multiple languages.
I would look at ways for translating through google translation API. Otherwise, if forum members could help me with the correct translation for the interface, that would also work.

mystix
24 Aug 2009, 11:01 PM
An interface to language combo is easy to integrate, but with that, the login dialog itself would have to be localized for multiple languages.
I would look at ways for translating through google translation API. Otherwise, if forum members could help me with the correct translation for the interface, that would also work.

@tomim's implemented an automatic translation tool for ExtJS components:
http://extjs.com/forum/showthread.php?t=72978
you might want to check that out.

tsmolarski
26 Aug 2009, 5:20 AM
hello
I have problem with error message

How to send different message from php to form dialog
I was try

$result["success"]["message"] = 'some message';
$result["message"] = 'some message';
$result["errors"]["message"] = 'some message';

Thanks

sumit.madan
27 Aug 2009, 1:21 AM
hello
I have problem with error message

How to send different message from php to form dialog
I was try

$result["success"]["message"] = 'some message';
$result["message"] = 'some message';
$result["errors"]["message"] = 'some message';

Server side implementation is up to you, I personally use CakePHP (http://www.cakephp.org) for PHP development, and it has a javascript helper which can convert PHP arrays to JSON.

So, I can do:


$result["success"] = false;
$result["message"] = "Invalid username or password";

echo $javascript->Object($result);

The resulting response string should be in the following JSON format (from README.txt):


{
success : true or false,
message : 'the message to show if login failed (success = false)'
}

kenshinyelin
29 Aug 2009, 9:07 AM
when I extract this zip file,why it is not a js file,it just a windows file,please give me a help,thanks a lot:)

sumit.madan
30 Aug 2009, 10:32 AM
Use Firefox to download the attachments, Internet Explorer downloaded files from this forum get double zipped.

realjax
27 Oct 2009, 2:33 AM
Very cool extension.

It would be even better if it was possible to disable the whole language part though :D
I mean, there's hardly any point in a language selection dropdown when there is only one language to select from..

sumit.madan
27 Oct 2009, 4:42 AM
Very cool extension.

It would be even better if it was possible to disable the whole language part though :D
I mean, there's hardly any point in a language selection dropdown when there is only one language to select from..
The language selection dropdown can be customized directly in the extension (for now). In the future versions I'll add different language options which can be enabled / disabled in the dialog config.

Keeping the language dropdown (even if there is only one language) keeps the dialog size ratio as 3:2 which is visually pleasing. Too much width and too little height can make the dialog appear out of proportion.

realjax
27 Oct 2009, 5:08 AM
Haha. yeah good one.

3:2

dialog out of proprotion

haha..

sumit.madan
27 Oct 2009, 5:32 AM
Haha. yeah good one.

3:2

dialog out of proprotion

haha..
3:2, 4:3, 16:9 are standard sizing conventions in the media and computer hardware industry. Or you consider anything apart from squares as being out of proportion? Do you have a square monitor?

The reason why the width is more than the height, is that dialog boxes mimic the ratio of the user's computer screen. The closer they are to the ratio of the screen, the more visually pleasing they will look.

realjax
27 Oct 2009, 5:47 AM
Oh, I'm sorry. I thought you were joking.

So, to recap, basically what you are saying is:
'You should keep the dropdown in because the dialog looks better this way.' :-/

Consider the following scenario:
I'm building an Extjs based app for a customer. There's a login screen with a language dropdown, containing one language. I'll present the app to the customer who, of course has to log in first. Choose his most likely response:

[ ] 'Theres a bug, because I can select only one language'
[ ] 'Why are there no other translations made?'
[ ] 'Hey, that dialog looks very pleasing, its very close to 3:2 this way. Thanks.


Catch my drift? :)

sumit.madan
27 Oct 2009, 6:10 AM
This extension is open-source, feel free to modify the extension to suit your application. I cannot customize it for your specific requirements. What I've provided is an outline based on my personal choices.

Hammit
31 Oct 2009, 8:02 PM
I made the following change to Ext.ux.form.LoginDialog at line ~181.
I did this because I ran into a problem with the checkbox not displaying.
It turns out the problem was that the style needed to be changed in override.css, but I honestly think this change should be made :)

Perhaps you could also document in the README.txt the need for the user to modify the
.x-form-checkbox-inner and .x-form-radio-inner classes. Oh, btw, what's radio in there for? I can't see it being used anywhere in the login dialog.

Also, the Remember me checkbox functionality doesn't appear to be implemented. Is this correct and if so, will it be finished off or is that it?

Original:



render: function() {
Ext.get(Ext.DomQuery.select('#x-form-el-' + this._rememberMeId + ' input')).set({
qtip: 'This is not recommended for shared computers.'
});

},


Changed:



render: function(component) {
component.el.set({
qtip: 'This is not recommended for shared computers.'
});

},

sumit.madan
1 Nov 2009, 2:50 AM
The zip file has to go into the examples directory of ExtJS SDK. Did you see the checkbox missing when you launched it from there?

If you're porting it to your application, image paths have to be changed, including the ones in the overrides.css, which btw, contains theming support for checkboxes (and radio buttons) as created by Condor in another post.
You can also use the checkbox without the theme, as is the default behavior of ExtJS 3.0

Remember me functionality has to be implemented by your server side language, as the login dialog won't be needed in this case. It just sends a POST parameter "rememberme", if checked. Set a cookie from server side and log the user back in whenever he accesses the URL again.

The qtip is set on the checkbox HTML input button <input type="checkbox">, which is not accessible directly using component.el, I'm getting that by using DomQuery. I believe you're using it instead on the Remember me text.

http://i34.tinypic.com/2wnpvgg.png

Hammit
1 Nov 2009, 4:30 AM
Ok, didn't realize it had to go into the examples dir. Cheers. It wasn't in there to begin with, which is why I was experiencing problems. I just had it in a test directory.

I am using ExtJS 3.0, so I might remove the themes in the overrides.css then.

Remember me functionality...hmm...ok. Got ya. Cheers again.

As for the suggested change, I see what you are saying. You are using the input element found with DomQuery while I'm using the component element passed to the render function. The component element I'm using though should be the checkbox component element itself as it's the checkboxes renderer being called, which is always passed the component in ExtJS 3.0. This means you can avoid the DomQuery lookup which is more expensive and prone to error.

I have tested this btw, and for ExtJS 3.0 it works on FF 3.5 and IE 8. Not sure about Ext 2.x though.

Oh, I also noticed that with ExtJS 3.0, the keyboard enter didn't work for me. I'll look into this further.

sumit.madan
1 Nov 2009, 5:24 AM
You're right about using component.el for setting the qtip. Can't remember why I used the DomQuery method.


this._window = new Ext.Window ({assigns the KeyMap object for keys 10, 13, 27. Check whether the keyboard events are getting swallowed somewhere else in your application.

Hammit
1 Nov 2009, 6:10 AM
Sorry, it's the virtual keyboard that's not working. All keys in it work except for the enter key/button, which neither inserts a newline nor submits the form to the server. It is supposed to submit when you click the enter button isn't it? I can't find anything in the code that says it is or should? Tried both FF 3.5 and IE 8 btw.

Oh...I just found something. The input element that the character go into when pressing the buttons, could be a textarea I think, in which case, the newline could start text on a newline in the textarea and not submit. In the case of a textfield though, I think it makes more sense to submit the form when enter is clicked.

Your thoughts/opinions...?

Oh, forgot to say...Well done! Awesome extension that is very welcome :) hehehe

demon222
6 Nov 2009, 4:40 AM
small modification ;-)




/**
* Free and simple to use loginDialog for ExtJS 3.x
*
* @author Albert Varaksin (ExtJS 2.x)
* @author Sumit Madan (ExtJS 3.x)
* @license LGPLv3 http://www.opensource.org/licenses/lgpl-3.0.html
* @version 1.0 beta, 07/12/2008 - ExtJS 2.x
* @version 1.0, 05/03/2009 - ExtJS 3.x
* @version 1.1, 07/18/2009 - ExtJS 3.x
*/

Ext.namespace('Ext.ux.form');
Ext.ux.form.LoginDialog = function (config) {
Ext.apply(this, config);

var css = '.ux-auth-header-icon {background: url("' + this.basePath + '/small/locked.png") 0 4px no-repeat !important;}'
+ '.ux-auth-header {background:transparent url("' + this.basePath + '/large/lock.png") no-repeat center right;padding:10px;padding-right:45px;font-weight:bold;}'
+ '.ux-auth-login {background-image: url("' + this.basePath + '/medium/key.png") !important;}'
+ '.ux-auth-close {background-image: url("' + this.basePath + '/medium/close.png") !important;}'
+ '.ux-auth-reset {background-image: url("' + this.basePath + '/medium/reset.png") !important;}'
+ '.ux-auth-warning {background:url("'+ this.basePath + '/small/warning.png") no-repeat center left; padding: 2px; padding-left:20px; font-weight:bold;}'
+ '.ux-auth-header .error {color:red;}'
+ '.ux-auth-header .success {color:green;}'
+ '.ux-auth-form {padding:10px;}';
Ext.util.CSS.createStyleSheet(css, this._cssId);

if(this.forceVirtualKeyboard) {
this.enableVirtualKeyboard = true;
}

this.addEvents ({
'show' : true,
'cancel' : true,
'reset' : true,
'success' : true,
'failure' : true,
'submit' : true
});

Ext.ux.form.LoginDialog.superclass.constructor.call(this, config);

this._headPanel = new Ext.Panel ({
baseCls : 'x-plain',
html : this.message,
cls : 'ux-auth-header',
region : 'north',
height : 60
});

this._usernameId = Ext.id();
this._passwordId = Ext.id();
this._loginButtonId = Ext.id();
this._cancelButtonId = Ext.id();
this._resetButtonId = Ext.id();
this._rememberMeId = Ext.id();
this._sslId = Ext.id();

this._formPanel = new Ext.form.FormPanel ({
region : 'center',
border : false,
bodyStyle : "padding: 10px;",
waitMsgTarget: true,
labelWidth : 75,
defaults : { width: 300 },
items : [{
xtype : 'textfield',
id : this._usernameId,
name : this.usernameField,
fieldLabel : this.usernameLabel,
vtype : this.usernameVtype,
validateOnBlur : false,
allowBlank : false
}, {
xtype : 'textfield',
inputType : 'password',
id : this._passwordId,
name : this.passwordField,
fieldLabel : this.passwordLabel,
vtype : this.passwordVtype,
width : this.enableVirtualKeyboard == true ? 280 : 300,
validateOnBlur : false,
allowBlank : false,
validationEvent : this.forceVirtualKeyboard == true ? 'blur' : 'keyup',
enableKeyEvents : true,
keyboardConfig: {
showCloseButton: true,
closeButtonText: 'Zamknij',
showIcon: true,
languageSelection: false,
language: ['Polish']
},
plugins: this.enableVirtualKeyboard == true ? new Ext.ux.plugins.VirtualKeyboard() : null,
listeners: {
render: function() {
this.capsWarningTooltip = new Ext.ToolTip({
target: this.id,
anchor: 'top',
width: 305,
html: '<div class="ux-auth-warning">Caps Lock is On</div><br />' +
'<div>Having Caps Lock on may cause you to enter your password incorrectly.</div><br />' +
'<div>You should press Caps Lock to turn it off before entering your password.</div>'
});
this.capsWarningTooltip.disable();
this.capsWarningTooltip.on('enable', function() {
this.disable();
});
},

keypress: {
fn: function(field, e) {
if(this.forceVirtualKeyboard) {
field.plugins.expand();
e.stopEvent();
}
else {
var charCode = e.getCharCode();
if((e.shiftKey && charCode >= 97 && charCode <= 122) ||
(!e.shiftKey && charCode >= 65 && charCode <= 90)) {

field.capsWarningTooltip.show();
}
else {
if(field.capsWarningTooltip.hidden == false) {
field.capsWarningTooltip.hide();
}
}
}
},
scope: this
},

blur: function(field) {
if(this.capsWarningTooltip.hidden == false) {
this.capsWarningTooltip.hide();
}
}
}
}, {
xtype: 'box',
autoEl: {
html: '<div style="text-align: right; width: 380px;">' +
'<a href="javascript:loginDialog.hide();forgottenDialog.show();">'+
this.forgotPasswordLabel + '</a></div>'
}
}, {
xtype: 'box',
autoEl: 'div',
height: 10
}, {
xtype : 'iconcombo',
hiddenName : this.languageField,
fieldLabel : this.languageLabel,
store : new Ext.data.SimpleStore({
fields: ['languageCode', 'languageName', 'countryFlag'],
data: [
['en', 'Angielski', 'ux-flag-us'],
['pl', 'Polski', 'ux-flag-pl']
]
}),
valueField: 'languageCode',
value: 'pl',
displayField: 'languageName',
iconClsField: 'countryFlag',
triggerAction: 'all',
editable: false,
mode: 'local'
}, {
xtype : 'checkbox',
id : this._rememberMeId,
name : this.rememberMeField,
boxLabel : '&nbsp;' + this.rememberMeLabel,
width : 200,
checked: false,
listeners: {
render: function() {
Ext.get(Ext.DomQuery.select('#x-form-el-' + this._rememberMeId + ' input')).set({
qtip: 'This is not recommended for shared computers.'
});
},
scope: this
}
}, {
xtype : 'checkbox',
id : this._sslId,
name : this.sslField,
boxLabel : '&nbsp;' + this.sslLabel,
width : 200,
checked: true,
listeners: {
render: function() {
Ext.get(Ext.DomQuery.select('#x-form-el-' + this._sslId + ' input')).set({
qtip: 'This is recommended for security connection!.'
});
},
scope: this
}
}]
});

var buttons = [{
id : this._loginButtonId,
text : this.loginButton,
iconCls : 'ux-auth-login',
width : 90,
handler : this.submit,
scale : 'medium',
scope : this
}];
var keys = [{
key : [10,13],
handler : this.submit,
scope : this
}];

if (typeof this.cancelButton == 'string') {
buttons.push({
id : this._cancelButtonId,
text : this.cancelButton,
iconCls : 'ux-auth-close',
width : 90,
handler : this.cancel,
scale : 'medium',
scope : this
});
keys.push({
key : [27],
handler : this.cancel,
scope : this
});
}

if (typeof this.resetButton == 'string') {
buttons.push({
id : this._resetButtonId,
text : this.resetButton,
iconCls : 'ux-auth-reset',
width : 90,
handler : this.reset,
scale : 'medium',
scope : this
});
keys.push({
key : [46],
handler : this.reset,
scope : this
});
}

this._window = new Ext.Window ({
width : 420,
height : 290,
closable : false,
resizable : false,
draggable : false,
modal : this.modal,
iconCls : 'ux-auth-header-icon',
title : this.title,
layout : 'border',
bodyStyle : 'padding:5px;',
buttons : buttons,
keys : keys,
items : [this._headPanel, this._formPanel]
});

this._window.on ('show', function () {
Ext.getCmp(this._usernameId).focus(true, 500);
Ext.getCmp(this._passwordId).setRawValue('');
this.fireEvent('show', this);
}, this);

};

Ext.extend (Ext.ux.form.LoginDialog, Ext.util.Observable, {

/**
* LoginDialog window title
*
* @type {String}
*/
title :'Login',

/**
* The message on the LoginDialog
*
* @type {String}
*/
message : 'Access to this location is restricted to authorized users only.' +
'<br />Please type your username and password.',

/**
* When login failed and no server message sent
*
* @type {String}
*/
failMessage : 'Unable to log in',


/**
* When login success and no server message sent
*
* @type {String}
*/
successMessage : 'You have been logged!',


/**
* When submitting the login details
*
* @type {String}
*/
waitMessage : 'Please wait...',

/**
* The login button text
*
* @type {String}
*/
loginButton : 'Login',

/**
* Cancel button
*
* @type {String}
*/
cancelButton : null,


/**
* Cancel button
*
* @type {String}
*/
resetButton : 'Reset',

/**
* Username field label
*
* @type {String}
*/
usernameLabel : 'Username',

/**
* Username field name
*
* @type {String}
*/
usernameField : 'username',

/**
* Username validation
*
* @type {String}
*/
usernameVtype : 'alphanum',

/**
* Password field label
*
* @type {String}
*/
passwordLabel : 'Password',

/**
* Password field name
*
* @type {String}
*/
passwordField : 'password',

/**
* Password field validation
*
* @type {String}
*/
passwordVtype : 'alphanum',

/**
* Language field label
*
* @type {String}
*/
languageLabel : 'Language',

/**
* Language field name
*
* @type {String}
*/
languageField : 'lang',

/**
* RememberMe field label
*
* @type {String}
*/
rememberMeLabel : 'Remember me on this computer',

/**
* RememberMe field name
*
* @type {String}
*/
rememberMeField : 'rememberme',


/**
* SSL field label
*
* @type {String}
*/
sslLabel : 'SSL Connection',

/**
* SSL field name
*
* @type {String}
*/
sslField : 'ssl',

/**
* Forgot Password field label
*
* @type {String}
*/
forgotPasswordLabel : 'Forgot Password?',

/**
* Enable Virtual Keyboard for password
*
* @type {Bool}
*/
enableVirtualKeyboard : false,

/**
* Force Virtual Keyboard for password entry
* If true, also sets enableVirtualKeyboard property to true
*
* @type {Bool}
*/
forceVirtualKeyboard : false,

/**
* encrypt password using SHA1
*
* @type {Bool}
*/
encrypt : false,

/**
* Salt prepended to password, before encryption
* If encrypt property is false, salt is not used
*
* @type {String}
*/
salt : '',

/**
* Forgot Password hyperlink
*
* @type {String}
*/
forgotPasswordLink : 'about:blank',

/**
* Request url
*
* @type {String}
*/
url : '/auth/login',

/**
* Forward url
*
* @type {String}
*/
forward : '/',

/**
* Path to images
*
* @type {String}
*/
basePath : '/',

/**
* Form submit method
*
* @type {String}
*/
method : 'post',

/**
* Open modal window
*
* @type {Bool}
*/
modal : false,

/**
* CSS identifier
*
* @type {String}
*/
_cssId : 'ux-LoginDialog-css',

/**
* Head info panel
*
* @type {Ext.Panel}
*/
_headPanel : null,

/**
* Form panel
*
* @type {Ext.form.FormPanel}
*/
_formPanel : null,

/**
* The window object
*
* @type {Ext.Window}
*/
_window : null,

/**
* Set the LoginDialog message
*
* @param {String} msg
*/
setMessage : function (msg) {
this._headPanel.body.update(msg);
},


/**
* Show the LoginDialog
*
* @param {Ext.Element} el
*/
show : function (el) {
this._window.show(el);
},

/**
* Hide the LoginDialog
*/
hide : function () {
this._window.hide()
},

/**
* Hide and cleanup the LoginDialog
*/
destroy : function () {
this._window.hide();
this.purgeListeners();
Ext.util.CSS.removeStyleSheet(this._cssId);
var self = this;
delete self;
},

/**
* Cancel the login (closes the dialog window)
*/
cancel : function () {
if (this.fireEvent('cancel', this))
{
this.hide();
}
},

/**
* Cancel the login (closes the dialog window)
*/
reset : function () {
if (this.fireEvent('reset', this))
{
this._formPanel.getForm().reset();
}
},

/**
* Submit login details to the server
*/
submit : function () {
var form = this._formPanel.getForm();

if (form.isValid())
{
Ext.getCmp(this._loginButtonId).disable();
if(Ext.getCmp(this._cancelButtonId)) {
Ext.getCmp(this._cancelButtonId).disable();
}
if(Ext.getCmp(this._resetButtonId)) {
Ext.getCmp(this._resetButtonId).disable();
}
if(this.encrypt) {
Ext.getCmp(this._passwordId).setRawValue(
Ext.ux.Crypto.SHA1.hash(this.salt + Ext.getCmp(this._passwordId).getValue())
);
}

if (this.fireEvent('submit', this, form.getValues()))
{
this.setMessage (this.message);
form.submit ({
url : this.url,
method : this.method,
waitMsg : this.waitMessage,
success : this.onSuccess,
failure : this.onFailure,
scope : this
});
}
}
},


/**
* On success
*
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
*/
onSuccess : function (form, action) {
if (this.fireEvent('success', this, action)) {
// enable buttons
Ext.getCmp(this._loginButtonId).enable();
if(Ext.getCmp(this._cancelButtonId)) {
Ext.getCmp(this._cancelButtonId).enable();
}
if(Ext.getCmp(this._resetButtonId)) {
Ext.getCmp(this._resetButtonId).enable();
}

var msg = '';
if (action.result && action.result.message) msg = action.result.message || this.successMessage;
else msg = this.successMessage;
this.setMessage (this.message + '<br /><span class="success">' + msg + '</span>');
this.fireEvent('success', this, action, msg);

if(this.forward) {
window.location.href = this.forward;
} else {
this.hide();
}
}
},


/**
* On failures
*
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
*/
onFailure : function (form, action) {
// enable buttons
Ext.getCmp(this._loginButtonId).enable();
if(Ext.getCmp(this._cancelButtonId)) {
Ext.getCmp(this._cancelButtonId).enable();
}
if(this.encrypt) {
Ext.getCmp(this._passwordId).setRawValue('');
}

Ext.getCmp(this._passwordId).focus(true);

var msg = '';
if (action.result && action.result.message) msg = action.result.message || this.failMessage;
else msg = this.failMessage;
this.setMessage (this.message + '<br /><span class="error">' + msg + '</span>');
this.fireEvent('failure', this, action, msg);
}

});

Taunus
25 Nov 2009, 1:50 AM
OK, this question might seem TOTALLY stupid to all you guys out there, but I'm new to this, so I really appreciate your responses...

I got the login box going - which was actually completely easy and I REALLY thank the developer for that :-). I even got it going that in case of a wrong username/password, which is checked in a separate php against a mySQL DB, the failure message is sent to the dialog box.

But in case of a successful login, I want this separate php (i.e. the one which is specified in the script where the login data should be sent to) to forward me to another PHP page. I tried header("Location:xxx"), but this didn't work out at all...

Can someone help me...?

Thanks a lot from Germany !!!
Daniel

raphac
25 Nov 2009, 7:48 AM
demon222 (http://www.extjs.com/forum/member.php?u=24810)
Can you highlight the changes?

sumit.madan
27 Nov 2009, 12:50 PM
But in case of a successful login, I want this separate php (i.e. the one which is specified in the script where the login data should be sent to) to forward me to another PHP page.
Set a listener for the login dialog's success event and use the javascript location property to navigate to a different URL:

window.location = "http://www.google.com";

Max_nl
27 Jan 2010, 1:52 PM
Just spent some time figuring why someone with a "!" in his password had problems logging in...
Turns out that only alphanumeric passwords are accepted by default:



passwordVtype : 'alphanum',


Is there any specific reason for this?

I understand that this is a configurable option.
But I still think strong passwords should be accepted by default.

sumit.madan
27 Jan 2010, 11:05 PM
Just spent some time figuring why someone with a "!" in his password had problems logging in...
Turns out that only alphanumeric passwords are accepted by default:
Is there any specific reason for this?

Its very common to have the password field validation configured as alphanum, a few reasons why from other developers:


In Europe, you have a different keyboard every few miles. Good luck finding your special character on an Italian keyboard. Or a Greek one. Or Turkish.

The only keys which are probably there are the alphanumeric keys and most people will be able to find their way around them, even if a couple of the keys will be swapped (Y and Z, for example).

In a web app, the developers are not really able to make sure that umlauts survive the transfer from the form to their backend. It would be great if all browser would simply send UTF-8 but most backends can't handle UTF-8 without some careful tuning, either.

Lastly, people are notoriously bad at remembering passwords. Forcing them to use "honey" instead of "jh(/&DFA93475" greatly reduces the rate of calls for support

Max_nl
28 Jan 2010, 4:57 PM
Its very common to have the password field validation configured as alphanum, a few reasons why from other developers:

Your arguments only apply to accented characters and the like.

I'm talking about characters that are part of the 7-bit ASCII set like: !@#%^&*()-_
Those are the same no matter whether you use UTF8 or an ASCII based character set.
They also tend to be availiable on every keyboard that has the latin character set, and even if they were not, isn't that what the virtual keyboard is for?! :)


If you want to prevent users from choosing such passwords, it should be done when the account is created, not when the user is trying to login.

sumit.madan
29 Jan 2010, 12:28 PM
Your arguments only apply to accented characters and the like.

I'm talking about characters that are part of the 7-bit ASCII set like: !@#%^&*()-_
Those are the same no matter whether you use UTF8 or an ASCII based character set.
They also tend to be availiable on every keyboard that has the latin character set, and even if they were not, isn't that what the virtual keyboard is for?! :)


If you want to prevent users from choosing such passwords, it should be done when the account is created, not when the user is trying to login.
If you want to exclude the accented characters but include the special characters in 7-bit ASCII set, you have to create your own custom vtype. Then you might as well specify it in the passwordVtype configuration option.

Yes, the login passwordVtype has to match the registration form's passwordVtype. As this is login dialog extension, I don't have to match it to any specific registration form's vtype. I can only specify defaults which are the most common options. Matching it with the registration form is up to you.

demon222
9 Feb 2010, 1:48 AM
bug for IE class override onRender




onRender: function(ct, position){
Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
if(this.inputValue !== undefined){
this.el.dom.value = this.inputValue;
}else{
this.inputValue = this.el.dom.value;
}

this.innerWrap = this.el.wrap({
cls: this.innerCls
});
this.wrap = this.innerWrap.wrap({
cls: 'x-form-check-wrap'
});
if(this.boxLabel){
this.labelEl = this.wrap.createChild({
tag: 'label',
htmlFor: this.el.id,
cls: 'x-form-cb-label',
html: this.boxLabel
});
}else{
this.innerWrap.addClass('x-form-check-no-label');
}
// Need to repaint for IE, otherwise positioning is broken!!!!!!!!!!!!!!
if(Ext.isIE){
this.wrap.repaint();
}
this.resizeEl = this.positionEl = this.wrap;
},



Regards

albeva
17 Feb 2010, 7:37 AM
hey sumit.madan great work with extending my plugin. Working on a new project using extjs 3 and this update of yours works great :)

I made a small addition though: when you hit the enter it will highlight the next field ( username -> password -> submit() )

I'm not posting whole source (as I've modified it in other project specific ways), but here is the excerpt
var keys = [{
key : [10,13],
handler: function(){
var uf = Ext.getCmp(this._usernameId);
var pf = Ext.getCmp(this._passwordId);
if (uf.getValue() == '') {
uf.focus();
} else if (pf.getValue() == '') {
pf.focus();
} else {
this.submit();
}
},
scope : this
}]; Just copy and replace. you can also add this to the mainstream release if you wish

stefan.riedel-seifert
18 Feb 2010, 2:42 AM
... on IE6/ExtJS3.1.1: there is a problem with the rendering of the 'Remember me on this computer' checkbox. Also is will be a nice feature, to show the user the last type character, to avoid wrongly typed passwords. This feature can be found an the iPhone/iPod touch for example.

Also very useful can be a configurable option for a registration link.
In an enterprise-scenario, you can have several applications. It would be nice, to have a configurable option to place a kind of an application logo anywhere (for example on the left/right).

Best regards,
Stefan

sumit.madan
21 Feb 2010, 11:58 AM
@albeva
Thanks for the compliment. Glad you find it useful. I should probably update the extension for ExtJS 3.1.1. I'll integrate your changes then.

@stefan.riedel-seifert
If you're using the themed checkboxes, their DOM structure was changed in ExtJS 3.1 and IE6 will not display it correctly.
Apply the following CSS fixes and you've to change the checkbox width : 13 in the Login Dialog Source:


.ext-ie6 .x-form-check-wrap input, .ext-border-box .x-form-check-wrap input {
margin-top: 0px;
}

.x-form-check-wrap input {
vertical-align: baseline;
}

stefan.riedel-seifert
22 Feb 2010, 2:43 AM
Hi,

your suggestions solved the problem not at all. I have changed the overrides.css by adding the following at the bottom:

.ext-ie6 .x-form-check-wrap input, .ext-border-box .x-form-check-wrap input {
margin-top: 0px;
}

.x-form-check-wrap input {
vertical-align: baseline;
}

.ext-ie6 .x-form-checkbox-inner{
margin-top: 6px;
}

Now the visual appearance is perfect.

Thank you for your help.
Stefan

wizard580
24 Feb 2010, 3:18 AM
great! so great!....

can you merge alll good changes and post updated archive? please :D

j_mmontero
5 Mar 2010, 6:13 AM
Great extension!! Good Job!

I have a question. When I click the keyboard graphic and hit the ESC key, it hides the window not the keyboard.

I can't figure out how to fix it.

Testing on EXTJS 3.0

talha06
6 Mar 2010, 1:32 AM
Thank you so much, it's really amazing.. But I want ask that how can I control it's textfield, labels, etc. I want to change labels' texts when user changes any other language. To do this I have to reach both combobox and textfields (so their labels).. Can someone help me, thanx..

Max_nl
25 Jul 2011, 10:42 AM
Ayone tried to port this one to Ext.js 4 yet?


Got to the point where it throws a nice long stack trace on calling the show( ) method. :(



el is null
onRender(container=Object { dom=div#ext-gen1058.x-panel-body, id="ext-gen1058", more...}, position=undefined)ext-all-debug.js (line 18882)
render(container=Object { dom=div#ext-gen1058.x-panel-body, id="ext-gen1058", more...}, position=3)ext-all-debug.js (line 18808)
renderItem(item=Object { initialConfig={...}, xtype="box", more...}, target=Object { dom=div#ext-gen1058.x-panel-body, id="ext-gen1058", more...}, position=3)ext-all-debug.js (line 15670)
renderItems(items=[Object { initialConfig={...}, xtype="textfield", more...}, Object { initialConfig={...}, xtype="textfield", more...}, Object { initialConfig={...}, xtype="box", more...}, 3 more...], target=Object { dom=div#ext-gen1058.x-panel-body, id="ext-gen1058", more...})ext-all-debug.js (line 15634)
renderChildren()ext-all-debug.js (line 15618)
renderChildren()ext-all-debug.js (line 28110)
afterRender()ext-all-debug.js (line 18927)
callParent(args=undefined)ext-all-debug.js (line 2833)
afterRender()ext-all-debug.js (line 27278)
callParent(args=undefined)ext-all-debug.js (line 2833)
afterRender()ext-all-debug.js (line 28098)
render(container=Object { dom=div#ext-gen1054.x-box-inner, id="ext-gen1054", more...}, position=1)ext-all-debug.js (line 18822)
renderItem(item=Object { initialConfig={...}, region="center", more...}, target=Object { dom=div#ext-gen1054.x-box-inner, id="ext-gen1054", more...}, position=1)ext-all-debug.js (line 15670)
callParent(args=[Object { initialConfig={...}, region="center", more...}, Object { dom=div#ext-gen1054.x-box-inner, id="ext-gen1054", more...}, 1])ext-all-debug.js (line 2833)
renderItem(item=Object { initialConfig={...}, region="center", more...}, target=Object { dom=div#ext-gen1054.x-box-inner, id="ext-gen1054", more...})ext-all-debug.js (line 31740)
renderItems(items=[Object { initialConfig={...}, baseCls="x-plain", more...}, Object { initialConfig={...}, region="center", more...}], target=Object { dom=div#ext-gen1054.x-box-inner, id="ext-gen1054", more...})ext-all-debug.js (line 15634)
renderChildren()ext-all-debug.js (line 15618)
beforeLayout()ext-all-debug.js (line 15612)
callParent(args=[])ext-all-debug.js (line 2833)
beforeLayout()ext-all-debug.js (line 27919)
beforeLayout()ext-all-debug.js (line 82413)
layout()ext-all-debug.js (line 15596)
doContainerLayout()ext-all-debug.js (line 16021)
afterLayout(width=420, height=280, isSetSize=true, layoutOwner=undefined)ext-all-debug.js (line 16034)
layout()ext-all-debug.js (line 15602)
doComponentLayout(width=420, height=280, isSetSize=true, callingContainer=undefined)ext-all-debug.js (line 20285)
setSize(width=420, height=280)ext-all-debug.js (line 20181)
afterRender()ext-all-debug.js (line 18921)
callParent(args=undefined)ext-all-debug.js (line 2833)
afterRender()ext-all-debug.js (line 27278)
callParent(args=undefined)ext-all-debug.js (line 2833)
afterRender()ext-all-debug.js (line 28098)
callParent(args=undefined)ext-all-debug.js (line 2833)
afterRender()ext-all-debug.js (line 63503)
render(container=Object { dom=body#ext-gen1009.x-body, id="ext-gen1009", more...}, position=undefined)ext-all-debug.js (line 18822)
doAutoRender()ext-all-debug.js (line 18784)
show(animateTarget=undefined, cb=undefined, scope=undefined)ext-all-debug.js (line 27567)
callParent(args=[undefined])ext-all-debug.js (line 2833)
show()ext-all-debug.js (line 28491)
show()ext-login.js (line 1694)
el = undefined

chrisV_G
23 Apr 2013, 4:25 AM
hello, I want to know how to implement it, i put the zip content in the examples folder does not work, I'm new to extjs and I would like to know how to implement this


thanks