00:02
Okay, so we have our login and register pages created,
00:07
but we don't have a form on it
00:08
to actually be able to send out data to login or register.
00:11
So let's do that next.
00:12
For right now, let's just focus on our register page,
00:15
and then we'll circle back and cover in our login page
00:17
up till we have all the basics settled.
00:19
So on our register page,
00:21
underneath this little header section that we have here,
00:22
let's go ahead and add in a form element
00:24
with a class of grid and a gap of three on it.
00:28
First, what we're gonna wanna do
00:29
is install a couple of shotcn components.
00:31
So we'll hold Command + Shift + P,
00:32
type in shotcn/view,
00:35
and you'll see that we have that add new component
00:37
that we use to install our button.
00:38
We also have add multiple components.
00:40
So let's go ahead and add in multiple components
00:42
because we're going to want an input field.
00:44
So we can go ahead and toggle that one on,
00:47
as well as a label field installed.
00:49
So with those two selected,
00:50
let's go ahead and hit OK to install both of those.
00:53
And there we go, it's now done.
00:55
So we can hide our terminal away there, close it out.
00:58
And if we look inside of our components UI directory,
01:00
we should now have an input and label folder,
01:03
housing each of those components that we installed.
01:05
And since they're inside of our components directory,
01:07
they will automatically resolve
01:09
as we use them inside of our template.
01:10
Meaning inside of our form,
01:11
we can go ahead and add in a label.
01:13
And inside of this label,
01:14
we'll do a span with the text full name
01:16
for our full name field.
01:17
And then we'll go ahead and put the input
01:19
directly inside of this label.
01:20
Whenever you have the input as a child of a label,
01:23
they will automatically bind to one another
01:25
so that you don't have to worry
01:26
about adding an ID to your input
01:27
and the for attribute on your label.
01:29
That'll just happen automatically.
01:30
We'll have a type of text,
01:32
or you can omit that altogether, that'll be the default.
01:34
And then we're also going to need data
01:36
for this input to house using view model.
01:39
So let's go ahead and jump up to our script now
01:41
and let's add in our form.
01:42
So we'll do const form equals, and we'll use a ref.
01:45
We'll import that here momentarily
01:47
with an object inside of it.
01:48
Let's go ahead and import that ref from view.
01:51
And inside of our form,
01:52
we're gonna want a full name field.
01:54
We'll just default all of these to an empty string,
01:56
an email, as well as a password.
01:59
One key for each of the three fields that we're gonna need.
02:01
Let's scroll back down to our input now
02:03
and make use of our form.fullname
02:06
specifically for our full name input.
02:08
And that input out.
02:09
And so that we have a slight gap
02:10
in between our span and our input,
02:12
let's go ahead and add a class to our label
02:13
of grid with a gap of one.
02:15
Cool.
02:16
We can copy this label as well as input inside
02:19
and paste it in twice.
02:20
Once here for our email,
02:22
so we'll switch the label accordingly.
02:23
The type here is gonna be email
02:25
and we need to switch the view model
02:26
from using form.fullname to using form.email.
02:29
Then lastly, we also need to do the exact same
02:31
for our password.
02:33
So we'll add our password in there,
02:34
type of password,
02:35
and then switch the view model
02:37
from using full name again to password.
02:38
All right, then let's use our button component
02:40
that we have installed already.
02:41
Specify it's type to submit
02:43
and add the text register to it.
02:45
Cool.
02:46
So we have our form and all of our inputs done.
02:48
Jump back into our browser
02:49
to make sure everything looks okay.
02:50
And sure enough,
02:51
we have our register heading section
02:52
that we've added previously,
02:53
as well as our three new form fields
02:55
and our register button.
02:56
So everything looks correct there.
02:57
We can hide that back away
02:58
and let's add in our submission handler.
03:01
In previous lessons,
03:01
we learned about Inertia's router
03:03
and that we can actually post data with that router.
03:05
So we're gonna make use of that here.
03:06
Let's go and scroll up to the top of our file,
03:08
import router from @inertiajsview3.
03:12
And if you want,
03:13
you can put this inside of a method
03:14
or you can make use of it directly
03:15
on the form @submit handler.
03:17
So we'll do @submit there to add the event handler
03:20
and we'll also prevent it,
03:21
prevent forms native browser behavior there.
03:24
It'll make use of our router
03:25
and we'll post with this router
03:26
to the URL/register
03:28
and include the data of our form.
03:31
With that in place now,
03:32
we should be able to jump back into our browser.
03:34
Let's give that a refresh so that it syncs back up.
03:36
We'll put up our inspect panel,
03:37
specifically the console.
03:38
I'm gonna expand this out a little bit
03:39
just to give us a little bit more working room
03:41
and let's type in some fields.
03:42
So we have Tom Gobich,
03:44
[email protected]
03:46
and then some password there.
03:48
We can hit register
03:49
and we see our post requests go out.
03:50
Now, currently our /register post route
03:53
is just redirecting us right back to this page.
03:54
So it looks like nothing happened visually on the page
03:57
except for this gigantic safe password pop-up,
03:59
but we did actually send out a post request.
04:01
And if we take a look at that request and its data,
04:03
we actually sent up those email,
04:04
full name and password fields.
04:06
Cool, so on our client side,
04:07
everything's working okay.
04:09
Right now, we just need to actually be able to handle that
04:11
and do something with it on our server side,
04:12
which is what we're gonna do next.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!