We're come back in this video.
Let's see how we can register using a form and we can go ahead and then log in also.
So let's get going.
Well, first of all, let's try to log in first because we already have a user in our database, so
let's implement that.
So back to the login templates.
Let me close this once this requests and now let's go to the log in template, which is this one.
So here on the form, we need to provide the action which is logging and the method is post request.
And then on the name we have the properties as a username and then the password as password.
So this names might be the same as the properties inside our model.
Otherwise we are not going to get the actual result.
So here we can go ahead and make a request because we have all the details and inside the server we
are passing those data from a form using this middleware.
So everything is correct now.
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
data sets that all to the console that log in success.
Success.
And then we come back to this one to restructure it, to use the front end part.
So back here, the name was Johnny, and then the password was one, two, three, four, five.
So let's get sent.
Now, if we see that we got back the user.
But if I check also my terminal, you can see we have log in success.
Meaning that I was able to log in.
Why are we getting this JSON data?
Because this is how we want it to be.
Because back to our root, you can see that here.
When log in, we are returning this data.
So if you want to return to, let's say a different template like profile, this is how you're going
to do so instead of this one.
This one is for, let's say, API, because this one returns, what, JSON data.
So because we are dealing with the front end, less common, this one.
And now for client side, we want to render a profile page after success.
So down here it means that the login was successful.
So here we go.
Going to make this of red dot red direct and this redirects is a method they pass in the endpoint where
you should go and we want to go to profile page is that always direct always look up for a route is
there any route we select profile which is down here.
Good.
Which is this so and this profile route is rendering the profile.
So let's see if we are going to improve our code a little bit.
So let's refresh it and let's enter Johnny and Password.
One, two, three, four, five and let's hit st a if we see that I got the profile page.
So on the profile page we can make a request to fetch this particular user and place them on the card.
Do we get it?
Yes.
So let's see how you're going to do that one.
So in here, how can we find the user?
So we are waiting to change the path a little bit because you want to find the user using ID.
So in this way we are going to change this 1 to 4 slash colon ID.
So what we are going to do is that when a user log in, it's trying to find this root.
So where we are trying to redirect, yeah, this one.
So for this one we can pass it an ID to the URL so that it will be available inside the browser URL.
So here we go because we need to match the same root as the profile, because for the profile we want
dynamic ID.
So here what we are going to do is after logging in, we are going to send some dynamic ID so I will
use back take and then back tick as that.
And here I'm going to inject some dynamic ID and I can get a user ID from user dot underscore ID if
I check my campus.
This is underscore ID, this what I'm trying to refer to.
So here what we are going to do is that I will use carry bases and then the user found and dot underscore
ID.
Good.
So now everything is correct.
So let's try to log in again and see if is going to redirect.
So let's go to the log in.
And next is the joining and one, two, three, four, five and let's log in and you can see that I
have the template, but I got this one because our style has been changed.
But don't worry about it.
CSS Part of it, the logic is what we want, right?
So now we know that the template has been rendered by the CSS is not working this time around.
Don't worry if it's that.
So how can we pass the data onto this template?
It's pretty simple because now we have an ID inside the profile route so we can go ahead and find the
user by ID.
So here we go find.
Find the user.
By ID and here you go.
Cost.
User is equal to the user model and quantified by ID and we can get an ID from rec dot params dot id
because it is what we specify as ID here.
So if is found, let's outwait it here.
Like that.
And next is we pass in as a second argument to the template core user as that.
So back to my log in template.
What I get some error here.
It says await or sorry, I need to mark my function as an async.
Sorry because if won't use a weights inside your function, you need to mark the actual function as
async.
Now it is happy.
So back to the profile.
We have access of this user inside this template.
So how are you going to inject.
Pretty simple, right?
So now for full name, that is between my strong tag here, I'm going to inject using the edge syntax.
You're going to be angular bracket equal to user dot foo name.
You saw it in the terminal and I can also get this one as the user name and going to be as user name.
And if I want to display the password, which is not ideal, but let's try it because this one is just
like I mean low level authentication.
So here we have that.
And what about the image?
I can remove this one and also inject the image from the template I pass in.
So here are going to be the user dot image.
Now let's save it and let's check our template.
Refresh it.
And we see that, oh, you go the user you go to user here because the CSS is not working.
That's why we got that big image start.
By the logic is working.
You see that?
We go the full name here.
I'll start and I can click here to log out.
But we haven't implement the log out yet, so that's how we implement the login functionality.
So now here is a question or better.
So let's go ahead and register a new user first and see if it's also working.
And back to the register template too.
We are also receiving those details, the same endpoint to the.
We're going to be registered.
Sorry.
Here are going to be the register and also post requests and filled out the same full name, username
and password.
So everything is intact for the front end.
Now let's get registered.
We're going to be Imam.
And now the username also has lowercase email and password as one, two, three, four, five hit sent.
And now let's see.
I see that I get invalid login credentials, meaning it's trying to log in.
So again, let's refresh it maybe.
I didn't refresh it.
And let's see as Emma here and Emma lowercase and one, two, three, four, five and let's send.
Okay.
I believe we are not retaining anything from the registration, but if we check our campus, I think
it should be registered.
Now, let's see.
And I told you it has been registered.
So let's go ahead and log in with username, email and with password.
One, two, three, four, five.
And after registration two, we can implement for redirecting.
So let's do the one quickly to make a complete application, right?
So inside the server where we are registering, which is here, so instead of returning this one to
the console, we can go ahead and then redirect.
So here what we go back is okay, let me use carry braces here.
And then expand it and restart redirect.
And you should go to the login page.
Okay.
So next time you register, I'm going to redirect you.
So.
All right.
So now let's log in to the and here is Emma lowercase Emma and the password.
One, two, three, four, five.
And let's look in a look at my details.
I have full name and then the password, which is awesome.