Add loading state guards to checkPunishment and onSubmit buttons to prevent duplicate actions and update visibility of related variables.

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

@@ -52,7 +52,8 @@
                   <input matInput placeholder="Discord ID" [(ngModel)]="discordId"
                          minlength="17" maxlength="18" pattern="^[0-9]+$">
                 </mat-form-field>
-                <button mat-raised-button (click)="checkPunishment()" [disabled]="authService.username() == null">
+                <button mat-raised-button (click)="checkPunishment()"
+                        [disabled]="punishmentLoading || authService.username() == null">
                   Check punishments
                 </button>
               </section>
@@ -148,7 +149,7 @@
                         }
                       </mat-form-field>
                     </div>
-                    <button mat-raised-button (click)="onSubmit()" [disabled]="form.invalid">
+                    <button mat-raised-button (click)="onSubmit()" [disabled]="formSubmitting || form.invalid">
                       Submit Appeal
                     </button>
                   </section>

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

@@ -13,6 +13,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {VerifyMailDialogComponent} from '@pages/forms/verify-mail-dialog/verify-mail-dialog.component';
 import {MatDialog} from '@angular/material/dialog';
 import {Router} from '@angular/router';
+import {finalize} from 'rxjs';
 
 @Component({
   selector: 'app-discord-appeal',
@@ -131,7 +132,12 @@ export class DiscordAppealComponent implements OnInit {
     return this.currentPageIndex === this.totalPages.length - 1;
   }
 
+  protected punishmentLoading: boolean = false;
+
   protected checkPunishment() {
+    if (this.punishmentLoading) {
+      return;
+    }
     if (window.location.hostname === 'localhost') {
       this.bannedUser = {
         isBanned: false,
@@ -146,6 +152,9 @@ export class DiscordAppealComponent implements OnInit {
       return
     }
     this.appealService.getBannedUser(this.discordId)
+      .pipe(
+        finalize(() => this.punishmentLoading = false)
+      )
       .subscribe(user => {
         this.bannedUser = user
         this.nextPage();
@@ -171,7 +180,12 @@ export class DiscordAppealComponent implements OnInit {
     }
   }
 
+  protected formSubmitting: boolean = false;
+
   private sendForm() {
+    if (this.formSubmitting) {
+      return;
+    }
     const rawValue = this.form.getRawValue();
     const uuid = this.authService.getUuid();
     if (uuid === null) {
@@ -182,14 +196,18 @@ export class DiscordAppealComponent implements OnInit {
       appeal: rawValue.appeal,
       email: rawValue.email,
     }
-    this.appealService.submitDiscordAppeal(appeal).subscribe((result) => {
-      if (!result.verified_mail) {
-        throw new Error('Mail not verified');
-      }
-      this.router.navigate(['/forms/sent'], {
-        state: {message: result.message}
-      }).then();
-    })
+    this.appealService.submitDiscordAppeal(appeal)
+      .pipe(
+        finalize(() => this.formSubmitting = false)
+      )
+      .subscribe((result) => {
+        if (!result.verified_mail) {
+          throw new Error('Mail not verified');
+        }
+        this.router.navigate(['/forms/sent'], {
+          state: {message: result.message}
+        }).then();
+      })
   }
 }