1
00:00:01,060 --> 00:00:03,293
‫Let's now finally finish up

2
00:00:03,293 --> 00:00:05,413
‫this login functionality part.

3
00:00:06,980 --> 00:00:09,300
‫And remember how I said that in this video

4
00:00:09,300 --> 00:00:11,790
‫I wanted to implement a really nice alert

5
00:00:11,790 --> 00:00:15,010
‫for when the user successfully logs in, and so

6
00:00:16,450 --> 00:00:19,210
‫to see that let's log the user out

7
00:00:19,210 --> 00:00:21,663
‫for now by removing the cookie manually.

8
00:00:22,700 --> 00:00:24,760
‫Let's reload, and so now of course

9
00:00:24,760 --> 00:00:26,883
‫the user should no longer be logged in,

10
00:00:28,840 --> 00:00:30,720
‫and indeed it isn't.

11
00:00:30,720 --> 00:00:33,120
‫As we already know, that's because the cookie

12
00:00:33,120 --> 00:00:35,410
‫wasn't sent in the request.

13
00:00:35,410 --> 00:00:37,790
‫So there is logged in middleware that we created

14
00:00:37,790 --> 00:00:39,050
‫in the last video

15
00:00:39,050 --> 00:00:42,840
‫did not put the user object into response.locals,

16
00:00:42,840 --> 00:00:44,320
‫remember that?

17
00:00:44,320 --> 00:00:47,810
‫So if it's not there the user manual will not be rendered,

18
00:00:47,810 --> 00:00:50,650
‫and instead this part gets rendered

19
00:00:50,650 --> 00:00:53,367
‫so that we now can click here on Log In.

20
00:00:53,367 --> 00:00:56,920
‫So that alert that I was talking about before

21
00:00:56,920 --> 00:00:59,760
‫I want it to show up here basically at the beginning

22
00:00:59,760 --> 00:01:01,470
‫and then after a second and a half

23
00:01:01,470 --> 00:01:04,000
‫we still want to do that reload.

24
00:01:04,000 --> 00:01:07,610
‫So moving to the main homepage.

25
00:01:07,610 --> 00:01:09,550
‫Anyway let's create some functions

26
00:01:09,550 --> 00:01:13,800
‫for this alert in yet another separate file.

27
00:01:13,800 --> 00:01:14,983
‫So new file,

28
00:01:16,607 --> 00:01:18,853
‫alert.js.

29
00:01:20,210 --> 00:01:23,320
‫All right, but now before we can actually move on

30
00:01:23,320 --> 00:01:24,510
‫we need to think a little bit

31
00:01:24,510 --> 00:01:26,890
‫about our front-end architecture here.

32
00:01:26,890 --> 00:01:30,070
‫Now this course, of course, is not about the front-end,

33
00:01:30,070 --> 00:01:32,470
‫but still we need to at least care

34
00:01:32,470 --> 00:01:34,170
‫a little bit about it here,

35
00:01:34,170 --> 00:01:36,080
‫because we're really starting to get

36
00:01:36,080 --> 00:01:38,130
‫a nice amount of files here,

37
00:01:38,130 --> 00:01:40,420
‫and including all of them into our pages

38
00:01:40,420 --> 00:01:42,550
‫is not a good practice.

39
00:01:42,550 --> 00:01:43,383
‫So

40
00:01:44,770 --> 00:01:46,700
‫such as we've been doing here.

41
00:01:46,700 --> 00:01:48,710
‫So this is not a good practice.

42
00:01:48,710 --> 00:01:51,200
‫We should only have one big JavaScript file

43
00:01:51,200 --> 00:01:53,340
‫which includes all the code.

44
00:01:53,340 --> 00:01:56,000
‫So in modern JavaScript front-end development

45
00:01:56,000 --> 00:01:59,150
‫we usually use something called a module bundler.

46
00:01:59,150 --> 00:02:02,210
‫The most popular one is probably still Webpack,

47
00:02:02,210 --> 00:02:04,700
‫but usually Webpack gives us a lot of problems

48
00:02:04,700 --> 00:02:07,140
‫and it's really a pain to set it up.

49
00:02:07,140 --> 00:02:11,380
‫So there's actually a very nice new kid on the block,

50
00:02:11,380 --> 00:02:13,930
‫so to say, which is called Parcel.

51
00:02:13,930 --> 00:02:18,930
‫So we'll take a look at that, see if it already shows up,

52
00:02:19,680 --> 00:02:21,870
‫and indeed, that's the one.

53
00:02:21,870 --> 00:02:26,490
‫So blazing fast, zero configuration web application bundler.

54
00:02:26,490 --> 00:02:29,080
‫So that's exactly what we're looking for.

55
00:02:29,080 --> 00:02:31,790
‫Simply a bundler which doesn't require

56
00:02:31,790 --> 00:02:34,240
‫any complex configurations, because

57
00:02:34,240 --> 00:02:36,340
‫we don't want to waste any time with that.

58
00:02:37,470 --> 00:02:41,753
‫All right, so let's just go ahead and install it here.

59
00:02:42,940 --> 00:02:44,340
‫So npm install

60
00:02:46,010 --> 00:02:48,603
‫and I'm not sure if it's just Parcel actually.

61
00:02:50,180 --> 00:02:51,013
‫So

62
00:02:52,509 --> 00:02:53,459
‫let's go back here.

63
00:02:55,860 --> 00:02:58,963
‫Probably that is Parcel.js or something,

64
00:02:59,820 --> 00:03:02,810
‫because I remember the last time I installed it

65
00:03:02,810 --> 00:03:06,850
‫it didn't work right away, so let's check that.

66
00:03:06,850 --> 00:03:08,993
‫Yeah, indeed, it is Parcel-bundler.

67
00:03:18,370 --> 00:03:20,300
‫Now we got some error.

68
00:03:20,300 --> 00:03:25,300
‫Okay, so I forgot to save it as a dev dependency.

69
00:03:27,070 --> 00:03:30,810
‫So we actually want it as a save dev, okay,

70
00:03:30,810 --> 00:03:33,910
‫and that's because it's a development tool.

71
00:03:33,910 --> 00:03:35,483
‫Now still something went wrong.

72
00:03:39,640 --> 00:03:41,313
‫Let me try it with sudo here.

73
00:03:50,150 --> 00:03:52,790
‫And so if it didn't work in your case as well

74
00:03:52,790 --> 00:03:56,943
‫then just use sudo in order to get the proper permissions.

75
00:04:03,360 --> 00:04:05,910
‫All right, so let's take a look at our package.json

76
00:04:07,060 --> 00:04:11,140
‫and indeed here it is, all right.

77
00:04:11,140 --> 00:04:12,620
‫Now if you're watching this video

78
00:04:12,620 --> 00:04:14,810
‫some time after I recorded it

79
00:04:14,810 --> 00:04:17,550
‫they might already have gone to version number two

80
00:04:18,550 --> 00:04:20,200
‫and that as we already know

81
00:04:20,200 --> 00:04:22,370
‫might introduce some breaking changes.

82
00:04:22,370 --> 00:04:25,840
‫And so going forward from this point if you get any errors

83
00:04:25,840 --> 00:04:27,740
‫that you didn't see here in the video

84
00:04:27,740 --> 00:04:30,940
‫then please go ahead and install this package here

85
00:04:30,940 --> 00:04:32,533
‫using version .1,

86
00:04:33,590 --> 00:04:34,750
‫okay.

87
00:04:34,750 --> 00:04:35,860
‫So basically

88
00:04:38,610 --> 00:04:41,650
‫add one like this, okay.

89
00:04:41,650 --> 00:04:45,630
‫So this then adverts you running into these weird errors

90
00:04:45,630 --> 00:04:48,100
‫and hopefully it also saves me

91
00:04:48,100 --> 00:04:50,110
‫from tons of negative comments

92
00:04:50,110 --> 00:04:54,330
‫or negative reviews that expect me to update all my videos

93
00:04:54,330 --> 00:04:57,640
‫every other week just because some tool gets updated,

94
00:04:57,640 --> 00:04:59,560
‫and of course that's not possible.

95
00:04:59,560 --> 00:05:01,330
‫So many times the easiest solution

96
00:05:01,330 --> 00:05:03,790
‫is simply for you to use the same version

97
00:05:03,790 --> 00:05:07,030
‫as I am using in the video, all right.

98
00:05:07,030 --> 00:05:10,420
‫Anyway, now in order to actually use Parcel

99
00:05:10,420 --> 00:05:12,973
‫let's add some scripts here.

100
00:05:15,410 --> 00:05:19,053
‫So I'm adding one to watch or JavaScript.

101
00:05:20,890 --> 00:05:22,400
‫Okay, and for that

102
00:05:24,380 --> 00:05:26,443
‫I use the Parcel watch command.

103
00:05:28,100 --> 00:05:31,250
‫This would actually already run just fine out of the box,

104
00:05:31,250 --> 00:05:33,810
‫but I still want to configure a little bit,

105
00:05:33,810 --> 00:05:36,890
‫because otherwise, it's gonna put me the final bundle

106
00:05:36,890 --> 00:05:39,270
‫in some folders that I don't want them.

107
00:05:39,270 --> 00:05:44,270
‫So let's specify which folder it actually should watch.

108
00:05:45,920 --> 00:05:50,920
‫So that's public/JavaScript and then index.js,

109
00:05:52,670 --> 00:05:54,190
‫so that's our entry point

110
00:05:54,190 --> 00:05:56,490
‫and that's the file that we're gonna create in a second.

111
00:05:56,490 --> 00:05:57,350
‫Okay.

112
00:05:57,350 --> 00:05:59,670
‫Then the output directory

113
00:06:03,432 --> 00:06:05,237
‫should also be into public.js,

114
00:06:06,980 --> 00:06:07,900
‫okay.

115
00:06:07,900 --> 00:06:09,700
‫Many times you will have different folders

116
00:06:09,700 --> 00:06:12,330
‫for the development and for the output,

117
00:06:12,330 --> 00:06:15,550
‫but in this case since it's a very simple architecture

118
00:06:15,550 --> 00:06:18,400
‫I'm going to put the bundle file right in the same place

119
00:06:18,400 --> 00:06:20,550
‫as the development files.

120
00:06:20,550 --> 00:06:23,000
‫All right, let's also specify the

121
00:06:25,102 --> 00:06:25,935
‫the output file

122
00:06:26,860 --> 00:06:30,733
‫and so that should be bundle.js,

123
00:06:31,720 --> 00:06:32,600
‫all right.

124
00:06:32,600 --> 00:06:35,750
‫So now I can run this and it will then take a look

125
00:06:35,750 --> 00:06:39,430
‫at this file here and see if something changes

126
00:06:39,430 --> 00:06:41,330
‫or in one of the dependencies

127
00:06:41,330 --> 00:06:43,110
‫and whenever that happens it will then

128
00:06:43,110 --> 00:06:45,260
‫bundle all of the files together again

129
00:06:45,260 --> 00:06:49,090
‫into this bundle.js file, all right.

130
00:06:49,090 --> 00:06:50,610
‫Then let's also duplicate this,

131
00:06:50,610 --> 00:06:53,720
‫because we also want a final,

132
00:06:53,720 --> 00:06:56,820
‫let's say production version, okay.

133
00:06:56,820 --> 00:06:59,040
‫So this one we are going to run ones where

134
00:06:59,040 --> 00:07:01,100
‫they're really finished, okay.

135
00:07:01,100 --> 00:07:03,450
‫So that takes a bit longer, but it also does

136
00:07:03,450 --> 00:07:06,630
‫a bit more optimization stuff, but

137
00:07:06,630 --> 00:07:08,710
‫that of course we don't need for development.

138
00:07:08,710 --> 00:07:12,130
‫In development as always, we just want it to work.

139
00:07:12,130 --> 00:07:14,090
‫So let's do npm run

140
00:07:15,970 --> 00:07:20,030
‫watch:js, but before we do that let's actually create

141
00:07:20,980 --> 00:07:22,473
‫the index.js.

142
00:07:23,370 --> 00:07:25,320
‫Let's close some of these folders here.

143
00:07:26,170 --> 00:07:28,283
‫It's a bit too confusing like this.

144
00:07:31,340 --> 00:07:34,890
‫So index.js and let's just do a simple

145
00:07:36,640 --> 00:07:38,403
‫console.log here for now.

146
00:07:39,670 --> 00:07:41,503
‫Hello from Parcel,

147
00:07:42,460 --> 00:07:43,293
‫all right.

148
00:07:45,480 --> 00:07:47,510
‫Then let's also go to our base here

149
00:07:47,510 --> 00:07:50,940
‫and then we'll actually now comment out all of these

150
00:07:50,940 --> 00:07:52,140
‫and only include

151
00:07:53,810 --> 00:07:55,163
‫the bundle file.

152
00:07:57,720 --> 00:08:01,790
‫So again, one file which will basically contain

153
00:08:01,790 --> 00:08:04,000
‫all the code that's in all the other files

154
00:08:04,000 --> 00:08:05,533
‫and all their dependencies.

155
00:08:06,910 --> 00:08:10,860
‫So let's give it a save, and now let's actually run this,

156
00:08:10,860 --> 00:08:12,033
‫see what we get there.

157
00:08:12,980 --> 00:08:17,170
‫And indeed, we got our new file, which is bundle.js

158
00:08:17,170 --> 00:08:21,000
‫and it has all this bunch of code already in there,

159
00:08:21,000 --> 00:08:25,663
‫okay, simply for this one line of code at this point.

160
00:08:26,820 --> 00:08:29,203
‫But anyway let's reload our page here,

161
00:08:31,510 --> 00:08:33,840
‫and hello from Parcel.

162
00:08:33,840 --> 00:08:38,140
‫So that worked, and so now let's go ahead

163
00:08:38,140 --> 00:08:40,343
‫and actually setup this file here.

164
00:08:42,200 --> 00:08:44,980
‫So to avoid confusion let's close

165
00:08:44,980 --> 00:08:47,180
‫these files that we no longer need

166
00:08:47,180 --> 00:08:48,923
‫for what we're doing right now.

167
00:08:51,320 --> 00:08:52,570
‫So that's a lot of stuff.

168
00:08:54,340 --> 00:08:56,900
‫All right, this one either.

169
00:08:56,900 --> 00:09:00,560
‫So now the idea is basically that this index.js file

170
00:09:00,560 --> 00:09:02,930
‫is our entry file, and so in this one

171
00:09:02,930 --> 00:09:05,500
‫we cannot get data from the user interface

172
00:09:05,500 --> 00:09:08,400
‫and then we delegate actions to some functions

173
00:09:08,400 --> 00:09:11,960
‫coming from these other modules here basically.

174
00:09:11,960 --> 00:09:13,870
‫So we have now the login module,

175
00:09:13,870 --> 00:09:15,830
‫we have our alerts module,

176
00:09:15,830 --> 00:09:17,950
‫and so just like in Node.js

177
00:09:17,950 --> 00:09:21,920
‫we can actually now export data from these modules.

178
00:09:21,920 --> 00:09:24,550
‫So let's do that, and what I want to export

179
00:09:24,550 --> 00:09:26,440
‫is this function here.

180
00:09:26,440 --> 00:09:28,030
‫Now it works a little bit different

181
00:09:28,030 --> 00:09:30,200
‫than it works with Node.js

182
00:09:30,200 --> 00:09:33,160
‫because Node.js uses something called CommonJS

183
00:09:33,160 --> 00:09:35,040
‫in order to implement modules.

184
00:09:35,040 --> 00:09:36,510
‫I'm not sure if I mentioned that

185
00:09:36,510 --> 00:09:38,600
‫when we first talked about modules,

186
00:09:38,600 --> 00:09:43,520
‫but here in front-end JavaScript since ES2015 or ES6

187
00:09:43,520 --> 00:09:47,000
‫there's something called modules in JavaScript as well.

188
00:09:47,000 --> 00:09:48,720
‫The syntax is a bit different,

189
00:09:48,720 --> 00:09:51,150
‫but actually the way it works behind the scenes,

190
00:09:51,150 --> 00:09:54,470
‫but actually if you understand how it works with CommonJS

191
00:09:54,470 --> 00:09:57,060
‫then this one here will be very similar.

192
00:09:57,060 --> 00:10:00,740
‫So ES6 modules use the export import syntax.

193
00:10:00,740 --> 00:10:04,070
‫So here all we need to do is to say export

194
00:10:05,120 --> 00:10:08,430
‫and then whatever we want to export from this file,

195
00:10:08,430 --> 00:10:10,110
‫and that's really it.

196
00:10:10,110 --> 00:10:13,170
‫Now this piece of code here we will actually use it

197
00:10:13,170 --> 00:10:15,100
‫in the index file.

198
00:10:15,100 --> 00:10:17,720
‫So remember how I said that this file here

199
00:10:17,720 --> 00:10:20,630
‫is more to really get data from the user interface

200
00:10:20,630 --> 00:10:22,420
‫and then delegate the action.

201
00:10:22,420 --> 00:10:26,203
‫So that's exactly what we are doing here, okay.

202
00:10:27,490 --> 00:10:30,320
‫So then here we only have this kind of module

203
00:10:30,320 --> 00:10:32,950
‫which then exports the login function.

204
00:10:32,950 --> 00:10:35,350
‫Then we can import that in here

205
00:10:36,370 --> 00:10:39,700
‫and call login right here in index.js

206
00:10:39,700 --> 00:10:41,620
‫and that works like this.

207
00:10:41,620 --> 00:10:44,210
‫So import instead of require

208
00:10:44,210 --> 00:10:47,690
‫then the name of the variable that we want to import.

209
00:10:47,690 --> 00:10:49,283
‫So I'm using curly braces here.

210
00:10:50,466 --> 00:10:51,960
‫So it's called login

211
00:10:55,420 --> 00:10:57,970
‫and then from the name of the file.

212
00:10:57,970 --> 00:11:01,493
‫Which in this case, same directory, login.

213
00:11:03,080 --> 00:11:06,363
‫Now let's also disable eslint here again,

214
00:11:10,730 --> 00:11:13,570
‫and I used these curly braces here,

215
00:11:13,570 --> 00:11:16,840
‫basically because we're doing the export in this way,

216
00:11:16,840 --> 00:11:20,070
‫but there's also something similar to module.export

217
00:11:20,070 --> 00:11:22,140
‫which is kind of the default export.

218
00:11:22,140 --> 00:11:26,780
‫So in ES6 modules it's actually called a default export.

219
00:11:26,780 --> 00:11:30,320
‫So in that case we then would not need these curly braces.

220
00:11:30,320 --> 00:11:31,153
‫Okay.

221
00:11:31,153 --> 00:11:33,750
‫Right now we need to do it like this,

222
00:11:33,750 --> 00:11:37,200
‫because well that's the name of this function

223
00:11:37,200 --> 00:11:39,110
‫that we exported, all right.

224
00:11:39,110 --> 00:11:42,860
‫Now something really important as well in this login

225
00:11:42,860 --> 00:11:44,350
‫is that we used axios.

226
00:11:44,350 --> 00:11:47,250
‫And remember how I said that we were going to install it

227
00:11:47,250 --> 00:11:51,040
‫actually from npm as an npm module, right?

228
00:11:51,040 --> 00:11:54,340
‫So let's do that now, and actually because we already

229
00:11:54,340 --> 00:11:56,660
‫commented out axios from here.

230
00:11:56,660 --> 00:11:59,560
‫So right now login cannot use axios.

231
00:11:59,560 --> 00:12:03,060
‫Well because we no longer included it here.

232
00:12:03,060 --> 00:12:06,070
‫So let's go add, open up a new terminal

233
00:12:06,070 --> 00:12:08,903
‫and install axios into our project.

234
00:12:18,310 --> 00:12:23,280
‫Then now all we need to do is to say import axios

235
00:12:25,830 --> 00:12:27,773
‫from axios, and that's it,

236
00:12:29,290 --> 00:12:30,260
‫all right.

237
00:12:30,260 --> 00:12:33,900
‫So this file, for now at least, is done

238
00:12:33,900 --> 00:12:36,530
‫but let's not close it because we will

239
00:12:36,530 --> 00:12:38,540
‫still need it very soon.

240
00:12:38,540 --> 00:12:42,020
‫Next up we should actually also install a polyfill,

241
00:12:42,020 --> 00:12:44,420
‫which will make some of the newer JavaScript features

242
00:12:44,420 --> 00:12:47,120
‫work in older browsers as well.

243
00:12:47,120 --> 00:12:50,360
‫So let's say npm install

244
00:12:50,360 --> 00:12:52,850
‫and then this one here looks a bit weird.

245
00:12:52,850 --> 00:12:57,850
‫So let's add babel/polyfill,

246
00:12:57,980 --> 00:12:59,240
‫like this.

247
00:12:59,240 --> 00:13:01,370
‫Then up here we will do

248
00:13:02,600 --> 00:13:03,433
‫import

249
00:13:06,180 --> 00:13:09,070
‫just like this, all right.

250
00:13:09,070 --> 00:13:12,290
‫So this one here we do not save it into any variable,

251
00:13:12,290 --> 00:13:14,200
‫because that's not necessary at all.

252
00:13:14,200 --> 00:13:17,640
‫All we want this to do is to basically be included

253
00:13:17,640 --> 00:13:20,840
‫into our final bundle to well polyfill

254
00:13:20,840 --> 00:13:23,337
‫some of the features of JavaScript.

255
00:13:23,337 --> 00:13:26,320
‫All right, and so that's also why it's here

256
00:13:26,320 --> 00:13:29,220
‫in the first line of these imports.

257
00:13:29,220 --> 00:13:33,960
‫Anyway, let's now import this mapbox as well.

258
00:13:33,960 --> 00:13:36,800
‫For that we actually need to first create a function

259
00:13:36,800 --> 00:13:40,640
‫which is going to do all of this stuff here.

260
00:13:40,640 --> 00:13:41,790
‫Okay.

261
00:13:41,790 --> 00:13:43,190
‫So let's create

262
00:13:45,450 --> 00:13:46,283
‫export

263
00:13:50,660 --> 00:13:54,363
‫displayMap, which will take in the array of locations.

264
00:13:55,620 --> 00:14:00,620
‫So that will then actually be read in the index.js file,

265
00:14:01,150 --> 00:14:02,290
‫all right.

266
00:14:02,290 --> 00:14:06,510
‫So again, index.js is more for getting data

267
00:14:06,510 --> 00:14:09,030
‫from the user interface, so from the website,

268
00:14:09,030 --> 00:14:13,110
‫and then delegating some actions into these other modules,

269
00:14:13,110 --> 00:14:14,230
‫all right.

270
00:14:14,230 --> 00:14:18,653
‫So therefore, this stuff here will be done inside of index.

271
00:14:21,010 --> 00:14:22,883
‫Let's do it up here.

272
00:14:28,750 --> 00:14:29,890
‫Then import

273
00:14:31,890 --> 00:14:32,723
‫displayMap

274
00:14:37,420 --> 00:14:38,343
‫mapbox,

275
00:14:39,310 --> 00:14:40,690
‫all right.

276
00:14:40,690 --> 00:14:42,640
‫So let's call that as well

277
00:14:45,980 --> 00:14:48,470
‫with the locations.

278
00:14:48,470 --> 00:14:52,420
‫Now remember way back when we actually created this map

279
00:14:52,420 --> 00:14:55,400
‫and remember how it asked us if we wanted to use

280
00:14:55,400 --> 00:14:57,760
‫the mapbox library on npm?

281
00:14:57,760 --> 00:15:00,670
‫So we could now go ahead and actually use that one

282
00:15:00,670 --> 00:15:04,590
‫instead of this one that we're using right now.

283
00:15:04,590 --> 00:15:06,450
‫So

284
00:15:06,450 --> 00:15:07,993
‫well it's not here.

285
00:15:09,850 --> 00:15:10,693
‫Yeah, so this one.

286
00:15:10,693 --> 00:15:13,170
‫So this here is the mapbox library

287
00:15:13,170 --> 00:15:15,330
‫that we're currently using, but again

288
00:15:15,330 --> 00:15:17,290
‫there's also an npm version.

289
00:15:17,290 --> 00:15:20,290
‫So then we would not need to have this one.

290
00:15:20,290 --> 00:15:22,620
‫However, for some reason there's a problem with

291
00:15:22,620 --> 00:15:26,410
‫using this library together with Parcel, okay.

292
00:15:26,410 --> 00:15:29,430
‫So other people actually run into this issue.

293
00:15:29,430 --> 00:15:32,370
‫So we cannot use the mapbox npm library

294
00:15:32,370 --> 00:15:34,080
‫together with Parcel.

295
00:15:34,080 --> 00:15:36,993
‫So that's a reason why I'm still doing it like this.

296
00:15:38,850 --> 00:15:39,810
‫Okay.

297
00:15:39,810 --> 00:15:43,360
‫So mapbox is completed with this.

298
00:15:43,360 --> 00:15:45,533
‫This we don't need anymore, as well.

299
00:15:46,470 --> 00:15:49,150
‫Now let's actually get rid of some of these errors

300
00:15:49,150 --> 00:15:50,593
‫that we saw down here.

301
00:15:51,510 --> 00:15:53,060
‫Well now they're no longer here,

302
00:15:53,060 --> 00:15:55,500
‫but for example we had the problem that

303
00:15:55,500 --> 00:15:57,630
‫this code here created some errors

304
00:15:57,630 --> 00:16:02,280
‫when we were on pages that didn't have this map here, right.

305
00:16:02,280 --> 00:16:05,310
‫Because of course on the detail page has this map

306
00:16:05,310 --> 00:16:07,890
‫so this element, but then this code of course

307
00:16:07,890 --> 00:16:09,203
‫runs on all the other pages,

308
00:16:09,203 --> 00:16:10,973
‫that will then create errors there.

309
00:16:11,840 --> 00:16:13,700
‫So let's fix that.

310
00:16:13,700 --> 00:16:15,980
‫So what I'm doing here is first to create an element

311
00:16:15,980 --> 00:16:18,950
‫with this and then test if it actually exists

312
00:16:18,950 --> 00:16:20,933
‫before we execute this line of code.

313
00:16:23,610 --> 00:16:25,660
‫So we will create some DOM elements here.

314
00:16:32,415 --> 00:16:33,248
‫And here I'd say

315
00:16:34,820 --> 00:16:35,683
‫delegation.

316
00:16:39,750 --> 00:16:41,380
‫So if mapbox

317
00:16:43,370 --> 00:16:46,623
‫and only then to these two actions here,

318
00:16:47,690 --> 00:16:48,790
‫okay.

319
00:16:48,790 --> 00:16:50,350
‫Here it's also then mapbox

320
00:16:52,420 --> 00:16:53,853
‫and that's much nicer.

321
00:16:57,190 --> 00:16:58,850
‫Here let's also put values,

322
00:16:58,850 --> 00:17:00,630
‫and I'm going to put these two

323
00:17:00,630 --> 00:17:03,690
‫because actually we might need them

324
00:17:03,690 --> 00:17:07,140
‫or actually we will need them for other stuff as well.

325
00:17:07,140 --> 00:17:08,803
‫So this way it's a bit cleaner.

326
00:17:10,170 --> 00:17:13,230
‫Let's also only add this event listener here

327
00:17:13,230 --> 00:17:16,660
‫if this element exists, right.

328
00:17:16,660 --> 00:17:20,683
‫Because well, again, it will create an error if it doesn't.

329
00:17:22,260 --> 00:17:23,777
‫So loginform,

330
00:17:27,750 --> 00:17:28,583
‫and so

331
00:17:29,610 --> 00:17:30,443
‫if

332
00:17:33,770 --> 00:17:37,460
‫and then let's reuse it here, give it a save,

333
00:17:37,460 --> 00:17:39,363
‫and so now that looks better.

334
00:17:40,270 --> 00:17:41,103
‫Okay.

335
00:17:42,355 --> 00:17:44,113
‫Let's actually close this terminal.

336
00:17:45,500 --> 00:17:48,010
‫This you should of kept bundling our code together

337
00:17:48,010 --> 00:17:49,480
‫each time there's a save.

338
00:17:49,480 --> 00:17:50,980
‫Let's just save it here again.

339
00:17:53,600 --> 00:17:56,440
‫Okay, so I hope that changed now.

340
00:17:56,440 --> 00:17:58,203
‫So let's go ahead and try that out.

341
00:18:00,610 --> 00:18:03,800
‫So if you can still login at this point

342
00:18:03,800 --> 00:18:06,563
‫well then that means that it did actually work.

343
00:18:13,470 --> 00:18:15,850
‫Well maybe not.

344
00:18:15,850 --> 00:18:17,263
‫Let's try that again here.

345
00:18:21,360 --> 00:18:25,113
‫All right, so there's something wrong going on here.

346
00:18:26,430 --> 00:18:29,620
‫So as always let's log this email and password

347
00:18:29,620 --> 00:18:31,093
‫to the console here.

348
00:18:32,570 --> 00:18:35,300
‫I mean, because we already know that actually

349
00:18:35,300 --> 00:18:38,233
‫this function here is called, right.

350
00:18:39,260 --> 00:18:41,360
‫Otherwise, we wouldn't even get the error.

351
00:18:45,380 --> 00:18:49,560
‫Right, because that error is clearly coming from our API.

352
00:18:49,560 --> 00:18:53,403
‫So all of what we have here is actually working, I believe.

353
00:19:03,010 --> 00:19:04,763
‫Let's take a look at the console.

354
00:19:10,830 --> 00:19:14,610
‫So it appears that there are actually no

355
00:19:14,610 --> 00:19:16,193
‫username and password.

356
00:19:18,320 --> 00:19:19,153
‫Okay.

357
00:19:21,640 --> 00:19:22,640
‫I'm not sure why that is.

358
00:19:22,640 --> 00:19:26,003
‫Let's take a look if actually we do get something.

359
00:19:26,870 --> 00:19:29,350
‫So login and I will also

360
00:19:31,140 --> 00:19:33,963
‫log these right here,

361
00:19:34,950 --> 00:19:35,880
‫not here

362
00:19:37,930 --> 00:19:38,763
‫but here.

363
00:19:50,730 --> 00:19:52,600
‫And so apparently the problem

364
00:19:52,600 --> 00:19:55,060
‫must be that username and password

365
00:19:55,060 --> 00:19:57,220
‫are not really defined.

366
00:19:57,220 --> 00:20:00,140
‫Oh, and now of course I can see why that is.

367
00:20:00,140 --> 00:20:01,483
‫What a stupid mistake.

368
00:20:02,440 --> 00:20:04,900
‫So we're trying to read these values here,

369
00:20:04,900 --> 00:20:07,340
‫right in the beginning when the page loads,

370
00:20:07,340 --> 00:20:11,223
‫and of course at this point these values are not defined.

371
00:20:12,230 --> 00:20:15,400
‫So we of course can only define them

372
00:20:15,400 --> 00:20:19,103
‫right here in our event listener, right.

373
00:20:20,370 --> 00:20:22,800
‫So by the time this function here is called

374
00:20:22,800 --> 00:20:25,690
‫well then of course email and password are set

375
00:20:25,690 --> 00:20:28,143
‫so then it's the time where we can read them.

376
00:20:31,210 --> 00:20:33,423
‫So that was kind of stupid,

377
00:20:36,870 --> 00:20:39,470
‫but, you know, sometimes that kind of stuff happens.

378
00:20:46,560 --> 00:20:48,673
‫Now let's actually copy this here.

379
00:20:50,830 --> 00:20:53,460
‫This time we are logged in successfully,

380
00:20:53,460 --> 00:20:56,373
‫meaning that our code here still works.

381
00:20:57,740 --> 00:21:01,500
‫Great, and so now let's do the final part

382
00:21:01,500 --> 00:21:03,310
‫that we wanted to do in this lecture,

383
00:21:03,310 --> 00:21:07,373
‫which is actually creating these alerts, all right.

384
00:21:08,700 --> 00:21:13,700
‫So let's create a function called show alert and export it.

385
00:21:13,720 --> 00:21:16,790
‫So then in login we will import this function

386
00:21:16,790 --> 00:21:17,793
‫and use it there.

387
00:21:18,890 --> 00:21:21,070
‫So showAlert

388
00:21:23,583 --> 00:21:27,557
‫and this as an input will get a type and a message,

389
00:21:29,090 --> 00:21:31,010
‫so just like this.

390
00:21:31,010 --> 00:21:32,230
‫And this type

391
00:21:34,070 --> 00:21:35,600
‫is either success

392
00:21:38,170 --> 00:21:39,253
‫or error,

393
00:21:40,210 --> 00:21:41,043
‫okay.

394
00:21:41,043 --> 00:21:44,020
‫Because depending on this input we will then

395
00:21:44,020 --> 00:21:46,890
‫have different CSS for each of these alerts

396
00:21:46,890 --> 00:21:48,590
‫and you will see that in a second.

397
00:21:49,450 --> 00:21:52,360
‫So what we're gonna do is to basically create some

398
00:21:52,360 --> 00:21:56,233
‫HTML markup here and then insert that into our HTML,

399
00:21:57,210 --> 00:21:58,733
‫so it's something really easy.

400
00:22:00,530 --> 00:22:04,520
‫So a markup and the template string

401
00:22:04,520 --> 00:22:07,280
‫and now some nice HTML.

402
00:22:07,280 --> 00:22:11,370
‫So it's simply a div with a class of alert

403
00:22:13,110 --> 00:22:14,680
‫and then

404
00:22:14,680 --> 00:22:18,110
‫alert -- so a modifier

405
00:22:18,110 --> 00:22:19,113
‫with our type.

406
00:22:21,890 --> 00:22:24,450
‫Okay, and so that's why it needs to be either

407
00:22:24,450 --> 00:22:27,070
‫success or error.

408
00:22:27,070 --> 00:22:29,650
‫So let me quickly show that in CSS,

409
00:22:29,650 --> 00:22:32,800
‫because I think it's really important to really know

410
00:22:32,800 --> 00:22:36,530
‫how all of this plays together, okay.

411
00:22:36,530 --> 00:22:38,520
‫So here we have our alert class

412
00:22:38,520 --> 00:22:41,863
‫and then alert success and alert error.

413
00:22:43,300 --> 00:22:44,880
‫All right.

414
00:22:44,880 --> 00:22:48,273
‫As always let's disable eslint here,

415
00:22:49,840 --> 00:22:52,700
‫okay, and get rid of this

416
00:22:54,530 --> 00:22:57,570
‫and now of course here then goes the message

417
00:22:57,570 --> 00:22:59,193
‫that we pass into this function.

418
00:23:00,190 --> 00:23:01,970
‫Of course we could then go ahead and use this

419
00:23:01,970 --> 00:23:04,470
‫all over the application, but in this case

420
00:23:04,470 --> 00:23:08,150
‫we only need it actually here for our login.

421
00:23:08,150 --> 00:23:11,053
‫So document.queryselector,

422
00:23:11,890 --> 00:23:13,990
‫and so now here we select the element

423
00:23:13,990 --> 00:23:17,900
‫where we want to include this HTML that we just created.

424
00:23:17,900 --> 00:23:19,950
‫So that's actually right at the beginning

425
00:23:19,950 --> 00:23:21,530
‫of the body element.

426
00:23:21,530 --> 00:23:23,153
‫So right at the top of the page.

427
00:23:24,570 --> 00:23:25,473
‫So body,

428
00:23:27,570 --> 00:23:32,380
‫and then insert adjacent HTML, so this one here.

429
00:23:32,380 --> 00:23:34,720
‫If you took my complete JavaScript course

430
00:23:34,720 --> 00:23:37,793
‫then all of this here will be nothing new to you,

431
00:23:38,890 --> 00:23:39,810
‫okay.

432
00:23:39,810 --> 00:23:42,670
‫So here we can specify a couple of keywords,

433
00:23:42,670 --> 00:23:45,080
‫and in this case we want afterbegin.

434
00:23:45,080 --> 00:23:46,900
‫So basically what this means is

435
00:23:46,900 --> 00:23:50,763
‫inside of the body, but right at the beginning, all right.

436
00:23:52,580 --> 00:23:54,800
‫Then the HTML, so the markup,

437
00:23:54,800 --> 00:23:57,070
‫that we actually want to include.

438
00:23:57,070 --> 00:23:57,903
‫Great.

439
00:23:57,903 --> 00:24:00,760
‫So this is going to create a very simple alert

440
00:24:00,760 --> 00:24:04,900
‫based on type and method, but now we actually also

441
00:24:04,900 --> 00:24:07,193
‫want a function for hiding alerts.

442
00:24:08,380 --> 00:24:11,410
‫So let's create it here as well, export,

443
00:24:11,410 --> 00:24:14,103
‫and probably we don't even need it outside of here,

444
00:24:14,980 --> 00:24:18,480
‫but still for reusability it's always a good idea

445
00:24:18,480 --> 00:24:19,773
‫to export all of this.

446
00:24:21,410 --> 00:24:25,173
‫This one doesn't need to take in any argument.

447
00:24:27,250 --> 00:24:31,220
‫So now all we're gonna do is to

448
00:24:31,220 --> 00:24:33,780
‫select the element with the alert class

449
00:24:33,780 --> 00:24:36,700
‫and then after that remove it.

450
00:24:36,700 --> 00:24:38,167
‫So queryselector

451
00:24:40,120 --> 00:24:40,953
‫alert.

452
00:24:43,710 --> 00:24:45,803
‫So exactly the same class name as here.

453
00:24:46,720 --> 00:24:49,430
‫Then we need to use a JavaScript trick

454
00:24:49,430 --> 00:24:52,610
‫where we need to move one level up to the parent element

455
00:24:52,610 --> 00:24:55,700
‫and then from there remove a child element.

456
00:24:55,700 --> 00:24:59,380
‫So if there is an element then

457
00:24:59,380 --> 00:25:02,147
‫element.parentElement.removeChild

458
00:25:06,728 --> 00:25:08,478
‫and then the element.

459
00:25:09,413 --> 00:25:10,910
‫Okay.

460
00:25:10,910 --> 00:25:14,070
‫So again, that should just be basic JavaScript

461
00:25:14,070 --> 00:25:16,230
‫or basic DOM manipulation.

462
00:25:16,230 --> 00:25:18,150
‫So since this is a node course

463
00:25:18,150 --> 00:25:20,393
‫I'm not going to go deep into that.

464
00:25:21,680 --> 00:25:23,770
‫Anyway, what I want to do here now

465
00:25:23,770 --> 00:25:25,670
‫is to whenever we show an alert

466
00:25:25,670 --> 00:25:28,393
‫first hide all the alerts that already exist.

467
00:25:30,400 --> 00:25:32,340
‫So we always just to make sure

468
00:25:32,340 --> 00:25:34,353
‫always run hideAlert.

469
00:25:35,310 --> 00:25:39,150
‫Then finally I also always want to hide all the alerts

470
00:25:39,150 --> 00:25:40,383
‫after five seconds.

471
00:25:42,370 --> 00:25:44,480
‫So window setTimeout

472
00:25:46,885 --> 00:25:48,310
‫hideAlert

473
00:25:48,310 --> 00:25:50,220
‫after five

474
00:25:50,220 --> 00:25:51,790
‫seconds.

475
00:25:51,790 --> 00:25:54,533
‫All right, and now let's import that here.

476
00:25:58,030 --> 00:26:00,220
‫Display alert it was called, right?

477
00:26:00,220 --> 00:26:03,193
‫Oh showAlert, with type and message.

478
00:26:05,900 --> 00:26:06,973
‫So showAlert

479
00:26:08,140 --> 00:26:08,973
‫from

480
00:26:12,280 --> 00:26:15,730
‫right from that and so ...

481
00:26:15,730 --> 00:26:19,010
‫Yeah, so we want to use that right in this place.

482
00:26:19,010 --> 00:26:21,970
‫So instead of the JavaScript alert we want to do

483
00:26:23,297 --> 00:26:25,650
‫showAlert, all right,

484
00:26:25,650 --> 00:26:27,180
‫and here the same.

485
00:26:27,180 --> 00:26:29,220
‫We still need to specify the type here,

486
00:26:29,220 --> 00:26:30,380
‫and so that's success

487
00:26:32,925 --> 00:26:35,467
‫in this case and here

488
00:26:40,220 --> 00:26:42,630
‫it is error.

489
00:26:42,630 --> 00:26:44,193
‫We hit auto-completion.

490
00:26:46,450 --> 00:26:47,963
‫Okay, that's better.

491
00:26:48,890 --> 00:26:50,483
‫So let's test it out.

492
00:26:53,580 --> 00:26:56,923
‫And first of all we need to logout by deleting this cookie.

493
00:27:01,160 --> 00:27:02,990
‫Reload,

494
00:27:02,990 --> 00:27:03,993
‫login,

495
00:27:11,400 --> 00:27:13,900
‫and now I'm testing it first with a wrong password

496
00:27:15,500 --> 00:27:17,290
‫and here we go.

497
00:27:17,290 --> 00:27:21,400
‫So incorrect email or password right in our nice alert

498
00:27:21,400 --> 00:27:24,400
‫and you saw that after five seconds it disappeared.

499
00:27:24,400 --> 00:27:26,160
‫Of course we could have put some

500
00:27:26,160 --> 00:27:28,400
‫nice animation there and everything,

501
00:27:28,400 --> 00:27:31,830
‫but I think like this it's already more than enough.

502
00:27:31,830 --> 00:27:33,950
‫So let's see that again just quickly,

503
00:27:33,950 --> 00:27:36,113
‫and so that's what it's going to look like,

504
00:27:37,600 --> 00:27:40,400
‫but when it's correct then of course it should be green.

505
00:27:42,030 --> 00:27:44,930
‫So yeah, logged in successfully

506
00:27:44,930 --> 00:27:47,890
‫and we see a reload after one and a half seconds

507
00:27:47,890 --> 00:27:50,320
‫and so now it really is working.

508
00:27:50,320 --> 00:27:53,593
‫That's our complete authentication on the front-end.

509
00:27:54,880 --> 00:27:59,430
‫That was a lot of work, but if you ask me totally worth it.

510
00:27:59,430 --> 00:28:02,070
‫Now the only thing that's missing is

511
00:28:02,070 --> 00:28:05,690
‫us actually logging out when we click this button here.

512
00:28:05,690 --> 00:28:07,510
‫So right now that's not the case

513
00:28:07,510 --> 00:28:10,133
‫and so in the next video let's fix that.