1
00:00:05,400 --> 00:00:09,650
Welcome back everyone to part three of our Flast log in project in part 3.

2
00:00:09,660 --> 00:00:14,540
We're going to do the heavy duty lifting of actually setting up all our views and our app pie.

3
00:00:14,610 --> 00:00:19,800
So those are going to be the actual functions that connect our forms to our templates and then we'll

4
00:00:19,800 --> 00:00:24,840
finish off by setting up the html template files that connect to each of those views.

5
00:00:24,840 --> 00:00:25,690
Let's get started.

6
00:00:29,040 --> 00:00:35,820
OK here I am located in my apt PI file as a reminder this app that PI file is located at the same level

7
00:00:36,270 --> 00:00:40,170
as my project folder so it's not actually inside my project.

8
00:00:40,200 --> 00:00:45,100
It's at the same level as it let's begin with all of our imports.

9
00:00:45,220 --> 00:00:47,330
We'll start by importing from my project.

10
00:00:47,560 --> 00:00:52,860
Will say import the app and our database and then from flask.

11
00:00:52,860 --> 00:01:04,150
I'm going to import what things will say render template redirects request your L4 flash and abort.

12
00:01:04,270 --> 00:01:09,010
So a couple of things you haven't seen before and then also save from flask.

13
00:01:09,010 --> 00:01:10,220
Log in.

14
00:01:10,510 --> 00:01:22,690
We're going to import a couple of things loggin user log in required and then log out user and essentially

15
00:01:22,690 --> 00:01:28,570
these are going to be things that we can easily Duckery our normal view functions with then from my

16
00:01:28,570 --> 00:01:31,620
project thought models.

17
00:01:32,140 --> 00:01:40,380
Import user and then from my project thought forms are going to import that log in form as well as that

18
00:01:40,380 --> 00:01:44,610
registration form and then finally we'll need to do some security checks.

19
00:01:44,640 --> 00:01:48,640
So save from works security

20
00:01:51,200 --> 00:01:56,440
import generate password hash and check password hash.

21
00:01:56,640 --> 00:01:57,720
Lots of imports there.

22
00:01:57,720 --> 00:02:01,920
You can always copy and paste from our solution files or our notes I should say.

23
00:02:02,280 --> 00:02:06,780
And we're can start off of the home view that's going to be easiest to set up on say app that route

24
00:02:07,320 --> 00:02:10,290
and go directly to the home page.

25
00:02:10,290 --> 00:02:17,770
We'll call this view home and I'm going to return render template and I'll return the home.

26
00:02:17,770 --> 00:02:19,180
H Tim L.

27
00:02:19,350 --> 00:02:22,530
So we'll set up the HVM l files kind of as we go along here.

28
00:02:22,770 --> 00:02:27,980
So first off now that we set up home team let's come over here to home each time.

29
00:02:28,050 --> 00:02:29,180
Begin to fill it out.

30
00:02:29,400 --> 00:02:35,540
But in order to do that I'm going to need to fill out my base h tim l file so I'll start off by typing.

31
00:02:35,570 --> 00:02:39,600
H Tim L and get that autofill there and then inside of the head.

32
00:02:39,600 --> 00:02:44,180
I'm going to link everything I need for bootstrap so I'm going to copy and paste this.

33
00:02:44,190 --> 00:02:48,370
You can copy and paste this from our notes or from the bootstrap file or site.

34
00:02:48,450 --> 00:02:56,690
So here are the links to bootstrap and then inside of this body all have a nav bar so say unordered

35
00:02:56,770 --> 00:02:57,400
list.

36
00:02:59,700 --> 00:03:11,240
Where the class is is equal to NAV and then inside of this list I have a list item and that list items

37
00:03:11,240 --> 00:03:14,420
class is going to be equal to.

38
00:03:14,460 --> 00:03:20,560
Now of Dasch link and we're going to have this be the home page.

39
00:03:20,570 --> 00:03:30,490
So we're going to say home and here we're going to say that the H ref for it is equal to your L for

40
00:03:31,600 --> 00:03:32,520
home.

41
00:03:32,530 --> 00:03:36,850
That way we basically have a button all the way on the left hand side of our NAV bar that when you click

42
00:03:36,850 --> 00:03:40,830
on it it says home and it links you to that home view right now.

43
00:03:40,830 --> 00:03:41,910
That's all I'm going to put in.

44
00:03:41,910 --> 00:03:46,730
We do have more to fill out here but I will leave it blank for now and let's just set up our blocks

45
00:03:46,730 --> 00:03:55,170
so say block contents and there we go later on I have a few more things to put in the nav bar.

46
00:03:55,200 --> 00:03:56,990
But that's all we're going to say for right now.

47
00:03:57,240 --> 00:04:04,220
And then we're to come to our home l and set it up so say extends from that base each time L5 we're

48
00:04:04,230 --> 00:04:09,990
just playing with well set up the content block and then we'll start filling it in.

49
00:04:10,050 --> 00:04:13,550
I'll go ahead and put this in a jumbo tron div..

50
00:04:13,950 --> 00:04:15,950
Obviously that styling choice is up to you.

51
00:04:16,230 --> 00:04:20,230
And then right now I'm going to leave this just blank.

52
00:04:20,340 --> 00:04:26,090
So what I want to do in order to fill out my base HVM further as well as my home team further is set

53
00:04:26,090 --> 00:04:33,080
up my actual log interviews so we will be back to fill each team out base each time on a homemade team.

54
00:04:33,470 --> 00:04:39,010
We're going to leave them kind of half finished right now and come back to that pie and begin working

55
00:04:39,010 --> 00:04:40,030
on those log and.

56
00:04:40,060 --> 00:04:46,260
That way it makes more sense when we actually begin to set up the other views.

57
00:04:46,390 --> 00:04:52,260
So the other view I'm going to set up is going to be a view that welcomes the user after they've logged

58
00:04:52,260 --> 00:04:52,600
in.

59
00:04:52,800 --> 00:04:58,140
So we'll say forward slash welcome Whoops.

60
00:04:58,270 --> 00:05:00,730
Actually not Colin because that's the decorator.

61
00:05:01,090 --> 00:05:06,350
And then I going to add one more decorator here and I'm going to say log in required.

62
00:05:06,710 --> 00:05:12,020
So what that does is it makes sure that the user in order to see this view they have to be logged in

63
00:05:13,740 --> 00:05:14,700
and the actual view.

64
00:05:14,760 --> 00:05:18,640
I'm going to call it welcome underscore user.

65
00:05:18,950 --> 00:05:20,560
And that's going to render the template.

66
00:05:20,600 --> 00:05:23,460
So I'm going to say return render template.

67
00:05:23,760 --> 00:05:30,240
And remember we have that welcome underscore user the H team l file.

68
00:05:30,690 --> 00:05:32,550
So let's explain quickly what's going on here.

69
00:05:32,550 --> 00:05:35,500
Basically a really similar view to our home page.

70
00:05:35,500 --> 00:05:40,650
It's rendering a template except in this case we've added a decorator here called the log required that

71
00:05:40,650 --> 00:05:41,310
Quader.

72
00:05:41,310 --> 00:05:46,080
Which means if you're not logged in and you try to visit this HTL page you're basically going to get

73
00:05:46,080 --> 00:05:50,050
redirected to the log in page and they'll be a message something like hey you have to log in.

74
00:05:50,280 --> 00:05:51,880
So that's how real web sites work.

75
00:05:51,930 --> 00:05:57,270
If you're trying to access a page that you're not allowed to it's it's somehow connected to a requirement

76
00:05:57,270 --> 00:05:57,880
to log in.

77
00:05:57,900 --> 00:06:03,120
And in our case we can do that quite easily with flask log ins logging required decorator.

78
00:06:03,120 --> 00:06:06,880
So that's doing a ton of heavy lifting for us in the backend which is awesome.

79
00:06:07,190 --> 00:06:12,390
So we're gonna save that and since we mentioned welcome user team Well let's go ahead and start filling

80
00:06:12,390 --> 00:06:13,800
it out a little bit.

81
00:06:13,890 --> 00:06:20,060
So we'll come over here to welcome user each team El and this one we can actually do right now completely.

82
00:06:20,200 --> 00:06:22,190
Is not really going to be that much of it.

83
00:06:22,400 --> 00:06:27,300
We're just going to extend from base HVM el.

84
00:06:27,540 --> 00:06:36,730
And then I will say block content's all set up my class have to be a jumbotron and here I'm just going

85
00:06:36,730 --> 00:06:45,000
to say contrats you are logged in OK and that's actually the end of Volcom user that's all it's going

86
00:06:45,000 --> 00:06:45,570
to say.

87
00:06:45,780 --> 00:06:49,500
So if you're not logged in you're not going to be able to see this message of congressional logged in

88
00:06:49,800 --> 00:06:53,680
if you are log then you're going to see this as the welcome page for you.

89
00:06:53,700 --> 00:06:56,180
So now it's come back to our app that PI file.

90
00:06:56,370 --> 00:07:00,990
So we still need to finish off homes team as well as the base HTL template.

91
00:07:01,290 --> 00:07:04,670
But welcome user that template is now done for us.

92
00:07:04,740 --> 00:07:10,090
So now we're going to do is start setting up our log in views.

93
00:07:10,150 --> 00:07:14,740
So those are the two biggest views I'm going to do one more view before we actually handled the registration

94
00:07:14,740 --> 00:07:18,210
and loggin view and that's the log out view.

95
00:07:18,240 --> 00:07:23,340
So I'm just going to route this two forward slash log out.

96
00:07:23,610 --> 00:07:28,990
So if the user wants to log out they can come to this page and log out in order to see this you should

97
00:07:28,990 --> 00:07:29,620
be logged in.

98
00:07:29,620 --> 00:07:34,300
So we're going to also say log in required which kind of makes sense you can't log out if you're not

99
00:07:34,300 --> 00:07:43,240
logged in and we're going to call this view log out and here we're going to say log out user call that

100
00:07:43,240 --> 00:07:46,340
functions or remember log out user scroll back up here.

101
00:07:46,360 --> 00:07:48,260
I imported this from a flask log in.

102
00:07:48,280 --> 00:07:50,930
So this is all automatically done for us.

103
00:07:51,160 --> 00:07:54,060
Oh we need to do is import that and call log out user.

104
00:07:54,340 --> 00:08:00,370
And then I can flash the message you logged out or you've been logged out whatever you want to flash

105
00:08:00,370 --> 00:08:01,630
the user.

106
00:08:01,630 --> 00:08:06,220
And then I'm going to return them on when to redirect them to the home page.

107
00:08:06,220 --> 00:08:10,720
So say you're l4.

108
00:08:10,760 --> 00:08:13,630
OK so that's the logo.

109
00:08:13,700 --> 00:08:18,110
Now all that's left is to set up our log in and register views.

110
00:08:18,140 --> 00:08:21,380
These are the most complicated so we're going to need a lot of room for them.

111
00:08:21,380 --> 00:08:28,660
We'll start off with the log in view so say app route and so take us to the log in page.

112
00:08:28,710 --> 00:08:33,240
And because there is a form on this page in order to log in we're going to say that the methods are

113
00:08:33,240 --> 00:08:41,800
get and post and then we'll set up our log in to view and this will be pretty similar to what we've

114
00:08:41,800 --> 00:08:42,480
done in the past.

115
00:08:42,490 --> 00:08:50,770
We're going to set up that log in a form and then we'll say if form validate on submit we'll just grab

116
00:08:50,770 --> 00:08:58,710
the user from our user models table so as say a variable user is equal to user query.

117
00:08:59,730 --> 00:09:07,080
The filter by and I'm going to filter by their e-mail supplied will say email is equal to form the e-mail

118
00:09:07,270 --> 00:09:07,890
data.

119
00:09:08,030 --> 00:09:11,950
It will grow the first user off of that since emails are unique.

120
00:09:12,130 --> 00:09:17,080
So we grab that user based off the email they provided for their log in and then we're going to say

121
00:09:17,110 --> 00:09:28,190
if user check password remember that the user model if we come back here two models that apply we have

122
00:09:28,190 --> 00:09:31,320
a check password of mess method off a user object.

123
00:09:31,340 --> 00:09:35,030
So that's what I'm calling right here the check password is the one we set up in our models that pi

124
00:09:35,030 --> 00:09:42,540
file will say if user check password and then we're going to provide the password from the form a form

125
00:09:42,600 --> 00:09:52,780
of password that data Elsi and user is not None.

126
00:09:52,790 --> 00:09:58,400
So what this does is it basically checks that a user was actually supplied and the password is correct.

127
00:09:58,400 --> 00:10:05,030
So we have this part which is verifying that the password is correct and this part actually saying hey

128
00:10:05,030 --> 00:10:09,580
there was a user supplied because maybe the person tries to log in to a user it doesn't exist.

129
00:10:09,590 --> 00:10:11,290
So then this would return None.

130
00:10:11,450 --> 00:10:13,590
So that's what this is checking for.

131
00:10:13,610 --> 00:10:18,230
So assuming that we do have a user and they provided the right password then we're ready to log them

132
00:10:18,230 --> 00:10:18,850
in.

133
00:10:18,900 --> 00:10:24,410
And lucky for us we can do that by simply saying log in user and then passing in that user.

134
00:10:24,470 --> 00:10:29,330
If you're wondering where this logon user function came from we imported it back appear just like we

135
00:10:29,330 --> 00:10:30,800
imported log out user.

136
00:10:30,800 --> 00:10:35,580
So logging user simple import from flask a log in and hopefully now you get the idea that Flast log

137
00:10:35,580 --> 00:10:41,630
in is making this whole thing really simple for us through just a simple calls of decorator's and some

138
00:10:41,630 --> 00:10:43,010
importing of functions.

139
00:10:43,010 --> 00:10:46,270
All you need to know is really when to put them in.

140
00:10:46,280 --> 00:10:52,510
So now that we've locked in our user what we can do is the following we can flash them a message saying

141
00:10:54,100 --> 00:10:59,710
logged in successfully.

142
00:10:59,730 --> 00:11:05,010
Now if the user was trying to visit a page that required a log in what we can do is we can save that

143
00:11:05,220 --> 00:11:07,450
as next.

144
00:11:07,480 --> 00:11:16,840
So I'm going to say next is equal to request args gets next.

145
00:11:16,840 --> 00:11:25,120
Now what happens is in the initial request for instance if a user was trying to access the welcome user

146
00:11:25,210 --> 00:11:26,700
and the logon was required.

147
00:11:26,830 --> 00:11:32,110
Flask saves that actual request for that page as next.

148
00:11:32,140 --> 00:11:34,530
So we're actually grabbing it from the request.

149
00:11:34,720 --> 00:11:37,370
So basically your user hasn't logged in yet.

150
00:11:37,390 --> 00:11:42,190
They're trying to access a page or they need to be logged and such as that welcome user page flask on

151
00:11:42,190 --> 00:11:45,390
the back and saves that as their next page.

152
00:11:45,490 --> 00:11:51,520
And then it redirects them to this log in form and then assuming they successfully logged in then we

153
00:11:51,520 --> 00:11:53,080
have and we're going to request.

154
00:11:53,080 --> 00:11:58,900
What was that next page they wanted to go to and it is a legitimate page if they didn't just go directly

155
00:11:58,900 --> 00:12:00,020
to the log in form.

156
00:12:00,310 --> 00:12:09,710
So I'll say if next is done or not next zero is equal to a forward slash.

157
00:12:09,940 --> 00:12:15,220
So they were just saying hey if we're going to check if that next exists otherwise we'll go to the welcome

158
00:12:15,220 --> 00:12:15,640
page

159
00:12:18,470 --> 00:12:25,490
we'll say next is equal to your l4.

160
00:12:25,710 --> 00:12:28,770
Welcome user.

161
00:12:28,860 --> 00:12:39,380
And if that doesn't happen to trigger then we just say return your or return the redirect for next OK.

162
00:12:39,600 --> 00:12:44,620
So again this next that's holding in their request what their page was going to be.

163
00:12:44,650 --> 00:12:50,910
However if it was done or it wasn't on this domain that was going to redirect them to go back to the

164
00:12:50,910 --> 00:12:52,320
welcome user page.

165
00:12:52,320 --> 00:12:57,100
So once we've done that we set up the next they're going to be the next one they require or welcome

166
00:12:57,150 --> 00:13:03,490
user than we're going to redirect them to that and then to actually show this page the first time around

167
00:13:03,820 --> 00:13:14,510
we're going to return render template for loggin h tim l l pass in the form that's form.

168
00:13:14,520 --> 00:13:16,820
OK so a lot of stuff going on there.

169
00:13:16,850 --> 00:13:19,870
I want to quickly review this.

170
00:13:20,060 --> 00:13:22,080
I'm setting up my log in view.

171
00:13:22,300 --> 00:13:26,060
I create a log in a form and checking the form is valid on submission.

172
00:13:26,150 --> 00:13:31,380
Basically grabbing that user based on the email I'm checking hey does that user actually exist.

173
00:13:31,430 --> 00:13:32,810
So is the user not none.

174
00:13:32,960 --> 00:13:34,930
And was the password correct.

175
00:13:34,990 --> 00:13:40,760
If that's all true that I going to log them in or tell them hey logged in successfully annoyed to grab

176
00:13:41,060 --> 00:13:43,550
what their actual requested page was.

177
00:13:43,550 --> 00:13:49,340
So again this next That's only something if they were trying to access a page that they had to be logged

178
00:13:49,340 --> 00:13:53,000
into view such as the welcome user page it's actually going to be none.

179
00:13:53,060 --> 00:13:55,600
If they went directly to the logon page.

180
00:13:55,670 --> 00:13:56,140
OK.

181
00:13:56,360 --> 00:14:02,130
So if next happens to be none then I'm just going to say OK send them straight to the welcome user page.

182
00:14:02,300 --> 00:14:06,950
If that's not the case then I'm going to redirect that to the page we're trying to access in the beginning.

183
00:14:06,980 --> 00:14:07,580
OK.

184
00:14:07,760 --> 00:14:12,710
Then in order for us to actually see this views as the beginning we're going to say return render a

185
00:14:12,710 --> 00:14:18,380
template for the log in page and let me quickly make sure that me in the station is correct here.

186
00:14:18,470 --> 00:14:23,180
This return rendered template should be lined up with this iframe here.

187
00:14:23,240 --> 00:14:24,780
So just keep that in mind.

188
00:14:25,780 --> 00:14:28,680
And remember you can always copy and paste from our notes.

189
00:14:28,690 --> 00:14:31,920
Last thing you want to set up is our register of view.

190
00:14:32,430 --> 00:14:34,630
It's going to come down here and set that up.

191
00:14:34,630 --> 00:14:36,190
Let me zoom back in here.

192
00:14:37,000 --> 00:14:41,820
And then once you finish setting up a register view in the next lecture we'll finish off the HTML files.

193
00:14:42,160 --> 00:14:44,620
But this one is a little bit simpler.

194
00:14:44,650 --> 00:14:47,100
We're just going to route them to the register page.

195
00:14:47,130 --> 00:14:49,470
So this is assuming they haven't actually registered before.

196
00:14:50,430 --> 00:14:58,150
We're going to have a form here so we'll say get post the register.

197
00:14:58,240 --> 00:14:59,830
We'll set up a registration form.

198
00:14:59,830 --> 00:15:01,260
Remember we already imported that.

199
00:15:01,270 --> 00:15:03,720
So we'll see an instance of the registration form.

200
00:15:04,000 --> 00:15:12,310
And again if form validate on submit then we'll just create a user object so a user is equal to user

201
00:15:12,970 --> 00:15:15,970
where the email is the form email they provided.

202
00:15:16,000 --> 00:15:26,550
So form email data the user name for that new user is the form user name data that they provide in and

203
00:15:26,560 --> 00:15:33,400
the password is going to be the deform password data that they provided.

204
00:15:33,400 --> 00:15:37,420
Remember on the back end our model isn't actually going to say this password it's going to hash it for

205
00:15:37,420 --> 00:15:38,000
us.

206
00:15:39,080 --> 00:15:42,790
Once we've done that we created that user and we just registered him.

207
00:15:42,920 --> 00:15:45,320
We're going to add them to our actual table.

208
00:15:45,350 --> 00:15:55,140
So say add this user and then commit those changes and then will flash the message saying thanks for

209
00:15:55,300 --> 00:15:56,190
registration

210
00:15:59,780 --> 00:16:01,590
or whatever you want to say.

211
00:16:01,590 --> 00:16:07,080
And then once they're registered we'll just return a redirect to the logon page.

212
00:16:07,280 --> 00:16:16,270
So say you're all for logging and in order to see the for the first time around we'll say return render

213
00:16:16,300 --> 00:16:23,550
a template register the HMO and we'll pass and form equal to form.

214
00:16:23,550 --> 00:16:29,280
So on the actual template they'll be the form there and at the bottom of all this we'll just say if

215
00:16:30,400 --> 00:16:38,400
name is equal to Main take the app run it and debug it obviously in production you would insert debug

216
00:16:38,460 --> 00:16:39,930
equal to true.

217
00:16:39,930 --> 00:16:40,260
All right.

218
00:16:40,290 --> 00:16:44,050
We finished the app that pi file this is by far the largest file that we're working with.

219
00:16:44,150 --> 00:16:49,470
Let's see a really quick review in the next lecture will finish off our templates so appear.

220
00:16:49,500 --> 00:16:53,130
We did all our imports specifically the ones that you should be paying attention to.

221
00:16:53,130 --> 00:16:55,720
Are these flask loggin ones so lots of useful functions.

222
00:16:55,870 --> 00:17:01,890
The user and log out user and also a nice decorator that can quickly add logging requirements to any

223
00:17:01,890 --> 00:17:03,870
view just by decorating it.

224
00:17:03,900 --> 00:17:09,600
Then we imported the user model the log in the registration form we created as well as some security

225
00:17:11,320 --> 00:17:11,620
and.

226
00:17:11,670 --> 00:17:15,780
Looking back now I don't think we actually use these generate password or check password hash so you

227
00:17:15,780 --> 00:17:17,350
can probably just ignore these.

228
00:17:17,580 --> 00:17:21,960
I was thinking we would have to generate the password hash ourselves but our user model actually did

229
00:17:21,960 --> 00:17:24,230
that so we didn't actually end up using those.

230
00:17:24,270 --> 00:17:30,630
OK then we have our home page our welcome user page of flogging required our log out page logons also

231
00:17:30,630 --> 00:17:37,050
required to log out and we call this simple function log out the user and then we have log in here.

232
00:17:37,050 --> 00:17:40,800
Sets up the log and form checks to see that the right user was done.

233
00:17:40,800 --> 00:17:46,290
And then we log them in redirect to the page that they were looking for or we register them and create

234
00:17:46,320 --> 00:17:47,540
a new user.

235
00:17:47,610 --> 00:17:51,570
OK then the next lecture will finish off this project by setting up the templates.

236
00:17:51,600 --> 00:17:52,250
We'll see if.