Build a login form using the Pug (Jade) templating language.
Pug Code for Login Form
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
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 up