feat: error pages

frontend/src/app/app.module.ts

@@ -181,12 +181,14 @@ import { ModalComponent } from './components/stad-gent-components/molecules/moda
 import { TeaserComponent } from './components/stad-gent-components/molecules/teaser/teaser.component';
 import { EmptyComponent } from './components/status/empty/empty.component';
 import { LoadingComponent } from './components/status/loading/loading.component';
-import { NotFoundComponent } from './components/status/not-found/not-found.component';
 import { ImpersonateInterceptor } from './services/authentication/impersonate.interceptor';
 import { TokenInterceptor } from './services/authentication/token.interceptor';
 import { AuthorizationGuardService } from './services/guard/authorization/authorization-guard.service';
 import { HighlightComponent } from './components/stad-gent-components/molecules/highlight/highlight.component';
 import { ContactComponent } from './components/stad-gent-components/molecules/contact/contact.component';
+import { NotFoundErrorPageComponent } from './components/error-pages/not-found-error-page/not-found-error-page.component';
+import { UnauthorizedErrorPageComponent } from './components/error-pages/unauthorized-error-page/unauthorized-error-page.component';
+import { CallToActionComponent } from './components/stad-gent-components/call-to-action/call-to-action.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -225,32 +227,10 @@ const routes: Routes = [
             guards: [['user']]
         },
         children: [
-            // These are unused for now
-            /*{
-                path: '',
-                redirectTo: 'overview',
-                pathMatch: 'full',
-            },
             {
                 path: 'overview',
                 component: ProfileOverviewComponent,
-            },
-            {
-                path: 'reservations',
-                component: ProfileReservationsComponent
-            },
-            {
-                path: 'calendar',
-                component: ProfileCalendarComponent
-            },
-            {
-                path: 'password',
-                component: ProfileChangePasswordComponent
-            },
-            {
-                path: 'penalties',
-                component: ProfilePenaltiesComponent
-            },*/
+            }
         ],
     },
 
@@ -438,8 +418,16 @@ const routes: Routes = [
         component: EntryComponent,
         pathMatch: 'full',
     },
-
-    // TODO: create PageNotFoundController
+    {
+        path: 'unauthorized',
+        pathMatch: 'full',
+        component: UnauthorizedErrorPageComponent
+    },
+    {
+        path: '**',
+        pathMatch: 'full',
+        component: NotFoundErrorPageComponent
+    }
 ];
 
 @NgModule({
@@ -528,12 +516,14 @@ const routes: Routes = [
         FaqSidebarItemComponent,
         LoadingComponent,
         EmptyComponent,
-        NotFoundComponent,
         TeaserComponent,
         FaqManagementComponent,
         CategoriesManagementComponent,
         HighlightComponent,
         ContactComponent,
+        NotFoundErrorPageComponent,
+        UnauthorizedErrorPageComponent,
+        CallToActionComponent,
     ],
     imports: [
         BrowserModule,

frontend/src/app/components/entry/entry.component.ts

@@ -15,8 +15,9 @@ export class EntryComponent implements OnInit {
         if (!environment.useExternalDashboard) {
             void this.router.navigateByUrl('/dashboard');
         } else {
-            // Simulate an HTTP redirect:
-            window.location.replace(environment.externalDashboardUrl);
+            window.location.replace(
+                environment.externalDashboardUrl
+            );
         }
     }
 }

frontend/src/app/components/error-pages/not-found-error-page/not-found-error-page.component.html

@@ -0,0 +1,33 @@
+<div class="center">
+    <h1>
+        {{ 'errorPages.404.title' | translate }}
+    </h1>
+    <p>
+        {{ 'errorPages.404.subtitle' | translate }}
+    </p>
+    <div class="mt-4">
+        <app-call-to-action [title]="'errorPages.404.cta.title' | translate">
+            <ul class="icon-list">
+                <li class="d-none"></li>
+                <li>
+                    <i class="icon-home" aria-hidden="true"></i>
+                    <a routerLink="/" class="">{{ 'errorPages.404.cta.links.overview' | translate }}</a>
+                </li>
+                <li>
+                    <i class="icon-chat-round" aria-hidden="true"></i>
+                    <a routerLink="/faq" class="">{{ 'errorPages.404.cta.links.faq' | translate }}</a>
+                </li>
+                <ng-container *ngIf="$user | async as user">
+                    <li *ngIf="user.isLoggedIn()">
+                        <i class="icon-user" aria-hidden="true"></i>
+                        <a routerLink="/profile/overview" class="">{{ 'errorPages.404.cta.links.profile' | translate }}</a>
+                    </li>
+                    <li *ngIf="!user.isLoggedIn()">
+                        <i class="icon-lock-open" aria-hidden="true"></i>
+                        <a routerLink="/login" class="">{{ 'errorPages.404.cta.links.login' | translate }}</a>
+                    </li>
+                </ng-container>
+            </ul>
+        </app-call-to-action>
+    </div>
+</div>

frontend/src/app/components/error-pages/not-found-error-page/not-found-error-page.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundErrorPageComponent } from './not-found-error-page.component';
+
+describe('NotFoundErrorPageComponent', () => {
+  let component: NotFoundErrorPageComponent;
+  let fixture: ComponentFixture<NotFoundErrorPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NotFoundErrorPageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NotFoundErrorPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/error-pages/not-found-error-page/not-found-error-page.component.ts

@@ -0,0 +1,24 @@
+import { User } from '@/model/User';
+import { AuthenticationService } from '@/services/authentication/authentication.service';
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+    selector: 'app-not-found-error-page',
+    templateUrl: './not-found-error-page.component.html',
+    styleUrls: ['./not-found-error-page.component.scss']
+})
+export class NotFoundErrorPageComponent implements OnInit {
+
+    public $user: Observable<User>;
+
+    constructor(
+        private authenticationService: AuthenticationService
+    ) {
+    }
+
+    public ngOnInit(): void {
+        this.$user = this.authenticationService.getUserObs();
+    }
+
+}

frontend/src/app/components/error-pages/unauthorized-error-page/unauthorized-error-page.component.html

@@ -0,0 +1,23 @@
+<div class="center">
+    <h1>
+        {{ 'errorPages.405.title' | translate }}
+    </h1>
+    <p>
+        {{ 'errorPages.405.subtitle' | translate }}
+    </p>
+    <div class="mt-4">
+        <app-call-to-action [title]="'errorPages.404.cta.title' | translate">
+            <ul class="icon-list">
+                <li class="d-none"></li>
+                <li>
+                    <i class="icon-home" aria-hidden="true"></i>
+                    <a routerLink="/" class="">{{ 'errorPages.404.cta.links.overview' | translate }}</a>
+                </li>
+                <li>
+                    <i class="icon-chat-round" aria-hidden="true"></i>
+                    <a routerLink="/faq" class="">{{ 'errorPages.404.cta.links.faq' | translate }}</a>
+                </li>
+            </ul>
+        </app-call-to-action>
+    </div>
+</div>

frontend/src/app/components/error-pages/unauthorized-error-page/unauthorized-error-page.component.spec.ts

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

frontend/src/app/components/error-pages/unauthorized-error-page/unauthorized-error-page.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-unauthorized-error-page',
+    templateUrl: './unauthorized-error-page.component.html',
+    styleUrls: ['./unauthorized-error-page.component.scss']
+})
+export class UnauthorizedErrorPageComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}

frontend/src/app/components/stad-gent-components/call-to-action/call-to-action.component.html

@@ -0,0 +1,32 @@
+<ng-container><!-- Download -->
+    <section class="highlight cta-block link highlight--left">
+        <div class="highlight__inner">
+            <h2>
+                {{ title }}
+            </h2>
+
+            <ng-container *ngIf="descriptionTemplate; else defaultDescription">
+                <ng-container *ngTemplateOutlet="descriptionTemplate"></ng-container>
+            </ng-container>
+
+            <ng-template #defaultDescription>
+                <p *ngIf="description">
+                    {{ description }}
+                </p>
+            </ng-template>
+
+            <ng-content></ng-content>
+
+            <ng-container *ngIf="footerTemplate; else defaultFooter">
+                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+            </ng-container>
+
+            <ng-template #defaultFooter>
+                <p *ngIf="footer">
+                    {{ footer }}
+                </p>
+            </ng-template>
+
+        </div>
+    </section>
+</ng-container>

frontend/src/app/components/status/not-found/not-found.component.spec.ts → frontend/src/app/components/stad-gent-components/call-to-action/call-to-action.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NotFoundComponent } from './not-found.component';
+import { CallToActionComponent } from './call-to-action.component';
 
-describe('NotFoundComponent', () => {
-  let component: NotFoundComponent;
-  let fixture: ComponentFixture<NotFoundComponent>;
+describe('CallToActionComponent', () => {
+  let component: CallToActionComponent;
+  let fixture: ComponentFixture<CallToActionComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ NotFoundComponent ]
+      declarations: [ CallToActionComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(NotFoundComponent);
+    fixture = TestBed.createComponent(CallToActionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

frontend/src/app/components/stad-gent-components/call-to-action/call-to-action.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+
+@Component({
+    selector: 'app-call-to-action',
+    templateUrl: './call-to-action.component.html',
+    styleUrls: ['./call-to-action.component.scss']
+})
+export class CallToActionComponent implements OnInit {
+
+    @Input() title!: string;
+
+    @Input() description: string;
+    @Input() descriptionTemplate: TemplateRef<any>;
+
+    @Input() footer: string;
+    @Input() footerTemplate: TemplateRef<any>;
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+}

frontend/src/app/model/User.ts

@@ -63,13 +63,17 @@ export class User {
      * @returns boolean
      */
     hasGuard(guard: string): boolean {
-        return {
-            user: this.isLoggedIn(),
-            scanner: this.isScanner(),
-            authorities: this.isAuthority(),
-            admin: this.isAdmin()
+        switch (guard) {
+            case 'user':
+                return this.isLoggedIn();
+            case 'scanner':
+                return this.isScanner();
+            case 'authorities':
+                return this.isAuthority();
+            case 'admin':
+                return this.isAdmin();
         }
-        [guard];
+        return false;
     }
 }
 

frontend/src/app/services/api/faq/faq.service.ts

@@ -159,9 +159,6 @@ export class FaqService {
      * @returns an observable of the created item
      */
     addItem(item: FaqItem): Observable<FaqItem> {
-        console.log(
-            item
-        );
         return this.client.post<FaqItem>(api.faq.items.create, item);
     }
 }