Initial commit

.editorconfig

@@ -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

.gitignore

@@ -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

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

README.md

@@ -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.

angular.json

@@ -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": []
+          }
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,44 @@
+{
+  "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",
+    "@ngrx/effects": "^16.1.0",
+    "@ngrx/store": "^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",
+    "@angular/localize": "^16.1.5",
+    "@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"
+  }
+}

src/app/app-routing.module.ts

@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {DashboardComponent} from "./dashboard/dashboard.component";
+import {PermissionDeniedComponent} from "./permission-denied/permission-denied.component";
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DashboardComponent,
+    children: [
+      {
+        path: 'elections',
+        loadChildren: () => import("./elections/elections.module").then(mod => mod.ElectionsModule)
+      },
+      {
+        path: 'permission-denied',
+        component: PermissionDeniedComponent
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -0,0 +1,3 @@
+<app-navigation>
+  <router-outlet></router-outlet>
+</app-navigation>

src/app/app.component.spec.ts

@@ -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!');
+  });
+});

src/app/app.component.ts

@@ -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';
+}

src/app/app.module.ts

@@ -0,0 +1,86 @@
+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 {PermissionDeniedComponent} from './permission-denied/permission-denied.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";
+import {StoreModule} from '@ngrx/store';
+import {ElectionsModule} from "./elections/elections.module";
+import {EffectsModule} from '@ngrx/effects';
+import {MessagesModule} from "./messages/messages.module";
+
+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 {url} = request;
+          return url.startsWith(environment.backendURL);
+        },
+        loadUserProfileAtStartUp: true
+      });
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    DashboardComponent,
+    PermissionDeniedComponent,
+    NavigationComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatGridListModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatListModule,
+    KeycloakAngularModule,
+    HttpClientModule,
+    MatSidenavModule,
+    MatMenuModule,
+    MatTableModule,
+    ElectionsModule,
+    MessagesModule,
+    StoreModule.forRoot({}, {}),
+    EffectsModule.forRoot([])
+  ],
+  providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeKeycloak,
+      multi: true,
+      deps: [KeycloakService],
+    },
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}

src/app/auth/auth.guard.spec.ts

@@ -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();
+  });
+});

src/app/auth/auth.guard.ts

@@ -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: boolean;
+
+    // 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;
+  }
+
+}

src/app/dashboard/dashboard.component.html

@@ -0,0 +1,8 @@
+<div layout="row">
+
+  <p class="mat-body-1" i18n="welcome text|A welcome to users">
+    Welcome to the Electoral Law application. This application allows you to
+    view stored elections and their results in Hamburg. Furthermore, you
+    can play around in a what-if mode to see how vote changes affect the result.
+  </p>
+</div>

src/app/dashboard/dashboard.component.scss

@@ -0,0 +1 @@
+

src/app/dashboard/dashboard.component.spec.ts

@@ -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();
+  });
+});

src/app/dashboard/dashboard.component.ts

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

src/app/elections/election.service.spec.ts

@@ -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();
+  });
+});

src/app/elections/election.service.ts

@@ -0,0 +1,67 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {environment} from "../../environments/environment";
+import {Election} from "./model/election";
+import {catchError, Observable, of} from "rxjs";
+import {Store} from "@ngrx/store";
+import {electionByName} from "./store";
+import {MessagesService} from "../messages/messages.service";
+import {MessageType} from "../messages/model/message-type";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElectionService {
+
+  private electionsURL = environment.backendURL + '/elections';
+
+  httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+  };
+
+  constructor(private http: HttpClient,
+              private store: Store,
+              private messageService: MessagesService) { }
+
+  getElections(): Observable<Election[]> {
+    return this.http.get<Election[]>(this.electionsURL, this.httpOptions)
+      .pipe(
+        catchError(this.handleError<Election[]>('getElections', []))
+      );
+  }
+
+  selectElection(name: string) {
+    return this.store.select(electionByName(name));
+  }
+
+  /**
+   * 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
+
+      if (error.status == 401) {
+        this.log(MessageType.UNAUTHENTICATED);
+      }
+      if (error.status == 403) {
+        this.log(MessageType.UNAUTHORIZED);
+      }
+      if (error.status == 500) {
+        this.log(MessageType.INTERNAL_SERVER_ERROR);
+      }
+
+      // Let the app keep running by returning an empty result.
+      return of(result as T);
+    };
+  }
+
+  private log(type: MessageType) {
+    this.messageService.logMessage('ElectionService', type);
+  }
+}

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

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from "@angular/router";
+import {ElectionsComponent} from "./elections.component";
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ElectionsComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ElectionsRoutingModule {
+}

src/app/elections/elections.component.html

@@ -0,0 +1,5 @@
+<ul *ngIf="($elections | async)?.length">
+  <li *ngFor="let election of ($elections | async)">
+    {{election.name}}
+  </li>
+</ul>

src/app/elections/elections.component.spec.ts

@@ -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();
+  });
+});

src/app/elections/elections.component.ts

@@ -0,0 +1,24 @@
+import {Component, OnInit} from '@angular/core';
+import {KeycloakService} from "keycloak-angular";
+import {Election} from "./model/election";
+import {Observable} from "rxjs";
+import {Store} from "@ngrx/store";
+import {allElections} from "./store";
+import {loadAllElectionsAction} from "./store/elections.actions";
+
+@Component({
+  selector: 'app-elections',
+  templateUrl: './elections.component.html',
+  styleUrls: ['./elections.component.scss']
+})
+export class ElectionsComponent implements OnInit{
+  $elections: Observable<Election[]> = this.store.select<Election[]>(allElections());
+
+  constructor(private keycloakService: KeycloakService,
+              private store: Store) {
+  }
+
+  ngOnInit() {
+    this.store.dispatch(loadAllElectionsAction());
+  }
+}

src/app/elections/elections.module.ts

@@ -0,0 +1,26 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ElectionsComponent} from "./elections.component";
+import {StoreModule} from "@ngrx/store";
+import {ElectionsEffects} from "./store/elections.effects";
+import {EffectsModule} from "@ngrx/effects";
+import {electionsReducers, featureStateName} from "./store";
+import {ElectionsRoutingModule} from "./elections-routing.module";
+
+
+@NgModule({
+  declarations: [
+    ElectionsComponent
+  ],
+  imports: [
+    CommonModule,
+    ElectionsRoutingModule,
+    StoreModule.forFeature(featureStateName, electionsReducers),
+    EffectsModule.forFeature([ElectionsEffects]),
+  ],
+  exports: [
+    ElectionsComponent
+  ]
+})
+export class ElectionsModule {
+}

src/app/elections/model/constituency.ts

@@ -0,0 +1,6 @@
+export interface Constituency {
+  electionName: string;
+  number: number;
+  name: string;
+  numberOfSeats: number;
+}

src/app/elections/model/election.ts

@@ -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[];
+}

src/app/elections/model/voting-threshold.ts

@@ -0,0 +1,5 @@
+export enum VotingThreshold {
+  NONE,
+  THREE,
+  FIVE
+}

src/app/elections/store/elections.actions.ts

@@ -0,0 +1,29 @@
+import {createAction, props} from "@ngrx/store";
+import {Election} from "../model/election";
+
+export enum ActionTypes {
+  LoadAllElections = '[Elections] Load All Elections',
+  LoadAllElectionsFinished = '[Elections] Load All Elections Finished',
+
+  LoadSingleElection = '[Elections] Load Single Election',
+  LoadSingleElectionFinished = '[Elections] Load Single Election Finished',
+}
+
+export const loadAllElectionsAction = createAction(
+    ActionTypes.LoadAllElections
+);
+
+export const loadAllElectionsFinishedAction = createAction(
+    ActionTypes.LoadAllElectionsFinished,
+    props<{payload: Election[]}>()
+);
+
+export const loadSingleElectionAction = createAction(
+    ActionTypes.LoadSingleElection,
+    props<{payload: string}>()
+);
+
+export const loadSingleElectionFinishedAction = createAction(
+    ActionTypes.LoadSingleElectionFinished,
+    props<{payload: Election|undefined}>()
+);

src/app/elections/store/elections.effects.ts

@@ -0,0 +1,38 @@
+import {Injectable} from "@angular/core";
+import {ElectionService} from "../election.service";
+import {
+  loadAllElectionsAction,
+  loadAllElectionsFinishedAction,
+  loadSingleElectionAction,
+  loadSingleElectionFinishedAction
+} from "./elections.actions";
+import {map, switchMap} from "rxjs";
+import {Actions, createEffect, ofType} from "@ngrx/effects";
+
+@Injectable()
+export class ElectionsEffects {
+  constructor(private actions$: Actions,
+              private electionService: ElectionService) {
+  }
+
+  loadAllElections$ = createEffect(() => this.actions$.pipe(
+      ofType(loadAllElectionsAction),
+      switchMap(() => this.electionService.getElections()
+          .pipe(
+              map(elections => loadAllElectionsFinishedAction({payload: elections}))
+          )
+      )
+  ));
+
+  loadSingleElection$ = createEffect(() => {
+    return this.actions$.pipe(
+        ofType(loadSingleElectionAction),
+        switchMap((action) => this.electionService.selectElection(action.payload)
+            .pipe(
+                map(election =>
+                    loadSingleElectionFinishedAction({payload: election}))
+            )
+        ),
+    )
+  });
+}

src/app/elections/store/elections.reducer.ts

@@ -0,0 +1,30 @@
+import {Election} from "../model/election";
+import {
+  loadAllElectionsFinishedAction,
+  loadSingleElectionFinishedAction
+} from "./elections.actions";
+import {createReducer, on} from "@ngrx/store";
+
+export interface ReducerElectionsState {
+  items: Election[];
+  selectedItem: Election|undefined;
+}
+
+export const initialState: ReducerElectionsState = {
+  items: [],
+  selectedItem: undefined
+};
+
+export const electionsReducer = createReducer(
+    initialState,
+    on(loadAllElectionsFinishedAction, (state,
+                                        action) => ({
+      ...state,
+      items: [...action.payload]
+    })),
+    on(loadSingleElectionFinishedAction, (state,
+                                          action) => ({
+      ...state,
+      selectedItem: action.payload
+    }))
+);

src/app/elections/store/index.ts

@@ -0,0 +1,28 @@
+import {electionsReducer, ReducerElectionsState} from "./elections.reducer";
+import {ActionReducerMap, createFeatureSelector, createSelector} from "@ngrx/store";
+
+export const featureStateName = 'electionsFeature';
+
+export interface ElectionsState {
+  elections: ReducerElectionsState;
+}
+
+export const electionsReducers: ActionReducerMap<ElectionsState> = {
+  elections: electionsReducer,
+};
+
+// extract the main property 'electionsFeature' from the state object
+export const getElectionsFeatureState = createFeatureSelector<ElectionsState>(
+    featureStateName
+);
+
+export const allElections = () => createSelector(
+    getElectionsFeatureState,
+    (state: ElectionsState) => state.elections.items
+);
+
+export const electionByName = (name: string) => createSelector(
+    getElectionsFeatureState,
+    (state: ElectionsState) =>
+        state.elections.items.find(election => election.name === name)
+);

src/app/messages/messages.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {StoreModule} from "@ngrx/store";
+import {featureStateName, messagesReducers} from "./store";
+import {EffectsModule} from "@ngrx/effects";
+import {MessagesEffects} from "./store/messages.effects";
+import {MatSnackBarModule} from "@angular/material/snack-bar";
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MatSnackBarModule,
+    StoreModule.forFeature(featureStateName, messagesReducers),
+    EffectsModule.forFeature([MessagesEffects])
+  ]
+})
+export class MessagesModule {
+}

src/app/messages/messages.service.spec.ts

@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {MessagesService} from './messages.service';
+
+describe('MessagesService', () => {
+  let service: MessagesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MessagesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/messages/messages.service.ts

@@ -0,0 +1,34 @@
+import {Injectable} from '@angular/core';
+import {Store} from "@ngrx/store";
+import {addMessageAction} from "./store/messages.actions";
+import {MessageType} from "./model/message-type";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessagesService {
+  private static UNAUTHENTICATED = $localize `You are not logged in which prevents data from loading`;
+  private static UNAUTHORIZED = $localize `You don't have sufficient authorization to view the data`;
+  private static INTERNAL_SERVER_ERROR = $localize `An internal server error occurred. Sorry for the inconvenience.`;
+  private static UNKNOWN_ERROR = $localize `An unknown error occurred. Sorry for the inconvenience.`;
+
+  constructor(private store: Store) { }
+
+  logMessage(component: string, type: MessageType) {
+    let text = component + ": ";
+    switch (type) {
+      case MessageType.UNAUTHENTICATED:
+        text += MessagesService.UNAUTHENTICATED;
+        break;
+      case MessageType.UNAUTHORIZED:
+        text += MessagesService.UNAUTHORIZED;
+        break;
+      case MessageType.INTERNAL_SERVER_ERROR:
+        text += MessagesService.INTERNAL_SERVER_ERROR;
+        break;
+      default:
+        text += MessagesService.UNKNOWN_ERROR;
+    }
+    this.store.dispatch(addMessageAction({message: {text, type}}))
+  }
+}

src/app/messages/model/message-type.ts

@@ -0,0 +1,5 @@
+export enum MessageType {
+  UNAUTHENTICATED,
+  UNAUTHORIZED,
+  INTERNAL_SERVER_ERROR
+}

src/app/messages/model/message.ts

@@ -0,0 +1,6 @@
+import {MessageType} from "./message-type";
+
+export interface Message {
+  text: string;
+  type: MessageType;
+}

src/app/messages/store/index.ts

@@ -0,0 +1,16 @@
+import {messagesReducer, ReducerMessagesState} from "./messages.reducer";
+import {ActionReducerMap, createFeatureSelector} from "@ngrx/store";
+
+export const featureStateName = 'messagesFeature';
+
+export interface MessagesState {
+  messages: ReducerMessagesState;
+}
+
+export const messagesReducers: ActionReducerMap<MessagesState> = {
+  messages: messagesReducer,
+};
+
+export const getMessagesFeatureState = createFeatureSelector<MessagesState>(
+    featureStateName
+);

src/app/messages/store/messages.actions.ts

@@ -0,0 +1,16 @@
+import {createAction, props} from "@ngrx/store";
+import {Message} from "../model/message";
+
+export enum ActionTypes {
+  AddMessage = '[Messages] Add Message',
+  AddMessageFinished = '[Messages] Add Message Finished',
+}
+
+export const addMessageAction = createAction(
+    ActionTypes.AddMessage,
+    props<{message: Message}>()
+);
+
+export const addMessageFinishedAction = createAction(
+    ActionTypes.AddMessageFinished
+);

src/app/messages/store/messages.effects.ts

@@ -0,0 +1,21 @@
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {Actions, createEffect, ofType} from "@ngrx/effects";
+import {addMessageAction, addMessageFinishedAction} from "./messages.actions";
+import {map} from "rxjs";
+import {Injectable} from "@angular/core";
+
+@Injectable()
+export class MessagesEffects {
+  constructor(private actions$: Actions,
+              private snackBar: MatSnackBar) {
+  }
+
+  showSnackbar$ = createEffect(() =>
+      this.actions$.pipe(
+          ofType(addMessageAction),
+          map((action) => {
+            this.snackBar.open(action.message.text, "OK");
+            return addMessageFinishedAction();
+          })
+      ));
+}

src/app/messages/store/messages.reducer.ts

@@ -0,0 +1,24 @@
+import {Message} from "../model/message";
+import {createReducer, on} from "@ngrx/store";
+import {addMessageAction, addMessageFinishedAction} from "./messages.actions";
+
+export interface ReducerMessagesState {
+  displayedMessage: Message|undefined;
+}
+
+const initialState: ReducerMessagesState = {
+  displayedMessage: undefined
+}
+
+export const messagesReducer = createReducer(
+    initialState,
+    on(addMessageAction, (state,
+                                        action) => ({
+      ...state,
+      displayedMessage: action.message
+    })),
+    on(addMessageFinishedAction, (state) => ({
+      ...state,
+      displayedMessage: undefined
+    }))
+);

src/app/navigation/navigation.component.html

@@ -0,0 +1,31 @@
+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav #drawer class="sidenav"
+      [attr.role]="'dialog'"
+      [mode]="'side'">
+    <mat-toolbar i18n="title|Title of the sidebar menu">Menu</mat-toolbar>
+    <mat-nav-list>
+      <a mat-list-item routerLink="elections" i18n="link name|The name of the elections page">Elections</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 i18n="application title|The application title in the toolbar">Electoral Law</span>
+      <span class="spacer"></span>
+      <ng-container *ngIf="isLoggedIn$ | async; else loginButton">
+        <span class="logged-user">Logged in as {{loggedUserName}}</span>
+        <button mat-raised-button class="app-nav-icon" (click)="logout()">Logout</button>
+      </ng-container>
+      <ng-template #loginButton>
+        <button mat-raised-button class="app-nav-icon" (click)="login()" i18n>Login</button>
+      </ng-template>
+    </mat-toolbar>
+    <ng-content></ng-content>
+  </mat-sidenav-content>
+</mat-sidenav-container>

src/app/navigation/navigation.component.scss

@@ -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;
+}

src/app/navigation/navigation.component.spec.ts

@@ -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();
+  });
+});

src/app/navigation/navigation.component.ts

@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+import {KeycloakService} from "keycloak-angular";
+import {from} from "rxjs";
+import {ActivatedRoute} from "@angular/router";
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss']
+})
+export class NavigationComponent {
+  loggedUserName = '';
+  isLoggedIn$ = from(this.keycloakService.isLoggedIn());
+  url: string;
+
+  constructor(private keycloakService: KeycloakService,
+              private route: ActivatedRoute) {
+    this.url = route.snapshot.url.join('');
+  }
+
+  ngOnInit(): void {
+    this.loggedUserName = this.keycloakService.getUsername();
+  }
+
+  login(): void {
+    this.keycloakService.login({
+      redirectUri: window.location.origin + this.url,
+    });
+  }
+
+  logout(): void {
+    this.keycloakService.logout(window.location.origin);
+  }
+}

src/app/permission-denied/permission-denied.component.html

@@ -0,0 +1,3 @@
+<div class="container">
+  <h1>Permission Denied to Access this Page!!!!</h1>
+</div>

src/app/permission-denied/permission-denied.component.spec.ts

@@ -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();
+  });
+});

src/app/permission-denied/permission-denied.component.ts

@@ -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 {
+
+}

src/app/store/app.reducer.ts

@@ -0,0 +1,7 @@
+import {ElectionsState} from "../elections/store";
+import {MessagesState} from "../messages/store";
+
+export interface AppState {
+  electionsFeature: ElectionsState;
+  messagesFeature: MessagesState;
+}

src/assets/silent-check-sso.html

@@ -0,0 +1,7 @@
+<html>
+<body>
+<script>
+  parent.postMessage(location.href, location.origin);
+</script>
+</body>
+</html>

src/environments/environment.development.ts

@@ -0,0 +1,6 @@
+export const environment = {
+  backendURL: "http://localhost:12000/wahlrecht/v1",
+  keycloakURL: "https://id.2martens.de",
+  realm: "2martens",
+  clientId: "wahlrecht-frontend"
+};

src/environments/environment.ts

@@ -0,0 +1,6 @@
+export const environment = {
+  backendURL: "https://wahlrecht.2martens.de/wahlrecht/v1",
+  keycloakURL: "https://id.2martens.de",
+  realm: "2martens",
+  clientId: "wahlrecht-frontend"
+};

src/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title i18n="application title|Title of browser tab">Electoral Law</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>

src/main.ts

@@ -0,0 +1,9 @@
+/// <reference types="@angular/localize" />
+
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {AppModule} from './app/app.module';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src/styles.scss

@@ -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; }

tsconfig.app.json

@@ -0,0 +1,16 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": [
+      "@angular/localize"
+    ]
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.json

@@ -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
+  }
+}

tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine",
+      "@angular/localize"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}