Then, in a flash of inspiration, I decided to try use extjs. It seems there aren't a lot of examples out there of integrating extjs and spring security (formally known as acegi security for the spring framework), so I decided to share mine.
The only problem I face is that when using the ext.Window, I cannot get the username field to get focus. If you have a solution for that, please let me know (I am using extjs 2.0.2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib prefix='c' uri='http://java.sun.com/jstl/core_rt' %>
<%@ page import="org.springframework.security.ui.AbstractProcessingFilter" %>
<%@ page import="org.springframework.security.ui.webapp.AuthenticationProcessingFilter" %>
<%@ page import="org.springframework.security.AuthenticationException" %>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Emit 1.0</title>
<link type="text/css" rel="stylesheet" href="Emit.css">
<link rel="stylesheet" type="text/css" href="css/gxt-all.css" />
<script type="text/javascript" src="javascript/ext-base.js"></script>
<script type="text/javascript" src="javascript/ext-all.js"></script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
/*var viewport = new Ext.Viewport({
layout:'fit',
width:300,
height:150,
plain:true,
items: [{
contentEl: 'loginForm'
}]
});*/
var loginForm = new Ext.form.FormPanel({
formId: 'appLoginForm',
labelWidth: 80,
frame:true,
title:'Emit 1.0 - please login',
defaultType: 'textfield',
monitorValid: true,
keys:[
{
key : Ext.EventObject.ENTER,
fn: function() {
loginForm.getForm().submit();
}
}],
standardSubmit: true,
items:[
{
id: 'message',
xtype: 'box',
autoEl: {cn: '<font color="red"><c:if test="${!empty SPRING_SECURITY_LAST_EXCEPTION.message}">Login failed, please try again.</c:if></font>'}
},
{
fieldLabel: 'Username',
name: 'j_username',
allowBlank: false
},{
fieldLabel: 'Password',
name: 'j_password',
allowBlank: false,
inputType: 'password'
},
new Ext.form.Checkbox({
boxLabel:'Remember me for two weeks',
hideLabel: true,
name:'_spring_security_remember_me',
inputType:'checkbox'
})
],
buttons:[
{
text: 'Login',
type: 'submit',
id: 'submitButton',
formBind: true,
border: true,
handler: function() {
loginForm.getForm().submit();
}
},{
text: 'Reset',
handler: function() {
loginForm.getForm().reset();
}
}]
});
// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
modal: true,
layout:'fit',
width:300,
height:160,
closable: false,
resizable: false,
draggable: false,
plain: true,
border: false,
items: [loginForm]
});
win.show();
loginForm.getForm().findField('j_username').getEl().focus(true);
loginForm.getForm().getEl().dom.action = "j_spring_security_check";
});
</script>
</head>
<body>
<div id="loginForm"></div>
</body>
</html>
ke'?
ReplyDeleteWhat is the advantages of using this (extjs) approach?
ReplyDeleteCan you give us an overview on Spring security and GWT or whatever is appropriate pls? Another blog entry.
Thx