So if we jump to the login page on our application, we see the login form and we don't really have
a link to register.
So if you don't have an account, there is no way you can sign in.
And I think that we should begin by adding a link to the registration page here on the login page.
It can be maybe below the cart.
So we're just going to look up some of the bootstrap classes that might help us achieving this.
So that's not anything complicated.
A simple link.
So we are jumping to the create form on the auth folder and let's scroll to the top.
So I said I'd like to put this link below the cart.
So we've got a lot of those nested elements.
So to find the right closing element I'm going to select this one.
It should highlight the div element but also the closing element as well.
So now I can scroll to the bottom and I see this highlighted element, which means it ends here.
The card ends here.
So below I can type anything else I can say don't have an account register and this register would be
a link.
That points to the register path.
Let me paste it back.
So now let's see how it looks like.
Initially we have to refresh.
So it's very close to the card.
So probably we could do with some margin at the top.
So in the bootstrap docs we can jump to utilities.
Let me find that.
And that's not position.
That should be spacing.
And here it's explained how do we use margin and padding.
And it's just a composite name starts with M for margin, P for padding.
Then you can optionally add the direction.
So margin top margin bottom and the size.
So for example mt3 would be margin of size three.
I think we also have examples inside this very document of margin bottom size three.
So here let me add a top margin.
So this would be empty for maybe.
And now let's see how does it look like.
So we have some separation.
And next up if I want to center the text I'm looking up the text utilities.
Okay.
So this one is centered.
And the class name would just be text center.
Let's try this.
So this should center the text inside this div element and indeed this works.
Now I have a working link.
I can jump to the registration form if I don't have an account yet.
Next up, let's work on this form.
Now let's also allow the people to jump from this registration form back to sign in.
If for whatever reason, they just land here and they already have an account.
So same way.
Let me find the closing tag.
It's here.
Now I'm just going to paste this link and just change the text.
Already have an account.
In that case just go to the login page.
Like this.
Let me refresh that and I think it works fine.
Now let's focus on this registration form.
I'm gonna close this one and we need to focus out on this one.
So first let me remove things we don't need.
That's for example the Remember Me checkbox should be gone.
The button here should be renamed to register or create an account, whatever we prefer.
So we still need the CSRF token.
We should submit to this register path.
We should still display any potential errors that might happen, and for now we're just going to return
one error I think.
And we've got the email.
Um, we've got the password.
We should add another field.
So as I've said we would like the password to be confirmed.
So the type of this input is also a password.
But the name of the input should be repeat password.
Maybe.
So let's change the ID and name to repeat password.
And also let the label point to repeat password field.
Let's also type the label to be clear what needs to happen here.
And right below the email.
I think we should go with the name.
So the input type should be just text.
The ID of it should be name.
Name also should be name, and four attributes should point to the right input.
Let me just change the label to name.
Or maybe to be clear about our intentions, let's ask for your full name.
Okay, now let's see the registration form.
It looks like this.
We've got the email, the full name, the password and repeat password field.
Okay.
So let's summarize what we did in this video.
So we've created this link that lets us easily jump from and to the registration form.
So we've also reused a lot of code from the login form.
I think code reuse is always good and it just made us build this form much quicker.
And another thing that we've seen is how we should look up something in the bootstrap docs.
If you need some specific thing in the user interface, we might just search for a class name or the
thing that we want to achieve, and that's the way to go.
Now it's similar with frameworks like tailwind.
And once you learn the most commonly used class names, I think you're gonna be insanely productive.
That's why I think it's just worth the time investment.
Okay, so that was the summary of that video.
Next up we will implement the controller that would let us actually create an account.