Building Sencha Touch 2 login system

Question

I am trying to build a multi log in system using Sencha Touch 2, were the user have to select if he is an AGENT OR FOLLOWER. so far i have been able to come up with a simple log in form. with no function. my code is just like this:

Ext.define("ikhlas.view.login", {
extend: 'Ext.Panel',
xtype: 'loginpanel',

    config:{
        title: 'Login',
        iconCls: 'more',
        styleHtmlContent: true,

    layout:{
        type: 'vbox',

        },

    items: [
        {
       xtype: 'fieldset',
       iconCls: 'add',

    items: [

        {
            xtype: 'emailfield',
            name: 'email',
            placeHolder: 'Username'
        },

        {
            xtype: 'passwordfield',
            name: 'password',
            placeHolder: 'Password'
        },

        {
            xtype: 'selectfield',
            label: 'User Type',
            options: [
            {text: 'Agent',  value: '0'},
            {text: 'Follower', value: '1'}
            ]
        }

   ]},
        {
            xtype: 'button',
            text: 'LogIn',
            ui: 'confirm',
            width: '40%',
            height: '7%',
            flex: 1,
            left: '55%',
            action: 'submitContact'
        },
        {
            xtype: 'button',
            text: 'Forgot Username',
            ui: 'confirm',
            width: '41%',
            height: '4%',
            top: '90%',
            flex: 1,
            action: 'ForgotUsername'   
        },
        {
            xtype: 'button',
            text: 'Forgot Password',
            ui: 'confirm',
            width: '40%',
            height: '4%',
            top: '90%',
            flex: 1,
            left: '47%',
            action: 'ForgotPassword'  
        },
    ]}
});

Now i will like to know how do i validate the user information (user name and password) from an API(a url will be given) so as to confirm the login username and password are correct before they can be allowed to access the application. Secondly i will like to throw an error message if the username or password is incorrect.

Thiem Nguyen Thiem Nguyen · Accepted Answer · 2012-05-22T18:28:20

It's obvious that you have to authenticate server-side. Assuming that you've already had one, so the remaining is not very difficult.

The most simple way is just send an Ext.Ajax.request:

Ext.Ajax.request({
        url: your_API_url,
        params: {
                       username: your_username_from_formpanel, 
                       password: your_password_from_formpanel
                    },
        timeout: 10000, // time out for your request

        success: function(result) {
                      // here, base on your response, provide suitable messages
                      // and further processes for your users
        },

        failure: function(){
            Ext.Msg.alert("Could not connect to server.");
        }   
    });

Note: for security reasons, you should encrypt your user's password before sending it to server.

Building Sencha Touch 2 login system

1 Answers