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

backend/src/main/java/com/alttd/altitudeweb/controllers/forms/AppealController.java

@@ -73,33 +73,23 @@ public class AppealController implements AppealsApi {
                     log.debug("Retrieving mail by uuid and address");
 
                     EmailVerification verifiedMail = sqlSession.getMapper(EmailVerificationMapper.class)
-                                                                 .findByUserAndEmail(appeal.uuid(), appeal.email());
+                                                                 .findByUserAndEmail(appeal.uuid(), appeal.email().toLowerCase());
                     emailVerificationCompletableFuture.complete(Optional.ofNullable(verifiedMail));
                 });
         Optional<EmailVerification> optionalEmailVerification = emailVerificationCompletableFuture.join();
 
         if (optionalEmailVerification.isEmpty()) {
-            return ResponseEntity.ok().body(new AppealResponseDto(
+            return ResponseEntity.badRequest().build();
-                    appeal.id().toString(),
-                    "Your appeal has been saved and a verification mail has been send, please verify your email " +
-                            "address by clicking the link in your email. Once it is verified we will review your appeal.",
-                    false));
         }
         EmailVerification emailVerification = optionalEmailVerification.get();
         if (!emailVerification.verified()) {
-            return ResponseEntity.ok().body(new AppealResponseDto(
+            return ResponseEntity.badRequest().build();
-                    appeal.id().toString(),
-                    "Your appeal has been saved and a verification mail has been resend, please verify your email " +
-                            "address by clicking the link in your email. Once it is verified we will review your appeal.",
-                    false
-            ));
-        } else {
-            AppealResponseDto appealResponseDto = new AppealResponseDto(
-                    appeal.id().toString(),
-                    "Your appeal has been submitted. You will be notified when it has been reviewed.",
-                    true);
-            return ResponseEntity.ok().body(appealResponseDto);
         }
+        AppealResponseDto appealResponseDto = new AppealResponseDto(
+                appeal.id().toString(),
+                "Your appeal has been submitted. You will be notified when it has been reviewed.",
+                true);
+        return ResponseEntity.ok().body(appealResponseDto);
     }
 
     @Override

backend/src/main/java/com/alttd/altitudeweb/services/mail/MailVerificationService.java

@@ -42,19 +42,20 @@ public class MailVerificationService {
     public EmailVerification submitEmail(UUID userUuid, String email) {
         String code = generateCode();
         Instant now = Instant.now();
+        final String finalEmail = email.toLowerCase();
 
         CompletableFuture<EmailVerification> future = new CompletableFuture<>();
         Connection.getConnection(Databases.DEFAULT)
-                .runQuery(sql -> {
+                  .runQuery(sql -> {
                     EmailVerificationMapper mapper = sql.getMapper(EmailVerificationMapper.class);
-                    EmailVerification existing = mapper.findByUserAndEmail(userUuid, email);
+                    EmailVerification existing = mapper.findByUserAndEmail(userUuid, finalEmail);
                     EmailVerification toPersist;
                     if (existing == null) {
-                        toPersist = new EmailVerification(UUID.randomUUID(), userUuid, email, code, false, now, null, now);
+                        toPersist = new EmailVerification(UUID.randomUUID(), userUuid, finalEmail, code, false, now, null, now);
                         mapper.insert(toPersist);
                     } else {
                         mapper.updateCodeAndLastSent(existing.id(), code, now);
-                        toPersist = new EmailVerification(existing.id(), userUuid, email, code, false, existing.createdAt(), null, now);
+                        toPersist = new EmailVerification(existing.id(), userUuid, finalEmail, code, false, existing.createdAt(), null, now);
                     }
                     future.complete(toPersist);
                 });
@@ -82,14 +83,16 @@ public class MailVerificationService {
     public EmailVerification resend(UUID userUuid, String email) {
         String code = generateCode();
         Instant now = Instant.now();
+        final String finalEmail = email.toLowerCase();
         CompletableFuture<EmailVerification> future = new CompletableFuture<>();
         Connection.getConnection(Databases.DEFAULT)
-                .runQuery(sql -> {
+                  .runQuery(sql -> {
                     EmailVerificationMapper mapper = sql.getMapper(EmailVerificationMapper.class);
-                    EmailVerification existing = mapper.findByUserAndEmail(userUuid, email);
+                    EmailVerification existing = mapper.findByUserAndEmail(userUuid, finalEmail);
                     if (existing != null) {
                         mapper.updateCodeAndLastSent(existing.id(), code, now);
-                        future.complete(new EmailVerification(existing.id(), userUuid, email, code, false, existing.createdAt(), null, now));
+                        future.complete(new EmailVerification(existing.id(), userUuid,
+                                finalEmail, code, false, existing.createdAt(), null, now));
                     } else {
                         future.complete(null);
                     }
@@ -102,13 +105,14 @@ public class MailVerificationService {
     }
 
     public boolean delete(UUID userUuid, String email) {
+        final String finalEmail = email.toLowerCase();
         CompletableFuture<Boolean> future = new CompletableFuture<>();
         Connection.getConnection(Databases.DEFAULT)
                 .runQuery(sql -> {
                     EmailVerificationMapper mapper = sql.getMapper(EmailVerificationMapper.class);
-                    EmailVerification existing = mapper.findByUserAndEmail(userUuid, email);
+                    EmailVerification existing = mapper.findByUserAndEmail(userUuid, finalEmail);
                     if (existing != null) {
-                        mapper.deleteByUserAndEmail(userUuid, email);
+                        mapper.deleteByUserAndEmail(userUuid, finalEmail);
                         future.complete(true);
                     } else {
                         future.complete(false);
@@ -122,7 +126,7 @@ public class MailVerificationService {
             MimeMessage message = mailSender.createMimeMessage();
             MimeMessageHelper helper = new MimeMessageHelper(message, true);
             helper.setFrom(fromEmail);
-            helper.setTo(emailVerification.email());
+            helper.setTo(emailVerification.email().toLowerCase());
             helper.setSubject("Your verification code");
             helper.setText("Your verification code is: " + emailVerification.verificationCode(), false);
             mailSender.send(message);

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

@@ -75,10 +75,14 @@
               <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>
+                  <p style="font-style: italic">It does not have to be your minecraft email. You will have to verify
+                    it</p>
                   <mat-form-field appearance="fill" style="width: 100%;">
                     <mat-label>Email</mat-label>
-                    <input matInput formControlName="email" placeholder="Email">
+                    <input matInput
+                           formControlName="email"
+                           placeholder="Email"
+                           [defaultValue]="verifiedEmails().length > 0 ? verifiedEmails()[0] : ''">
                     @if (form.controls.email.invalid && form.controls.email.touched) {
                       <mat-error>
                         @if (form.controls.email.errors?.['required']) {
@@ -90,7 +94,7 @@
                     }
                   </mat-form-field>
                 </div>
-                <button mat-raised-button (click)="nextPage()" [disabled]="form.controls.email.invalid">
+                <button mat-raised-button (click)="validateMailOrNextPage()" [disabled]="form.controls.email.invalid">
                   Next
                 </button>
               </section>

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 {

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

@@ -1,11 +1,17 @@
-import {Component, inject, Input, input, signal} from '@angular/core';
+import {Component, Inject, inject, input, signal} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 import {MatInput, MatLabel} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MailService, SubmitEmail, VerifyCode} from '@api';
 import {AuthService} from '@services/auth.service';
 import {MatButtonModule} from '@angular/material/button';
-import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from '@angular/material/dialog';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from '@angular/material/dialog';
 import {interval, Subscription} from 'rxjs';
 
 @Component({
@@ -38,10 +44,11 @@ export class SentComponent {
 
   private mailService = inject(MailService);
   private authService = inject(AuthService);
+  protected readonly email: string;
 
   constructor(
     public dialogRef: MatDialogRef<SentComponent>,
-    @Input() public email: string
+    @Inject(MAT_DIALOG_DATA) public data: InputMail
   ) {
     this.form = new FormGroup({
       code: new FormControl('', {
@@ -49,6 +56,8 @@ export class SentComponent {
         validators: [Validators.required, Validators.minLength(6), Validators.maxLength(6)]
       })
     });
+    this.email = data.email;
+    this.mailService.submitEmailForVerification({email: this.email.toLowerCase()}).subscribe();
   }
 
   public onSubmit() {
@@ -81,7 +90,6 @@ export class SentComponent {
 
     this.mailService.resendVerificationEmail(submitEmail).subscribe({
       next: (response) => {
-        // Start cooldown timer
         this.startResendCooldown();
       },
       error: (error) => {
@@ -147,3 +155,7 @@ interface VerifyMailData {
   verified: boolean;
   mail: string;
 }
+
+interface InputMail {
+  email: string;
+}