WEBVTT

1
00:00:00.640 --> 00:00:02.140
Hi and welcome back.

2
00:00:02.170 --> 00:00:05.860
Error handling is crucial during
registration and logging to inform

3
00:00:05.890 --> 00:00:08.700
the user about any issues
and how to resolve them.

4
00:00:08.730 --> 00:00:10.820
For example, if the user enters invalid

5
00:00:10.850 --> 00:00:14.860
credentials, the app should display
an error message explaining the issue.

6
00:00:14.880 --> 00:00:16.500
Success handling on the other hand,

7
00:00:16.530 --> 00:00:21.380
is important to confirm that the user has
successfully registered or logged in.

8
00:00:21.400 --> 00:00:23.420
This helps to provide a positive user

9
00:00:23.450 --> 00:00:26.860
experience and increased user
trust in the application.

10
00:00:26.890 --> 00:00:29.180
A success message can be displayed after

11
00:00:29.210 --> 00:00:32.100
the user logs in or
registers successfully.

12
00:00:32.130 --> 00:00:36.940
So I would like to work
on that with you today.

13
00:00:36.960 --> 00:00:38.620
The first thing that we're going to do is

14
00:00:38.640 --> 00:00:42.020
we're going to start with our
registration process.

15
00:00:42.050 --> 00:00:47.140
First of all, what we're going to need
to do is change our function given here so

16
00:00:47.170 --> 00:00:52.740
that we know when we're getting an error
or when we're successfully registered.

17
00:00:52.770 --> 00:00:55.900
So let's say that if a user gets error,

18
00:00:55.930 --> 00:01:02.880
what we want to do here is return
an object containing the error and we're

19
00:01:02.910 --> 00:01:13.490
going to have a message here saying that
the email you entered is already in use.

20
00:01:13.520 --> 00:01:17.100
Now let's copy this and paste it here

21
00:01:17.130 --> 00:01:25.040
and here we're just going to say
that please enter a valid email address.

22
00:01:26.160 --> 00:01:29.780
Great.
And here we're just going to return

23
00:01:29.810 --> 00:01:38.100
an error saying that something
went wrong with your request.

24
00:01:38.120 --> 00:01:40.570
Okay,
so now that our function is ready

25
00:01:40.600 --> 00:01:46.140
to return to us any errors or the user if
the user registers successfully,

26
00:01:46.170 --> 00:01:51.780
what we want to do is make sure that we
handle it from our registration page.

27
00:01:51.810 --> 00:01:54.540
So for that we're going
to need two states.

28
00:01:54.570 --> 00:02:06.280
One is going to be success
and one is going to be an error.

29
00:02:08.600 --> 00:02:13.080
And now that we have these two state,
what we want to do is make sure that we

30
00:02:13.110 --> 00:02:15.780
show it to the user
at the appropriate time.

31
00:02:15.810 --> 00:02:20.220
So let's make sure that we grab
the response from the create user.

32
00:02:20.250 --> 00:02:22.940
So let's say that we grab the user

33
00:02:22.970 --> 00:02:30.860
from here and here we're going to say if
user has an error then we want to set

34
00:02:30.890 --> 00:02:36.540
the error that was returned to us
so it's going to be user error.

35
00:02:36.570 --> 00:02:42.580
Otherwise what we want to do is make sure
that we show the user the success message.

36
00:02:42.610 --> 00:02:47.820
So we're going to have to set success
and we're going to say here you have

37
00:02:47.850 --> 00:02:53.920
successfully registered
and then we want to navigate to the login

38
00:02:53.920 --> 00:02:56.500
screen so the user doesn't have
to do anything themselves.

39
00:02:56.530 --> 00:03:02.100
This is going to be a good user experience
and we're going to say that after 3

40
00:03:02.130 --> 00:03:05.540
seconds that we show this message we

41
00:03:05.570 --> 00:03:13.060
want to navigate back to the login page.

42
00:03:13.090 --> 00:03:17.300
And here we're going to say that we're
going to do this in 3 seconds.

43
00:03:17.330 --> 00:03:19.180
So let's save this now.

44
00:03:19.210 --> 00:03:21.860
And here let's make sure that we reset

45
00:03:21.890 --> 00:03:27.980
the error to the empty state so that user
is not bothered by that message anymore.

46
00:03:28.010 --> 00:03:30.460
And what we also want to do is make sure

47
00:03:30.490 --> 00:03:35.340
that our button is disabled if
any of these fields are empty.

48
00:03:35.370 --> 00:03:40.780
So here we're going to set an Is disabled
state so the user is not able to click

49
00:03:40.810 --> 00:03:43.700
the registration unless
they enter the information.

50
00:03:43.730 --> 00:03:46.820
Let's say that we want the full name

51
00:03:46.850 --> 00:03:54.500
length to be more than two characters
and if it is less than equal to two

52
00:03:54.530 --> 00:03:57.610
characters, the button
is going to be disabled.

53
00:03:57.640 --> 00:04:07.100
Or if the email length is less than,
let's say five characters,

54
00:04:07.130 --> 00:04:11.660
we're going to say that the button is
disabled here and we can also say

55
00:04:11.690 --> 00:04:19.340
that password length has to be at least
eight characters for this to be enabled.

56
00:04:19.360 --> 00:04:23.100
Great, now let's save this and we see
that our registration button is

57
00:04:23.130 --> 00:04:26.980
automatically disabled just in case
we don't have this information.

58
00:04:27.010 --> 00:04:31.380
So now that we have that,
we need a place to show the user success

59
00:04:31.410 --> 00:04:36.620
or error message and I would say a good
place for that found be here in between

60
00:04:36.650 --> 00:04:40.260
the passport field
and the registration field.

61
00:04:40.280 --> 00:04:50.180
So let's create a new text component here
and let's make sure that we import this

62
00:04:50.210 --> 00:04:55.460
from the react native
and let's say that if there are any

63
00:04:55.480 --> 00:05:02.620
errors, we wanted to show
the user what error they got.

64
00:05:02.650 --> 00:05:07.700
So let's place the error variable here
and let's say that we want to style this

65
00:05:07.720 --> 00:05:14.100
so let's create an error style and what we
also want to do is have a similar thing

66
00:05:14.130 --> 00:05:23.260
for our success and let's style
this success from our styles.

67
00:05:23.280 --> 00:05:27.820
Great, so now that we have those,
let's go to our styles and create

68
00:05:27.850 --> 00:05:32.820
the error state and let's create
the success state as well.

69
00:05:32.840 --> 00:05:35.463
Here we're just going to say that we're going

70
00:05:35.663 --> 00:05:37.620
to use font family of inter and we're

71
00:05:37.650 --> 00:05:41.579
going to use font size of scale

72
00:05:41.779 --> 00:05:43.100
font size 16

73
00:05:43.130 --> 00:05:46.612
and that we're going to have a color

74
00:05:46.812 --> 00:05:50.480
applied to this that is going to be red.

75
00:05:51.160 --> 00:05:53.100
And then what we also want to do is

76
00:05:53.130 --> 00:05:56.730
a similar thing for our success message,

77
00:05:56.930 --> 00:05:58.980
but with the green color.

78
00:05:59.010 --> 00:06:01.820
And that color would be this here.

79
00:06:01.850 --> 00:06:03.340
So that it's green.

80
00:06:03.360 --> 00:06:07.860
And we also want to make sure that we
have appropriate margin set here.

81
00:06:07.890 --> 00:06:10.380
So let's say that we need margin bottom

82
00:06:10.410 --> 00:06:13.368
of vertical scale 24 applied here so

83
00:06:13.568 --> 00:06:15.340
that it's not cramped up

84
00:06:15.360 --> 00:06:18.210
with the registration button

85
00:06:18.410 --> 00:06:22.180
and now that we have these we can start

86
00:06:22.210 --> 00:06:25.232
entering invalid information here

87
00:06:25.432 --> 00:06:28.620
and see how our error handling works.

88
00:06:28.650 --> 00:06:30.460
So let's say that my name is

89
00:06:30.480 --> 00:06:36.360
Nata Vacheishvili and I'll enter an email
that's invalid here and I'll just give it

90
00:06:36.390 --> 00:06:41.820
some password, okay, so I need
to enter more characters here await.

91
00:06:41.850 --> 00:06:45.860
So now that we have that,
let's click on registration

92
00:06:45.890 --> 00:06:51.620
and here we get a message saying
please enter a valid email address.

93
00:06:51.650 --> 00:06:54.260
So now let's say that I'm going to enter

94
00:06:54.290 --> 00:07:01.500
the address that's already registered
and let's save this

95
00:07:01.530 --> 00:07:06.700
and here we get an error saying
the email you entered is already in use.

96
00:07:06.730 --> 00:07:11.660
Great, and now we want to enter something
that would actually make us register.

97
00:07:11.690 --> 00:07:13.100
So let's do that.

98
00:07:13.130 --> 00:07:16.960
And let's click on registration.

99
00:07:18.200 --> 00:07:20.300
And here it says you have successfully

100
00:07:20.330 --> 00:07:26.940
registered and we are redirected to the
login page so the user can log in now.

101
00:07:26.970 --> 00:07:29.860
So this is good for the user experience.

102
00:07:29.890 --> 00:07:33.660
We let the user know what is going
on with their registration process.

103
00:07:33.690 --> 00:07:38.780
And in the next video we're going to be
talking about some of the more important

104
00:07:38.800 --> 00:07:43.260
concepts for making sure
that user is logged in.

105
00:07:43.290 --> 00:07:46.360
So I'll see you in the next video.
Thanks so much for watching.