1
00:00:00,110 --> 00:00:00,490
Okay.

2
00:00:00,500 --> 00:00:02,390
And once we're done with the register page.

3
00:00:02,420 --> 00:00:04,640
Up next, let's work on the logging page.

4
00:00:04,640 --> 00:00:10,360
And since we already created a form component, this should be much faster.

5
00:00:10,370 --> 00:00:12,230
First, let's start with spring cleaning.

6
00:00:12,230 --> 00:00:15,950
So again, I want to remove all of the tabs because it's getting really busy.

7
00:00:15,950 --> 00:00:21,710
I also want to collapse all of the folders and all that and we're looking for the pages.

8
00:00:21,710 --> 00:00:24,650
And more specifically, we want to grab the login one.

9
00:00:24,650 --> 00:00:29,560
So in here in the browser we can simply navigate this is what we should see.

10
00:00:29,570 --> 00:00:33,470
We're looking for two things from the components logo and form row.

11
00:00:33,470 --> 00:00:40,670
Again, I'll try to use the auto import, but since we also need a wrapper, I think that's the one

12
00:00:40,670 --> 00:00:45,740
I'll copy and paste as side note can actually copy and paste both of them.

13
00:00:45,740 --> 00:00:48,830
But like I said, I'll try to rely on auto import.

14
00:00:48,830 --> 00:00:52,310
So log in one over here, copy and paste the same wrapper.

15
00:00:52,610 --> 00:00:55,130
And then when it comes to return.

16
00:00:56,040 --> 00:00:57,300
Instead of the div.

17
00:00:57,540 --> 00:00:59,310
We're going to go here with a wrapper.

18
00:01:00,280 --> 00:01:02,230
And then inside of the wrapper.

19
00:01:02,230 --> 00:01:03,800
Let's start with the form.

20
00:01:03,820 --> 00:01:04,840
That's our component.

21
00:01:04,870 --> 00:01:08,020
No action here, but we do want to add a class name.

22
00:01:08,020 --> 00:01:12,880
This is a global class, a form one, and then let's go with login one.

23
00:01:13,470 --> 00:01:17,910
As you can imagine, pretty much most of it is going to be exactly the same.

24
00:01:18,060 --> 00:01:23,310
The difference, of course, is that in this case, we're working on the login page and right above

25
00:01:23,310 --> 00:01:25,770
the heading for let's add a logo.

26
00:01:26,520 --> 00:01:29,500
A logo here, and for some reason it's not importing.

27
00:01:29,500 --> 00:01:30,430
That's not nice.

28
00:01:30,460 --> 00:01:36,640
Notice if we all have some kind of error inside of the page, which in this case React is complaining

29
00:01:36,640 --> 00:01:39,980
that, well, it doesn't have access to the logo.

30
00:01:40,000 --> 00:01:41,690
We'll have this screen again.

31
00:01:41,710 --> 00:01:45,220
The error that we currently have is not 404.

32
00:01:45,220 --> 00:01:51,310
And since we have the check in the error page and since we only return the not found if the error is

33
00:01:51,310 --> 00:01:55,240
404, therefore we have right now the something went wrong.

34
00:01:55,240 --> 00:01:59,170
And notice again it's a reference error logo is not defined.

35
00:01:59,200 --> 00:02:00,370
So you know what?

36
00:02:00,990 --> 00:02:06,180
I'm not going to waste my time too much and I'm just going to import.

37
00:02:06,420 --> 00:02:08,759
So I'm just going to copy and paste.

38
00:02:08,789 --> 00:02:09,479
Yep.

39
00:02:10,380 --> 00:02:11,640
Everything is correct.

40
00:02:11,640 --> 00:02:16,100
And now let's set up a few form rows right after the heading four.

41
00:02:16,110 --> 00:02:18,120
So we'll go over here with form row.

42
00:02:18,240 --> 00:02:21,750
Then type in this case is going to be equal to an email.

43
00:02:22,480 --> 00:02:27,350
Then we want to go name and we'll set it equal to email as well.

44
00:02:27,370 --> 00:02:32,400
And then we have default value and this one will be again equal to that.

45
00:02:32,410 --> 00:02:34,210
John At gmail.com.

46
00:02:34,240 --> 00:02:34,600
So.

47
00:02:34,600 --> 00:02:38,620
John At gmail.com.

48
00:02:38,800 --> 00:02:40,390
Let's close this component.

49
00:02:40,660 --> 00:02:45,100
Then we want to go with another form row and this is going to be for the password.

50
00:02:46,450 --> 00:02:48,550
So let's copy this one.

51
00:02:50,290 --> 00:02:51,850
And let's just change these values.

52
00:02:51,850 --> 00:02:54,730
So instead of email, it's going to be password.

53
00:02:55,810 --> 00:02:59,260
Then name is going to be equal also to a password.

54
00:03:01,740 --> 00:03:08,940
And as far as default value, we're going to go with secret one, two, three, and then we'll have

55
00:03:08,940 --> 00:03:10,020
two buttons.

56
00:03:10,630 --> 00:03:15,610
One is going to be for submit and one is going to be for the demo user.

57
00:03:15,610 --> 00:03:22,810
So eventually there's also going to be functionality to just navigate around the application without

58
00:03:22,840 --> 00:03:25,330
the register or login.

59
00:03:25,330 --> 00:03:27,670
So for that we want to go with button.

60
00:03:28,570 --> 00:03:31,780
Who out here type is equal to a submit.

61
00:03:31,900 --> 00:03:38,410
Then as far as the classes, we're going to go with BTN and then BTN hyphen block and then inside of

62
00:03:38,410 --> 00:03:40,810
the button we're just going to type submit.

63
00:03:40,900 --> 00:03:43,090
Then let's copy and paste.

64
00:03:43,120 --> 00:03:46,030
Now, this is not going to be type submit.

65
00:03:46,060 --> 00:03:49,180
Make sure you set this equal to a button.

66
00:03:49,480 --> 00:03:52,570
Then BTN and BTN block stays the same.

67
00:03:52,570 --> 00:03:54,220
We just need to change the text.

68
00:03:54,220 --> 00:03:57,520
So in this case, we'll say explore the app.

69
00:03:57,550 --> 00:03:58,570
Let's save this.

70
00:03:58,720 --> 00:03:59,860
Okay, beautiful.

71
00:03:59,870 --> 00:04:04,420
And then at the very end we'll have the same.

72
00:04:05,170 --> 00:04:09,910
Paragraph like we have in the register, and I think it's just going to be faster if I navigate back

73
00:04:09,910 --> 00:04:10,450
here.

74
00:04:11,140 --> 00:04:12,010
Copy.

75
00:04:12,040 --> 00:04:15,160
And of course, we'll just have to change the values.

76
00:04:15,250 --> 00:04:18,730
So in this case, I'm going to say not a member yet.

77
00:04:19,690 --> 00:04:22,150
So let me just remove the first one.

78
00:04:23,000 --> 00:04:25,490
And I'm going to add here yet.

79
00:04:26,190 --> 00:04:29,250
And of course, we want to navigate to a register.

80
00:04:30,970 --> 00:04:32,590
And change this text as well.

81
00:04:32,590 --> 00:04:35,800
So in this case, we'll set it equal to register.

82
00:04:35,890 --> 00:04:43,510
And with this in place, we are ready to set up the optional CSS for the login and register page.