helppage,mfa,accountlinking page changes

bcgov · Jul 15, 2024 · f9678c4 · f9678c4
1 parent a88743f
commit f9678c4
Show file tree

Hide file tree

Showing 15 changed files with 873 additions and 566 deletions.
diff --git a/...ce/apps/pidp/src/app/features/access/pages/access-requests-page/access-requests.page.scss b/...ce/apps/pidp/src/app/features/access/pages/access-requests-page/access-requests.page.scss
@@ -128,9 +128,10 @@
     }
 
     fa-icon {
-      padding-left: 5px;
-      padding-right: 5px;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
       color: #d9d9d9;
+      font-size: 1.75rem;
     }
 
     ul li {
@@ -179,6 +180,16 @@
     .home-text{
       display: none;
     }
+
+    fa-icon {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      font-size: 1.25rem;
+    }
+
+    span {
+      font-size: 0.8rem;
+    }
   }
 
   .search-content {
@@ -234,6 +245,15 @@
 
   .breadcrumb {
     margin: 0px 20px 0px 20px;
+    fa-icon {
+      padding-left: 0.6rem;
+      padding-right: 0.6rem;
+      font-size: 1.5rem;
+    }
+
+    span {
+      font-size: 0.9rem;
+    }
   }
 
   .search-content {

diff --git a/...p/src/app/features/access/pages/bc-provider-application/bc-provider-application.page.html b/...p/src/app/features/access/pages/bc-provider-application/bc-provider-application.page.html
@@ -1,4 +1,19 @@
 <div class="container-box container" uiPidpInjectViewportCss>
+  <nav class="breadcrumb">
+    <ul>
+      <li><button uiTextButton (click)="onBack()"><img src="/assets/images/icons/icon-home.svg" alt="Home"> <span class="home-text">Home</span></button></li>
+      <li><fa-icon class="fa-duotone" [icon]="faAngleRight"></fa-icon></li>
+      <li>
+        <button
+          uiTextButton
+          (click)="navigateTo(AccessRoutes.routePath(AccessRoutes.ACCESS_REQUESTS))">
+          <span>Access</span>
+        </button>
+      </li>
+      <li><fa-icon class="fa-duotone" [icon]="faAngleRight"></fa-icon></li>
+      <li><button uiTextButton disabled><span>BC Provider account information</span></button></li>
+    </ul>
+  </nav>
   <div class="content-box">
     <header>
       <h2>BC Provider account information</h2>

diff --git a/...p/src/app/features/access/pages/bc-provider-application/bc-provider-application.page.scss b/...p/src/app/features/access/pages/bc-provider-application/bc-provider-application.page.scss
@@ -78,6 +78,37 @@ ol {
 }
 
 .viewport-all {
+  .breadcrumb {
+    ul {
+      display: flex;
+      align-items: center;
+      padding: 0px;
+    }
+
+    fa-icon {
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      color: #d9d9d9;
+      font-size: 1.75rem;
+    }
+
+    ul li {
+      display: flex;
+    }
+
+    span {
+      font-size: 1rem;
+    }
+
+    button:disabled {
+      color: #aaa !important;
+    }
+
+    img {
+      margin-right: 10px;
+      margin-bottom: 6px;
+    }
+  }
   & header {
     margin: var(--header-margin);
     & h2 {
@@ -409,6 +440,24 @@ ol {
 }
 
 .viewport-xsmall {
+  .breadcrumb {
+    margin: 0px 20px 0px 20px;
+
+    img{
+      margin-right: 2px;
+    }
+    span {
+      font-size: 0.8rem;
+    }
+    .home-text{
+      display: none;
+    }
+    fa-icon {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      font-size: 1.25rem;
+    }
+  }
   & header {
     & h2 {
       padding: calc(var(--gap) / 2) var(--gap);
@@ -427,3 +476,17 @@ ol {
     }
   }
 }
+.viewport-small {
+  .breadcrumb {
+    margin: 0px 20px 0px 20px;
+  }
+  fa-icon {
+    padding-left: 0.6rem;
+    padding-right: 0.6rem;
+    font-size: 1.5rem;
+  }
+
+  span {
+    font-size: 0.9rem;
+  }
+}
diff --git a/...idp/src/app/features/access/pages/bc-provider-application/bc-provider-application.page.ts b/...idp/src/app/features/access/pages/bc-provider-application/bc-provider-application.page.ts
@@ -22,6 +22,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
 
 import {
   EMPTY,
@@ -36,6 +37,7 @@ import {
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faCircleRight } from '@fortawesome/free-regular-svg-icons';
 import {
+  faAngleRight,
   faCircleCheck,
   faLockOpen,
   faUser,
@@ -53,6 +55,7 @@ import {
   DialogOptions,
   HtmlComponent,
   InjectViewportCssClassDirective,
+  TextButtonDirective,
 } from '@bcgov/shared/ui';
 
 import { APP_CONFIG, AppConfig } from '@app/app.config';
@@ -77,6 +80,7 @@ import { NeedHelpComponent } from '@app/shared/components/need-help/need-help.co
 import { DialogBcproviderCreateComponent } from '@app/shared/components/success-dialog/components/dialog-bcprovider-create.component';
 import { SuccessDialogComponent } from '@app/shared/components/success-dialog/success-dialog.component';
 
+import { AccessRoutes } from '../../access.routes';
 import { BcProviderApplicationFormState } from './bc-provider-application-form-state';
 import { BcProviderApplicationResource } from './bc-provider-application-resource.service';
 
@@ -102,18 +106,22 @@ import { BcProviderApplicationResource } from './bc-provider-application-resourc
     NgTemplateOutlet,
     ReactiveFormsModule,
     SuccessDialogComponent,
+    FaIconComponent,
+    TextButtonDirective,
   ],
 })
 export class BcProviderApplicationPage
   extends AbstractFormPage<BcProviderApplicationFormState>
   implements OnInit
 {
   public faCircleCheck = faCircleCheck;
+  public faAngleRight = faAngleRight;
   public faCircleRight = faCircleRight;
   public faLockOpen = faLockOpen;
   public faUser = faUser;
   public faXmark = faXmark;
   public formState: BcProviderApplicationFormState;
+  public AccessRoutes = AccessRoutes;
   public showErrorCard = false;
   public showMessageCard = false;
   public completed: boolean | null;
@@ -142,6 +150,7 @@ export class BcProviderApplicationPage
     private documentService: DocumentService,
     private loadingOverlayService: LoadingOverlayService,
     private logger: LoggerService,
+    private router: Router,
     private navigationService: NavigationService,
     private partyService: PartyService,
     private resource: BcProviderApplicationResource,
@@ -208,7 +217,9 @@ export class BcProviderApplicationPage
       return this.navigationService.navigateToRoot();
     }
   }
-
+  public navigateTo(path: string): void {
+    this.router.navigateByUrl(path);
+  }
   protected performSubmission(): Observable<string | void> {
     const partyId = this.partyService.partyId;
     this.password = this.formState.password.value;

diff --git a/...apps/pidp/src/app/features/auth/pages/link-account-confirm/link-account-confirm.page.html b/...apps/pidp/src/app/features/auth/pages/link-account-confirm/link-account-confirm.page.html
@@ -1,9 +1,16 @@
 <div class="container-box" uiPidpInjectViewportCss>
   <nav class="breadcrumb">
     <ul>
-      <li><a>Home</a></li>
+      <li>
+        <button uiTextButton (click)="onBack()">
+          <img src="/assets/images/icons/icon-home.svg" alt="Home" />
+          <span class="home-text">Home</span>
+        </button>
+      </li>
       <li><fa-icon class="fa-duotone" [icon]="faAngleRight"></fa-icon></li>
-      <li><a class="active">Active Page</a></li>
+      <li>
+        <button uiTextButton disabled><span>Active Page</span></button>
+      </li>
     </ul>
   </nav>
   <div class="content-box">