Prevent duplicate submissions in sendForm by adding a loading state guard and updating the submit button's disabled condition.

This commit is contained in:
akastijn 2025-11-24 01:56:36 +01:00
parent a9e9f1f03a
commit c56f5f9fe1
2 changed files with 19 additions and 9 deletions

View File

@ -130,7 +130,7 @@
} }
</mat-form-field> </mat-form-field>
</div> </div>
<button mat-raised-button (click)="onSubmit()" [disabled]="form.invalid"> <button mat-raised-button (click)="onSubmit()" [disabled]="formSubmitting || form.invalid">
Submit Appeal Submit Appeal
</button> </button>
</section> </section>

View File

@ -15,6 +15,7 @@ import {MatDialog} from '@angular/material/dialog';
import {VerifyMailDialogComponent} from '@pages/forms/verify-mail-dialog/verify-mail-dialog.component'; import {VerifyMailDialogComponent} from '@pages/forms/verify-mail-dialog/verify-mail-dialog.component';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {FullSizeComponent} from '@shared-components/full-size/full-size.component'; import {FullSizeComponent} from '@shared-components/full-size/full-size.component';
import {finalize} from 'rxjs';
@Component({ @Component({
selector: 'app-appeal', selector: 'app-appeal',
@ -118,7 +119,12 @@ export class AppealComponent implements OnInit, OnDestroy {
private router = inject(Router) private router = inject(Router)
protected formSubmitting: boolean = false;
private sendForm() { private sendForm() {
if (this.formSubmitting) {
return;
}
const rawValue = this.form.getRawValue(); const rawValue = this.form.getRawValue();
const uuid = this.authService.getUuid(); const uuid = this.authService.getUuid();
if (uuid === null) { if (uuid === null) {
@ -132,14 +138,18 @@ export class AppealComponent implements OnInit, OnDestroy {
username: this.authService.username()!, username: this.authService.username()!,
uuid: uuid uuid: uuid
} }
this.appealsService.submitMinecraftAppeal(appeal).subscribe((result) => { this.appealsService.submitMinecraftAppeal(appeal)
if (!result.verified_mail) { .pipe(
throw new Error('Mail not verified'); finalize(() => this.formSubmitting = false)
} )
this.router.navigate(['/forms/sent'], { .subscribe((result) => {
state: {message: result.message} if (!result.verified_mail) {
}).then(); throw new Error('Mail not verified');
}) }
this.router.navigate(['/forms/sent'], {
state: {message: result.message}
}).then();
})
} }
public currentPageIndex: number = 0; public currentPageIndex: number = 0;