1 00:00:01,140 --> 00:00:03,900 ‫So now let's build that feature 2 00:00:03,900 --> 00:00:07,800 ‫where we allow our users to update their passwords, 3 00:00:07,800 --> 00:00:12,123 ‫their full name, and even upload an avatar image. 4 00:00:13,590 --> 00:00:17,760 ‫And for that, we already have two prebuilt components. 5 00:00:17,760 --> 00:00:21,000 ‫So we have this form here to update the password 6 00:00:21,000 --> 00:00:24,990 ‫and form to update the user data itself. 7 00:00:24,990 --> 00:00:29,990 ‫So that's gonna be the full name and also the avatar. 8 00:00:30,180 --> 00:00:34,830 ‫And let's actually immediately include this form 9 00:00:34,830 --> 00:00:36,633 ‫right here into the page. 10 00:00:37,590 --> 00:00:42,030 ‫So in the account page, 11 00:00:42,030 --> 00:00:46,623 ‫let's come here and bring in that component. 12 00:00:47,760 --> 00:00:51,693 ‫So, update user data form. 13 00:00:55,230 --> 00:00:58,920 ‫So you see that here we have the email address 14 00:00:58,920 --> 00:01:01,170 ‫which we are not allowed to change. 15 00:01:01,170 --> 00:01:05,160 ‫Then we have the full name which we can then change here, 16 00:01:05,160 --> 00:01:08,133 ‫and we have that button to upload the avatar. 17 00:01:09,510 --> 00:01:13,140 ‫And here, I'm getting this user data again 18 00:01:13,140 --> 00:01:16,980 ‫from this use user hook that we built earlier. 19 00:01:16,980 --> 00:01:19,050 ‫So this is another use case 20 00:01:19,050 --> 00:01:21,690 ‫and then here we have these two state variables 21 00:01:21,690 --> 00:01:26,343 ‫because these two elements here are controlled elements. 22 00:01:29,310 --> 00:01:34,110 ‫So here is the email field which is disabled by default, 23 00:01:34,110 --> 00:01:36,750 ‫and here we have the standard controlled element, 24 00:01:36,750 --> 00:01:40,833 ‫and here then to upload the image file. 25 00:01:42,450 --> 00:01:45,990 ‫Now here, the default value of the full name 26 00:01:45,990 --> 00:01:50,010 ‫can actually immediately be set with the current full name 27 00:01:50,010 --> 00:01:54,120 ‫coming from user data because here in this component, 28 00:01:54,120 --> 00:01:58,290 ‫we already know that the user will have already been loaded 29 00:01:58,290 --> 00:02:01,320 ‫and therefore, we don't need any loading states 30 00:02:01,320 --> 00:02:05,400 ‫and we can immediately use this data right here, 31 00:02:05,400 --> 00:02:09,093 ‫for example, to set it as a default state value. 32 00:02:10,170 --> 00:02:11,220 ‫Now all right, 33 00:02:11,220 --> 00:02:14,670 ‫so this is basically the skeleton component here 34 00:02:14,670 --> 00:02:17,670 ‫which doesn't do anything on its own yet. 35 00:02:17,670 --> 00:02:20,640 ‫And so, now it's time to add 36 00:02:20,640 --> 00:02:25,477 ‫yet another service function here to our authentication API. 37 00:02:27,480 --> 00:02:30,640 ‫So, let's do that here at the end 38 00:02:31,530 --> 00:02:35,310 ‫because of course now we will need a function 39 00:02:35,310 --> 00:02:37,083 ‫to update our user. 40 00:02:38,910 --> 00:02:42,333 ‫So update current user, 41 00:02:43,596 --> 00:02:45,810 ‫and then here we will pass in, as always, 42 00:02:45,810 --> 00:02:48,420 ‫an object with the data. 43 00:02:48,420 --> 00:02:51,030 ‫So that can be the password, 44 00:02:51,030 --> 00:02:53,583 ‫the full name, 45 00:02:55,170 --> 00:02:57,183 ‫and the avatar. 46 00:02:58,470 --> 00:03:01,593 ‫So let's see what we will need to do here. 47 00:03:03,840 --> 00:03:06,850 ‫So first we update the password 48 00:03:09,450 --> 00:03:13,170 ‫or the full name. 49 00:03:13,170 --> 00:03:16,020 ‫So we can never update both at the same time 50 00:03:16,020 --> 00:03:21,000 ‫because they are located here in different forms, right, 51 00:03:21,000 --> 00:03:23,460 ‫so we will have this same function here 52 00:03:23,460 --> 00:03:26,250 ‫working for both of these forms, 53 00:03:26,250 --> 00:03:28,410 ‫but we cannot update the password 54 00:03:28,410 --> 00:03:30,663 ‫and the full name at the same time. 55 00:03:32,280 --> 00:03:37,280 ‫Then second, we upload the avatar image 56 00:03:37,890 --> 00:03:41,640 ‫and then third, we use that avatar 57 00:03:41,640 --> 00:03:46,410 ‫to update the user again with the avatar. 58 00:03:46,410 --> 00:03:50,523 ‫So update the avatar in the user itself. 59 00:03:52,260 --> 00:03:55,230 ‫Now okay, so the way that we update 60 00:03:55,230 --> 00:04:00,037 ‫to currently login user is with super base dot auth 61 00:04:01,380 --> 00:04:04,290 ‫dot update user. 62 00:04:04,290 --> 00:04:06,600 ‫So this will automatically know which user 63 00:04:06,600 --> 00:04:08,280 ‫is currently logged in 64 00:04:08,280 --> 00:04:10,950 ‫and then we can update that user. 65 00:04:10,950 --> 00:04:13,440 ‫And for that, we need to pass in an object 66 00:04:13,440 --> 00:04:16,500 ‫of all the stuff that needs to be updated. 67 00:04:16,500 --> 00:04:20,373 ‫And so let's actually build that object here before. 68 00:04:21,990 --> 00:04:24,840 ‫Then of course, we will also need to await this, 69 00:04:24,840 --> 00:04:29,673 ‫and as always, receive the data and potential errors. 70 00:04:31,440 --> 00:04:35,820 ‫So let's create a variable here called update data. 71 00:04:37,710 --> 00:04:38,550 ‫And so then, 72 00:04:38,550 --> 00:04:41,670 ‫according to which data we actually received here, 73 00:04:41,670 --> 00:04:45,900 ‫we will build this object. 74 00:04:45,900 --> 00:04:47,673 ‫So if there is a password, 75 00:04:48,870 --> 00:04:52,180 ‫then the update data is simply gonna be an object 76 00:04:53,790 --> 00:04:55,263 ‫with that password. 77 00:04:56,190 --> 00:04:59,103 ‫But if there is a full name, 78 00:05:00,690 --> 00:05:04,320 ‫then the update data will look a little bit different 79 00:05:04,320 --> 00:05:09,320 ‫because remember that when we first signed up the user, 80 00:05:10,110 --> 00:05:15,000 ‫then the full name goes here into this strange data object. 81 00:05:15,000 --> 00:05:18,990 ‫And so here, we need to do something similar now. 82 00:05:18,990 --> 00:05:21,810 ‫So we need to again specify the data 83 00:05:21,810 --> 00:05:25,674 ‫and then that receives yet another object. 84 00:05:25,674 --> 00:05:28,950 ‫And so here is where we specify that full name. 85 00:05:28,950 --> 00:05:32,460 ‫And remember again that only one of these two 86 00:05:32,460 --> 00:05:34,200 ‫can be true at the same time. 87 00:05:34,200 --> 00:05:37,980 ‫And so that's why we can write this kind of logic there 88 00:05:37,980 --> 00:05:40,293 ‫and then we just need to pass that in here. 89 00:05:41,744 --> 00:05:42,577 ‫Okay. 90 00:05:44,070 --> 00:05:46,260 ‫Now if there is an error, 91 00:05:46,260 --> 00:05:49,713 ‫then let's just, as always, grab this, 92 00:05:50,820 --> 00:05:53,670 ‫and also, if there is no avatar, 93 00:05:53,670 --> 00:05:57,150 ‫then we are already done with the function at this point. 94 00:05:57,150 --> 00:05:59,640 ‫So then there's nothing to upload. 95 00:05:59,640 --> 00:06:04,640 ‫So if no avatar, then just return the data as usual. 96 00:06:06,750 --> 00:06:09,690 ‫Okay, but if there is actually 97 00:06:09,690 --> 00:06:12,840 ‫an avatar image specified in the input, 98 00:06:12,840 --> 00:06:15,603 ‫then here is where we upload that. 99 00:06:17,130 --> 00:06:20,643 ‫So first, let's create ourselves a unique file name. 100 00:06:22,140 --> 00:06:24,183 ‫So let's call that avatar. 101 00:06:26,130 --> 00:06:28,170 ‫And so this is gonna be a bit similar 102 00:06:28,170 --> 00:06:31,203 ‫to what we did earlier with the cabin images. 103 00:06:32,400 --> 00:06:36,240 ‫Now here, let's then use the user's ID. 104 00:06:36,240 --> 00:06:38,280 ‫So that's gonna be stored in the data 105 00:06:38,280 --> 00:06:41,280 ‫that we receive from up here. 106 00:06:41,280 --> 00:06:44,610 ‫So that's data dot user dot ID, 107 00:06:44,610 --> 00:06:48,150 ‫and then to really make sure that this is unique, 108 00:06:48,150 --> 00:06:53,150 ‫let's even add a random number here to the end. 109 00:06:54,975 --> 00:06:59,310 ‫Okay, and so now let's check if we already have 110 00:06:59,310 --> 00:07:01,503 ‫our storage bucket in place. 111 00:07:02,790 --> 00:07:05,670 ‫So let's come right here, and indeed, 112 00:07:05,670 --> 00:07:09,810 ‫we already created this public avatar's bucket 113 00:07:09,810 --> 00:07:11,610 ‫in the very beginning. 114 00:07:11,610 --> 00:07:15,900 ‫And it should also already have here a policy. 115 00:07:15,900 --> 00:07:17,190 ‫Well actually, it doesn't 116 00:07:17,190 --> 00:07:20,010 ‫and so it's a good thing that we came here 117 00:07:20,010 --> 00:07:23,853 ‫because now we need to allow access here. 118 00:07:24,840 --> 00:07:29,520 ‫And actually, we don't want any of the default ones, 119 00:07:29,520 --> 00:07:32,310 ‫but instead, we want to create our own. 120 00:07:32,310 --> 00:07:36,100 ‫And so let's select all of these maybe 121 00:07:36,960 --> 00:07:41,673 ‫and then here, let's select only authenticated users. 122 00:07:44,400 --> 00:07:47,763 ‫All right, now we need a policy name. 123 00:07:50,820 --> 00:07:54,243 ‫Allow access for auth users. 124 00:07:57,840 --> 00:07:59,223 ‫Let's save this. 125 00:08:00,360 --> 00:08:04,173 ‫And these other policies that we already have here, 126 00:08:06,420 --> 00:08:11,100 ‫they, right now, do actually work for all users. 127 00:08:11,100 --> 00:08:15,150 ‫So we could change that here for all of the four policies 128 00:08:15,150 --> 00:08:17,640 ‫and you can do that if you want, 129 00:08:17,640 --> 00:08:19,953 ‫but I will just leave it like this. 130 00:08:21,990 --> 00:08:22,823 ‫All right. 131 00:08:25,230 --> 00:08:30,230 ‫So, here we will be able to only receive an error, 132 00:08:30,540 --> 00:08:34,410 ‫not data, and so what we're gonna call here 133 00:08:34,410 --> 00:08:39,410 ‫is super base, not storage, and then dot from, 134 00:08:40,380 --> 00:08:42,480 ‫and here the name of the bucket. 135 00:08:42,480 --> 00:08:45,240 ‫And so that's, again, called avatars 136 00:08:45,240 --> 00:08:48,420 ‫and then we use the upload method 137 00:08:48,420 --> 00:08:51,100 ‫where first we pass in the file name 138 00:08:52,799 --> 00:08:55,200 ‫and then the image itself. 139 00:08:55,200 --> 00:08:59,400 ‫And so that's gonna be the avatar image which is, 140 00:08:59,400 --> 00:09:03,540 ‫of course, going to come from this state variable here, 141 00:09:03,540 --> 00:09:08,540 ‫which in turn will contain E dot target dot files 142 00:09:09,480 --> 00:09:14,460 ‫at position zero each time that we change the file input. 143 00:09:14,460 --> 00:09:16,980 ‫So each time that we select a new file, 144 00:09:16,980 --> 00:09:19,290 ‫that file, so that image, 145 00:09:19,290 --> 00:09:22,740 ‫will be stored in that avatar state. 146 00:09:22,740 --> 00:09:25,830 ‫And so this thing here we already did earlier 147 00:09:25,830 --> 00:09:28,230 ‫when we uploaded cabin images. 148 00:09:28,230 --> 00:09:29,133 ‫Remember that? 149 00:09:30,210 --> 00:09:32,850 ‫So again, that will then get passed 150 00:09:32,850 --> 00:09:34,380 ‫here into this function 151 00:09:34,380 --> 00:09:37,743 ‫and then we upload that to our bucket. 152 00:09:38,820 --> 00:09:42,420 ‫Now here we need to rename this to something else. 153 00:09:42,420 --> 00:09:46,863 ‫So storage error and then, 154 00:09:50,280 --> 00:09:52,140 ‫again, if there is some error, 155 00:09:52,140 --> 00:09:53,590 ‫we just want to throw that... 156 00:10:01,376 --> 00:10:03,120 ‫And if that is successful, 157 00:10:03,120 --> 00:10:06,210 ‫then we actually need to update the user again, 158 00:10:06,210 --> 00:10:11,040 ‫this time by then adding the URL to the avatar image. 159 00:10:11,040 --> 00:10:14,730 ‫So again, just like we did with the cabins, 160 00:10:14,730 --> 00:10:17,730 ‫with the difference that here, the code, is I believe, 161 00:10:17,730 --> 00:10:19,383 ‫a bit more straight forward. 162 00:10:21,210 --> 00:10:26,103 ‫But anyway, here again we receive the data and the error, 163 00:10:27,360 --> 00:10:31,050 ‫let's call it maybe error two this time, 164 00:10:31,050 --> 00:10:33,723 ‫and here, we also need to rename this one, 165 00:10:34,680 --> 00:10:38,100 ‫let's call it the updated user. 166 00:10:38,100 --> 00:10:43,100 ‫And so then, again, super base dot auth dot update user. 167 00:10:46,710 --> 00:10:48,840 ‫Then we create an object 168 00:10:48,840 --> 00:10:53,650 ‫and then this avatar also needs to go into the data object 169 00:10:56,345 --> 00:10:59,217 ‫and so then we have avatar, and then, 170 00:11:00,240 --> 00:11:05,220 ‫and so here we are going to specify that URL to the image. 171 00:11:05,220 --> 00:11:09,750 ‫So to see what that image is gonna look like, 172 00:11:09,750 --> 00:11:12,333 ‫let's just upload some file here. 173 00:11:13,320 --> 00:11:16,270 ‫So let's just come to our project folder 174 00:11:17,340 --> 00:11:20,133 ‫and that's in the wrong place now. 175 00:11:21,300 --> 00:11:24,033 ‫And so from here, let's just grab some image, 176 00:11:25,170 --> 00:11:27,030 ‫like these cabin images, 177 00:11:27,030 --> 00:11:30,273 ‫because I actually don't have any avatar here. 178 00:11:32,490 --> 00:11:34,230 ‫And so if I drop this here now, 179 00:11:34,230 --> 00:11:37,773 ‫then that should upload so that we can then grab the URL. 180 00:11:40,020 --> 00:11:41,613 ‫So get the URL here. 181 00:11:46,410 --> 00:11:49,590 ‫And so then we need to replace this part 182 00:11:49,590 --> 00:11:51,213 ‫with the actual file name. 183 00:11:57,180 --> 00:11:59,940 ‫So this one that we created here earlier, 184 00:11:59,940 --> 00:12:04,530 ‫and then also let's actually replace this part 185 00:12:04,530 --> 00:12:06,120 ‫with the super base URL 186 00:12:06,120 --> 00:12:09,630 ‫that we have stored in some other file. 187 00:12:09,630 --> 00:12:11,553 ‫So super base URL. 188 00:12:13,110 --> 00:12:18,090 ‫Now right, then let's again grab this error, 189 00:12:18,090 --> 00:12:20,523 ‫so error handling is very important, 190 00:12:23,610 --> 00:12:25,560 ‫but if everything went well, 191 00:12:25,560 --> 00:12:28,750 ‫then let's return the updated user 192 00:12:31,320 --> 00:12:33,153 ‫that we just received here. 193 00:12:34,500 --> 00:12:37,920 ‫Now all right, so that should be done 194 00:12:37,920 --> 00:12:41,280 ‫and so now it's time to consume this function here 195 00:12:41,280 --> 00:12:43,950 ‫in yet another custom hook. 196 00:12:43,950 --> 00:12:48,820 ‫So use update user dot JS 197 00:12:49,830 --> 00:12:54,300 ‫and here let's actually just grab the code from here. 198 00:12:54,300 --> 00:12:57,060 ‫So this is gonna be just very similar. 199 00:12:57,060 --> 00:13:01,743 ‫So let's get this and paste that here. 200 00:13:02,760 --> 00:13:07,320 ‫So use update user, 201 00:13:07,320 --> 00:13:11,790 ‫then here our mutation function is gonna be that one 202 00:13:11,790 --> 00:13:13,203 ‫that we just created. 203 00:13:14,130 --> 00:13:17,040 ‫So update current user. 204 00:13:17,040 --> 00:13:20,060 ‫Then here, let's call the function update user 205 00:13:22,920 --> 00:13:26,313 ‫and here is updating. 206 00:13:28,410 --> 00:13:30,573 ‫Then we no longer need this. 207 00:13:31,860 --> 00:13:36,860 ‫Here, let's then return update user and is updating, 208 00:13:38,880 --> 00:13:42,450 ‫and then finally, the query that should be invalidated 209 00:13:42,450 --> 00:13:44,103 ‫is just called user. 210 00:13:46,110 --> 00:13:48,630 ‫And here, let's also change the string, 211 00:13:48,630 --> 00:13:53,630 ‫user account successfully updated. 212 00:13:57,240 --> 00:13:58,293 ‫All right. 213 00:13:59,310 --> 00:14:02,103 ‫And so let's try this out here. 214 00:14:03,480 --> 00:14:05,073 ‫So maybe right here, 215 00:14:08,400 --> 00:14:11,550 ‫we get update user and we get 216 00:14:11,550 --> 00:14:16,550 ‫is updating from use, update user. 217 00:14:21,360 --> 00:14:22,620 ‫Okay. 218 00:14:22,620 --> 00:14:25,263 ‫And so here, let's just call that function. 219 00:14:30,330 --> 00:14:33,840 ‫And we pass in the full name and the avatar, 220 00:14:33,840 --> 00:14:36,120 ‫and first, we also need to make sure 221 00:14:36,120 --> 00:14:39,063 ‫that there actually is a full name. 222 00:14:40,230 --> 00:14:42,300 ‫So the full name needs to exist, 223 00:14:42,300 --> 00:14:44,433 ‫but the avatar doesn't have to. 224 00:14:46,290 --> 00:14:49,113 ‫All right, so let's try this out. 225 00:14:52,260 --> 00:14:55,600 ‫Let's try to change this to Jonas 226 00:14:56,790 --> 00:15:01,050 ‫and probably we should also use the is updating state here 227 00:15:01,050 --> 00:15:03,393 ‫to disable all our input fields. 228 00:15:06,120 --> 00:15:11,120 ‫So is updating and let's just grab this here, 229 00:15:16,170 --> 00:15:19,233 ‫and also on the buttons. 230 00:15:23,430 --> 00:15:27,090 ‫So let's try that, and well, 231 00:15:27,090 --> 00:15:28,990 ‫I'm not sure if anything is happening. 232 00:15:30,090 --> 00:15:32,043 ‫Let's reload that here, 233 00:15:34,500 --> 00:15:35,613 ‫try that again, 234 00:15:37,530 --> 00:15:42,530 ‫but still no result so maybe we have something wrong here. 235 00:15:44,100 --> 00:15:47,340 ‫Let's check out or handle submit function 236 00:15:47,340 --> 00:15:51,720 ‫and ah, indeed, here it should be 237 00:15:51,720 --> 00:15:56,070 ‫if there is no full name, then just return. 238 00:15:56,070 --> 00:15:58,053 ‫So then don't do anything. 239 00:16:00,090 --> 00:16:04,383 ‫All right, so that should work now, and nice. 240 00:16:05,670 --> 00:16:09,090 ‫So something is happening, and then indeed, 241 00:16:09,090 --> 00:16:11,940 ‫our user account was successfully updated, 242 00:16:11,940 --> 00:16:16,920 ‫and so now up here, we have the new user name of Jonas. 243 00:16:16,920 --> 00:16:18,270 ‫Nice. 244 00:16:18,270 --> 00:16:22,320 ‫Next up, let's then try to upload an avatar 245 00:16:22,320 --> 00:16:25,560 ‫and here, I will just use a cabin image again 246 00:16:25,560 --> 00:16:30,303 ‫because I don't really have any avatar here right now. 247 00:16:31,140 --> 00:16:35,133 ‫Let's also maybe try to change this to an upper case. 248 00:16:37,050 --> 00:16:40,200 ‫And so this should now take a bit more time, 249 00:16:40,200 --> 00:16:41,493 ‫but now it is finished. 250 00:16:42,690 --> 00:16:47,430 ‫Now here we didn't get that new image, actually. 251 00:16:47,430 --> 00:16:49,743 ‫Let's see what happens if we reload that. 252 00:16:51,030 --> 00:16:56,030 ‫And yeah, well there is the new image. 253 00:16:56,430 --> 00:17:00,570 ‫So it was apparently successfully uploaded here, 254 00:17:00,570 --> 00:17:02,940 ‫and so indeed, here it is. 255 00:17:02,940 --> 00:17:06,510 ‫So here's the avatar, then the user's ID, 256 00:17:06,510 --> 00:17:08,133 ‫and that random number. 257 00:17:09,300 --> 00:17:10,410 ‫Nice. 258 00:17:10,410 --> 00:17:14,970 ‫Now I'm not sure why that didn't change immediately. 259 00:17:14,970 --> 00:17:19,970 ‫Let's try to change these two things again. 260 00:17:20,430 --> 00:17:25,430 ‫Let's now try cabin image number one for this user, 261 00:17:25,440 --> 00:17:27,543 ‫and then update the account again. 262 00:17:29,400 --> 00:17:33,660 ‫And for some reason, it is not changing the image up there. 263 00:17:33,660 --> 00:17:37,803 ‫Let's see what kind of data we have here in our cache. 264 00:17:39,840 --> 00:17:43,740 ‫So which image we have there now, 265 00:17:43,740 --> 00:17:47,310 ‫and the only thing that probably has changed between them 266 00:17:47,310 --> 00:17:49,023 ‫is this random number. 267 00:17:50,010 --> 00:17:52,353 ‫So in our cache, we have this 088, 268 00:17:54,330 --> 00:17:57,630 ‫and so that apparently is the first one 269 00:17:57,630 --> 00:17:59,793 ‫that we had in the beginning. 270 00:18:02,280 --> 00:18:06,570 ‫So if we go back here to our bucket, 271 00:18:06,570 --> 00:18:07,803 ‫so if we close this, 272 00:18:10,080 --> 00:18:15,080 ‫yeah, then the new one is actually this one, with the 031. 273 00:18:15,330 --> 00:18:19,740 ‫So our cache hasn't actually really been updated. 274 00:18:19,740 --> 00:18:23,190 ‫And so let's do that manually in another way. 275 00:18:23,190 --> 00:18:26,010 ‫So now, as we left the page and came back, 276 00:18:26,010 --> 00:18:29,730 ‫then it did re-fetch all the data 277 00:18:29,730 --> 00:18:32,820 ‫and then it updated the image up here, 278 00:18:32,820 --> 00:18:34,830 ‫but for some reason, with the user, 279 00:18:34,830 --> 00:18:39,120 ‫it's not really working as intended right here. 280 00:18:39,120 --> 00:18:41,430 ‫So I re-invalidate the queries. 281 00:18:41,430 --> 00:18:45,990 ‫And so, this is a nice moment where I can show you again 282 00:18:46,860 --> 00:18:49,890 ‫how to update the data manually in the cache, 283 00:18:49,890 --> 00:18:54,890 ‫using query client dot set query data. 284 00:18:57,330 --> 00:19:01,890 ‫So here we can then manually set the user 285 00:19:01,890 --> 00:19:04,980 ‫to the user that we just received. 286 00:19:04,980 --> 00:19:06,873 ‫So let's grab that here. 287 00:19:09,000 --> 00:19:13,620 ‫So that's gonna be the user 288 00:19:13,620 --> 00:19:16,773 ‫and then user right here as well. 289 00:19:18,360 --> 00:19:21,450 ‫Okay, so we did the exact same thing earlier 290 00:19:21,450 --> 00:19:22,710 ‫when we logged in, 291 00:19:22,710 --> 00:19:26,757 ‫where we then immediately placed the new user in our cache. 292 00:19:26,757 --> 00:19:30,273 ‫And so here we are now going to do the exact same thing. 293 00:19:32,550 --> 00:19:36,060 ‫Now okay, but before we test this, 294 00:19:36,060 --> 00:19:40,260 ‫let's also here on this mutate function, 295 00:19:40,260 --> 00:19:44,820 ‫specify some things, and in particular, 296 00:19:44,820 --> 00:19:47,970 ‫the unsuccess handler. 297 00:19:47,970 --> 00:19:50,880 ‫So like we have done before many, many times 298 00:19:50,880 --> 00:19:55,760 ‫because here we now want to set the avatar back to no, 299 00:19:58,080 --> 00:20:00,240 ‫so back to the initial state, 300 00:20:00,240 --> 00:20:02,580 ‫but that actually won't be enough 301 00:20:02,580 --> 00:20:05,640 ‫to clear this name right there. 302 00:20:05,640 --> 00:20:10,140 ‫And so for that, we can actually do E dot target, 303 00:20:10,140 --> 00:20:12,780 ‫which is the form, and then on there, 304 00:20:12,780 --> 00:20:15,750 ‫we can call the reset function. 305 00:20:15,750 --> 00:20:18,963 ‫And so this is just standard HTML again. 306 00:20:21,270 --> 00:20:23,940 ‫Also, this cancel button that we have here 307 00:20:23,940 --> 00:20:26,640 ‫doesn't really work, I think, 308 00:20:26,640 --> 00:20:30,090 ‫because, I mean it did clear right here, 309 00:20:30,090 --> 00:20:33,990 ‫but if I changed something here, and I then want to cancel, 310 00:20:33,990 --> 00:20:38,520 ‫basically what we want is to get the initial name back here. 311 00:20:38,520 --> 00:20:42,093 ‫So let's also handle that event. 312 00:20:43,679 --> 00:20:45,720 ‫So clicking on that button, 313 00:20:45,720 --> 00:20:49,443 ‫so handle, cancel, 314 00:20:51,790 --> 00:20:56,560 ‫cancel we will call that on this button right here. 315 00:20:57,930 --> 00:21:02,040 ‫So handle cancel, 316 00:21:02,040 --> 00:21:06,330 ‫and since this button here actually has the type of reset, 317 00:21:06,330 --> 00:21:09,510 ‫which is an HTML five attribute, 318 00:21:09,510 --> 00:21:13,470 ‫this will actually not submit the form automatically. 319 00:21:13,470 --> 00:21:18,470 ‫So that's the reason why it did clear this file upload here. 320 00:21:18,600 --> 00:21:20,400 ‫And so we don't even need to do 321 00:21:20,400 --> 00:21:23,580 ‫any prevent default on this one. 322 00:21:23,580 --> 00:21:27,270 ‫All we need to do is to set the full name 323 00:21:27,270 --> 00:21:30,580 ‫back to the current full name 324 00:21:33,060 --> 00:21:38,013 ‫and set the avatar back to no. 325 00:21:39,060 --> 00:21:41,703 ‫So let's just briefly reload here. 326 00:21:43,230 --> 00:21:46,200 ‫So if I did something here and then canceled, 327 00:21:46,200 --> 00:21:49,890 ‫we went back to the initial name. 328 00:21:49,890 --> 00:21:54,890 ‫Now let's change this again and also change the image, 329 00:21:55,230 --> 00:21:56,853 ‫now here to number five, 330 00:21:58,050 --> 00:22:01,263 ‫and let's see if this time it updates immediately there. 331 00:22:05,850 --> 00:22:09,633 ‫Okay, so here apparently we got some error. 332 00:22:10,680 --> 00:22:13,830 ‫Now if we reload here, then we will see 333 00:22:13,830 --> 00:22:16,380 ‫that everything has been successful, 334 00:22:16,380 --> 00:22:19,980 ‫so the name and image have both been updated 335 00:22:19,980 --> 00:22:23,700 ‫because the error only happened here afterwards. 336 00:22:23,700 --> 00:22:27,120 ‫So only here in this unsuccess handler. 337 00:22:27,120 --> 00:22:30,453 ‫So let's see what we actually get here. 338 00:22:32,640 --> 00:22:36,813 ‫So let's then deactivate this part that we added, 339 00:22:37,920 --> 00:22:41,310 ‫then just log that data to the consol 340 00:22:41,310 --> 00:22:44,223 ‫'cause that's where apparently the error was. 341 00:22:48,720 --> 00:22:52,260 ‫Well, we actually do get an object with user, 342 00:22:52,260 --> 00:22:57,153 ‫so I'm not sure why that wasn't working earlier. 343 00:22:58,710 --> 00:23:00,810 ‫So let's check this again. 344 00:23:00,810 --> 00:23:03,933 ‫Maybe that was just an one-off error. 345 00:23:05,190 --> 00:23:08,163 ‫Yeah, so now actually that works, 346 00:23:09,630 --> 00:23:13,533 ‫so let's bring this back, let's change here again, 347 00:23:18,750 --> 00:23:22,080 ‫and then we have this other error. 348 00:23:22,080 --> 00:23:23,940 ‫So maybe we cannot do this one 349 00:23:23,940 --> 00:23:26,043 ‫and this one at the same time. 350 00:23:26,910 --> 00:23:30,663 ‫So let's try that just to make sure we reload. 351 00:23:33,450 --> 00:23:35,980 ‫Let's use another one just to make sure 352 00:23:37,920 --> 00:23:42,543 ‫and apparently we get the exact same error here. 353 00:23:44,310 --> 00:23:47,370 ‫So, let's just not do this then 354 00:23:47,370 --> 00:23:50,850 ‫and go back to just invalidating the queries. 355 00:23:50,850 --> 00:23:53,850 ‫So I will try to find out, offline, 356 00:23:53,850 --> 00:23:57,180 ‫so outside of this video, what is happening here, 357 00:23:57,180 --> 00:24:00,963 ‫and then maybe I will show you in the next video. 358 00:24:02,280 --> 00:24:05,040 ‫Now all right, so in any case, 359 00:24:05,040 --> 00:24:07,020 ‫this now works perfectly fine. 360 00:24:07,020 --> 00:24:09,090 ‫The only small issue that we had 361 00:24:09,090 --> 00:24:11,610 ‫was that uploading the file 362 00:24:11,610 --> 00:24:14,730 ‫would not immediately get reflected up here, 363 00:24:14,730 --> 00:24:18,540 ‫but then as soon as the data gets re-fetched at some point, 364 00:24:18,540 --> 00:24:20,700 ‫by re-add query, then of course, 365 00:24:20,700 --> 00:24:23,373 ‫that image will be updated there. 366 00:24:24,810 --> 00:24:29,810 ‫All right, and now let's do the update password form, 367 00:24:30,000 --> 00:24:32,400 ‫and in this case, actually, 368 00:24:32,400 --> 00:24:34,890 ‫I already have the entire form working 369 00:24:34,890 --> 00:24:38,220 ‫because it is actually exactly the same logic. 370 00:24:38,220 --> 00:24:39,840 ‫So here we have, already, 371 00:24:39,840 --> 00:24:43,020 ‫the update user that we created earlier, 372 00:24:43,020 --> 00:24:46,350 ‫and then here we use that update user 373 00:24:46,350 --> 00:24:48,720 ‫to pass in the password. 374 00:24:48,720 --> 00:24:51,690 ‫Now here, we are actually using, again, 375 00:24:51,690 --> 00:24:54,330 ‫that react hook form library 376 00:24:54,330 --> 00:24:57,180 ‫because that allows us to very easily 377 00:24:57,180 --> 00:25:01,323 ‫to this password verification that we did earlier. 378 00:25:02,490 --> 00:25:05,040 ‫So in this signup form right here. 379 00:25:05,040 --> 00:25:09,000 ‫So what I have here is actually pretty much the same, 380 00:25:09,000 --> 00:25:12,810 ‫so I just copied all this code from there. 381 00:25:12,810 --> 00:25:15,870 ‫There is just one thing that I'm seeing now 382 00:25:15,870 --> 00:25:18,990 ‫which is that we should actually also add 383 00:25:18,990 --> 00:25:22,743 ‫this on-click handler to the button in this signup form. 384 00:25:24,960 --> 00:25:26,013 ‫So, 385 00:25:28,140 --> 00:25:29,790 ‫yeah, this one right here 386 00:25:29,790 --> 00:25:34,140 ‫because even though this is a button with a type of reset, 387 00:25:34,140 --> 00:25:36,840 ‫this will actually only clear all the input fields, 388 00:25:36,840 --> 00:25:38,910 ‫but not the error messages. 389 00:25:38,910 --> 00:25:42,030 ‫But this builtin reset function, 390 00:25:42,030 --> 00:25:46,500 ‫so this function that is part of React hook form 391 00:25:46,500 --> 00:25:48,453 ‫will actually do that as well. 392 00:25:49,800 --> 00:25:52,890 ‫All right, so you can check out this code here 393 00:25:52,890 --> 00:25:54,063 ‫if you're interested, 394 00:25:55,020 --> 00:25:56,850 ‫but let's just go ahead 395 00:25:56,850 --> 00:25:59,853 ‫and also include this one on the page. 396 00:26:01,350 --> 00:26:05,460 ‫So update password form, 397 00:26:05,460 --> 00:26:08,760 ‫and so the function that we wrote earlier 398 00:26:08,760 --> 00:26:11,493 ‫should work now in the exact same way. 399 00:26:12,360 --> 00:26:16,680 ‫So here, I will now just write some new password, 400 00:26:16,680 --> 00:26:21,333 ‫so maybe let's make that a bit more explicit here. 401 00:26:22,170 --> 00:26:23,283 ‫So, 402 00:26:28,140 --> 00:26:29,613 ‫new password. 403 00:26:32,310 --> 00:26:37,310 ‫Then it goes to another line, so let's make it like this. 404 00:26:37,590 --> 00:26:40,623 ‫And so here, I'm now gonna use another password. 405 00:26:44,850 --> 00:26:45,753 ‫Let's see. 406 00:26:47,820 --> 00:26:50,910 ‫And indeed, that seems to have worked. 407 00:26:50,910 --> 00:26:53,580 ‫And so if I now log out here, 408 00:26:53,580 --> 00:26:55,983 ‫and remember that I'm using this email address, 409 00:26:59,610 --> 00:27:04,610 ‫so here is the new password with these eight characters, 410 00:27:07,080 --> 00:27:10,987 ‫and then here, let's try test at test.com, 411 00:27:15,030 --> 00:27:20,030 ‫and so apparently I got the wrong password there. 412 00:27:26,250 --> 00:27:29,640 ‫And if it doesn't work now, ah, but it did work. 413 00:27:29,640 --> 00:27:31,860 ‫So that was the new password 414 00:27:31,860 --> 00:27:36,723 ‫and so that means that this form here now also works. 415 00:27:37,560 --> 00:27:40,530 ‫Great, so after a long video, 416 00:27:40,530 --> 00:27:44,640 ‫we finally finished this very important part here as well, 417 00:27:44,640 --> 00:27:46,710 ‫and with this, we kind of finished 418 00:27:46,710 --> 00:27:50,850 ‫this entire authentication and authorization part. 419 00:27:50,850 --> 00:27:54,960 ‫And we didn't just implement the bare bones functionality, 420 00:27:54,960 --> 00:27:59,130 ‫but we went as far as even allowing some management 421 00:27:59,130 --> 00:28:01,560 ‫of the user account so our users 422 00:28:01,560 --> 00:28:04,770 ‫can even update their data here. 423 00:28:04,770 --> 00:28:07,170 ‫So congratulations once again 424 00:28:07,170 --> 00:28:09,990 ‫for finishing this very important part 425 00:28:09,990 --> 00:28:12,810 ‫that you will need in all web applications 426 00:28:12,810 --> 00:28:15,150 ‫that you're gonna build in the future. 427 00:28:15,150 --> 00:28:16,530 ‫And with that being said, 428 00:28:16,530 --> 00:28:19,530 ‫let's now move on to finally implementing 429 00:28:19,530 --> 00:28:23,193 ‫another nice feature which is a dark mode.