Add a help message footer with configurable contactEmail

Author: omkar-ethz

src/app/app-config.module.ts

@@ -7,6 +7,7 @@ export class AppConfig {
   production = true;
   statusMessage = "";
   statusCode: "INFO" | "WARN" | "NONE" = "NONE";
+  contactEmail = "";
 }
 
 export const APP_DI_CONFIG: AppConfig = {
@@ -15,6 +16,7 @@ export const APP_DI_CONFIG: AppConfig = {
   statusCode: (["INFO", "WARN", "NONE"].includes(environment["statusCode"])
     ? environment["statusCode"]
     : "NONE") as "INFO" | "WARN" | "NONE",
+  contactEmail: environment["contactEmail"] || "",
 };
 
 @NgModule({

src/app/app.component.html

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

src/app/app.component.scss

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