1 00:00:05,340 --> 00:00:10,500 Welcome back everyone to part 4 of the flask log in series of lectures in part for what we're going 2 00:00:10,500 --> 00:00:14,300 to do is just finish off by completing those actual templates. 3 00:00:14,430 --> 00:00:15,210 Let's get started. 4 00:00:15,330 --> 00:00:19,130 OK so in the last lecture we finished off this large app that PI file. 5 00:00:19,140 --> 00:00:21,730 Now it's time to complete the HVM files. 6 00:00:21,750 --> 00:00:23,330 We'll start by fixing our base. 7 00:00:23,370 --> 00:00:24,810 HVM l file. 8 00:00:24,810 --> 00:00:28,430 So as a quick note I fixed a little mistake here from our previous lectures. 9 00:00:28,440 --> 00:00:33,610 I forgot to import this as an anchor tag that I stuck the ref inside of the list class. 10 00:00:33,630 --> 00:00:37,570 So go ahead and go back and check on that or just copy and paste from our notes. 11 00:00:37,590 --> 00:00:39,070 So I set up an anchor tab. 12 00:00:39,270 --> 00:00:42,530 I have my nav bar and right now it's sending it home. 13 00:00:42,660 --> 00:00:48,240 So we have this class and this should be nav and we have this nav link. 14 00:00:48,240 --> 00:00:54,980 Now I'm going to do is I'm going to have an if statement here that says if the current user thought 15 00:00:55,120 --> 00:00:56,380 is authenticated 16 00:00:59,940 --> 00:01:02,650 that I'm going to show the link for logging out. 17 00:01:02,970 --> 00:01:07,570 So I create a list item and I'll give it the class. 18 00:01:07,780 --> 00:01:16,450 Now underscore link and then I'll create an anchor tag here and Atra for that is going to be the URL 19 00:01:17,030 --> 00:01:18,220 for log out. 20 00:01:20,470 --> 00:01:24,660 And that's actually why we didn't need a separate HTML file for logging out. 21 00:01:24,760 --> 00:01:29,860 Basically once they click log out it just executes that log out view and then it's redirects them to 22 00:01:29,860 --> 00:01:30,850 another page. 23 00:01:30,850 --> 00:01:32,470 So if we come back to Apple Pie. 24 00:01:32,800 --> 00:01:38,680 Notice how our log out view actually just logs out the user and then redirects them home. 25 00:01:38,710 --> 00:01:41,420 There's no actual HFM file associated with that. 26 00:01:41,620 --> 00:01:43,620 So there's no log out the T.M.. 27 00:01:44,100 --> 00:01:44,360 OK. 28 00:01:44,380 --> 00:01:46,380 Coming back to base that is Tamil. 29 00:01:46,390 --> 00:01:52,360 The other thing to notice is the way we're able to grab this item current underscore user is from using 30 00:01:52,360 --> 00:01:54,120 the flask logging library. 31 00:01:54,130 --> 00:01:59,620 So remember we are creating our models were able to have this load user functionality Flast log in is 32 00:01:59,620 --> 00:02:02,200 essentially handling everything on the back end for us. 33 00:02:02,200 --> 00:02:07,090 In order for us to just in the template say grab the current user and check their authenticated. 34 00:02:07,420 --> 00:02:14,370 So if that's the case if they're authenticated I'm going to given the option to log out else or we're 35 00:02:14,370 --> 00:02:18,340 going to do is given the option to either log in or register. 36 00:02:18,480 --> 00:02:28,240 So I have a list item here again Olby class nav link and it's going to be an anchor at and it's going 37 00:02:28,240 --> 00:02:29,920 to have a URL for. 38 00:02:30,210 --> 00:02:35,980 And before we fill that one out what I'm going to do here is just copy and paste this Cargan have one 39 00:02:35,980 --> 00:02:38,170 for log in and one for register. 40 00:02:38,170 --> 00:02:40,220 So we'll do the log in one first. 41 00:02:40,300 --> 00:02:48,910 I'll say log in and inside of the tag I'll just have it say log in and then here will have it say register 42 00:02:49,720 --> 00:02:55,200 to match our registration view and then in here we'll just have it say register. 43 00:02:55,630 --> 00:02:55,930 OK. 44 00:02:55,930 --> 00:03:00,700 So now our NAV bar is complete and it will actually change depending if the user is logged in or not. 45 00:03:00,700 --> 00:03:05,410 So if the users log in they see the log out button on the net for if they're not logged in then they 46 00:03:05,410 --> 00:03:07,680 see log in or register. 47 00:03:07,690 --> 00:03:08,190 OK. 48 00:03:08,440 --> 00:03:13,760 Now let's check back on the home page so our home team L right now show us the Jumbotron. 49 00:03:13,960 --> 00:03:16,450 So let's go ahead and do the same sort of check. 50 00:03:16,570 --> 00:03:26,490 We'll say if current user thought is authenticated then we'll do is we'll just walk up that will say 51 00:03:26,760 --> 00:03:33,210 paragraph and we're actually going to grab the current user and grab their user name. 52 00:03:33,220 --> 00:03:38,680 So again the way I'm able to just call this current user is from the fact that we set up this load user 53 00:03:38,980 --> 00:03:40,420 in the models that PI file. 54 00:03:40,630 --> 00:03:43,300 So that comes automatically when are using Flast logon. 55 00:03:43,540 --> 00:03:47,270 If you're not using the flash logging library you wouldn't be able to just call it like that. 56 00:03:47,830 --> 00:03:49,030 OK then we're going to say. 57 00:03:49,030 --> 00:03:49,920 Else. 58 00:03:50,290 --> 00:03:55,390 And if they're not we'll just say Please log in or register. 59 00:03:55,390 --> 00:03:59,260 So again if you go to the home page and your log then you'll see something like. 60 00:03:59,260 --> 00:04:00,780 And I will say hi. 61 00:04:00,790 --> 00:04:05,640 Your user name else will see a sign that says Please log in and register. 62 00:04:05,650 --> 00:04:11,010 So now our home page is done and we're going to do now is set up our log in T.M.. 63 00:04:11,400 --> 00:04:12,580 It's going to look really similar. 64 00:04:12,580 --> 00:04:19,760 We're going to extend from base HVM El and then we'll set up a content block and then after that we'll 65 00:04:19,760 --> 00:04:21,110 just set up our form. 66 00:04:21,440 --> 00:04:28,100 So I'll create our form and we don't need a class or action we'll just keep the method as post and then 67 00:04:28,130 --> 00:04:37,950 everything else will just fill in with our form tag calls soci form create the hidden tag for this SRF 68 00:04:37,950 --> 00:04:44,910 security feature just to make sure that the forms are legitimate and they will say form grab the email 69 00:04:44,910 --> 00:04:48,010 label and then say form. 70 00:04:48,070 --> 00:04:52,490 Email and then also accept the password. 71 00:04:52,490 --> 00:05:01,940 So remember this is the log in view so see if form password label and then form that password 72 00:05:04,980 --> 00:05:10,200 and then finally will submit the form form submit. 73 00:05:10,600 --> 00:05:12,970 OK so this is the log in form on the logon page. 74 00:05:13,000 --> 00:05:14,830 Just a hidden tag it for security. 75 00:05:14,950 --> 00:05:20,830 And then it's enter your email enter your password submit then we'll go ahead and fill out our register 76 00:05:20,830 --> 00:05:21,570 page. 77 00:05:21,790 --> 00:05:29,380 So register we're going to extends from base T.M. to get that nav bar there will say block content's 78 00:05:30,490 --> 00:05:32,610 and we'll go ahead and start a form here. 79 00:05:32,860 --> 00:05:37,570 This form going to be really similar to our blog page except it's the registration form. 80 00:05:37,570 --> 00:05:39,310 So we're going to have a couple of more things here. 81 00:05:39,340 --> 00:05:49,380 I'll say form he didn't tag just like we did last time and then we'll set up for email able and then 82 00:05:49,380 --> 00:06:05,220 the form email will also grab their username so form user name label and say form user name and order 83 00:06:05,290 --> 00:06:08,240 for this to all look good and to add some breaks in here. 84 00:06:08,330 --> 00:06:09,610 So let me add a couple of breaks though. 85 00:06:09,620 --> 00:06:12,940 This all doesn't just appear on one line especially when you zoom in like I do. 86 00:06:13,370 --> 00:06:23,900 And they'll say for password label and they'll say form password I'll go ahead and insert another break 87 00:06:23,930 --> 00:06:24,470 there. 88 00:06:25,280 --> 00:06:29,870 And then let's also add in remember they're registering to confirm their password. 89 00:06:29,870 --> 00:06:36,890 So we say a foreign password or actually we call it pass underscore confirm the label for that one and 90 00:06:36,890 --> 00:06:44,060 then form past confirm one more break and then we'll have the submit button. 91 00:06:44,060 --> 00:06:47,510 So form submit. 92 00:06:47,620 --> 00:06:50,910 OK so those are just all the fields from the registration form. 93 00:06:51,450 --> 00:06:51,760 OK. 94 00:06:51,780 --> 00:06:53,750 We just filled in a lot less. 95 00:06:53,760 --> 00:06:55,440 Hopefully we didn't make any mistakes. 96 00:06:55,440 --> 00:06:59,550 I'm sure we may have made a typo somewhere so let's go ahead and try this all out. 97 00:06:59,550 --> 00:07:05,990 I'm going to start by saying flask D-B in it to actually create that user model. 98 00:07:06,300 --> 00:07:08,690 So we'll run this make sure we get no errors. 99 00:07:09,700 --> 00:07:11,410 Ok looks like I may have gone in there. 100 00:07:11,410 --> 00:07:12,110 Let's see. 101 00:07:12,160 --> 00:07:13,640 Module is not callable. 102 00:07:13,690 --> 00:07:16,110 So looks like all my apps config. 103 00:07:16,150 --> 00:07:17,410 I have a small typo here. 104 00:07:17,410 --> 00:07:18,700 Let's go back and check it out. 105 00:07:20,470 --> 00:07:21,630 So let's come back. 106 00:07:21,640 --> 00:07:25,790 It looks like it's on line 14 him-I in it that PI file. 107 00:07:25,790 --> 00:07:29,170 So I'll come over here come in at that pi. 108 00:07:29,170 --> 00:07:30,060 Check this out. 109 00:07:30,070 --> 00:07:34,710 So I have online 14 app config sequel alchemy database sequel. 110 00:07:34,810 --> 00:07:35,770 Oh estopped path. 111 00:07:35,800 --> 00:07:39,330 And that should have been oh stop have thought join. 112 00:07:39,340 --> 00:07:41,200 So my apologies for that typo. 113 00:07:41,590 --> 00:07:46,170 But you're bound to make many typos for such a larger structure project. 114 00:07:46,200 --> 00:07:47,310 Let's try this again. 115 00:07:47,590 --> 00:07:49,180 Let's make sure we save those changes. 116 00:07:50,270 --> 00:07:54,550 Run fast and it's and looks like it all worked out. 117 00:07:54,580 --> 00:07:56,610 So now I'll try this flask. 118 00:07:56,640 --> 00:08:04,280 D-B migrate and will give the message of greeting users run that. 119 00:08:04,440 --> 00:08:05,910 OK looks like that will work though. 120 00:08:06,000 --> 00:08:07,120 Finally I'll say flask. 121 00:08:07,140 --> 00:08:15,180 DBI upgrade and looks like everything is running so let's run our application and check that it works. 122 00:08:15,200 --> 00:08:20,380 So going to bring in my browser and see if I can create a new user so register as a new user and that 123 00:08:20,380 --> 00:08:21,190 log in. 124 00:08:21,550 --> 00:08:27,340 So bringing in my browser and already kind of zoomed in here so it says Please log in or register looks 125 00:08:27,340 --> 00:08:30,510 like that's working if a hit the home page brings me back to the home page. 126 00:08:30,560 --> 00:08:31,530 Click logon. 127 00:08:31,630 --> 00:08:32,710 I see the log in form. 128 00:08:32,710 --> 00:08:34,850 It's kind of ugly right now but you get the idea. 129 00:08:34,850 --> 00:08:35,820 Never click register. 130 00:08:35,830 --> 00:08:39,320 I see this registration form all right so let's try registering. 131 00:08:39,340 --> 00:08:40,570 I'm just going to say. 132 00:08:40,570 --> 00:08:41,590 Example. 133 00:08:41,610 --> 00:08:42,590 Email. 134 00:08:42,900 --> 00:08:43,630 So example. 135 00:08:43,630 --> 00:08:45,950 Example dot com username. 136 00:08:45,990 --> 00:08:49,140 This will also be example password. 137 00:08:49,720 --> 00:08:52,570 I'll just make a really bad example of password as well. 138 00:08:52,580 --> 00:08:58,870 And will make example confirm password or register and it looks like I didn't get redirected upon registering. 139 00:08:58,870 --> 00:09:03,400 So let me make sure that my password actually matched. 140 00:09:03,500 --> 00:09:10,830 So I'll say password password register. 141 00:09:10,830 --> 00:09:11,360 There we go. 142 00:09:11,370 --> 00:09:16,170 So I had some error there my password wasn't matching that was just a simple typo on my part and now 143 00:09:16,170 --> 00:09:20,710 is try logging in since we were successfully rerouted to the log in page. 144 00:09:20,880 --> 00:09:21,390 So again. 145 00:09:21,450 --> 00:09:28,710 Example at exampled dot com is the email I'm using and I just typed in password as my password log in 146 00:09:29,400 --> 00:09:30,380 and I'm getting this error. 147 00:09:30,420 --> 00:09:31,170 Name error. 148 00:09:31,200 --> 00:09:32,280 None is not defined. 149 00:09:32,310 --> 00:09:36,340 So let's try to debug this when I scroll down here. 150 00:09:36,520 --> 00:09:43,120 It says if user check password if user is not none so I should capitalize that and there let me go back 151 00:09:43,210 --> 00:09:44,620 and fix that. 152 00:09:44,680 --> 00:09:46,840 Come over here too. 153 00:09:46,900 --> 00:09:52,180 Let's make sure we figure out what that's on apple pie of our view. 154 00:09:52,180 --> 00:09:59,610 So if user is not that should have been a capitalized and OK there we go save that and now let's try 155 00:09:59,610 --> 00:10:01,290 refreshing our logon. 156 00:10:01,320 --> 00:10:05,820 We're going to go ahead and submit our form and there we go it says compress your are logged in. 157 00:10:05,970 --> 00:10:08,060 So we come back to home and it says hi. 158 00:10:08,070 --> 00:10:08,970 Example. 159 00:10:08,970 --> 00:10:09,670 Perfect. 160 00:10:09,930 --> 00:10:10,220 OK. 161 00:10:10,230 --> 00:10:15,130 And I'm not seeing any laga views so let's go ahead and check the nav bar make sure that's OK. 162 00:10:15,270 --> 00:10:17,380 Coming back to our base h team L. 163 00:10:17,520 --> 00:10:22,230 It looks like when I set up this nav link I forgot to actually write some text here for log out. 164 00:10:22,590 --> 00:10:28,160 So let's make sure that they're going to save that spring in our page again refresh. 165 00:10:28,170 --> 00:10:29,230 OK now I see log out. 166 00:10:29,240 --> 00:10:30,560 So is practice logging out. 167 00:10:30,870 --> 00:10:31,230 There you go. 168 00:10:31,230 --> 00:10:33,470 Now that says Please log in or register. 169 00:10:33,490 --> 00:10:33,760 All right. 170 00:10:33,780 --> 00:10:37,420 So we had a couple of typos but none of them were anything we couldn't handle. 171 00:10:37,530 --> 00:10:43,270 But hopefully now you understand how you can actually add user authentication to your websites that 172 00:10:43,290 --> 00:10:48,840 quickly go over the main points so the main points is you're going to set up a user model as well as 173 00:10:48,840 --> 00:10:50,030 a load user function. 174 00:10:50,250 --> 00:10:54,270 So this will allow you to access the user authenticated method. 175 00:10:54,420 --> 00:10:59,390 You can check our models up-I file in the notes for more methods that are available to you. 176 00:10:59,540 --> 00:11:00,630 So we set up a user. 177 00:11:00,660 --> 00:11:06,180 Usually it's going to be ID email username you're going to have their password or password and then 178 00:11:06,390 --> 00:11:08,020 be able to check their password. 179 00:11:08,400 --> 00:11:12,990 Then the apps on my file we just went ahead and we were able to use these decorator's like logging required 180 00:11:13,290 --> 00:11:19,650 as well as log out user and log in user in order to perform logging in and logging out and all of that 181 00:11:19,650 --> 00:11:23,360 comes conveniently with flask log and library. 182 00:11:23,360 --> 00:11:27,510 All right if you have any questions feel free to post the Kewney forums and I'll see you at the next 183 00:11:27,510 --> 00:11:28,190 lecture.