1
00:00:00,900 --> 00:00:02,009
Instructor: Before we get too deep

2
00:00:02,009 --> 00:00:03,240
on our signup component,

3
00:00:03,240 --> 00:00:04,410
let's take a second to

4
00:00:04,410 --> 00:00:05,910
kind of do a little bit of design and think

5
00:00:05,910 --> 00:00:09,480
through about exactly what this component needs to do.

6
00:00:09,480 --> 00:00:12,060
In our signing component, the only validation or kind

7
00:00:12,060 --> 00:00:15,090
of feedback we gave to the user was an error message.

8
00:00:15,090 --> 00:00:17,610
If the server turned an error to us.

9
00:00:17,610 --> 00:00:20,460
This time around, however, in our signup component,

10
00:00:20,460 --> 00:00:22,320
there's a little bit more authentication

11
00:00:22,320 --> 00:00:23,610
we need to be aware of.

12
00:00:23,610 --> 00:00:24,900
So let's take a look at a diagram

13
00:00:24,900 --> 00:00:26,800
that's gonna help us out a little bit.

14
00:00:28,890 --> 00:00:31,200
So this is a diagram that models some

15
00:00:31,200 --> 00:00:32,910
of the different authentication logic

16
00:00:32,910 --> 00:00:34,410
or strategies that we need to be aware

17
00:00:34,410 --> 00:00:35,670
of inside this application.

18
00:00:35,670 --> 00:00:37,500
Or excuse me, this component.

19
00:00:37,500 --> 00:00:39,960
So when a user enters email password

20
00:00:39,960 --> 00:00:41,670
and password confirmation.

21
00:00:41,670 --> 00:00:42,930
And so the key here is that there is

22
00:00:42,930 --> 00:00:45,900
both a password and password confirmation.

23
00:00:45,900 --> 00:00:46,950
Now you might be thinking,

24
00:00:46,950 --> 00:00:49,440
Okay it's gonna be kinda the same deal

25
00:00:49,440 --> 00:00:50,790
as with a sign in component.

26
00:00:50,790 --> 00:00:52,530
We want to send this to the back end.

27
00:00:52,530 --> 00:00:54,210
The back end's gonna authenticate this

28
00:00:54,210 --> 00:00:56,460
or kind of validate it in some fashion

29
00:00:56,460 --> 00:00:58,960
and then send back an error message if one exists.

30
00:01:00,030 --> 00:01:02,040
Think about if you really think about it though,

31
00:01:02,040 --> 00:01:04,170
we don't really need to rely

32
00:01:04,170 --> 00:01:06,210
upon our server for checking to make sure

33
00:01:06,210 --> 00:01:09,390
that the password and password confirmations match.

34
00:01:09,390 --> 00:01:12,060
That's really a client side piece of authentication.

35
00:01:12,060 --> 00:01:14,700
That's something that we can just very quickly give feedback

36
00:01:14,700 --> 00:01:18,510
to the user of, Hey, your passwords don't match here.

37
00:01:18,510 --> 00:01:19,980
You need to double check your password

38
00:01:19,980 --> 00:01:23,670
before we're gonna try to post this to, to the API server.

39
00:01:23,670 --> 00:01:26,700
So this entire layer right here is gonna be simply

40
00:01:26,700 --> 00:01:28,980
client side authentication.

41
00:01:28,980 --> 00:01:31,920
So on the client, we're going to make a quick check

42
00:01:31,920 --> 00:01:35,280
and make sure that the two passwords are matching.

43
00:01:35,280 --> 00:01:36,930
If the two passwords are not matching,

44
00:01:36,930 --> 00:01:40,050
of course we're gonna show an immediate error to the user

45
00:01:40,050 --> 00:01:43,083
and not send an API request to create a new account.

46
00:01:44,520 --> 00:01:47,310
If the two passwords do match, however,

47
00:01:47,310 --> 00:01:49,860
that's when we're gonna go down this case of okay

48
00:01:49,860 --> 00:01:51,810
time to actually reach out to our API server,

49
00:01:51,810 --> 00:01:55,350
make a request, and try to create a new account.

50
00:01:55,350 --> 00:01:59,400
And then if that request is successful, great.

51
00:01:59,400 --> 00:02:01,650
We've got a new account made, we can save the token

52
00:02:01,650 --> 00:02:04,770
we get back, we can redirect the user to our feature route,

53
00:02:04,770 --> 00:02:07,830
and we can change our authentication state to true.

54
00:02:07,830 --> 00:02:10,620
Otherwise, just like in the sign-in component,

55
00:02:10,620 --> 00:02:11,820
if we get an error message back

56
00:02:11,820 --> 00:02:14,310
we need to display that error to the user.

57
00:02:14,310 --> 00:02:16,440
And so we've really got two tiers

58
00:02:16,440 --> 00:02:19,500
of kind of validation or error checking logic here.

59
00:02:19,500 --> 00:02:21,720
We've got one tier on the client side

60
00:02:21,720 --> 00:02:25,200
and we've got another tier on the server side as well.

61
00:02:25,200 --> 00:02:27,900
Now we definitely could have put all this logic

62
00:02:27,900 --> 00:02:30,450
onto just the server, but eh, you know

63
00:02:30,450 --> 00:02:32,820
it's really nice to have some immediate client

64
00:02:32,820 --> 00:02:35,400
side validation because it's always instantaneous

65
00:02:35,400 --> 00:02:38,313
and the user gets that feedback right away.

66
00:02:39,660 --> 00:02:40,890
One other thing to be aware of

67
00:02:40,890 --> 00:02:43,260
is that this time around on our

68
00:02:43,260 --> 00:02:47,280
on our server side authentication, we definitely have a kind

69
00:02:47,280 --> 00:02:50,760
of different classes of error messages this time around.

70
00:02:50,760 --> 00:02:52,650
We might get an error message where, hey

71
00:02:52,650 --> 00:02:54,450
you didn't provide email or password

72
00:02:54,450 --> 00:02:56,880
or we might get a validation message

73
00:02:56,880 --> 00:03:00,660
like the email that you're trying to use already is in use.

74
00:03:00,660 --> 00:03:02,700
So perhaps if someone's trying to make an account

75
00:03:02,700 --> 00:03:03,780
with a duplicate email.

76
00:03:03,780 --> 00:03:05,910
So we're definitely get some different types

77
00:03:05,910 --> 00:03:07,620
of validation messages back

78
00:03:07,620 --> 00:03:10,140
from the server this time around as well.

79
00:03:10,140 --> 00:03:13,350
So with this better kind of thought process

80
00:03:13,350 --> 00:03:14,970
on how we're gonna accomplish our validation,

81
00:03:14,970 --> 00:03:18,360
let's get to work on our sign up component.

82
00:03:18,360 --> 00:03:20,250
So in the last section we put together some

83
00:03:20,250 --> 00:03:22,080
of the very scaffolding

84
00:03:22,080 --> 00:03:23,910
just get something to show up on the screen.

85
00:03:23,910 --> 00:03:26,160
So let's continue on this work for right now.

86
00:03:27,720 --> 00:03:29,970
We definitely know that we're going to need reduxForm

87
00:03:29,970 --> 00:03:32,040
and we've already imported that at the top.

88
00:03:32,040 --> 00:03:33,930
So let's get started by making use

89
00:03:33,930 --> 00:03:38,010
of our reduxForm helper by declaring a new form to use.

90
00:03:38,010 --> 00:03:39,310
So we'll say reduxForm

91
00:03:40,590 --> 00:03:43,980
and then we'll wrap sign up separately and inside

92
00:03:43,980 --> 00:03:48,600
of reduxForm we'll place our form name of sign up.

93
00:03:48,600 --> 00:03:51,480
And then we're also gonna need our list of fields here.

94
00:03:51,480 --> 00:03:54,530
So our list of fields are gonna be our email...

95
00:03:55,500 --> 00:03:56,333
Oops.

96
00:03:57,480 --> 00:04:01,320
In an array, email, password,

97
00:04:01,320 --> 00:04:03,850
and I'm just gonna call the last word one password

98
00:04:04,950 --> 00:04:06,423
confirm, like so.

99
00:04:08,100 --> 00:04:09,090
Okay, so this looks good.

100
00:04:09,090 --> 00:04:10,980
This is definitely enough to get started on our form

101
00:04:10,980 --> 00:04:12,120
kind of get something on the page

102
00:04:12,120 --> 00:04:14,493
something we can kind of type into so to speak.

103
00:04:15,420 --> 00:04:16,740
So inside of our render method,

104
00:04:16,740 --> 00:04:19,113
let's start working on the actual form element.

105
00:04:20,279 --> 00:04:25,280
We're gonna pull off our handle submit helper,

106
00:04:25,350 --> 00:04:27,780
and then each of our fields;

107
00:04:27,780 --> 00:04:32,430
email, password, password confirm.

108
00:04:32,430 --> 00:04:35,163
And these are all gonna come from this.props.

109
00:04:36,990 --> 00:04:39,240
It's getting to be kind of a long line there.

110
00:04:40,500 --> 00:04:42,630
Then we'll replace the div that we have right now

111
00:04:42,630 --> 00:04:44,163
with a form tag,

112
00:04:48,030 --> 00:04:48,863
like so.

113
00:04:50,760 --> 00:04:52,140
And now we can go through each

114
00:04:52,140 --> 00:04:53,490
of the different fields that we're gonna have

115
00:04:53,490 --> 00:04:57,630
inside of our component, inside of the signup form.

116
00:04:57,630 --> 00:05:01,383
So we're gonna make a number of fieldset tags.

117
00:05:03,450 --> 00:05:05,290
It's gonna be a form-group

118
00:05:07,910 --> 00:05:09,150
fieldset.

119
00:05:09,150 --> 00:05:11,750
And then inside of each of these we'll have a label.

120
00:05:13,320 --> 00:05:16,083
And the first one is gonna be our email.

121
00:05:18,060 --> 00:05:19,473
We'll have an input.

122
00:05:22,080 --> 00:05:24,000
The type for this one is just gonna stay as email.

123
00:05:24,000 --> 00:05:25,470
We don't need to type on this one

124
00:05:25,470 --> 00:05:28,740
but we will give it a form control class name.

125
00:05:28,740 --> 00:05:31,170
And as usual, this is a bootstrap class name.

126
00:05:31,170 --> 00:05:34,260
Just something to make it look a little bit nicer.

127
00:05:34,260 --> 00:05:36,540
And then we're going to give control over

128
00:05:36,540 --> 00:05:41,433
to this input to reduxForm using the email prop helper.

129
00:05:43,710 --> 00:05:48,600
Now we can just duplicate this three times, like so.

130
00:05:48,600 --> 00:05:51,063
The second time we'll use it for our password.

131
00:05:52,530 --> 00:05:53,550
And so we're gonna change

132
00:05:53,550 --> 00:05:57,030
both the label and the password helper.

133
00:05:57,030 --> 00:05:58,440
And then on the last one,

134
00:05:58,440 --> 00:06:01,980
we'll change it to confirm password.

135
00:06:01,980 --> 00:06:03,870
And rather than the email helper here

136
00:06:03,870 --> 00:06:07,443
we're also gonna take this to be password confirm as well.

137
00:06:08,340 --> 00:06:10,290
Okay, let's give this a shout out in the browser.

138
00:06:10,290 --> 00:06:12,480
We now have three field sets.

139
00:06:12,480 --> 00:06:15,453
Each one of them controls a different field from our form.

140
00:06:16,350 --> 00:06:18,720
Let's flip back over, refresh the page.

141
00:06:18,720 --> 00:06:20,310
And it looks like we've got email,

142
00:06:20,310 --> 00:06:22,050
password, and confirm password.

143
00:06:22,050 --> 00:06:23,550
And they're all pretty nicely styled on here.

144
00:06:23,550 --> 00:06:25,320
I like how they're styled here.

145
00:06:25,320 --> 00:06:26,700
So this is looking pretty good.

146
00:06:26,700 --> 00:06:28,710
Let's go ahead and put on the button

147
00:06:28,710 --> 00:06:29,700
and then we'll probably go ahead

148
00:06:29,700 --> 00:06:31,890
and take a quick break before we start addressing some

149
00:06:31,890 --> 00:06:36,240
of the authentication logic or validation logic, excuse me.

150
00:06:36,240 --> 00:06:38,430
So after all the different fields that we have

151
00:06:38,430 --> 00:06:41,970
we'll place a button when someone clicks on it

152
00:06:41,970 --> 00:06:43,817
it should submit the form

153
00:06:43,817 --> 00:06:46,020
and we'll make sure it's styled like a button.

154
00:06:46,020 --> 00:06:48,183
So it'll have btn btn-primary.

155
00:06:50,430 --> 00:06:54,303
And of course very classic, sign up.

156
00:06:56,792 --> 00:06:58,350
And now we've got our button here

157
00:06:58,350 --> 00:07:00,350
and presumably when we put something in,

158
00:07:01,560 --> 00:07:04,590
we click sign up and that should go ahead and

159
00:07:04,590 --> 00:07:06,960
post our information to our back end, send a request

160
00:07:06,960 --> 00:07:08,730
to the server, and actually create our account.

161
00:07:08,730 --> 00:07:10,440
So we haven't put in any of that logic yet

162
00:07:10,440 --> 00:07:13,170
so that's something we'll take care of really quickly.

163
00:07:13,170 --> 00:07:15,210
Let's also make sure both of our passwords

164
00:07:15,210 --> 00:07:16,860
again are in plain text here.

165
00:07:16,860 --> 00:07:18,870
Let's add on the correct types there as well

166
00:07:18,870 --> 00:07:20,670
just to make sure that we don't --

167
00:07:20,670 --> 00:07:22,890
aren't leaking these plain text characters so

168
00:07:22,890 --> 00:07:26,070
that anyone who's looking over our user's shoulder can see.

169
00:07:26,070 --> 00:07:27,660
So on both of our password inputs

170
00:07:27,660 --> 00:07:30,063
we'll add on a type password.

171
00:07:34,980 --> 00:07:37,380
And now if we refresh in the browser

172
00:07:37,380 --> 00:07:39,270
and now we can't see the password text

173
00:07:39,270 --> 00:07:40,410
which is just what we wanted.

174
00:07:40,410 --> 00:07:42,210
So that's looking pretty good.

175
00:07:42,210 --> 00:07:43,680
Okay, so this is good first steps.

176
00:07:43,680 --> 00:07:46,050
We've got kinda the very basic scaffolding

177
00:07:46,050 --> 00:07:47,880
of our form put down right here.

178
00:07:47,880 --> 00:07:50,940
We have not handled anything about submitting the form

179
00:07:50,940 --> 00:07:52,950
and we've also not handled anything just yet

180
00:07:52,950 --> 00:07:55,830
around validation of the form contents.

181
00:07:55,830 --> 00:07:57,480
So are both things we're gonna have to take care

182
00:07:57,480 --> 00:07:59,220
of inside the next section.

183
00:07:59,220 --> 00:08:00,450
Let's take care of it there.

184
00:08:00,450 --> 00:08:01,683
I'll see you in a few.