PDA

View Full Version : autocomplete login form from browser



Richie1985
23 May 2013, 8:32 AM
hi,

when is use a extjs 4 form to login the browser (firefox,ie, chrome) never ask me to save the username and password.

how can i do this?

thx!

friend
23 May 2013, 8:56 AM
I usually add a checkbox below the login/password fields, where the checkbox is labeled 'Remember login'. When the user clicks the Login button, I use Ext.util.Cookies.set('lastLogin', <loginNameHere>) to store the last login.

In the afterrender event of your Login window/form, you check for the existence of this cookie/value and restore the login name and checkbox state.

I don't store the password via a cookie for security reasons.

Otherwise, you can rely on most modern browser's native 'remember form data' feature, where the user can choose to enable/disable the feature.

Richie1985
23 May 2013, 9:15 AM
thx for your reply,

i also dont wont to save the password in a cookie! i wont to use the browser based password safe. but i dont know how?!?

friend
23 May 2013, 9:29 AM
I don't think that the native browser support for remembering form data is scriptable or controllable by applications. It can typically only be enabled/disabled by a user.

Richie1985
23 May 2013, 11:40 AM
sorry i dont understand this, for example here the login page at http://www.sencha.com/login. i saved the username and password in my firefox and everytime i want login the username and password is prefilled.

the same i want in my extjs project.

friend
23 May 2013, 11:48 AM
They're using cookies. Look at the cookies for sencha.com and you'll see bb_userid and bb_password, noting that they encrypt the password.

Richie1985
23 May 2013, 10:45 PM
sorry but im realy confused, i look at the cookies tab in firebug and dont find this cookies (only bb_lastvisit, bb_lastactivity, etc).

i only find my username and password in the browser password database (firefox at Settings -> Security -> Saved Passwords)

i found this link:

http://stackoverflow.com/questions/11965919/browser-does-not-remember-password-during-login

but it also wont work :(

friend
24 May 2013, 5:05 AM
As far as I know (and I could very well be wrong), a browser's ability to remember form data is separate and distinct from Cookies. Firefox in particular maintains a SQLLite database instance for persistent storage of browser settings.

I would think that a particular site can still do anything it likes with Cookies, unless your browser's cookie handling settings have been modified.

As an experiment, disable your browser's form data capture feature, flush any Sencha.com cookies, restart the browser, login to Sencha.com using the 'Remember Me' feature, then examine the newly created Sencha.com cookies for login info.

Also, add test logic to your app using Ext.util.Cookies.set/get and see if that works for you; if so, then experiment with turning your browser's 'remember form data' feature on/off.

Richie1985
24 May 2013, 6:23 AM
for tests i delete the sencha.com entry in the password database. when i now relogin to sencha.com this browser popup ask me to save password:

43979

the same popup when i login to facebook, ebay, amazon and so on.

all that i want is the same pop up for my extjs login page....

Daniil
27 Jan 2014, 8:47 PM
This appears to be working with ExtJS 4.2.1 in IE9, Chrome and FireFox.

Example

<!DOCTYPE html>
<html>
<head>
<title>Remember password</title>

<link rel="stylesheet" href="../resources/css/ext-all.css" />

<script src="../ext-all-dev.js"></script>

<script>
Ext.onReady(function () {
Ext.create("Ext.form.field.Text", {
renderTo: "form1",
id: "login",
listeners: {
afterrender: function() {
this.inputEl.set({ autocomplete: 'on' });
}
}
});
Ext.create("Ext.form.field.Text", {
renderTo: "form1",
id: "password",
inputType: "password",
listeners: {
afterrender: function() {
this.inputEl.set({ autocomplete: 'on' });
}
}
});
Ext.create("Ext.button.Button", {
renderTo: "form1",
text: "Submit",
handler: function() {
Ext.fly("submitButton").dom.click();
}
});
});
</script>
</head>
<body>
<form id="form1" method="post">
<input id="submitButton" type="submit" style="display: none;" />
</form>
</body>
</html>

SebTardif
30 Oct 2014, 9:04 AM
It's not much Ext JS because it's completely ignoring layout. Anyone did get a fully Ext JS form compatible with autocomplete?