Okay.
In our application we have a full chroot now so we can create new records.
We can get a list of the records, we can update the records and we can remove the records.
So all the chroot options are available now.
But the missing part is actually this token.
At the moment what we have is we have that static token, but we need to enable user first to log in,
retrieve that token, and then we can use it as a dynamic token from here.
So first thing first, what we need to do is basically we will need to I will make a little bit more
space.
We need to create a new component and that component will be a login or we can do out an authentication
component.
So Jas here.
And what I could do is I could for speed things up, I could select all in edit because we'll reuse
whatever we have in the edit and we can use it inside our our new component authorization here.
So what I will do is what I'm interested in is actually a few pieces here.
So we had in the edit title and description.
What we will have here is we'll have username like this, so username and then we will use an empty
string and then we'll also have password like this.
And then it's going to be empty like like this.
So save movie here.
What we can have is authenticate method and I will just remove all of it.
I will just clean it up.
I will have one option that will kind of reuse because all of the fetch methods are very similar how
we use it.
So at the moment what I will do is I will just comment it out to get it away from here and then we'll
come back to this later on.
So we have here username and that's going to be username.
And then set also username and that's going to be value username.
So there is a lot of typing.
What I can do is I can just copy the password and do the same with this here.
So label will be password.
Then we'll use the placeholder password.
If that will be empty, it will be display, then we'll accept
password here and then value will be password.
And then on on press, what we'll do is we'll have out.
Function here and then we can have a title.
Let's say
we can have a static one log in like this.
We don't need to have any navigation here like this one.
So what we can have is we can have log in and then we can remove the this one.
And let's do a little bit of clean up here.
So the container, what we have in here, we have the container, we have labels and we have inputs.
So I will leave the container labeled and input.
So all of this can stay.
So I will save it now, but it doesn't really matter at this point because we haven't added yet to our
app.js.
So what I need to do is actually this is added navigation, so we need to correct it as well.
So this is not added, this is our authentication component.
So I will save it here.
And this will navigation options will be on authentication.
And now once we have the authentication, what I can go do is I will actually duplicate this and authentication
will be our first component authentication and that's going to be authentication.
So we have a new component here.
I will save it and let's come back here.
And you can see here at the beginning we are in the login, so we have username and then we have a password
and then we can click login and then we can login our user and we can get the token from the request
and move back to the movie list when we are authenticated.
But we need to also work with a few other things here to make it happen and we'll do that in the next
video.