1 00:00:00,270 --> 00:00:00,720 Excellent. 2 00:00:00,820 --> 00:00:05,700 And once we're done with an harbage, let's do the same thing with the Log-in. 3 00:00:06,210 --> 00:00:11,580 Now, there's is one functionality that is going to be missing in a log-in, not as, of course, the 4 00:00:11,640 --> 00:00:17,700 actual ability to logon because we haven't connected to our authentication provider. 5 00:00:18,120 --> 00:00:22,140 But at least we should display something at the moment. 6 00:00:22,200 --> 00:00:28,230 If I navigate to a log in and of course, we just have a log in page essentially in this video, we'll 7 00:00:28,230 --> 00:00:34,170 fix that where if we navigate to a log and page, I close the sidebar. 8 00:00:34,650 --> 00:00:38,610 I will switch from heading to and I'll use my wrapper again. 9 00:00:39,240 --> 00:00:42,420 So this is my style component with all the styles and all that. 10 00:00:42,900 --> 00:00:46,680 So I would want to return that component instead. 11 00:00:47,190 --> 00:00:51,810 And in here, I'm going to have a div with a class of container. 12 00:00:52,260 --> 00:01:00,420 And then in this container, first I would want to display my image and the image is coming from image. 13 00:01:00,450 --> 00:01:03,890 Jozen, the name is Log-in hyphen I M.G.. 14 00:01:04,520 --> 00:01:05,730 So would go with image. 15 00:01:07,080 --> 00:01:12,630 And then we're gonna have a source, of course, on this case, since I named Log-in, I'm G. 16 00:01:13,230 --> 00:01:15,060 That is the name that I'm providing. 17 00:01:15,360 --> 00:01:19,890 And as far as the alternative text we're gonna go with, get her Buescher. 18 00:01:20,850 --> 00:01:23,040 Let's close out our image. 19 00:01:24,020 --> 00:01:28,510 Also, let's do adding one with a GetUp user. 20 00:01:28,860 --> 00:01:30,480 So that's the text we would want to provide. 21 00:01:30,840 --> 00:01:34,350 And like I said, we're going to add a button in a bottom. 22 00:01:34,920 --> 00:01:41,160 But of course, there are going to be no functionality since we haven't cover D authentication provider 23 00:01:41,160 --> 00:01:41,340 yet. 24 00:01:41,850 --> 00:01:50,220 So right below the one, I'm gonna go with my button and then let's add again a global class. 25 00:01:50,550 --> 00:01:51,770 So we're gonna go with class. 26 00:01:51,780 --> 00:01:55,770 Name is equal to APTN without any functionality. 27 00:01:55,770 --> 00:02:02,080 We're just going to say log in and of course we can click all day long and nothing is happening on. 28 00:02:02,110 --> 00:02:08,480 The last thing that I want to do in this video is to set up the components in a dashboard page. 29 00:02:09,020 --> 00:02:12,570 Again, there's not much to the components at the moment. 30 00:02:12,780 --> 00:02:16,440 It is a far cry of what we're eventually going to have. 31 00:02:16,860 --> 00:02:21,260 But at least I would want to showcase which components we're going to have. 32 00:02:22,220 --> 00:02:26,990 And then one by one, we're going to work on them in order to do that. 33 00:02:27,740 --> 00:02:29,210 I can probably close the logging. 34 00:02:29,540 --> 00:02:30,530 We have the log in page. 35 00:02:30,530 --> 00:02:31,040 Beautiful. 36 00:02:31,610 --> 00:02:33,930 And then we're going to do the same in the dashboard. 37 00:02:34,260 --> 00:02:40,760 However, since it is our big beast, just keep in mind that we'll spend most of the time by setting 38 00:02:40,760 --> 00:02:42,200 up these components one by one. 39 00:02:42,700 --> 00:02:46,800 And I know I covered it before when I talked about the star project. 40 00:02:47,000 --> 00:02:53,840 But like I mentioned before, I'm already importing the components from the components. 41 00:02:54,440 --> 00:03:00,650 So whichever components I would want to export, if you navigate two components and if you go to index, 42 00:03:00,650 --> 00:03:01,010 Jess. 43 00:03:01,490 --> 00:03:05,150 Notice how I'm importing them from those files. 44 00:03:05,690 --> 00:03:09,590 And then I'm just saying that I would want to export them with the same name. 45 00:03:10,460 --> 00:03:19,520 So essentially what that allows us is now a one line of import instead of five, because all I'm saying 46 00:03:19,520 --> 00:03:21,980 is, yeah, navigate your components. 47 00:03:22,280 --> 00:03:29,060 Since I'm using indexed jass, I don't have to have a Ford slash here and then the file name because 48 00:03:29,060 --> 00:03:31,700 by default the index is going to be given. 49 00:03:32,180 --> 00:03:35,980 And then I'm saying, yeah, get info repos, user search and no. 50 00:03:36,530 --> 00:03:40,340 Now of course, our just want to display them one by one. 51 00:03:40,710 --> 00:03:42,440 Again, there's not much to them. 52 00:03:42,800 --> 00:03:47,720 But eventually this is where we're going to have all our components. 53 00:03:48,140 --> 00:03:51,500 So I'll start with a Navar then. 54 00:03:51,530 --> 00:03:53,900 Also our want to display the search. 55 00:03:54,700 --> 00:03:58,460 And by the way, we can do either or if you want. 56 00:03:58,480 --> 00:04:02,870 You can have a closing bracket or you can have it as a self closed. 57 00:04:03,080 --> 00:04:04,040 That is also an option. 58 00:04:04,540 --> 00:04:05,780 Can I have the info? 59 00:04:06,320 --> 00:04:07,880 We're gonna have a user. 60 00:04:08,360 --> 00:04:10,100 So this is where I'll display the card. 61 00:04:10,550 --> 00:04:15,380 This is where will display the repos followers following and all that. 62 00:04:16,250 --> 00:04:20,090 And then, of course, the search one is the one with a search form. 63 00:04:20,540 --> 00:04:23,810 And the last one is going to be repos. 64 00:04:24,260 --> 00:04:28,940 Where we'll display our chart again at the moment is just heading choose with no component. 65 00:04:28,940 --> 00:04:29,540 Search component. 66 00:04:29,570 --> 00:04:31,340 User info and all that. 67 00:04:31,730 --> 00:04:36,860 And starting with the next video, of course, we'll work on them one by one.