Prevent duplicate staff application submissions by disabling the submit button during processing.

This commit is contained in:
akastijn 2025-10-18 23:10:56 +02:00
parent 6f6801c728
commit 300d33da7d
2 changed files with 25 additions and 8 deletions

View File

@ -287,7 +287,7 @@
</mat-form-field>
</div>
<button mat-raised-button (click)="onSubmit()"
[disabled]="isFormInvalid()">
[disabled]="isFormInvalid() || isSubmitting()">
Submit Application
</button>
</section>

View File

@ -57,6 +57,7 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
public staffApplicationService = inject(ApplicationsService)
private resizeObserver: ResizeObserver | null = null;
private boundHandleResize: any;
protected isSubmitting = signal<boolean>(false);
protected form: FormGroup<StaffApplicationForm>;
private emails = signal<EmailEntry[]>([]);
@ -219,9 +220,11 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
}
public onSubmit() {
this.isSubmitting.set(true);
if (this.form === undefined) {
console.error('Form is undefined');
this.matSnackBar.open('An error occurred, please try again later')
this.isSubmitting.set(false);
return
}
if (this.form.valid) {
@ -233,6 +236,7 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
control?.markAsTouched();
});
this.matSnackBar.open('Please fill out all required fields')
this.isSubmitting.set(false);
}
}
@ -246,14 +250,27 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
private sendForm() {
const staffApplication: StaffApplication = this.mapToStaffApplication(this.form.getRawValue());
this.staffApplicationService.submitStaffApplication(staffApplication).subscribe(result => {
if (!result.verified_mail) {
throw new Error('Submitted a form with an e-mail that was not verified.');
this.staffApplicationService.submitStaffApplication(staffApplication).subscribe({
next: result => {
if (!result.verified_mail) {
this.isSubmitting.set(false);
this.matSnackBar.open('Your email has not been verified. Please verify your email before submitting.', 'Close', {
duration: 5000
});
return;
}
this.router.navigate(['/forms/sent'], {
state: {message: result.message}
}).then();
},
error: (error) => {
this.isSubmitting.set(false);
console.error('Error submitting application:', error);
this.matSnackBar.open('An error occurred while submitting your application. Please try again later.', 'Close', {
duration: 5000
});
}
this.router.navigate(['/forms/sent'], {
state: {message: result.message}
}).then();
})
});
}
public currentPageIndex: number = 0;