Building an e-Commerce website with Node – Part 23 – Creating the profile and login pages

In this post we are going the create the actual profile and login pages but before doing that we have to create the route to the profile page.


router.get('/profile', function(req, res, next) {
  User.findOne({ _id: req.user._id }, function(err, user) {
    if (err) return next(err);
    res.render('accounts/profile', { user: user });
  });
});

This code says: go to user database check if this user exists or not. If it doesn’t exist return a callback with an error message. If it exists then render the profile page with an additional parameter which is “user” object.

Under views/accounts we are going to create the login.ejs first. Copy the whole code from signup.ejs page and paste it into login.ejs page.

Inside the form element we change the h1 from Signup to Login and the first div element below has to be deleted. Above the beginning of the form element there is some JavaScript code. We need to replace the word error with the word message.


<% if (message.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>
          <%= message %>
      </div>
    <% } %>

Next, under views/accounts we are going to create the profile.ejs file.
Inside it we type the following code:


<% layout('layout') -%>

<div class="container">

  <div class="row">
    <div class="col-sm-6 col-md-4">
      <img class="img-circle img-responsive img-center" src="<%= user.profile.picture %>" alt="">

      <br />
      <p>Name: <%= user.profile.name %></p>
      <p>Email: <%= user.email %></p>

      <% if (user.address === "" || typeof user.address === 'undefined')  { %>
        <p>Address: <span style="color: #c0392b; font-weight: bold">You have no address</span></p>

      <% } else { %>

      <p>Address: <%= user.address %></p>

      <% } %>

      <a href="/edit-profile" class="btn btn-primary btn-lg">Edit Profile</a>
    </div>
  </div>
</div>

The page will display something like below.

Noje.js profile page

You see there an Edit profile button. When it is clicked it is supposed to take you to the edit-profile page. It is not created yet!

That’s it! We now have the login, signup, and profile page!

Leave a Reply