Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Create the user profile page using the Pug templating language.Add programming logic to password protect the profile page for unauthorized users, or show user information for the currently logged in user.
Profile template code
profile.pug
extends layout
block content
.main.container.clearfix
.row
.col-md-8.col-md-offset-2
h1.display-4
img.avatar.img-circle.hidden-xs-down(src='/images/avatar.png', alt='avatar')
| #{name}
h2.favorite-book Favorite Book
| #{favorite}
GET /profile route
// GET /profile
router.get('/profile', function(req, res, next) {
if (! req.session.userId ) {
var err = new Error("You are not authorized to view this page.");
err.status = 403;
return next(err);
}
User.findById(req.session.userId)
.exec(function (error, user) {
if (error) {
return next(error);
} else {
return res.render('profile', { title: 'Profile', name: user.name, favorite: user.favoriteBook });
}
});
});
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We've almost finished creating
the basic authentication system for
0:00
our bookworm site.
0:03
The only missing piece
is the profile page.
0:05
That's our only password
protected page on the site.
0:07
I'll start by creating the template for
the page.
0:10
I'll add a file named
profile.pug in the views folder.
0:14
And I'll add my template code.
0:22
I'm not going to type it out,
I'll just paste it in there.
0:23
You can find this code in the teacher's
notes if you want to copy and
0:26
paste it too.
0:28
The two important items in this template
are these placeholders, name and favorite.
0:29
These are variable placeholders that,
when the template is rendered,
0:36
will be filled with the users name and
their favorite book.
0:39
To wire this template up to our app,
0:42
we need to add one more route to the
index.js file inside the routes directory.
0:45
Let's add a basic GIT route.
0:53
Remember, in the last video when a user
successfully logs in their user ID,
1:01
that's the idea used in Mongo
to identify a single document,
1:06
is stored as a session variable.
1:10
In other words,
1:12
if there is no user ID in the session,
then the user can't be locked in.
1:12
We can check for that case first.
1:17
So here I'm just looking to see if
the user ID session variable exists.
1:25
If it doesn't,
1:31
we'll spit out a message that says you
are not authorized to view this page.
1:32
We'll also send out an error
status code of 403,
1:35
that means forbidden, basically the page
is off limits unless you're logged in.
1:40
Remember that a session is a property of
the request object, and individual pieces
1:46
of data that you store in there are
properties on the session, req.session.
1:51
Now what to do if the user ID's
session variable is in place.
1:58
In this case, we can retrieve the user ID
from the session store and execute a query
2:02
against the Mongo database, retrieving
the user's information from Mongo.
2:06
I'll add a basic error check in
case the query doesn't work.
2:16
However, if there's no error,
we can render the profile template.
2:23
Passing a title, The user's name,
2:32
And the user's favorite book.
2:41
Remember, user.name is data that
comes from the Mongo database,
2:46
user.favoriteBook is the same.
2:50
Here, name is a variable that we're
using to send to our template.
2:54
So in other words,
2:58
we're sending the user name from the
database in a variable to the template.
2:58
Let's see how it works.
3:04
I'll save this page and
switch over to the terminal.
3:05
Well I've already got nodemon running,
so I don't need to start it again.
3:08
I'll switch to my browser and
go to a local host 3000 and log in.
3:12
Sure enough, there's my name and
my favorite book, it works!
3:17
Now we've written a lot of
code in this course so far,
3:21
and we have a basic user
authentication system in place.
3:23
There are a few things
we can do to improve it.
3:27
For one,
we haven't added a logout feature.
3:29
In addition,
the navigation bar could use some help.
3:33
For example, when you're logged in,
this login button here should say log out.
3:35
Likewise, we're already signed up, so
we shouldn't see the sign up link again.
3:40
In the next section of this course,
I'll show you how to add these features,
3:45
as well as teach you how to write your
own middleware for this application.
3:49
See you there.
3:52
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up