Improve email verification flow by adding verified email pre-fill, validation handling, and dialog-based verification support.

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

@@ -21,6 +21,8 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {MatInputModule} from '@angular/material/input';
 import {HistoryFormatService} from '@pages/reference/bans/history-format.service';
+import {MatDialog} from '@angular/material/dialog';
+import {SentComponent} from '@pages/forms/sent/sent.component';
 
 @Component({
   selector: 'app-appeal',
@@ -52,7 +54,11 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
   protected history = signal<PunishmentHistory[] | null>(null);
   protected selectedPunishment = signal<PunishmentHistory | null>(null);
   private emails = signal<EmailEntry[]>([]);
-  protected verifiedEmails = computed(() => this.emails().filter(email => email.verified));
+  protected verifiedEmails = computed(() => this.emails()
+    .filter(email => email.verified)
+    .map(email => email.email.toLowerCase()));
+  protected validatedMail = signal<boolean>(false);
+  protected dialog = inject(MatDialog);
 
   constructor(
     private elementRef: ElementRef,
@@ -64,7 +70,12 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
     });
     this.mailService.getUserEmails().subscribe(emails => {
       this.emails.set(emails);
-    })
+    });
+    this.form.valueChanges.subscribe(() => {
+      if (this.form.getRawValue().email.toLowerCase() in this.verifiedEmails()) {
+        this.validatedMail.set(true);
+      }
+    });
   }
 
   ngOnInit() {
@@ -202,6 +213,21 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
   onPunishmentSelected($event: PunishmentHistory) {
     this.selectedPunishment.set($event);
   }
+
+  protected validateMailOrNextPage() {
+    if (this.validatedMail()) {
+      this.nextPage();
+      return;
+    }
+    const dialogRef = this.dialog.open(SentComponent, {
+      data: {email: this.form.getRawValue().email},
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result === true) {
+        this.validatedMail.set(true);
+      }
+    });
+  }
 }
 
 interface Appeal {