1 00:00:00,960 --> 00:00:03,630 -: Our application is starting to look pretty darn fantastic 2 00:00:03,630 --> 00:00:04,463 at this point. 3 00:00:04,463 --> 00:00:05,730 We have the ability to sign in 4 00:00:05,730 --> 00:00:08,010 and sign out of our application. 5 00:00:08,010 --> 00:00:10,590 We've also got, again, a nice landing page here 6 00:00:10,590 --> 00:00:13,050 for when a user successfully signs out. 7 00:00:13,050 --> 00:00:14,520 The next logical place to go to 8 00:00:14,520 --> 00:00:17,010 is gonna be the signup functionality. 9 00:00:17,010 --> 00:00:18,330 After we cover sign up, 10 00:00:18,330 --> 00:00:21,570 we'll then work on authenticating for individual routes. 11 00:00:21,570 --> 00:00:24,570 So to make sure a user can only visit certain routes 12 00:00:24,570 --> 00:00:26,850 after they've been successfully authenticated. 13 00:00:26,850 --> 00:00:29,400 And then we'll also investigate how to 14 00:00:29,400 --> 00:00:31,840 make an authenticated request to our backend 15 00:00:32,860 --> 00:00:35,910 to fetch some protected resources on the backend as well. 16 00:00:35,910 --> 00:00:37,380 So in this section, let's continue 17 00:00:37,380 --> 00:00:39,450 by working on the sign up component. 18 00:00:39,450 --> 00:00:42,840 We'll first work on putting together our actual component 19 00:00:42,840 --> 00:00:44,340 for sign up, and then we'll work 20 00:00:44,340 --> 00:00:47,310 on an action creator to actually take the email 21 00:00:47,310 --> 00:00:48,990 and password that a user wants to sign up 22 00:00:48,990 --> 00:00:53,100 with and post it to our backend to make an account for them. 23 00:00:53,100 --> 00:00:55,020 So let's flip over to our code editor 24 00:00:55,020 --> 00:00:57,720 and following a very similar kind of nomenclature 25 00:00:57,720 --> 00:00:59,220 for our existing files that we have 26 00:00:59,220 --> 00:01:00,930 inside of our project already, 27 00:01:00,930 --> 00:01:02,760 I'm gonna create a file inside 28 00:01:02,760 --> 00:01:05,400 of our components off directory. 29 00:01:05,400 --> 00:01:09,513 And as you might guess, I'm gonna call it signup.js. 30 00:01:11,190 --> 00:01:13,790 So thinking back to the wire frames for our project, 31 00:01:14,867 --> 00:01:17,610 signup.js is gonna be very similar to sign in. 32 00:01:17,610 --> 00:01:20,130 We need to collect an email, a password 33 00:01:20,130 --> 00:01:22,770 and a password confirmation from our user. 34 00:01:22,770 --> 00:01:25,380 And then once we have the info, we can go ahead and send it 35 00:01:25,380 --> 00:01:28,740 off to the backend and try to create an account with this. 36 00:01:28,740 --> 00:01:30,090 So let's give a shot at this. 37 00:01:30,090 --> 00:01:32,820 We'll definitely need to use Redux form. 38 00:01:32,820 --> 00:01:35,070 We'll probably be making a class-based component here 39 00:01:35,070 --> 00:01:36,000 because it's gonna have a lot 40 00:01:36,000 --> 00:01:38,130 of logic and a lot of helper methods 41 00:01:38,130 --> 00:01:40,140 even though it isn't gonna have any local state 42 00:01:40,140 --> 00:01:41,790 or anything like that. 43 00:01:41,790 --> 00:01:46,790 So we'll start by importing React and component at the top. 44 00:01:47,370 --> 00:01:49,080 From React, like I said, 45 00:01:49,080 --> 00:01:51,963 we'll certainly need to make use of Redux form. 46 00:01:55,080 --> 00:01:55,920 And finally, 47 00:01:55,920 --> 00:01:59,745 we'll likely also need some action creators in here 48 00:01:59,745 --> 00:02:02,370 as well to handle actually creating an account for our user. 49 00:02:02,370 --> 00:02:06,120 So I'm gonna import all of our actions 50 00:02:06,120 --> 00:02:07,893 from our actions directory. 51 00:02:10,139 --> 00:02:11,790 Now we'll put together some scaffolding 52 00:02:11,790 --> 00:02:14,043 for our class sign up. 53 00:02:17,610 --> 00:02:19,080 We'll define our render method. 54 00:02:19,080 --> 00:02:19,913 I hope you're getting used 55 00:02:19,913 --> 00:02:21,910 to all this boiler plate stuff here guys, 56 00:02:23,790 --> 00:02:26,730 a lot of typing for the boiler plate in these projects. 57 00:02:26,730 --> 00:02:29,730 If you use a code editor that has support for snippets 58 00:02:29,730 --> 00:02:31,200 Adam certainly does. 59 00:02:31,200 --> 00:02:34,692 Very helpful to have, just to kind of put this default 60 00:02:34,692 --> 00:02:37,650 or boiler plate code for all of your components down, 61 00:02:37,650 --> 00:02:40,260 really handy to save some time there. 62 00:02:40,260 --> 00:02:43,500 So by default, inside of this render method, 63 00:02:43,500 --> 00:02:48,500 I'm just gonna return a div that simply says, 64 00:02:48,600 --> 00:02:50,070 sign up for right now. 65 00:02:50,070 --> 00:02:51,780 And we're gonna do that just so we can make sure 66 00:02:51,780 --> 00:02:54,450 that we can see the component inside of our application, 67 00:02:54,450 --> 00:02:56,220 just to test to make sure everything's working fine 68 00:02:56,220 --> 00:02:57,840 to start. 69 00:02:57,840 --> 00:03:02,583 Then at the bottom, I'm going to export default. 70 00:03:03,930 --> 00:03:06,240 Excuse me, export, not expect. 71 00:03:06,240 --> 00:03:07,863 We'll export default sign up. 72 00:03:08,940 --> 00:03:10,080 Now let's make sure that we can actually 73 00:03:10,080 --> 00:03:12,480 visit this component inside of our router. 74 00:03:12,480 --> 00:03:15,633 So I'm gonna go to the top level index.js file. 75 00:03:16,830 --> 00:03:20,280 We currently are importing sign in and sign out. 76 00:03:20,280 --> 00:03:23,680 So we'll also have to import sign up 77 00:03:28,860 --> 00:03:31,590 And then I'll add a route for this as well. 78 00:03:31,590 --> 00:03:33,630 And as we've discussed many times already, 79 00:03:33,630 --> 00:03:35,190 the route is gonna follow the same type 80 00:03:35,190 --> 00:03:37,230 of nomenclature as sign in and sign out. 81 00:03:37,230 --> 00:03:41,130 So I'm gonna add simply sign up and when a user goes 82 00:03:41,130 --> 00:03:44,493 to that route, they should see the sign up component. 83 00:03:45,690 --> 00:03:47,280 So let's save this. 84 00:03:47,280 --> 00:03:48,633 Let's refresh. 85 00:03:49,890 --> 00:03:51,120 I can go to sign up. 86 00:03:51,120 --> 00:03:52,590 I'm on the sign up route right now 87 00:03:52,590 --> 00:03:54,480 and you can see the text, sign up, 88 00:03:54,480 --> 00:03:56,370 which is coming from our component. 89 00:03:56,370 --> 00:04:01,370 Cool. So very simple, very gentle, kind of mild steps here 90 00:04:01,950 --> 00:04:04,896 on the first take, this is probably gonna end up 91 00:04:04,896 --> 00:04:06,510 being by far the most complicated component 92 00:04:06,510 --> 00:04:08,190 inside the entire application. 93 00:04:08,190 --> 00:04:10,170 So let's continue on doing some work 94 00:04:10,170 --> 00:04:11,570 on this in the next section.