Pdip 1114 mfa polish (#638)

* Reset MFA section added for profile dropdown. * MFA polished. * FAQ - MFA reset steps changed to bullet points. * add to mobile menu * rearrange imports * implement onDestroy --------- Co-authored-by: Panos Hatzinikolaou <[email protected]>
bcgov · Dec 5, 2024 · 8121909 · 8121909
1 parent 83ddef6
commit 8121909
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 3 deletions.
diff --git a/...space/apps/pidp/src/app/features/access/pages/bc-provider-edit/bc-provider-edit.page.html b/...space/apps/pidp/src/app/features/access/pages/bc-provider-edit/bc-provider-edit.page.html
@@ -2,7 +2,7 @@
   <app-breadcrumb [breadcrumbs]="breadcrumbsData"></app-breadcrumb>
   <div class="content-box">
     <header>
-      <h1>BC Provider Account Management</h1>
+      <h1>BCProvider Account Management</h1>
       <h3>Set a new password or reset your MFA at your convenience</h3>
     </header>
     <ng-container *ngIf="showErrorCard">
@@ -95,7 +95,7 @@ <h1><strong>Set new password</strong></h1>
               (click)="toggleTooltip('mfa')"></fa-icon>
           </div>
           <h1>
-            <strong>Reset your multifactor authentication (MFA)</strong>
+            <strong>Reset your multi-factor authentication (MFA)</strong>
           </h1>
           <p class="mfa-disclaimer">Only available if you login with BCSC</p>
           <div class="mfa-content-boxes">

diff --git a/...space/apps/pidp/src/app/features/access/pages/bc-provider-edit/bc-provider-edit.page.scss b/...space/apps/pidp/src/app/features/access/pages/bc-provider-edit/bc-provider-edit.page.scss
@@ -57,6 +57,9 @@
   --header-margin: unset;
   --avatar-size: 4rem;
   --content-padding: var(--gap);
+  ul li{
+    list-style-type: decimal;
+  }
 }
 
 .viewport-medium {

diff --git a/workspace/apps/pidp/src/app/features/faq/pages/help/help.page.html b/workspace/apps/pidp/src/app/features/faq/pages/help/help.page.html
@@ -216,6 +216,30 @@ <h1>Frequently asked questions</h1>
         </p>
       </mat-expansion-panel>
     </div>
+    <div class="faq-item">
+      <mat-expansion-panel
+        class="faq-expansion-panel"
+        (opened)="panelOpenState.set(true)"
+        (closed)="panelOpenState.set(false)">
+        <mat-expansion-panel-header>
+          <mat-panel-title
+            ><b
+              >How do I reset my MFA on BCProvider?</b
+            ></mat-panel-title
+          >
+        </mat-expansion-panel-header>
+        <ul>
+          <li>Click Access</li>
+          <li>Click BC Provider Account</li>
+          <li>On the right-hand side click “Reset my MFA” link</li>
+          <li>Click continue, system will unpair your phone</li>
+          <li>After completely the unpairing, you will be prompted to login</li>
+          <li>Select the BCprovider acccount</li>
+          <li>Enter your current password</li>
+          <li>After successfully logging into your account, you will be prompted to setup MFA on a phone or tablet.</li>
+        </ul>
+      </mat-expansion-panel>
+    </div>
     <div class="faq-item">
       <mat-expansion-panel
         class="faq-expansion-panel"

diff --git a/workspace/apps/pidp/src/app/features/shell/components/navbar-menu/nav-menu.html b/workspace/apps/pidp/src/app/features/shell/components/navbar-menu/nav-menu.html
@@ -56,6 +56,12 @@
               (click)="navigateTo(ProfileRoutes.routePath(ProfileRoutes.USER_ACCESS_AGREEMENT))"
               >User Access Agreement</a
             >
+            <a
+              *ngIf="hasCredential(IdentityProvider.BC_PROVIDER)"
+              class="dropdown-links"
+              (click)="navigateTo(AccessRoutes.routePath(AccessRoutes.BC_PROVIDER_EDIT))"
+              >Password and MFA reset</a
+            >
           </div>
         </div>
       </a>
@@ -115,6 +121,12 @@
             (click)="navigateTo(ProfileRoutes.routePath(ProfileRoutes.USER_ACCESS_AGREEMENT))"
             >User Access Agreement</a
           >
+          <a
+            *ngIf="hasCredential(IdentityProvider.BC_PROVIDER)"
+            class="sidenav-menu-item"
+            (click)="navigateTo(AccessRoutes.routePath(AccessRoutes.BC_PROVIDER_EDIT))"
+            >Password and MFA reset</a
+          >
           <a
             *ngFor="let menuItem of menuItems"
             class="sidenav-menu-item"

diff --git a/workspace/apps/pidp/src/app/features/shell/components/navbar-menu/nav-menu.model.ts b/workspace/apps/pidp/src/app/features/shell/components/navbar-menu/nav-menu.model.ts
@@ -0,0 +1,6 @@
+import { IdentityProvider } from '@app/features/auth/enums/identity-provider.enum';
+
+export interface Credential {
+  id: number;
+  identityProvider: IdentityProvider;
+}
diff --git a/...pace/apps/pidp/src/app/features/shell/components/navbar-menu/nav-menu.resource.service.ts b/...pace/apps/pidp/src/app/features/shell/components/navbar-menu/nav-menu.resource.service.ts
@@ -0,0 +1,28 @@
+import { HttpErrorResponse } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { ApiHttpClient } from "@app/core/resources/api-http-client.service";
+import { catchError, Observable, throwError } from "rxjs";
+import { Credential } from "./nav-menu.model";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NavMenuResource {
+  public constructor(
+    protected apiResource: ApiHttpClient
+  ) {}
+
+  public getCredentials(partyId: number): Observable<Credential[]> {
+    return this.apiResource
+      .get<Credential[]>(this.getResourcePath(partyId))
+      .pipe(
+        catchError((error: HttpErrorResponse) => {
+          return throwError(() => error);
+        }),
+      );
+  }
+
+  protected getResourcePath(partyId: number): string {
+    return `parties/${partyId}/credentials`;
+  }
+}
diff --git a/workspace/apps/pidp/src/app/features/shell/components/navbar-menu/nav-menu.ts b/workspace/apps/pidp/src/app/features/shell/components/navbar-menu/nav-menu.ts
@@ -4,6 +4,8 @@ import {
   EventEmitter,
   Input,
   OnChanges,
+  OnDestroy,
+  OnInit,
   Output,
   SimpleChanges,
   ViewChild,
@@ -24,6 +26,8 @@ import {
   RouterOutlet,
 } from '@angular/router';
 
+import { Observable, Subject, takeUntil } from 'rxjs';
+
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faBell } from '@fortawesome/free-regular-svg-icons';
 
@@ -37,9 +41,15 @@ import {
 } from '@bcgov/shared/ui';
 import { RoutePath } from '@bcgov/shared/utils';
 
+import { PartyService } from '@app/core/party/party.service';
+import { AccessRoutes } from '@app/features/access/access.routes';
+import { IdentityProvider } from '@app/features/auth/enums/identity-provider.enum';
 import { AlertCode } from '@app/features/portal/enums/alert-code.enum';
 import { ProfileRoutes } from '@app/features/profile/profile.routes';
 
+import { Credential } from './nav-menu.model';
+import { NavMenuResource } from './nav-menu.resource.service';
+
 @Component({
   selector: 'app-nav-menu',
   templateUrl: './nav-menu.html',
@@ -62,7 +72,7 @@ import { ProfileRoutes } from '@app/features/profile/profile.routes';
     NgClass,
   ],
 })
-export class NavMenuComponent implements OnChanges {
+export class NavMenuComponent implements OnChanges, OnInit, OnDestroy {
   @Input() public alerts: AlertCode[] | null = [];
   @Input() public menuItems!: DashboardMenuItem[];
   @Input() public emailSupport!: string;
@@ -79,21 +89,41 @@ export class NavMenuComponent implements OnChanges {
   public isLogoutMenuItemVisible = false;
   public isTopMenuVisible = false;
   public ProfileRoutes = ProfileRoutes;
+  public AccessRoutes = AccessRoutes;
   public showCollegeAlert = false;
   public faBell = faBell;
   public AlertCode = AlertCode;
+  public credentials: Credential[] = [];
+  public credentials$: Observable<Credential[]>;
+  private unsubscribe$ = new Subject<void>();
+  public IdentityProvider = IdentityProvider;
 
   public constructor(
     private viewportService: ViewportService,
     private router: Router,
+    private resource: NavMenuResource,
+    private partyService: PartyService,
   ) {
     this.viewportService.viewportBroadcast$.subscribe((viewport) =>
       this.onViewportChange(viewport),
     );
+    const partyId = this.partyService.partyId;
+    this.credentials$ = this.resource.getCredentials(partyId);
+  }
+
+  public ngOnInit(): void {
+    this.handleLinkedAccounts();
   }
+
   public ngOnChanges(_: SimpleChanges): void {
     this.refresh();
   }
+
+  public ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
   public onMiniMenuButtonClick(): void {
     // Toggle display of the sidenav.
     this.isSidenavOpened = !this.isSidenavOpened;
@@ -137,6 +167,11 @@ export class NavMenuComponent implements OnChanges {
     }
     return undefined;
   }
+
+  public hasCredential(idp: IdentityProvider): boolean {
+    return this.credentials.some((c) => c.identityProvider === idp);
+  }
+
   public onLogout(): void {
     this.logout.emit();
   }
@@ -146,6 +181,14 @@ export class NavMenuComponent implements OnChanges {
     }
   }
 
+  private handleLinkedAccounts(): void {
+    this.credentials$
+      .pipe(takeUntil(this.unsubscribe$))
+      .subscribe((credentials) => {
+        this.credentials = credentials;
+      });
+  }
+
   private onViewportChange(viewport: PidpViewport): void {
     this.viewport = viewport;
     this.refresh();