Instructor: We've now got our header component
put together and it's always displayed inside
of our app component.
Right now we have this kind of placeholder
for the text sign in inside of our header
but we don't only have any route to handle it.
We don't have any component to handle the form.
So let's continue with some of this kind
of early scaffolding our application out by just placing
or creating a scaffold for our sign in form
and make sure that we have the ability to navigate
between it and our root route.
So the first thing we'll do is create our
authentication form itself.
Now this is where we start to get into kind of organization
of components inside of our project directory
and all the content up to this point, we've always
had a rather flat application structure where all
of our different components just lived
inside this component's folder.
Starting now we're gonna start
to do a little bit more organization
of our code, and so any components having to do strictly
with authentication, I'm gonna place
in a new folder inside of components called simply auth.
So I'm gonna make a new folder called auth, short
for authentication of course, and then inside of here
because it is a component related to authentication
I'll place my sign in dot J S.
So now I've got components auth sign in.
Very good.
So this sign in component right here
is intended to be the actual sign in form,
so it should present to the user.
Let's look at our mock up,
should present to the user an email
and a password field, and also the submit button.
So this is nothing too crazy yet.
We've definitely done plenty
of forms with Redux form before.
So let's start to again, put it together
some of the scaffolding, put in our inputs
and labels for the email and password
and probably hook up the button right here
for handling the submit event as well.
Now that we're starting to deal with forms
this is definitely where we're going to make use
of Redux form the library as well.
We haven't installed Redux form as a dependency just yet.
That means it'd probably be a great time to start right now.
So over in my terminal, I'm going to stop my server
from running by hitting control C and then
I'll NPM install Redux form and I'll make sure to save it
as a dependency as well.
Remember the dash dash save is really important because
if you don't include the dash dash save, it won't be saved
to your package dot json directory.
That means that any other engineers in the future
who are trying to check out your work, whenever they do
that NPM install, they won't install Redux form.
So I've got my dependency installed, I'll kick my server
back up with NPM start.
Very good.
So back in the signing component again, we're gonna do some
of that probably very familiar boiler plate.
We'll import react at the top, pull
off our component and we'll make our sign in
that extends component.
We'll place our render method in here.
And before putting anything inside the render method
remember how Redux form works with Redux form,
when we export our component, we wrap it
with the Redux form helper, and inside that helper is where
we place our field definitions.
And so whenever I know that I'm making a form component
or something that's supposed to have some fields to it
I find that it's generally pretty helpful to first
put together the helper at the bottom
and declare the fields that I need just so I know
that the property names are very consistent
inside the component as well.
So without putting anything in the render just yet
I'm going to export default redux form
and remember the signature of this, the first argument
or the first set of perens is for configuration
and then the second set of perens is
for our actual component, which is sign in.
Cool, let's do the options for the form itself.
We pass an option, or excuse me, an object that has
two required properties to it.
The first required property is the form, and this just
needs to be the actual name of the form where
Redux form is gonna place these property names
inside our application state.
So a very reasonable name for the form.
It'll be just sign in.
And then we need to declare the fields on here as well.
So these are the exact property names that we
want these fields to produce.
Now this is where it starts to get really critical
that we keep our terminology
for email versus username consistent.
You might think to yourself, oh yeah
I always sign in using a username, right?
So we might want to call these fields something
like username and password
but that's not really how we set up the server.
Our server is currently set
up to accept specifically an email field
and so it's very important
that we keep all these property names consistent
across our code base.
Otherwise I guarantee we're just gonna
start confusing ourselves.
So the two fields that we care about
for our sign-in component are going to be the email
and the password.
Those are the only two fields that we are
going to worry about inside of this component.
Now that we've got our redux form helper put together
and keep in mind that we have not done two very
important things just yet, we need to first import redux
form at the top, and we also have not yet hooked
up redux form as a reducer.
Remember, that's how Redux form works.
It provides its own reducer inside of our application
and so we need to make sure that we hook that up as well.
Let's do the simpler of the two first.
We'll hook up or excuse me, we'll import redux form
inside this component.
So at the top I'll import redux form from redux form.
So now we've got that property available inside this file.
Next we'll do the little bit more esoteric one, I suppose
or the more confusing one.
We need to hook up the redux form reducer as well.
So inside of my reducer's index file, I'll import
my reducer from redux form and then I'm going
to replace this dummy reducer that's already in here
with the form reducer.
So the form property
of state is going to be produced by my redux form reducer.
Now having a reducer floating
around my index JS reducers file
having a reducer named reducer is
like pretty darn confusing.
So a little bit of ES six trick here is I can actually
rename my imports when I bring them into this file.
To do so, I can say reducer
as form and that will re-declare this variable,
this reducer variable right here
as the variable form instead,
that means that instead
of putting reducer down here, I can place form.
And now we're in a fantastic spot where our key
and our value are the exact same property names
or the exact same variable names, excuse me
which means we can use another bit
of ES six magic where we just reduce it
down to form inside the curly braces.
Because we have form inside the curly braces,
this will automatically get expanded out by ES six
to be form colon form automatically for us.
Nice little helper.
Just a reminder that we can use that all
over the place and we certainly will inside this section.
All right, one last thing that I want
to do inside this component
and then we'll take a little break.
Let's just put a little bit
of the form together inside of here.
So there's gonna be a decent amount
of jsx that we need to put together.
At the very top level we'll place our form
and we're going to have two different fields in here,
our email and our password fields.
I'm going to group each of these
by using the field set component or element.
The field set element is kinda semantically,
hey, here's a group of input
or label elements that are kind of grouped together.
I'm also gonna add a class name on here, a form group.
Again, this is a lot
of bootstrap styling that's coming across right here.
Then inside of the field set, we can add our label
of email and our input with a class name of form control.
Again, another bootstrap class.
So I've got one field set complete here for my email field.
I'm going to copy
and paste it right below for my password field as well
so I can just rename email as password.
Then one last element that I want on here
I wanna just put on my button.
It's action whenever someone clicks it should be to submit
and we'll give it a class name of button, button primary
and it should contain the text sign in.
Again, keeping really consistent
with the sign in terminology here.
Of course, since this sign in right here,
the sign in phrase is something that our users see
it would be pretty reasonable to decide to rename this
to login or something like that
if we wanna have very specific product messaging.
But as far as any code goes, again
we really want to keep consistent terminology of login
or excuse me, sign in, instead of using login all
over the place as well and mixing the two up.
All right, so this is looking pretty good.
We did miss one little thing in here.
I placed the JSX tag without ever placing return statement.
Remember, we must always return our jsx
from a component and just for some code organization,
I'm gonna wrap this with a set of parens as well, like so.
So we're going to return this big old blob
of jsx right here.
Now the sign in component is not tied
up to our router at all just yet.
Let's take care of that inside the next section.
We also need to make sure
that our inputs are being controlled by redux form.
So let's also do that next section.
I'll see you there.