Create your first Login page with ExpressJS + pug | by Nima Habibkhoda | Medium

open public/stylesheets/style.css and change codes:

html,
body {
  height: 100%;
}
body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

now change index view file (view/index.pug) :

extends layout
block content
    div.text-center
        form(class="form-signin" method="POST" action="/users/login")
            #error
                if error
                    p.text-danger Error!!!
- var h1Classes = ['h3', 'mb-3', 'font-weight-normal']
            h1(class=h1Classes) Please sign in
//-input email
            label( for="inputEmail" class="sr-only") Email address
            input(type="email" name="username" id="inputEmail" class="form-control" placeholder="Email address" required autofocus)
//-input password
            label(for="inputPassword" class="sr-only") Password
            input(type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required)
//-remember Checkbox
            - var divClasses=['checkbox', 'mb-3'];
            div(class=divClasses)
                label
                    input(type="checkbox" value="remember-me")
                    span Remember me
//-signIn button
            - var buttonClass=['btn', 'btn-lg', 'btn-primary', 'btn-block'];
            button(class=buttonClass type="submit") Sign in
- var pClasses=['mt-5', 'mb-3', 'text-muted'];
            p(class=pClasses) © 2017-2018

create users.pug file inside the view folder like below:

extends layout
block content
    div.text-center
        div(class="form-signin")
            div.text-center
                p wellCome Dear #{username}!

now it’s time to create our routers ( it’s so sweat )

first open app.js file , to add our middleware to parse requests :

//parse requests
app.use(bodyParser.urlencoded({ extended: true }));

and at the top of this file , above of cookieParser , paste this :

var bodyParser = require('body-parser');

save it and open routes/index.js , to create our login router .

replace this code instead of the code that exists in file for route :

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { error: false });
});

we put error to ‘false’ here as default value .

now again run the server to see our login page .

npm run start 

but this page will never login our users , WHY?

because we does not have an authenticating route and login decision .

open routes/users.js file and put below codes in it :

var express = require('express');
var router = express.Router();
var login = require('../controller/authenticate/login');
/* GET users listing. */
router.get('/', function (req, res, next) {
    res.send('respond with a resource');
});
/* Login user */
router.post('/login', function (req, res, next) {
const username = req.body.username;
    let loginResult = login(username, req.body.password);
if (loginResult) {
        res.render('users', {username: username});
    }
    else {
        res.render('index', {error: true});
    }
});
module.exports = router;

this code is deciding about user login , if username and password is correct , it will redirect to users.pug page , and if not , it will go to index.pug with error:true .

but we have a controller in line 3. yes , it is not express design pattern , but i thought it’s better to do it like mvc or mvp . so create a controller/authenticate folder in root of project and a new js file name : login.js .

open login.js file in controller/authenticate and write codes below in it:

var login =function(user,password){

    if(user==="
        return true;
    }
    else{
        return false;
    }
}
console.log(user,password)if(user===" [email protected] " && password==="admin"){return true;else{return false;
module.exports=login;

it’s finish , we do it static , with out database .

my goal was to show you how to create a simple login page with express and pug . it’s so nice and cute .

you can download this project on my git .

https://github.com/nimahkh/express_login_sample