1
00:00:00,120 --> 00:00:00,500
Either.

2
00:00:00,510 --> 00:00:01,450
Welcome back.

3
00:00:01,770 --> 00:00:06,290
So in this lesson we're focusing on improving the usability of our camp.

4
00:00:06,510 --> 00:00:12,990
Right now it's kind of a disaster as far as giving feedback or error messages or success messages to

5
00:00:12,990 --> 00:00:13,710
our users.

6
00:00:13,920 --> 00:00:17,090
And by disaster I just mean that it doesn't exist at all.

7
00:00:17,100 --> 00:00:21,400
We have a council log which obviously our users can't see.

8
00:00:21,480 --> 00:00:27,000
We see it as developers in our consul here where the servers are running but no one else sees that.

9
00:00:27,360 --> 00:00:31,770
So we're going to focus on adding some messages in and I'll show you what that looks like in just a

10
00:00:31,770 --> 00:00:32,370
moment.

11
00:00:32,460 --> 00:00:36,790
Before I do that we have three main objectives I'll just talk about them now.

12
00:00:36,990 --> 00:00:37,980
So I do want to demo it.

13
00:00:37,980 --> 00:00:44,490
First show you what to expect how it will look how it behaves then we'll actually install and configure

14
00:00:44,580 --> 00:00:46,630
a package called connect flash.

15
00:00:46,830 --> 00:00:53,580
So what we're doing is adding in Flash or the flasher a flash of her different pronouns and people call

16
00:00:53,580 --> 00:00:53,940
it.

17
00:00:54,000 --> 00:00:56,070
In other frameworks the flash hash.

18
00:00:56,070 --> 00:01:02,010
People call it flash messages but basically the idea is we're going to show a message to a user like

19
00:01:02,250 --> 00:01:05,520
successfully logged in or successfully logged out.

20
00:01:05,700 --> 00:01:08,310
Or maybe something like you don't have permission to do that.

21
00:01:08,320 --> 00:01:12,270
Or Please log in before you add a campground something like that.

22
00:01:12,390 --> 00:01:17,640
We want to show it to a user just once and we don't want it to be a permanent fixture on the page.

23
00:01:17,700 --> 00:01:22,680
We want to just flash it to them one time and then it goes away on the next page or if the user refreshes

24
00:01:23,310 --> 00:01:30,780
and then the last thing is to add in our flash messages to the header and add in some bootstrap classes

25
00:01:30,780 --> 00:01:31,470
that will style.

26
00:01:31,470 --> 00:01:34,230
So there's some built in ways of doing things with bootstrap.

27
00:01:34,350 --> 00:01:40,650
This is such a common feature to have messages that are flashed to your user on all sorts of sites that

28
00:01:40,650 --> 00:01:44,100
bootstrap has some built in styling for that that will take advantage of.

29
00:01:44,250 --> 00:01:47,850
So I'll start by showing you what it will look like.

30
00:01:47,940 --> 00:01:49,530
So I have up camp running.

31
00:01:49,610 --> 00:01:56,190
Let me well I'll show you if I just log out right now so I'm signed in as freezer if I log out I get

32
00:01:56,190 --> 00:01:59,970
a message that says loungy up we can change that message text.

33
00:01:59,970 --> 00:02:06,840
Obviously if I try and add a new campground right now when I'm not logged in I now should get a message

34
00:02:06,840 --> 00:02:09,340
that says you must be signed in to do that.

35
00:02:09,420 --> 00:02:11,070
And notice that it's read here.

36
00:02:11,520 --> 00:02:13,420
So that's a bootstrap class.

37
00:02:13,440 --> 00:02:18,610
This alert that we get if I were fresh the page goes away.

38
00:02:18,690 --> 00:02:25,690
So now if I try and sign up I must say that I sign up as resti which already exists.

39
00:02:25,950 --> 00:02:28,500
So I shouldn't be able to do that in the past.

40
00:02:28,500 --> 00:02:30,070
The page would just refresh.

41
00:02:30,330 --> 00:02:36,060
But what we'll end up with is a message that says a user with a given user name is already registered

42
00:02:36,070 --> 00:02:36,470
.

43
00:02:36,870 --> 00:02:37,370
OK.

44
00:02:37,470 --> 00:02:39,490
So let me sign up as someone new.

45
00:02:39,690 --> 00:02:42,620
Let's try doing blunder.

46
00:02:42,630 --> 00:02:50,330
I've now moved apparently from vegetables to household appliances and I get a message success successfully

47
00:02:50,350 --> 00:02:50,890
signed up.

48
00:02:50,910 --> 00:02:52,330
Nice to meet you Bunder.

49
00:02:52,380 --> 00:02:55,130
And if I refresh the page it goes away.

50
00:02:55,710 --> 00:03:00,560
So there are other places that we have those messages but I'll show you.

51
00:03:00,690 --> 00:03:04,050
For instance if I try and edit this campground that I don't own.

52
00:03:04,050 --> 00:03:05,580
Tater tots owns it.

53
00:03:05,580 --> 00:03:07,260
I'm logged in this blender.

54
00:03:07,770 --> 00:03:10,950
I don't have a link to go to Edit here because that's hidden.

55
00:03:11,280 --> 00:03:17,220
But technically I still could go to slash at it where I now get a message that says you don't have permission

56
00:03:17,220 --> 00:03:17,950
to do that.

57
00:03:18,030 --> 00:03:19,710
It redirects me back here.

58
00:03:20,070 --> 00:03:26,950
So same thing with comments if I if there was a comment here and it was created by someone else.

59
00:03:27,150 --> 00:03:32,310
If I manually went to that link and added slash at it then I would also see a message but that's a lot

60
00:03:32,310 --> 00:03:34,720
of work because we have to find the ID.

61
00:03:34,900 --> 00:03:40,080
And anyway I don't want to go into it now but it will be the same bit of code that we add that will

62
00:03:40,080 --> 00:03:42,030
say you don't have permission to do that.

63
00:03:42,060 --> 00:03:50,400
And then lastly if I do log out and I go back and I try and add new comments I get the same message

64
00:03:50,400 --> 00:03:50,420
.

65
00:03:50,430 --> 00:03:52,030
You must be signed in to do that.

66
00:03:52,050 --> 00:03:55,010
Just like if I tried to create a campground when I wasn't signed it.

67
00:03:55,260 --> 00:03:55,530
OK.

68
00:03:55,530 --> 00:04:00,340
So that's the end goal and it's actually pretty easy for us to make this work.

69
00:04:00,360 --> 00:04:05,580
Using this package we could do this without a package of course what we could do something like.

70
00:04:05,700 --> 00:04:07,520
When we open up the correct version.

71
00:04:07,740 --> 00:04:12,960
So I made a new version for this v 11 that I'll be working inside of.

72
00:04:13,440 --> 00:04:23,470
So let's see into v. 11 and let me clear everything and open up yes.

73
00:04:24,610 --> 00:04:25,040
OK.

74
00:04:25,110 --> 00:04:26,210
So we'll be working here.

75
00:04:26,280 --> 00:04:30,390
Again this is V 11 just in case you're following along.

76
00:04:30,390 --> 00:04:33,790
The first thing that I'll do is show you the package we're going to use.

77
00:04:33,820 --> 00:04:35,400
So it's called Kinect flash.

78
00:04:35,400 --> 00:04:38,080
There were other packages out there that do this.

79
00:04:38,280 --> 00:04:45,090
If you take a look at the get home repo the documentation is actually a little bit out of date.

80
00:04:45,510 --> 00:04:51,410
We're using Express for which came out earlier in 2015.

81
00:04:51,930 --> 00:05:00,090
The docs talk about Express to point X and three point X we're on for next though.

82
00:05:00,180 --> 00:05:08,670
So these instructions aren't exactly the same although if you go back to Connect flash you'll see some

83
00:05:08,670 --> 00:05:15,000
of the first external links are expressed 4.00 set up with K'NEX flash which I already took a look at

84
00:05:15,360 --> 00:05:23,000
or you could always use something like this had expressed for afterwards and you can see we get that

85
00:05:23,000 --> 00:05:29,060
same link and there are tutorials down here there's a stack overflow post about it if you want to take

86
00:05:29,060 --> 00:05:29,710
a look.

87
00:05:29,990 --> 00:05:32,910
So I did this earlier.

88
00:05:33,080 --> 00:05:37,450
Something you have to do a lot when you know code is being updated when new things are coming out.

89
00:05:37,550 --> 00:05:42,620
Especially with something like Express 4.0 where things change pretty significantly.

90
00:05:42,680 --> 00:05:48,110
Lots of things that used to be part of Express were moved out of express as separate packages.

91
00:05:48,110 --> 00:05:50,280
Some of the naming and syntax changed.

92
00:05:50,430 --> 00:05:55,640
So I always say it's something you just do a lot when you're trying to do something you haven't done

93
00:05:55,640 --> 00:06:03,380
yet in Express add in Express for to your searches because oftentimes you'll find great tutorials for

94
00:06:03,680 --> 00:06:03,850
it.

95
00:06:03,880 --> 00:06:10,220
Two years ago that still are 90 percent the same but that 10 percent is really important that you understand

96
00:06:10,220 --> 00:06:14,900
how it's different from you know two years ago versus current Express.

97
00:06:14,900 --> 00:06:15,950
All right.

98
00:06:15,950 --> 00:06:19,110
So first thing we want to do is install this package.

99
00:06:19,400 --> 00:06:21,070
So it's called connect flash.

100
00:06:21,110 --> 00:06:29,260
So we want NPM install dash dash save connect dash flash.

101
00:06:31,050 --> 00:06:31,700
OK.

102
00:06:31,910 --> 00:06:37,530
Now that that's done up here we'll just add in Flash.

103
00:06:38,030 --> 00:06:45,030
We'll just call it flash rather than connect flash equals require connect dash flash.

104
00:06:45,080 --> 00:06:52,730
Make sure we have a comma in there then what we need to do is tell express tell the app to use Flash

105
00:06:52,730 --> 00:06:53,320
.

106
00:06:53,360 --> 00:07:00,470
So we took the contents of K'NEX flash that the package and saved into the flash variable and we'll

107
00:07:00,470 --> 00:07:09,700
need to execute that variable app use flash just like that.

108
00:07:09,710 --> 00:07:11,500
So technically that's all we need to do.

109
00:07:11,510 --> 00:07:18,350
We now have Connect Flash installed and if we do go back and take a look at the docs there is some other

110
00:07:18,350 --> 00:07:24,920
configuration that they do here with cookie parser in session but we actually already have that set

111
00:07:24,920 --> 00:07:27,700
up where we're already doing our.

112
00:07:27,730 --> 00:07:31,210
Where are you require express session and we're setting up a secret.

113
00:07:31,220 --> 00:07:36,620
And so we don't actually have to worry about that because we already have set up our app to use Express

114
00:07:36,620 --> 00:07:37,580
session.

115
00:07:38,070 --> 00:07:44,710
OK so what we'll do is on every single page we're going to show the contents of the flash.

116
00:07:44,810 --> 00:07:46,940
We're going to take the message that's in there.

117
00:07:46,940 --> 00:07:51,360
It might be good or might be bad it might be empty and we're going to show it at the top of the page

118
00:07:52,280 --> 00:07:54,290
and that will happen in our header file.

119
00:07:54,330 --> 00:07:54,710
E.J..

120
00:07:54,740 --> 00:08:01,460
Yes we'll have some code that just displays the error or the success message and then all that we'll

121
00:08:01,460 --> 00:08:08,570
do is when we encounter an error or a place we want a message so an instance of that might be instead

122
00:08:08,570 --> 00:08:15,650
of let's do campgrounds and instead of our campgrounds for we have this is logged in Middleware where

123
00:08:15,740 --> 00:08:18,430
you can't add a new campground unless you're logged in.

124
00:08:18,440 --> 00:08:26,120
If we if we go to that middleware and we'll look at is logged in we might want to have a message that

125
00:08:26,120 --> 00:08:30,500
says you need to be logged in to do that or Please log in.

126
00:08:30,500 --> 00:08:32,800
So that code would go right here.

127
00:08:32,900 --> 00:08:38,440
So right before we redirect to slash log in we're going to add something to the flash.

128
00:08:38,840 --> 00:08:44,860
So that looks just like this actually request dot flash.

129
00:08:45,260 --> 00:08:47,370
And then we can give it a key.

130
00:08:47,720 --> 00:08:50,000
So in a moment I'll show you.

131
00:08:50,000 --> 00:08:57,140
We'll be using success and error and we'll just use that to determine if the message the alert should

132
00:08:57,140 --> 00:08:59,300
be green or red.

133
00:08:59,300 --> 00:09:04,200
So that part doesn't matter for now but this part does matter where we're going to pass in a message

134
00:09:04,210 --> 00:09:04,550
.

135
00:09:04,760 --> 00:09:09,560
So we could do something like Please log in first.

136
00:09:09,590 --> 00:09:12,470
Again this is inside the is logged in Middleware.

137
00:09:12,740 --> 00:09:16,740
So it's checking if the request is authenticated if the users logged in.

138
00:09:16,800 --> 00:09:19,430
Then keep going to whatever you were doing before.

139
00:09:20,180 --> 00:09:24,030
But if that's not the case before you redirect to slash log in.

140
00:09:24,090 --> 00:09:26,390
Yes remember if we redirect to slash log in.

141
00:09:26,390 --> 00:09:29,320
Without this line it just goes on too.

142
00:09:29,320 --> 00:09:35,360
I'll have to open up the route but it will go right to the code and slash logon which is right here

143
00:09:35,360 --> 00:09:36,740
.

144
00:09:36,740 --> 00:09:43,960
So it renders the log in for before we do that though we're going to run this code flash.

145
00:09:44,120 --> 00:09:50,000
And what this will do is basically take Please log in first and it will add it to the flash and it won't

146
00:09:50,000 --> 00:09:53,060
be displayed until the next thing that we see.

147
00:09:53,180 --> 00:09:59,210
So in this case this doesn't actually render anything it just redirects us to slash log in and the way

148
00:09:59,210 --> 00:10:06,290
that the Flash works is really nice in that it isn't just going to flash itself right away immediately

149
00:10:06,290 --> 00:10:06,540
.

150
00:10:06,550 --> 00:10:09,650
It it only works or it shows up on the next page.

151
00:10:09,650 --> 00:10:13,130
So you actually do it before you redirect.

152
00:10:13,130 --> 00:10:18,890
So in this case please log in first and then we redirect to slash log in and then on the log and form

153
00:10:19,070 --> 00:10:20,690
we'll hopefully see a message.

154
00:10:20,690 --> 00:10:22,470
Right now we're not displaying that though.

155
00:10:22,520 --> 00:10:29,570
So again just to reiterate just adding this line won't display anything for us all that this does is

156
00:10:29,570 --> 00:10:35,510
it gives us the capability it gives us a way of accessing this on the next request.

157
00:10:35,510 --> 00:10:40,570
So we're not flashing it right away we're not seeing anything we're not showing the user anything.

158
00:10:40,580 --> 00:10:46,190
All this does is it says in the flash and rather than success I think it makes more sense to call this

159
00:10:46,190 --> 00:10:54,900
error in the flash add please log in first for the next request and then we redirect to slash logon

160
00:10:54,930 --> 00:10:55,320
.

161
00:10:55,820 --> 00:11:02,610
So then we have to handle that in logon which is right here slash log in.

162
00:11:02,990 --> 00:11:06,790
So I could do something like pass in message.

163
00:11:07,340 --> 00:11:14,660
And of course all I can just show you this to start so if we just have message be error you messed it

164
00:11:14,660 --> 00:11:23,540
up just like that we could just display that on our template so slash log in which is inside of fuse

165
00:11:23,780 --> 00:11:24,330
log in.

166
00:11:24,540 --> 00:11:31,900
Yes just at the very top I could just have an H-1 that displayed message just like that.

167
00:11:31,940 --> 00:11:33,650
Nothing very new.

168
00:11:33,650 --> 00:11:37,140
So I'll just show you what that looks like right now.

169
00:11:37,190 --> 00:11:44,920
Start the server up redirect to slash log in and I get this message every time error.

170
00:11:44,960 --> 00:11:46,060
You messed it up.

171
00:11:46,250 --> 00:11:52,310
As you can see which is hopefully what you expected at this point because I hardcoded it in every time

172
00:11:52,310 --> 00:11:55,570
we go to slash log in we see you messed it up.

173
00:11:56,080 --> 00:12:04,180
OK so using flash what we can do is now say message is equal to request of flash and we can just do

174
00:12:04,250 --> 00:12:06,370
the error in the flash.

175
00:12:06,740 --> 00:12:09,110
So its a little bit confusing.

176
00:12:09,530 --> 00:12:15,320
But basically the idea is right now if I just refresh the page restart the server and refresh there

177
00:12:15,320 --> 00:12:16,980
shouldn't be an error in the flash.

178
00:12:17,090 --> 00:12:19,120
So we actually don't see anything.

179
00:12:20,000 --> 00:12:28,160
But then if we make this code run wups this code here and the way we do that is trying to access something

180
00:12:28,160 --> 00:12:33,470
where we have to be logged in where this middleware is called then what will happen is that we're adding

181
00:12:33,470 --> 00:12:38,870
this to the flash under the key error with the value please log in first then we're going to slash log

182
00:12:38,870 --> 00:12:39,310
in.

183
00:12:39,440 --> 00:12:47,540
Then inside of slash logon we're sending under the key of message request up flash error which is a

184
00:12:47,540 --> 00:12:51,230
lot of things that have to be connected and it's a little bit confusing again.

185
00:12:51,350 --> 00:12:53,370
But let me just show you now.

186
00:12:53,690 --> 00:12:54,740
So I restart.

187
00:12:54,740 --> 00:12:58,550
I actually didn't have to do that this time but we don't see anything.

188
00:12:58,550 --> 00:13:05,140
Now let me go to campgrounds and try and add a new campground even though I'm not logged in.

189
00:13:05,630 --> 00:13:10,640
And now I get that message that says Please log in first which wasn't there before and if I refresh

190
00:13:10,640 --> 00:13:12,330
the page it goes away.

191
00:13:12,530 --> 00:13:16,740
So that's a really simple version of what we can accomplish using Flash.

192
00:13:16,910 --> 00:13:21,530
So before we move on in the next video to implementing this with all the different messages and the

193
00:13:21,530 --> 00:13:22,500
styling.

194
00:13:22,700 --> 00:13:24,860
Let's just summarize how this works again.

195
00:13:24,920 --> 00:13:30,350
So whenever we want to display a message whether it's a success message or an error message whatever

196
00:13:30,350 --> 00:13:33,500
it is we're going to use this line right here.

197
00:13:33,650 --> 00:13:34,730
Request flash.

198
00:13:34,760 --> 00:13:38,630
And then we pass in a key and a value and we do that before we redirect.

199
00:13:38,630 --> 00:13:41,450
It's really important if I put this line after we redirect.

200
00:13:41,450 --> 00:13:42,680
It won't work.

201
00:13:43,130 --> 00:13:47,940
So before you redirect and then you still have to handle it in the template yourself to handle it and

202
00:13:47,950 --> 00:13:53,630
the route all that it gives you is the capability of adding some data in before you redirect.

203
00:13:53,630 --> 00:13:55,300
That makes it to the next route.

204
00:13:55,460 --> 00:13:59,030
And that data won't persist on every single request to that route.

205
00:13:59,030 --> 00:14:00,140
So it's a one time thing.

206
00:14:00,410 --> 00:14:01,860
Which is why it's called Flash.

207
00:14:02,060 --> 00:14:02,560
OK.

208
00:14:02,660 --> 00:14:06,860
So in the next video I'm going to show you how to actually implement this for real where we don't have

209
00:14:06,860 --> 00:14:08,550
to do this.

210
00:14:08,600 --> 00:14:14,060
Passing it off message to every template where we can style thinks nicely with the bootstrap where we

211
00:14:14,060 --> 00:14:17,930
can have red and green messages we can have different colors if we want to put red and green are the

212
00:14:17,930 --> 00:14:18,810
standard ones.

213
00:14:18,970 --> 00:14:19,180
OK.

214
00:14:19,190 --> 00:14:20,370
So that's in the next video.

215
00:14:20,390 --> 00:14:20,800
See the