The application will crash at this point, but that's ok! This is expected. We will fix it in a moment.
Step 2: RootComponent
Until now, we've used the default hello world template at src/app/components/app.component.ts. We'll remove this file, replacing it with the root component.
If you check the index.html file, you will see that there is an element app-root which is where the application will be embedded within.
Note how we have three new components in the root component.
app-navigation is where the top nav bar will be inserted.
app-breadcrumbs will show where you are in the application, right below the nav bar but above the main content section.
router-outlet is where the Angular router will inject the rest of the components dynamically, based on the logic we implement.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app-root.component.html',
})
export class AppComponent {
title = 'pm4Angular';
constructor() {}
}
Step 2: LoginComponent
Let's craft our inaugural component: the login page. The flow will use Authorization Code grant_type. This will redirect the user to the ProcessMaker installation you created the client application in, where they login and are then redirected back to the application with the authorization code.
The components we will be creating will consist of two files: the template file and the typescript file.
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
})
export class LoginComponent implements OnInit {
// Injecting AuthService and ActivatedRoute to handle authentication and route parameters
constructor(
public authService: AuthService,
private activatedRoute: ActivatedRoute
) {}
ngOnInit() {
// Subscribing to query parameters to detect the authorization code
this.activatedRoute.queryParams.subscribe((params) => {
// Checking if the 'code' parameter is present
if (params['code']) {
// Calling getAccessToken method in AuthService to handle the OAuth token exchange
// No need for then or catch here as the AuthService method takes care of the response handling
this.authService.getAccessToken(params['code']);
}
});
}
// Method to initiate the login process by calling the login method in AuthService
login() {
this.authService.login();
}
// Method to initiate the logout process by calling the logout method in AuthService
logout() {
this.authService.logout();
}
}
Step 3: NavigationComponent
The navigation component houses the header logo and a logout button.
The ngIf="authService.authenticated" ensures the navbar displays only when the user is authenticated using our auth service.
import { Component } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { DbService } from 'src/app/services/db.service';
import { ActivatedRoute, Router } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
})
export class NavigationComponent {
title: any;
homeCrumb: any;
currentCrumb: any;
constructor(
public authService: AuthService,
public db: DbService,
public route: ActivatedRoute,
public router: Router,
public browserModule: BrowserModule
) {}
// Method to log out the user by calling the logout method from the AuthService
logout() {
this.authService.logout();
}
}
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { DbService } from 'src/app/services/db.service';
import { ActivatedRoute, Router } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'app-breadcrumbs',
templateUrl: './app-breadcrumbs.component.html',
})
export class AppBreadcrumbsComponent implements OnInit {
title: any;
homeCrumb: any;
currentCrumb: any;
constructor(
public authService: AuthService,
public db: DbService,
public route: ActivatedRoute,
public router: Router,
public browserModule: BrowserModule
) {}
ngOnInit(): void {}
currentPageTitle() {
return (this.title = window.document.title);
}
homePageTitle() {
return (this.homeCrumb = 'Home');
}
}
Step 5: AppModule
The updated app.module.ts contains the dependencies:
Router
RootComponent
LoginComponent
NavigationComponent
AppBreadCrumbsComponent
app.module.ts
import { NgModule } from '@angular/core';
import '@angular/compiler';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './routing/app-routing.module';
import { RootComponent } from './components/root/app-root.component';
import { LoginComponent } from './components/login/login.component';
import { NavigationComponent } from './components/nav/navigation.component';
import { AppBreadcrumbsComponent } from './components/breadcrumbs/app-breadcrumbs.component';
@NgModule({
declarations: [
RootComponent,
LoginComponent,
NavigationComponent,
AppBreadcrumbsComponent,
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
CommonModule,
AppRoutingModule,
],
providers: [],
bootstrap: [RootComponent],
})
export class AppModule {}
Review
By following the steps, navigating to http://localhost:4200/#/login should display the login page.
With the correct OAuth credentials and Client Application setup, logging into ProcessMaker should redirect you back to the login page, now displaying the navbar and breadcrumbs, indicating a successful login.
