1
00:00:01,740 --> 00:00:03,660
Instructor: Our action creator is now dispatching

2
00:00:03,660 --> 00:00:06,120
an action whenever the request

3
00:00:06,120 --> 00:00:09,060
to successfully authenticate a user fails.

4
00:00:09,060 --> 00:00:12,330
So now inside of a reducer, we're producing a piece of state

5
00:00:12,330 --> 00:00:15,630
called error, and this will be available on global state

6
00:00:15,630 --> 00:00:18,540
as state dot auth dot error.

7
00:00:18,540 --> 00:00:20,670
And it's just gonna be a simple string

8
00:00:20,670 --> 00:00:22,950
that we can show inside any given component.

9
00:00:22,950 --> 00:00:24,540
So we can make immediate use of this

10
00:00:24,540 --> 00:00:26,880
inside of our sign-in component.

11
00:00:26,880 --> 00:00:29,130
I'm gonna flip back over to the sign-in form.

12
00:00:30,240 --> 00:00:32,850
Now to get access to a piece of redux state

13
00:00:32,850 --> 00:00:36,420
inside of a component, usually we use the connect helper.

14
00:00:36,420 --> 00:00:39,660
Again, keep in mind that the redux form right here, helper,

15
00:00:39,660 --> 00:00:42,420
is the exact same thing in disguise.

16
00:00:42,420 --> 00:00:44,010
The only difference is that the arguments

17
00:00:44,010 --> 00:00:45,660
are shifted by one.

18
00:00:45,660 --> 00:00:47,730
So this null argument right here,

19
00:00:47,730 --> 00:00:51,450
this is really our map state to props function.

20
00:00:51,450 --> 00:00:54,180
We can get that piece of state inside of our component

21
00:00:54,180 --> 00:00:57,483
by adding a function for handling map state to props.

22
00:00:59,430 --> 00:01:01,680
Then we just need to pull off a piece of state

23
00:01:01,680 --> 00:01:05,880
for the error message, state dot auth dot error,

24
00:01:05,880 --> 00:01:08,340
so this is gonna be our plain string

25
00:01:08,340 --> 00:01:09,697
that just says to the user,

26
00:01:09,697 --> 00:01:11,670
"Hey, sorry, you just made a little mistake

27
00:01:11,670 --> 00:01:14,550
on your login information, please try again."

28
00:01:14,550 --> 00:01:16,620
And then we're gonna have that piece of state show up

29
00:01:16,620 --> 00:01:20,370
inside of our component props as error message.

30
00:01:20,370 --> 00:01:23,193
So let's make sure that we wire up map state to props.

31
00:01:24,990 --> 00:01:26,520
Very good.

32
00:01:26,520 --> 00:01:29,670
So now we've got this string handy inside of our component,

33
00:01:29,670 --> 00:01:32,550
all we have to do is show it at the appropriate time.

34
00:01:32,550 --> 00:01:33,990
And so if you really think about it,

35
00:01:33,990 --> 00:01:36,750
usually that piece of state is gonna be completely null,

36
00:01:36,750 --> 00:01:39,240
it's not gonna be anything at all.

37
00:01:39,240 --> 00:01:41,640
So we can just put an existence check

38
00:01:41,640 --> 00:01:43,380
in to see if that string exists.

39
00:01:43,380 --> 00:01:45,690
If it exists, then hey, let's show an alert,

40
00:01:45,690 --> 00:01:47,703
or some type of message to the user.

41
00:01:50,220 --> 00:01:52,530
Really good practice is to put that alert message

42
00:01:52,530 --> 00:01:55,230
right above the button for signing in.

43
00:01:55,230 --> 00:01:57,000
So I think right above the button

44
00:01:57,000 --> 00:01:58,890
I'm gonna put in a little helper

45
00:01:58,890 --> 00:02:03,453
that I'm gonna call this dot render alert, like so.

46
00:02:04,320 --> 00:02:07,263
And then inside of our helper method, render alert,

47
00:02:08,310 --> 00:02:09,870
we'll decide whether or not we want to show

48
00:02:09,870 --> 00:02:12,780
this error message by just doing a simple existence check.

49
00:02:12,780 --> 00:02:17,400
So if this dot props dot error message exists,

50
00:02:17,400 --> 00:02:19,800
then we're going to want to show an error message

51
00:02:19,800 --> 00:02:21,330
to the user.

52
00:02:21,330 --> 00:02:24,153
So we'll place a div with a class name,

53
00:02:25,800 --> 00:02:27,990
alert and alert danger.

54
00:02:27,990 --> 00:02:30,780
Again, this is a lot of bootstrap classes going on here,

55
00:02:30,780 --> 00:02:32,400
so we're gonna get some nice styling

56
00:02:32,400 --> 00:02:34,470
from alert, alert danger here.

57
00:02:34,470 --> 00:02:37,620
And then the error message that I want to show to the user,

58
00:02:37,620 --> 00:02:41,463
I'm gonna show kind of in bold, I'm gonna show,

59
00:02:43,530 --> 00:02:47,610
oops, so nice, clever, friendly error message,

60
00:02:47,610 --> 00:02:50,260
and then just the error message that we want to show.

61
00:02:52,350 --> 00:02:54,393
So this dot props dot error message.

62
00:02:55,410 --> 00:02:56,400
This is looking pretty good,

63
00:02:56,400 --> 00:02:59,430
let's flip over to the browser and give it a shot.

64
00:02:59,430 --> 00:03:02,790
I'm gonna refresh my page

65
00:03:02,790 --> 00:03:04,290
and then I'm gonna put in some

66
00:03:05,250 --> 00:03:07,470
garbage email and some garbage password

67
00:03:07,470 --> 00:03:11,040
that I am reasonably sure that is not in use right now.

68
00:03:11,040 --> 00:03:14,280
I'll try to sign in, and I got an error in signing in,

69
00:03:14,280 --> 00:03:16,710
and successfully, "Oops, bad login info,"

70
00:03:16,710 --> 00:03:17,853
exactly what I need.

71
00:03:18,690 --> 00:03:21,180
There's also one other thing here that we've been kind of

72
00:03:21,180 --> 00:03:22,860
not making much progress on,

73
00:03:22,860 --> 00:03:25,170
and that is making sure that this password input right here

74
00:03:25,170 --> 00:03:27,810
actually kind of obfuscates the password,

75
00:03:27,810 --> 00:03:30,270
so other people who are looking over our user's screen

76
00:03:30,270 --> 00:03:32,970
can't see their password in plain text.

77
00:03:32,970 --> 00:03:35,760
We can turn this input into a password field

78
00:03:35,760 --> 00:03:39,033
by just adding on the password input itself,

79
00:03:40,020 --> 00:03:42,510
type password.

80
00:03:42,510 --> 00:03:47,510
And this is a little bit of native HTML input trickery here,

81
00:03:47,700 --> 00:03:49,200
this is not anything react specific,

82
00:03:49,200 --> 00:03:52,020
this just tells the input, "Hey, you should consider

83
00:03:52,020 --> 00:03:55,230
your input or whatever text or input you contain

84
00:03:55,230 --> 00:03:56,910
to be somewhat protected,"

85
00:03:56,910 --> 00:03:58,560
and we don't want it to be easily visible

86
00:03:58,560 --> 00:04:01,530
to anyone who's looking over our user's shoulder.

87
00:04:01,530 --> 00:04:03,333
So now we can refresh the page.

88
00:04:08,280 --> 00:04:11,080
And we are gonna wait just a little bit for

89
00:04:12,660 --> 00:04:14,130
a script to load up.

90
00:04:14,130 --> 00:04:15,060
There we go.

91
00:04:15,060 --> 00:04:16,890
And now when I type my password in,

92
00:04:16,890 --> 00:04:20,730
nice and obfuscated from anyone who's trying to read.

93
00:04:20,730 --> 00:04:25,530
I can also still successfully log into my server.

94
00:04:25,530 --> 00:04:27,750
Again, keep in mind that we don't have this feature route

95
00:04:27,750 --> 00:04:28,980
hooked up just yet.

96
00:04:28,980 --> 00:04:32,490
I think that that would be a fantastic place to work on next

97
00:04:32,490 --> 00:04:34,680
considering as to how our sign-in component right now

98
00:04:34,680 --> 00:04:36,720
is looking pretty darn good.

99
00:04:36,720 --> 00:04:38,970
So let's get continued in the next section.

100
00:04:38,970 --> 00:04:39,920
I'll see you there.