Building an e-Commerce website with Node – Part 18 – Sign up – Installing and using three Node.js packages

In this post we are going to modify existing code and rewrite new one so at the end somebody could actually sign up on the web site.

We are going to install three new packages that we need in our sign up process. These packages are:

Connect-flash middleware: https://www.npmjs.com/package/connect-flash
Cookie-parser middleware: https://www.npmjs.com/package/cookie-parser
Express-session middleware: https://www.npmjs.com/package/express-session

You will learn what they do as we use them.

Step 1 – Requiring connect-flash, cookie-parser, and express-session in server.js file

First of all we have to require these three packages in server.js file. Right below var engine type the following code:


var session = require('express-session');
var cookieParser = require('cookie-parser');
var flash = require('express-flash');

Step 2 – Installing connect-flash, cookie-parser, and express-session via terminal

Open the terminal and type the following command: npm install connect-flash, cookie-parser, and express-session --save.

Step 3 – Telling the express application to use these three packages

Go to server.js file and in the middleware section, right below app.use(bodyParser...) type the following code:


app.use(cookieParser());
app.use(session({
  resave: true,
  saveUninitialized: true,
  secret: "saigonro@" // this will be changed
}));
app.use(flash());

Step 4 – Modifying user.js file to use express-flash (server-side)

This is the code that we are going to modify:


User.findOne({ email: req.body.email }, function(err, existingUser) {

    if (existingUser) {
      /*console.log(req.body.email + " already exist"); it is replaced by the next line*/
      req.flash('errors', 'Account with that email address already exists');
      return res.redirect('/signup');
    } else {
      user.save(function(err, user) {
        if (err) return next(err);

        /*res.json("New user has been created"); it is replaced by the next line*/
       return res.redirect('/');
      });
    }
  });

The line console.log(req.body.email + " already exist"); is not necessary any more. We replaced it with req.flash('errors', 'Account with that email address already exists'); which gives us the error message in case the email already exists in the database.

The line res.json("New user has been created"); is replaced by return res.redirect('/');. Basically, it redirects the user to the home page in case there is no error. It should redirect to the profile page but it is not created yet.

The next thing we want to do here is to pass in the error message on the get request.


router.get('/signup', function(req, res, next) {
  res.render('accounts/signup', {
    errors: req.flash('errors')
  });
});

Basically, I just added the error!


{
    errors: req.flash('errors')
  }

Step 5 – Adding the message to the sign up page (client-side)

Go to the signup.ejs file and add the following code just above the beginning of the form:


    <% if (errors.length > 0) { %>
      <div class="alert alert-danger alert-dismissible">
        <button type="button" class="close" data-dismmiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <%= errors %>
      </div>
    <% } %>

So, first line calculates the length of the error. If it is higher than 0 (has at least one character) then it will display the error on the screen. That’s all it does!

Now, if you open your browser and go to http://localhost:3000/signup you should be able to sign up. If the email has been used and it exists in the database then the error message will be displayed.

Leave a Reply