Implement appeal form flow with dynamic pages, integrate punishment selection, and add username retrieval logic. Update API schema and enhance auth.service for username handling.

2025-08-05 23:11:38 +02:00 · 2025-08-05 23:11:38 +02:00 · ae1e972438
parent 737b26a6c7
commit ae1e972438
8 changed files with 229 additions and 40 deletions
--- a/backend/src/main/java/com/alttd/altitudeweb/config/SecurityConfig.java
+++ b/backend/src/main/java/com/alttd/altitudeweb/config/SecurityConfig.java
@ -40,6 +40,7 @@ public class SecurityConfig {
                .authorizeHttpRequests(
                        auth -> auth
                                .requestMatchers("/api/form/**").hasAuthority(PermissionClaimDto.USER.getValue())
+                                .requestMatchers("/api/login/userLogin").hasAuthority(PermissionClaimDto.USER.getValue())
                                .requestMatchers("/api/head_mod/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
                                .requestMatchers("/api/particles/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
                                .requestMatchers("/api/files/save/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
--- a/backend/src/main/java/com/alttd/altitudeweb/controllers/application/AppealController.java
+++ b/backend/src/main/java/com/alttd/altitudeweb/controllers/application/AppealController.java
@ -1,4 +1,4 @@
-package com.alttd.altitudeweb.controllers.application;
+package com.alttd.altitudeweb.controllers.forms;

 import com.alttd.altitudeweb.api.AppealsApi;
 import com.alttd.altitudeweb.services.limits.RateLimit;
--- a/frontend/src/app/pages/forms/appeal/appeal.component.html
+++ b/frontend/src/app/pages/forms/appeal/appeal.component.html
@ -10,48 +10,140 @@
      <div class="form-container">
        <div class="pages">
          @if (currentPageIndex === 0) {
-            <section class="formPage">
-              <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
-              <h1>Punishment Appeal</h1>
-              <p>We aim to respond within 48 hours.</p>
-            </section>
+            @if (history()?.length === 0) {
+              <section class="formPage">
+                <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
+                <h1>Punishment Appeal</h1>
+                <p>You have no punishments to appeal.</p>
+              </section>
+            } @else {
+              <section class="formPage">
+                <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
+                <h1>Punishment Appeal</h1>
+                <p>We aim to respond within 48 hours.</p>
+                <button mat-raised-button (click)="nextPage()" [disabled]="history() == null">
+                  @if (history() == null) {
+                    <mat-spinner></mat-spinner>
+                  } @else {
+                    Next
+                  }
+                </button>
+              </section>
+            }
          }

-          <!-- Page 2 -->
          @if (currentPageIndex === 1) {
            <section class="formPage">
-              <h1>Page 2</h1>
-              <p>This is the second page of the form.</p>
+              <div class="description">
+                <p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct account
+                  please continue</p>
+                <br>
+                <p><strong>Notice: </strong> Submitting an appeal is <strong>not</strong> an instant process.
+                  We will investigate the punishment you are appealing and respond within 48 hours.</p>
+                <p style="font-style: italic;">Appeals that seem to have been made with
+                  little to no effort will be automatically denied.</p>
+              </div>
+              <button mat-raised-button (click)="nextPage()" [disabled]="authService.username() == null">
+                I, {{ authService.username() }}, understand and agree
+              </button>
            </section>
          }

-          <!-- Page 3 -->
          @if (currentPageIndex === 2) {
            <section class="formPage">
-              <h1>Page 3</h1>
-              <p>This is the third page of the form.</p>
+              <div class="description">
+                <h2>Please select the punishment you want to appeal</h2>
+              </div>
+              <mat-form-field>
+                <mat-label>Punishment</mat-label>
+                <mat-select (valueChange)="onPunishmentSelected($event)">
+                  @for (punishment of history(); track punishment) {
+                    <mat-option [value]="punishment">{{ punishment.type }} - {{ punishment.reason }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+              @if (selectedPunishment() != null) {
+                <button mat-raised-button (click)="nextPage()" [disabled]="selectedPunishment() == null">
+                  Appeal {{ selectedPunishment()!.type }}
+                </button>
+              }
            </section>
          }
+
+          <form [formGroup]="form">
+            @if (currentPageIndex === 3) {
+              <section class="formPage">
+                <div class="description">
+                  <h2>Please enter your email.</h2>
+                  <p style="font-style: italic">It does not have to be your minecraft email.</p>
+                  <mat-form-field appearance="fill" style="width: 100%;">
+                    <mat-label>Email</mat-label>
+                    <input matInput formControlName="email" placeholder="Email">
+                    @if (form.controls.email.invalid && form.controls.email.touched) {
+                      <mat-error>
+                        @if (form.controls.email.errors?.['required']) {
+                          Email is required
+                        } @else if (form.controls.email.errors?.['email']) {
+                          Please enter a valid email address
+                        }
+                      </mat-error>
+                    }
+                  </mat-form-field>
+                </div>
+                <button mat-raised-button (click)="nextPage()" [disabled]="form.controls.email.invalid">
+                  Next
+                </button>
+              </section>
+            }
+
+            @if (currentPageIndex === 4) {
+              <section class="formPage">
+                <div class="description">
+                  <h2>Why should your {{ selectedPunishment()?.type }} be reduced or removed?</h2>
+                  <p style="font-style: italic">Please take your time writing this, we're more likely to accept an
+                    appeal if effort was put into it.</p>
+                  <mat-form-field appearance="fill" style="width: 100%;">
+                    <mat-label>Reason</mat-label>
+                    <textarea matInput formControlName="appeal" placeholder="Reason" rows="6"></textarea>
+                    @if (form.controls.appeal.invalid && form.controls.appeal.touched) {
+                      <mat-error>
+                        @if (form.controls.appeal.errors?.['required']) {
+                          Reason is required
+                        } @else if (form.controls.appeal.errors?.['minlength']) {
+                          Reason must be at least 10 characters
+                        }
+                      </mat-error>
+                    }
+                  </mat-form-field>
+                </div>
+                <button mat-raised-button (click)="onSubmit()" [disabled]="form.invalid">
+                  Submit Appeal
+                </button>
+              </section>
+            }
+          </form>
        </div>

        <!-- Navigation dots -->
-        <div class="form-navigation">
-          <button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
-            <mat-icon>navigate_before</mat-icon>
-          </button>
+        @if (totalPages.length > 1) {
+          <div class="form-navigation">
+            <button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
+              <mat-icon>navigate_before</mat-icon>
+            </button>

-          @for (i of totalPages; track i) {
-            <div
-              class="nav-dot"
-              [class.active]="i === currentPageIndex"
-              (click)="goToPage(i)">
-            </div>
-          }
+            @for (i of totalPages; track i) {
+              <div
+                class="nav-dot"
+                [class.active]="i === currentPageIndex"
+                (click)="goToPage(i)">
+              </div>
+            }

-          <button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
-            <mat-icon>navigate_next</mat-icon>
-          </button>
-        </div>
+            <button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
+              <mat-icon>navigate_next</mat-icon>
+            </button>
+          </div>
+        }
      </div>
    </section>
  </main>
--- a/frontend/src/app/pages/forms/appeal/appeal.component.scss
+++ b/frontend/src/app/pages/forms/appeal/appeal.component.scss
@ -84,3 +84,8 @@ main {
  margin-top: auto;
  margin-bottom: auto;
 }
+
+.description {
+  max-width: 75ch;
+  text-align: left;
+}
--- a/frontend/src/app/pages/forms/appeal/appeal.component.ts
+++ b/frontend/src/app/pages/forms/appeal/appeal.component.ts
@ -1,10 +1,15 @@
-import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
-import {AppealsService, MinecraftAppeal} from '@api';
+import {AfterViewInit, Component, ElementRef, OnInit, Renderer2, signal} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {AppealsService, HistoryService, MinecraftAppeal, PunishmentHistory} from '@api';
 import {HeaderComponent} from '@header/header.component';
 import {NgOptimizedImage} from '@angular/common';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
+import {AuthService} from '@services/auth.service';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {MatInputModule} from '@angular/material/input';

@Component({
  selector: 'app-appeal',
@ -12,7 +17,12 @@ import {MatIconModule} from '@angular/material/icon';
    HeaderComponent,
    NgOptimizedImage,
    MatButtonModule,
-    MatIconModule
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    ReactiveFormsModule,
  ],
  templateUrl: './appeal.component.html',
  styleUrl: './appeal.component.scss'
@ -22,21 +32,30 @@ export class AppealComponent implements OnInit, AfterViewInit {
  public form: FormGroup<Appeal>;
  private resizeObserver: ResizeObserver | null = null;
  private boundHandleResize: any;
+  protected history = signal<PunishmentHistory[] | null>(null);
+  protected selectedPunishment = signal<PunishmentHistory | null>(null);

  constructor(
    private appealApi: AppealsService,
+    private historyApi: HistoryService,
+    protected authService: AuthService,
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) {
    this.form = new FormGroup({
-      username: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
-      punishmentId: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
      email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
      appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]})
    });
  }

  ngOnInit() {
+    const uuid = this.authService.getUuid();
+    if (uuid === null) {
+      throw new Error('JWT subject is null, are you logged in?');
+    }
+    this.historyApi.getAllHistoryForUUID(uuid).subscribe(history => {
+      this.history.set(history);
+    })
  }

  ngAfterViewInit() {
@ -116,18 +135,22 @@ export class AppealComponent implements OnInit, AfterViewInit {

  private sendForm() {
    const rawValue = this.form.getRawValue();
+    const uuid = this.authService.getUuid();
+    if (uuid === null) {
+      throw new Error('JWT subject is null, are you logged in?');
+    }
    const appeal: MinecraftAppeal = {
      appeal: rawValue.appeal,
      email: rawValue.email,
-      punishmentId: parseInt(rawValue.punishmentId),
-      username: rawValue.username,
-      uuid: ''//TODO
+      punishmentId: this.selectedPunishment()!.id,
+      username: this.authService.username()!,
+      uuid: uuid
    }
    this.appealApi.submitMinecraftAppeal(appeal).subscribe()
  }

  public currentPageIndex: number = 0;
-  public totalPages: number[] = [0, 1, 2];
+  public totalPages: number[] = [0];

  public goToPage(pageIndex: number): void {
    if (pageIndex >= 0 && pageIndex < this.totalPages.length) {
@ -140,6 +163,11 @@ export class AppealComponent implements OnInit, AfterViewInit {
  }

  public nextPage() {
+    if (this.currentPageIndex === this.totalPages.length - 1) {
+      console.log('Adding page');
+      this.totalPages.push(this.currentPageIndex + 1);
+      console.log(this.totalPages);
+    }
    this.goToPage(this.currentPageIndex + 1);
  }

@ -150,11 +178,15 @@ export class AppealComponent implements OnInit, AfterViewInit {
  public isLastPage(): boolean {
    return this.currentPageIndex === this.totalPages.length - 1;
  }
+
+  protected readonly length = length;
+
+  onPunishmentSelected($event: PunishmentHistory) {
+    this.selectedPunishment.set($event);
+  }
 }

 interface Appeal {
-  username: FormControl<string>;
-  punishmentId: FormControl<string>;
  email: FormControl<string>;
  appeal: FormControl<string>;
 }
--- a/frontend/src/app/services/auth.service.ts
+++ b/frontend/src/app/services/auth.service.ts
@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, signal} from '@angular/core';
 import {LoginService} from '@api';
 import {BehaviorSubject, Observable, throwError} from 'rxjs';
 import {catchError, tap} from 'rxjs/operators';
@ -17,6 +17,8 @@ export class AuthService {
  private userClaimsSubject = new BehaviorSubject<JwtClaims | null>(null);
  public userClaims$ = this.userClaimsSubject.asObservable();
  private jwtHelper = new JwtHelperService();
+  private _username = signal<string | null>(environment.defaultAuthStatus ? 'akastijn' : null);
+  public readonly username = this._username.asReadonly();

  constructor(
    private loginService: LoginService,
@ -34,6 +36,8 @@ export class AuthService {
      tap(jwt => {
        this.saveJwt(jwt);
        this.isAuthenticatedSubject.next(true);
+
+        this.reloadUsername();
      }),
      catchError(error => {
        this.snackBar.open('Login failed', '', {duration: 2000});
@ -42,6 +46,17 @@ export class AuthService {
    );
  }

+  private reloadUsername() {
+    this.loginService.getUsername().pipe(
+      tap(username => {
+        this._username.set(username.username);
+      }),
+      catchError(error => {
+        return throwError(() => error);
+      })
+    )
+  }
+
  /**
   * Log the user out by removing the JWT
   */
@ -49,6 +64,7 @@ export class AuthService {
    localStorage.removeItem('jwt');
    this.isAuthenticatedSubject.next(false);
    this.userClaimsSubject.next(null);
+    this._username.set(null);
  }

  /**
@ -68,6 +84,7 @@ export class AuthService {
        console.log("User claims: ", claims);
        this.userClaimsSubject.next(claims);
        this.isAuthenticatedSubject.next(true);
+        this.reloadUsername();
        return true;
      } catch (e) {
        this.logout();
@ -113,4 +130,15 @@ export class AuthService {
    const userAuthorizations = this.getUserAuthorizations();
    return requiredAuthorizations.some(auth => userAuthorizations.includes(auth));
  }
+
+  public getUuid(): string | null {
+    if (environment.defaultAuthStatus) {
+      return '55e46bc3-2a29-4c53-850f-dbd944dc5c5f';
+    }
+    const jwtClaims = this.userClaimsSubject.getValue();
+    if (jwtClaims === null) {
+      return null;
+    }
+    return jwtClaims.sub ?? null;
+  }
 }
--- a/open_api/src/main/resources/api.yml
+++ b/open_api/src/main/resources/api.yml
@ -22,6 +22,10 @@ tags:
    description: Retrieves information about the staff team
  - name: particles
    description: All actions related to particles
+  - name: forms
+    description: All actions shared between forms
+  - name: appeals
+    description: All action related to appeals
 paths:
  /api/team/{team}:
    $ref: './schemas/team/team.yml#/getTeam'
@ -53,6 +57,8 @@ paths:
    $ref: './schemas/login/login.yml#/RequestNewUserLogin'
  /api/login/userLogin/{code}:
    $ref: './schemas/login/login.yml#/UserLogin'
+  /api/login/getUsername:
+    $ref: './schemas/login/login.yml#/GetUsername'
  /api/files/save/{filename}:
    $ref: './schemas/particles/particles.yml#/SaveFile'
  /api/files/save/{uuid}/{filename}:
--- a/open_api/src/main/resources/schemas/login/login.yml
+++ b/open_api/src/main/resources/schemas/login/login.yml
@ -62,6 +62,25 @@ RequestNewUserLogin:
          application/json:
            schema:
              $ref: '../generic/errors.yml#/components/schemas/ApiError'
+GetUsername:
+  get:
+    tags:
+      - login
+    summary: Get the username for the logged in user
+    operationId: getUsername
+    responses:
+      '200':
+        description: Username retrieved
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Username'
+      default:
+        description: Unexpected error
+        content:
+          application/json:
+            schema:
+              $ref: '../generic/errors.yml#/components/schemas/ApiError'
 components:
  parameters:
    Code:
@ -72,6 +91,12 @@ components:
        type: string
        description: The code to log in with
  schemas:
+    Username:
+      properties:
+        username:
+          type: string
+      required:
+        - username
    LoginData:
      type: object
      required: