0:01 Hey guys, welcome to part eight of 0:03 meanstack front to back. In the last 0:05 video, we created our register 0:07 functionality. We're now able to 0:09 register through our Angular 2 app. And 0:12 now we're going to work on the login. 0:13 Okay, so we already have the login for 0:15 um login component created. So let's go 0:18 to our Angular app source app components 0:22 and then login and let's go ahead and 0:24 open up both the component TS as well as 0:29 the HTML. Okay, so I'm just going to 0:31 paste the form in here. This is just 0:34 plain HTML. We're just going to add a 0:36 couple things to it. All right, so first 0:38 thing we're going to do is in the form 0:40 tag, we need a submit event. 0:43 Okay. So, we're going to say submit. And 0:45 then we're going to send that to on 0:47 login 0:49 submit. And then we have our username 0:52 and password. We're going to um link 0:54 these two properties in our component. 0:57 So, we're going to need 0:59 ngmodel. So, we'll say ngmodel equals 1:04 username. And we also have to have a 1:07 name attribute with the same value. 1:10 Okay. We also want to do that for our 1:18 password. Okay, so that's password and 1:21 then 1:23 name password. Okay, and that should be 1:26 all we need to do here. So, let's save 1:28 that. The form should show up. Good. Um, 1:31 now we're going to go back to the 1:33 component.ts ts 1:37 file and let's add the username and 1:40 password as component properties. Okay, 1:43 so we'll say username 1:45 string and 1:49 password string. 1:51 Okay. And then we're going to want to 1:55 um actually let's let's just add that 1:58 function the on login 2:03 submit. Okay. Excuse me. We'll just test 2:06 this 2:09 out. Okay. Actually, let's test it out 2:12 by displaying the 2:16 username. Okay. Remember we have the ngm 2:18 model linking to this username property 2:20 which we can access with this do 2:24 username. So let's make sure that that's 2:26 saved and then we'll go ahead and try 2:28 that out. Let's 2:30 reload and if we go ahead and let's just 2:33 say test and 2:35 username and we get test down here. 2:37 Okay, so that function is hooked up. Um 2:40 now when we submit it we want to create 2:42 an 2:45 object for called 2:48 user and let's set username to this do 2:52 username and then 2:54 password to this 2:59 password. Okay. Now what we want to do 3:02 is take this this user object and submit 3:04 it through our o service to the backend 3:07 authenticate route. So we have to bring 3:10 in our o service. So let's go to the top 3:14 here and we'll say 3:18 import o service. Actually that should 3:21 be an 3:23 uppercase and that's going to be from 3:27 want to go out 3:28 twice and then into services and then 3:35 o.ervice. Okay. And we need to inject 3:37 that as a 3:40 dependency. So 3:42 private o service and we'll set that 3:47 to o 3:51 service. 3:53 Okay. And while we're at it, we might as 3:56 well bring in the other stuff we need to 3:58 as well. We need the 4:01 router so that we can redirect. So 4:04 that's going to be 4:07 from angular slash 4:12 routouter. And then what's going on 4:17 here? Okay. And then we also want to 4:20 bring in the flash messaging. 4:22 So that's going to be 4:24 flash message 4:29 service angular 4:31 2 dash 4:35 flash messages and we have to inject 4:38 those as well. So let's put these on 4:41 separate lines just to make it look a 4:43 little 4:44 neater. So this will be 4:48 um router 4:55 And let's 4:58 say 5:01 flash message. Set that to flash message 5:07 service. Okay. So now we're injecting 5:10 all the stuff we need to inject. Um and 5:13 then we're going to call an O service. 5:16 So let's do that. Right below this where 5:18 we created the user, we're going to do 5:20 this off 5:23 service dot and we're going to call this 5:27 um no wait, we want to call 5:31 authenticate authenticate 5:34 user. Okay, that'll get passed in a user 5:37 and it's going to return an observable. 5:39 So we want to subscribe. 5:43 Okay. And then when we subscribe, we're 5:45 going to get some data 5:47 back and we'll set that to a code block. 5:50 Okay. I'm going to just leave it like 5:52 this for now. And we want to create this 5:54 authenticate user. So let's save this. 5:57 And then we'll go into our service, our 5:59 o 6:03 service authenticate user. That's going 6:07 to be passed in the user 6:09 object. Okay. 6:12 And now we need to make a post request 6:14 to uh to authenticate. So just like we 6:17 did up here actually let me just I'm 6:20 just going to copy 6:22 this. Okay. So we have our headers. 6:25 We're saying we want to use the content 6:27 type JSON. And then we're making a post 6:29 request except we want to make this to 6:35 authenticate slash authenticate. And 6:38 we're sending the user along. So that's 6:41 fine. And the rest of this is fine. So 6:43 basically it's the same thing except we 6:44 just change the endpoint. Okay. And then 6:47 remember when we when we do the 6:48 authenticate it's going to return a 6:50 success and it's going to return um if 6:54 it's successful it's going to return the 6:56 token for us to store and it's also 6:58 going to return the user info. Okay. So 7:03 once we make this request we're going to 7:04 want to store that. So let's go back to 7:06 our login component and that's what 7:08 should be in the data right here. 7:11 So right now what I'm going to do is 7:12 just console log that 7:14 data just to see what it gives 7:18 us. All right. So let's save 7:21 that. Uh let's see. Do 7:24 I have any errors here? What's 7:32 that? No exported member flash message 7:35 service. 7:40 Let's see. Why am I getting that? Oh, 7:43 it's messages. That should have an S. 7:46 And then also right 7:50 here. All 7:55 right. So, save 7:58 that. And let's go back to our login 8:01 page. And I'm just going to reload it. 8:04 And let's see what happens 8:06 uh if we send just 8:10 anything. Okay, so look down here and we 8:13 get back an object success false user 8:16 not found which is exactly what we 8:18 should get. Now let's use a user that's 8:20 there but the wrong password. Okay, now 8:23 down here you can see we get wrong 8:25 password. Now let's do the right 8:29 password. And if we look down here we 8:31 get success true. we get our long token 8:34 and we get our user object. So what we 8:38 want to do is store this and we're going 8:39 to use local storage. So let's go back 8:41 to our login 8:43 component and let's see we're going to 8:46 test that 8:49 data. We're going to say if 8:52 data 8:54 success okay let's do an else. 8:59 So if success let's do the the the error 9:02 first. If it doesn't succeed then we 9:05 just want to send a flash message. So we 9:07 can say this 9:09 dot flash message dot 9:15 show and let's pass in the actual 9:19 message that comes back from the server. 9:21 So data 9:22 dossage and then we can add our options. 9:24 And we're going to add a CSS 9:27 class and set that 9:31 to 9:33 alert danger. Okay. And then we'll also 9:37 set the time 9:40 out. And we'll set that to 5 9:45 seconds. All right. Let me just put 9:47 these on 9:49 a separate 9:52 line. Okay. Okay. And then let's see 9:55 after that that ends right there. We 9:59 want to just redirect. So we'll say this 10:02 dot 10:08 router.n. And here we're going to go to 10:11 just the 10:12 login. All right. So let's go ahead and 10:15 try that. We'll 10:17 save and log in. User not found. we do 10:22 Brad and the wrong password, we get 10:26 wrong password. Okay, so we don't even 10:28 have to create those messages. We're 10:30 sending it right from the server. Now, 10:32 if it's successful, 10:35 um what we're going to do is we're going 10:36 to have an authentication an o service 10:38 function called store user data. So 10:41 let's call that this. 10:46 service dots store user 10:50 data. Okay. And then we're going to pass 10:53 in data 10:56 token and data do user. So the response 10:59 we're getting and then we're simply 11:01 going to send a message and redirect. So 11:03 let's copy 11:07 this and put that right there. Okay. 11:11 except this is going to be 11:15 um let's see do I want to send No, we 11:18 don't want to send that. Let's 11:21 uh let's just say you are now logged in 11:28 and we'll change this to alert 11:32 success and we want to change this to 11:37 dashboard. All right. So, let's save 11:39 that and then we'll create the store 11:40 user data. So, we'll go back to our 11:48 service. Okay. So, that's going to get 11:51 in a token as well as 11:57 user. And then what we want to do is 12:00 save it in local storage. So we can say 12:03 local storage 12:07 um set 12:10 item and then this takes in a key and 12:12 then the value. Now for the key we're 12:14 going to use id token. Now the reason 12:17 I'm using this is because when when we 12:19 use angular jwt to uh to validate the 12:23 token it it looks for this path 12:27 automatically within local storage. Um, 12:30 there is a way you can change it, but 12:32 I'm just going to keep it at ID token. 12:35 Okay, so that's why I'm using that and 12:37 not just token. Uh, but then we just 12:39 want to pass in the token that comes in 12:41 from here. So, we're saving that in 12:44 local storage. And then we want to save 12:46 the user as 12:48 well. Set 12:51 item. And we're going to set 12:54 user. And let's set that uh we're 12:57 actually going to say 13:00 JSON 13:02 stringify user. Now the reason we're 13:04 doing this is because local storage can 13:06 only store strings. It can't store an 13:08 object. So what we have to do is make it 13:11 into a string before we enter it. And 13:13 then when we get it back, we can parse 13:15 it back to JSON so we can use it. All 13:17 right. Hopefully that makes sense. Um 13:20 and then what we'll do is we're going to 13:22 set this and this value. Okay. So we can 13:25 say this dot o token 13:30 equals token and this dot 13:35 user equals 13:37 user. 13:40 Okay. So now let's go ahead and make 13:44 sure everything's saved and we're going 13:46 to try to log in and it should get 13:49 stored in local storage. So let's say 13:53 Brad and log in. Takes us to the 13:56 dashboard. Tells us we're logged in. And 13:58 then if we go and click on the 14:00 application tab, you'll see that we have 14:02 in local storage. If you click down 14:04 right here, we have the ID token and we 14:07 have the user. Okay, we can access this 14:09 user information uh whenever we 14:12 want. So what I want to do now is create 14:15 a log out link so that we can clear this 14:18 stuff out and it will log us out. All 14:20 right. And then in the next video after 14:22 that we will um implement the check so 14:26 that we can uh validate the token with 14:29 angular JWT and we'll also do the access 14:33 control because right now anyone can go 14:35 to dashboard or the profile. Um so we'll 14:40 do that too. Uh but let's create the log 14:42 out. So in the 14:44 service, let's go down here and let's 14:46 say log 14:49 out. Okay, so log out. What we're going 14:53 to do is we're going to first of all set 14:54 the local O token value to 14:59 null. We're going to set this user to 15:04 null and we're going to clear local 15:10 storage. Okay. So, that'll clear it out. 15:14 Let's save that. And then we need a log 15:16 out link up here. So, we're going to go 15:18 to our 15:20 navbar. See, navbar 15:23 html. 15:26 And let's go ahead and copy one of 15:29 these. Now, right now, all the links are 15:32 going to show at all times, but when we 15:34 do our offguard, um, we'll be able to 15:37 hide, you know, hide the log out if 15:39 they're not logged in and hide the 15:41 register login if they are logged in. 15:44 Okay, so let's paste that in and let's 15:47 change this 15:48 to log out. Okay, and then uh we're 15:53 going to have this 15:54 go actually, you know what we're going 15:56 to do is it's not going to go anywhere. 15:59 We're going to create um uh an event and 16:02 then we'll put the logout event inside 16:04 of our navbar component. So let's get 16:07 rid of this router 16:09 link. And I'm just going to say href to 16:14 nowhere. Okay. And then we'll 16:17 add a click 16:21 event. And let's set that Whoops. 16:25 Let's set that to on log out 16:34 click. All 16:36 right. Um, and let's see. We don't need 16:41 this because there it's not going to be 16:48 active. Okay. Okay. So, we'll save that 16:50 and then let's go in navbar component 16:53 ts and say on logout 17:02 click and we're going to need our o 17:05 service and messaging. So, I'm just 17:06 going to copy from uh let's say 17:10 login. Just going to copy all these 17:13 imports and put that in the 17:17 navbar. Okay. Okay, we also need to 17:19 inject them all. So, let's grab those as 17:21 well. Everything in the 17:26 constructor. Okay, we'll put 17:29 that 17:35 here. And and now in the on logout 17:39 click, we're going to say this.ervice 17:45 um.log out. And it's not an observable. 17:49 It's not returning anything. So we can 17:50 just do it like that. And then the 17:53 message this 17:55 flash 17:58 message.show. And let's just say 18:01 you are logged 18:11 out. Set that to 18:14 alert success. 18:19 And we'll set timeout to 3 18:23 seconds. Okay. And then we just want to 18:32 redirect. And let's see, this is going 18:34 to 18:35 go to the login 18:38 page. And then we also just want to 18:41 return 18:43 false. All right, let's save that. 18:47 And let's try it out. We'll reload and 18:50 let's click log out. You are now logged 18:53 out. And if we go to application local 18:56 storage, there's nothing there. 18:59 Good. All right. So in the next video, 19:02 we're going to implement Angular 19:04 2JWT. We're going to create the profile 19:06 page and we're going to send um we're 19:08 going to send a request to the profile 19:10 route which is restricted. So, we'll 19:13 have to uh send along the token as well. 19:15 All right, so that's it for this video 19:17 and I'll see you in the next.
