Quantcast
Viewing all articles
Browse latest Browse all 3491

Re : authentication and routing

Trying to have an authentication page for my simple application (Let's say an application that have left nav and content). 

Below is the index.html

    <!doctype html>
    <html lang="en">
<head>
<meta charset="utf-8">
<title>Authentication</title>
</head>
<body>

        <div class="content">
            <div id="authentication"></div>
        </div>
    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">  </script>
<script src="js/can.jquery.js"></script>
<script src="js/can.fixture.js"></script>
<script src="js/application.js"></script>
        
</body>
    </html>

My application.js file is. 

    (function(){
                    
                    
                User = can.Model( {
                    findOne : 'POST /authenticate/{user}/{password}'
                }, {});
                    
                can.fixture ('POST /authenticate/{user}/{password}', function (obj) {
                    var authenticateServiceResponse = {
                        success : true,
                        user : {
                            authenticated : 'yes',
                            name : 'yyy'
                        }
                    }
                    return authenticateServiceResponse;
                }); 
                    
                
                Authentication = can.Control ( {
                    init: function ( ) {
                     this.element.html ( can.view('views/authentication.ejs'));   
                    },
                    
                    ".login click" : function ( el ) {
                        this.credentialCheck ( el );
                    },
                    
                    credentialCheck : function (  ) {
                        var form = this.element.find('form');
                        var currObj = this;
                        values = can.deparam(form.serialize());
                        $.when(User.findOne({ user: values.name, password: values.password})).then(function(authenticationResponse ){
                            console.log ( "Inside While method" + authenticationResponse.success);
                            window.location.hash = "#!home"
                        })
                    }
                });  
                    
                    
                Router = can.Control ( {
                 "home route" : function(){
                    console.log("the hash is #!home");
                    
                  }
                })
                
                //can.route('', {authenticated: false });    
                 
                $(document).ready(function(){
                    new Authentication ( '#authentication');
                    new Router(document);
                });    
                    
                })()
 
And simple authentication.ejs file

                <form>
                    
                    <input type="text" name="name" placeholder="Login" />
                    <input type="password" name="password" placeholder="password" />
                    <BR>
                    <BR>
                    <a href="#" class="login" ><input type="button" value="Login"> <a/>    
                    
                </form>           
                
What will be the best way to render the home page (after authentication). Let's say it have a leftNav and Content. Can we have these sections in index.html and initialize their controllers, inside router controller once authentication was cleared ? Is it best practice to handle inside the router controller ? 


Viewing all articles
Browse latest Browse all 3491

Trending Articles