Add error page for invalid urls

ui/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { navbarRoute } from './layout/navbar/navbar.route'
+import { errorRoutes } from './error/error.route'
 
 const routes: Routes = [
   {
@@ -14,7 +15,7 @@ const routes: Routes = [
 ]
 
 @NgModule({
-  imports: [RouterModule.forRoot([...routes, navbarRoute])],
+  imports: [RouterModule.forRoot([...routes, ...errorRoutes, navbarRoute])],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

ui/src/app/app.module.ts

@@ -15,10 +15,11 @@ import { HomeModule } from './home/home.module'
 import { FooterComponent } from './layout/footer/footer.component'
 import { SharedModule } from './shared/shared.module'
 import { HeaderInterceptor } from './shared/interceptor/header.interceptor'
-import { ErrorService } from './shared/service/error.service'
+import { ErrorService } from './error/service/error.service';
+import { ErrorComponent } from './error/error.component'
 
 @NgModule({
-  declarations: [AppComponent, NavbarComponent, HasAnyAuthorityDirective, FooterComponent],
+  declarations: [AppComponent, NavbarComponent, HasAnyAuthorityDirective, FooterComponent, ErrorComponent],
   imports: [
     FontAwesomeModule,
     AccountModule,

ui/src/app/shared/error/error-alert.component.spec.ts → ui/src/app/error/error-alert.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { ErrorAlertComponent } from './error-alert.component'
-import { ErrorService } from '../service/error.service'
+import { ErrorService } from './service/error.service'
 import { AppModule } from 'src/app/app.module'
 
 describe('ErrorAlertComponent', () => {

ui/src/app/shared/error/error-alert.component.ts → ui/src/app/error/error-alert.component.ts

@@ -1,13 +1,11 @@
 import { ChangeDetectorRef, Component, ErrorHandler, HostListener, Inject, OnInit } from '@angular/core'
-import { ErrorService } from '../service/error.service'
+import { ErrorService } from './service/error.service'
 import { Subscription } from 'rxjs'
-import { ErrorAlert } from '../model/error-alert'
-import { AppError } from '../model/error.model'
+import { AppError, ErrorAlert } from './model/error.model'
 
 @Component({
   selector: 'app-error-alert',
-  templateUrl: './error-alert.component.html',
-  styleUrls: ['./error-alert.component.scss'],
+  templateUrl: './error-alert.component.html'
 })
 export class ErrorAlertComponent implements OnInit {
   alerts: any[] = []
@@ -20,7 +18,6 @@ export class ErrorAlertComponent implements OnInit {
 
   ngOnInit(): void {
     this.sub = this.errorService.on().subscribe((err: AppError) => {
-      const alerts = [...this.alerts]
       const alert: ErrorAlert = {
         type: 'danger',
         msg: err.message,

ui/src/app/error/error.component.html

@@ -0,0 +1,15 @@
+<div class="container">
+  <div class="row">
+    <div class="col-md-12 mt-4">
+      <h1 i18n="@@error.title.string" class="mb-3.string">Your request cannot be processed</h1>
+
+      <div [hidden]="!errorMessage">
+        <div class="alert alert-danger">{{ errorMessage }}</div>
+      </div>
+      <div [hidden]="!error403" class="alert alert-danger" i18n="@@error.http.403.string">
+        You are not authorized to access this page.
+      </div>
+      <div [hidden]="!error404" class="alert alert-danger" i18n="@@error.http.404.string">The page does not exist.</div>
+    </div>
+  </div>
+</div>

ui/src/app/error/error.component.spec.ts

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

ui/src/app/error/error.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AccountService } from '../account';
+
+@Component({
+  selector: 'app-error',
+  templateUrl: './error.component.html'
+})
+export class ErrorComponent implements OnInit {
+  errorMessage: string | undefined;
+  error403: boolean | undefined;
+  error404: boolean | undefined;
+
+  constructor(private route: ActivatedRoute, private accountService: AccountService) {}
+
+  ngOnInit() {
+    this.route.data.subscribe(routeData => {
+      if (routeData['error403']) {
+        this.error403 = routeData['error403'];
+      }
+      if (routeData['error404']) {
+        this.error404 = routeData['error404'];
+      }
+      if (routeData['errorMessage']) {
+        this.errorMessage = routeData['errorMessage'];
+      }
+    });
+  }
+}

ui/src/app/error/error.route.ts

@@ -0,0 +1,36 @@
+import { Routes } from '@angular/router';
+
+import { ErrorComponent } from './error.component';
+
+export const errorRoutes: Routes = [
+  {
+    path: 'error',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string'
+    }
+  },
+  {
+    path: 'accessdenied',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string',
+      error403: true
+    }
+  },
+  {
+    path: '404',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string',
+      error404: true
+    }
+  },
+  {
+    path: '**',
+    redirectTo: '/404'
+  }
+];

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

@@ -5,3 +5,11 @@ export class AppError {
     public i18nKey: string | null
   ) {}
 }
+
+export class ErrorAlert {
+  constructor(
+    public type: 'danger',
+    public msg: string,
+    public toast: boolean
+  ) {}
+}

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

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core'
 import { FindLanguageFromKeyPipe } from './pipe/find-language-from-key'
-import { ErrorAlertComponent } from './error/error-alert.component'
+import { ErrorAlertComponent } from '../error/error-alert.component'
 import { CommonModule } from '@angular/common'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'