How to check the user authencation is success and redirect to a page in kendo mobile

4 posts, 0 answers
  1. Karthik
    Karthik avatar
    8 posts
    Member since:
    Sep 2013

    Posted 20 Sep 2013 Link to this post

    Hi,

    I  am working with a login page, in that form i am having two fields(username, password). When i submit the page, it will validate the form and post the data to a url and api returns a message if the credential are correct. Now i want to get the success value to check whether its success/error. If success i am navigate to dashboard page. Please find my index.html, loginViewModel.js files. Kindly approach me how to get the response value from server and navigate to other page one its success.

    index.html

    <!DOCTYPE html><br><html><br><head><br><meta charset="ISO-8859-1"><br><title>Login</title><br>  <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" /><br></head><br><body><br> <div data-role="view" data-title="Settings" id="loginForm"><br>       <header data-role="header"><br>           <div data-role="navbar"><br>              <span data-role="view-title"></span><br>          </div><br>        </header><br>       Server: <input id="serverid" name="authserver" type="url" data-bind="value: authserver" required data-required-msg="Enter server address" data-url-msg="Enter a valid url for server"><br>        <span class="k-invalid-msg" data-for="authserver"></span><br/><br>        UserName: <input id="emailid" name="username" type="email" data-bind="value: username" required data-required-msg="You need to enter email" data-email-msg="Enter a valid email id"><br>      <span class="k-invalid-msg" data-for="username"></span><br/><br>      Password: <input id="pwd" name="password" type="password" data-bind="value: password" required validationMessage="Enter Password with minimum 6 characters"><br>      <span class="k-invalid-msg" data-for="password"></span><br/><br>      <button data-bind="click: getUserDetails">Login</button><br>    </div><br>    <script src="scripts/jquery.min.js"></script><br>    <script src="scripts/kendo.all.min.js"></script><br>    <script src="scripts/viewModel/loginModel.js"></script><br>    <script src="scripts/viewModel/loginViewModel.js"></script><br>    <script><br>     /** Initial the kendo mobile application */<br>       var app = new kendo.mobile.Application(document.body);<br>    </script><br></body><br></html>


    Below is the viewModel file loginViewModel.js


    var validator = $("#loginForm").kendoValidator().data("kendoValidator");<br><br>var loginViewModel = kendo.observable({<br> authserver: "",<br> username:"",<br>    password:"",<br>    getUserDetails: function(){<br>     if(validator.validate()){<br>       //  alert("Server Address -- "+ this.get("authserver")+" User Name -- "+ this.get("username")+" User Password -- "+ this.get("password"));<br>          <br>                var dataSource = new kendo.data.DataSource({<br>                    transport:{<br>                     read:{<br>                          url: "http://127.0.0.1/api/index.php",<br>                          type: "POST",<br>                           dataType: "html",<br>                           <br>                        }<br>                   },<br>                  change: function(data){<br>                     alert("aaa"+dataSource.data);<br>                       alert(data);<br>                    },<br>                  error: function(xhr, error){<br>                        console.log(xhr);<br>                       console.log(error);<br>                 }<br>               });<br>     }else{<br>          alert("Not valid");<br>     }<br>       <br>    },<br>  <br>}) ;



    kendo.bind($("#loginForm"), loginViewModel);
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 20 Sep 2013 Link to this post

    Hi Karthik,

    While possible, the DataSource component is not suitable for login/logout requests, since such activity does not involve multiple recordsets being transferred. I would like to recommend that you use regular $.ajax calls instead. After this, you can use the navigate method to move to another view.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Sung
    Sung avatar
    2 posts
    Member since:
    Sep 2013

    Posted 11 Oct 2013 Link to this post

    Hi Karthik!

    I also have the same problem here.

    I  would like to create a simple login function using  $.ajax but I've got error says: ""

    OPTIONS http://sample.webservice.com/ServiceAuth/SignIn 405 (Method Not Allowed) -jquery.min.js:5

    OPTIONS http://sample.webservice.com/ServiceAuth/SignIn Origin null is not allowed by Access-Control-Allow-Origin. -jquery.min.js:5

    XMLHttpRequest cannot load http://sample.webservice.com/ServiceAuth/SignIn. Origin null is not allowed by Access-Control-Allow-Origin. -index.html:1

    here is my code:

               var productArr = new Array('Product 1');
            function signIn(){
                $.ajax({
                    type: "POST",
                    headers: 'Authorization: Base64("ASD:FGH")',
                    url: "http://sample.webservice.com/ServiceAuth/SignIn",
                    data: {
                        'username': $("#username").val(),
                        'password': $("#password").val(),
                        'Product':  {Product:productArr}
                    }, 
                    dataType:'json', // Expected return data type...
                    success: function(data) { // After retrieving the data from the server
                        alert(data);
                        closeModalView();
                    }
                });
                closeModalView();
            }

    1. OPTIONS http://sung.rapidglobal.com/SSOService/ServiceAuth/PasscodeSignIn Origin null is not allowed by Access-Control-Allow-Origin. jquery.min.js:5
    XMLHttpRequest cannot load http://sung.rapidglobal.com/SSOService/ServiceAuth/PasscodeSignIn. Origin null is not allowed by Access-Control-Allow-Origin. index.html:1
    1. OPTIONS http://sung.rapidglobal.com/SSOService/ServiceAuth/PasscodeSignIn Origin null is not allowed by Access-Control-Allow-Origin. jquery.min.js:5
    XMLHttpRequest cannot load http://sung.rapidglobal.com/SSOService/ServiceAuth/PasscodeSignIn. Origin null is not allowed by Access-Control-Allow-Origin. index.html:1
    1. OPTIONS http://sung.rapidglobal.com/SSOService/ServiceAuth/PasscodeSignIn Origin null is not allowed by Access-Control-Allow-Origin. jquery.min.js:5
    XMLHttpRequest cannot load http://sung.rapidglobal.com/SSOService/ServiceAuth/PasscodeSignIn. Origin null is not allowed by Access-Control-Allow-Origin. index.html:1
    1. OPTIONS http://sung.rapidglobal.com/SSOService/ServiceAuth/PasscodeSignIn Origin null is not allowed by Access-Control-Allow-Origin. jquery.min.js:5
    XMLHttpRequest cannot load http://sung.rapidglobal.com/SSOService/ServiceAuth/PasscodeSignIn. Origin null is not allowed by Access-Control-Allow-Origin. index.html:1
    jquery.min.js:5
    jquery.min.js:5
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 14 Oct 2013 Link to this post

    Hi Karthik,

    You problem falls outside of the scope of the standard support services offered by Kendo UI.

    The standard support services - the ones included in the support package that goes with the controls, cover only the built-in functionality of the corresponding products. In case you need consultancy, best-practices advice or general assistance that is not directly related to the functionality of the Telerik control that you are using, I would suggest to check our Professional Services. More information on them is available in the linked page.

    Please let me know if you are interested and a member of our Professional Services team will contact you shortly.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top