WEBVTT 00:00.020 --> 00:00.230 Okay. 00:00.260 --> 00:06.530 Our next task is to take a look at the register to allow users to register a new account with our application. 00:06.530 --> 00:12.200 So let's head back to VS code, and we'll start off in the schemas folder inside lib. 00:12.200 --> 00:17.750 And we'll just create a new file and call it Register schema dot ts. 00:17.750 --> 00:21.200 So we can take advantage of Zod validation. 00:21.200 --> 00:33.320 And I'll export const register schema and set it equal to Z which we get from Zod dot objects, open 00:33.320 --> 00:34.760 parentheses curly brackets. 00:34.760 --> 00:37.850 And we're effectively going to have the same properties inside here. 00:37.850 --> 00:42.680 We don't need to take any additional information from the user, so we might as well keep it simple. 00:42.680 --> 00:48.380 And we'll have the email which is going to be a type of string and email. 00:48.530 --> 00:53.330 And then we'll specify the password and we'll use that dot string. 00:54.140 --> 00:58.490 And we can also use a regular expression inside here. 00:58.490 --> 01:02.820 So if we do want to match what we're doing on the API. 01:02.820 --> 01:06.690 On the client side we can do, and inside our register we will do that. 01:06.690 --> 01:11.400 We don't need to check it on the login, because if they get the password wrong then it's just a wrong 01:11.400 --> 01:11.940 password. 01:11.940 --> 01:15.060 It doesn't matter if it's a complex password or a weak password. 01:15.120 --> 01:19.350 We don't need to check for that, but we can check for that on the register component. 01:19.350 --> 01:22.140 So let's use a regular expression for this. 01:22.230 --> 01:25.380 So what do we put inside here then for a complex password. 01:25.380 --> 01:27.600 Well I don't know. 01:27.630 --> 01:32.040 I'm not an expert on regular expressions, but I know a place where I can find regular expressions to 01:32.070 --> 01:33.330 help me out with this. 01:33.330 --> 01:41.130 And I'm just going to look for regexp and or it's regex lib, I think is the one that I typically use 01:41.130 --> 01:42.030 for this kind of thing. 01:42.030 --> 01:45.960 So regular expression library regex lib I'll click on this. 01:45.960 --> 01:50.310 And then inside here we can search for regular expressions for certain tasks. 01:50.310 --> 01:55.440 So I want one that's going to match a complex password. 01:55.440 --> 01:57.240 So I'm just going to search inside here. 01:57.240 --> 02:03.340 And one of these is suitable for what we need lots of different options for different types of complex 02:03.340 --> 02:04.360 passwords. 02:04.360 --> 02:12.070 The one that I'm looking for specifically is created for equivalent to what Microsoft uses as their 02:12.070 --> 02:13.660 complex passwords. 02:13.660 --> 02:19.990 So it's in here somewhere and I'll keep going down. 02:20.890 --> 02:22.450 And this one at the bottom. 02:22.450 --> 02:28.540 In my case this regular expression match can be used for validating a strong password, etc.. 02:28.540 --> 02:35.020 And this expression follows the above four norms specified by Microsoft for a strong password. 02:35.170 --> 02:40.150 So one small case letter, one capital letter, one digit, one special character, and the length should 02:40.390 --> 02:43.240 be between 6 and 10 characters. 02:43.240 --> 02:47.860 So we can just use this regular expression as it is. 02:47.890 --> 02:51.700 And this will validate a complex password for us. 02:51.700 --> 02:53.650 So I'll copy this into my clipboard. 02:53.650 --> 03:04.340 I'll head back to VS code and just above our export here I'll say const password validation equals and 03:04.340 --> 03:07.130 we can use a new reg exp. 03:07.700 --> 03:09.050 Open parentheses. 03:09.050 --> 03:11.240 And I'll just paste this in on the second line. 03:11.240 --> 03:16.460 But we need to put this inside of two forward slashes. 03:16.460 --> 03:19.340 And then we put our regular expression inside here. 03:19.400 --> 03:21.740 And that should be fine. 03:21.860 --> 03:28.520 So we've got our opening forward slash followed by the regular expression inside here you can see some 03:29.120 --> 03:30.410 logic inside here. 03:30.410 --> 03:32.570 This checks to make sure there's at least one digit. 03:32.600 --> 03:35.120 This makes sure there's at least one lowercase. 03:35.120 --> 03:37.190 Let's make sure there's at least one uppercase. 03:37.190 --> 03:41.990 And this makes sure that one of them is a special character. 03:42.800 --> 03:49.710 And somewhere in this regular expression at the beginning, we check to make sure it's between 6 and 03:49.710 --> 03:50.930 10 characters. 03:50.930 --> 03:56.090 So it's not a regular expression course, thankfully, and this will do the job that we need it to do. 03:56.090 --> 03:59.900 So inside our reg x as a parameter. 03:59.900 --> 04:05.570 We can pass in the password validation at a comma, open curly brackets, and then we can give this 04:05.570 --> 04:06.200 a message. 04:06.200 --> 04:12.380 And we'll just define because we're not able to check just on a single a regular expression what specific 04:12.380 --> 04:13.820 mistake they've made here. 04:13.970 --> 04:16.340 But we'll just describe what the password should be. 04:16.340 --> 04:37.160 So I'll say password must contain one alpha, one number one special and b 6 to 10 characters. 04:37.730 --> 04:48.050 And I should specify lowercase alpha and one upper case. 04:50.510 --> 04:52.010 Character. 04:52.640 --> 04:57.320 And I'll change alpha to character to be a bit more accurate about what this is actually doing. 04:57.320 --> 05:05.380 So that will suffice for our message there and describe what it is they need to input for this. 05:05.380 --> 05:08.290 And then we can go and create our register component. 05:08.320 --> 05:09.670 So back to the File Explorer. 05:09.670 --> 05:14.410 Inside our account feature we will create a new file. 05:14.410 --> 05:18.490 And this will be for a register form TSX. 05:18.490 --> 05:22.270 And we'll just add the boilerplate inside here. 05:22.270 --> 05:27.280 And I'll just go back to the register schema actually because we also need to export the type that we're 05:27.280 --> 05:29.140 going to be using for this. 05:31.210 --> 05:37.570 So I'll say export type and call it register schema equals. 05:37.570 --> 05:42.520 And we'll use infer so that Zod can infer the type that we're using here. 05:42.520 --> 05:47.470 And we'll use type of and register schema. 05:48.280 --> 05:48.970 Great. 05:48.970 --> 05:51.370 And let's go back to our register form. 05:51.370 --> 05:56.980 And at the top here we'll use the export we made earlier in our account API. 05:57.010 --> 06:05.470 So I'll have the function inside square brackets to register user, and I'll set this equal to the use 06:05.470 --> 06:11.650 register mutation and just reformat things inside here. 06:11.650 --> 06:14.530 And we'll use the use form again. 06:14.920 --> 06:22.120 So I'll use the use form hook and we'll give it a type of register schema. 06:23.140 --> 06:28.180 And inside here we'll specify the mode is untouched. 06:29.560 --> 06:38.470 And the resolver will use these odd resolver and pass in the register schema. 06:39.130 --> 06:44.710 And then inside the curly brackets where we're using the use form we'll bring in the register. 06:44.740 --> 06:50.440 The handle submits the form states and we'll use the errors. 06:50.440 --> 06:52.960 And we'll also just bring in the is valid. 06:52.960 --> 06:59.330 So we can make sure the form is valid before we enable the button to allow them to submit the form and 06:59.330 --> 07:01.910 below this will just add an Onsubmit method. 07:01.910 --> 07:11.780 So we'll say const Onsubmit equals async and data and use the register schema as it's type open curly 07:11.780 --> 07:18.080 brackets and we will say await register user and pass in the data. 07:18.620 --> 07:24.650 And the login form is going to be pretty much the same as the register form with just a few small changes. 07:24.650 --> 07:33.140 So I'm going to go to the login form, and I'm going to copy this container in its entirety and paste 07:33.140 --> 07:37.670 that into the register form to save us a bit of time. 07:37.670 --> 07:42.320 We're not doing anything different with the register in terms of what we're taking from the user, so 07:42.320 --> 07:48.440 I'll just copy that in its entirety and I'll add all the missing imports and see how we're getting on 07:48.440 --> 07:49.640 after that. 07:50.840 --> 07:53.510 So let's see what changes we need to make inside here. 07:53.510 --> 07:54.890 The container can stay the same. 07:54.890 --> 07:59.550 We just need to change the sign in to register. 08:00.810 --> 08:03.300 The component is a form. 08:03.300 --> 08:07.110 We're using the same handle submit function, so let's move down. 08:07.170 --> 08:12.390 This can also stay the same because we're going to take in the same information the email address and 08:12.390 --> 08:14.040 the password for the user. 08:14.880 --> 08:17.070 And we can use in the button. 08:17.070 --> 08:20.190 And let's get the is loading in as well. 08:20.190 --> 08:24.180 We'll use the version from the form this time just to demonstrate that it's pretty much the same thing 08:24.180 --> 08:25.140 that we get. 08:25.140 --> 08:32.460 And I'll use both the is valid and the is loading to disable the button if either of those conditions 08:32.460 --> 08:39.840 is true, so either is loading or not is valid, and the button will be disabled. 08:39.870 --> 08:43.320 And we'll change the text inside here to register. 08:44.430 --> 08:50.310 And instead of don't have an account this can be already have an account. 08:50.310 --> 08:53.760 And we'll send them to the login. 08:54.720 --> 09:01.720 And Will use sign in here as the text for that link. 09:01.720 --> 09:04.030 And we just need to go back to our roots. 09:04.030 --> 09:06.400 And it's getting quite busy at the top here. 09:06.400 --> 09:12.100 Let's close the others down and I'll open up the routes. 09:12.640 --> 09:18.070 And I'll just copy the login form down and change this to register. 09:20.320 --> 09:22.930 And specify register form. 09:25.180 --> 09:27.040 As the components. 09:27.040 --> 09:29.440 So let's just take a look at how we're doing so far. 09:29.440 --> 09:35.980 And if we go back to our form or go back to our application and click on register, then what we should 09:35.980 --> 09:39.640 have is the button disabled at the moment. 09:39.640 --> 09:46.660 And if I start typing test at test and click out, then I get an invalid email until I make it valid. 09:46.660 --> 09:55.300 I've got the password message there as well, and this shouldn't go away until I have a complex password 09:55.300 --> 10:01.660 in place, and if I remove a couple of characters or make it not complex, then I'm going to fail the 10:01.660 --> 10:02.620 validation. 10:02.620 --> 10:03.370 So great. 10:03.370 --> 10:05.020 That's what we're looking for so far. 10:05.020 --> 10:09.850 But we need to think about what are we getting back from this, and how do we want to inform the user 10:09.850 --> 10:10.810 about what's happened? 10:10.810 --> 10:17.440 Was it successful because this registering alone is not going to log them in. 10:17.440 --> 10:25.450 And even though technically what I do here should work, it's not great from a user experience point 10:25.450 --> 10:25.750 of view. 10:25.750 --> 10:30.940 If they don't know if this was successful until they actually do go to the sign in and then they try 10:30.940 --> 10:31.510 and log in. 10:31.510 --> 10:34.210 So let's give the user some notification as well. 10:34.390 --> 10:39.880 And we'll also redirect them to the login component so that after they have registered they get notified 10:39.880 --> 10:41.860 the registration was successful. 10:41.920 --> 10:46.930 And then they're taken to the place where they can actually log in with that new account as well. 10:46.930 --> 10:51.790 So let's head back to our accounts API to finish this bit off. 10:51.790 --> 10:57.020 And inside our register we're also going to use the on query inquiry started function so that we can 10:57.020 --> 11:00.740 do something after that query is fulfilled. 11:00.740 --> 11:09.230 So below the query we'll use async and on query started once again open parentheses. 11:09.230 --> 11:10.400 We don't need any arguments. 11:10.400 --> 11:12.080 So just an underscore for that. 11:12.080 --> 11:16.160 And we only need the query fulfilled in this case. 11:17.420 --> 11:20.660 And we'll add a try catch block inside here. 11:20.660 --> 11:24.830 And if we get an error we'll just console.log the error. 11:24.830 --> 11:29.540 And in the try block we'll use await and query fulfilled. 11:29.900 --> 11:31.970 Following this we'll make use of our toaster. 11:31.970 --> 11:35.150 So we'll bring in the toast and say toast success. 11:35.300 --> 11:40.370 And we'll say registration successful. 11:41.390 --> 11:46.160 You can now sign in exclamation mark. 11:46.430 --> 11:51.020 And below this will make use of our router which we get from. 11:51.110 --> 11:53.180 Or we've already got to inside this component. 11:53.180 --> 11:54.860 And we'll use router navigates. 11:54.860 --> 12:00.300 navigate and we will send them to forward slash log in and that should be good enough. 12:00.300 --> 12:07.350 So if we go back to our browser, let's just refresh the page and I'll add a new email. 12:07.350 --> 12:17.310 I'll say jane@test.com and capital P a dollar dollar w o r d is a complex password, the one that I 12:17.310 --> 12:18.930 use for the other accounts. 12:18.960 --> 12:20.130 I'll click register. 12:20.130 --> 12:23.910 We see loading and then we get registration successful. 12:23.910 --> 12:26.880 You can now sign in and I'm on my login page. 12:26.880 --> 12:32.160 And I should be able to log in with jane@test.com with the password. 12:32.730 --> 12:38.220 And everything should work as expected, which it does. 12:38.220 --> 12:39.450 Marvelous. 12:39.450 --> 12:44.040 But what we also need to consider, because we looked at the happy path there with registration, we 12:44.040 --> 12:48.480 didn't account for the fact that the user could try and use an email address that's already taken, 12:48.480 --> 12:53.730 and we want to take a look at how we handle those kind of errors from our API, and we'll take a look 12:53.760 --> 12:55.170 at that next.