add basic alert service

ui/src/app/app.module.ts

@@ -24,6 +24,8 @@ import { UserModule } from './user/user.module'
   imports: [
     BrowserModule,
     UserModule,
+    AccountModule,
+    HomeModule,
     HttpClientModule,
     AppRoutingModule,
     NgxWebstorageModule.forRoot(),

ui/src/app/error/model/error.model.ts

@@ -1,8 +1,7 @@
 export class AppError {
   constructor(
     public statusCode: number,
-    public message: string,
-    public i18nKey: string | null
+    public message: string
   ) {}
 }
 

ui/src/app/error/service/error.service.ts

@@ -12,12 +12,7 @@ export class ErrorService implements ErrorHandler {
 
   handleError(error: any) {
     if (error instanceof HttpErrorResponse) {
-      if (error.headers.has('errmmmmm')) {
-        const i18nKey: string | null = error.headers.get('errmmmmm')
-        this.errors.next(new AppError(error.status, error.message, i18nKey))
-      } else {
-        this.errors.next(new AppError(error.status, error.message, null))
-      }
+      this.errors.next(new AppError(error.status, error.message))
     } else {
       console.error('Unknown error occurred', error)
     }

ui/src/app/shared/alert/alert.component.html

@@ -0,0 +1,19 @@
+<div class="alerts" role="alert">
+  <div *ngFor="let alert of alerts">
+    <ngb-alert *ngIf="alert && alert.type && alert.msg" [type]="alert.type" [dismissible]="false">
+      <div class="d-flex">
+        <p i18n="@@error.subtitle" class="font-size-16 font-weight-bold mr-auto mb-2">Sorry, an error has occurred</p>
+        <a (click)="close(alert)" (keyup)="closeOldestAlert()" tabindex="0">
+          <svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M16 1.61143L14.3886 0L8 6.38857L1.61143 0L0 1.61143L6.38857 8L0 14.3886L1.61143 16L8 9.61143L14.3886 16L16 14.3886L9.61143 8L16 1.61143Z"
+              fill="black"
+              fill-opacity="0.9"
+            />
+          </svg>
+        </a>
+      </div>
+      <div class="font-size-16">{{ message }}</div>
+    </ngb-alert>
+  </div>
+</div>

ui/src/app/shared/alert/alert.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertComponent } from './alert.component';
+
+describe('AlertComponent', () => {
+  let component: AlertComponent;
+  let fixture: ComponentFixture<AlertComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AlertComponent]
+    });
+    fixture = TestBed.createComponent(AlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/src/app/shared/alert/alert.component.ts

@@ -0,0 +1,52 @@
+import { ChangeDetectorRef, Component, ErrorHandler, HostListener, Inject, OnInit } from '@angular/core'
+import { Subscription } from 'rxjs'
+import { AlertService } from '../service/alert.service'
+import { AppAlert } from './model/alert.model'
+
+@Component({
+  selector: 'app-alert',
+  templateUrl: './alert.component.html',
+})
+export class AlertComponent implements OnInit {
+  alerts: any[] = []
+  sub: Subscription | undefined
+  message: any
+
+  constructor(
+    private alertService: AlertService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    console.log('before alertservice on')
+
+    this.sub = this.alertService.on().subscribe((alert: AppAlert) => {
+      console.log('test')
+
+      console.log(alert.msg)
+      const messageKey = '@@' + alert.msg
+      //this.message = $localize`${messageKey}`
+      const id = alert.msg
+      this.message = $localize(<any>{ '0': `:@@${id}:${id}`, raw: [':'] })
+
+      this.alerts.push(alert)
+      this.cdr.detectChanges()
+    })
+    console.log('after alertservice on')
+  }
+
+  ngOnDestroy(): void {
+    this.sub?.unsubscribe()
+  }
+
+  @HostListener('document:keyup.escape', ['$event'])
+  closeOldestAlert() {
+    this.alerts.shift()
+    this.cdr.detectChanges()
+  }
+
+  close(alertToRemove: any) {
+    this.alerts = this.alerts.filter((alert: any) => alert !== alertToRemove)
+    this.cdr.detectChanges()
+  }
+}

ui/src/app/shared/alert/model/alert.model.ts

@@ -0,0 +1,6 @@
+export class AppAlert {
+  constructor(
+    public type: 'info',
+    public msg: string
+  ) {}
+}

ui/src/app/shared/service/alert.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core'
+import { Observable, Subject } from 'rxjs'
+import { AppAlert } from '../alert/model/alert.model'
+
+@Injectable({ providedIn: 'root' })
+export class AlertService {
+  private alerts: Subject<any> = new Subject<any>()
+
+  on(): Observable<any> {
+    return this.alerts.asObservable()
+  }
+
+  broadcast(i18nKey: string): void {
+    const newAlert = new AppAlert('info', i18nKey)
+    this.alerts.next(newAlert)
+    console.log('this.alerts.next called')
+  }
+}

ui/src/app/shared/shared.module.ts

@@ -5,11 +5,19 @@ import { CommonModule } from '@angular/common'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
 import { HasAnyAuthorityDirective } from './directive/has-any-authority.directive'
+import { AlertComponent } from './alert/alert.component'
 
 @NgModule({
   imports: [CommonModule, NgbModule, FontAwesomeModule],
-  declarations: [FindLanguageFromKeyPipe, ErrorAlertComponent, HasAnyAuthorityDirective],
-  exports: [FindLanguageFromKeyPipe, ErrorAlertComponent, NgbModule, FontAwesomeModule, HasAnyAuthorityDirective],
+  declarations: [FindLanguageFromKeyPipe, ErrorAlertComponent, HasAnyAuthorityDirective, AlertComponent],
+  exports: [
+    FindLanguageFromKeyPipe,
+    ErrorAlertComponent,
+    AlertComponent,
+    NgbModule,
+    FontAwesomeModule,
+    HasAnyAuthorityDirective,
+  ],
 })
 export class SharedModule {
   static forRoot() {