PDA

View Full Version : ExtJS 4, .NET MVC 3 Login form that will allow the browser to save passwords



danpres14
9 Oct 2011, 8:48 PM
I have not been able to figure out how to create a form inside a Viewport that will allow the browser to recognize that a username and password are being submitted. I was able to finally get the login to work but cannot get the browser to save the username and password. Any/all help appreciated.

I am using ExtJS 4 and .NET MVC 3. I would be very interested in having an expert in these areas look at the way I setup my projects and have ExtJS integrated into the .NET server side - it's possible that I'm making this much more difficult than it needs to be.

Thanks,
-Dan

The view:


Ext.define('AccountLogin', {
extend: 'Ext.form.Panel',
alias: 'widget.accountlogin',

initComponent: function() {
// Initialized Reset Account - This is fired before the application launch function!
console.log('Initialized the account login view.');

// Set the form items
this.items = [{
xtype: 'textfield', name: 'userName',
allowBlank: false, fieldLabel: 'User Name'
}, {
xtype: 'textfield', name: 'password',
inputType: 'password', fieldLabel: 'Password'
}];

// Set the form button
this.buttons = [{
text: 'Submit', action: 'onSignIn',
scope: this
}, {
text: 'Cancel',
action: 'onCancel',
scope: this, handler: this.close
}];

this.callParent(arguments);
}
});


The controller:


onAccountLoginSignIn: function(button) {
console.log('The account login\'s sign in button was clicked.');

// Access the form and make sure it is valid
var form = button.up('form').getForm();
if (!form || !form.isValid()) {
return;
}

form.submit({
url: '/Account/Login/', scope: this,
success: function(form, action) {
console.log('The account sign in was successful.');
},
failure: function(form, action) {
console.warn('The account\'s sign in was not successful.');
}
});
}

HTK
11 Oct 2011, 1:27 AM
Try to add 'autocomplete' to your fields by adding it in an afterrender listener.


....
listeners: {
afterrender: function(field) {
field.inputEl.dom.autocomplete = 'on';
}
}

I used something like that in Ext3

danpres14
11 Oct 2011, 7:26 PM
HTK,

Thanks for the reply, however, this does not completely resolve the issue for me. With that change I can see a list of options in the userName field but the browser is still not giving me the option to save the password.

Still looking for an answer.

Thanks,
-Dan

HTK
11 Oct 2011, 11:19 PM
Oh my fault. Thatīs true, but I have to say that I never made this working. I tried something similar in an EXT3 project. It never worked and for what I know there is a thread about it somewhere in the Forum.

dmvasiliev
21 Nov 2011, 4:35 AM
1. Add to form panel:

autoEl: {
tag: 'form'
},
listeners: {
render: function() {
this.el.set({
autocomplete: 'on'
});
}
},



2. Add to login and password fields:

fieldSubTpl: ['<input id="{id}" type="{type}" ', '<tpl if="name">name="{name}" </tpl>', '<tpl if="size">size="{size}" </tpl>', '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 'class="{fieldCls} {typeCls}" autocomplete="on" />', {compiled: true, disableFormats: true}],

Enjoy! :)

Zoso
8 May 2012, 7:12 AM
Did you ever get this to work? I am in the process of setting up a .net mvc3 and ext4 project right now and am working on how to use an ext form for the login screen. Would love any help you can provide. This will be used with a viewport border layout after the login is successful.

Thanks

danpres14
3 Jun 2012, 4:09 PM
I have not found a great solution to this problem. I found a lot of suggestions from calling a javascript function on the form submit action (didn't work for me at the time) to creating an iframe and submitting the form inside the iframe (also didn't work very well). In the end, I embedded a hidden html form in the page and once I verify the credentials using ajax, I then apply the username and password to my hidden form and then invoke the hidden form's submit action. This still leaves me with an extra page load that I believe should not be required. I am still having intermittent problems with timing of the auto-complete fields and pulling those values back up to my form from the hidden form.

All in all - not a good solution and therefore not worth anyone patterning after (IMHO). I'll update again if/when I find something better...