Best way to display 'invalid username or password' error on a login form

[cflynn07]

I have a login form, just a username and password field. I'm wondering what the best way to display an 'invalid username or password' message that would be returned from the server on form submission. Is there some kind of text-message I can present under the password field to display this error? I don't think it makes sense to use an alert popup.31501

Ext.define('CS.view.ViewLogin',{ extend: 'Ext.panel.Panel',
alias: 'widget.viewlogin',
layout: {
type: 'vbox',
align: 'center',
pack: 'start'
},
items: [{
flex: 1,
border: false
},{
xtype: 'form',
url: '/index.php/auth',
baseParams: {
csrf_token: Ext.util.Cookies.get('ci_csrf'),
cs_method: 'user_login'
},
width: 300,
layout: 'anchor',
title: 'Login',
defaults: {
margin: '5 5 5 5'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
inputType: 'text',
name: 'username'
},{
xtype: 'textfield',
fieldLabel: 'Password',
inputType: 'password',
name: 'password'
}],
buttons: [{
text: 'Reset'
},{
text: 'Submit'
}]
},{
flex: 2,
border: false
}]
});

[friend]

I typically use an Ext.window.Window to house my login form, where I add an empty panel directly beneath the login form. On a failed login, I update the html attribute of the panel with a bold, red text message stating 'Unable to login. Bad username or password.' And yes, it's bad practice to use inline CSS; I did this for simplicity/clarity.




Ext.create('Ext.window.Window', {
title: 'Login',
items : [{
xtype: 'form',
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 60
},
items: [{
xtype: 'textfield',
allowBlank: false,
enforceMaxLength: 20,
fieldLabel: 'Login',
itemId: 'loginField',
maxLength: 20,
name: 'j_username',
selectOnFocus: true
},{
xtype: 'textfield',
allowBlank: false,
enforceMaxLength: 20,
fieldLabel: 'Password',
inputType: 'password',
maxLength: 20,
name: 'j_password'
},{
xtype: 'container',
bodyPadding: 5,
border: 0,
frame: true,
itemId: 'msgPanel'
}],
buttons: [{
text: 'Login',
width: 60,
handler: function(button, event) {
button.up('window').down('#msgPanel').update('<span style="color: red;">Bad login or password.</span>')
}
}]
}]
}).show()