Extract the error snackbar into its onw component

It now disappears properly and can be reused for other components.

Author: Matthias Griebl

ids-webconsole/src/main/angular/src/app/app.module.ts

@@ -55,6 +55,7 @@ import { UserCardComponent } from './users/user-card.component';
 import { NewIdentityESTComponent } from './keycerts/identitynewest.component';
 import { ESTService } from './keycerts/est-service';
 import { RenewIdentityESTComponent } from './keycerts/identityrenewest.component';
+import { SnackbarComponent } from './keycerts/snackbar.component';
 
 @NgModule({ declarations: [
         AppComponent,
@@ -90,7 +91,8 @@ import { RenewIdentityESTComponent } from './keycerts/identityrenewest.component
         UserCardComponent,
         UsersComponent,
         NewIdentityESTComponent,
-        RenewIdentityESTComponent
+        RenewIdentityESTComponent,
+        SnackbarComponent
     ],
     bootstrap: [
         AppComponent

ids-webconsole/src/main/angular/src/app/keycerts/identityrenewest.component.html

@@ -27,12 +27,4 @@ <h5>EST Re-Enrollment</h5>
         </div>
     </div>
 </div>
-<div id="est-error-snackbar" [ngClass]="{'mdl-snackbar': true, 'mdl-snackbar--active': error}">
-    <div class="mdl-snackbar__text" style="display: flex; flex-direction: column;">
-        <span>{{ error }}</span>
-        <span class="mdl-color-text--grey-300" style="font-size: smaller;">
-            Check the trusted connector log for more details
-        </span>
-    </div>
-    <button class="mdl-snackbar__action" type="button" (click)="error = null">Dismiss</button>
-</div>
+<snackbar #errorSnackbar subtitle="Check the trusted connector log for more details"/>

ids-webconsole/src/main/angular/src/app/keycerts/identityrenewest.component.ts

@@ -1,16 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ESTService } from './est-service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
+import { SnackbarComponent } from './snackbar.component';
 
 @Component({
     templateUrl: './identityrenewest.component.html'
 })
 export class RenewIdentityESTComponent {
     estUrl = 'https://daps-dev.aisec.fraunhofer.de';
     rootCertHash = '7d3f260abb4b0bfa339c159398c0ab480a251faa385639218198adcad9a3c17d';
-    error = null;
+
+    @ViewChild("errorSnackbar")
+    errorSnackbar: SnackbarComponent;
 
     constructor(private readonly titleService: Title,
                 private readonly estService: ESTService,
@@ -21,16 +24,17 @@ export class RenewIdentityESTComponent {
 
     handleError(err: HttpErrorResponse) {
         if (err.status === 0) {
-            this.error = 'Network Error';
+            this.errorSnackbar.title = 'Network Error';
         } else {
             const errObj = JSON.parse(err.error);
             if (errObj.message) {
-                this.error = errObj.message;
+                this.errorSnackbar.title = errObj.message;
             } else {
                 // Errors have no message if it is disabled by the spring application
-                this.error = `Error response from connector: ${err.status}: ${errObj.error}`;
+                this.errorSnackbar.title = `Error response from connector: ${err.status}: ${errObj.error}`;
             }
         }
+        this.errorSnackbar.visible = true;
     }
 
     onSubmit() {

ids-webconsole/src/main/angular/src/app/keycerts/snackbar.component.css

@@ -0,0 +1,13 @@
+.snackbar {
+    -webkit-transform: translate(-50%, 100px);
+    transform: translate(-50%, 100px);
+}
+
+.snackbar-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.snackbar-subtitle {
+    font-size: smaller;
+}

ids-webconsole/src/main/angular/src/app/keycerts/snackbar.component.html

@@ -0,0 +1,9 @@
+<div id="est-error-snackbar" class="mdl-snackbar" [ngClass]="{'snackbar': !visible, 'mdl-snackbar--active': visible}">
+    <div class="mdl-snackbar__text snackbar-content">
+        <span>{{ title }}</span>
+        <span *ngIf="subtitle !== null" class="mdl-color-text--grey-300 snackbar-subtitle">
+            {{ subtitle }}
+        </span>
+    </div>
+    <button class="mdl-snackbar__action" type="button" (click)="invokeOnDismiss()">Dismiss</button>
+</div>

ids-webconsole/src/main/angular/src/app/keycerts/snackbar.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'snackbar',
+    templateUrl: './snackbar.component.html',
+    styleUrl: './snackbar.component.css'
+})
+export class SnackbarComponent {
+    @Input() title: string = null;
+    @Input() subtitle: string = null;
+    @Input() visible: boolean = false;
+    @Input() onDismiss: ()=>void = null;
+
+    invokeOnDismiss() {
+        if (this.onDismiss !== null) {
+            this.onDismiss()
+        } else {
+            this.visible = false;
+        }
+    }
+}