- [Instructor] In this video,
we'll program the LOGIN button,
which will be very similar to the REGISTER button.
In fact, the only major difference will be on the back-end.
Instead of creating a new user,
we'll search for an existing user and return that.
So to begin with, let's duplicate our functionality
on the front-end.
So I'll copy the Register component and paste it in,
and rename it to Login.
Now let's change the title to Login,
and we'll still need a username and a password to log in.
But the button will call a function called Login
and it'll be titled Login,
and I noticed it's lowercase in register so I'll fix that.
Now we'll call a store.dispatch login.
Before we give that a try
let's go back to our Login component
and change the register method to login,
so that it matches the click action on line 18.
So let's go the the store and create an action
by copying register, pasting it below.
I'll rename it to login, and the URL will be login as well.
It should still pass back a token
which we'll then save in local storage.
We'll add to the Authorization header
and then we'll commit that token.
The last thing we'll need to do is set up our LOGIN button.
So let's go to our App.vue, and we'll modify line eight.
I'll copy the to directive on line seven and paste it below.
Then change that to Login.
Now that we're trying to navigate to a Login route,
let's create the route.
I'll open up main.js,
and let's copy the Register route on line 21,
and paste it below, and I'll add a comma.
Then on line 22 I'll change this to Login
and component to Login.
Now, since we're looking for the Login component,
let's add that.
So I'll copy line 11 and paste it below,
and change this to Login.
Now let's save those changes.
So let's give this a try.
So I'll click on the LOGIN button,
and you can see it's showing the component correctly.