Part I - First Component

First Step – Adding login

The first step on this tutorial will be to add a login component to learn how to interact with the Bexstream backend API.

1 – Creating the login component

ng generate component login

This command creates 3 files:

login.component.ts login.component.html login.component.less

2 – Adding the login form

Add to the login.component.ts file the following code:

Listing 1 login.component.ts
 1import { Component, OnInit } from '@angular/core';
 2import { FormBuilder } from '@angular/forms';
 3
 4@Component({
 5    selector: 'app-login',
 6    templateUrl: './login.component.html',
 7    styleUrls: ['./login.component.less']
 8})
 9export class LoginComponent implements OnInit {
10
11    user = { username: '', password: '' }; // see body on OpenAPI definition for POST /api/v1/auth/user
12
13    loginForm = this.formBuilder.group({
14        username: '',
15        password: ''
16    });
17
18    constructor(private formBuilder: FormBuilder) { }
19
20    ngOnInit(): void {
21        this.user = { username: '', password: '' };
22    }
23
24    /**
25    * User authentication method
26    */
27    public authenticate(): void {
28    }
29
30
31}

Since we will be using ReactiveForms we need to add this module to our app module, located in app.module.ts.

Listing 2 app.module.ts
 1import { BrowserModule } from '@angular/platform-browser';
 2import { NgModule } from '@angular/core';
 3import { ReactiveFormsModule } from '@angular/forms';
 4
 5import { AppRoutingModule } from './app-routing.module';
 6import { AppComponent } from './app.component';
 7import { LoginComponent } from './login/login.component';
 8
 9@NgModule({
10    declarations: [
11        AppComponent,
12        LoginComponent
13    ],
14    imports: [
15        BrowserModule,
16        AppRoutingModule,
17        ReactiveFormsModule,
18    ],
19    providers: [],
20    bootstrap: [AppComponent]
21})
22export class AppModule { }

Attention

After adding a new module, we must restart our angular app. Stop the running ng serve and run it again.

Edit login.component.html with the following code:

Listing 3 login.component.html
 1<h3>Login Form</h3>
 2
 3<form [formGroup]="loginForm" (ngSubmit)="authenticate()">
 4
 5<div>
 6    <label for="username">
 7        Username
 8    </label>
 9    <input id="username" type="text" formControlName="username">
10</div>
11
12<div>
13    <label for="password">
14        Password
15    </label>
16    <input id="password" type="password" formControlName="password">
17</div>
18
19<button class="button" type="submit">Login</button>
20
21</form>

3 – Adding the component to the app

First, clear app.component.html file and add the following line:

Listing 4 app.component.html
1<router-outlet id="parent-router-outlet"></router-outlet>

The router-outlet turns our application into a single page application where to a certain route (ex. http://localhost:4200/drones) matches with a Component (ex. DroneListComponent).

Second, lets add a route and the corresponding component to the “routes” variable:

Listing 5 app-routing.module.ts
 1import { NgModule } from '@angular/core';
 2import { Routes, RouterModule } from '@angular/router';
 3import { LoginComponent } from './login/login.component';
 4
 5const routes: Routes = [
 6    { path: '', component: LoginComponent },
 7];
 8
 9@NgModule({
10    imports: [RouterModule.forRoot(routes)],
11    exports: [RouterModule]
12})
13export class AppRoutingModule { }

In our case the root url (“/”) will show our LoginComponent.

4 – Invoking bexstream backend API

We will use HTTP, to communicate with the bexstream API. So the first step is to import it to our App module in app.module.ts:

Listing 6 app.module.ts
 1import { BrowserModule } from '@angular/platform-browser';
 2import { NgModule } from '@angular/core';
 3import { ReactiveFormsModule } from '@angular/forms';
 4import { HttpClientModule } from '@angular/common/http';
 5
 6import { AppRoutingModule } from './app-routing.module';
 7import { AppComponent } from './app.component';
 8import { LoginComponent } from './login/login.component';
 9
10@NgModule({
11    declarations: [
12        AppComponent,
13        LoginComponent
14    ],
15    imports: [
16        BrowserModule,
17        AppRoutingModule,
18        ReactiveFormsModule,
19        HttpClientModule
20    ],
21    providers: [],
22    bootstrap: [AppComponent]
23})
24export class AppModule { }

Restart your angular app.

Afterwards, we will add the communication code to the authenticate method on login.component.ts:

Listing 7 login.component.ts
 1import { Component, OnInit } from '@angular/core';
 2import { FormBuilder } from '@angular/forms';
 3import { HttpClient } from '@angular/common/http';
 4import { User } from './models/user';
 5
 6@Component({
 7    selector: 'app-login',
 8    templateUrl: './login.component.html',
 9    styleUrls: ['./login.component.less']
10})
11export class LoginComponent implements OnInit {
12
13    user = { username: '', password: '' }; // see body on OpenAPI definition for POST /api/v1/auth/user
14
15    loginForm = this.formBuilder.group({
16        username: '',
17        password: ''
18    });
19
20    constructor(private formBuilder: FormBuilder,
21                private http: HttpClient) { }
22
23    ngOnInit(): void {
24        this.user = { username: '', password: '' };
25    }
26
27    /**
28    * User authentication method
29    */
30    public authenticate(): void {
31        const loginFormValues = this.loginForm.value
32        this.user.username = loginFormValues.username;
33        this.user.password = loginFormValues.password;
34
35        this.http.post<any>('https://bexstream-preprod.beyond-vision.com/api/v1/auth/user', this.user)
36            .subscribe({
37                next: (result) => {
38                    if (result.token) {
39                        alert(`${this.user.username} has been successfully logged in!`);
40                    } else {
41                        alert(`Unexpected response from the server for /api/v1/auth/user. Check the network request/response for details!`);
42                    }
43                },
44                error: (err) => {
45                    alert(`Error on login. Please check the username and the password!.`);
46                }
47            });
48    }
49
50}

Finally, to test that you’ve complete the PART I, try to login with:

user: drone-pilot-tutorial

pass: drone-pilot-tutorial

If everything was done correctly, you should have an alert pop-up with the login result.

../../_images/login.webp