Small issue in node js application

Question

In my nodejs application I have route /login which uses sendFile to display my html file which takes name and password.In my server side app.js I wrote post call to take name and password.Now from my html Iam doing an ajax call to call the post call and if success I want to go to /admin page.For this I am thinking of to call in my rest call itself res.send().But Iam not aware how to send html file ..

app.get('/', function(req, res, next) {
    res.sendFile(__dirname + '/public/views/home.html');
});

app.get('/login', function(req, res, next) {
    res.send('respond with a resource');
    res.sendFile(__dirname + '/public/views/login.html');
});

app.get('/admin', function(req, res, next) {
    res.sendFile(__dirname + '/public/views/admin.html');
});

app.post('/verifylogin',function(req,res){
    var username = req.headers.uname;
    var password = req.headers.pwd;
    var uname = "admin";
    var pwd = "admin";
    var login = false;

    if(uname == username && pwd == password){
        console.log("success");
        login = true;
    } else {
        console.log("fail");
        login = false;
    }

    if(login == true){
        res.send();//how can I take to /admin here
    } else {
        res.send("Bad luck");
    }
});

html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
    function login(){
        var uname = document.getElementById('uname').value;
        var pwd = document.getElementById('pwd').value;

        $.ajax({
            url : '/verifylogin',
            type : "POST",
            headers : {
                "uname":uname,
                "pwd" :pwd
            }
        });
        console.log("name",uname);
    }
 </script>

 <h1>Login</h1>
 <p>
     <label class="control-label">Username</label>
     <input type="text" placeholder="Username"  id="uname"/>
 </p>
 <p>
     <label class="control-label">Password</label>
     <input type="password" placeholder="Password" id="pwd"/><br/>
 </p>
 <p>
     <button type="submit" class="btn btn-primary" onclick="login()">Login</button>
 </p>

If login is success how can I route to /admin ..can someone help here!

Answer 1

As @jfriend00 stated the browser doesn't redirect from an ajax call. So you can do 1 of the 2 options i'll show.

1º Option:

Client : Remove the ajax script and handle the call through html form.

Add a form to your html page:

<form method="post" action="/verifylogin">
    <label class="control-label">Username</label>
    <input type="text" placeholder="Username"  name="uname"/>
    <label class="control-label">Password</label>
    <input type="password" placeholder="Password" name="pwd"/>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

Server :

Use the redirect method instead of send to redirect to the specified URL.

if (login == true) {
    res.redirect('/admin');
}

2º Option: Send the page as content to the ajax call and redirect the page to it.

Client :

On your ajax post add the success function:

$.ajax({
    url : '/verifylogin',
    type : "POST",
    headers : {
        "uname":uname,
        "pwd" :pwd
    },
    success: function(data) {
        window.location = data;
    }
});

Server :

if(login == true) {
    res.contentType('application/json');
    var data = JSON.stringify('your_url') // im not sure if you can use relative path here
    res.header('Content-Length', data.length);
    res.end(data);
}