Hi and welcome back.
Error handling is crucial during registration and logging to inform
the user about any issues and how to resolve them.
For example, if the user enters invalid
credentials, the app should display an error message explaining the issue.
Success handling on the other hand,
is important to confirm that the user has successfully registered or logged in.
This helps to provide a positive user
experience and increased user trust in the application.
A success message can be displayed after
the user logs in or registers successfully.
So I would like to work on that with you today.
The first thing that we're going to do is
we're going to start with our registration process.
First of all, what we're going to need to do is change our function given here so
that we know when we're getting an error or when we're successfully registered.
So let's say that if a user gets error,
what we want to do here is return an object containing the error and we're
going to have a message here saying that the email you entered is already in use.
Now let's copy this and paste it here
and here we're just going to say that please enter a valid email address.
Great. And here we're just going to return
an error saying that something went wrong with your request.
Okay, so now that our function is ready
to return to us any errors or the user if the user registers successfully,
what we want to do is make sure that we handle it from our registration page.
So for that we're going to need two states.
One is going to be success and one is going to be an error.
And now that we have these two state, what we want to do is make sure that we
show it to the user at the appropriate time.
So let's make sure that we grab the response from the create user.
So let's say that we grab the user
from here and here we're going to say if user has an error then we want to set
the error that was returned to us so it's going to be user error.
Otherwise what we want to do is make sure that we show the user the success message.
So we're going to have to set success and we're going to say here you have
successfully registered and then we want to navigate to the login
screen so the user doesn't have to do anything themselves.
This is going to be a good user experience and we're going to say that after 3
seconds that we show this message we
want to navigate back to the login page.
And here we're going to say that we're going to do this in 3 seconds.
So let's save this now.
And here let's make sure that we reset
the error to the empty state so that user is not bothered by that message anymore.
And what we also want to do is make sure
that our button is disabled if any of these fields are empty.
So here we're going to set an Is disabled state so the user is not able to click
the registration unless they enter the information.
Let's say that we want the full name
length to be more than two characters and if it is less than equal to two
characters, the button is going to be disabled.
Or if the email length is less than, let's say five characters,
we're going to say that the button is disabled here and we can also say
that password length has to be at least eight characters for this to be enabled.
Great, now let's save this and we see that our registration button is
automatically disabled just in case we don't have this information.
So now that we have that, we need a place to show the user success
or error message and I would say a good place for that found be here in between
the passport field and the registration field.
So let's create a new text component here and let's make sure that we import this
from the react native and let's say that if there are any
errors, we wanted to show the user what error they got.
So let's place the error variable here and let's say that we want to style this
so let's create an error style and what we also want to do is have a similar thing
for our success and let's style this success from our styles.
Great, so now that we have those, let's go to our styles and create
the error state and let's create the success state as well.
Here we're just going to say that we're going
to use font family of inter and we're
going to use font size of scale
font size 16
and that we're going to have a color
applied to this that is going to be red.
And then what we also want to do is
a similar thing for our success message,
but with the green color.
And that color would be this here.
So that it's green.
And we also want to make sure that we have appropriate margin set here.
So let's say that we need margin bottom
of vertical scale 24 applied here so
that it's not cramped up
with the registration button
and now that we have these we can start
entering invalid information here
and see how our error handling works.
So let's say that my name is
Nata Vacheishvili and I'll enter an email that's invalid here and I'll just give it
some password, okay, so I need to enter more characters here await.
So now that we have that, let's click on registration
and here we get a message saying please enter a valid email address.
So now let's say that I'm going to enter
the address that's already registered and let's save this
and here we get an error saying the email you entered is already in use.
Great, and now we want to enter something that would actually make us register.
So let's do that.
And let's click on registration.
And here it says you have successfully
registered and we are redirected to the login page so the user can log in now.
So this is good for the user experience.
We let the user know what is going on with their registration process.
And in the next video we're going to be talking about some of the more important
concepts for making sure that user is logged in.
So I'll see you in the next video. Thanks so much for watching.