1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    12
    Vote Rating
    0
    Colorado143 is on a distinguished road

      0  

    Default Answered: A login form before entering into the App?

    Answered: A login form before entering into the App?


    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

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

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


    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

    Code:
    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

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    12
    Vote Rating
    0
    Colorado143 is on a distinguished road

      0  

    Default


    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!

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


    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.

  6. #5
    Sencha User
    Join Date
    May 2012
    Posts
    12
    Vote Rating
    0
    Colorado143 is on a distinguished road

      0  

    Default


    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…

  7. #6
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


    You can call Ext.Ajax functions by using something like this:
    Code:
    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.

  8. #7
    Sencha User
    Join Date
    May 2012
    Posts
    12
    Vote Rating
    0
    Colorado143 is on a distinguished road

      0  

    Default


    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?

  9. #8
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Say you have a loginPanel defined like below, you can include a custom function right with it:
    Code:
    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.
    Code:
    var loginPanel = Ext.ComponentQuery.query('#loginPanel')[0];
    //there are other methods of referencing objects, this is one way I use
    loginPanel.checkLogin();

  10. #9
    Sencha User
    Join Date
    May 2012
    Posts
    12
    Vote Rating
    0
    Colorado143 is on a distinguished road

      0  

    Default


    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.

  11. #10
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


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

Thread Participants: 2

Tags for this Thread