Node.js express login and register form as tabs

Question

I'm currently trying to create a node.js authenticate site, which stores login and register forms in separate tabs.

I've used to have two different sites, to manage the login and the register. So my user.js file looked like the following:

var express = require('express');
var router = express.Router();
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;

var User = require('../models/user');

// Register
router.get('/register', function(req, res){
    res.render('register');
});

// Login
router.get('/authenticate', function(req, res){
    res.render('authenticate');
});

// Register User
router.post('/register', function(req, res){
    var name = req.body.name;
    var username = req.body.username;
    var gender = req.body.gender;
    var email = req.body.email;
    var password = req.body.password;
    var password2 = req.body.password2;

    // Validation
    req.checkBody('name', 'Name is required').notEmpty();
    req.checkBody('username', 'Username is required').notEmpty();
    req.checkBody('gender', 'Gender is required').notEmpty();
    req.checkBody('email', 'Email is not valid').isEmail();
    req.checkBody('email', 'Email is required').notEmpty();
    req.checkBody('password', 'Password is required').notEmpty();
    req.checkBody('password2', 'Passwords do not match').equals(req.body.password);

    var errors = req.validationErrors();

    if(errors)
    {
        res.render('register', {
            errors: errors
        });
    }
    else
    {
        var newUser = new User({
            name: name,
            username: username,
            gender: gender,
            email: email,
            password: password
        });

        User.createUser(newUser, function(err, user)
        {
            if(err) throw err;
            console.log(user);
        });

        req.flash('success_msg', 'Success: You are registered and you can login.');

        res.redirect('/users/authenticate');
    }
});

passport.use(new LocalStrategy(
    function(username, password, done)
    {
        User.getUserByUsername(username, function(err, user)
        {
            if(err) throw err;
            if(!user)
            {
                return done(null, false, {message: 'Error: Unknown User.'});
            }

            User.comparePassword(password, user.password, function(err, isMatch)
            {
                if(err) throw err;
                if(isMatch)
                {
                    return done(null, user);
                }
                else
                {
                    return done(null, false, {message: 'Error: Invalid Password.'});
                }
            })
        });
    })
);

passport.serializeUser(function(user, done)
{
    done(null, user.id);
});

passport.deserializeUser(function(id, done)
{
    User.getUserById(id, function(err, user)
    {
        done(err, user);
    })
})

router.post('/authenticate',
    passport.authenticate('local', {successRedirect: '/', failureRedirect: '/users/authenticate', failureFlash: true}),
    function(req, res)
    {
        res.redirect('/');
    }
);

router.get('/logout', function(req, res){
    req.logout();
    req.flash('success_msg', 'Success: You are logged out.');
    res.redirect('/users/authenticate');
});

module.exports = router;

But I'm kind of confused, how to handle the form post now since the authenticate site stores now login/register in tabs.

Html of the tabs:

<!-- Tabbed form -->
<div class="tabbable panel login-form width-400">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#basic-tab1" data-toggle="tab"><h6 class="text-semibold">Sign in</h6></a></li>
        <li><a href="#basic-tab2" data-toggle="tab"><h6 class="text-semibold">Register</h6></a></li>
    </ul>

    <div class="tab-content panel-body">
        <div class="tab-pane fade in active" id="basic-tab1">
            <form method="post" action="/users/authenticate">
                <input type="hidden" name="method" value="login">

                <div class="text-center">
                    <div class="icon-object border-slate-300 text-slate-300"><i class="icon-reading"></i></div>
                    <h5 class="content-group">Login to your account <small class="display-block">Your credentials</small></h5>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="text" class="form-control" placeholder="Username" name="username">
                    <div class="form-control-feedback">
                        <i class="icon-user text-muted"></i>
                    </div>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="password" class="form-control" placeholder="Password" name="password">
                    <div class="form-control-feedback">
                        <i class="icon-lock2 text-muted"></i>
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn bg-danger-400 btn-block">Login</button>
                </div>
            </form>
            <span class="help-block text-center no-margin">By continuing, you're confirming that you've read our Conditions</span>
        </div>

        <div class="tab-pane fade" id="basic-tab2">
            <form method="post" action="/users/authenticate">
                <input type="hidden" name="method" value="register">

                <div class="text-center">
                    <div class="icon-object border-slate-300 text-slate-300"><i class="icon-plus3"></i></div>
                    <h5 class="content-group">Create new account <small class="display-block">All fields are required</small></h5>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="text" class="form-control" name="usernameRegister" placeholder="Your username">
                    <div class="form-control-feedback">
                        <i class="icon-user-check text-muted"></i>
                    </div>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="password" class="form-control" name="passwordRegister" placeholder="Create password">
                    <div class="form-control-feedback">
                        <i class="icon-user-lock text-muted"></i>
                    </div>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="text" class="form-control" name="emailRegister" placeholder="Your email">
                    <div class="form-control-feedback">
                        <i class="icon-mention text-muted"></i>
                    </div>
                </div>

                <button type="submit" class="btn bg-danger-400 btn-block">Register</button>

                </br>
                <span class="help-block text-center no-margin">By continuing, you're confirming that you've read our Conditions</span>
            </form>
        </div>
    </div>
</div>
<!-- /tabbed form -->

Screenshot of the tabbed form:

How could I handle the posted values in the authenticate form? I've thought I could send 2 more hidden inputs to store a value such as register and login to use them inside the javascript, but i didn't get this to work also.

So my code wouldn't know if i posted the login or the register incase i changed the register router to authenticate.

Answer 1

For the forms in tab, just make each form send a POST to a different route, and you won't need any hidden field to differentiate between register and login.

login form:

<form method="post" action="/users/authenticate">
...
</form>

register form:

<form method="post" action="/register">
...
</form>

In your register controller, after you create a new user you can call the authenticate method of passport to authenticate your user, then you can redirect wherever your want. But no need to redirect to authenticate route.