-: In the last section
we started putting together our sign in form.
And as you might guess
the purpose of the sign in form is just to
handle collecting a user's email
and password and then presumably submitting it off
to an action creator that's going to verify the email
and password is correct in some fashion.
We're still not done with the sign in form yet though,
we can't see it on the screen
and we've also not yet hooked it up
to redux form a hundred percent.
We did hook up the redux form helper, which gives us access
to the properties like this, dot props, dot fields
dot email, and password, but we haven't actually wired those
up to the input fields just yet.
That's a really easy thing to get through.
So let's do that now.
Inside of the render method, we're gonna pull off
a couple different properties from the props object.
First is handle submit.
Remember, this is one
of the helpers that comes in from Redux form
and we'll also pull off the fields email and password.
And these are all properties they're coming
from this dot props.
Again, remember, handle submit comes from Redux form
as does email and password.
These two field names right here are exactly email
and password because those are the field names
that we declared down at the configuration at the bottom.
We can now hook up email and password to our two inputs.
So the first input right here is gonna take the email helper
and the second input is gonna take the password helper.
Finally, our form needs to listen to the on submit event.
So whenever a user say hits the enter key
or they click on the submit button to actually sign in
we wanna make sure that the form gets submitted
and we handle that case appropriately.
So to listen to the submit event
on the form will add on submit.
In this case we'll run the handle, submit helper
from redux form, and we pass to that our callback
or the function that we want to be called
with the finalized form properties.
So we'll create a new helper
and we'll probably call it this.handle form submit.
And because we're handling handing a callback function off
we need to bind this.
Now we still need to declare this helper right here
this.handle form submit.
Let's do that really quick as handle form submit.
This form helper will be called
with the finalized email and password from the form.
And for now we'll just console log out
email and password just to test things out for now.
And then we'll figure out, you know
basically need to do something to log user in
and that's something that we'll do, we'll come back to
and revisit at some point in the future.
So our form is now looking like, you know, pretty good
pretty good shape.
It definitely should show a form on the screen.
We should definitely be able to enter the email
and password, submit it
and see a console log pop back up to us.
And in here we haven't, you know
mostly reviewed so far, so not too bad.
Really happy with where we're at so far.
Still one pretty big deficiency though,
we can't see this form on the screen at all.
So we still need to hook it up
to our redux router and give it a very clear route
that the user can go to to see this sign in form.
So to add it to redux router
we're gonna go back to our top level index.js,
where we've already declared our app route.
And inside of here we're just gonna add another route
to show that sign in form.
So I'll import sign in from components auth sign in
and then whenever a user visits the route slash sign in
we wanna show that sign in component.
So whenever they go to route sign in
show the component sign in.
Now this should be in a pretty testable state.
I'm gonna flip back over to Chrome
I'll refresh and by hand I'll navigate to sign in.
And you'll notice that we still don't get anything
on the screen, but we also don't have any errors.
So there is one step that we still not done
and it's something that I guarantee you you'll
make this oversight all the gosh darn time.
Whenever we nest a route like this,
the parent route is provided the nested route
as props.children.
So our app component right now is not
showing any child components that need to get rendered.
So to get everything working, we need to go back
into app js and we are going to replace react simple starter
with this.props.children, flip back over
to the browser, re render, and boom, there's our form.
We should now be able to enter
in something like test 123 at example.com and some password.
Hit the submit button
and see the properties right here in our console log.
Perfect. So this is a pretty good spot, right for right now.
So at this point everything we've done has been
pretty straightforward, like, you know
react redux form kind of stuff, you know, still in that kind
of safe realm so far, we haven't really touched a lot
of very authentication, heavy logic just yet.
So in the next section we're gonna start focusing
in on exactly how does authentication flow
within our application.
For example, when we want to do something to
sign our user in, what exactly is the method
that we're gonna use to sign a user in?
You know, what's that actually gonna look like?
So let's talk about that, you know,
the big challenge in this application
starting the next section. I'll see you there