Okay.
What do we have in our application is we have a login and it's working fine.
So we prove that it's working fine and we get back the token.
But we don't have a way to register users.
And what we'll do in this video is to enable a registering in our application.
So let's go back here and we could create a new component.
And but let's reuse what we already have.
So we have that authentication component.
Here we have username and password.
We will use the same thing for registering.
So we can kind of reuse a little bit of what we have here.
So here we'll create a new state.
So I will duplicate this line.
And what I want to do is is login view.
So we'll have a method here.
And I will create set its login view.
And I will make it to true.
So basically I will have this variable here that will be either true or false.
So it's a boolean.
Then we based on that we can toggle in Toggling between register and login.
So I will go by copy that and I will go back here and let's say we will have here h1.
And in that h1 we will have login.
So basically we want to show it login but only want to show it login when it's login view.
So if login view will do that otherwise we'll do something else.
So what we want to do let's say we want to show register like that.
So if I will save it now and I go here you see I have the login and there is a little bit of this mismatch.
So we need to work a little bit with styling because it's really hard to see.
And so what I will do is I will create a div here.
So we'll wrap everything inside in that div.
And I will move this to the right.
So we have that.
Div here and I will put that outside of my grid one.
So we will have that H1 here inside the grid.
So I will have that log in here and then we'll have a grid there.
So we have that log in here.
And if that will be that variable will be false if we will switch it to false.
So how can we do that.
Of course millions of ways to do it.
So what I will do is I will have a paragraph here and I will put you don't have an account register
here.
And and I can make it clickable.
Any element it can be a button if you want.
Like um I want to show you how it works in a different element.
So on click and that's going to be arrow function.
And I will use method that we have here which is set is login view.
And we can pass here False.
So basically whatever we click on this will make it to false.
If I will go here and if I will click on this one, you see that it has been changed.
And quickly I will add some padding to my element here.
So it will be easier to see if we'll have padding let's say of 12 maybe.
And so it will be easier to see it are not going to be asked to the edge.
So when we click on here we change this to register.
So basically what we can do is we can have two of those.
And I will have another one to true.
So we will basically toggle in between them.
And I can say.
Already have an account login here.
So basically you will have two of them.
And we can do the same thing as we've done it here.
So basically if we have a login view then it will display one.
Otherwise we will display the the other one.
So if I will save it now I have that already have an account login here and refresh it.
We have that login.
You don't have an account register here.
So I will click it and then I have register.
I already have an account login here.
And you see I can click on this change the way we have it.
Also we have that button here.
And we can do a similar thing as we've done before.
So login here I will duplicate it.
I will put a colon here and just close the curly braces.
So the first one if we have a login then we'll do login.
And then I will have another one register and we will register.
We don't have that method yet so I need to click on this.
And the same way as we have this I can duplicate this and I will have register user.
So what we need to have is maybe we can have a register method just not to have it confused here.
And we need to register user in our API.
So at the moment what I will do is I will say register here and we will need to create that method there.
So I will go to API service and it will be similar to what we've done here.
So I will duplicate this and I will change this.
To register user.
What we need to send is we need to send body because we need to use username and password.
And in the URL.
What I want to do is not API but not out but API slash users slash.
And then we'll send whatever we eat there in the body.
So we have that method to register.
If I will go here, this is what I will call.
So if we click on this button here when it's register then it will.
This save function will be trigger.
We will have this function async.
This will be sent to username password.
And if we have a response then we will console log let's say response for now and we'll see what's coming
back to us.
So I'm on the login.
I can register here on register.
So at the moment this is register mode I'll put my username password.
Christian two Christian two.
And I will click register first thing first.
Well I see the console log here.
This is already registered and I have ID five coming from my database.
And I can see here the users.
And this is what I sent.
So API users post and it has been created.
And I see what I've sent and also what is going back.
So this is coming back from database I see ID five.
But instead of logging that here to console, what I could do is I could automatically log in that user
and have that token saved there.
So basically we have that method here method.
Here we use the username and password for login.
So basically if we have that information there we could all trigger that.
From here.
We don't need to pass anything here.
We will just register.
So if we have a response, we know that we've registered a user and we'll use the same credentials to
login.
And the token is supposed to come back to us.
So if I will do it again and then I will I can clean it.
You see if I will go to our application.
And I don't have any, any token yet.
So if I will use another one.
So let's say three and then three here if I will register.
Now you see token is here.
So if I will go to network and I have that users, this is where I created my user.
And then I authenticate it and I got the token.
This is different token than it was for my previous user.
So if I refresh the page now I'm in the movies with as a new user and it's done.
So we have successfully created.
If I will remove it here.
So once again application and I can right click clear and then refresh it here and back again here.
But you have two ways to reuse the same form.
So I can either do register or login here.
This is not styled properly.
And then we also need to make sure that whenever we actually login will be redirected to a proper page.
And we can do that here.
So if we go in and out and we know that you will login, we set that token.
What we can also do is we can navigate to movies.
So this is what we will do here.
I will put that in the multi-line.
And we set the token and we navigate to the movies there.
So if I will go here and if I will log in now Christian and login I'm already here.
So this is, this is already a redirecting.
So we have a fully functional login and register in our application now.