3.3 The Login Component
Now that we have an authentication service, we can create a login component that uses it. This will be where the users log into our application.
1.Introduction5 lessons, 29:28
2.The Projects List6 lessons, 39:35
3.The Users5 lessons, 31:28
4.The New Project Form4 lessons, 30:48
5.The Project Page4 lessons, 49:46
6.Conclusion2 lessons, 04:08
3.3 The Login Component
Right now when the user goes to the homepage, they'll get this link that says go to the login form. But of course if we click that we get an error in the console saying we don't have any routes that match the route login. So in this lesson let's go ahead and create our login form and the login route. Let's actually start with a route this time. Here in our module file we can add a new route here, we'll have a path be log in and the component will be the LoginComponent. Of course we haven't created that yet, but let's go ahead and import the LoginComponent and of course that will be the login.componentfile. Now, before we leave here there is something else we need to do. The login component is going to have a form, of course, right. And so to use some of Angular's form features we need to import the Form module. So let's import the Forms module, and let's also import the Reactive Forms module. The Reactive Forms module gives us something called a Form builder. But we're not going to use that to work creating new projects but I'll import now anyway. And both of these come from @angular/forms. So now that we've updated our module, let's actually start with the template this time, that way we can kind of see what we're working with. So we have our templates directory, let's create login.component.html. All right, everything in here is going to go inside our md-card component. And then inside the md-card component, we're going to create a form. Now although the form is a regular HTML element, Angular has added some functionality to it. In fact there's a form component in the module that we just imported and the selector that it has, looks for form elements like this. And what that native Angular 2 component does is add an ng form object to this form element. And an ng form object is basically just an object that captures all of the values inside of a form. Now what we want to do is get a reference to this object. And the way to do this is to use the hash or number sign and then after that we have a local variable name. So for example we could say #myForm or something like that. I'm just going to call it #f and this is going to ='ngform'. It's important to realize we're not creating an 'ngform' object here, Angular already does that when it sees this form element. What we're doing is getting a reference to that 'ngform' object and we're assigning it to the variable f, which is now a property of our login component, so we can now have access to it. So now that we have a reference to our form, the other thing we want to do is handle the submission of this form. This is actually our first look at DOM Events in Angular. And the way to do this is, by putting the event name inside parentheses. So, in our case, that is going to be submit. Now, remember that we used square bracket syntax to bind some data value to a property inside of a component. In this case, it's kind of going in the opposite direction. We have this submit action that's gonna happen inside of our form, and we want to bind a function to that event, or basically, add an event listener. So when submit happens inside of this form component that angular is using, what should we do inside of our login component? Well, let's call the login function and we're going to pass it a value and that's going to be f which is our form here and then we can say, f.value. Now, the ngForm's value property is going to be an object with all of the fields inside of that form. You'll see what this looks like when we write this login function in a few minutes. But for now, let's fill in this form. In here, let's add an md-card title and this is just going to be login. Then let's create an md-card content element. And in here, lets get a paragraph and inside this paragraph we're going to have an input element. We're going to give this input element a type of text and we're going to give it a name of username and that's important. We'll also give it a placeholder value of username. And then most important of all, we're going to add The ngModel directive. So the ngModel directive is basically going to be a two-way binding. And notice that we haven't given the ngModel directive any value, which is fine. So instead, it's going to take its value from the name here. And it's gonna use the property name, username. This input is a child of our form, and so basically by using energy ngModel here we're binding whatever value is inside our input text box here, to a user property inside of our form object. And so now, when we call login here and we get the form.value, the object that is passed into that login function will have a username property, which will have whatever value is typed in to this input text box. Let's go ahead and copy this input text box and we'll change the type to password we'll also change the name to password and will change the placeholder value to password as well. And so now this ngModel instance is creating a password attribute on our form. Finally at the very bottom, let's create an md-card-actions element. And in here, let's add a button. We will use the md-raised-button component. We will give it the color primary for our theme and finally we will give it a type of submit so that when this button is clicked the submit event will happen. And we'll just give it the text login. And there we go. That is our entire template. Now, we can create our login component class. So, let's go ahead and in the app directory we will create login.component.ts. And of course we will go ahead and import the component decorator. We're also going to need the AuthService. So, let's go ahead and import the AuthService. And finally we're also going to need the router because after we login, we want to do some redirection. So let's import the Router object from @angular/router. All right let's go ahead and color the decorator here. The selector is going to be login. The template URL is going to be templates/login.component.html. And now let's export our class and this is going to be called LoginComponent. We'll have to add a constructor so that we can inject our AuthService here and we can't forget to use the private keyword. And then inside of our form here we said that we were going to have a login function. So let's go ahead and write a function called login. Now as we saw, this function will expect an object which is the value of our form. So what we can actually do is destructure inside of this and we'll get that username and password, individually. Then we can call this.auth.login. We'll pass it the username and the password. And then, because this returns an observable, we will subscribe to the result, which will be a Boolean telling us whether or not we are logged in. And what we'll do in here is very basic. We'll just say, if we are logged in, then we need to use the router, which means we actually need to inject the router. So let's go ahead and add the router to our constructor here, we'll say private router. And then down here in loggedIn we can say this.router navigateByUrl and we will navigate to the home page if the user successfully logs in. All right, now I'm pretty sure we added this to the app module but let's just make sure we have the login component here, our route looks like it's in order and okay we do have to add it to our declaration. So So we'll say login component, there we go. Also while we're here, let's just double check on our form module. We did import them here at the top but we never added them to our imports object in our module. So let's add FormsModule and also ReactiveFormsModule. All right, with those in place let's head back to the browser. We have our home page here, since we're not logged in, we get the go to login form. I can go ahead and click that. And, here's our form. But I guess we forgot to use the material design inputs, that's a really quick and easy fix. If we come back here, we just have to say, md.input instead of input. And the Angular components are not self-closing so instead of having a self closing tag here, we just have to add a closing tag of md.input and we'll do the same thing for the bottom one here. All right, and with both of those in place we can come back to the browser and now we have the material design inputs here. All right, so if I just put in a username and password that does not exist on the server and click Log In, nothing happens which is good. However, if I use one that does exist on the server I can click Log In and notice we're redirected back to the home page and now instead of saying log in, It says View your projects. All right, so now we have a working login component.