Added rudimentary frontend

2023-07-16 21:56:43 +02:00
parent 3b8ca17fd0
commit 27586902b0
52 changed files with 22586 additions and 0 deletions
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
@@ -0,0 +1,27 @@
+# ModuleFrontend
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
@@ -0,0 +1,112 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "module-frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/module-frontend",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "module-frontend:build:production"
+            },
+            "development": {
+              "browserTarget": "module-frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "module-frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,41 @@
+{
+  "name": "module-frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^16.1.0",
+    "@angular/cdk": "^16.1.5",
+    "@angular/common": "^16.1.0",
+    "@angular/compiler": "^16.1.0",
+    "@angular/core": "^16.1.0",
+    "@angular/forms": "^16.1.0",
+    "@angular/material": "^16.1.5",
+    "@angular/platform-browser": "^16.1.0",
+    "@angular/platform-browser-dynamic": "^16.1.0",
+    "@angular/router": "^16.1.0",
+    "keycloak-angular": "^14.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.13.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^16.1.4",
+    "@angular/cli": "~16.1.4",
+    "@angular/compiler-cli": "^16.1.0",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.6.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.1.3"
+  }
+}
@@ -0,0 +1,34 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {DashboardComponent} from "./dashboard/dashboard.component";
+import {ElectionsComponent} from "./elections/elections.component";
+import {AppAuthGuard} from "./auth/auth.guard";
+import {PermissionDeniedComponent} from "./permission-denied/permission-denied.component";
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DashboardComponent,
+    canActivate: [AppAuthGuard],
+    children: [
+      {
+        path: 'elections',
+        component: ElectionsComponent,
+        data: {
+          roles: ['USER']
+        },
+        canActivate: [AppAuthGuard]
+      },
+      {
+        path: 'permission-denied',
+        component: PermissionDeniedComponent
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
@@ -0,0 +1,3 @@
+<app-navigation>
+  <router-outlet></router-outlet>
+</app-navigation>
@@ -0,0 +1,29 @@
+import {TestBed} from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {AppComponent} from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [RouterTestingModule],
+    declarations: [AppComponent]
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'module-frontend'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('module-frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('module-frontend app is running!');
+  });
+});
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'module-frontend';
+}
@@ -0,0 +1,82 @@
+import {APP_INITIALIZER, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {DashboardComponent} from './dashboard/dashboard.component';
+import {MatToolbarModule} from "@angular/material/toolbar";
+import {MatButtonModule} from "@angular/material/button";
+import {MatGridListModule} from "@angular/material/grid-list";
+import {MatIconModule} from "@angular/material/icon";
+import {MatListModule} from "@angular/material/list";
+import {KeycloakAngularModule, KeycloakService} from "keycloak-angular";
+import {ElectionsComponent} from './elections/elections.component';
+import {PermissionDeniedComponent} from './permission-denied/permission-denied.component';
+import {MessagesComponent} from './messages/messages.component';
+import {HttpClientModule} from "@angular/common/http";
+import {environment} from "../environments/environment";
+import {NavigationComponent} from './navigation/navigation.component';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatMenuModule} from "@angular/material/menu";
+import {MatTableModule} from "@angular/material/table";
+
+function initializeKeycloak(keycloak: KeycloakService) {
+  return () =>
+    keycloak.init({
+      config: {
+        url: environment.keycloakURL,
+        realm: environment.realm,
+        clientId: environment.clientId,
+      },
+      initOptions: {
+        onLoad: 'check-sso',
+        silentCheckSsoRedirectUri:
+          window.location.origin + '/assets/silent-check-sso.html',
+        flow: "standard"
+      },
+      shouldAddToken: (request) => {
+        const { method, url } = request;
+        return url.startsWith(environment.backendURL);
+      },
+      loadUserProfileAtStartUp: true
+    });
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    DashboardComponent,
+    ElectionsComponent,
+    PermissionDeniedComponent,
+    MessagesComponent,
+    NavigationComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatGridListModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatListModule,
+    KeycloakAngularModule,
+    HttpClientModule,
+    MatSidenavModule,
+    MatMenuModule,
+    MatTableModule
+  ],
+  providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeKeycloak,
+      multi: true,
+      deps: [KeycloakService],
+    },
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}
@@ -0,0 +1,17 @@
+import {TestBed} from '@angular/core/testing';
+import {CanActivateFn} from '@angular/router';
+
+import {authGuard} from './auth.guard';
+
+describe('authGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+      TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});
@@ -0,0 +1,46 @@
+import {ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
+
+import {KeycloakAuthGuard, KeycloakService} from 'keycloak-angular';
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AppAuthGuard extends KeycloakAuthGuard {
+
+  constructor(protected override readonly router: Router,
+              protected readonly keycloak: KeycloakService) {
+    super(router, keycloak);
+  }
+
+  async isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree> {
+    // Force the user to log in if currently unauthenticated.
+    if (!this.authenticated) {
+      await this.keycloak.login({
+        redirectUri: window.location.origin + state.url,
+      });
+    }
+
+    // Get the roles required from the route.
+    const requiredRoles = route.data['roles'];
+
+    let granted = false;
+
+    // Allow the user to to proceed if no additional roles are required to access the route.
+    if (!(requiredRoles instanceof Array) || requiredRoles.length === 0) {
+      granted = true;
+      return granted;
+    }
+
+    // Allow the user to proceed if all the required roles are present.
+    granted = requiredRoles.every((role) => this.roles.includes(role));
+
+    // Routing user into permission denied view if don't have necessary roles.
+    if (!granted) {
+      await this.router.navigate(['permission-denied']);
+    }
+
+    return granted;
+  }
+
+}
@@ -0,0 +1,25 @@
+<h1>Elections</h1>
+
+<table mat-table [dataSource]="dataSource">
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef>Name</th>
+    <td mat-cell *matCellDef="let election">{{election.name}}</td>
+  </ng-container>
+  <ng-container matColumnDef="day">
+    <th mat-header-cell *matHeaderCellDef>Day</th>
+    <td mat-cell *matCellDef="let election">{{election.day}}</td>
+  </ng-container>
+  <ng-container matColumnDef="totalNumberOfSeats">
+    <th mat-header-cell *matHeaderCellDef># of seats</th>
+    <td mat-cell *matCellDef="let election">{{election.totalNumberOfSeats}}</td>
+  </ng-container>
+  <ng-container matColumnDef="votingThreshold">
+    <th mat-header-cell *matHeaderCellDef>Voting threshold</th>
+    <td mat-cell *matCellDef="let election">{{election.votingThreshold}}</td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="electionColumns"></tr>
+  <tr mat-row *matRowDef="let election; columns: electionColumns"></tr>
+</table>
+
+
@@ -0,0 +1 @@
+
@@ -0,0 +1,21 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {DashboardComponent} from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DashboardComponent]
+    });
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,31 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {MatTableDataSource} from "@angular/material/table";
+import {ElectionService} from "../elections/election.service";
+import {Election} from "../elections/election";
+import {Subscription} from "rxjs";
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit, OnDestroy {
+  electionColumns = ['name', 'day', 'totalNumberOfSeats', 'votingThreshold'];
+  dataSource = new MatTableDataSource<Election>();
+  private subscription: Subscription|null = null;
+
+  constructor(private electionService: ElectionService) {
+  }
+
+  ngOnInit() {
+    this.subscription = this.electionService.getElections().subscribe(
+      (elections) => {
+        this.dataSource.data = elections;
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    this.subscription?.unsubscribe();
+  }
+}
@@ -0,0 +1,6 @@
+export interface Constituency {
+  electionName: string;
+  number: number;
+  name: string;
+  numberOfSeats: number;
+}
@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {ElectionService} from './election.service';
+
+describe('ElectionService', () => {
+  let service: ElectionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ElectionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
@@ -0,0 +1,54 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {environment} from "../../environments/environment";
+import {Election} from "./election";
+import {catchError, Observable, of, tap} from "rxjs";
+import {MessageService} from "../messages/message.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElectionService {
+
+  private electionsURL = environment.backendURL + '/elections';
+
+  httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+  };
+
+  constructor(private http: HttpClient,
+              private messageService: MessageService) { }
+
+  getElections(): Observable<Election[]> {
+    return this.http.get<Election[]>(this.electionsURL)
+      .pipe(
+        tap(_ => this.log('fetched elections')),
+        catchError(this.handleError<Election[]>('getElections', []))
+      );
+  }
+
+  /**
+   * Handle Http operation that failed.
+   * Let the app continue.
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  private handleError<T>(operation = 'operation', result?: T) {
+    return (error: any): Observable<T> => {
+
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      // TODO: better job of transforming error for user consumption
+      this.log(`${operation} failed: ${error.message}`);
+
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
+    };
+  }
+
+  /** Log a HeroService message with the MessageService */
+  private log(message: string) {
+    this.messageService.add(`HeroService: ${message}`);
+  }
+}
@@ -0,0 +1,10 @@
+import {VotingThreshold} from "./voting-threshold";
+import {Constituency} from "./constituency";
+
+export interface Election {
+  name: string;
+  day: string;
+  totalNumberOfSeats: number;
+  votingThreshold: VotingThreshold;
+  constituencies: Constituency[];
+}
@@ -0,0 +1,5 @@
+<ul *ngIf="($elections | async)?.length">
+  <li *ngFor="let election of ($elections | async)">
+    {{election.name}}
+  </li>
+</ul>
@@ -0,0 +1,21 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ElectionsComponent} from './elections.component';
+
+describe('ElectionsComponent', () => {
+  let component: ElectionsComponent;
+  let fixture: ComponentFixture<ElectionsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ElectionsComponent]
+    });
+    fixture = TestBed.createComponent(ElectionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,21 @@
+import {Component, OnInit} from '@angular/core';
+import {KeycloakService} from "keycloak-angular";
+import {Election} from "./election";
+import {ElectionService} from "./election.service";
+import {Observable} from "rxjs";
+
+@Component({
+  selector: 'app-elections',
+  templateUrl: './elections.component.html',
+  styleUrls: ['./elections.component.scss']
+})
+export class ElectionsComponent implements OnInit{
+  $elections: Observable<Election[]> = this.electionService.getElections();
+
+  constructor(private keycloakService: KeycloakService,
+              private electionService: ElectionService) {
+  }
+
+  ngOnInit() {
+  }
+}
@@ -0,0 +1,5 @@
+export enum VotingThreshold {
+  NONE,
+  THREE,
+  FIVE
+}
@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {MessageService} from './message.service';
+
+describe('MessageService', () => {
+  let service: MessageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MessageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
@@ -0,0 +1,16 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+
+  clear() {
+    this.messages = [];
+  }
+}
@@ -0,0 +1,8 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+  <button class="clear"
+          (click)="messageService.clear()">clear</button>
+  <div *ngFor='let message of messageService.messages'> {{message}} </div>
+
+</div>
@@ -0,0 +1,34 @@
+h2 {
+  color: red;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+body {
+  margin: 2em;
+}
+body, input[text], button {
+  color: crimson;
+  font-family: Cambria, Georgia;
+}
+
+button.clear {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+button.clear {
+  color: #333;
+  margin-bottom: 12px;
+}
@@ -0,0 +1,21 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {MessagesComponent} from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MessagesComponent]
+    });
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {MessageService} from "./message.service";
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.scss']
+})
+export class MessagesComponent {
+  constructor(public messageService: MessageService) {}
+}
@@ -0,0 +1,28 @@
+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav #drawer class="sidenav"
+      [attr.role]="'dialog'"
+      [mode]="'side'">
+    <mat-toolbar>Menu</mat-toolbar>
+    <mat-nav-list>
+      <a mat-list-item href="#">Link 1</a>
+      <a mat-list-item href="#">Link 2</a>
+      <a mat-list-item href="#">Link 3</a>
+    </mat-nav-list>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <mat-toolbar color="primary">
+      <button
+        type="button"
+        aria-label="Toggle sidenav"
+        mat-icon-button
+        (click)="drawer.toggle()">
+        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+      </button>
+      <span>Wahlrecht</span>
+      <span class="spacer"></span>
+      <span class="logged-user">Logged in as {{loggedUserName}}</span>
+      <button mat-raised-button class="app-nav-icon" (click)="logout()">Logout</button>
+    </mat-toolbar>
+    <ng-content></ng-content>
+  </mat-sidenav-content>
+</mat-sidenav-container>
@@ -0,0 +1,25 @@
+.sidenav-container {
+  height: 100%;
+}
+
+.sidenav {
+  width: 200px;
+}
+
+.sidenav .mat-toolbar {
+  background: inherit;
+}
+
+.mat-toolbar.mat-primary {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.logged-user {
+  margin-right: 1em;
+}
@@ -0,0 +1,38 @@
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatToolbarModule} from '@angular/material/toolbar';
+
+import {NavigationComponent} from './navigation.component';
+
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [NavigationComponent],
+      imports: [
+        NoopAnimationsModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+import {KeycloakService} from "keycloak-angular";
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss']
+})
+export class NavigationComponent {
+  loggedUserName = '';
+
+  constructor(private keycloakService: KeycloakService) { }
+
+  ngOnInit(): void {
+    this.loggedUserName = this.keycloakService.getUsername();
+  }
+
+  logout(): void {
+    this.keycloakService.logout(window.location.origin);
+  }
+}
@@ -0,0 +1,3 @@
+<div class="container">
+  <h1>Permission Denied to Access this Page!!!!</h1>
+</div>
@@ -0,0 +1,21 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PermissionDeniedComponent} from './permission-denied.component';
+
+describe('PermissionDeniedComponent', () => {
+  let component: PermissionDeniedComponent;
+  let fixture: ComponentFixture<PermissionDeniedComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PermissionDeniedComponent]
+    });
+    fixture = TestBed.createComponent(PermissionDeniedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-permission-denied',
+  templateUrl: './permission-denied.component.html',
+  styleUrls: ['./permission-denied.component.scss']
+})
+export class PermissionDeniedComponent {
+
+}
@@ -0,0 +1,7 @@
+<html>
+<body>
+<script>
+  parent.postMessage(location.href, location.origin);
+</script>
+</body>
+</html>
@@ -0,0 +1,6 @@
+export const environment = {
+  backendURL: "http://localhost:12000/wahlrecht/v1",
+  keycloakURL: "https://id.2martens.de",
+  realm: "wahlrecht",
+  clientId: "wahlrecht-frontend"
+};
@@ -0,0 +1,6 @@
+export const environment = {
+  backendURL: "https://wahlrecht.2martens.de/wahlrecht/v1",
+  keycloakURL: "https://id.2martens.de",
+  realm: "wahlrecht",
+  clientId: "wahlrecht-frontend"
+};
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>ModuleFrontend</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="mat-typography">
+  <app-root></app-root>
+</body>
+</html>
@@ -0,0 +1,7 @@
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {AppModule} from './app/app.module';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
@@ -0,0 +1,4 @@
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}