Implement enhanced login functionality with JWT, role-based permissions, and frontend integration

Added JWT-based login dialog with form validation and secure token handling on the frontend. Updated backend with role-based access control, privilege management, and refined security configurations. Extended database schema for user privileges and permissions.

frontend/src/app/forms/form_type.ts

@@ -0,0 +1,5 @@
+export enum FormType {
+  APPEAL = 'appeal',
+  STAFF_APPLICATION = 'staff_application',
+  CONTACT = 'contact'
+}

frontend/src/app/forms/forms.component.html

@@ -5,7 +5,13 @@
       <h1>{{ formTitle }}</h1>
     </div>
   </app-header>
-  <!--  TODO add form styling in this div-->
+  <ng-container *ngIf="!type">
+    <ng-container *ngFor="let formType of FormType | keyvalue">
+      <button mat-raised-button (click)="setFormType(formType.value)">
+        {{ formType }}
+      </button>
+    </ng-container>
+  </ng-container>
   <div>
     <ng-content select="[form-content]"></ng-content>
   </div>

frontend/src/app/forms/forms.component.ts

@@ -1,15 +1,82 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {HeaderComponent} from '../header/header.component';
+import {LoginService} from '../../api';
+import {MatDialog} from '@angular/material/dialog';
+import {ActivatedRoute} from '@angular/router';
+import {LoginDialogComponent} from '../login/login.component';
+import {KeyValuePipe, NgForOf, NgIf} from '@angular/common';
+import {FormType} from './form_type';
+import {MatButton} from '@angular/material/button';
 
 @Component({
   selector: 'app-forms',
   imports: [
-    HeaderComponent
+    HeaderComponent,
+    NgIf,
+    NgForOf,
+    MatButton,
+    KeyValuePipe
   ],
   templateUrl: './forms.component.html',
   styleUrl: './forms.component.scss'
 })
-export class FormsComponent {
+export class FormsComponent implements OnInit {
   @Input() formTitle: string = 'Form';
   @Input() currentPage: string = 'forms';
+
+  public type: FormType | undefined;
+
+  constructor(private loginService: LoginService,
+              private dialog: MatDialog,
+              private route: ActivatedRoute,
+  ) {
+    this.route.paramMap.subscribe(async params => {
+      const code = params.get('code');
+
+      if (code) {
+        this.loginService.login(code).subscribe(jwt => this.saveJwt(jwt as JsonWebKey)); //TODO handle error
+      } else {
+        const dialogRef = this.dialog.open(LoginDialogComponent, {
+          width: '400px',
+          disableClose: true
+        });
+
+        dialogRef.afterClosed().subscribe(jwt => {
+          this.saveJwt(jwt as JsonWebKey)
+        });
+      }
+    });
+  }
+
+  ngOnInit() {
+    this.route.paramMap.subscribe(params => {
+      switch (params.get('form')) {
+        case FormType.APPEAL:
+          this.type = FormType.APPEAL;
+          this.currentPage = 'appeal';
+          break;
+        default:
+          throw new Error("Invalid type");
+      }
+    });
+  }
+
+  private saveJwt(jwt: JsonWebKey) {
+    const claims = this.extractJwtClaims(jwt);
+    const authorizations = claims?.authorizations || [];
+  }
+
+  private extractJwtClaims(jwt: JsonWebKey): any {
+    const token = jwt.toString();
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    return JSON.parse(window.atob(base64));
+  }
+
+  protected readonly FormType = FormType;
+  protected readonly Object = Object;
+
+  public setFormType(formType: FormType) {
+    this.type = formType;
+  }
 }