Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,130 --> 00:00:03,950
Let's improve the feedback
2
00:00:03,950 --> 00:00:05,220
we show to the user.
3
00:00:05,220 --> 00:00:07,920
And I will start by showing up a proper error message
4
00:00:07,920 --> 00:00:09,520
if we have an error.
5
00:00:09,520 --> 00:00:11,480
Because it is convenient that Firebase
6
00:00:11,480 --> 00:00:14,350
gives us a nice error message actually,
7
00:00:14,350 --> 00:00:16,770
for example, if the password is too short,
8
00:00:16,770 --> 00:00:20,500
I just wanna output that error message to the user
9
00:00:20,500 --> 00:00:23,450
or show some kind of error message to the user,
10
00:00:23,450 --> 00:00:27,193
no matter if it's this specific message or my own message.
11
00:00:28,700 --> 00:00:31,600
So what I wanna do here is I wanna get that message
12
00:00:31,600 --> 00:00:33,910
Firebase is sending back, and for this,
13
00:00:33,910 --> 00:00:36,960
we need to drill into this data object here
14
00:00:36,960 --> 00:00:39,790
and we see that it will have an error key
15
00:00:39,790 --> 00:00:42,110
which then holds another nested object
16
00:00:42,110 --> 00:00:45,970
which has a message key with the actual text message.
17
00:00:45,970 --> 00:00:50,720
So for this here, we can get the error message
18
00:00:50,720 --> 00:00:54,443
by drilling into data.error.message.
19
00:00:55,960 --> 00:00:58,840
Of course, you might wanna add some checks here
20
00:00:58,840 --> 00:01:02,200
to ensure that you really have an error property
21
00:01:02,200 --> 00:01:05,462
and that distant is an object with a message property.
22
00:01:06,730 --> 00:01:09,150
And that in case that's not the case,
23
00:01:09,150 --> 00:01:11,440
you set error message to something else.
24
00:01:11,440 --> 00:01:13,690
So let's maybe do that as well.
25
00:01:13,690 --> 00:01:17,410
Let's define our error message variable here
26
00:01:17,410 --> 00:01:19,670
where we say authentication failed
27
00:01:19,670 --> 00:01:22,350
as a generic error message.
28
00:01:22,350 --> 00:01:25,300
But then we check if we do have data
29
00:01:25,300 --> 00:01:28,580
and data has an error property and that's truthy,
30
00:01:28,580 --> 00:01:31,920
and that then in turn has a message property,
31
00:01:31,920 --> 00:01:34,300
which is truthy, if that's all the case
32
00:01:34,300 --> 00:01:37,973
I'll set error message to this more specific message.
33
00:01:39,410 --> 00:01:43,170
And if that's not mat, if we don't have this error object
34
00:01:43,170 --> 00:01:46,150
or it's undefined or message is undefined
35
00:01:46,150 --> 00:01:49,760
we don't set our error message like this.
36
00:01:49,760 --> 00:01:52,520
And then there after we could set some state
37
00:01:52,520 --> 00:01:56,230
and shows them modal, but here I'll keep it simple,
38
00:01:56,230 --> 00:01:58,800
and I'll just use the built an alert function
39
00:01:58,800 --> 00:02:03,240
which we can use in the browser to show this built in alert
40
00:02:03,240 --> 00:02:05,550
which all browsers support
41
00:02:05,550 --> 00:02:07,503
and show the error message with that.
42
00:02:08,844 --> 00:02:13,207
And if I do this and I now enter an invalid password
43
00:02:14,230 --> 00:02:18,183
for a new email address, I get this alert.
44
00:02:19,250 --> 00:02:23,500
If I try to set or create a user for an email
45
00:02:23,500 --> 00:02:27,623
that does already exist, I get this email exists message.
46
00:02:28,480 --> 00:02:31,480
Now of course we can argue if that's really the kind
47
00:02:31,480 --> 00:02:33,710
of message we wanna show to our users
48
00:02:33,710 --> 00:02:36,010
and dear friend's of course up to you
49
00:02:36,010 --> 00:02:39,630
to kind of parse this message and look into it
50
00:02:39,630 --> 00:02:43,630
and look for identifiers like email exists,
51
00:02:43,630 --> 00:02:46,190
or weak password to then show
52
00:02:46,190 --> 00:02:48,980
your own custom error messages.
53
00:02:48,980 --> 00:02:53,180
Or you simply always show authentication failed.
54
00:02:53,180 --> 00:02:55,420
And that's what I will fall back to here
55
00:02:55,420 --> 00:02:57,430
but I showed you this alternative
56
00:02:57,430 --> 00:03:00,800
so that you know, all the possible options.
57
00:03:00,800 --> 00:03:05,013
Now I will just always show authentication failed instead.
58
00:03:06,070 --> 00:03:08,390
We also might wanna show some loading state
59
00:03:08,390 --> 00:03:11,050
whilst the request is on its way.
60
00:03:11,050 --> 00:03:14,930
And for this, we can actually manage extra piece
61
00:03:14,930 --> 00:03:19,340
of state here which initially is false
62
00:03:19,340 --> 00:03:24,330
because that is loading state
63
00:03:24,330 --> 00:03:27,453
and set is loading is the state updating function.
64
00:03:28,630 --> 00:03:31,170
And I wanna start this loading state,
65
00:03:31,170 --> 00:03:35,670
I wanna set it to true if we are starting to send a request,
66
00:03:35,670 --> 00:03:38,520
which you can do right before we make it into this,
67
00:03:38,520 --> 00:03:42,180
if else block because I will also soon send the request
68
00:03:42,180 --> 00:03:47,180
in the if case, and that here I wanna set is loading to true
69
00:03:48,310 --> 00:03:50,520
to start loading.
70
00:03:50,520 --> 00:03:52,820
And once we got a response, so here,
71
00:03:52,820 --> 00:03:55,210
no matter if it's an error or not,
72
00:03:55,210 --> 00:03:57,633
I wanna set is loading to false.
73
00:03:59,340 --> 00:04:02,820
Now we can use this loading state down here
74
00:04:02,820 --> 00:04:07,160
to only show this button, this create account button here,
75
00:04:07,160 --> 00:04:09,210
if we are not loading.
76
00:04:09,210 --> 00:04:11,160
So I'll check if not is loading
77
00:04:11,160 --> 00:04:13,420
in which case I'll show this button.
78
00:04:13,420 --> 00:04:18,420
If we are loading, we can show a loading spinner
79
00:04:19,560 --> 00:04:22,160
or here I'll simply show a paragraph
80
00:04:22,160 --> 00:04:26,480
where I say loading or sending request
81
00:04:26,480 --> 00:04:27,853
or something like this.
82
00:04:29,680 --> 00:04:34,120
And with that, if I switched to creating a user
83
00:04:34,120 --> 00:04:36,970
and I then try to send this request,
84
00:04:36,970 --> 00:04:40,120
we briefly saw sending requests down there
85
00:04:40,120 --> 00:04:43,410
actually with some black text color
86
00:04:43,410 --> 00:04:45,850
of course we can change the styling
87
00:04:45,850 --> 00:04:50,280
to make that white for example, in auth for module
88
00:04:50,280 --> 00:04:55,280
in this auth class selector, by setting color to white here,
89
00:04:55,440 --> 00:04:58,040
the text color to white.
90
00:04:58,040 --> 00:05:02,960
And now with that, we see sending requests in white there.
91
00:05:02,960 --> 00:05:04,690
That's something we could do.
92
00:05:04,690 --> 00:05:07,590
Now that's some basic feedback which we're providing
93
00:05:07,590 --> 00:05:10,250
to the user, of course you can change this,
94
00:05:10,250 --> 00:05:12,380
you can make that more elaborate,
95
00:05:12,380 --> 00:05:16,423
but that's how we can provide some basic user feedback here.
96
00:05:17,410 --> 00:05:21,770
Now however, let's also implement user log in
97
00:05:21,770 --> 00:05:25,330
so that we can log in if we already created the user
98
00:05:25,330 --> 00:05:27,940
and let's make sure that we then step by step
99
00:05:27,940 --> 00:05:32,020
also changed this application and the user interface
100
00:05:32,020 --> 00:05:34,393
once a user is logged in.
8091
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.