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

Firstly the User model must be added to our application. Create a folder called “models” under “src/app/login” and add a new file called “user.ts”. Add the following code:

Listing 1 user.ts

export class User {
    id: string;
    username: string;
    email: string;
    profileImage: string;
    password: string;
    hash: string;
    description: string;
    createdDate: Date;
    token: string;
    roles: any[];
    organization: any;
    constructor() {
        this.id = '';
        this.username = '';
        this.email = '';
        this.profileImage = '';
        this.password = '';
        this.hash = '';
        this.description = '';
        this.createdDate = new Date();
        this.token = '';
        this.roles = [];
    }
}

Secondly add to the login.component.ts file the following code:

Listing 2 login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { User } from './models/user';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {

    user: User = new User();

    loginForm = this.formBuilder.group({
        username: '',
        password: ''
    });

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit(): void {
    }

    /**
    * User authentication method
    */
    public authenticate(): void {
    }


}

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

Listing 3 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
    declarations: [
        AppComponent,
        LoginComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        ReactiveFormsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export 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 4 login.component.html

<h3>Login Form</h3>

<form [formGroup]="loginForm" (ngSubmit)="authenticate()">

<div>
    <label for="username">
        Username
    </label>
    <input id="username" type="text" formControlName="username">
</div>

<div>
    <label for="password">
        Password
    </label>
    <input id="password" type="password" formControlName="password">
</div>

<button class="button" type="submit">Login</button>

</form>

3 – Adding the component to the app

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

Listing 5 app.component.html

<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 6 app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
    { path: '', component: LoginComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export 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 7 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
    declarations: [
        AppComponent,
        LoginComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        ReactiveFormsModule,
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Restart your angular app.

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

Listing 8 login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { User } from './models/user';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {

    user: User = new User();

    loginForm = this.formBuilder.group({
        username: '',
        password: ''
    });

    constructor(private formBuilder: FormBuilder,
                private http: HttpClient) { }

    ngOnInit(): void {
    }

    /**
    * User authentication method
    */
    public authenticate(): void {
        const loginFormValues = this.loginForm.value
        this.user.username = loginFormValues.username;
        this.user.password = loginFormValues.password;

        this.http.post<any>('https://bexstream.beyond-vision.pt/api/v1/auth/user', this.user)
          .subscribe((result) => {
            if (result.user) {
                alert(`${result.user.username} has been successfully logged in!`)
            }
        });
    }

}

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.