Virtual Checker built with Angular + Firebase + Flutter + JakartaEE + Microprofile + PostgreSQL on Azure - Parte 2

 

In the last post, we start with the explanation of our authentication/authorization server that provides JWT Tokens. 

In this post, we start to build the first version of our angular application. 

Source Code: https://github.com/joedayz/web-inspector (tag v1.0)

1. Create the angular application with Angular CLI. 

npm install -g @angular/cli

2. Add these dependencies: Angular Material, Angular JWT, Angular Font Awesome, Angular2 Test Mask, SweetAlert2.

3. In Assets we have some fonts and images for our web admin:

4. In environments configure the principal PATHS:

Note:  localhost must be changed with the domain name or IP of your server.

 

5. The routing shows the initial navigation: 

app-routing.module.ts

The GuardService makes sure that a person necessarily always logs in.

6. Angular Material components are declared in a unique module.  It permits to add more easily in other modules. 

7. The main Dashboard has a drop-down menu, and toolbar and will serve to display the content in the central part.

The result is:

Note: We need to log in for access to the dashboard. It cannot be accessed directly because exists a GuardService.

8. Finally the Login:

The LoginService has the logic that calls the authentication service to get one access token if the username and password is a valid user in our Azure PostgreSQL. 

The LoginService shows how the data is sent to the authentication service. The Token returned is saved in the session storage.

endpoint = `${environment.AUTH_ENDPOINT}/login`;    

And that's all, for now. In the next post, we show an advanced version of its web admin.

Enjoy!

Joe