WEBVTT 00:00.530 --> 00:07.760 So if we jump to the login page on our application, we see the login form and we don't really have 00:07.760 --> 00:08.960 a link to register. 00:08.960 --> 00:12.620 So if you don't have an account, there is no way you can sign in. 00:12.620 --> 00:20.630 And I think that we should begin by adding a link to the registration page here on the login page. 00:20.660 --> 00:23.420 It can be maybe below the cart. 00:23.840 --> 00:29.930 So we're just going to look up some of the bootstrap classes that might help us achieving this. 00:29.930 --> 00:32.420 So that's not anything complicated. 00:32.450 --> 00:34.040 A simple link. 00:34.610 --> 00:41.930 So we are jumping to the create form on the auth folder and let's scroll to the top. 00:41.930 --> 00:46.190 So I said I'd like to put this link below the cart. 00:46.310 --> 00:49.730 So we've got a lot of those nested elements. 00:49.730 --> 00:54.260 So to find the right closing element I'm going to select this one. 00:54.410 --> 01:00.320 It should highlight the div element but also the closing element as well. 01:00.470 --> 01:07.380 So now I can scroll to the bottom and I see this highlighted element, which means it ends here. 01:07.380 --> 01:08.760 The card ends here. 01:08.760 --> 01:23.880 So below I can type anything else I can say don't have an account register and this register would be 01:23.880 --> 01:24.900 a link. 01:27.000 --> 01:31.170 That points to the register path. 01:31.830 --> 01:33.570 Let me paste it back. 01:36.780 --> 01:38.580 So now let's see how it looks like. 01:38.610 --> 01:40.680 Initially we have to refresh. 01:40.680 --> 01:43.440 So it's very close to the card. 01:43.470 --> 01:47.580 So probably we could do with some margin at the top. 01:48.720 --> 01:54.510 So in the bootstrap docs we can jump to utilities. 01:55.800 --> 01:57.240 Let me find that. 01:57.240 --> 01:59.940 And that's not position. 01:59.970 --> 02:02.040 That should be spacing. 02:02.040 --> 02:07.170 And here it's explained how do we use margin and padding. 02:07.860 --> 02:14.220 And it's just a composite name starts with M for margin, P for padding. 02:14.340 --> 02:17.100 Then you can optionally add the direction. 02:17.100 --> 02:20.970 So margin top margin bottom and the size. 02:21.270 --> 02:27.570 So for example mt3 would be margin of size three. 02:27.780 --> 02:34.770 I think we also have examples inside this very document of margin bottom size three. 02:35.280 --> 02:38.070 So here let me add a top margin. 02:38.520 --> 02:41.550 So this would be empty for maybe. 02:42.960 --> 02:45.450 And now let's see how does it look like. 02:45.450 --> 02:47.280 So we have some separation. 02:47.280 --> 02:53.160 And next up if I want to center the text I'm looking up the text utilities. 02:55.260 --> 02:55.590 Okay. 02:55.620 --> 02:58.470 So this one is centered. 02:58.680 --> 03:02.400 And the class name would just be text center. 03:02.670 --> 03:03.990 Let's try this. 03:04.800 --> 03:12.490 So this should center the text inside this div element and indeed this works. 03:12.520 --> 03:14.110 Now I have a working link. 03:14.110 --> 03:18.790 I can jump to the registration form if I don't have an account yet. 03:18.820 --> 03:22.030 Next up, let's work on this form. 03:23.860 --> 03:30.130 Now let's also allow the people to jump from this registration form back to sign in. 03:30.220 --> 03:35.890 If for whatever reason, they just land here and they already have an account. 03:36.100 --> 03:37.120 So same way. 03:37.120 --> 03:39.250 Let me find the closing tag. 03:39.250 --> 03:40.090 It's here. 03:40.420 --> 03:46.330 Now I'm just going to paste this link and just change the text. 03:46.450 --> 03:48.850 Already have an account. 03:48.850 --> 03:52.540 In that case just go to the login page. 03:55.660 --> 03:56.950 Like this. 03:56.980 --> 04:01.420 Let me refresh that and I think it works fine. 04:01.720 --> 04:04.630 Now let's focus on this registration form. 04:04.630 --> 04:10.120 I'm gonna close this one and we need to focus out on this one. 04:10.150 --> 04:14.650 So first let me remove things we don't need. 04:15.130 --> 04:20.050 That's for example the Remember Me checkbox should be gone. 04:20.590 --> 04:26.740 The button here should be renamed to register or create an account, whatever we prefer. 04:28.690 --> 04:31.300 So we still need the CSRF token. 04:31.300 --> 04:35.410 We should submit to this register path. 04:36.190 --> 04:43.900 We should still display any potential errors that might happen, and for now we're just going to return 04:43.900 --> 04:45.580 one error I think. 04:45.940 --> 04:48.970 And we've got the email. 04:48.970 --> 04:50.830 Um, we've got the password. 04:50.830 --> 04:53.350 We should add another field. 04:53.350 --> 04:57.730 So as I've said we would like the password to be confirmed. 04:57.760 --> 05:01.870 So the type of this input is also a password. 05:01.870 --> 05:06.910 But the name of the input should be repeat password. 05:06.910 --> 05:07.720 Maybe. 05:08.830 --> 05:12.370 So let's change the ID and name to repeat password. 05:12.370 --> 05:18.290 And also let the label point to repeat password field. 05:18.290 --> 05:22.310 Let's also type the label to be clear what needs to happen here. 05:23.900 --> 05:26.450 And right below the email. 05:26.450 --> 05:28.610 I think we should go with the name. 05:30.500 --> 05:34.190 So the input type should be just text. 05:35.000 --> 05:38.330 The ID of it should be name. 05:38.450 --> 05:44.510 Name also should be name, and four attributes should point to the right input. 05:45.350 --> 05:47.870 Let me just change the label to name. 05:47.870 --> 05:55.400 Or maybe to be clear about our intentions, let's ask for your full name. 05:56.450 --> 06:00.290 Okay, now let's see the registration form. 06:00.470 --> 06:01.610 It looks like this. 06:01.640 --> 06:08.810 We've got the email, the full name, the password and repeat password field. 06:09.590 --> 06:09.950 Okay. 06:09.950 --> 06:13.100 So let's summarize what we did in this video. 06:13.100 --> 06:20.510 So we've created this link that lets us easily jump from and to the registration form. 06:21.290 --> 06:24.530 So we've also reused a lot of code from the login form. 06:24.530 --> 06:31.880 I think code reuse is always good and it just made us build this form much quicker. 06:32.090 --> 06:38.660 And another thing that we've seen is how we should look up something in the bootstrap docs. 06:38.660 --> 06:46.070 If you need some specific thing in the user interface, we might just search for a class name or the 06:46.070 --> 06:50.660 thing that we want to achieve, and that's the way to go. 06:50.690 --> 06:54.260 Now it's similar with frameworks like tailwind. 06:54.260 --> 07:02.450 And once you learn the most commonly used class names, I think you're gonna be insanely productive. 07:02.450 --> 07:06.770 That's why I think it's just worth the time investment. 07:07.670 --> 07:10.640 Okay, so that was the summary of that video. 07:10.670 --> 07:17.180 Next up we will implement the controller that would let us actually create an account.