"Build an Interactive Website" was retired on September 11, 2014. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed User Authentication With Express and Mongo!
You have completed User Authentication With Express and Mongo!
Preview
Build a login form using the Pug (Jade) templating language.
Pug Code for Login Form
login.pug
extends layout
block content
.main.container
.row
.col-md-6.col-md-offset-3
h1.display-4.m-b-2 Log In
form(method='POST' action='/login')
div.form-group
label(for='email') Email
input.form-control(type='text' id='email' placeholder='email' name='email')
div.form-group
label(for='password') Password
input.form-control(type='password' id='password' placeholder='password' name='password')
button.btn.btn-primary(type='submit') Log in
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
Let's build a template for the login form.
0:00
It's a really simple form.
0:02
We're only asking for
the user's email address and password so
0:04
that they can log into their account.
0:07
Remember that all the template files
are inside the views directory here.
0:09
I'll create a new file.
0:15
And name it login.pug.
0:17
I'll start with the boilerplate code.
0:22
The code matches the layout we're
using in the registration form.
0:25
It extends the base layout.pug
template for the overall page design.
0:28
Then inserts a block of
content several divs with some
0:33
classes along with an H1
header that says login.
0:37
To add the form,
I'll start with the form and the method.
0:41
The method should be post, and
it'll go to the /login route.
0:45
Then I'll add the rest of the form.
0:49
I'll group each of the form inputs
in a div, and give them a label.
0:52
So here's the email label, and this is
the form control for the email address.
0:56
Another div to hold the password and
again, I'll use a label for that.
1:10
And I'll use a text field but
this time, we'll use the type password.
1:18
To give users a hint as to what
they're supposed to type in,
1:24
I use the placeholder attribute here and
set it to password.
1:27
And then finally, I add a submit button.
1:32
And that's the whole template and
the whole form, I'm gonna save this file.
1:41
Let's see how it works.
1:45
I'm gonna switch to my console, and
I'm gonna type nodemon to run it.
1:47
You'll notice that I'm
getting an error here.
1:53
That's because I don't have
Mongo currently running.
1:54
That's okay for this test,
because I'm not using the database.
1:57
We just wanna see how
this template renders.
2:00
So I'll open a web browser and
go to localhost port 3000, and
2:03
click the log in button.
2:06
Great, there's the form.
2:10
Now, the form doesn't
actually do anything yet.
2:12
But I'll see if my route is set up
correctly by clicking the submit button or
2:14
the log in button.
2:18
There's the message, logged in.
2:19
That's the one we added
when we created the route.
2:22
Now, the next part is the fun part.
2:24
Authenticating the user.
2:27
I'll add the programming to check a user's
credentials when they try to sign in.
2:28
If the credentials match
a document in the database.
2:32
The app signs the user in and keeps track
of their logon status using a session.
2:35
Let's do that in the next video.
2:41
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