1
00:00:01,050 --> 00:00:02,950
‫Over the next couple of lectures

2
00:00:02,950 --> 00:00:06,940
‫we will add the login functionality to our website.

3
00:00:06,940 --> 00:00:07,940
‫And in this lecture,

4
00:00:07,940 --> 00:00:10,420
‫we will start by actually rendering out

5
00:00:10,420 --> 00:00:12,610
‫the login screen to make it easy

6
00:00:12,610 --> 00:00:14,083
‫for users to login.

7
00:00:15,880 --> 00:00:19,620
‫Once more, I actually want this to be a challenge for you

8
00:00:19,620 --> 00:00:22,810
‫so that you can actually practice some of the skills

9
00:00:22,810 --> 00:00:24,890
‫that you've been learning.

10
00:00:24,890 --> 00:00:28,230
‫What I want you to do is to create a

11
00:00:28,230 --> 00:00:29,463
‫slash login route.

12
00:00:31,550 --> 00:00:33,240
‫Then create a controller,

13
00:00:33,240 --> 00:00:34,930
‫and, of course, a template.

14
00:00:34,930 --> 00:00:36,720
‫And that template is really easy.

15
00:00:36,720 --> 00:00:39,610
‫It's just some static html and we don't need

16
00:00:39,610 --> 00:00:41,783
‫to pass any variables into it.

17
00:00:43,030 --> 00:00:45,050
‫There's a template for that, actually,

18
00:00:45,050 --> 00:00:47,375
‫here in the template folder.

19
00:00:47,375 --> 00:00:50,623
‫So that should be, then, really easy for you to complete.

20
00:00:52,211 --> 00:00:55,133
‫{\an8}So pause this video and come back once you're ready.

21
00:00:58,580 --> 00:00:59,850
‫{\an8}Okay, welcome back.

22
00:00:59,850 --> 00:01:04,300
‫I hope you completed this challenge successfully.

23
00:01:04,300 --> 00:01:05,963
‫So here is my take on it.

24
00:01:07,080 --> 00:01:09,670
‫Router dot get

25
00:01:09,670 --> 00:01:11,360
‫the route is

26
00:01:11,360 --> 00:01:12,380
‫slash login

27
00:01:14,661 --> 00:01:17,223
‫and then we use controller dot get

28
00:01:19,430 --> 00:01:20,650
‫login form.

29
00:01:20,650 --> 00:01:23,783
‫So that's the route handler that I'm going to create next.

30
00:01:29,820 --> 00:01:33,150
‫Export dot get login form

31
00:01:35,740 --> 00:01:36,680
‫response

32
00:01:39,470 --> 00:01:41,540
‫and here we don't need any more than just the

33
00:01:41,540 --> 00:01:43,590
‫request and response.

34
00:01:43,590 --> 00:01:45,100
‫Actually up here I'm seeing

35
00:01:45,100 --> 00:01:46,563
‫that we're missing the next.

36
00:01:48,190 --> 00:01:51,360
‫Always, when we have async functions wrapped in

37
00:01:51,360 --> 00:01:53,833
‫catchAsync we should always specify next.

38
00:01:55,950 --> 00:01:57,980
‫But here, all we really need to do

39
00:01:57,980 --> 00:02:01,270
‫is to now render a login template.

40
00:02:01,270 --> 00:02:03,950
‫So we didn't create that template just yet.

41
00:02:03,950 --> 00:02:06,320
‫But, it's going to be called login.

42
00:02:06,320 --> 00:02:09,240
‫So, let's say res dot status

43
00:02:10,280 --> 00:02:11,113
‫200,

44
00:02:13,390 --> 00:02:14,940
‫render template called

45
00:02:16,060 --> 00:02:17,640
‫login.

46
00:02:17,640 --> 00:02:19,790
‫Then as with all our other pages,

47
00:02:19,790 --> 00:02:23,090
‫we actually want to give it a custom title.

48
00:02:23,090 --> 00:02:26,010
‫For that we've always passed in an object

49
00:02:26,010 --> 00:02:28,240
‫with the title property.

50
00:02:28,240 --> 00:02:29,090
‫Right?

51
00:02:29,090 --> 00:02:32,010
‫So the base template will then read that title

52
00:02:32,010 --> 00:02:34,543
‫and put it in the title html element.

53
00:02:35,581 --> 00:02:37,480
‫In this case, the title is simply

54
00:02:38,770 --> 00:02:43,770
‫log into your account.

55
00:02:43,890 --> 00:02:46,690
‫And that's it for the route handler.

56
00:02:46,690 --> 00:02:47,963
‫Now let's go 'head,

57
00:02:48,820 --> 00:02:51,520
‫open the login template,

58
00:02:51,520 --> 00:02:53,230
‫select all,
‫copy all,

59
00:02:53,230 --> 00:02:57,663
‫close it and create the new view in here.

60
00:02:59,860 --> 00:03:02,923
‫Call, of course, login dot pug.

61
00:03:04,480 --> 00:03:06,380
‫Then, pasting that code here,

62
00:03:06,380 --> 00:03:09,900
‫and now comes again that trick where we extend

63
00:03:09,900 --> 00:03:11,063
‫our base template.

64
00:03:14,740 --> 00:03:19,740
‫This one extends to base file extend don't forget

65
00:03:20,120 --> 00:03:22,660
‫that in here we need to create a block with the

66
00:03:22,660 --> 00:03:25,443
‫exact same name as we have in the base file.

67
00:03:26,950 --> 00:03:28,163
‫So that is content.

68
00:03:29,610 --> 00:03:33,130
‫And with this we're actually done,

69
00:03:33,130 --> 00:03:33,963
‫I believe.

70
00:03:36,000 --> 00:03:38,770
‫Of course, we need to indent to make it a child

71
00:03:38,770 --> 00:03:39,913
‫off this block.

72
00:03:40,760 --> 00:03:42,233
‫But, that's actually it.

73
00:03:43,602 --> 00:03:46,110
‫Now, just one more thing that we need to do

74
00:03:46,110 --> 00:03:49,160
‫is to actually set a link to the login page

75
00:03:49,160 --> 00:03:52,163
‫so that we can actually access that.

76
00:03:54,462 --> 00:03:57,480
‫Right now, the login and sign up buttons are actually

77
00:03:57,480 --> 00:03:59,393
‫using the button element.

78
00:04:00,630 --> 00:04:03,260
‫But like this, we cannot really specify

79
00:04:03,260 --> 00:04:05,110
‫the href attribute.

80
00:04:05,110 --> 00:04:09,360
‫So let's change them actually to a real link.

81
00:04:09,360 --> 00:04:12,763
‫And in here, we can specify the href.

82
00:04:16,290 --> 00:04:20,543
‫So this one simply points to login.

83
00:04:21,970 --> 00:04:23,400
‫And a second one here,

84
00:04:23,400 --> 00:04:25,540
‫the sign up we will actually not implement

85
00:04:27,210 --> 00:04:29,080
‫so you can implement this on your own

86
00:04:29,080 --> 00:04:30,660
‫if you feel like it.

87
00:04:30,660 --> 00:04:33,190
‫So basically a sign up form.

88
00:04:33,190 --> 00:04:34,490
‫But, since all that,

89
00:04:34,490 --> 00:04:37,440
‫so the whole process of signing up is going to be

90
00:04:37,440 --> 00:04:39,220
‫very similar to logging in,

91
00:04:39,220 --> 00:04:42,130
‫I decided not to include that here in this section

92
00:04:42,130 --> 00:04:44,800
‫because that would just be a lot of duplicate content

93
00:04:44,800 --> 00:04:47,663
‫and I don't want to make the course unnecessary long.

94
00:04:50,240 --> 00:04:52,480
‫Give this a safe,

95
00:04:52,480 --> 00:04:55,730
‫I don't know if this now restarts the server,

96
00:04:55,730 --> 00:04:56,730
‫actually it doesn't,

97
00:04:57,630 --> 00:05:00,113
‫so let's save one of these java script files.

98
00:05:01,930 --> 00:05:02,763
‫Now

99
00:05:03,980 --> 00:05:06,470
‫this is our reference website.

100
00:05:06,470 --> 00:05:08,450
‫Remember, that's what we want,

101
00:05:08,450 --> 00:05:09,357
‫is this one.

102
00:05:11,030 --> 00:05:12,890
‫Let's come to all tours

103
00:05:12,890 --> 00:05:16,320
‫and now let's try our login route.

104
00:05:16,320 --> 00:05:19,550
‫And, indeed, here goes our form.

105
00:05:19,550 --> 00:05:20,383
‫Great.

106
00:05:21,650 --> 00:05:23,950
‫Now here we can put in some email

107
00:05:23,950 --> 00:05:25,730
‫let's say admin

108
00:05:25,730 --> 00:05:29,140
‫dot naders

109
00:05:29,140 --> 00:05:30,100
‫dot io.

110
00:05:30,100 --> 00:05:32,100
‫And you see that it nicely formats

111
00:05:32,100 --> 00:05:34,790
‫this input here whether the email address

112
00:05:34,790 --> 00:05:36,860
‫is actually valid or not.

113
00:05:36,860 --> 00:05:40,770
‫For example, if I don't have the extension here correct,

114
00:05:40,770 --> 00:05:43,100
‫then it will become orange

115
00:05:43,100 --> 00:05:45,580
‫telling me that something is wrong.

116
00:05:45,580 --> 00:05:47,730
‫And the same thing for the password.

117
00:05:47,730 --> 00:05:50,400
‫As long as I have less than eight characters,

118
00:05:50,400 --> 00:05:52,200
‫this will always be red,

119
00:05:52,200 --> 00:05:54,423
‫basically telling me that there's an error.

120
00:05:56,520 --> 00:05:58,260
‫That now that I have eight characters,

121
00:05:58,260 --> 00:05:59,690
‫it turns green.

122
00:05:59,690 --> 00:06:01,970
‫And if you're interested in how to do this

123
00:06:01,970 --> 00:06:04,020
‫kind of magic with css,

124
00:06:04,020 --> 00:06:07,670
‫then please feel free to check out the css file that I coded

125
00:06:07,670 --> 00:06:09,390
‫just for this course.

126
00:06:09,390 --> 00:06:12,270
‫Anyways, of course, clicking this button here now

127
00:06:12,270 --> 00:06:15,200
‫does absolutely anything, right?

128
00:06:15,200 --> 00:06:17,390
‫So in the next video, we will actually really

129
00:06:17,390 --> 00:06:20,390
‫start to implement the login functionality

130
00:06:20,390 --> 00:06:23,570
‫actually by doing a request to our api end point

131
00:06:23,570 --> 00:06:24,823
‫that we already created.