1 00:00:00,930 --> 00:00:02,730 Instructor: We've now got our header component 2 00:00:02,730 --> 00:00:05,010 put together and it's always displayed inside 3 00:00:05,010 --> 00:00:06,543 of our app component. 4 00:00:08,250 --> 00:00:11,670 Right now we have this kind of placeholder 5 00:00:11,670 --> 00:00:14,100 for the text sign in inside of our header 6 00:00:14,100 --> 00:00:15,840 but we don't only have any route to handle it. 7 00:00:15,840 --> 00:00:17,790 We don't have any component to handle the form. 8 00:00:17,790 --> 00:00:19,350 So let's continue with some of this kind 9 00:00:19,350 --> 00:00:23,520 of early scaffolding our application out by just placing 10 00:00:23,520 --> 00:00:26,340 or creating a scaffold for our sign in form 11 00:00:26,340 --> 00:00:28,380 and make sure that we have the ability to navigate 12 00:00:28,380 --> 00:00:30,513 between it and our root route. 13 00:00:31,650 --> 00:00:33,570 So the first thing we'll do is create our 14 00:00:33,570 --> 00:00:36,030 authentication form itself. 15 00:00:36,030 --> 00:00:39,060 Now this is where we start to get into kind of organization 16 00:00:39,060 --> 00:00:41,850 of components inside of our project directory 17 00:00:41,850 --> 00:00:44,280 and all the content up to this point, we've always 18 00:00:44,280 --> 00:00:47,160 had a rather flat application structure where all 19 00:00:47,160 --> 00:00:48,720 of our different components just lived 20 00:00:48,720 --> 00:00:51,300 inside this component's folder. 21 00:00:51,300 --> 00:00:52,530 Starting now we're gonna start 22 00:00:52,530 --> 00:00:54,210 to do a little bit more organization 23 00:00:54,210 --> 00:00:57,540 of our code, and so any components having to do strictly 24 00:00:57,540 --> 00:00:59,149 with authentication, I'm gonna place 25 00:00:59,149 --> 00:01:04,149 in a new folder inside of components called simply auth. 26 00:01:04,709 --> 00:01:07,080 So I'm gonna make a new folder called auth, short 27 00:01:07,080 --> 00:01:11,070 for authentication of course, and then inside of here 28 00:01:11,070 --> 00:01:14,400 because it is a component related to authentication 29 00:01:14,400 --> 00:01:17,763 I'll place my sign in dot J S. 30 00:01:19,080 --> 00:01:22,353 So now I've got components auth sign in. 31 00:01:23,670 --> 00:01:24,503 Very good. 32 00:01:25,710 --> 00:01:27,210 So this sign in component right here 33 00:01:27,210 --> 00:01:30,570 is intended to be the actual sign in form, 34 00:01:30,570 --> 00:01:32,640 so it should present to the user. 35 00:01:32,640 --> 00:01:34,290 Let's look at our mock up, 36 00:01:34,290 --> 00:01:37,110 should present to the user an email 37 00:01:37,110 --> 00:01:40,800 and a password field, and also the submit button. 38 00:01:40,800 --> 00:01:42,360 So this is nothing too crazy yet. 39 00:01:42,360 --> 00:01:43,410 We've definitely done plenty 40 00:01:43,410 --> 00:01:45,360 of forms with Redux form before. 41 00:01:45,360 --> 00:01:47,820 So let's start to again, put it together 42 00:01:47,820 --> 00:01:50,796 some of the scaffolding, put in our inputs 43 00:01:50,796 --> 00:01:53,730 and labels for the email and password 44 00:01:53,730 --> 00:01:55,620 and probably hook up the button right here 45 00:01:55,620 --> 00:01:58,053 for handling the submit event as well. 46 00:01:58,950 --> 00:02:00,630 Now that we're starting to deal with forms 47 00:02:00,630 --> 00:02:02,790 this is definitely where we're going to make use 48 00:02:02,790 --> 00:02:06,150 of Redux form the library as well. 49 00:02:06,150 --> 00:02:09,120 We haven't installed Redux form as a dependency just yet. 50 00:02:09,120 --> 00:02:12,240 That means it'd probably be a great time to start right now. 51 00:02:12,240 --> 00:02:16,710 So over in my terminal, I'm going to stop my server 52 00:02:16,710 --> 00:02:20,730 from running by hitting control C and then 53 00:02:20,730 --> 00:02:25,730 I'll NPM install Redux form and I'll make sure to save it 54 00:02:26,010 --> 00:02:27,690 as a dependency as well. 55 00:02:27,690 --> 00:02:30,240 Remember the dash dash save is really important because 56 00:02:30,240 --> 00:02:33,150 if you don't include the dash dash save, it won't be saved 57 00:02:33,150 --> 00:02:34,980 to your package dot json directory. 58 00:02:34,980 --> 00:02:37,005 That means that any other engineers in the future 59 00:02:37,005 --> 00:02:39,930 who are trying to check out your work, whenever they do 60 00:02:39,930 --> 00:02:43,473 that NPM install, they won't install Redux form. 61 00:02:45,210 --> 00:02:48,780 So I've got my dependency installed, I'll kick my server 62 00:02:48,780 --> 00:02:50,493 back up with NPM start. 63 00:02:53,460 --> 00:02:54,293 Very good. 64 00:02:55,260 --> 00:02:58,080 So back in the signing component again, we're gonna do some 65 00:02:58,080 --> 00:03:02,373 of that probably very familiar boiler plate. 66 00:03:03,630 --> 00:03:07,350 We'll import react at the top, pull 67 00:03:07,350 --> 00:03:12,310 off our component and we'll make our sign in 68 00:03:14,880 --> 00:03:16,800 that extends component. 69 00:03:16,800 --> 00:03:18,723 We'll place our render method in here. 70 00:03:20,940 --> 00:03:23,700 And before putting anything inside the render method 71 00:03:23,700 --> 00:03:27,810 remember how Redux form works with Redux form, 72 00:03:27,810 --> 00:03:29,768 when we export our component, we wrap it 73 00:03:29,768 --> 00:03:33,120 with the Redux form helper, and inside that helper is where 74 00:03:33,120 --> 00:03:35,310 we place our field definitions. 75 00:03:35,310 --> 00:03:38,250 And so whenever I know that I'm making a form component 76 00:03:38,250 --> 00:03:40,320 or something that's supposed to have some fields to it 77 00:03:40,320 --> 00:03:42,643 I find that it's generally pretty helpful to first 78 00:03:42,643 --> 00:03:45,390 put together the helper at the bottom 79 00:03:45,390 --> 00:03:47,490 and declare the fields that I need just so I know 80 00:03:47,490 --> 00:03:49,680 that the property names are very consistent 81 00:03:49,680 --> 00:03:52,110 inside the component as well. 82 00:03:52,110 --> 00:03:54,090 So without putting anything in the render just yet 83 00:03:54,090 --> 00:03:59,070 I'm going to export default redux form 84 00:03:59,070 --> 00:04:01,680 and remember the signature of this, the first argument 85 00:04:01,680 --> 00:04:04,620 or the first set of perens is for configuration 86 00:04:04,620 --> 00:04:06,720 and then the second set of perens is 87 00:04:06,720 --> 00:04:09,723 for our actual component, which is sign in. 88 00:04:13,290 --> 00:04:17,760 Cool, let's do the options for the form itself. 89 00:04:17,760 --> 00:04:21,990 We pass an option, or excuse me, an object that has 90 00:04:21,990 --> 00:04:24,210 two required properties to it. 91 00:04:24,210 --> 00:04:28,260 The first required property is the form, and this just 92 00:04:28,260 --> 00:04:33,000 needs to be the actual name of the form where 93 00:04:33,000 --> 00:04:35,070 Redux form is gonna place these property names 94 00:04:35,070 --> 00:04:37,650 inside our application state. 95 00:04:37,650 --> 00:04:39,660 So a very reasonable name for the form. 96 00:04:39,660 --> 00:04:40,893 It'll be just sign in. 97 00:04:42,510 --> 00:04:45,300 And then we need to declare the fields on here as well. 98 00:04:45,300 --> 00:04:48,240 So these are the exact property names that we 99 00:04:48,240 --> 00:04:51,240 want these fields to produce. 100 00:04:51,240 --> 00:04:53,460 Now this is where it starts to get really critical 101 00:04:53,460 --> 00:04:55,350 that we keep our terminology 102 00:04:55,350 --> 00:04:59,280 for email versus username consistent. 103 00:04:59,280 --> 00:05:00,570 You might think to yourself, oh yeah 104 00:05:00,570 --> 00:05:02,790 I always sign in using a username, right? 105 00:05:02,790 --> 00:05:05,640 So we might want to call these fields something 106 00:05:05,640 --> 00:05:07,680 like username and password 107 00:05:07,680 --> 00:05:09,780 but that's not really how we set up the server. 108 00:05:09,780 --> 00:05:10,707 Our server is currently set 109 00:05:10,707 --> 00:05:13,890 up to accept specifically an email field 110 00:05:13,890 --> 00:05:15,240 and so it's very important 111 00:05:15,240 --> 00:05:17,370 that we keep all these property names consistent 112 00:05:17,370 --> 00:05:18,540 across our code base. 113 00:05:18,540 --> 00:05:20,700 Otherwise I guarantee we're just gonna 114 00:05:20,700 --> 00:05:22,890 start confusing ourselves. 115 00:05:22,890 --> 00:05:24,660 So the two fields that we care about 116 00:05:24,660 --> 00:05:27,850 for our sign-in component are going to be the email 117 00:05:29,040 --> 00:05:30,033 and the password. 118 00:05:31,440 --> 00:05:33,720 Those are the only two fields that we are 119 00:05:33,720 --> 00:05:36,020 going to worry about inside of this component. 120 00:05:38,880 --> 00:05:41,430 Now that we've got our redux form helper put together 121 00:05:41,430 --> 00:05:44,400 and keep in mind that we have not done two very 122 00:05:44,400 --> 00:05:47,430 important things just yet, we need to first import redux 123 00:05:47,430 --> 00:05:50,520 form at the top, and we also have not yet hooked 124 00:05:50,520 --> 00:05:52,680 up redux form as a reducer. 125 00:05:52,680 --> 00:05:54,690 Remember, that's how Redux form works. 126 00:05:54,690 --> 00:05:57,930 It provides its own reducer inside of our application 127 00:05:57,930 --> 00:06:00,720 and so we need to make sure that we hook that up as well. 128 00:06:00,720 --> 00:06:03,120 Let's do the simpler of the two first. 129 00:06:03,120 --> 00:06:05,520 We'll hook up or excuse me, we'll import redux form 130 00:06:05,520 --> 00:06:07,350 inside this component. 131 00:06:07,350 --> 00:06:12,350 So at the top I'll import redux form from redux form. 132 00:06:17,820 --> 00:06:21,540 So now we've got that property available inside this file. 133 00:06:21,540 --> 00:06:26,280 Next we'll do the little bit more esoteric one, I suppose 134 00:06:26,280 --> 00:06:27,480 or the more confusing one. 135 00:06:27,480 --> 00:06:30,123 We need to hook up the redux form reducer as well. 136 00:06:31,410 --> 00:06:36,410 So inside of my reducer's index file, I'll import 137 00:06:38,340 --> 00:06:43,340 my reducer from redux form and then I'm going 138 00:06:44,340 --> 00:06:47,770 to replace this dummy reducer that's already in here 139 00:06:48,750 --> 00:06:53,750 with the form reducer. 140 00:06:54,150 --> 00:06:55,380 So the form property 141 00:06:55,380 --> 00:06:59,403 of state is going to be produced by my redux form reducer. 142 00:07:00,960 --> 00:07:02,640 Now having a reducer floating 143 00:07:02,640 --> 00:07:05,370 around my index JS reducers file 144 00:07:05,370 --> 00:07:06,960 having a reducer named reducer is 145 00:07:06,960 --> 00:07:08,550 like pretty darn confusing. 146 00:07:08,550 --> 00:07:13,550 So a little bit of ES six trick here is I can actually 147 00:07:13,680 --> 00:07:16,710 rename my imports when I bring them into this file. 148 00:07:16,710 --> 00:07:19,059 To do so, I can say reducer 149 00:07:19,059 --> 00:07:23,520 as form and that will re-declare this variable, 150 00:07:23,520 --> 00:07:25,440 this reducer variable right here 151 00:07:25,440 --> 00:07:28,530 as the variable form instead, 152 00:07:28,530 --> 00:07:30,090 that means that instead 153 00:07:30,090 --> 00:07:33,720 of putting reducer down here, I can place form. 154 00:07:33,720 --> 00:07:37,740 And now we're in a fantastic spot where our key 155 00:07:37,740 --> 00:07:40,500 and our value are the exact same property names 156 00:07:40,500 --> 00:07:43,080 or the exact same variable names, excuse me 157 00:07:43,080 --> 00:07:44,460 which means we can use another bit 158 00:07:44,460 --> 00:07:46,590 of ES six magic where we just reduce it 159 00:07:46,590 --> 00:07:50,253 down to form inside the curly braces. 160 00:07:51,150 --> 00:07:53,310 Because we have form inside the curly braces, 161 00:07:53,310 --> 00:07:56,310 this will automatically get expanded out by ES six 162 00:07:56,310 --> 00:08:00,270 to be form colon form automatically for us. 163 00:08:00,270 --> 00:08:01,833 Nice little helper. 164 00:08:02,670 --> 00:08:04,320 Just a reminder that we can use that all 165 00:08:04,320 --> 00:08:07,713 over the place and we certainly will inside this section. 166 00:08:09,660 --> 00:08:11,190 All right, one last thing that I want 167 00:08:11,190 --> 00:08:12,360 to do inside this component 168 00:08:12,360 --> 00:08:13,890 and then we'll take a little break. 169 00:08:13,890 --> 00:08:15,120 Let's just put a little bit 170 00:08:15,120 --> 00:08:17,793 of the form together inside of here. 171 00:08:18,660 --> 00:08:19,680 So there's gonna be a decent amount 172 00:08:19,680 --> 00:08:22,320 of jsx that we need to put together. 173 00:08:22,320 --> 00:08:25,330 At the very top level we'll place our form 174 00:08:27,450 --> 00:08:30,600 and we're going to have two different fields in here, 175 00:08:30,600 --> 00:08:33,332 our email and our password fields. 176 00:08:35,429 --> 00:08:36,870 I'm going to group each of these 177 00:08:36,870 --> 00:08:41,870 by using the field set component or element. 178 00:08:42,059 --> 00:08:44,550 The field set element is kinda semantically, 179 00:08:44,550 --> 00:08:46,740 hey, here's a group of input 180 00:08:46,740 --> 00:08:49,803 or label elements that are kind of grouped together. 181 00:08:51,330 --> 00:08:54,360 I'm also gonna add a class name on here, a form group. 182 00:08:54,360 --> 00:08:55,380 Again, this is a lot 183 00:08:55,380 --> 00:08:59,013 of bootstrap styling that's coming across right here. 184 00:09:00,150 --> 00:09:03,130 Then inside of the field set, we can add our label 185 00:09:05,250 --> 00:09:10,250 of email and our input with a class name of form control. 186 00:09:13,170 --> 00:09:15,543 Again, another bootstrap class. 187 00:09:16,920 --> 00:09:20,250 So I've got one field set complete here for my email field. 188 00:09:20,250 --> 00:09:21,970 I'm going to copy 189 00:09:23,010 --> 00:09:27,090 and paste it right below for my password field as well 190 00:09:27,090 --> 00:09:32,090 so I can just rename email as password. 191 00:09:32,220 --> 00:09:34,290 Then one last element that I want on here 192 00:09:34,290 --> 00:09:35,973 I wanna just put on my button. 193 00:09:37,290 --> 00:09:41,640 It's action whenever someone clicks it should be to submit 194 00:09:41,640 --> 00:09:46,210 and we'll give it a class name of button, button primary 195 00:09:49,110 --> 00:09:53,010 and it should contain the text sign in. 196 00:09:53,010 --> 00:09:54,540 Again, keeping really consistent 197 00:09:54,540 --> 00:09:56,760 with the sign in terminology here. 198 00:09:56,760 --> 00:09:59,250 Of course, since this sign in right here, 199 00:09:59,250 --> 00:10:02,190 the sign in phrase is something that our users see 200 00:10:02,190 --> 00:10:05,130 it would be pretty reasonable to decide to rename this 201 00:10:05,130 --> 00:10:06,960 to login or something like that 202 00:10:06,960 --> 00:10:09,360 if we wanna have very specific product messaging. 203 00:10:09,360 --> 00:10:11,640 But as far as any code goes, again 204 00:10:11,640 --> 00:10:14,790 we really want to keep consistent terminology of login 205 00:10:14,790 --> 00:10:17,940 or excuse me, sign in, instead of using login all 206 00:10:17,940 --> 00:10:20,190 over the place as well and mixing the two up. 207 00:10:21,600 --> 00:10:23,370 All right, so this is looking pretty good. 208 00:10:23,370 --> 00:10:25,560 We did miss one little thing in here. 209 00:10:25,560 --> 00:10:29,010 I placed the JSX tag without ever placing return statement. 210 00:10:29,010 --> 00:10:31,530 Remember, we must always return our jsx 211 00:10:31,530 --> 00:10:35,790 from a component and just for some code organization, 212 00:10:35,790 --> 00:10:39,273 I'm gonna wrap this with a set of parens as well, like so. 213 00:10:44,910 --> 00:10:47,640 So we're going to return this big old blob 214 00:10:47,640 --> 00:10:48,993 of jsx right here. 215 00:10:50,160 --> 00:10:52,200 Now the sign in component is not tied 216 00:10:52,200 --> 00:10:53,910 up to our router at all just yet. 217 00:10:53,910 --> 00:10:55,950 Let's take care of that inside the next section. 218 00:10:55,950 --> 00:10:57,240 We also need to make sure 219 00:10:57,240 --> 00:10:59,850 that our inputs are being controlled by redux form. 220 00:10:59,850 --> 00:11:01,980 So let's also do that next section. 221 00:11:01,980 --> 00:11:02,930 I'll see you there.