1 00:00:01,340 --> 00:00:04,920 In this video we're going to start working on our sign up form right here. 2 00:00:04,940 --> 00:00:07,970 We're not going to worry about the header at the top right now we're really just going to worry about 3 00:00:07,970 --> 00:00:09,980 the form right there. 4 00:00:09,980 --> 00:00:16,460 I want to be able to see this component anytime I go to a year l like ticketing dot Dev slash off slash 5 00:00:16,520 --> 00:00:17,360 sign up. 6 00:00:17,360 --> 00:00:22,100 So if we go to that route right there I want to see these sign up component up here on the screen so 7 00:00:22,100 --> 00:00:24,450 to do so we will go back over to our editor. 8 00:00:24,620 --> 00:00:30,800 We'll find our pages directory and we'll create a new folder inside they're called off and then inside 9 00:00:30,800 --> 00:00:37,980 there will make a new file called sign up dot J.S. so by defining a auth folder and putting a sign up 10 00:00:37,980 --> 00:00:45,540 file inside there that is going to define the root of all flash sign up inside of our next application. 11 00:00:45,560 --> 00:00:49,790 Now all we have to do is define and export a react component from this file. 12 00:00:49,940 --> 00:00:54,830 And then if we go to our flash sign up we will see the contents of that component appear on the screen. 13 00:00:54,910 --> 00:00:56,450 So let's try it out right now. 14 00:00:56,450 --> 00:01:05,840 Inside of sign up J us I will export defaults and I will return inside of here a form and for right 15 00:01:05,840 --> 00:01:12,500 now I'm just going to put an H1 inside that says Sign up we're gonna come back in just a moment and 16 00:01:12,500 --> 00:01:15,530 add in some buttons and inputs and labels and whatnot. 17 00:01:15,530 --> 00:01:20,990 But let's just say this right now and do a quick test back inside of our browser leaflet makeover and 18 00:01:20,990 --> 00:01:27,270 I'm going to try to navigate to ticketing that Dev off slash sign up and there we go. 19 00:01:27,340 --> 00:01:33,130 So again anytime we want to have a nested root of sorts all we do is create a folder and place our components 20 00:01:33,130 --> 00:01:34,410 inside there. 21 00:01:34,420 --> 00:01:36,570 All right let's continue with the form right here. 22 00:01:36,580 --> 00:01:43,290 So like I said we're going to add in a couple of labels inputs and whatnot right after that each one 23 00:01:43,440 --> 00:01:47,100 I'm gonna put in a div with a class name of form and dash group 24 00:01:50,200 --> 00:02:00,170 or then place a label and give it the text email address and then an input with the class name of form 25 00:02:00,230 --> 00:02:04,400 dash control. 26 00:02:04,500 --> 00:02:09,600 So this will show our label and input for the email we want to do something very similar for the password 27 00:02:09,630 --> 00:02:11,610 as well just to save a little bit of time. 28 00:02:11,640 --> 00:02:18,180 I'm going to copy that entire div and pasted underneath itself and I'll change the label to password 29 00:02:19,610 --> 00:02:25,050 and on inputs I'll add in a type to this thing of password just to obfuscate any text that gets typed 30 00:02:25,050 --> 00:02:26,960 inside their. 31 00:02:27,050 --> 00:02:33,040 And then finally after those two divs I'm going to place a button and I'll get this and text like sign 32 00:02:33,040 --> 00:02:41,530 up also get the button a class name of B10 n and dash primary. 33 00:02:41,610 --> 00:02:47,940 All right so that is our sign up form once you've got this all put together we'll save it and then flip 34 00:02:47,940 --> 00:02:51,660 back over and we should see something like this appear on the screen. 35 00:02:51,660 --> 00:02:52,770 Perfect. 36 00:02:52,790 --> 00:02:55,330 You might notice that I've got some icons here on the right hand side. 37 00:02:55,440 --> 00:02:58,640 Those are coming from my password manager that I'm running inside of chrome. 38 00:02:58,830 --> 00:03:04,910 So if you do not see those icons that is 100 percent to be expected do not sweat it all right. 39 00:03:04,920 --> 00:03:07,620 Well now that we've got the basics of this form put together. 40 00:03:07,620 --> 00:03:11,100 Let's take a pause right here and continue adding in some functionality in just a moment.