Adding a PageNotFound Component.

src/app/app.routes.ts

@@ -52,4 +52,12 @@ export const routes: Routes = [
         (m) => m.ConfirmTotpComponent,
       ),
   },
+  {
+    path: '**',
+    loadComponent: () =>
+      import('../app/portal/features/page-not-found/page-not-found.component').then(
+        (m) => m.PageNotFoundComponent,
+      ),
+    title: 'GHGA | Page not found',
+  },
 ];

src/app/portal/features/page-not-found/page-not-found.component.html

@@ -0,0 +1,11 @@
+<h1>Page not found</h1>
+<p class="text-justify">
+  Sorry, we can't seem to find the page you're looking for. If you think it should
+  exist, please tell us (<a
+    class="mt-10"
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://www.ghga.de/about-us/contact"
+    ><mat-icon inline="true" class="align-middle">email</mat-icon></a
+  >).
+</p>

src/app/portal/features/page-not-found/page-not-found.component.spec.ts

@@ -0,0 +1,43 @@
+/**
+ * Test the home page component
+ * @copyright The GHGA Authors
+ * @license Apache-2.0
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PageNotFoundComponent],
+      providers: [],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the correct content in the <h1> tag', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const h1 = compiled.querySelector('h1');
+    expect(h1?.textContent).toBe('Page not found');
+  });
+
+  it('should contain the correct description text', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const p = compiled.querySelector('p');
+    expect(p?.textContent).toContain(
+      "Sorry, we can't seem to find the page you're looking for",
+    );
+  });
+});

src/app/portal/features/page-not-found/page-not-found.component.ts

@@ -0,0 +1,18 @@
+/**
+ * PageNotFound component
+ * @copyright The GHGA Authors
+ * @license Apache-2.0
+ */
+
+import { Component } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+
+/**
+ * This is the PageNotFound Component. It gets displayed if the router cannot resolve a route.
+ */
+@Component({
+  selector: 'app-page-not-found',
+  imports: [MatIcon],
+  templateUrl: './page-not-found.component.html',
+})
+export class PageNotFoundComponent {}