title
Node.js Login System With Passport - Part 1

description
In this video we will start our login and registration application using Node.js, Express and Passport. We will setup our modules, middleware and create a Bootstrap layout. Code For This Series - https://github.com/bradtraversy/loginapp NODE.JS, EXPRESS & MONGODB COURSE: https://www.udemy.com/nodejs-express-mongodb-dev-to-deployment/?couponCode=DISCOUNT459895

detail
{'title': 'Node.js Login System With Passport - Part 1', 'heatmap': [{'end': 277.29, 'start': 260.786, 'weight': 0.874}, {'end': 783.268, 'start': 755.733, 'weight': 0.825}, {'end': 871.6, 'start': 853.482, 'weight': 0.705}], 'summary': 'Learn to build a full login and registration system for node.js using node and mongodb, setting up passport for authentication with mongoose and including various dependencies and middleware for a node.js application, setting up a node.js server with express, creating directory structure and initializing bootstrap, and updating the ui and menu in a web app with specific input fields and menu items.', 'chapters': [{'end': 46.941, 'segs': [{'end': 46.941, 'src': 'embed', 'start': 1.178, 'weight': 0, 'content': [{'end': 8.463, 'text': "hey guys, in this series we're going to be building a complete login and registration system for node.js.", 'start': 1.178, 'duration': 7.285}, {'end': 12.466, 'text': "all right, so we'll use node and we're going to use some other technologies as well.", 'start': 8.463, 'duration': 4.003}, {'end': 16.408, 'text': 'first thing you want to do is obviously get node installed.', 'start': 12.466, 'duration': 3.942}, {'end': 20.291, 'text': 'go to nodejs.org and just download and go through the installer.', 'start': 16.408, 'duration': 3.883}, {'end': 21.012, 'text': "it's really easy.", 'start': 20.291, 'duration': 0.721}, {'end': 26.375, 'text': 'i do have a video on how to install node in both windows and linux.', 'start': 21.012, 'duration': 5.363}, {'end': 31.26, 'text': 'if you want to check that out, You also want to get MongoDB installed.', 'start': 26.375, 'duration': 4.885}, {'end': 37.769, 'text': "So mongodb.org slash downloads and you can see it's available for Windows, Linux and Mac.", 'start': 31.921, 'duration': 5.848}, {'end': 46.941, 'text': "I'm on a Windows system but I already have it installed so I'm not going to go through this but like I said I do have videos on installing MongoDB.", 'start': 38.61, 'duration': 8.331}], 'summary': 'Building login and registration system for node.js using node and mongodb.', 'duration': 45.763, 'max_score': 1.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA1178.jpg'}], 'start': 1.178, 'title': 'Building login & registration system in node.js', 'summary': 'Focuses on creating a full login and registration system for node.js using node and mongodb, providing instructions on installing node.js and mongodb.', 'chapters': [{'end': 46.941, 'start': 1.178, 'title': 'Building login & registration system in node.js', 'summary': 'Discusses building a complete login and registration system for node.js using node and mongodb, with guidance on installing node.js and mongodb.', 'duration': 45.763, 'highlights': ['Guidance on installing node.js and MongoDB for building a complete login and registration system.', 'Recommendation to visit nodejs.org for node.js installation, which is easy and straightforward.', 'Mention of availability of MongoDB for Windows, Linux, and Mac, with personal experience of already having it installed.']}], 'duration': 45.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA1178.jpg', 'highlights': ['Guidance on installing node.js and MongoDB for building a complete login and registration system.', 'Recommendation to visit nodejs.org for node.js installation, which is easy and straightforward.', 'Mention of availability of MongoDB for Windows, Linux, and Mac, with personal experience of already having it installed.']}, {'end': 625.162, 'segs': [{'end': 76.635, 'src': 'embed', 'start': 48.666, 'weight': 0, 'content': [{'end': 55.248, 'text': "For authentication, we're going to be using Passport, which is a Node.js module, and it's very, very flexible.", 'start': 48.666, 'duration': 6.582}, {'end': 58.329, 'text': 'You can use it with all different types of ORMs.', 'start': 55.308, 'duration': 3.021}, {'end': 62.27, 'text': "We'll be using Mongoose, and it's pretty easy to integrate.", 'start': 59.069, 'duration': 3.201}, {'end': 64.291, 'text': "So we'll be using that.", 'start': 63.311, 'duration': 0.98}, {'end': 68.692, 'text': "So first thing we're going to do here is create a project folder.", 'start': 65.251, 'duration': 3.441}, {'end': 76.635, 'text': "All right, so I'm going to go into my projects folder and then create a new folder called login app.", 'start': 68.712, 'duration': 7.923}], 'summary': 'Using passport for authentication with node.js and mongoose, and creating a project folder.', 'duration': 27.969, 'max_score': 48.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA48666.jpg'}, {'end': 130.533, 'src': 'embed', 'start': 96.827, 'weight': 4, 'content': [{'end': 101.752, 'text': 'Or you can just use a standard Windows command line or your Mac or Linux terminal.', 'start': 96.827, 'duration': 4.925}, {'end': 105.34, 'text': 'Okay, so let me make this a little bigger.', 'start': 103.419, 'duration': 1.921}, {'end': 110.543, 'text': 'First thing we need to do is generate a package.json folder.', 'start': 106.241, 'duration': 4.302}, {'end': 113.084, 'text': 'So to do that, we can say npm init.', 'start': 110.843, 'duration': 2.241}, {'end': 116.966, 'text': "And it's just going to ask us some questions.", 'start': 115.325, 'duration': 1.641}, {'end': 124.35, 'text': "For description, we'll just say simple authentication system.", 'start': 118.027, 'duration': 6.323}, {'end': 130.533, 'text': "Entry point, I'm going to say app.js.", 'start': 128.051, 'duration': 2.482}], 'summary': 'Create a package.json folder using npm init for a simple authentication system with app.js as the entry point.', 'duration': 33.706, 'max_score': 96.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA96827.jpg'}, {'end': 190.219, 'src': 'embed', 'start': 162.079, 'weight': 3, 'content': [{'end': 167.843, 'text': "Okay, so this is what we'll be working with, bcrypt.js we're going to be using for password hashing.", 'start': 162.079, 'duration': 5.764}, {'end': 174.688, 'text': "Now, you could use just the standard bcrypt, but I always have an issue with that because there's so many dependencies.", 'start': 168.544, 'duration': 6.144}, {'end': 181.193, 'text': 'For instance, you need a certain version of Visual Studio and then a bunch of other node modules.', 'start': 175.509, 'duration': 5.684}, {'end': 190.219, 'text': "So bcrypt.js gives us pretty much the same functionality, except it's all in JavaScript and there's no strange dependencies or anything.", 'start': 181.273, 'duration': 8.946}], 'summary': 'Using bcrypt.js for password hashing, avoiding dependencies and issues with standard bcrypt.', 'duration': 28.14, 'max_score': 162.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA162079.jpg'}, {'end': 277.29, 'src': 'heatmap', 'start': 209.904, 'weight': 1, 'content': [{'end': 213.366, 'text': "All right, you can use jade if you'd like, but I don't really like jade.", 'start': 209.904, 'duration': 3.462}, {'end': 215.867, 'text': "I'd rather work with just regular HTML.", 'start': 213.766, 'duration': 2.101}, {'end': 219.594, 'text': 'Express Messages and Express Session.', 'start': 217.392, 'duration': 2.202}, {'end': 222.457, 'text': 'These are both going to be used for flash messaging.', 'start': 219.714, 'duration': 2.743}, {'end': 225.539, 'text': 'Express Validator to validate forms.', 'start': 223.357, 'duration': 2.182}, {'end': 231.524, 'text': 'MongoDB Mongoose is going to be used as our ORM to interact with the database.', 'start': 226.18, 'duration': 5.344}, {'end': 234.087, 'text': 'And then we have a couple passport modules.', 'start': 232.145, 'duration': 1.942}, {'end': 238.871, 'text': 'We have Passport, Passport HTTP, and then Passport Local.', 'start': 234.587, 'duration': 4.284}, {'end': 249.779, 'text': "We're just going to use a local database, but there are passport modules for things like Facebook and Twitter login, things like that.", 'start': 239.551, 'duration': 10.228}, {'end': 250.92, 'text': 'These are our dependencies.', 'start': 249.939, 'duration': 0.981}, {'end': 252.161, 'text': "Let's go ahead and save this.", 'start': 250.96, 'duration': 1.201}, {'end': 258.165, 'text': "Then we'll go back to the command line and we're going to run npm install.", 'start': 253.662, 'duration': 4.503}, {'end': 265.511, 'text': 'That should get everything set up for us.', 'start': 260.786, 'duration': 4.725}, {'end': 266.252, 'text': "That's all set.", 'start': 265.551, 'duration': 0.701}, {'end': 269.334, 'text': "Now what we're going to do is create our app.js file.", 'start': 266.272, 'duration': 3.062}, {'end': 277.29, 'text': "Okay, and we have a bunch of stuff that we need to include or acquire, so I'm going to paste that in.", 'start': 272.153, 'duration': 5.137}], 'summary': 'Using express, mongodb, and passport for web app setup.', 'duration': 56.348, 'max_score': 209.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA209904.jpg'}, {'end': 467.735, 'src': 'embed', 'start': 435.282, 'weight': 6, 'content': [{'end': 438.723, 'text': "Next thing, let's initialize the app.", 'start': 435.282, 'duration': 3.441}, {'end': 444.184, 'text': "We'll say var app equals express.", 'start': 438.803, 'duration': 5.381}, {'end': 446.865, 'text': "And then we'll set up our view engine.", 'start': 444.604, 'duration': 2.261}, {'end': 450.685, 'text': "Okay, I'm just going to paste this in.", 'start': 449.124, 'duration': 1.561}, {'end': 458.83, 'text': "This first line here, we're just telling the system we want a folder called views to handle our views.", 'start': 452.826, 'duration': 6.004}, {'end': 459.931, 'text': 'This one.', 'start': 459.49, 'duration': 0.441}, {'end': 467.735, 'text': "here we're going to set handlebars as the app.engine and we're also saying the default layout file.", 'start': 459.931, 'duration': 7.804}], 'summary': 'Initializing an app using express with handlebars as the default layout.', 'duration': 32.453, 'max_score': 435.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA435282.jpg'}, {'end': 581.926, 'src': 'embed', 'start': 546.619, 'weight': 2, 'content': [{'end': 548.2, 'text': 'Okay, middleware options.', 'start': 546.619, 'duration': 1.581}, {'end': 549.642, 'text': "It's the same exact thing.", 'start': 548.601, 'duration': 1.041}, {'end': 550.683, 'text': "I didn't change anything.", 'start': 549.682, 'duration': 1.001}, {'end': 552.084, 'text': 'All right.', 'start': 550.703, 'duration': 1.381}, {'end': 555.768, 'text': 'Now we need the connect flash middleware.', 'start': 553.125, 'duration': 2.643}, {'end': 558.51, 'text': 'Okay, which is just one line.', 'start': 555.788, 'duration': 2.722}, {'end': 562.775, 'text': "All we're going to do is say app.use flash.", 'start': 558.53, 'duration': 4.245}, {'end': 565.297, 'text': 'Okay, just like that.', 'start': 562.795, 'duration': 2.502}, {'end': 566.659, 'text': 'And then.', 'start': 566.338, 'duration': 0.321}, {'end': 572.322, 'text': 'we want to set some global variables for our flash messages.', 'start': 568.26, 'duration': 4.062}, {'end': 573.842, 'text': "So I'm going to paste this in.", 'start': 572.342, 'duration': 1.5}, {'end': 581.926, 'text': "And you'll see that when you want to create a global variable or a global function, you want to use res.locals.", 'start': 575.083, 'duration': 6.843}], 'summary': 'Setting up connect flash middleware for global flash messages.', 'duration': 35.307, 'max_score': 546.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA546619.jpg'}], 'start': 48.666, 'title': 'Setting up passport and dependencies', 'summary': 'Covers setting up passport for authentication using mongoose, including project folder setup, package.json generation, and dependencies. it also includes setting up various dependencies and middleware for a node.js application, such as bcrypt.js, express, express validator, mongodb mongoose, and middleware like cookie parser, express session, and connect flash.', 'chapters': [{'end': 160.454, 'start': 48.666, 'title': 'Setting up passport for authentication', 'summary': 'Covers setting up passport, a node.js module, for authentication using mongoose, including creating project folders, generating package.json, and including dependencies.', 'duration': 111.788, 'highlights': ['Setting up Passport for authentication using Mongoose The chapter covers using Passport, a Node.js module, for authentication with Mongoose.', 'Creating project folder and generating package.json The process involves creating a project folder and generating a package.json file for the authentication system.', 'Including dependencies for the authentication system The chapter explains the inclusion of various dependencies for the authentication system.']}, {'end': 625.162, 'start': 162.079, 'title': 'Setting up dependencies and middleware for node.js application', 'summary': 'Covers setting up dependencies and middleware for a node.js application, including bcrypt.js for password hashing, express for handling routes, express validator for form validation, mongodb mongoose for database interaction, and setting up various middleware such as cookie parser, express session, and connect flash.', 'duration': 463.083, 'highlights': ['Setting up bcrypt.js for password hashing without dependencies, providing similar functionality as standard bcrypt in JavaScript. bcrypt.js offers password hashing without dependencies, similar to standard bcrypt but in JavaScript.', 'Using MongoDB Mongoose as the ORM to interact with the database, including creating collections and initializing the database, providing a demonstration of database operations. Demonstrates using MongoDB Mongoose as the ORM to interact with the database and performing database operations.', 'Configuring middleware such as express validator for form validation, cookie parser, and connect flash for flash messages, and setting global variables for flash messages. Configuring middleware like express validator, cookie parser, connect flash, and setting global variables for flash messages.', 'Setting up routes and initializing the app with express, setting up the view engine with express handlebars, and configuring public folder for static content. Covers setting up routes, initializing the app with express, configuring the view engine, and the public folder for static content.']}], 'duration': 576.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA48666.jpg', 'highlights': ['Setting up Passport for authentication using Mongoose', 'Using MongoDB Mongoose as the ORM to interact with the database', 'Configuring middleware like express validator, cookie parser, connect flash, and setting global variables for flash messages', 'Setting up bcrypt.js for password hashing without dependencies, providing similar functionality as standard bcrypt in JavaScript', 'Creating project folder and generating package.json', 'Including dependencies for the authentication system', 'Setting up routes, initializing the app with express, configuring the view engine, and the public folder for static content']}, {'end': 1118.387, 'segs': [{'end': 653.42, 'src': 'embed', 'start': 625.962, 'weight': 0, 'content': [{'end': 629.884, 'text': 'all right, and then we have the the users as well,', 'start': 625.962, 'duration': 3.922}, {'end': 634.667, 'text': 'and then the last thing we want to do here is just set the port and then start the server all right.', 'start': 629.884, 'duration': 4.783}, {'end': 637.509, 'text': "so we're going to set the port here with app.set.", 'start': 634.667, 'duration': 2.842}, {'end': 643.052, 'text': "we're setting it to process env port or 3000, which is what we'll be using,", 'start': 637.509, 'duration': 5.543}, {'end': 650.236, 'text': "and then down here we're just going to call app.listen and pass in the port number and then we'll just console log telling,", 'start': 643.052, 'duration': 7.184}, {'end': 653.42, 'text': 'telling the user that the server has been started Alright.', 'start': 650.236, 'duration': 3.184}], 'summary': 'Setting server port to process env port or 3000 and starting the server.', 'duration': 27.458, 'max_score': 625.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA625962.jpg'}, {'end': 783.268, 'src': 'heatmap', 'start': 725.635, 'weight': 1, 'content': [{'end': 731.858, 'text': "All right, so let's save that, and I'm going to put the same thing in users, except we're not going to have the slash.", 'start': 725.635, 'duration': 6.223}, {'end': 739.162, 'text': "We're going to have a register route, and that'll render a view called register.", 'start': 731.878, 'duration': 7.284}, {'end': 744.445, 'text': "Okay, and then we'll also have a login route.", 'start': 739.182, 'duration': 5.263}, {'end': 754.252, 'text': 'And that will render a template or a view called login.', 'start': 751.55, 'duration': 2.702}, {'end': 756.333, 'text': 'Save that.', 'start': 755.733, 'duration': 0.6}, {'end': 760.976, 'text': 'Alright, so next folder we need to create is our view folder.', 'start': 756.353, 'duration': 4.623}, {'end': 764.598, 'text': "And that's going to be called views.", 'start': 760.996, 'duration': 3.602}, {'end': 767.981, 'text': "And inside there we're going to have a folder called layouts.", 'start': 765.519, 'duration': 2.462}, {'end': 773.604, 'text': "And that's going to hold our main layout file which is going to be called layout.handlebars.", 'start': 769.041, 'duration': 4.563}, {'end': 776.026, 'text': "Whoops, I didn't want to do that.", 'start': 774.765, 'duration': 1.261}, {'end': 783.268, 'text': "All right, and for now, we'll just say main layout.", 'start': 780.086, 'duration': 3.182}], 'summary': 'Creating routes for register and login, and setting up view folder with layout file.', 'duration': 35.341, 'max_score': 725.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA725635.jpg'}, {'end': 890.197, 'src': 'heatmap', 'start': 853.482, 'weight': 3, 'content': [{'end': 853.782, 'text': 'All right.', 'start': 853.482, 'duration': 0.3}, {'end': 857.486, 'text': "And then let's create a folder called models.", 'start': 854.523, 'duration': 2.963}, {'end': 863.712, 'text': "And we're just going to have one model that's going to be saved as user.js.", 'start': 859.087, 'duration': 4.625}, {'end': 871.6, 'text': "Okay So I think we're ready to test it out and see if it'll run.", 'start': 865.514, 'duration': 6.086}, {'end': 873.421, 'text': "So let's go to our command line.", 'start': 871.68, 'duration': 1.741}, {'end': 875.884, 'text': "And we're going to say node app.", 'start': 874.102, 'duration': 1.782}, {'end': 880.868, 'text': 'Okay, and you can see server started on port 3000.', 'start': 877.585, 'duration': 3.283}, {'end': 886.493, 'text': "So now let's go to localhost 3000.", 'start': 880.868, 'duration': 5.625}, {'end': 890.197, 'text': 'And you can see we have our main layout loading, which is exactly what we want.', 'start': 886.493, 'duration': 3.704}], 'summary': "Created 'user.js' model, tested server on localhost 3000, main layout loaded.", 'duration': 68.828, 'max_score': 853.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA853482.jpg'}, {'end': 1010.854, 'src': 'embed', 'start': 978.777, 'weight': 2, 'content': [{'end': 984.659, 'text': "All right, and we're going to go to public, CSS, and then bring over bootstrap CSS.", 'start': 978.777, 'duration': 5.882}, {'end': 988.94, 'text': "All right, I'm also going to bring over the bootstrap JS file.", 'start': 985.419, 'duration': 3.521}, {'end': 995.522, 'text': 'All right, and then we can also bring over the fonts folder into our public folder.', 'start': 990.92, 'duration': 4.602}, {'end': 998.527, 'text': 'Okay, so now we have that set up.', 'start': 996.886, 'duration': 1.641}, {'end': 1004.33, 'text': "Now what we'll do is go to our layout file and we're going to include our CSS.", 'start': 999.147, 'duration': 5.183}, {'end': 1010.854, 'text': 'Okay, so this will be rel stylesheets and href.', 'start': 1004.811, 'duration': 6.043}], 'summary': 'Setting up public folder with css, js, and fonts for layout file.', 'duration': 32.077, 'max_score': 978.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA978777.jpg'}], 'start': 625.962, 'title': 'Setting up a node.js server', 'summary': 'Describes the process of setting up a node.js server with express, creating directory structure and initializing bootstrap. it covers setting the server port, creating routes and views, and integrating bootstrap.', 'chapters': [{'end': 1118.387, 'start': 625.962, 'title': 'Setting up a node.js server and directory structure', 'summary': 'Describes the process of setting up a node.js server with express, creating directory structure and initializing bootstrap, including setting the server port, creating routes and views, and integrating bootstrap.', 'duration': 492.425, 'highlights': ['Setting server port to process env port or 3000 The server port is set to process environment port or 3000, providing flexibility for deployment and usage.', 'Creating routes for home, register, and login Routes for home, register, and login are created, allowing navigation and rendering of corresponding views.', 'Initializing Bootstrap and including CSS and JS files Bootstrap is initialized and its CSS and JS files are included, enhancing the visual appearance and functionality of the application.', "Creating directory structure with folders for routes, views, public (CSS and JS), and models The directory structure is established with folders for routes, views, public (CSS and JS), and models, organizing the application's components.", 'Starting the Node.js server and testing on localhost The Node.js server is started and tested on localhost, confirming the successful setup and functionality of the application.']}], 'duration': 492.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA625962.jpg', 'highlights': ['Setting server port to process env port or 3000, providing flexibility for deployment and usage.', 'Creating routes for home, register, and login, allowing navigation and rendering of corresponding views.', 'Initializing Bootstrap and including CSS and JS files, enhancing the visual appearance and functionality of the application.', "Creating directory structure with folders for routes, views, public (CSS and JS), and models, organizing the application's components.", 'Starting the Node.js server and testing on localhost, confirming the successful setup and functionality of the application.']}, {'end': 1372.382, 'segs': [{'end': 1218.769, 'src': 'embed', 'start': 1118.967, 'weight': 0, 'content': [{'end': 1122.348, 'text': "Save And now let's go back and reload.", 'start': 1118.967, 'duration': 3.381}, {'end': 1125.049, 'text': 'And now we have all the sample content.', 'start': 1122.988, 'duration': 2.061}, {'end': 1135.452, 'text': "Alright, now, when you edit a handlebars file, you don't have to restart the server, But if you're gonna edit any of the JavaScript, the route files,", 'start': 1125.709, 'duration': 9.743}, {'end': 1139.673, 'text': "anything like that, then you're gonna have to restart it.", 'start': 1135.452, 'duration': 4.221}, {'end': 1142.534, 'text': "Alright. so let's fix this up.", 'start': 1139.673, 'duration': 2.861}, {'end': 1147.756, 'text': "So let's start with renaming this to log in app.", 'start': 1142.534, 'duration': 5.222}, {'end': 1149.336, 'text': 'Okay, now for the menu.', 'start': 1147.756, 'duration': 1.58}, {'end': 1159.154, 'text': "Let's get rid of this class and Okay, home is going to go to just slash, and I'm actually going to change this to dashboard.", 'start': 1149.496, 'duration': 9.658}, {'end': 1168.238, 'text': "All right, this one here, we'll go to slash users slash login, and we'll change the text to login.", 'start': 1159.174, 'duration': 9.064}, {'end': 1175.962, 'text': "This one will go to slash users slash register, and we'll change that.", 'start': 1169.439, 'duration': 6.523}, {'end': 1180.964, 'text': "And then we want a logout link as well, so let's copy that.", 'start': 1177.542, 'duration': 3.422}, {'end': 1184.787, 'text': 'And this will go to users slash logout.', 'start': 1182.506, 'duration': 2.281}, {'end': 1191.83, 'text': "All right, so that's the menu.", 'start': 1190.669, 'duration': 1.161}, {'end': 1193.871, 'text': "Now down here, we don't need the Jumbotron.", 'start': 1191.87, 'duration': 2.001}, {'end': 1194.831, 'text': 'We can get rid of that.', 'start': 1193.891, 'duration': 0.94}, {'end': 1201.033, 'text': "And then for this, let's get rid of the marketing class here and have it be just row.", 'start': 1195.571, 'duration': 5.462}, {'end': 1204.095, 'text': "And then we're going to change this to a 12 column div.", 'start': 1201.694, 'duration': 2.401}, {'end': 1208.657, 'text': "And let's get rid of this whole six column div.", 'start': 1205.835, 'duration': 2.822}, {'end': 1218.769, 'text': "All right, and then what we'll do here Let's get rid of everything in that div.", 'start': 1210.457, 'duration': 8.312}], 'summary': 'Updating handlebars and javascript files, restarting server, modifying menu and layout', 'duration': 99.802, 'max_score': 1118.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA1118967.jpg'}, {'end': 1286.824, 'src': 'embed', 'start': 1255.162, 'weight': 3, 'content': [{'end': 1258.203, 'text': "It's just going to be a heading and a paragraph.", 'start': 1255.162, 'duration': 3.041}, {'end': 1261.324, 'text': "Okay, that's our dashboard.", 'start': 1260.104, 'duration': 1.22}, {'end': 1265.606, 'text': 'Now, I want to get rid of this spacing right here.', 'start': 1261.744, 'duration': 3.862}, {'end': 1272.169, 'text': "So what we'll do is go to Style and go down to the bottom, and we're going to say .", 'start': 1266.386, 'duration': 5.783}, {'end': 1278.899, 'text': 'pageheader set margin top to zero.', 'start': 1272.169, 'duration': 6.73}, {'end': 1283.402, 'text': 'All right, so that moves that up.', 'start': 1278.919, 'duration': 4.483}, {'end': 1286.824, 'text': "Let's also move the footer down.", 'start': 1284.883, 'duration': 1.941}], 'summary': 'Adjustments made to dashboard layout: header margin set to zero, footer repositioned.', 'duration': 31.662, 'max_score': 1255.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA1255162.jpg'}, {'end': 1370.339, 'src': 'embed', 'start': 1319.118, 'weight': 5, 'content': [{'end': 1327.305, 'text': 'we have a form group that has a username label and then an input for the username and then same thing with the password,', 'start': 1319.118, 'duration': 8.187}, {'end': 1328.567, 'text': 'and then we have a submit button.', 'start': 1327.305, 'duration': 1.262}, {'end': 1330.408, 'text': "All right, so let's save that.", 'start': 1329.207, 'duration': 1.201}, {'end': 1332.889, 'text': "Okay, there's our login form.", 'start': 1330.428, 'duration': 2.461}, {'end': 1335.149, 'text': "Now let's create the register form.", 'start': 1333.529, 'duration': 1.62}, {'end': 1339.051, 'text': "Okay, we're going to paste this in.", 'start': 1335.169, 'duration': 3.882}, {'end': 1343.533, 'text': "Okay, same idea as the login form, except it's going to users register.", 'start': 1339.071, 'duration': 4.462}, {'end': 1351.136, 'text': 'It has a name field, a username, an email, a password, and then a confirm password.', 'start': 1344.193, 'duration': 6.943}, {'end': 1354.637, 'text': 'All right, make sure you have the name attributes in here as well.', 'start': 1351.896, 'duration': 2.741}, {'end': 1358.359, 'text': "So we'll save that, and there's our register form.", 'start': 1355.358, 'duration': 3.001}, {'end': 1360.507, 'text': 'Alright, guys.', 'start': 1359.946, 'duration': 0.561}, {'end': 1361.188, 'text': "so what we're going to do?", 'start': 1360.507, 'duration': 0.681}, {'end': 1370.339, 'text': "we're going to stop the video here and then we'll continue on in the next part, where we will work on the registration and submitting a user.", 'start': 1361.188, 'duration': 9.151}], 'summary': 'Created login and register forms with input fields and buttons.', 'duration': 51.221, 'max_score': 1319.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA1319118.jpg'}], 'start': 1118.967, 'title': 'Web app ui and menu updates', 'summary': 'Discusses updating the ui and menu in a web app, including changes to handlebars, javascript files, routes, and menu items. it also covers the creation of a dashboard index, login form, and register form with specific input fields.', 'chapters': [{'end': 1218.769, 'start': 1118.967, 'title': 'Updating ui and menu in web app', 'summary': 'Discusses updating the ui and menu in a web app, focusing on changes made to the handlebars file, javascript files, routes, and menu items, with the need to restart the server for javascript and route file edits.', 'duration': 99.802, 'highlights': ['Changes made to the menu items, including renaming, altering URLs, and adding a logout link. Menu items renamed and URLs altered, including addition of a logout link.', 'Modifications to the HTML structure, including removing the Jumbotron and adjusting column divs. Jumbotron removed, HTML structure modified by adjusting column divs.', 'Not needing to restart the server for editing handlebars files, but needing to do so for JavaScript and route file edits. No server restart needed for handlebars file edits, but necessary for JavaScript and route file changes.']}, {'end': 1372.382, 'start': 1219.629, 'title': 'Dashboard and login form creation', 'summary': 'Covers the creation of a dashboard index with a heading and paragraph, adjustments to the styling for header and footer, and the creation of simple login and register forms, with the login form having a username and password input and the register form having fields for name, username, email, password, and confirm password.', 'duration': 152.753, 'highlights': ['The chapter covers the creation of a dashboard index with a heading and paragraph, adjustments to the styling for header and footer, and the creation of simple login and register forms, with the login form having a username and password input and the register form having fields for name, username, email, password, and confirm password.', 'The dashboard index is created with a simple heading and paragraph.', 'Styling adjustments are made to the page header and footer to remove spacing, with the page header margin-top set to zero and the footer margin-top set to 40 pixels.', 'A simple login form is created with a username and password input, and a submit button.', "A register form is created with fields for name, username, email, password, and confirm password, and it redirects to 'users/register'."]}], 'duration': 253.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Z1ktxiqyiLA/pics/Z1ktxiqyiLA1118967.jpg', 'highlights': ['Menu items renamed and URLs altered, including addition of a logout link.', 'Jumbotron removed, HTML structure modified by adjusting column divs.', 'No server restart needed for handlebars file edits, but necessary for JavaScript and route file changes.', 'The chapter covers the creation of a dashboard index with a heading and paragraph.', 'Styling adjustments made to the page header and footer to remove spacing.', 'A simple login form is created with a username and password input, and a submit button.', "A register form is created with fields for name, username, email, password, and confirm password, and it redirects to 'users/register'."]}], 'highlights': ['Setting up Passport for authentication using Mongoose', "Creating directory structure with folders for routes, views, public (CSS and JS), and models, organizing the application's components", 'Initializing Bootstrap and including CSS and JS files, enhancing the visual appearance and functionality of the application', 'Creating routes for home, register, and login, allowing navigation and rendering of corresponding views', 'Guidance on installing node.js and MongoDB for building a complete login and registration system', 'Setting server port to process env port or 3000, providing flexibility for deployment and usage', 'Including dependencies for the authentication system', 'Setting up bcrypt.js for password hashing without dependencies, providing similar functionality as standard bcrypt in JavaScript', 'Menu items renamed and URLs altered, including addition of a logout link', 'Jumbotron removed, HTML structure modified by adjusting column divs', 'The chapter covers the creation of a dashboard index with a heading and paragraph', 'Styling adjustments made to the page header and footer to remove spacing', 'A simple login form is created with a username and password input, and a submit button', "A register form is created with fields for name, username, email, password, and confirm password, and it redirects to 'users/register'", 'Recommendation to visit nodejs.org for node.js installation, which is easy and straightforward', 'Mention of availability of MongoDB for Windows, Linux, and Mac, with personal experience of already having it installed', 'Creating project folder and generating package.json', 'Configuring middleware like express validator, cookie parser, connect flash, and setting global variables for flash messages', 'Starting the Node.js server and testing on localhost, confirming the successful setup and functionality of the application', 'No server restart needed for handlebars file edits, but necessary for JavaScript and route file changes']}