1
00:00:07,650 --> 00:00:09,690
We're come back in this video.

2
00:00:09,690 --> 00:00:16,460
Let's see how we can register using a form and we can go ahead and then log in also.

3
00:00:16,470 --> 00:00:18,390
So let's get going.

4
00:00:18,900 --> 00:00:26,160
Well, first of all, let's try to log in first because we already have a user in our database, so

5
00:00:26,160 --> 00:00:27,550
let's implement that.

6
00:00:27,570 --> 00:00:30,220
So back to the login templates.

7
00:00:30,240 --> 00:00:37,470
Let me close this once this requests and now let's go to the log in template, which is this one.

8
00:00:37,710 --> 00:00:45,300
So here on the form, we need to provide the action which is logging and the method is post request.

9
00:00:45,450 --> 00:00:51,950
And then on the name we have the properties as a username and then the password as password.

10
00:00:51,960 --> 00:00:57,690
So this names might be the same as the properties inside our model.

11
00:00:57,720 --> 00:01:01,290
Otherwise we are not going to get the actual result.

12
00:01:01,500 --> 00:01:08,340
So here we can go ahead and make a request because we have all the details and inside the server we

13
00:01:08,340 --> 00:01:12,890
are passing those data from a form using this middleware.

14
00:01:12,900 --> 00:01:15,510
So everything is correct now.

15
00:01:15,660 --> 00:01:23,730
So to be able to test it inside the log in here, what we are going to do is that let's just send some

16
00:01:23,730 --> 00:01:28,380
data sets that all to the console that log in success.

17
00:01:29,640 --> 00:01:30,900
Success.

18
00:01:31,500 --> 00:01:36,200
And then we come back to this one to restructure it, to use the front end part.

19
00:01:36,240 --> 00:01:44,350
So back here, the name was Johnny, and then the password was one, two, three, four, five.

20
00:01:44,370 --> 00:01:45,660
So let's get sent.

21
00:01:45,870 --> 00:01:49,870
Now, if we see that we got back the user.

22
00:01:49,890 --> 00:01:55,770
But if I check also my terminal, you can see we have log in success.

23
00:01:55,770 --> 00:01:59,040
Meaning that I was able to log in.

24
00:01:59,160 --> 00:02:01,440
Why are we getting this JSON data?

25
00:02:01,470 --> 00:02:04,030
Because this is how we want it to be.

26
00:02:04,050 --> 00:02:08,430
Because back to our root, you can see that here.

27
00:02:08,639 --> 00:02:12,060
When log in, we are returning this data.

28
00:02:12,360 --> 00:02:18,390
So if you want to return to, let's say a different template like profile, this is how you're going

29
00:02:18,390 --> 00:02:20,560
to do so instead of this one.

30
00:02:20,580 --> 00:02:26,850
This one is for, let's say, API, because this one returns, what, JSON data.

31
00:02:27,690 --> 00:02:31,800
So because we are dealing with the front end, less common, this one.

32
00:02:31,800 --> 00:02:37,810
And now for client side, we want to render a profile page after success.

33
00:02:37,830 --> 00:02:42,000
So down here it means that the login was successful.

34
00:02:42,000 --> 00:02:43,020
So here we go.

35
00:02:43,510 --> 00:02:53,340
Going to make this of red dot red direct and this redirects is a method they pass in the endpoint where

36
00:02:53,340 --> 00:03:01,830
you should go and we want to go to profile page is that always direct always look up for a route is

37
00:03:01,830 --> 00:03:06,930
there any route we select profile which is down here.

38
00:03:06,990 --> 00:03:07,650
Good.

39
00:03:07,890 --> 00:03:11,700
Which is this so and this profile route is rendering the profile.

40
00:03:11,700 --> 00:03:15,890
So let's see if we are going to improve our code a little bit.

41
00:03:15,900 --> 00:03:21,300
So let's refresh it and let's enter Johnny and Password.

42
00:03:21,300 --> 00:03:27,950
One, two, three, four, five and let's hit st a if we see that I got the profile page.

43
00:03:27,960 --> 00:03:36,360
So on the profile page we can make a request to fetch this particular user and place them on the card.

44
00:03:36,660 --> 00:03:37,700
Do we get it?

45
00:03:37,710 --> 00:03:38,310
Yes.

46
00:03:38,310 --> 00:03:40,260
So let's see how you're going to do that one.

47
00:03:40,290 --> 00:03:44,070
So in here, how can we find the user?

48
00:03:44,160 --> 00:03:50,760
So we are waiting to change the path a little bit because you want to find the user using ID.

49
00:03:50,790 --> 00:03:56,820
So in this way we are going to change this 1 to 4 slash colon ID.

50
00:03:56,910 --> 00:04:04,650
So what we are going to do is that when a user log in, it's trying to find this root.

51
00:04:04,650 --> 00:04:08,910
So where we are trying to redirect, yeah, this one.

52
00:04:09,090 --> 00:04:18,130
So for this one we can pass it an ID to the URL so that it will be available inside the browser URL.

53
00:04:18,149 --> 00:04:26,610
So here we go because we need to match the same root as the profile, because for the profile we want

54
00:04:26,610 --> 00:04:27,710
dynamic ID.

55
00:04:27,720 --> 00:04:36,480
So here what we are going to do is after logging in, we are going to send some dynamic ID so I will

56
00:04:36,480 --> 00:04:39,810
use back take and then back tick as that.

57
00:04:39,810 --> 00:04:49,530
And here I'm going to inject some dynamic ID and I can get a user ID from user dot underscore ID if

58
00:04:49,530 --> 00:04:52,620
I check my campus.

59
00:04:52,650 --> 00:04:56,610
This is underscore ID, this what I'm trying to refer to.

60
00:04:56,760 --> 00:05:05,250
So here what we are going to do is that I will use carry bases and then the user found and dot underscore

61
00:05:05,250 --> 00:05:06,240
ID.

62
00:05:06,300 --> 00:05:06,900
Good.

63
00:05:06,900 --> 00:05:09,510
So now everything is correct.

64
00:05:09,510 --> 00:05:13,410
So let's try to log in again and see if is going to redirect.

65
00:05:13,620 --> 00:05:15,900
So let's go to the log in.

66
00:05:15,900 --> 00:05:23,700
And next is the joining and one, two, three, four, five and let's log in and you can see that I

67
00:05:23,700 --> 00:05:30,000
have the template, but I got this one because our style has been changed.

68
00:05:30,000 --> 00:05:31,020
But don't worry about it.

69
00:05:31,080 --> 00:05:35,100
CSS Part of it, the logic is what we want, right?

70
00:05:35,100 --> 00:05:41,010
So now we know that the template has been rendered by the CSS is not working this time around.

71
00:05:41,220 --> 00:05:42,360
Don't worry if it's that.

72
00:05:42,360 --> 00:05:46,410
So how can we pass the data onto this template?

73
00:05:46,440 --> 00:05:54,870
It's pretty simple because now we have an ID inside the profile route so we can go ahead and find the

74
00:05:54,870 --> 00:05:56,400
user by ID.

75
00:05:56,400 --> 00:05:58,920
So here we go find.

76
00:06:00,020 --> 00:06:03,200
Find the user.

77
00:06:04,410 --> 00:06:07,590
By ID and here you go.

78
00:06:07,590 --> 00:06:08,670
Cost.

79
00:06:11,100 --> 00:06:23,340
User is equal to the user model and quantified by ID and we can get an ID from rec dot params dot id

80
00:06:23,370 --> 00:06:26,280
because it is what we specify as ID here.

81
00:06:26,430 --> 00:06:29,610
So if is found, let's outwait it here.

82
00:06:31,540 --> 00:06:32,320
Like that.

83
00:06:32,320 --> 00:06:37,960
And next is we pass in as a second argument to the template core user as that.

84
00:06:37,960 --> 00:06:40,330
So back to my log in template.

85
00:06:40,330 --> 00:06:43,540
What I get some error here.

86
00:06:43,900 --> 00:06:49,960
It says await or sorry, I need to mark my function as an async.

87
00:06:49,960 --> 00:06:56,380
Sorry because if won't use a weights inside your function, you need to mark the actual function as

88
00:06:56,380 --> 00:06:56,980
async.

89
00:06:56,980 --> 00:06:58,690
Now it is happy.

90
00:06:58,930 --> 00:07:01,000
So back to the profile.

91
00:07:01,000 --> 00:07:04,810
We have access of this user inside this template.

92
00:07:04,810 --> 00:07:06,760
So how are you going to inject.

93
00:07:06,760 --> 00:07:07,870
Pretty simple, right?

94
00:07:07,870 --> 00:07:15,730
So now for full name, that is between my strong tag here, I'm going to inject using the edge syntax.

95
00:07:16,480 --> 00:07:25,330
You're going to be angular bracket equal to user dot foo name.

96
00:07:25,330 --> 00:07:35,530
You saw it in the terminal and I can also get this one as the user name and going to be as user name.

97
00:07:35,620 --> 00:07:40,870
And if I want to display the password, which is not ideal, but let's try it because this one is just

98
00:07:40,870 --> 00:07:44,140
like I mean low level authentication.

99
00:07:44,140 --> 00:07:45,940
So here we have that.

100
00:07:45,940 --> 00:07:47,380
And what about the image?

101
00:07:47,380 --> 00:07:56,380
I can remove this one and also inject the image from the template I pass in.

102
00:07:56,620 --> 00:08:00,940
So here are going to be the user dot image.

103
00:08:00,940 --> 00:08:04,420
Now let's save it and let's check our template.

104
00:08:04,420 --> 00:08:05,380
Refresh it.

105
00:08:06,130 --> 00:08:15,450
And we see that, oh, you go the user you go to user here because the CSS is not working.

106
00:08:15,790 --> 00:08:18,200
That's why we got that big image start.

107
00:08:18,610 --> 00:08:20,150
By the logic is working.

108
00:08:20,170 --> 00:08:20,510
You see that?

109
00:08:20,510 --> 00:08:22,050
We go the full name here.

110
00:08:22,060 --> 00:08:24,700
I'll start and I can click here to log out.

111
00:08:24,700 --> 00:08:31,380
But we haven't implement the log out yet, so that's how we implement the login functionality.

112
00:08:31,390 --> 00:08:34,030
So now here is a question or better.

113
00:08:34,030 --> 00:08:38,980
So let's go ahead and register a new user first and see if it's also working.

114
00:08:38,980 --> 00:08:41,620
And back to the register template too.

115
00:08:41,650 --> 00:08:47,020
We are also receiving those details, the same endpoint to the.

116
00:08:47,980 --> 00:08:49,040
We're going to be registered.

117
00:08:49,060 --> 00:08:49,540
Sorry.

118
00:08:49,570 --> 00:08:57,430
Here are going to be the register and also post requests and filled out the same full name, username

119
00:08:57,430 --> 00:08:58,090
and password.

120
00:08:58,090 --> 00:09:00,430
So everything is intact for the front end.

121
00:09:00,430 --> 00:09:02,150
Now let's get registered.

122
00:09:02,200 --> 00:09:03,370
We're going to be Imam.

123
00:09:04,390 --> 00:09:11,640
And now the username also has lowercase email and password as one, two, three, four, five hit sent.

124
00:09:11,650 --> 00:09:13,060
And now let's see.

125
00:09:13,240 --> 00:09:17,740
I see that I get invalid login credentials, meaning it's trying to log in.

126
00:09:18,820 --> 00:09:21,790
So again, let's refresh it maybe.

127
00:09:23,160 --> 00:09:24,120
I didn't refresh it.

128
00:09:24,120 --> 00:09:31,850
And let's see as Emma here and Emma lowercase and one, two, three, four, five and let's send.

129
00:09:32,280 --> 00:09:32,660
Okay.

130
00:09:32,670 --> 00:09:39,480
I believe we are not retaining anything from the registration, but if we check our campus, I think

131
00:09:39,480 --> 00:09:40,550
it should be registered.

132
00:09:40,560 --> 00:09:41,670
Now, let's see.

133
00:09:42,000 --> 00:09:44,400
And I told you it has been registered.

134
00:09:44,400 --> 00:09:48,540
So let's go ahead and log in with username, email and with password.

135
00:09:48,540 --> 00:09:50,220
One, two, three, four, five.

136
00:09:50,220 --> 00:09:54,480
And after registration two, we can implement for redirecting.

137
00:09:54,480 --> 00:09:58,590
So let's do the one quickly to make a complete application, right?

138
00:09:58,800 --> 00:10:06,750
So inside the server where we are registering, which is here, so instead of returning this one to

139
00:10:06,750 --> 00:10:09,900
the console, we can go ahead and then redirect.

140
00:10:10,350 --> 00:10:18,090
So here what we go back is okay, let me use carry braces here.

141
00:10:19,530 --> 00:10:24,270
And then expand it and restart redirect.

142
00:10:24,420 --> 00:10:27,690
And you should go to the login page.

143
00:10:27,730 --> 00:10:28,290
Okay.

144
00:10:28,290 --> 00:10:30,810
So next time you register, I'm going to redirect you.

145
00:10:30,810 --> 00:10:30,930
So.

146
00:10:31,140 --> 00:10:31,670
All right.

147
00:10:31,680 --> 00:10:39,600
So now let's log in to the and here is Emma lowercase Emma and the password.

148
00:10:39,600 --> 00:10:41,040
One, two, three, four, five.

149
00:10:41,040 --> 00:10:44,160
And let's look in a look at my details.

150
00:10:44,160 --> 00:10:48,420
I have full name and then the password, which is awesome.