We've made a ton of progress in our action crater's file and we're starting to see some really solid
behavior between these actual creators and.
We're handling the case in which the user successfully signs in.
But we also need to handle the case in which the user fails to log in as well.
With this logon user fail function that we have down here.
First we need to think about what we want to have happen when the user fails to log in.
Chances are we really want to show a error message of some type to the user.
Right.
I think that makes sense.
So in that case I think that will do the same exact thing as what we did inside of our off app will
add a new piece of state to our producer called air.
So back inside of my office reduce your file or find my initial state right here and we're going to
update it to make sure that it contains a string error by default it will be an empty string.
And then as soon as we see some fail case or a case in which the user fails to log in then we'll update
that string to contain some type of error message.
So inside of my initial state object I will default the air piece of state to be an empty string like
So next we'll need to make sure that we import our action type of logon user fail which we had just
put together inside of our type's file.
A moment ago.
So is log in user fail.
Back inside the reducer will import log in user fail and then we'll add this to the reducer as well
down inside the reducer.
We'll add on an extra case statement of log in user fail.
And if we ever see this case then we will return everything inside of our state object.
But will also update that air property.
It will make it say something like about authentication failed licensing call.
So now any time a user fails to sign in boom we're going to set this piece of air state as a side note
if you are really concerned about security and you want to do something like say clear clear out the
user's password whenever they fail assign an attempt.
Then we could also reset the password property that's being maintained inside's reducer as well by writing
something like password empty string.
So if the user now fails to log in it will reset the password input.
Now I'm not going to do this so I'm going to take out that statement but I wanted you to know that you
could very easily add that in anyways.
Now back to our log in form.
We need to make sure that we now take this air piece of state that we've created and show it on the
form itself.
So back inside of my log in form we're going to go down to our map state to proper function at the very
bottom way down here and we'll make sure that we pull off the air piece of state from the off property
as well.
So we'll say air is going to come from St. boss Don air.
Now the last thing we have to do is make sure that this component is aware that it needs to show that
air piece of steak.
Anytime something goes wrong our indication that something has gone wrong inside the component itself
will be the case in which the air property has been assigned to something other than an empty string.
So I think that a really easy way to handle this is going to be to create a helper method inside of
our component that's going to look at that air property and decide exactly what to render.
So right above the render function allowed on render air inside of there will add an if statement to
see if this dock Propst hot air has been assigned a value.
So if nothing has gone wrong and this is still an empty string then the if statement will fail and nothing
will happen.
But if there is an error that will execute this code inside the if statement.
So inside the if statement itself let's return something to show some error to our user.
So I return with the view I can give this thing a hard coded style of back ground color white and then
inside the view will place a text tag.
I do expect to add some styles to this like some stuff to make sure that the text appears red and whatnot
so I'm going to assume assume that we'll create a styles object in just a moment and I will assume that
there will be a property on there cold air text style like so that inside the text tag itself will place
this dot props on air.
Now we can call the render method from inside or see the render air method from inside of our render
method.
So down inside render maybe right above the button.
So here's the card section with a button maybe right above this thing will place that method call.
So like a call to this dot render air.
So now if any air exists this would turn a view with a text tag inside of it.
That will be displayed to the user.
Now the last thing we have to do is make sure that we add in some styling for this air text style thing
right here.
And again what we really want to do is just to make sure that it shows up as red and maybe center the
text and some stuff like that as well.
So down towards the bottom of the file underneath our component will create a Stiles object.
Sukant styles will be air or text style will have a font size of 20 a line cell of center.
So that will Central the text and will also give it a color of red just a kind of pop out to the user.
Make it very prominent.
All right.
I think that we're ready to test this out inside of our simulator.
So I'll flip back or the simulator or refresh it.
And now we should be able to say and to enter in some garbage e-mail without any password at all and
then have the logging button and oops moments like we forgot one thing.
So I don't think we ever imported that view and we might've also skipped the text tag as well.
So let's make sure we import both those at the top.
All right back up here.
Yup sure enough we forgot it.
So import you and text from Briac native and let's give this another shot.
So refresh the simulator again we can click log in and we're immediately told authentication failed
because something went wrong during the authentication process.
So I think that's about it right now.
Now maybe the last thing that we need to do with the log in form is to make sure that we show a spinner
to our users while they're waiting for the log in request.
So let's take a glance at how we would accomplish that in the next section.