Building an e-Commerce website with Node – Part 25 – Cleaning out the layout, adding gravatar and modifying some code

In this post we are going to clean our layout so all the pages will have a consistent look.

We are going to modify the following files: boilerplate.ejs, home.ejs, layout.ejs, profile.ejs,javascriptOnly.ejs, routes/user.js, models/user.js and custom.css.

The boilerplate.ejs we will actually delete because we don’t need it anymore.
All JavaScript code I put in a separate file called javascriptOnly.ejs which I created under the partials folder.

Now, since I modify just the HTML part, the explanations are useless. I will provide you with the final version of all these files.

Another thing we have to do is to fix the signout route. At this point if the user is signing up once he is done he will be redirected to the home page. We want the user to be redirected to the profile page. We do that in the routes/user.js.

The code that we are going to modify is:


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

    if (existingUser) {
      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);

        req.logIn(user, function(err) {
          if (err) return next(err);
          res.redirect('/profile');
        });
      });
    }
  });
});

What we are going to modify is return res.redirect('/');. We are going to replace it with:


req.logIn(user, function(err) {
          if (err) return next(err);
          res.redirect('/profile');
        });

Basically, it adds the session to the server and the cookie to the browser by using the logIn function. The user object that is passed as a parameter is based on the user creation.

Another important thing we want to do is to create a custom method that adds a gravatar picture to the profile. We do that in models/user.js.


UserSchema.methods.gravatar = function(size) {
  if (!this.size) size = 200;
  if (!this.email) return 'https://gravatar.com/avatar/?s' + size + '&d=retro';
  var md5 = crypto.createHash('md5').update(this.email).digest('hex');
  return 'https://gravatar.com/avatar/' + md5 + '?s=' + size + '&d=retro';
}

If the size is not specified then it sets up the size to 200.
The next line says if the email does not exist (on gravatar) then it will return a random image.
The next line says that if this is the user email you want to hash it so each user will have a unique picture.
Then you add the md5 (encryption) to the API itself so the picture will belong only to that specific user.

We also need to require crypto. At the top of models/user.js type var crypto = require('crypto');.

We also need to save the picture into the signup route. In order to do that we need to add the following code into routes/user.js


user.profile.picture = user.gravatar();

If you want to test it I suggest you to delete all the users you have created in the database.

Download the files:

The files after part 25

Leave a Reply