Instructor: One of the last things we have to do inside
of our application is implement the "Sign In" form.
The "Sign In" form is gonna be nearly identical
to the "Sign Up" form.
So, in this section,
we're gonna create a new component for "Sign In,"
and we're going to largely reuse everything
that we already put together for "Sign Up."
So, to get started, I'll go back over
to my "components, auth" directory
and create a "Signin.js" file.
Like I said, everything inside of here,
nearly identical to signing up.
So, I'm gonna take a little shortcut here.
I'm gonna open up my "Signup" component,
I'm gonna copy everything inside of here,
and then I'll move it over to the "Signin.js" file.
All that really has to change in here,
is all the references of "Signup".
So, inside of this "Signin.js" file,
I'll find the class name.
I'll change it to "Signup", excuse me,
not "Signup", but "Signin".
There we go, "Signin", inside of "onSubmit,"
I'll make sure that I call the "signin" action creator
that we'll create in just a moment.
Inside of the form, I'll find the button down
at the bottom, and rather than saying sign up,
I'll change it to "Sign In!"
And then finally, at the very bottom,
I'll make sure that when I do my export statement,
I change the form name to "signin"
and the component name to "Signin" as well,
and that's pretty much it.
Now we can open up our root "index.js" file,
and set up a route mapping for this thing as well.
I'll first import the "Signin" component we just created.
So components off sign in, and then I'll set up
a new route mapping for this as well.
So here's my route, we'll do a path of "signin"
and a component of sign in.
All right, not bad.
Let's take a quick pause right here.
We'll come back to the next section
and we'll put together our sign in action creator.