1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    cocochambo is on a distinguished road

      0  

    Default Unanswered: Sencha Touch with login form

    Unanswered: Sencha Touch with login form


    Hello staff, i'm building an MVC app with a login form. I'm stuck that I dont know to submit a form and then validate from server side (ASP.net). Should it be done at View or Controller? If user is authenticated, it should proceed to second view. Do you have an example that I can give me a direction ?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Views shouldn't have logic in them... then should just setup what that particular view will look like. The controller is where your application logic will be in, this case the submitting of the form and then handling the response to see if you should move to the next view or not.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Answers
    102
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    I would highly suggest having your login form as light as possible, which means possibly even without Sencha Touch. I like my login forms to launch as fast as it can, which means that one ASP view will be the login form, and one will be the app.

    I do this because the server can manage who can get the application code and force redirects to the login page if/when the session times out. You don't want that stuff in the client.

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Location
    London, ON
    Posts
    5
    Vote Rating
    0
    revnoah is on a distinguished road

      0  

    Default Also interested in a good pattern for this

    Also interested in a good pattern for this


    I agree that a clear example of this process would be helpful. There would certainly be a preferred way of displaying a login/registration form prior to attempting to loading other view data, and knowing that this logic should be in the controller doesn't adequately answer the question. This is probably the biggest architectural hurdle I've run into and a straightforward example would be extremely useful.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    67
    Answers
    3
    Vote Rating
    1
    Soenhay is on a distinguished road

      0  

    Default


    In the login button tap event in the controller just get the login info and do an Ext.Ajax.request and handle the login logic in the asp file.
    In the success block of the ajax request test the response for some value that signifies a successful login and then change the view.

    Code:
    Ext.Ajax.request({
                url: 'yourAsp.aspx',
                params: { action: 'login', username: Username, password: Password},
                method: 'GET',
                success: function (response, opts) {
    // if successful login change view
    //else notify user of invalid input etc...
    ...

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Location
    London, ON
    Posts
    5
    Vote Rating
    0
    revnoah is on a distinguished road

      0  

    Default


    Thanks for the very quick response. I suppose I should've been clearer as the original poster is actually asking a few things. I found submitting a basic form was very well documented and straightforward, and I was able to post data and receive a JSON response from my server after writing a few custom php functions.

    What I'm looking for is how to construct the controller to display a login form if the user can not be authenticated immediately using a saved username and password (localstorage). I based my controller off of the Presidents example, which had a lot of good code to help learning how to use lists. My main view loads a tab panel that includes a list view, a form view and a map view. The username and password would be sent along with any of those requests. The main issue is that I want to force the user to login successfully before they can get to the point of viewing the main view.

    As per the documentation, I tried applying a "before filter" to the controller but I don't believe it's structured properly, since I'm not hitting any of my log outputs.

    Here is the code for the controller. I didn't include the views but from what I understand, they shouldn't factor into this logic anyway and could really contain anything. The main thing is that I want to show the login form if the localstorage variables don't authenticate or aren't set; otherwise, go on to show the main app content.

    Code:
    Ext.define('MyApp.controller.Main', {    extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                mainpanel: 'mainpanel'
            },
            control: {
                'gemlist': {
                    select: 'showDetail'
                }
            },
            before: {
            	mainpanel: 'authenticate' //doesn't do anything, code never gets here
            }
        },
    
    
        authenticate: function(action) {
        	console.log('running authenticate function');
            MyApp.authenticate({
                success: function() {
                	alert('Login Success!');
                    action.resume();
                },
                failure: function() {
                    alert('Not Logged In', "You can't do that, you're not logged in");
                }
            });
        },
        
        showDetail: function(list, record) {
            this.getMain().push({
                xtype: 'gemdetail',
                cls: 'gem-detail-view',
                data: record.getData()
            });
        }
    
    
    });

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Location
    London, ON
    Posts
    5
    Vote Rating
    0
    revnoah is on a distinguished road

      0  

    Default A solution but maybe not the best

    A solution but maybe not the best


    This is what I ended up doing. It's probably not best practices but it works.

    I used the init event in the controller to check the username and password.
    In main controller:
    Code:
    init: function() {
        	//phonegap code to find location
    		var username = window.localStorage.getItem("username");
    		var password = window.localStorage.getItem("password");
    
    
    		//show login if user credentials are unknown
    		if(username == '' || username == undefined || password == '' || password == undefined) {
    	    	this.showLogin();
    		}
        },
        showLogin: function() {
        	
        	var LoginForm = Ext.create("MyApp.view.Login");
        	Ext.Viewport.add(LoginForm);    
        },
    This is within the handler for the login form, in the login view, in the 'success' callback. This was used to close the login form.

    Code:
     //get reference to login panel and delete it                           
    var loginpanel = Ext.ComponentQuery.query('loginpanel');
    if(loginpanel != undefined) {
             Ext.Viewport.remove(loginpanel[0]);
    }