From 91e5a2a9a03a9efebccc14d04568727eb5ae104c Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Sun, 12 Oct 2025 21:57:40 +0200
Subject: [PATCH] Refactor form validation and add user feedback with snackbar
 notifications in staff application form.

---
 .../staff-application/staff-application.component.html   | 2 +-
 .../staff-application/staff-application.component.ts     | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/pages/forms/staff-application/staff-application.component.html b/frontend/src/app/pages/forms/staff-application/staff-application.component.html
index 8064d54..6080fac 100644
--- a/frontend/src/app/pages/forms/staff-application/staff-application.component.html
+++ b/frontend/src/app/pages/forms/staff-application/staff-application.component.html
@@ -284,7 +284,7 @@
                   </mat-form-field>
                 </div>
                 <button mat-raised-button (click)="onSubmit()"
-                        [disabled]="form.controls.previousExperience.invalid || form.controls.pluginExperience.invalid || form.controls.moderatorExpectations.invalid">
+                        [disabled]="isFormInvalid()">
                   Submit Application
                 </button>
               </section>
diff --git a/frontend/src/app/pages/forms/staff-application/staff-application.component.ts b/frontend/src/app/pages/forms/staff-application/staff-application.component.ts
index 83cc6d4..5dc428d 100644
--- a/frontend/src/app/pages/forms/staff-application/staff-application.component.ts
+++ b/frontend/src/app/pages/forms/staff-application/staff-application.component.ts
@@ -27,6 +27,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatNativeDateModule} from '@angular/material/core';
 import {MatChipsModule} from '@angular/material/chips';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-staff-application',
@@ -51,6 +52,7 @@ import {MatChipsModule} from '@angular/material/chips';
 export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private mailService = inject(MailService);
+  private matSnackBar = inject(MatSnackBar);
   public authService = inject(AuthService);
   public staffApplicationService = inject(ApplicationsService)
   private resizeObserver: ResizeObserver | null = null;
@@ -215,6 +217,7 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
   public onSubmit() {
     if (this.form === undefined) {
       console.error('Form is undefined');
+      this.matSnackBar.open('An error occurred, please try again later')
       return
     }
     if (this.form.valid) {
@@ -225,9 +228,15 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
         const control = this.form.get(field);
         control?.markAsTouched();
       });
+      this.matSnackBar.open('Please fill out all required fields')
     }
   }
 
+
+  isFormInvalid() {
+    return !this.form.valid
+  }
+
   private router = inject(Router)
 
   private sendForm() {