Instructor: Our action creator is now dispatching
an action whenever the request
to successfully authenticate a user fails.
So now inside of a reducer, we're producing a piece of state
called error, and this will be available on global state
as state dot auth dot error.
And it's just gonna be a simple string
that we can show inside any given component.
So we can make immediate use of this
inside of our sign-in component.
I'm gonna flip back over to the sign-in form.
Now to get access to a piece of redux state
inside of a component, usually we use the connect helper.
Again, keep in mind that the redux form right here, helper,
is the exact same thing in disguise.
The only difference is that the arguments
are shifted by one.
So this null argument right here,
this is really our map state to props function.
We can get that piece of state inside of our component
by adding a function for handling map state to props.
Then we just need to pull off a piece of state
for the error message, state dot auth dot error,
so this is gonna be our plain string
that just says to the user,
"Hey, sorry, you just made a little mistake
on your login information, please try again."
And then we're gonna have that piece of state show up
inside of our component props as error message.
So let's make sure that we wire up map state to props.
Very good.
So now we've got this string handy inside of our component,
all we have to do is show it at the appropriate time.
And so if you really think about it,
usually that piece of state is gonna be completely null,
it's not gonna be anything at all.
So we can just put an existence check
in to see if that string exists.
If it exists, then hey, let's show an alert,
or some type of message to the user.
Really good practice is to put that alert message
right above the button for signing in.
So I think right above the button
I'm gonna put in a little helper
that I'm gonna call this dot render alert, like so.
And then inside of our helper method, render alert,
we'll decide whether or not we want to show
this error message by just doing a simple existence check.
So if this dot props dot error message exists,
then we're going to want to show an error message
to the user.
So we'll place a div with a class name,
alert and alert danger.
Again, this is a lot of bootstrap classes going on here,
so we're gonna get some nice styling
from alert, alert danger here.
And then the error message that I want to show to the user,
I'm gonna show kind of in bold, I'm gonna show,
oops, so nice, clever, friendly error message,
and then just the error message that we want to show.
So this dot props dot error message.
This is looking pretty good,
let's flip over to the browser and give it a shot.
I'm gonna refresh my page
and then I'm gonna put in some
garbage email and some garbage password
that I am reasonably sure that is not in use right now.
I'll try to sign in, and I got an error in signing in,
and successfully, "Oops, bad login info,"
exactly what I need.
There's also one other thing here that we've been kind of
not making much progress on,
and that is making sure that this password input right here
actually kind of obfuscates the password,
so other people who are looking over our user's screen
can't see their password in plain text.
We can turn this input into a password field
by just adding on the password input itself,
type password.
And this is a little bit of native HTML input trickery here,
this is not anything react specific,
this just tells the input, "Hey, you should consider
your input or whatever text or input you contain
to be somewhat protected,"
and we don't want it to be easily visible
to anyone who's looking over our user's shoulder.
So now we can refresh the page.
And we are gonna wait just a little bit for
a script to load up.
There we go.
And now when I type my password in,
nice and obfuscated from anyone who's trying to read.
I can also still successfully log into my server.
Again, keep in mind that we don't have this feature route
hooked up just yet.
I think that that would be a fantastic place to work on next
considering as to how our sign-in component right now
is looking pretty darn good.
So let's get continued in the next section.
I'll see you there.