Add email re-validation handling with UI feedback and backend validation to prevent duplicate email verification attempts

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

@@ -93,6 +93,14 @@
                       </mat-error>
                     }
                   </mat-form-field>
+                  @if (emailIsValid()) {
+                    <div class="valid-email">
+                      <ng-container matSuffix>
+                        <mat-icon>check</mat-icon>
+                        <span>Your have already validated your email, and can continue to the next page!</span>
+                      </ng-container>
+                    </div>
+                  }
                 </div>
                 <button mat-raised-button (click)="validateMailOrNextPage()" [disabled]="form.controls.email.invalid">
                   Next

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

@@ -89,3 +89,23 @@ main {
   max-width: 75ch;
   text-align: left;
 }
+
+.valid-email {
+  display: flex;
+  align-items: center;
+  color: #4CAF50;
+  margin: 10px 0;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background-color: rgba(76, 175, 80, 0.1);
+}
+
+.valid-email mat-icon {
+  color: #4CAF50;
+  margin-right: 10px;
+}
+
+.valid-email span {
+  color: #4CAF50;
+  font-weight: 500;
+}

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

@@ -58,7 +58,7 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
   protected verifiedEmails = computed(() => this.emails()
     .filter(email => email.verified)
     .map(email => email.email.toLowerCase()));
-  protected validatedMail = signal<boolean>(false);
+  protected emailIsValid = signal<boolean>(false);
   protected dialog = inject(MatDialog);
 
   constructor(
@@ -73,10 +73,13 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
       this.emails.set(emails);
     });
     this.form.valueChanges.subscribe(() => {
-      if (this.form.getRawValue().email.toLowerCase() in this.verifiedEmails()) {
-        this.validatedMail.set(true);
+      if (this.verifiedEmails().includes(this.form.getRawValue().email.toLowerCase())) {
+        this.emailIsValid.set(true);
+      } else {
+        this.emailIsValid.set(false);
       }
     });
+
   }
 
   ngOnInit() {
@@ -225,7 +228,7 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   protected validateMailOrNextPage() {
-    if (this.validatedMail()) {
+    if (this.emailIsValid()) {
       this.nextPage();
       return;
     }
@@ -234,7 +237,7 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
     });
     dialogRef.afterClosed().subscribe(result => {
       if (result === true) {
-        this.validatedMail.set(true);
+        this.emailIsValid.set(true);
       }
     });
   }