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