Lecture thumbnail 0:00 / 0:00 Let us create login user interface in Angular application, so that we can make a request to
account slash login and supply the email and password values. So I would like to create
user interface like this, obviously with essential text boxes and button. At first in the Angular
code, in the models folder, let us try to create a new model class. So right click on the same
cities Angular app, open in terminal, run the command ng g class. Under models folder, I would
like to create a file that is login user. So this creates login user.ts file in the models folder.
Open up the same, create essential properties. Of course, we need only two email and password.
It can be of string or null value. Default value is null. You can initialize them either in the
constructor or inline along with the declaration like this. Go to the account service. In the
account service, much like register, you try to create another method that is a post request to
login. We are going to receive the login user as object. And the URL is login. And yes, we are
making a post request. And also create one more method for making a get request to log out.
Because the logout endpoint account controller receives a get request as defined here. So switch
back to the account service. Here we are not going to make any request body. So the return type is
strong. Just for formality, actually it returns no content. So the response will be empty.
Import the class login user from the relevant file like this models slash login user.
And here in this get logout, the URL is just logout and make a get request.
That’s all. These are the methods in the account service. Now let’s create another component that
is login component. So in the developer PowerShell, write another command ng g component.
I would like to create a component called login. So it creates a folder called login with login
component TS file and other related files. Now open up your login component TS file.
Much like register, you try to create a login component. You can do one thing. Let’s try to
copy paste the code from the register component. So open up your register component TS file.
Copy everything into that class, pasting the same in the login component TS file.
Now easily you can make changes. Now rename this register form as login form instead.
And also import form group from at Angular slash forms.
Even account service also. Even router also. So these must be imported from respective modules.
And also validators as well as form controls. Here we require only email and password.
Two fields. I mean two form controls. And no need of this validator.
And then after that rename this method as login underscore.
Oops. Login email is enough. So login underscore email control. Person name is not required.
And one more for password. So we are going to create two text boxes only. Email and password.
Deleting unnecessary things. Method is login submitted. And the property name here is ease
login form submitted. And we are going to make a request to post login. And submitting the login
form value. The response would contain the email and person name. But let’s formally mention the
same as login user. Actually it would not contain the password in the response. And after successful
login it has to navigate to cities. That’s fine. So the code of login component TS file is completed.
In the same way let’s copy paste the code from register component HTML file.
Select the complete code. Copy. And paste the same in the login component HTML file.
So now we are in the login component HTML. And paste the same from register component HTML.
Change the titles. Login. And form is login form. Method is login submitted.
It contains email. This span tag for email validation is not required.
Only required validation is enough.
And one more for password. Okay. So we have email and password. Confirm password is not required.
And a submit button. That is login. Type equal to submit. That’s fine. So the template is ready.
And go to the app routing module TS file. Add a route for login. If the path is login.
Then navigate to login component. And then in app component HTML file.
Make sure you created a router link for login. We already did. That’s fine. So finally run this
application with ng serve command. Oops we are getting some errors. So there is some name mismatch.
Login underscore password control. So go to the login component HTML file. The properties that we
are accessing is register underscore password control. So search for the same. Control H.
And find register underscore. And replace the same as login underscore in the same current document.
That is in the login component HTML. Replace all. Yes four occurrences are replaced.
Now save this. And here is register form submitted. Here it is showing error.
Replace all its occurrences with is login form submitted.
Replace all in the same current document. And check again.
Yes ng serve command compilation is successful.
Run the angular application as well as ASP.NET core application.
And switch to login URL. Enter the email address that we have registered already.
For example harsha at example.com. Password is harsha123.
And clear this network tab. And see if you are making any request in the network tab. Click login.
Yes you are making a request. So the URL is localhost the port number api slash v1 slash
account slash login. And you made a POST request. And the payload that means request body contains
this JSON object email and password values as entered in the text boxes.
And the response is successful. So status code is 200. The response contains the person name
and email value as expected. Because we have returned the same object from the web API controller.
And after successful login it automatically redirects to cities. Because we did the same
through router in angular. So the registration and login is successful in angular application.
And also in this existing application let us try to implement logout functionality.
In order to identify if some user is logged in or not. In the account service in angular let us try
to create a property. For example current username. It can be string or null. And the default value
is null. So in case if this property is null that indicates no user is logged in. So in that case we
have to show login and register links in app component. Make this property as a public property
so that we can access the same from outside the service class. And then go to the app component ts
file. In the constructor inject the account service. Here also make it public. So that we can access
this account service from the template of the app component as well. Okay so we are able to access
this account service property from the app component template file. Go to the app component html file
this time. Write a condition here. If the account service dot current username. So this property is
equal to I mean triple equal to here. If it is equal to empty string or if it is equal to null
or if it is equal to undefined. In either of these cases we have to show login and register links.
Otherwise we have to show another ul tag for opposite condition with logout.
So if it is not equal to empty string or not equal to null or not equal to undefined.
Here I’m typing not and then double equal to like that. When the user clicks this the page should
not refresh. So we are writing the same as return false. And actually on the click event of this
logout we are going to call on logout clicked method. And we can write this method in the
app component ts file. Go to the app component ts file. So this method executes when the user
clicks on logout in app component html. And in this case hey account service I would like to call
logout from the account service. And since it is a request we have to subscribe to the same
observable. Okay this complete is just a dummy just for formality. But actual thing that you
require here is the next method. Of course here response is empty string. So no need of printing
the same in the console dot log. So just in the account service I would like to reset the current
username property to null. And after that redirect to login. After successful logout redirect to
login. So by the way we have to inject router service as well. In the same constructor
inject router. Import this router from at angular slash router.
Check for any errors and this error is up and running correctly. In the app component html file
here we should write and operator instead in the logout. So if this current username is not equal
to empty and also not equal to null and also not equal to undefined. In this case only we have to
show logout. So if it is not either of these that indicates the current username is something.
For example Harsha. If that is the case then only we have to show logout.
And switch to the login component ts file. Upon successful login I mean in this login submitted
method we have to set the current working username in the account service. Hey account service
store the current username that is in the response we have current working
user email address. So store the same over here. Okay when the user logs in we will assign the
value into current username and upon clicking logout we will clear the same. We will reset the
same to null. That’s the logic. So currently if the current username is null we will show login and
register instead of logout. So click login. Enter the correct username and password.
Harsha123 is the password in my case. But in your case you have to register yourself.
So click login and for this login request we got success response from the server.
200 along with person name and email and we are going to store this email in the current username
property. And since the current username property of the account service is not equal to null
we are showing the logout link here and we navigated to cities. That is fine.
But still the problem is without login also if the user enters this url cities
the cities data is able to read even post put everything works. So we have to enable authorization
by using JWT and we will try the same in the next lecture.
Play Play Play Play Stop Play Play Play Play Play Play Start Start Start