From d1da1296bbb40fdaf5c9f8e3c278264b9094c190 Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Sat, 23 Aug 2025 22:42:18 +0200
Subject: [PATCH] Add `SentComponent` for form submission confirmation and
 integrate with email verification flow

---
 frontend/src/app/app.routes.ts                | 12 ++++++--
 .../pages/forms/appeal/appeal.component.ts    | 12 +++++++-
 .../app/pages/forms/sent/sent.component.html  | 13 +++++++++
 .../app/pages/forms/sent/sent.component.scss  |  0
 .../pages/forms/sent/sent.component.spec.ts   | 23 +++++++++++++++
 .../app/pages/forms/sent/sent.component.ts    | 28 +++++++++++++++++++
 6 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/app/pages/forms/sent/sent.component.html
 create mode 100644 frontend/src/app/pages/forms/sent/sent.component.scss
 create mode 100644 frontend/src/app/pages/forms/sent/sent.component.spec.ts
 create mode 100644 frontend/src/app/pages/forms/sent/sent.component.ts

diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
index 8807c02..9dbaac1 100644
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -106,6 +106,10 @@ export const routes: Routes = [
     path: 'staffpowers',
     loadComponent: () => import('./pages/reference/staffpowers/staffpowers.component').then(m => m.StaffpowersComponent)
   },
+  {
+    path: 'forms',
+    loadComponent: () => import('./pages/forms/forms.component').then(m => m.FormsComponent)
+  },
   {
     path: 'forms/appeal',
     loadComponent: () => import('./pages/forms/appeal/appeal.component').then(m => m.AppealComponent),
@@ -115,8 +119,12 @@ export const routes: Routes = [
     }
   },
   {
-    path: 'forms',
-    loadComponent: () => import('./pages/forms/forms.component').then(m => m.FormsComponent)
+    path: 'forms/sent',
+    loadComponent: () => import('./pages/forms/sent/sent.component').then(m => m.SentComponent),
+    canActivate: [AuthGuard],
+    data: {
+      requiredAuthorizations: ['SCOPE_user']
+    }
   },
   {
     path: 'community',
diff --git a/frontend/src/app/pages/forms/appeal/appeal.component.ts b/frontend/src/app/pages/forms/appeal/appeal.component.ts
index dc7b3f9..862c8e3 100644
--- a/frontend/src/app/pages/forms/appeal/appeal.component.ts
+++ b/frontend/src/app/pages/forms/appeal/appeal.component.ts
@@ -23,6 +23,7 @@ import {MatInputModule} from '@angular/material/input';
 import {HistoryFormatService} from '@pages/reference/bans/history-format.service';
 import {MatDialog} from '@angular/material/dialog';
 import {VerifyMailDialogComponent} from '@pages/forms/verify-mail-dialog/verify-mail-dialog.component';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-appeal',
@@ -163,6 +164,8 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
+  private router = inject(Router)
+
   private sendForm() {
     const rawValue = this.form.getRawValue();
     const uuid = this.authService.getUuid();
@@ -177,7 +180,14 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
       username: this.authService.username()!,
       uuid: uuid
     }
-    this.appealsService.submitMinecraftAppeal(appeal).subscribe()
+    this.appealsService.submitMinecraftAppeal(appeal).subscribe((result) => {
+      if (!result.verified_mail) {
+        throw new Error('Mail not verified');
+      }
+      this.router.navigate(['/form/sent'], {
+        state: {message: result.message}
+      }).then();
+    })
   }
 
   public currentPageIndex: number = 0;
diff --git a/frontend/src/app/pages/forms/sent/sent.component.html b/frontend/src/app/pages/forms/sent/sent.component.html
new file mode 100644
index 0000000..39f928a
--- /dev/null
+++ b/frontend/src/app/pages/forms/sent/sent.component.html
@@ -0,0 +1,13 @@
+<div>
+  <app-header [current_page]="'appeal'" height="200px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">
+    <div class="title" header-content>
+      <h1>Form completed</h1>
+    </div>
+  </app-header>
+  <main>
+    <section class="darkmodeSection">
+      <p>{{ message }}</p>
+    </section>
+  </main>
+</div>
diff --git a/frontend/src/app/pages/forms/sent/sent.component.scss b/frontend/src/app/pages/forms/sent/sent.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/pages/forms/sent/sent.component.spec.ts b/frontend/src/app/pages/forms/sent/sent.component.spec.ts
new file mode 100644
index 0000000..3953350
--- /dev/null
+++ b/frontend/src/app/pages/forms/sent/sent.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SentComponent } from './sent.component';
+
+describe('SentComponent', () => {
+  let component: SentComponent;
+  let fixture: ComponentFixture<SentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SentComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/pages/forms/sent/sent.component.ts b/frontend/src/app/pages/forms/sent/sent.component.ts
new file mode 100644
index 0000000..42aef15
--- /dev/null
+++ b/frontend/src/app/pages/forms/sent/sent.component.ts
@@ -0,0 +1,28 @@
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {HeaderComponent} from '@header/header.component';
+
+@Component({
+  selector: 'app-sent',
+  imports: [
+    HeaderComponent
+  ],
+  templateUrl: './sent.component.html',
+  styleUrl: './sent.component.scss',
+  standalone: true
+})
+export class SentComponent implements OnInit {
+  protected message: string = "The form is completed and has been sent";
+
+  constructor(private router: Router) {
+  }
+
+  ngOnInit() {
+    const navigation = this.router.getCurrentNavigation();
+    const state = navigation?.extras.state as { message: string };
+
+    if (state?.message) {
+      this.message = state.message;
+    }
+  }
+}