Pidp 1044 banner for server outage notification (#600)

Banner component added for server outage notification.

workspace/apps/pidp/src/app/features/auth/pages/login/banner-find.response.model.ts

@@ -0,0 +1,6 @@
+export interface BannerFindResponse {
+  component: string;
+  status: string;
+  header: string;
+  body: string;
+}

workspace/apps/pidp/src/app/features/auth/pages/login/login-resource.service.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+
+import { provideAutoSpy } from 'jest-auto-spies';
+
+import { ApiHttpClient } from '@app/core/resources/api-http-client.service';
+
+import { LoginResource } from './login-resource.service';
+
+describe('LoginResource', () => {
+  let service: LoginResource;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideAutoSpy(ApiHttpClient)],
+    });
+
+    service = TestBed.inject(LoginResource);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

workspace/apps/pidp/src/app/features/auth/pages/login/login-resource.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs';
+
+import { ApiHttpClient } from '@app/core/resources/api-http-client.service';
+
+import { BannerFindResponse } from './banner-find.response.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoginResource {
+  public constructor(private apiResource: ApiHttpClient) {}
+
+  public findBanners(component: string): Observable<BannerFindResponse[]> {
+    return this.apiResource.get<BannerFindResponse[]>(
+      `banners?component=${component}`,
+    );
+  }
+}

workspace/apps/pidp/src/app/features/auth/pages/login/login.constants.ts

@@ -0,0 +1 @@
+export const component = 'login';

workspace/apps/pidp/src/app/features/auth/pages/login/login.page.html

@@ -12,41 +12,47 @@
 
       <section class="welcome-section">
         <div class="welcome-section-container">
-          <div class="welcome-container">
-            <div class="title-content-container">
-              <h1 class="title">
-                <span class="title-text">
-                  <strong>OneHealthID Service</strong>
-                </span>
-              </h1>
-              <section class="title-site-description">
-                <p>
-                  A suite of identity-related products and services for
-                  healthcare providers in BC.
-                </p>
-              </section>
-            </div>
-            <ng-container *ngTemplateOutlet="login"></ng-container>
-          </div>
-          <div class="links">
-            <app-need-help
-              customClass="need-help-large"
-              [showIcon]="true"></app-need-help>
-            <div class="about">
-              <a
-                uiAnchor
-                href="https://www2.gov.bc.ca/gov/content/health/practitioner-professional-resources/onehealthid-service">
-                About, FAQs, Guides
-                <i class="material-icons-outlined">arrow_circle_right</i>
-              </a>
-            </div>
+          <div *ngIf="banners.length > 0; else welcomesection">
+            <app-banner [banners]="banners"></app-banner>
           </div>
         </div>
       </section>
     </div>
   </div>
 </ui-layout-header-footer>
 
+<ng-template #welcomesection>
+  <div class="welcome-container">
+    <div class="title-content-container">
+      <h1 class="title">
+        <span class="title-text">
+          <strong>OneHealthID Service</strong>
+        </span>
+      </h1>
+      <section class="title-site-description">
+        <p>
+          A suite of identity-related products and services for healthcare
+          providers in BC.
+        </p>
+      </section>
+    </div>
+    <ng-container *ngTemplateOutlet="login"></ng-container>
+  </div>
+  <div class="links">
+    <app-need-help
+      customClass="need-help-large"
+      [showIcon]="true"></app-need-help>
+    <div class="about">
+      <a
+        uiAnchor
+        href="https://www2.gov.bc.ca/gov/content/health/practitioner-professional-resources/onehealthid-service">
+        About, FAQs, Guides
+        <i class="material-icons-outlined">arrow_circle_right</i>
+      </a>
+    </div>
+  </div>
+</ng-template>
+
 <ng-template #login>
   <div class="login-container">
     <div class="login-container-app-button">

workspace/apps/pidp/src/app/features/auth/pages/login/login.page.scss

@@ -14,6 +14,9 @@ button.pidp-btn-link {
 }
 .viewport-all {
   & .welcome-section {
+    display: flex;
+    justify-content: center;
+
     & .title-content-container {
       display: flex;
       flex-direction: column;

workspace/apps/pidp/src/app/features/auth/pages/login/login.page.spec.ts

@@ -21,9 +21,11 @@ import {
   MicrosoftLogLevel,
 } from '@app/core/services/client-logs.service';
 import { DocumentService } from '@app/core/services/document.service';
+import { LoggerService } from '@app/core/services/logger.service';
 
 import { IdentityProvider } from '../../enums/identity-provider.enum';
 import { AuthService } from '../../services/auth.service';
+import { LoginResource } from './login-resource.service';
 import { LoginPage, LoginPageRouteData } from './login.page';
 
 describe('LoginPage', () => {
@@ -32,7 +34,7 @@ describe('LoginPage', () => {
   let clientLogsServiceSpy: Spy<ClientLogsService>;
   let authServiceSpy: Spy<AuthService>;
   let matDialogSpy: Spy<MatDialog>;
-
+  let loginResourceSpy: Spy<LoginResource>;
   let mockActivatedRoute: {
     snapshot: {
       queryParamMap?: ParamMap;
@@ -70,6 +72,8 @@ describe('LoginPage', () => {
         provideAutoSpy(ClientLogsService),
         provideAutoSpy(DocumentService),
         provideAutoSpy(MatDialog),
+        provideAutoSpy(LoginResource),
+        provideAutoSpy(LoggerService),
         ViewportService,
       ],
     }).compileComponents();
@@ -79,6 +83,18 @@ describe('LoginPage', () => {
     clientLogsServiceSpy = TestBed.inject<any>(ClientLogsService);
     authServiceSpy = TestBed.inject<any>(AuthService);
     matDialogSpy = TestBed.inject<any>(MatDialog);
+    loginResourceSpy = TestBed.inject<any>(LoginResource);
+
+    loginResourceSpy.findBanners.mockReturnValue(
+      of([
+        {
+          header: 'test',
+          body: 'test',
+          component: 'test',
+          status: '2',
+        },
+      ]),
+    );
   });
 
   describe('INIT', () => {

workspace/apps/pidp/src/app/features/auth/pages/login/login.page.ts

@@ -4,6 +4,7 @@ import {
   NgTemplateOutlet,
   UpperCasePipe,
 } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, Inject, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
@@ -29,11 +30,16 @@ import {
   MicrosoftLogLevel,
 } from '@app/core/services/client-logs.service';
 import { DocumentService } from '@app/core/services/document.service';
+import { LoggerService } from '@app/core/services/logger.service';
 import { AdminRoutes } from '@app/features/admin/admin.routes';
+import { BannerComponent } from '@app/shared/components/banner/banner.component';
 import { NeedHelpComponent } from '@app/shared/components/need-help/need-help.component';
 
 import { IdentityProvider } from '../../enums/identity-provider.enum';
 import { AuthService } from '../../services/auth.service';
+import { BannerFindResponse } from './banner-find.response.model';
+import { LoginResource } from './login-resource.service';
+import { component } from './login.constants';
 
 export interface LoginPageRouteData {
   title: string;
@@ -55,6 +61,7 @@ export interface LoginPageRouteData {
     NgOptimizedImage,
     NgTemplateOutlet,
     UpperCasePipe,
+    BannerComponent,
   ],
 })
 export class LoginPage implements OnInit {
@@ -65,6 +72,7 @@ export class LoginPage implements OnInit {
   public showOtherLoginOptions: boolean;
   public IdentityProvider = IdentityProvider;
   public providerIdentitySupport: string;
+  public banners: Array<{ header: string; body: string; status: string }> = [];
 
   public viewport = PidpViewport.xsmall;
   public isMobileTitleVisible = this.viewport === PidpViewport.xsmall;
@@ -83,6 +91,8 @@ export class LoginPage implements OnInit {
     private dialog: MatDialog,
     private documentService: DocumentService,
     private viewportService: ViewportService,
+    private loginResource: LoginResource,
+    private logger: LoggerService,
   ) {
     const routeSnapshot = this.route.snapshot;
 
@@ -111,6 +121,18 @@ export class LoginPage implements OnInit {
         })
         .subscribe();
     }
+
+    this.loginResource.findBanners(component).subscribe(
+      (data: BannerFindResponse[]) => {
+        this.banners = data;
+      },
+      (err: HttpErrorResponse) => {
+        this.logger.error(
+          '[LoginResource::findBanners] error has occurred: ',
+          err,
+        );
+      },
+    );
   }
 
   private onViewportChange(viewport: PidpViewport): void {

workspace/apps/pidp/src/app/shared/components/banner/banner.component.html

@@ -0,0 +1,15 @@
+<div class="banner-container" uiPidpInjectViewportCss>
+  <div class="banners-box">
+    <div *ngFor="let banner of banners">
+      <div class="card-styles card-header-icon banner-detail-box">
+        <h2>
+          <img src="/assets/images/icons/icon-warning.svg" alt="banner-logo" />
+          <span>{{ banner.header }}</span>
+        </h2>
+        <div class="banner-detail-content">
+          {{ banner.body }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

workspace/apps/pidp/src/app/shared/components/banner/banner.component.scss

@@ -0,0 +1,43 @@
+.viewport-all {
+  & .banners-box {
+    margin-top: 20%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    border: 2px solid rgba(255, 166, 0, 0.55);
+
+    & .card-styles {
+      background: rgba(255, 166, 0, 0.2);
+      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+      width: 27rem;
+      padding: 0.75rem;
+
+      h2 {
+        color: #036;
+        font-size: 1rem;
+        font-weight: 700;
+        padding-top: 0.25rem;
+        margin-bottom: 0;
+        span {
+          padding-left: 10px;
+        }
+      }
+      & .banner-detail-box {
+        & .banner-detail-content {
+          padding-left: 34px;
+        }
+      }
+    }
+  }
+}
+
+.viewport-xsmall {
+  & .banners-box {
+    width: 18rem;
+    margin-left: 15px;
+    margin-right: 15px;
+    & .card-styles {
+      width: 17.9rem;
+    }
+  }
+}

workspace/apps/pidp/src/app/shared/components/banner/banner.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent', () => {
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BannerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

workspace/apps/pidp/src/app/shared/components/banner/banner.component.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+import { InjectViewportCssClassDirective } from '@bcgov/shared/ui';
+
+@Component({
+  selector: 'app-banner',
+  templateUrl: './banner.component.html',
+  styleUrl: './banner.component.scss',
+  standalone: true,
+  imports: [CommonModule, InjectViewportCssClassDirective],
+})
+export class BannerComponent {
+  @Input() public banners: Array<{
+    header: string;
+    body: string;
+    status: string;
+  }> = [];
+
+  public constructor() {}
+}