Logging into Pentaho

Before any interaction with Pentaho, the user must be authenticated through a valid session. To get a valid session in Pentaho you will need a login form, to ask for user's credentials (username and password). Of course you could reuse a login form you already have into your existing application, but in this section you will learn how to develop a very basic login component from scratch.

1. Creating the login component

To create a new component into your application, open a terminal and execute the following command from the root of your project.

ng g component login

This command creates the login folder into app and setup the project to work with it.

2. Adding the login component to routing

Of course, you want your new login page to be routed into your application, in this case on /login path. To reach that goal, edit the app.module.ts file into the src/app path and the following routing.

const appRoutes: Routes = [
  ...,
  { path: 'login', component: LoginComponent }
];

3. Adding the new page to the main menu

In our basic case the main menu is defined directly into the app.component.html file into the src/app folder. To add the link, edit the html file and add the following source code in the menu area.

...<br/>
<a routerLink="/login">Login</a>

4. Developing the LoginComponent

Once done, it's time to develop the login component.

4.1. Developing the HTML

Edit the login.component.html file into src/app/login folder, as following.

<form>
  <div class="form-group">
    <label for="username">Username</label>
    <input #username type="text" required />
  </div>
  <div class="form-group">
    <label for="username">Password</label>
    <input #password type="password" required />
  </div>
  <button type="submit" (click)="onSubmit(username.value, password.value)">Submit</button>
</form>
<p>{{loginMessage}}</p>

To make the login form more "sexy", feel free to use a different HTML.

4.2. Developing the Typescript

Edit the login.component.ts file into src/app/login folder, as following.

import { Router } from '@angular/router';
import { PentahoDashboardService } from 'pentaho-dashboard';

...

  loginMessage = '';

  constructor(
    private router: Router,
    private pentahoDashboardService: PentahoDashboardService) { }

  onSubmit(
    username: string,
    password: string) {

    if (this.pentahoDashboardService.isLoggedIn()) {
      this.router.navigate(['/']);
    }
    else {
      this.pentahoDashboardService.setUsername(username);
      this.pentahoDashboardService.setPassword(password);
      this.pentahoDashboardService.logIn('/');
      if (this.pentahoDashboardService.isNotLoggedIn()) {
        this.loginMessage = 'Cannot login on Pentaho.<br/>Try to login again.';
        return false;
      }
    }
  }

5. Using the login

Once done, run the npm start command from a terminal and open a browser at http://localhost:4200. Clicking on the Login link, this is what you are going to see.

Filling the requested fields with a username and password valid in Pentaho, you will have access to a new session, ready to be used into your application.

As an example, you can try with:

• Username: admin
• Password: password