Merge pull request #489 from KyleKayfish/CSRS-488-2

CSRS-488:  Added underline and Terms of Use to Footer

src/frontend/csrs-portal/src/app/components/child-application-question/child-application-question.component.html

@@ -663,7 +663,7 @@ <h2 class="mt-4 mb-0">Child Support Recalculation Application</h2>
                 Please review and make sure you understand the following conditions of enrolment and Service Portal Terms of Use they link to.
               </p>
               <p>
-                If you proceed, you will be deemed to have agreed to them.  If you do not agree, you are not entitled to use this electronic service.
+                If you proceed, you will be deemed to have agreed to them.  <u>If you do not agree, you are not entitled to use this electronic service.</u>
               </p>
               <p>
                 I understand, acknowledge and agree that:

src/frontend/csrs-portal/src/app/shared/components/footer/footer.component.html

@@ -26,6 +26,10 @@
       <li>
         <a href="https://www2.gov.bc.ca/gov/content/home/get-help-with-government-services">Contact Us</a>
       </li>
+      <span class="divider">|</span>
+      <li>
+        <a href="javascript:void(0);" (click)="showTermsOfUse()">Terms of Use</a>
+      </li>
       <span class="divider"></span>
     </ul>
   </div>

src/frontend/csrs-portal/src/app/shared/components/footer/footer.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ModalDialogHtmlComponent } from '../../../components/modal-dialog-htmlcontent/modal-dialog-htmlcontent.component';
+
 
 @Component({
   selector: 'app-footer',
@@ -7,9 +10,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FooterComponent implements OnInit {
 
-  constructor() { }
+  constructor(public dialog: MatDialog,) { }
 
   ngOnInit(): void {
   }
+  showTermsOfUse(): void {
+    const dialogRef = this.dialog.open(ModalDialogHtmlComponent, {
+      width: '750px',
+      data: '',
+    });
 
+    dialogRef.afterClosed().subscribe(result => {
+      //this.logger.info(`Dialog result: ${result}`);
+    });
+  }
 }