Lecture thumbnail 0:00 / 0:00 In the last lecture, we have created an endpoint for register
and we would like to make a request to the same endpoint from the UI from the Angular application.
I would like to create this UI as a component in Angular application
which includes with all essential text boxes or any other details that are required for every user.
So at first in the Angular application, let me create a model class much like city.ts file.
In the developer PowerShell, make sure you located cities Angular app.
You can open the same by using right click on the cities Angular app folder,
open in terminal. So in this developer PowerShell, just write like ng g means I would like to generate
a class in models folder. File name is register user. So this is the command
ng g class models slash register user. So it generates a file called register user.ts
in the models folder. In this particular class, you can create the properties that are required
for every user. That is person name, email, phone, password and confirm password. The value
can be string or null. Anyway, the default value must be initialized. I’m initializing the same as
null. You have to initialize the same either along with the declaration like this or even in the
constructor. So create these properties in camel case. And in order to make a POST request to the
account controller, let me create an Angular service that is account service. So in the same
developer PowerShell, write another command ng g. This time I would like to create a service.
Under services folder, I would like to create account service. So just give the name account.
It suffixes the word service automatically. So in the services folder, now you can see account.service.ts
file. And here create an API base URL as a constant and initialize the same with the URL.
The default port number for our application is 7221. So initialize the same 7221
slash API. And for this account service, we are making requests to only account controller.
So add the same here along with the forward slash.
Now in this account service class, inject HTTP client service and have a method.
For example, POST register. It receives the register user as argument.
Import the same class from models folder.
And you are going to make a POST request. And return type is observable of.
Register user. Because the endpoint at server side code returns the user details.
So we are representing the same as register user.
And make a request. Hey HTTP client, I would like to make a POST request.
And in the string value with the back tick. I would like to add API base URL.
That was initialized above that is localhost 7221 API slash account.
At your practice time, you have to use the port number of your own application, not this one.
API slash version number that is V1 for example, that is in the base URL.
So in this base URL, we have up to account slash. Then after that register.
This is the URL. And we are supplying the request body that is register user.
And that’s all. Return type is register user.
OK. Now our account service is ready. Let me create a component.
So in the same developer PowerShell one more time.
Write another command ng g. I would like to create a component this time.
And the name of the component is register. So the command is ng g component register.
Optionally, you can place the same inside a folder, but it is not mandatory though.
So we have a register folder here with register component and register template.
And automatically that gets added in the app module.
That is in the declarations like this.
So make sure it is declared in the module.
Now switch to the register component TS file.
Here, create a form group for registration form.
Basically, I would like to create this type of user interface with a form with all these fields.
And a boolean flag value that is is form submitted.
So it indicates the status of form whether it is submitted or not.
By default, it is false. When the user clicks on the register button, it should become as true.
Now in the constructor, try to inject account service and also inject router.
So that you can programmatically navigate to the specified route.
And within here, try to create a form group.
And if you ask me what are the form controls, it includes the person name,
default value is now, and required validator.
Import form control and validators, form group,
all these things from hangular slash forms module.
Similarly, try creating remaining that is email, phone, password and confirm password.
Okay, let it be phone number.
Because we named it as phone number in the server side model class.
In the register.ts file also, let it be phone number, but not just phone.
Okay, now create get properties for all these form controls,
so that you can access the same easily in the template
while displaying or hiding the validation messages.
You can name them anything, for example, register underscore,
name of the control that is person name, and a suffix like control.
It is going to return a form control.
So within this registration form, we are accessing the control that is person name.
Similarly, create get properties for remaining,
that is for email,
phone number, password,
and confirm password.
And then when the user clicks on the register button,
we are going to execute a method, for example, register submitted.
And here is registration form submitted equal to becomes true.
Initially it was false.
So this indicates that the button is clicked.
And using the account service, we are going to make a POST request to the account slash register.
And this registration form value is submitted as the request body
and subscribe to the same observable.
After receiving the response, optionally, you can display the same in the console log
and reset the is form submitted equal to false.
And programmatically navigate to cities route.
And also reset the form.
OK, this is the code for next.
And now for error.
OK, that’s all for the component.
Now let’s create the code for registration HTML template.
I would like to create this type of form in the UI,
which includes the person name, email, and all the remaining fields with a button.
Create an outer container.
The form should be entirely placed horizontally center.
So create an outer container with width equal to 50%.
And margin auto makes it center.
Take a div tag with form container.
We have created that CSS class.
For example, if you notice the same in the styles.css file,
it applies the background color, border radius, etc. properties.
So again, in the register component template.
Create a heading, for example, register.
Create a form tag and bind the same with form group.
What is the name of the form group?
That is register form.
And when the user clicks on the submit button,
call the method called registerSubmitted.
Create the fields.
First, person name.
Every form element is created as two parts.
The left side part contains the label,
and the right side part contains the actual text box.
So we are going to display them side by side.
So both of these elements are placed inside a container.
Create the container first, that is form field.
And it’s the flex container.
So display flex in CSS.
In the left side part, which occupies 25% of the width,
I would like to place a label.
And for all the labels, the CSS class is form label.
And padding top.
And then the label text.
In the second part,
place an input tag.
And bind the same with the person name form control.
And after the text box, display an error message by using span tag.
It should show the text in red color.
And it should appear only when the person name form control has errors.
So, name of the get property is person name form control.
As we have created already over here, register underscore person name control.
And if it is touched, or if the register form is submitted,
if either of these is true,
and then,
if the form control has at least one error of required,
so this is conditional access.
If it is not equational, then only we are trying to access the corresponding element.
That is the indication of this question mark dot.
So this is for person name.
And the same syntax goes for email.
Copy pasted.
Email.
Label for email.
ID is email.
Form control also email.
Sorry, it was a typo.
And then error message.
If the email control is touched,
or form is submitted, then we are displaying error message.
Let me add one more validator.
That is, for example,
validators dot email.
So in the component, we have added validators dot email.
And now in the HTML template, adding another error message.
If it is having error of email,
then display another message.
Email should be in a proper format.
Then adding the same for phone number.
Copy paste one more time.
Form control is phone number.
Okay, appropriate error message.
And in the same way, create one more for password.
And then for confirm password.
So these are the get properties that we have created in the component.
And we are accessing the same in the template.
Like this.
And then at the end, create another container for submit button.
Now label here.
So this first box is empty.
But over here in the second box,
place a submit button.
Type equal to submit.
Button in green color.
These CSS classes are already created in the styles dot CSS file.
Okay.
Run the ng serve command.
Okay, we are getting error saying that
partial error closing the parenthesis is missing.
So in the above syntax, here we have opened the parenthesis.
And here we have to close it at the end.
Even same for all the remaining.
So this is the opening and this is the closing for the same.
Similarly for remaining.
Okay, we have just closed the brackets for span tag.
And this is email.
There is a typo here.
And here one more closing parenthesis here.
Which is open here.
Okay, now it is compiled successfully.
Then try to create a hyperlink in the app component.
So switch to the app component HTML file.
You try to create another li tag.
That is for hyperlink.
Register.
Path is register.
Let’s create that path in the app routing module.
So go to the app routing module.
Add another route path.
That is register.
And target the register component.
Make sure you imported register component from the particular file.
In the account controller.cs file.
That means in the web API controller.
Write the route for HTTP post.
That is register.
So it becomes as account slash register.
And in the account service.ts file.
The URL should be HTTPS.
Because we have enabled strict HTTPS HSTS on web API application.
So run the application finally now.
And click register button over here.
So we are making a post request.
Since we have not submitted any values.
We are getting 400 error.
Bad request.
That’s fine.
So if you enter the values.
Harsha at example.com.
Harsha123 is the password.
And click register.
Now we made a post request.
And we are getting 500 internal server error.
What is the response?
We are getting SQL exception.
Invalid object name AspNet users.
So it has received the request.
But unable to insert the same into the table.
Because that table does not exist in the database.
To create those tables.
Go to the package managed console.
Select the infrastructure project from the drop down list.
Don’t forget.
And add a migration.
With some migration name.
For example.
Recently we have added essential AspNet users table.
And others.
So let’s call it as identity changes.
So command is add-migration space identity changes.
It can be any name.
And run the update database command.
To update the same changes back to the database.
So it really creates AspNet users.
AspNet roles and other tables.
Now.
Run the application one more time.
And also add a breakpoint over here.
In the account controller.
Near the HTTP post.
So clear the requests in the developer tools.
And click register button here.
So we have made a post request to the register link.
And this register DTO has received the same values.
That is person name, password and all the remaining values.
Make sure you received the same.
In case if not.
Check the model property name.
And the model class properties.
That you have created in Angular application.
They should match.
So in this case model state is valid.
So is valid equal to true.
So this condition is false.
It creates a new user object.
And invokes the create async method.
Result is success.
And now we are logging in.
Then we will return the user object as response.
And the same response has been received over here.
Okay.
So this is the object that we have received from the server.
It includes with the automatic generated password hash.
But not actual password.
See in the database it just stores the password hash.
So the same is included over here.
And after successful registration.
It automatically redirects to cities.
That’s fine.
Now in the register template.
register.component.html
For the password and confirm password.
Input type should be password.
Even here as well.
Input type equal to password.
So overall we have created account controller.
That receives the POST request.
And we are making a POST request.
Through account service in the Angular application.
Like this.
And the URL must include with HTTPS.
And make sure you have added the same localhost 4200.
In the appsettings.json file.
And make sure you enabled cards for the same.
In the program.cs file.
Use cards.
As well as.
Add cards.
Both are required.
But what is missing here really is.
A password and confirm password must match validation.
Let me create a custom validation for the same in Angular.
So right click on the app folder in Angular application.
Add a new folder.
Folder name is validators.
Right click on validators.
Add new item.
General.
Under web you have.
Type script file.
File name is custom validators.ts.
It’s a custom file.
Not a model class.
And not a service.
So within here.
Export a function.
For example compare validation.
It compares two controls.
Control to validate.
And control to compare.
Return type is validation errors.
Or null.
Get the form group.
This is totally Angular code.
We are not intended to explain the same in detail.
In case if you know Angular.
You know already all these things.
So we are getting the form group.
And then accessing the control to compare.
As well as control to validate.
And then we will try to compare them.
So if the values doesn’t match.
If it is not equal to the matching control value.
Then in the form group.
For the control to compare.
We will set an error.
We will call the method only if it is not equal to null.
So question mark dot.
Conditional access.
Valid equal to false.
And you should return an object.
With the property and true.
So if you return this type of object.
It indicates that it is invalid value.
Otherwise you can return null.
That indicates the value is valid.
Okay compilation is successful.
And add this validation to the form group.
So go to the register component ts file.
While creating the form group.
As a form level validation.
Add this.
Validators.
And we have one validator.
That is compare validator.
Import it from the file.
Name of the control to validate is password.
Control to compare is confirm password.
Add appropriate error message in the template.
Go to the register component html file.
Near the confirm password.
Add another error message.
As soon as you have got compare validator error.
Display error message.
Now test again.
This time if you enter an invalid password and confirm password.
Which doesn’t match.
You will get error message immediately.
And also in the same register component html file.
For the outer container set the width as.
75 percent.
W75.
So it increases overall container width.
So the labels have sufficient width then.
And also in the register component ts file.
In the register submitted method.
You have to make a request only when.
All the values are valid.
So if the form group is valid.
Then only we have to make a request otherwise not.
So keep this entire condition.
Okay we are checking if the form group is valid.
Then only we will proceed to make a request otherwise not.
So now in this case.
If you try to click on submit button without entering anything.
It doesn’t make any request.
But it has to show the error messages right.
It doesn’t show because.
We have to keep this statement outside the if condition.
So as soon as if the user clicks on the submit button.
Unconditionally this is register submitted must be true.
So that the condition in the html template becomes true.
To show error messages.
So you can see span tag error messages displayed there.
So overall we have created user interface for registration form.
And after entering the details.
It inserts the same into the AspNet users table.
You can see the same over here.
Go to the SQL server object explorer.
Local DB MS SQL local DB our database series database tables.
Now you can see AspNet users table.
With appropriate columns.
Right click on AspNet users table view data.
Now you can see our username that is Harsha and other details as you can see.
The password is stored as hash.
You can see password hash column.
It internally hashes the password automatically.
So when the user tries to log in next time.
The entered text box value also gets converted into hash.
Then hashes are gets compared.
It doesn’t compare the actual string value directly.
That’s fine.
So in the next lecture we are going to create endpoint for login.
Play Play Stop Play Play Play Play Play Play Play Play Start Start Start