Add SentComponent for form submission confirmation and integrate with email verification flow

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',
+    path: 'forms/sent',
-    loadComponent: () => import('./pages/forms/forms.component').then(m => m.FormsComponent)
+    loadComponent: () => import('./pages/forms/sent/sent.component').then(m => m.SentComponent),
+    canActivate: [AuthGuard],
+    data: {
+      requiredAuthorizations: ['SCOPE_user']
+    }
   },
   {
     path: 'community',

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;

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>

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

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