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> </mat-form-field>
</div> </div>
<button mat-raised-button (click)="onSubmit()" <button mat-raised-button (click)="onSubmit()"
[disabled]="isFormInvalid()"> [disabled]="isFormInvalid() || isSubmitting()">
Submit Application Submit Application
</button> </button>
</section> </section>

View File

@ -57,6 +57,7 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
public staffApplicationService = inject(ApplicationsService) public staffApplicationService = inject(ApplicationsService)
private resizeObserver: ResizeObserver | null = null; private resizeObserver: ResizeObserver | null = null;
private boundHandleResize: any; private boundHandleResize: any;
protected isSubmitting = signal<boolean>(false);
protected form: FormGroup<StaffApplicationForm>; protected form: FormGroup<StaffApplicationForm>;
private emails = signal<EmailEntry[]>([]); private emails = signal<EmailEntry[]>([]);
@ -219,9 +220,11 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
} }
public onSubmit() { public onSubmit() {
this.isSubmitting.set(true);
if (this.form === undefined) { if (this.form === undefined) {
console.error('Form is undefined'); console.error('Form is undefined');
this.matSnackBar.open('An error occurred, please try again later') this.matSnackBar.open('An error occurred, please try again later')
this.isSubmitting.set(false);
return return
} }
if (this.form.valid) { if (this.form.valid) {
@ -233,6 +236,7 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
control?.markAsTouched(); control?.markAsTouched();
}); });
this.matSnackBar.open('Please fill out all required fields') 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() { private sendForm() {
const staffApplication: StaffApplication = this.mapToStaffApplication(this.form.getRawValue()); const staffApplication: StaffApplication = this.mapToStaffApplication(this.form.getRawValue());
this.staffApplicationService.submitStaffApplication(staffApplication).subscribe(result => { this.staffApplicationService.submitStaffApplication(staffApplication).subscribe({
if (!result.verified_mail) { next: result => {
throw new Error('Submitted a form with an e-mail that was not verified.'); 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; public currentPageIndex: number = 0;