A login form before entering into the App?

[Colorado143]

Hello Sencha Dev,
Does anyone know where I can find a good example of a login/register form being used right before the actual app? Much like "The Watch List" app where a user must login with Facebook, but without facebook... I'm looking for a way to have a user login and have a PHP script check against the login credentials through a database, and if it exist, it would let the user into the app and do whatever the app does. If not, it would ask the user to be registered instead.

Thank you for your time!
Steven

[jerome76]

I know Parse has a good API for accessing databases.

If you are looking for a short code example, this is what I use (I'll put it in a fiddle demo):
Demo: http://www.senchafiddle.com/#kbCn5

Ext.define('App.view.LoginPanel', {
    extend: 'Ext.Container',
    config: {
        items: [{
            docked: 'top',
            xtype: 'titlebar',
            title: 'App Title',
        },
        {
            xtype: 'fieldset',
            width: 380,
            margin: 'auto',
            items: [{
                xtype: 'textfield',
                label: 'Username:',
                listeners: {
                    keyup: function(fld, e){
                        //if user hits return button or keyboard-down button
                        if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                            e.stopEvent();
                            fld.element.dom.blur(); //hide keyboard
                            window.scrollTo(0,0); // Scroll to top (for android)

                            App.checkLogin();//declared elseware
                        }
                    }
                }
            },
            {
                xtype: 'passwordfield',
                label: 'Password:',
                listeners: {
                    keyup: function(fld, e){
                        //if user hits return button or keyboard-down button
                        if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10) {
                            e.stopEvent();
                            fld.element.dom.blur(); //hide keyboard
                            window.scrollTo(0,0); // Scroll to top (for android)

                            App.checkLogin();//declared elseware
                        }
                    }
                }
            }]//end fieldset items
        },
        {
            xtype: 'button',
            itemId: 'loginButton',
            width: 150,
            text: 'Log In',
            margin: '15px auto',
            ui: 'action',
            handler: function() {
                App.checkLogin();//declared elseware
            }
        }]//end panel items
    }
});

Hope that get's you started. I don't want to give up everything

[Colorado143]

Jerome76,
Thank you very much for the head start! It's almost exactly what I'm looking for, and it did get me started... only thing is, I don't know how to validate the form and send a variable back to the Sencha Touch framework which should tell me whether the user should login or not... and if the user should login, then how do I make it so that it gets past the login page and into the "full" app? It just seems like someone would have done this already and might've had a tutorial on it... if not, I'll just keep working my way through.

Thanks again for your help!

[jerome76]

You can use Ajax requests, which are on the Docs, to call outside databases which can return you values. you can either validate them on your end, or on the database side, but there are many ways to do it so I can't give you a general answer.

If the user is validated, you can simply switch to another fullscreen view to emulate logging in to the app.

[Colorado143]

Hmm, ok, I'm still a little lost... probably because I'm a total newbie at Sencha .... I just learned what a model view controller pattern is and I haven't quite figured out how to do the layout for the logins and logouts. I've seen the examples using the Ajax request and it looks rather simple, but I'm not sure how to call the Ajax functions... for example, I don't understand where I would declare "App.checkLogin();" and get the results using the MVC pattern. I'm more of an Expert on PHP and CSS rather than Javascript, so it's a little bit of a learning curve for me. Are the documents of Sencha Touch 2 the only way to learn the basics and get a grasp of the whole concept? The only text book I've already read and found was the "Sencha Touch Mobile Framework", by Bryan Patrick Johnson (http://www.amazon.com/Sencha-Touch-M...sencha+touch+2) and yet it's already outdated. Are there any other good sites, or tutorials, or App examples that would help me get a grasp of Sencha? I know this site provides training and classes for me to take, but I'm a developer of one and I can't afford a training course which costs thousands of dollars…

[jerome76]

You can call Ext.Ajax functions by using something like this:

Ext.Ajax.request({
    url: 'path/to/local/file.php', //or server-hosted url (using example: 'http://etc.com/...etc')
    timeout: 6000, //6 second timeout (not needed)
    success: function(response){
        //...do login here depending on response
    },
    failure: function(response){
        //...not right credentials
    },
    callback: function(options, success, response){
        //...not necessary function, just for example purposes here
    }
});

Basically my checkLogin() function makes an Ajax request and returns me different XML depending on if the login on the serverside was successful or not. If the xml returned a certain value, I would proceed to run the code to create the main app view, otherwise I would alert to the user that incorrect credentials were entered.

[Colorado143]

Ok, I've never customized my own function in Sencha before ... can you show me how to customize my own function, such as checkLogin(), and include the the ajax request?

[jerome76]

Say you have a loginPanel defined like below, you can include a custom function right with it:

Ext.define('MyApp.view.LoginPanel', {
    extend: 'Ext.Panel',
    config: {
        //...
    },
    checkLogin: function(){
        //do Ext.Ajax.request here
        //you can include any other JavaScript or Sencha Touch code here as well
    }
});

You can call the function by referencing the login panel.

var loginPanel = Ext.ComponentQuery.query('#loginPanel')[0];
//there are other methods of referencing objects, this is one way I use
loginPanel.checkLogin();

[Colorado143]

Thank you so much! For those of you who were wondering, I accidentally clicked on the "vote-down" because I had no idea that it was a voting poll... I tried changing it back to vote up, but it won't let me! Sorry, whoever is in charge of this website, please make it go up - not down. This person (jerome76) did a fantastic job explaining it to me.

[jerome76]

Haha it's okay. Just mark it as the Best Answer so the thread is answered.