Integrating Sencha Touch Login Form with Spring Security

Previously, I wrote a tutorial on integrating Spring Security and ExtJS login form. Now I am integrating the same Spring Security code with the Sencha Touch login form. Here I will cover the implementation of the form only and 2 use cases; login & logout. The sample code is based on Sencha Touch 1.1.0 and the foloder structure is following the Sencha Touch MVC.

Login

Login – Error

Login – Success

First, lets see the login form and controller. The form has 2 fields, login id & password. When you click the login button, the form is submitted to http://<ownurl>/j_spring_security_check (the defLoginUrl in line 4 is defined in login.jsp).

 Just a note, if you are using Sencha Touch 1.0 then you will need to implement a listener within the form to catch the “submit” and “exception” event. This is because there is a minor defect in the Ext.form.FormPanel submit function and it caused the form to ignore “success” & “failure” function in the submit.

test.views.LoginForm = Ext.extend(Ext.form.FormPanel, {
   scroll: 'vertical',
   fullscreen: true,
   url: defLoginUrl,
   items: [{
      xtype: 'textfield',
      label: 'Login',
      name: 'j_username'
   },{
      xtype: 'passwordfield',
      label: 'Password',
      name: 'j_password'
   }],
   dockedItems: [{
      xtype: 'toolbar',
      dock: 'bottom',
      items: [{
         text: 'Reset',
         handler: function() {
            test.views.loginForm.reset();
         }
      },{
         text: 'Login',
         ui: 'confirm',
            handler: function() {
               Ext.dispatch({
                  controller: test.controllers.loginController,
                  action: 'submit',
                  data: test.views.loginForm
               });
             }
      }]
   }],
   initComponent: function() {
      test.views.LoginForm.superclass.initComponent.apply(this, arguments);
   }
});

 

test.controllers.loginController = new Ext.Controller({
   submit: function(options) {
      var theForm = options.data;
      test.views.loginForm.submit({
         method: 'POST',
         waitMsg: {
            message: 'Processing',
            cls : 'demos-loading'
         },
         scope: this,
         success: function(form, response) {
            window.location = '/';
         },
         failure: function(form, response) {
            Ext.Msg.alert('Warning', response.errorMessage);
         }
      });
   }
});

Depending on the result of the authentication the server side will return a JSON data. The format is

{"username":null,"errorMessage":"Login failed. Try again.","loggedIn":false,"success":false}

Once authenticated, you will see the main page with a logout button. The code is shown below.

test.views.Dashboard = Ext.extend(Ext.Panel, {
   fullscreen: true,
   dockedItems: [{
      xtype: 'toolbar',
      title: 'Dashboard',
      dock: 'top',
      items: [{
         xtype: 'button',
         text: 'Logout',
         ui: 'confirm',
         handler: function() {
            Ext.dispatch({
               controller: test.controllers.dashboardController,
               action: 'logout'
            });
         },
         scope: this
      }]
   }],
   html: '<p>Welcome!</p>',
   initComponent: function() {
      test.views.Dashboard.superclass.initComponent.apply(this, arguments);
   }
});

 

test.controllers.dashboardController = new Ext.Controller({
   logout: function(options) {
      window.location = '/j_spring_security_logout';
   }
});

Hope that is useful. Happy coding!

view demo – download source 

References:

• Customizing Spring Security Login using ExtJS
• Sencha Touch MVC Application – Part 2