Databases
StackOverflow2013
Postsdbo
POSencha Touch 2: Checking cookie on app launch
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSencha Touch 2: Checking cookie on app launch
    text
    copied!<p>I am completely new to developing with the Sencha Touch 2 library. I followed this tutorial to help create a simple login script (<a href="http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application-part-2/" rel="nofollow">http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application-part-2/</a>). The one thing I am unsure about is how to check if the session token exists on the client side so that when they come back to the app the login screen doesn't show if they are authenticated.</p> <p>app.js</p> <pre><code>Ext.application({ name: 'RecruitTalkTouch', views: ['Login', 'MainMenu'], controllers: ['Login'], launch: function () { Ext.Viewport.add([ { xtype: 'loginview' }, { xtype: 'mainmenuview' } ]); } }); </code></pre> <p>Login.js Controller:</p> <pre><code>Ext.define('RecruitTalkTouch.controller.Login', { extend: 'Ext.app.Controller', config: { refs: { loginView: 'loginview', mainMenuView: 'mainmenuview' }, control: { loginView: { signInCommand: 'onSignInCommand' }, mainMenuView: { signOffCommand: 'onSignOffCommand' } } }, onSignInCommand: function(view, username, password) { var me = this, loginView = me.getLoginView(); if(username.length === 0 || password.length === 0) { loginView.showSignInFailedMessage('Please enter your username and password.'); return; } loginView.setMasked({ xtype: 'loadmask', message: 'Signing In...' }); Ext.Ajax.request({ url: 'http://localhost:3000/api/v1/sessions.json', method: 'POST', useDefaultXhrHeader: false, params: { login: username, password: password }, success: function(resp) { var json = Ext.JSON.decode(resp.responseText); if(json.success === "true") { me.sessionToken = json.auth_token; me.signInSuccess(); } else { me.signInFailure(json.message) } }, failure: function(resp) { me.sessionToken = null; me.signInFailure('Login failed. Please try again'); } }); }, signInSuccess: function() { console.log("Signed In"); var loginView = this.getLoginView(), mainMenuView = this.getMainMenuView(); loginView.setMasked(false); Ext.Viewport.animateActiveItem(mainMenuView, this.transition('slide', 'left')); }, signInFailure: function(message) { var loginView = this.getLoginView(); loginView.showSignInFailedMessage(message); loginView.setMasked(false); }, transition: function(type, direction) { return { type: type, direction: direction }; }, onSignOffCommand: function() { var me = this; me.sessionToken = null; Ext.Viewport.animateActiveItem(this.getLoginView(), this.transition('slide', 'right')); } }); </code></pre> <p>Login.js View:</p> <pre><code>Ext.define('RecruitTalkTouch.view.Login', { extend: 'Ext.form.Panel', alias: "widget.loginview", requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Button'], config: { title: 'Login', items: [ { xtype: 'label', html: 'Login failed. Please enter the correct credentials.', itemId: 'signInFailed', hidden: true, hideAnimation: 'fadeOut', showAnimation: 'fadeIn' }, { xtype: 'fieldset', title: 'Login', items: [ { xtype: 'textfield', placeHolder: 'Username', itemId: 'userNameTextField', name: 'userNameTextField', required: true }, { xtype: 'passwordfield', placeHolder: 'Password', itemId: 'passwordTextField', name: 'passwordTextField', required: true } ] }, { xtype: 'button', itemId: 'logInButton', ui: 'action', padding: '10px', text: 'Log In' } ], listeners: [{ delegate: '#logInButton', event: 'tap', fn: 'onLogInButtonTap' }] }, onLogInButtonTap: function() { var me = this, usernameField = me.down('#userNameTextField'), passwordField = me.down('#passwordTextField'), label = me.down('#signInFailed'), username = usernameField.getValue(), password = passwordField.getValue(); label.hide(); var task = Ext.create('Ext.util.DelayedTask', function(){ label.setHtml(''); me.fireEvent('signInCommand', me, username, password); usernameField.setValue(''); passwordField.setValue(''); }); task.delay(500); }, showSignInFailedMessage: function(message) { var label = this.down('#signInFailed'); label.setHtml(message); label.show(); } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload