1
00:00:00,570 --> 00:00:01,403
-: In the last section

2
00:00:01,403 --> 00:00:03,900
we started putting together our sign in form.

3
00:00:03,900 --> 00:00:05,190
And as you might guess

4
00:00:05,190 --> 00:00:06,990
the purpose of the sign in form is just to

5
00:00:06,990 --> 00:00:08,940
handle collecting a user's email

6
00:00:08,940 --> 00:00:11,850
and password and then presumably submitting it off

7
00:00:11,850 --> 00:00:15,300
to an action creator that's going to verify the email

8
00:00:15,300 --> 00:00:17,300
and password is correct in some fashion.

9
00:00:18,810 --> 00:00:21,030
We're still not done with the sign in form yet though,

10
00:00:21,030 --> 00:00:22,440
we can't see it on the screen

11
00:00:22,440 --> 00:00:24,030
and we've also not yet hooked it up

12
00:00:24,030 --> 00:00:26,370
to redux form a hundred percent.

13
00:00:26,370 --> 00:00:29,460
We did hook up the redux form helper, which gives us access

14
00:00:29,460 --> 00:00:33,180
to the properties like this, dot props, dot fields

15
00:00:33,180 --> 00:00:36,420
dot email, and password, but we haven't actually wired those

16
00:00:36,420 --> 00:00:38,640
up to the input fields just yet.

17
00:00:38,640 --> 00:00:40,020
That's a really easy thing to get through.

18
00:00:40,020 --> 00:00:41,790
So let's do that now.

19
00:00:41,790 --> 00:00:45,420
Inside of the render method, we're gonna pull off

20
00:00:45,420 --> 00:00:48,020
a couple different properties from the props object.

21
00:00:48,930 --> 00:00:50,610
First is handle submit.

22
00:00:50,610 --> 00:00:51,540
Remember, this is one

23
00:00:51,540 --> 00:00:54,240
of the helpers that comes in from Redux form

24
00:00:54,240 --> 00:00:58,560
and we'll also pull off the fields email and password.

25
00:00:58,560 --> 00:01:00,330
And these are all properties they're coming

26
00:01:00,330 --> 00:01:03,570
from this dot props.

27
00:01:03,570 --> 00:01:06,210
Again, remember, handle submit comes from Redux form

28
00:01:06,210 --> 00:01:08,550
as does email and password.

29
00:01:08,550 --> 00:01:11,340
These two field names right here are exactly email

30
00:01:11,340 --> 00:01:13,440
and password because those are the field names

31
00:01:13,440 --> 00:01:17,103
that we declared down at the configuration at the bottom.

32
00:01:18,030 --> 00:01:22,110
We can now hook up email and password to our two inputs.

33
00:01:22,110 --> 00:01:26,490
So the first input right here is gonna take the email helper

34
00:01:26,490 --> 00:01:30,303
and the second input is gonna take the password helper.

35
00:01:32,220 --> 00:01:36,090
Finally, our form needs to listen to the on submit event.

36
00:01:36,090 --> 00:01:39,120
So whenever a user say hits the enter key

37
00:01:39,120 --> 00:01:42,330
or they click on the submit button to actually sign in

38
00:01:42,330 --> 00:01:44,280
we wanna make sure that the form gets submitted

39
00:01:44,280 --> 00:01:46,860
and we handle that case appropriately.

40
00:01:46,860 --> 00:01:48,450
So to listen to the submit event

41
00:01:48,450 --> 00:01:51,333
on the form will add on submit.

42
00:01:52,410 --> 00:01:55,560
In this case we'll run the handle, submit helper

43
00:01:55,560 --> 00:02:00,000
from redux form, and we pass to that our callback

44
00:02:00,000 --> 00:02:01,890
or the function that we want to be called

45
00:02:01,890 --> 00:02:05,130
with the finalized form properties.

46
00:02:05,130 --> 00:02:07,290
So we'll create a new helper

47
00:02:07,290 --> 00:02:12,060
and we'll probably call it this.handle form submit.

48
00:02:12,060 --> 00:02:16,440
And because we're handling handing a callback function off

49
00:02:16,440 --> 00:02:18,093
we need to bind this.

50
00:02:20,100 --> 00:02:22,890
Now we still need to declare this helper right here

51
00:02:22,890 --> 00:02:24,900
this.handle form submit.

52
00:02:24,900 --> 00:02:29,283
Let's do that really quick as handle form submit.

53
00:02:31,890 --> 00:02:34,260
This form helper will be called

54
00:02:34,260 --> 00:02:37,353
with the finalized email and password from the form.

55
00:02:38,520 --> 00:02:40,500
And for now we'll just console log out

56
00:02:40,500 --> 00:02:44,850
email and password just to test things out for now.

57
00:02:44,850 --> 00:02:46,650
And then we'll figure out, you know

58
00:02:46,650 --> 00:02:51,600
basically need to do something to log user in

59
00:02:51,600 --> 00:02:53,400
and that's something that we'll do, we'll come back to

60
00:02:53,400 --> 00:02:55,443
and revisit at some point in the future.

61
00:02:56,370 --> 00:02:59,430
So our form is now looking like, you know, pretty good

62
00:02:59,430 --> 00:03:00,330
pretty good shape.

63
00:03:00,330 --> 00:03:02,100
It definitely should show a form on the screen.

64
00:03:02,100 --> 00:03:03,930
We should definitely be able to enter the email

65
00:03:03,930 --> 00:03:05,760
and password, submit it

66
00:03:05,760 --> 00:03:08,550
and see a console log pop back up to us.

67
00:03:08,550 --> 00:03:10,110
And in here we haven't, you know

68
00:03:10,110 --> 00:03:12,390
mostly reviewed so far, so not too bad.

69
00:03:12,390 --> 00:03:14,610
Really happy with where we're at so far.

70
00:03:14,610 --> 00:03:16,860
Still one pretty big deficiency though,

71
00:03:16,860 --> 00:03:19,950
we can't see this form on the screen at all.

72
00:03:19,950 --> 00:03:21,240
So we still need to hook it up

73
00:03:21,240 --> 00:03:24,930
to our redux router and give it a very clear route

74
00:03:24,930 --> 00:03:28,143
that the user can go to to see this sign in form.

75
00:03:29,340 --> 00:03:31,050
So to add it to redux router

76
00:03:31,050 --> 00:03:34,230
we're gonna go back to our top level index.js,

77
00:03:34,230 --> 00:03:37,053
where we've already declared our app route.

78
00:03:38,160 --> 00:03:42,360
And inside of here we're just gonna add another route

79
00:03:42,360 --> 00:03:44,640
to show that sign in form.

80
00:03:44,640 --> 00:03:49,640
So I'll import sign in from components auth sign in

81
00:03:54,360 --> 00:03:59,360
and then whenever a user visits the route slash sign in

82
00:03:59,940 --> 00:04:02,370
we wanna show that sign in component.

83
00:04:02,370 --> 00:04:06,420
So whenever they go to route sign in

84
00:04:06,420 --> 00:04:08,853
show the component sign in.

85
00:04:10,830 --> 00:04:13,110
Now this should be in a pretty testable state.

86
00:04:13,110 --> 00:04:15,430
I'm gonna flip back over to Chrome

87
00:04:16,320 --> 00:04:21,063
I'll refresh and by hand I'll navigate to sign in.

88
00:04:25,350 --> 00:04:27,240
And you'll notice that we still don't get anything

89
00:04:27,240 --> 00:04:29,610
on the screen, but we also don't have any errors.

90
00:04:29,610 --> 00:04:31,740
So there is one step that we still not done

91
00:04:31,740 --> 00:04:33,600
and it's something that I guarantee you you'll

92
00:04:33,600 --> 00:04:37,110
make this oversight all the gosh darn time.

93
00:04:37,110 --> 00:04:39,990
Whenever we nest a route like this,

94
00:04:39,990 --> 00:04:43,260
the parent route is provided the nested route

95
00:04:43,260 --> 00:04:45,270
as props.children.

96
00:04:45,270 --> 00:04:47,280
So our app component right now is not

97
00:04:47,280 --> 00:04:50,520
showing any child components that need to get rendered.

98
00:04:50,520 --> 00:04:52,830
So to get everything working, we need to go back

99
00:04:52,830 --> 00:04:57,780
into app js and we are going to replace react simple starter

100
00:04:57,780 --> 00:05:02,370
with this.props.children, flip back over

101
00:05:02,370 --> 00:05:06,960
to the browser, re render, and boom, there's our form.

102
00:05:06,960 --> 00:05:08,160
We should now be able to enter

103
00:05:08,160 --> 00:05:12,963
in something like test 123 at example.com and some password.

104
00:05:15,930 --> 00:05:17,160
Hit the submit button

105
00:05:17,160 --> 00:05:20,940
and see the properties right here in our console log.

106
00:05:20,940 --> 00:05:24,750
Perfect. So this is a pretty good spot, right for right now.

107
00:05:24,750 --> 00:05:26,490
So at this point everything we've done has been

108
00:05:26,490 --> 00:05:28,230
pretty straightforward, like, you know

109
00:05:28,230 --> 00:05:31,650
react redux form kind of stuff, you know, still in that kind

110
00:05:31,650 --> 00:05:33,780
of safe realm so far, we haven't really touched a lot

111
00:05:33,780 --> 00:05:37,260
of very authentication, heavy logic just yet.

112
00:05:37,260 --> 00:05:39,330
So in the next section we're gonna start focusing

113
00:05:39,330 --> 00:05:42,360
in on exactly how does authentication flow

114
00:05:42,360 --> 00:05:43,380
within our application.

115
00:05:43,380 --> 00:05:46,020
For example, when we want to do something to

116
00:05:46,020 --> 00:05:48,600
sign our user in, what exactly is the method

117
00:05:48,600 --> 00:05:50,730
that we're gonna use to sign a user in?

118
00:05:50,730 --> 00:05:52,650
You know, what's that actually gonna look like?

119
00:05:52,650 --> 00:05:54,210
So let's talk about that, you know,

120
00:05:54,210 --> 00:05:55,920
the big challenge in this application

121
00:05:55,920 --> 00:05:58,180
starting the next section. I'll see you there