Merge pull request #1005 from bcgov/feature/ALCS-638

Update Main Page and Header

portal-frontend/src/app/app-routing.module.ts

@@ -104,6 +104,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./features/notifications/edit-submission/edit-submission.module').then((m) => m.EditSubmissionModule),
   },
+  {
+    title: 'Public Search',
+    path: 'public',
+    loadChildren: () => import('./features/public/public.module').then((m) => m.PublicModule),
+  },
   { path: '', redirectTo: '/login', pathMatch: 'full' },
 ];
 

portal-frontend/src/app/features/login/login.component.html

@@ -1,5 +1,17 @@
 <div class="login-wrapper">
-  <h3>Welcome to the ALCS Application Portal</h3>
-  <br />
-  <button (click)='onLogin()' mat-flat-button color='primary'>Login with BCeID</button>
-</div>
+  <h3>Welcome to the ALC Portal</h3>
+  <section>
+    <div class="subheading2">Log in with BCeID to create or view your ALC submissions</div>
+    <button (click)="onLogin()" class="login" mat-flat-button color="primary">Portal Login</button>
+    <div class="left">
+      Don't have a BCeID?&nbsp;
+      <a class="left" target="_blank" href="https://www.bceid.ca/register/basic/account_details.aspx?type=regular"
+        >Register <mat-icon class="icon">open_in_new</mat-icon></a
+      >
+    </div>
+  </section>
+  <section>
+    <div class="subheading2">Search publicly available information</div>
+    <button (click)="navigateToPublicSearch()" mat-flat-button color="accent">Public Search</button>
+  </section>
+</div>

portal-frontend/src/app/features/login/login.component.scss

@@ -3,3 +3,27 @@
 .login-wrapper {
   min-height: rem(250);
 }
+
+.icon {
+  margin-left: rem(2);
+}
+
+section {
+  margin: rem(24) 0;
+}
+
+.subheading2 {
+  margin-bottom: rem(8) !important;
+}
+
+.login {
+  margin-bottom: rem(12) !important;
+}
+
+button {
+  width: 100%;
+
+  @media screen and (min-width: $tabletBreakpoint) {
+    width: unset;
+  }
+}

portal-frontend/src/app/features/login/login.component.spec.ts

@@ -1,3 +1,4 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AuthenticationService } from '../../services/authentication/authentication.service';
 
@@ -16,6 +17,7 @@ describe('LoginComponent', () => {
           useValue: {},
         },
       ],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
 
     fixture = TestBed.createComponent(LoginComponent);

portal-frontend/src/app/features/login/login.component.ts

@@ -24,4 +24,8 @@ export class LoginComponent implements OnInit {
       window.location.href = `${res.loginUrl}${idpHint}`;
     }
   }
+
+  async navigateToPublicSearch() {
+    await this.router.navigateByUrl('/public');
+  }
 }

portal-frontend/src/app/features/public/public.component.html

@@ -0,0 +1 @@
+<p>public works!</p>

portal-frontend/src/app/features/public/public.component.spec.ts

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

portal-frontend/src/app/features/public/public.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-public',
+  templateUrl: './public.component.html',
+  styleUrls: ['./public.component.scss']
+})
+export class PublicComponent {
+
+}

portal-frontend/src/app/features/public/public.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { SharedModule } from '../../shared/shared.module';
+import { PublicComponent } from './public.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PublicComponent,
+  },
+];
+
+@NgModule({
+  declarations: [PublicComponent],
+  imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
+})
+export class PublicModule {}

portal-frontend/src/app/shared/header/header.component.html

@@ -1,4 +1,17 @@
 <header>
+  <div class="top-nav">
+    <ul>
+      <li>
+        <a href="https://www.alc.gov.bc.ca/">ALC Website</a>
+      </li>
+      <li *ngIf="showPublicSearchLink">
+        <a routerLink="/public">Public Search</a>
+      </li>
+      <li *ngIf="showPortalLink">
+        <a routerLink="/">Portal</a>
+      </li>
+    </ul>
+  </div>
   <div class="title-wrapper">
     <div class="title">
       <img class="logo" src="assets/alc_logo.svg" alt="ALC Portal" />

portal-frontend/src/app/shared/header/header.component.scss

@@ -1,8 +1,43 @@
 @use '../../../styles/functions' as *;
+@use '../../../styles/colors' as colors;
+
+.top-nav {
+  background-color: colors.$primary-color-dark;
+  padding: rem(8) rem(24);
+
+  @media screen and (min-width: $tabletBreakpoint) {
+    padding: rem(8) rem(36);
+  }
+
+
+  @media screen and (min-width: $desktopBreakpoint) {
+    padding: rem(8) rem(80);
+  }
+
+  a {
+    text-transform: uppercase;
+    color: #fff;
+    text-decoration: none;
+    line-height: rem(16);
+  }
+
+  ul {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin-right: rem(20);
+    font-size: rem(14);
+    letter-spacing: rem(0.14);
+  }
+}
 
 header {
   .title-wrapper {
-    margin: rem(8) rem(24);
+    margin: rem(16) rem(24);
 
     .title {
       .logo {
@@ -38,16 +73,15 @@ header {
   }
 
   @media screen and (min-width: $tabletBreakpoint) {
-    margin: rem(12) rem(36) !important;
     justify-content: space-between;
 
     .burger-menu {
       display: none;
     }
 
     .title-wrapper {
+      margin: rem(12) rem(36) !important;
       display: flex;
-      margin: 0;
       justify-content: space-between;
       align-items: center;
 
@@ -85,6 +119,8 @@ header {
   }
 
   @media screen and (min-width: $desktopBreakpoint) {
-    margin: rem(18) rem(80) !important;
+    .title-wrapper {
+      margin: rem(18) rem(80) !important;
+    }
   }
 }

portal-frontend/src/app/shared/header/header.component.spec.ts

@@ -1,3 +1,4 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { createMock, DeepMocked } from '@golevelup/ts-jest';
 import { BehaviorSubject } from 'rxjs';
@@ -22,6 +23,7 @@ describe('HeaderComponent', () => {
           useValue: mockAuthService,
         },
       ],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
 
     fixture = TestBed.createComponent(HeaderComponent);

portal-frontend/src/app/shared/header/header.component.ts

@@ -12,6 +12,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
   private $destroy = new Subject<void>();
   isAuthenticated = false;
   isMenuOpen = false;
+  showPublicSearchLink = true;
+  showPortalLink = false;
 
   constructor(
     private authenticationService: AuthenticationService,
@@ -24,6 +26,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
       this.isAuthenticated = !!user;
       this.changeDetectorRef.detectChanges();
     });
+    this.router.events.pipe(takeUntil(this.$destroy)).subscribe(() => {
+      const url = window.location.href;
+      const isPublic = url.includes('public');
+      this.showPortalLink = isPublic;
+      this.showPublicSearchLink = !isPublic;
+    });
   }
 
   async onLogout() {

portal-frontend/src/styles.scss

@@ -55,6 +55,13 @@ a {
   align-items: center;
 }
 
+.left {
+  display: flex;
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;
+}
+
 .no-padding .mat-dialog-container {
   padding: 0;
 }