1
00:00:00,440 --> 00:00:02,780
And up next, let's work on the Register page.

2
00:00:02,810 --> 00:00:07,010
We're going to start with just the basic setup with one input.

3
00:00:07,040 --> 00:00:09,320
Then we'll create the component.

4
00:00:09,350 --> 00:00:17,090
So later we can quickly set up a bunch of inputs and then we'll return to the register page and essentially

5
00:00:17,090 --> 00:00:18,650
add all of the inputs.

6
00:00:18,680 --> 00:00:24,980
Now, I can tell you right away that there's going to be no functionality yet because in order to.

7
00:00:25,820 --> 00:00:27,200
Send some kind of request.

8
00:00:27,230 --> 00:00:29,450
We need to create the server first.

9
00:00:29,450 --> 00:00:32,420
So for now, let's just navigate back home.

10
00:00:32,420 --> 00:00:38,450
So this is going to be our dashboard, but we're actually looking for the register like so.

11
00:00:38,450 --> 00:00:45,260
So let's go over here, the register page, and like I said, let's just set up the general structure.

12
00:00:45,260 --> 00:00:49,100
So for that we first want to look for our page.

13
00:00:49,160 --> 00:00:51,290
So we're looking for the register one.

14
00:00:51,990 --> 00:00:58,320
As far as the imports, I'm looking for a wrapper and a link, but I think for the link I'll just use

15
00:00:58,320 --> 00:01:00,030
the auto import option.

16
00:01:00,030 --> 00:01:03,960
So let me first go with import then wrapper.

17
00:01:03,960 --> 00:01:06,540
And it's not going to be landing page or error page.

18
00:01:06,540 --> 00:01:11,850
Actually it's going to be register and login page because there are going to be very, very similar.

19
00:01:11,850 --> 00:01:14,730
So again, we're going to go here with the landing one.

20
00:01:15,440 --> 00:01:16,430
Then let's change it.

21
00:01:16,430 --> 00:01:19,760
And now we're looking for the register and login page.

22
00:01:19,760 --> 00:01:21,020
That's the wrapper.

23
00:01:21,230 --> 00:01:25,310
So here in the return, first of all, let's set up the wrapper.

24
00:01:26,060 --> 00:01:30,520
Then we want to go with the form component or I'm sorry, form element.

25
00:01:30,530 --> 00:01:37,640
The reason why I'm saying form component because eventually it will be a form component from React router.

26
00:01:37,640 --> 00:01:41,090
Dom Yep, they have their own form component.

27
00:01:41,210 --> 00:01:44,750
Then instead of the form, let's go here with the logo.

28
00:01:44,780 --> 00:01:47,990
Like I said, I'll try to set up the auto import.

29
00:01:48,020 --> 00:01:50,060
This is what we should see on the screen.

30
00:01:50,180 --> 00:01:54,440
Then let's go with heading for, let's say register.

31
00:01:54,710 --> 00:01:55,700
Okay, awesome.

32
00:01:55,700 --> 00:01:58,190
And then let's create our.

33
00:01:59,020 --> 00:02:00,280
First input.

34
00:02:00,310 --> 00:02:04,990
Now the input is going to be sitting in the form row, so there's going to be additional div with a

35
00:02:04,990 --> 00:02:09,250
class of form row just so we get some margin in the bottom.

36
00:02:09,250 --> 00:02:13,210
So we go here with form row that's a div inside of it.

37
00:02:13,210 --> 00:02:14,950
Let's set up a label.

38
00:02:15,160 --> 00:02:21,310
And as far as the html4, I know that the ID is going to be name, so type over here name.

39
00:02:21,310 --> 00:02:25,390
We do want to add again a global class form label.

40
00:02:26,890 --> 00:02:29,500
And then as far as the value, I'll type over here.

41
00:02:29,530 --> 00:02:30,070
Name.

42
00:02:30,840 --> 00:02:34,860
And if you're not familiar with this attribute, I'll showcase in a second.

43
00:02:34,950 --> 00:02:36,470
Then we want to go with input.

44
00:02:36,480 --> 00:02:38,130
The type will be text.

45
00:02:38,990 --> 00:02:44,600
We also want to set up the idea and like I said, it needs to match whatever we have over here in the

46
00:02:44,750 --> 00:02:45,710
html4.

47
00:02:45,860 --> 00:02:51,590
And basically we'll type name, then we must, must, must, must, must have the name attribute.

48
00:02:51,590 --> 00:02:54,800
And yes, in this case it's going to look funky.

49
00:02:54,830 --> 00:02:56,090
Name is equal to name.

50
00:02:56,090 --> 00:02:56,330
Yep.

51
00:02:56,330 --> 00:02:57,530
That's going to be the case.

52
00:02:57,560 --> 00:03:02,540
You'll see later that of course there's going to be an email and last name and all that.

53
00:03:02,540 --> 00:03:05,240
So of course, in that case it's going to be easier to understand.

54
00:03:05,240 --> 00:03:11,510
But yes, basically we must have the name attribute because this is how we will access the values and

55
00:03:11,510 --> 00:03:14,210
then we need to provide some kind of value.

56
00:03:14,210 --> 00:03:16,310
And in this case, of course it is name.

57
00:03:16,310 --> 00:03:21,590
Then we want to go with class name and we'll set it equal to form hyphen input.

58
00:03:21,590 --> 00:03:25,970
And there are two more attributes we're going to add, but I want to discuss them at the very, very

59
00:03:25,970 --> 00:03:26,330
end.

60
00:03:26,330 --> 00:03:27,800
So for now, let me just save it.

61
00:03:27,800 --> 00:03:33,380
And notice once you click on the label, actually it adds a focus on the input.

62
00:03:33,380 --> 00:03:40,650
And again, this is happening because we have this HTML four and the value is exactly the same as the

63
00:03:40,650 --> 00:03:44,790
ID value in the input and then right after the div.

64
00:03:44,790 --> 00:03:49,350
So don't place it inside of the div right outside of the div we want to go with button.

65
00:03:49,350 --> 00:03:53,850
This is going to be our submit button and therefore type will be equal to submit.

66
00:03:53,940 --> 00:03:58,590
Then class name will be equal to BTN and then BTN block.

67
00:03:59,130 --> 00:04:06,060
As far as the value, let's just say here, submit and then right below it we want to set up a link.

68
00:04:06,630 --> 00:04:08,000
To a login page.

69
00:04:08,010 --> 00:04:10,680
Let's say the user has already registered.

70
00:04:11,600 --> 00:04:17,209
So in that case, he or she just quickly wants to navigate to a login page.

71
00:04:17,209 --> 00:04:17,720
Correct.

72
00:04:17,720 --> 00:04:22,880
And therefore, right after the button, let's go here with the paragraph and we'll say already a member.

73
00:04:25,740 --> 00:04:30,030
And then right below it, we're going to go with our link component.

74
00:04:30,650 --> 00:04:33,590
So let's say link two and where we want to navigate.

75
00:04:33,590 --> 00:04:36,020
Well, let's go to a login page.

76
00:04:36,500 --> 00:04:44,120
Let's add a forward slash login as far as the classes we're going to go with BTN or I'm sorry, no member

77
00:04:44,120 --> 00:04:50,500
BTN, that's the one we'll style in the style component and effectively we'll just type here login.

78
00:04:50,510 --> 00:04:58,820
Now two more attributes I want to add to my input are following default value and required.

79
00:04:58,850 --> 00:05:02,660
Now, as far as default value, eventually we will remove it.

80
00:05:03,050 --> 00:05:09,950
But the reason why I want to use it in the register and login is just going to speed up our development

81
00:05:09,950 --> 00:05:11,030
because remember.

82
00:05:11,570 --> 00:05:18,440
When you have a login and register functionality, you want to test it, of course, somewhat vigorously

83
00:05:18,590 --> 00:05:23,360
and it just saves you time if you already have some default values.

84
00:05:23,360 --> 00:05:25,700
So that way you can right away test for errors.

85
00:05:25,730 --> 00:05:29,630
You can right away test for the success and all that.

86
00:05:29,870 --> 00:05:33,530
This is totally optional if you don't want to do it.

87
00:05:33,620 --> 00:05:35,390
Technically, you don't have to.

88
00:05:35,690 --> 00:05:38,840
I'm just going to write, let's say in here, John.

89
00:05:38,840 --> 00:05:45,740
And as a result, whenever I will need to test whether everything works correctly, I won't have to

90
00:05:45,740 --> 00:05:48,920
type John and last name and email and all that.

91
00:05:48,920 --> 00:05:56,150
And yes, I'll do the same thing in the login as well and maybe in some other components in the dashboard.

92
00:05:56,570 --> 00:06:02,420
Again, the reason why we're doing that, we can definitely speed up the development, but technically

93
00:06:02,420 --> 00:06:03,380
this is optional.

94
00:06:03,380 --> 00:06:06,800
So in this case I'm just going to go with default value and equals to John.

95
00:06:06,800 --> 00:06:10,700
So essentially whatever you type over here will automatically show up.

96
00:06:10,700 --> 00:06:12,690
Now don't worry, of course you can change it.

97
00:06:13,140 --> 00:06:18,480
You can add the characters, you can remove it, so you'll be able to test for errors as well.

98
00:06:18,480 --> 00:06:21,600
But again, there's going to be some default value.

99
00:06:21,600 --> 00:06:29,190
And another attribute I want to use is the required one, which essentially is coming from the HTML.

100
00:06:29,490 --> 00:06:37,260
And basically notice if the input is going to be empty, we won't be even able to submit the form.

101
00:06:37,260 --> 00:06:44,280
And this is going to make sense a little bit later when we start submitting the form values because

102
00:06:44,280 --> 00:06:48,840
we will collect the data using the form data API.

103
00:06:48,870 --> 00:06:51,540
So basically these are not going to be controlled inputs.

104
00:06:52,120 --> 00:06:59,350
Like you're probably used to working because react router dom in the latest version is using form data

105
00:06:59,350 --> 00:07:01,630
API to nicely.

106
00:07:02,280 --> 00:07:03,660
Access those values.

107
00:07:03,660 --> 00:07:06,930
And therefore we need to set up some kind of check.

108
00:07:06,960 --> 00:07:11,610
Now, of course, there's going to be a check for empty values on the server as well.

109
00:07:12,220 --> 00:07:18,790
But if we want to add some front end checks, which is again a typical setup, you have check for empty

110
00:07:18,820 --> 00:07:21,790
values on the front end as well as the server.

111
00:07:22,180 --> 00:07:29,880
And if we don't have the controlled inputs, which we don't, then this is a very, very nifty solution.

112
00:07:29,890 --> 00:07:34,540
Again, we're pretty much checking for empty values using HTML.

113
00:07:34,840 --> 00:07:40,120
So as you can see, there's really no JavaScript logic over here, but I cannot submit the form.

114
00:07:40,150 --> 00:07:41,590
All right, we have this.

115
00:07:41,590 --> 00:07:47,350
Please fill out this field and with this in place we can move on to the next topic.