Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default Sencha POST with parameters – Can Sencha get back a Boolean from WCF?

    Sencha POST with parameters – Can Sencha get back a Boolean from WCF?


    I am very new to Sencha and ExtJS. I am working in a trial version of Sencha Architect as my employer is considering purchasing Sencha.

    I have a Sencha Login app. I have a MyForm (Ext.form.Panel) that has a textbox to enter username, a textbox to enter password, and a button. In the onButtonClick, I have the following code:

    var values = this.getValues();
    if (values.username === '' && values.password === '')
    {
    Ext.Msg.alert('Error', 'If you are trying to login using the daily rotating Password,<br />'
    + 'you must enter the daily rotating Password but you should not enter a Username.<br /><br />' +
    'If you are not trying to login using the daily rotating Password,<br />' +
    'you must enter both your Username and Password.');
    }
    else
    {
    var loginParam;
    if (values.username === '' && values.password !== '')
    {
    //It would seem that the user is trying to login using the rotating daily Password.
    Ext.Msg.alert('', 'TESTING: The user must be trying to login ' +
    'using the daily rotating password.');
    }
    else
    {
    //It would seem that the user is not trying to login using the rotating daily Password.
    var userNameValue = '<userNameValue>';
    userNameValue = userNameValue + values.username + '</userNameValue>';
    var userPasswordValue = '<userPasswordValue>';
    userPasswordValue = userPasswordValue + values.password + '</userPasswordValue>';
    loginParam = userNameValue + userPasswordValue;
    this.submit({
    url: 'http://localhost/PowisWCF/service.svc/DoLogin?' + encodeURIComponent(loginParam),

    //success: etc. --- I would take the user to a different view/form/panel/page in real life.
    success: function(form, result) {
    Ext.Msg.alert('', 'Login Successful!');
    },

    failure: function(form, result) {
    Ext.Msg.alert('', 'The login failed. Please try again.');
    }
    });
    }
    }


    Using Fiddler software, I know that I am sending from this Sencha app the parameters as a POST. I have not started coding yet in the WCF but I know from Fiddler that I am sending an encrypted string that has username and password and that in a WCF will be parsed so that the WCF can see if the user login is valid or not valid.

    I want to return to Sencha a Boolean to indicate that the user login information was correct or incorrect, that the user login is allowed or not allowed.

    In the code above in the onButtonClick, does the “success: function(form, result)” only mean that the request in fact was submitted successfully or can Sencha receive back a Boolean from the WCF and the “result” in the “success: function(form, result)” will be that Boolean so that Sencha can know from the WCF whether or not the user has provided correct login information? I do not know if my question makes any sense, if I am articulating myself well enough. I am wondering if what I am wanting is not possible with a POST and if the “success: function(form, result)” only means that Sencha successfully submitted the POST and if it cannot be used somehow to get back from the WCF app a Boolean that indicates whether or not the user provided correct login information.

    Please pardon my ignorance and lack of understanding as I am a novice.

    Of course please let me know if I can provide further code or information.

    I thank you in advance for considering my question.

    Hviezdoslav
    07-DEC-2012 Friday

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,273
    Vote Rating
    81
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    Greetings Ssamayoa,

    I thank you very much for the link. I will checkout the information via the link you provided and try to code in the WCF to return a boolean that indicates whether or not the user provided acceptable login information.

    Thanks again to you.

    Hviezdoslav

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    Just in case it might be useful to someone else, I thought that I'd follow up to this thread that I started.

    I did not end up using POST after all for this little Sencha Login app that is just to try to do a Login in Sencha. I ended up using GET.

    In Sencha, I have no store. I have a Model named MyModel and it has the Ext.data.Fields username, password, and IsAllowed.

    In Sencha, I have a Ext.form.Panel named MyForm. It has the Ext.form.field.Text username and the Ext.form.field.Text password. It has a Ext.toolbar.Toolbar bottom that has a Ext.button.Button that the user clicks to login. The MyForm has its own MyJsonReader. I coded in the onButtonClick of Sencha but in that code I did NOT add manually the parameter values and I think if I understand it correctly that the form's submit button automatically sends the parameter values (and in Fiddler I can verify that Sencha's submit automatically sends the names and values of the parameters.

    The WCF app returns a boolean DataMember that is also named IsAllowed so that in the onButtonClick of Sencha I can know if the login was successful.

    Here is some code from this Sencha Login app in case it is useful to someone:

    Code:
    Ext.define('MyApp.view.MyForm', {
        extend: 'Ext.form.Panel',
     
        height: 150,
        id: 'MyForm',
        width: 400,
        bodyPadding: 10,
        title: 'Please Login',
     
        initComponent: function() {
            var me = this;
     
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'textfield',
                        anchor: '100%',
                        cls: 'label',
                        id: 'username',
                        name: 'username',
                        fieldLabel: 'Username'
                    },
                    {
                        xtype: 'textfield',
                        anchor: '100%',
                        cls: 'label',
                        id: 'password',
                        inputType: 'password',
                        name: 'password',
                        fieldLabel: 'Password',
                        allowBlank: false
                    }
                ],
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        handler: 'function()',
                        dock: 'bottom',
                        cls: '',
                        layout: {
                            pack: 'center',
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'button',
                                cls: 'x-btn-inner',
                                ui: confirm,
                                width: 187,
                                text: 'Click here to login',
                                listeners: {
                                    click: {
                                        fn: me.onButtonClick,
                                        scope: me
                                    }
                                }
                            }
                        ]
                    }
                ],
                reader: Ext.create('Ext.data.reader.Json', {
     
                })
            });
     
            me.callParent(arguments);
        },
    onButtonClick: function(button, e, options) {
            var values = this.getValues();
            if (values.username === '' && values.password === '')
            {
                Ext.Msg.alert('Error', 'If you are trying to login using the daily rotating Password,<br />' +
                'you must enter the daily rotating Password but you should not enter a Username.<br /><br />' +
                'If you are not trying to login using the daily rotating Password,<br />' +
                'you must enter both your Username and Password.');
            }
            else
            {
                      var varURL = encodeURI('http://localhost/PowisWCF/service.svc/DoLogin');
                      this.submit({
                                    method: 'GET',
                                    url: varURL,
                                      //success: etc. --- I would take the user to a different view/form/panel/page in real life.
                success: function(form, result) {
                    //Ext.Msg.alert('Login Successful', action.result.msg);
     
                    if (result.result.IsAllowed === true)
                                    {
                                                     //In real life, no alert here will popup but rather
                                                    //the user would be redirected to a new page/view within
                                                    //Sencha.
     
                                                     //For now, I am popping up an alert to say that the login
                                                     //was successful.
                                                     Ext.Msg.alert('You have logged in successfully.');
     
                                    }
                                    else
                                    {
                                                    //The user did NOT enter the correct Username and Password.
    Ext.Msg.alert('You must enter a valid Username and Password.<br>Please try again to login using your Username and Password.<br><br>If you wish to login using the daily rotating password,<br>please do not enter a Username and enter the daily rotating password.');
                       
                       
    //If we want to clear a textbox after an invalid attempt to login, here is the code:
                                                    Ext.getCmp('username').setValue(""); 
                                                     Ext.getCmp('password').setValue("");
                    }
                },
                    failure: function(form, result) {
     
    Ext.Msg.alert('Failure', 'Something went wrong during the login process.<br><br>  Please try again or contact an administrator.');
     
     
                     //If we want to clear a textbox after an invalid attempt to login, here is the code:
                                    Ext.getCmp('username').setValue("");
                                    Ext.getCmp('password').setValue("");
                }
     
     
     
            });
    }
     
     
    Ext.define('MyApp.model.MyModel', {
        extend: 'Ext.data.Model',
     
        storeid: 'MyJsonStore',
     
        fields: [
            {
                name: 'username',
                type: 'string'
            },
            {
                name: 'password',
                type: 'string'
            },
            {
                name: 'IsAllowed',
                type: 'boolean'
            }
        ]
    });

    Anyway, I thought even though I did not end up using POST that I would follow up to this thread that I started to communicate how I managed to do it in case someone else might find this information useful.

    Hviezdoslav

Thread Participants: 1