(feat) help message footer with configurable contactEmail (#396)

* remove bannerColor getter as it's not used (banner color set by css)

* Add a help message footer with configurable contactEmail

Author: omkar-ethz

package-lock.json

@@ -21,6 +21,7 @@ export class AppConfig {
   } | undefined = undefined;
   statusMessage = "";
   statusCode: "INFO" | "WARN" | "NONE" = "NONE";
+  contactEmail = "";
 }
 
 export const APP_DI_CONFIG: AppConfig = {
@@ -36,7 +37,9 @@ export const APP_DI_CONFIG: AppConfig = {
   retrieveToEmail: environment["retrieveToEmail"] ?? undefined,
   statusMessage: environment["statusMessage"] || "",
   statusCode: (["INFO", "WARN", "NONE"].includes(environment["statusCode"])
-    ? environment["statusCode"] : "NONE") as "INFO" | "WARN" | "NONE",
+    ? environment["statusCode"]
+    : "NONE") as "INFO" | "WARN" | "NONE",
+  contactEmail: environment["contactEmail"] || "",
 };
 
 @NgModule({

src/app/app-config.module.ts

@@ -12,6 +12,13 @@
 
 <router-outlet></router-outlet>
 
-<mat-toolbar class="footer" *ngIf="appConfig.showLogoBanner">
-  <img src="../assets/logo_banner.png" width="412" alt="logo_banner" />
-</mat-toolbar>
+<footer class="footer">
+  <mat-toolbar class="logo-banner" *ngIf="appConfig.showLogoBanner">
+    <img src="../assets/logo_banner.png" width="412" alt="logo_banner" />
+  </mat-toolbar>
+
+  <address *ngIf="appConfig.contactEmail">
+    If you have any questions or need help, please contact <a href="mailto:{{ appConfig.contactEmail }}">{{
+      appConfig.contactEmail }}</a>.
+  </address>
+</footer>

src/app/app.component.html

@@ -1,4 +1,9 @@
 /* AppComponent's private CSS styles */
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
 
 .header {
   position: sticky;
@@ -7,10 +12,20 @@
 }
 
 .footer {
+  margin-top: auto;
+}
+
+.logo-banner {
   height: 77px;
   justify-content: center;
 }
 
+address {
+  font-size: 16px;
+  padding: 0.5em;
+  background-color: whitesmoke;
+}
+
 .spacer {
   flex: 1 1 auto;
   text-align: left;

src/app/app.component.scss

@@ -1,4 +1,4 @@
-<mat-toolbar [color]="bannerColor" [class]='["toolbar", "toolbar-" + appConfig.statusCode]'>
+<mat-toolbar [class]='["toolbar", "toolbar-" + appConfig.statusCode]'>
   <span [innerHTML]="appConfig.statusMessage" class="status-message"></span>
   <span class="spacer"></span>
   <button mat-icon-button aria-label="Dismiss" (click)="onDismiss()">

src/app/shared/modules/status-message/status-banner/status-banner.component.html

@@ -14,12 +14,4 @@ export class StatusBannerComponent {
   onDismiss() {
     this.dismiss.emit();
   }
-
-  get bannerColor() {
-    switch (this.appConfig.statusCode) {
-      case "INFO": return "accent";
-      case "WARN": return "warn";
-      default: return "";
-    }
-  }
 }