Building an e-Commerce website with Node – Part 26 – Edit profile page in Node JS

In this post I will show you how to add an edit profile page feature to your Node.js web application.

First, we need to create two routes, both of them with the same URL, one is GET and another one is POST. Open routes/user.js and at the end of the file, just above the module.exports = router;, let’s create the routes.


router.get('/edit-profile', function(req, res, next) {
  res.render('accounts/edit-profile', { message: req.flash('success')});
});

router.post('/edit-profile', function(req, res, next) {
  User.findOne({ _id: req.user._id }, function(err, user) {

    if (err) return next(err);

    if (req.body.name) user.profile.name = req.body.name;
    if (req.body.address) user.address = req.body.address;

    user.save(function(err) {
      if (err) return next(err);
      req.flash('success', 'Successfully Edited your profile');
      return res.redirect('/edit-profile');
    });
  });
});

The first route, router.get(), is simply responding with the edit-profile page and the extra data you put, which is the message.

In the second route, first it is checking for the user that has the same id with the user that is currently logged in (User.findOne()).

Then, if there is an error it returns a callback with the error.

Next, if there is no error then it replaces the data from the database with the new data the user types.

After that, it saves the data, flashes the message and save it in the session.

Lastly, the user is redirected to the edit-profile page.

Now, we need to create the edit-profile page. Go to accounts folder (under views) and create a new file named edit-profile.ejs.

Below is the code for the edit-profile.ejs


<% layout('layout') -%>

<div class="row">
  <div class="col-lg-6 col-md-offset-3">

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

    <form method="post">

      <h1> Edit Profile </h1>
      <div class="form-group">
        <label="name">Name: </label>
        <input type="text" class="form-control" value="<%= user.profile.name %>" name="name">
      </div>
      <div class="form-group">
        <label="name">Address: </label>
        <input type="text" class="form-control" value="<%= user.address %>" name="address">
      </div>

      <button type="submit" class="btn btn-success">Submit</button>

    </form>
  </div>
</div>

It is just simple HTML code with two fields and a submit button. It should be no problem for you to understand all it does. Now, if you change the name or the address and click submit, the data should be changed in the database.

Leave a Reply