ExtJS: Login with 'Remember me' functionality - ajax

Question

I'm trying to create a simple login window with the very common 'Remember me' functionality. The login validation is done AJAX style, thus the browser won't remember my input.
My approach is to use the built-in state functionality, but how to use it confuses me.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));
...
{
xtype: 'textfield',
fieldLabel: 'User name',
id: 'txt-username',
stateful: true,
stateId: 'username'
}, {
xtype: 'textfield',
fieldLabel: 'Password',
id: 'txt-password',
inputType: 'password',
stateful: true,
stateId: 'password'
}, {
xtype: 'button',
text: 'Validate',
stateEvents: 'click'
}
I know I have to implement the getState method, but on what component (my guess is on the two textfields)? Another thing I fail to realize is, how is my click event on the button connected to the state properties of my textfields?

Answer 1

Don't use state. You are storing the user's password in plain text in the browser's cookies. Anyone who has access to the browser can read it and it is being sent back to the server in every request.
Hopefully you are using some form of server-side sessions and are not depending on the user's authentication information being present in every request to maintain logged-in state. If so, then I recommend taking advantage of the password saving feature built in to most modern browsers to handle remembering of the user for the initial authentication in any given session.
For the browser's password saving feature to work the authentication form must be present in the document when the page is first loaded. Also, the credentials must be submitted by that form in a traditional (non-AJAX) submit which will refresh the entire page.
You can fulfill these requirements while still presenting the form in the ExtJS UI by initially rendering the form hidden into the document and then using the capabilities of ExtJS to commandeer existing HTML elements.
In the document's body put:
<form id="auth-form" action="/url/of/your/login/action" method="POST">
<input id="auth-username" type="text" name="username" class="x-hidden">
<input id="auth-password" type="password" name="password" class="x-hidden">
<input id="auth-submit" type="submit" class="x-hidden">
</form>
Then, in Ext.onReady or at the time you are displaying an authentication form build a panel which makes use of the above form elements:
new Ext.Panel({
el: 'auth-form',
autoShow: true,
layout: 'form',
items: [
{
xtype: 'textfield',
el: 'auth-username',
autoShow: true,
name: 'username',
fieldLabel: 'Username',
anchor: '100%'
},
{
xtype: 'textfield',
el: 'auth-password',
autoShow: true,
name: 'password',
fieldLabel: 'Password',
anchor: '100%'
}
],
buttons: [
{
text: 'Log in',
handler: function() {
Ext.get('auth-submit').dom.click();
}
}
]
});
The exact composition of the form may vary. It may be built into an Ext.Window instance or whatever else. What is important:
The username and password fields make use of the existing input fields through the 'el' and 'autoShow' config properties.
One of the panels containing the fields does the same for the existing form element.
The submission of the form is performed by a simulated click on the existing submit button.

Answer 2

Use with Ajax funcionality:
{
xtype: 'form',
autoEl: {
//normal post for false submit
tag: 'form',
action: "#",
method: 'post'
},
items: [
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
listeners: {
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
}
}
},
{
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
listeners: {
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
},
}
},
{
xtype: 'button',
text: 'Login',
handler: function() {
Ext.Ajax.request(); //login ajax request
Ext.get('falsesubmit').dom.click(); //false submit
},
},
{
//button with submit input for false submit
xtype: 'button',
hidden:true,
listeners: {
afterrender: function() {
this.el.createChild({tag: 'input', type: 'submit', id: 'falsesubmit'});
}
}
}
]
}

Answer 3

This does not work with IE 8. A runtime error is produced. I don't know if it is because I am using Google Frame, but I would like to point out that el is one of the public properties not a config option so I don't believe that Ext was design to work like this. Also in Google Chrome you can select the username but the password does not display. I think this is part of the design of Google Chrome but I have also seen it work correctly on other sites with Google Chrome. I am not using AJAX to submit the form but I like the way the Ext textfields look and I like the Tool tips as well.
I don't see how this way is safer than using a cookie because now matter how you implement it the password is stored on the client machine. Tomorrow I am going to try a html5 client storage solution.
Letting the web browser control this functionally means that different users may have different experiences based on the browser they have access to (talking mainly in how google chrome handles saving passwords).
All in all a very good post thanks.