1
00:00:01,030 --> 00:00:03,420
‫And now, to wrap up this section,

2
00:00:03,420 --> 00:00:05,630
‫let's again use our API,

3
00:00:05,630 --> 00:00:08,803
‫this time to also update the user's password.

4
00:00:10,750 --> 00:00:12,170
‫Basically, what we're gonna do,

5
00:00:12,170 --> 00:00:14,463
‫is to make this form here work.

6
00:00:17,060 --> 00:00:18,530
‫We already created the

7
00:00:18,530 --> 00:00:21,460
‫update data function in the last lecture,

8
00:00:21,460 --> 00:00:23,440
‫and now we can go ahead and create

9
00:00:23,440 --> 00:00:25,760
‫an update password function as well.

10
00:00:25,760 --> 00:00:29,670
‫But that function would basically look exactly the same.

11
00:00:29,670 --> 00:00:31,500
‫And so, instead of doing that,

12
00:00:31,500 --> 00:00:33,560
‫I will change this function a little bit,

13
00:00:33,560 --> 00:00:37,003
‫and allow it to update both the data and the password.

14
00:00:38,030 --> 00:00:39,980
‫So let's call this one update settings.

15
00:00:45,330 --> 00:00:47,780
‫And then here, what we will pass in is,

16
00:00:47,780 --> 00:00:49,480
‫instead of name and email,

17
00:00:49,480 --> 00:00:52,800
‫an object containing all the data that we want to update,

18
00:00:52,800 --> 00:00:55,010
‫and then also a string for the type.

19
00:00:55,010 --> 00:00:57,773
‫Which can then either be data or password.

20
00:01:00,760 --> 00:01:03,800
‫Here, we will have data, which again will be an

21
00:01:03,800 --> 00:01:07,593
‫object of all the data to update, and then the type.

22
00:01:08,840 --> 00:01:10,093
‫So let's write that here.

23
00:01:11,680 --> 00:01:12,830
‫Type is either

24
00:01:16,800 --> 00:01:17,940
‫password or

25
00:01:19,400 --> 00:01:20,233
‫data.

26
00:01:21,340 --> 00:01:23,890
‫Then here, the data that we're sending

27
00:01:23,890 --> 00:01:26,543
‫is actually just the data object.

28
00:01:27,670 --> 00:01:29,050
‫Because when we call this function,

29
00:01:29,050 --> 00:01:32,233
‫we will then already create an object similar to this one.

30
00:01:33,440 --> 00:01:36,760
‫And so here, we simply need to then use data.

31
00:01:36,760 --> 00:01:40,023
‫And so, all we need to do is really this.

32
00:01:42,910 --> 00:01:43,790
‫Then of course,

33
00:01:43,790 --> 00:01:45,520
‫when we're updating the passwords,

34
00:01:45,520 --> 00:01:48,150
‫we also use another URL.

35
00:01:48,150 --> 00:01:50,660
‫And so let's just use a ternary operator

36
00:01:50,660 --> 00:01:53,414
‫in order to determine which URL we want to call

37
00:01:53,414 --> 00:01:55,483
‫depending on the type string.

38
00:01:58,180 --> 00:02:01,040
‫Let's go to Postman and actually copy

39
00:02:01,040 --> 00:02:02,597
‫the update password URL.

40
00:02:05,820 --> 00:02:07,600
‫Down here in authentication,

41
00:02:07,600 --> 00:02:09,883
‫we have update current user password.

42
00:02:10,791 --> 00:02:14,560
‫And so that one requires the password current,

43
00:02:14,560 --> 00:02:17,060
‫the passwords, so basically the new one,

44
00:02:17,060 --> 00:02:19,050
‫and then password confirm.

45
00:02:19,050 --> 00:02:22,623
‫And the route here is update my password.

46
00:02:24,950 --> 00:02:26,063
‫Similar to this one,

47
00:02:28,900 --> 00:02:33,900
‫and so, let's find a URL here and say

48
00:02:34,380 --> 00:02:38,403
‫if the type is equal to password,

49
00:02:40,260 --> 00:02:41,230
‫then let the URL be

50
00:02:43,350 --> 00:02:47,533
‫well, all of this, and then slash update my password.

51
00:02:50,470 --> 00:02:52,993
‫And else, it will be this one here.

52
00:02:58,430 --> 00:03:02,023
‫And so that's what we use this type parameter here.

53
00:03:03,730 --> 00:03:06,773
‫Here, then, we simply need the URL,

54
00:03:08,370 --> 00:03:10,010
‫and that's it.

55
00:03:10,010 --> 00:03:12,620
‫And also down here in the success string,

56
00:03:12,620 --> 00:03:15,980
‫we should probably then put whether the passwords

57
00:03:15,980 --> 00:03:18,273
‫or the data was successfully updated.

58
00:03:22,720 --> 00:03:26,703
‫And so basically here, we're going to put the type now.

59
00:03:28,390 --> 00:03:31,210
‫Oh and let's also convert it to uppercase here,

60
00:03:31,210 --> 00:03:35,063
‫because otherwise the type will be lowercase, like this.

61
00:03:40,147 --> 00:03:43,430
‫This already looks good to me like this.

62
00:03:43,430 --> 00:03:46,080
‫Let's now, just to see if it works,

63
00:03:46,080 --> 00:03:48,860
‫actually use this update settings here

64
00:03:48,860 --> 00:03:50,410
‫to update the data.

65
00:03:50,410 --> 00:03:52,090
‫So what we did in the last lecture,

66
00:03:52,090 --> 00:03:54,443
‫but now with this new function.

67
00:03:55,320 --> 00:03:57,930
‫First of all, what we need to import here

68
00:03:57,930 --> 00:04:00,233
‫is now the update settings function.

69
00:04:01,750 --> 00:04:05,650
‫And in here, we need to call update settings,

70
00:04:05,650 --> 00:04:07,363
‫with of course and object now.

71
00:04:08,270 --> 00:04:09,603
‫And so that's this one.

72
00:04:10,650 --> 00:04:12,733
‫And now the type string which is data.

73
00:04:15,200 --> 00:04:16,683
‫Let's test that very quick.

74
00:04:18,210 --> 00:04:19,510
‫Let's again add here

75
00:04:20,365 --> 00:04:22,270
‫some name

76
00:04:22,270 --> 00:04:23,820
‫save to settings

77
00:04:23,820 --> 00:04:26,003
‫and data updated successfully.

78
00:04:27,320 --> 00:04:28,980
‫Just a quick reload,

79
00:04:28,980 --> 00:04:30,993
‫and indeed everything is working.

80
00:04:32,690 --> 00:04:35,470
‫And so now all we need to do is read the data

81
00:04:35,470 --> 00:04:37,460
‫from these three input fields,

82
00:04:37,460 --> 00:04:41,163
‫and then also pass them into the update settings function.

83
00:04:44,440 --> 00:04:47,570
‫Let's first of all select the password form,

84
00:04:47,570 --> 00:04:50,533
‫and so back in our account template,

85
00:04:51,500 --> 00:04:55,493
‫this one is called the form user settings.

86
00:04:55,493 --> 00:04:57,883
‫Let's select based on that.

87
00:05:01,240 --> 00:05:02,783
‫So just duplicating.

88
00:05:05,260 --> 00:05:08,290
‫Form user settings, and probably

89
00:05:08,290 --> 00:05:11,013
‫that should be called password now.

90
00:05:11,910 --> 00:05:14,160
‫Yeah, let's actually call that password here.

91
00:05:15,650 --> 00:05:17,343
‫That makes a bit more sense.

92
00:05:20,070 --> 00:05:25,070
‫So user password form,

93
00:05:27,410 --> 00:05:30,263
‫and so now here we have something very similar.

94
00:05:31,960 --> 00:05:32,913
‫Let's just copy it,

95
00:05:35,770 --> 00:05:37,473
‫user password form,

96
00:05:39,400 --> 00:05:42,893
‫and now we simply need to get the three passwords.

97
00:05:44,370 --> 00:05:47,530
‫And they are called password current, password,

98
00:05:47,530 --> 00:05:49,963
‫and password confirm with the dashes.

99
00:05:57,510 --> 00:05:59,440
‫Password current is here called

100
00:05:59,440 --> 00:06:03,424
‫with the ID password current,

101
00:06:03,424 --> 00:06:06,483
‫and now just duplicating it three times.

102
00:06:11,450 --> 00:06:12,810
‫Confirm.

103
00:06:12,810 --> 00:06:15,313
‫And here, confirm as well.

104
00:06:16,447 --> 00:06:20,270
‫And now let's just go very quickly to Postman again,

105
00:06:20,270 --> 00:06:23,400
‫just to really make sure that this is the variable names

106
00:06:23,400 --> 00:06:25,300
‫that our API expects.

107
00:06:25,300 --> 00:06:27,973
‫Let's just copy these here to quickly compare them.

108
00:06:32,910 --> 00:06:36,010
‫And so indeed they are called password current,

109
00:06:36,010 --> 00:06:37,820
‫so the exact same name here,

110
00:06:37,820 --> 00:06:40,720
‫then password, and password confirm.

111
00:06:40,720 --> 00:06:44,170
‫And so if we now create an object with these three,

112
00:06:44,170 --> 00:06:46,080
‫then that will be exactly the data that's

113
00:06:46,080 --> 00:06:49,220
‫gonna be sent to the API, and so our handler

114
00:06:49,220 --> 00:06:51,783
‫will then be able to read that data correctly.

115
00:06:52,879 --> 00:06:57,879
‫Password current, password, and password confirm.

116
00:07:03,620 --> 00:07:04,900
‫And now just to finish,

117
00:07:04,900 --> 00:07:08,593
‫here of course it has to be password.

118
00:07:10,070 --> 00:07:12,573
‫Let's now test that.

119
00:07:14,120 --> 00:07:18,490
‫And so the current password is test1234,

120
00:07:18,490 --> 00:07:20,280
‫and now I will create a new password,

121
00:07:20,280 --> 00:07:21,833
‫called newpassword.

122
00:07:26,382 --> 00:07:29,530
‫Newpassword again, and so as I already mentioned,

123
00:07:29,530 --> 00:07:31,740
‫we need to put in the current password,

124
00:07:31,740 --> 00:07:33,690
‫so that in case that someone finds your

125
00:07:33,690 --> 00:07:35,400
‫computer open, for example,

126
00:07:35,400 --> 00:07:37,250
‫they cannot simply change your password

127
00:07:37,250 --> 00:07:38,923
‫without knowing your current one.

128
00:07:39,796 --> 00:07:42,500
‫And then of course we need to confirm the password,

129
00:07:42,500 --> 00:07:45,483
‫just so we don't make any mistake in the original one.

130
00:07:46,890 --> 00:07:48,520
‫So let's save it now,

131
00:07:48,520 --> 00:07:51,528
‫and password updated correctly.

132
00:07:51,528 --> 00:07:53,349
‫Great.

133
00:07:53,349 --> 00:07:56,360
‫Let's actually take a look at the cookie now,

134
00:07:56,360 --> 00:07:59,873
‫because we should have gotten a new one right away.

135
00:08:02,840 --> 00:08:06,495
‫And actually, that is exactly right now.

136
00:08:06,495 --> 00:08:10,330
‫That's the time I'm recording this video,

137
00:08:10,330 --> 00:08:13,470
‫and so that means that we are now still logged in.

138
00:08:13,470 --> 00:08:16,180
‫Just to remember why this happens,

139
00:08:16,180 --> 00:08:19,320
‫it is because here in the auth controller,

140
00:08:19,320 --> 00:08:21,360
‫down here at update password,

141
00:08:21,360 --> 00:08:23,810
‫we in the end actually logged user in,

142
00:08:23,810 --> 00:08:25,780
‫so here in create sent token,

143
00:08:25,780 --> 00:08:27,910
‫we send a new cookie right away.

144
00:08:27,910 --> 00:08:31,393
‫And so that means that we are still logged in.

145
00:08:33,744 --> 00:08:35,950
‫If we are now to reload this page,

146
00:08:35,950 --> 00:08:37,910
‫and I will actually not reload it,

147
00:08:37,910 --> 00:08:39,950
‫I will just open it in a new tab,

148
00:08:39,950 --> 00:08:41,990
‫'cause I want to show you something else,

149
00:08:41,990 --> 00:08:45,773
‫but, what matters here is that we are still logged in.

150
00:08:48,710 --> 00:08:50,260
‫What I wanted to show you is that

151
00:08:50,260 --> 00:08:52,740
‫we now still have the passwords here.

152
00:08:52,740 --> 00:08:54,930
‫And we actually don't want that.

153
00:08:54,930 --> 00:08:57,210
‫After the API call was successful,

154
00:08:57,210 --> 00:08:59,040
‫we should then go ahead and delete

155
00:08:59,040 --> 00:09:00,943
‫the content from this input fields.

156
00:09:03,670 --> 00:09:07,520
‫That's something that we should do also here in this file,

157
00:09:07,520 --> 00:09:10,090
‫because we said that right here is where we handle

158
00:09:10,090 --> 00:09:12,990
‫everything related to user interface.

159
00:09:12,990 --> 00:09:15,960
‫Now, remember that this update settings function here

160
00:09:15,960 --> 00:09:17,883
‫is actually an asynchronous function.

161
00:09:21,030 --> 00:09:23,281
‫And so it's going to return a promise.

162
00:09:23,281 --> 00:09:26,848
‫As you already know, at this point we can then await

163
00:09:26,848 --> 00:09:29,003
‫that promise right here.

164
00:09:31,180 --> 00:09:33,608
‫And in this case, it's not really to save the result

165
00:09:33,608 --> 00:09:35,860
‫of the promise to anything,

166
00:09:35,860 --> 00:09:37,870
‫it's only to wait until it's finished,

167
00:09:37,870 --> 00:09:40,460
‫so that after that, we can do some other stuff.

168
00:09:40,460 --> 00:09:42,830
‫And in this case, that is to clear these

169
00:09:42,830 --> 00:09:44,783
‫input fields that I just showed you.

170
00:09:45,950 --> 00:09:49,520
‫Now of course, in order to be able to use await,

171
00:09:49,520 --> 00:09:53,660
‫we need to mark this function here as async,

172
00:09:53,660 --> 00:09:55,540
‫but that's very easy.

173
00:09:55,540 --> 00:09:59,160
‫So now all we need to do is to select these fields again,

174
00:09:59,160 --> 00:10:00,443
‫and then clear them.

175
00:10:01,700 --> 00:10:02,980
‫So let's just grab

176
00:10:04,610 --> 00:10:05,563
‫this here.

177
00:10:07,672 --> 00:10:09,022
‫And then set them to empty.

178
00:10:10,300 --> 00:10:11,340
‫And that's it.

179
00:10:11,340 --> 00:10:12,540
‫So that's really simple.

180
00:10:14,010 --> 00:10:15,673
‫And let's just duplicate this,

181
00:10:17,010 --> 00:10:18,613
‫and confirm.

182
00:10:20,760 --> 00:10:22,843
‫So let's try that again.

183
00:10:29,154 --> 00:10:31,750
‫And so now let's keep in mind that the password

184
00:10:31,750 --> 00:10:33,503
‫is currently newpassword,

185
00:10:35,480 --> 00:10:37,223
‫and now let's go back to test1234,

186
00:10:39,883 --> 00:10:41,403
‫test1234.

187
00:10:45,052 --> 00:10:47,490
‫And now actually the fields are cleared.

188
00:10:47,490 --> 00:10:49,960
‫But maybe you also noticed, just like me,

189
00:10:49,960 --> 00:10:52,250
‫that it took quite some time until we

190
00:10:52,250 --> 00:10:54,300
‫actually got our alert here.

191
00:10:54,300 --> 00:10:56,130
‫And that's because setting a new password

192
00:10:56,130 --> 00:10:59,820
‫sets some time because of the encryption process.

193
00:10:59,820 --> 00:11:02,555
‫And so we should give the user some kind of feedback that

194
00:11:02,555 --> 00:11:05,010
‫there is actually something happening in the background.

195
00:11:05,010 --> 00:11:09,133
‫And typically you see some loading spinners

196
00:11:09,133 --> 00:11:11,220
‫somewhere on the page,

197
00:11:11,220 --> 00:11:13,170
‫but let's keep it very simple here,

198
00:11:13,170 --> 00:11:16,770
‫and all I'm going to do is to update the text here

199
00:11:16,770 --> 00:11:18,270
‫as soon as we click it,

200
00:11:18,270 --> 00:11:20,370
‫and then when the API call is finished,

201
00:11:20,370 --> 00:11:23,427
‫we will set it back to save password.

202
00:11:23,427 --> 00:11:27,200
‫That's a very nice little touch that

203
00:11:27,200 --> 00:11:29,710
‫we can add to our user interfaces,

204
00:11:29,710 --> 00:11:33,180
‫and we could do the same here for the user data form,

205
00:11:33,180 --> 00:11:36,260
‫but that one is usually very quick,

206
00:11:36,260 --> 00:11:38,073
‫and so we don't need that.

207
00:11:38,073 --> 00:11:41,020
‫I'm going back to this template here again,

208
00:11:41,020 --> 00:11:44,010
‫because I need to select this button here.

209
00:11:44,010 --> 00:11:46,570
‫None of them here is really unique,

210
00:11:46,570 --> 00:11:48,473
‫so let's add yet another one.

211
00:11:51,150 --> 00:11:55,783
‫So button save password.

212
00:12:02,530 --> 00:12:04,490
‫And so let's do that right here,

213
00:12:04,490 --> 00:12:05,693
‫right at the beginning,

214
00:12:10,070 --> 00:12:15,070
‫document.queryselector, that was the wrong one,

215
00:12:16,351 --> 00:12:19,700
‫so queryselector.forlcass.value

216
00:12:27,120 --> 00:12:32,080
‫and set it to "Updating..."

217
00:12:32,080 --> 00:12:36,763
‫And then, once we are done, so after this await,

218
00:12:38,570 --> 00:12:42,943
‫we set it back to update,

219
00:12:44,780 --> 00:12:47,210
‫or save I believe it is,

220
00:12:47,210 --> 00:12:50,833
‫yeah, it's actually save password.

221
00:12:52,523 --> 00:12:55,200
‫Give it save, and see if that works,

222
00:12:55,200 --> 00:12:57,663
‫and if it does, then we're actually done.

223
00:12:59,550 --> 00:13:03,260
‫And so again, now the password is test1234,

224
00:13:03,260 --> 00:13:05,803
‫and I'm setting it back to newpassword,

225
00:13:10,160 --> 00:13:12,413
‫and now let's take a look here at our button,

226
00:13:13,483 --> 00:13:18,483
‫ah, that didn't work, and I already know why that is.

227
00:13:19,590 --> 00:13:21,000
‫And that's because, of course,

228
00:13:21,000 --> 00:13:22,910
‫we cannot use value to change the

229
00:13:22,910 --> 00:13:26,210
‫content of some html elements.

230
00:13:26,210 --> 00:13:30,650
‫So for that, we use inner html, or also text content.

231
00:13:30,650 --> 00:13:33,120
‫So we could use text content as well,

232
00:13:33,120 --> 00:13:34,133
‫so let's do that.

233
00:13:38,230 --> 00:13:41,950
‫And so one last time, and so now we can actually

234
00:13:41,950 --> 00:13:46,180
‫set it back to the default password.

235
00:13:46,180 --> 00:13:50,160
‫The current password is now newpassword,

236
00:13:50,160 --> 00:13:53,245
‫and then test1234,

237
00:13:53,245 --> 00:13:54,633
‫test1234.

238
00:13:55,700 --> 00:13:57,300
‫And now let's see,

239
00:13:57,300 --> 00:13:59,040
‫ah, and now it works.

240
00:13:59,040 --> 00:14:00,390
‫Beautiful.

241
00:14:00,390 --> 00:14:04,230
‫And again, you will see that we are still logged in.

242
00:14:04,230 --> 00:14:05,610
‫Perfect.

243
00:14:05,610 --> 00:14:09,070
‫And with this, we actually wrap up this section.

244
00:14:09,070 --> 00:14:12,550
‫Congratulations, one more time, for making it this far,

245
00:14:12,550 --> 00:14:16,320
‫and all this amazing progress that you've been doing.

246
00:14:16,320 --> 00:14:19,010
‫We're actually almost finished with our project,

247
00:14:19,010 --> 00:14:20,280
‫but in the next section,

248
00:14:20,280 --> 00:14:23,460
‫we will continue adding some more stuff to it.

249
00:14:23,460 --> 00:14:25,140
‫We will have file uploads,

250
00:14:25,140 --> 00:14:27,930
‫we will create some really cool email templates,

251
00:14:27,930 --> 00:14:29,760
‫and also, we will even include

252
00:14:29,760 --> 00:14:32,320
‫payments into this application.

253
00:14:32,320 --> 00:14:34,730
‫There's still a ton of awesome content ahead

254
00:14:34,730 --> 00:14:36,663
‫to make this project even better.