Ext.ns('Collector');

Collector.Login = Ext.extend(Ext.FormPanel, {
        labelWidth: 80
        , id: 'loginForm'
        , frame: true
        , title: 'Please Login'
        , width: 230
        , padding: 10
        , defaultType: 'textfield'
        , monitorValid: true
        , buttons: [{
            text: 'Login',
            formBind: true,
            id: 'loginButton',
            // Function that fires when user clicks the button 
            handler: this.loginSubmit
        }]
	    , initComponent: function() {
	        Ext.apply(this, {
	            // Specific attributes for the text fields for username / password. 
	            // The "name" attribute defines the name of variables sent to the server.
	            items: [
	            {
	                id: 'loginUsernameField',
	                fieldLabel: 'Username',
	                name: 'username',
	                value: 'username',
	                allowBlank: false,
	                listeners: {
	                    specialkey: function(field, el) {
	                        if (el.getKey() == Ext.EventObject.ENTER)
	                            Ext.getCmp('loginPasswordField').focus();
	                    }
	                }
	            }, {
	                id: 'loginPasswordField',
	                fieldLabel: 'Password',
	                name: 'password',
	                inputType: 'password',
	                allowBlank: false,
	                listeners: {
	                    specialkey: function(field, el) {
	                        if (el.getKey() == Ext.EventObject.ENTER)
	                            Ext.getCmp('loginForm').loginSubmit();
	                    }
	                }
                }]
	            // All the magic happens after the user clicks the button     
	        });
	        Collector.Login.superclass.initComponent.apply(this, arguments);
	    } // eo function initComponent
    , onRender: function() {
        Collector.Login.superclass.onRender.apply(this, arguments);
    } // eo function onRender

    , doSubmitCheck: function(e) {
        if (e.getKey() == e.ENTER) {
            Collector.loginSubmit();
        }
    }
    , loginSubmit: function() {
        win.loginPanel.getForm().submit({
            method: 'POST',
            waitTitle: 'Connecting',
            waitMsg: 'Sending data...',
            // Functions that fire (success or failure) when the server responds. 
            // The one that executes is determined by the 
            // response that comes from login.asp as seen below. The server would 
            // actually respond with valid JSON, 
            // something like: response.write "{ success: true}" or 
            // response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
            // depending on the logic contained within your server script.
            // If a success occurs, the user is notified with an alert messagebox, 
            // and when they click "OK", they are redirected to whatever page
            // you define as redirect. 
            success: function() {
                win.loginPanel.el.mask('Redirecting...');
                window.location = win.loginPanel.redirectUrl;
            },

            // Failure function, see comment above re: success and failure. 
            // You can see here, if login fails, it throws a messagebox
            // at the user telling him / her as much.  
            failure: function(form, action) {
                if (action.failureType == 'server') {
                    obj = Ext.util.JSON.decode(action.response.responseText);
                    Ext.Msg.show({
                        title: 'Login Failed!',
                        msg: obj.errors.reason,
                        buttons: Ext.Msg.OK,
                        fn: Ext.getCmp('loginUsernameField').focus(true, true),
                        scope: win.loginPanel,
                        icon: Ext.MessageBox.ERROR
                    });
                } else {
                    Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
                }
            }
        });
    }
});
Ext.reg('login', Collector.Login);