Add conditional display logic to staff application form based on open/close status

frontend/src/app/pages/forms/staff-application/staff-application.component.html

@@ -6,6 +6,7 @@
     </div>
   </app-header>
   <main>
+    @if (staffApplicationsIsOpen()) {
       <section class="darkmodeSection staff-application-container">
         <div class="form-container">
           <div class="pages">
@@ -29,7 +30,8 @@
                   <p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct account
                     please continue</p>
                   <br>
-                <p><strong>Notice: </strong> Submitting a staff application is <strong>not</strong> an instant process.
+                  <p><strong>Notice: </strong> Submitting a staff application is <strong>not</strong> an instant
+                    process.
                     We will review your application carefully and get back to you if we think you're a good fit.</p>
                   <p style="font-style: italic;">Applications that seem to have been made with
                     little to no effort will be automatically rejected.</p>
@@ -114,7 +116,8 @@
                     <!-- PC Requirements -->
                     <div class="checkbox-field">
                       <mat-checkbox formControlName="meetsRequirements">
-                      I confirm that I meet the PC requirements (able to record video at 30fps 720p or higher, and able
+                        I confirm that I meet the PC requirements (able to record video at 30fps 720p or higher, and
+                        able
                         to talk in voice chat)
                       </mat-checkbox>
                       @if (form.controls.meetsRequirements.invalid && form.controls.meetsRequirements.touched) {
@@ -314,5 +317,9 @@
           }
         </div>
       </section>
+    } @else {
+      <h1>Staff applications are closed at this time. Please keep an eye on our announcement channel in Discord to see
+        when it opens!</h1>
+    }
   </main>
 </div>

frontend/src/app/pages/forms/staff-application/staff-application.component.ts

@@ -68,6 +68,7 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
   protected availableDays: string[] = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
   protected selectedDays: string[] = [];
   protected userTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  protected staffApplicationsIsOpen = signal<boolean>(false)
 
 
   constructor(
@@ -151,6 +152,9 @@ export class StaffApplicationComponent implements OnInit, OnDestroy, AfterViewIn
   }
 
   ngOnInit() {
+    this.staffApplicationService.getStaffApplicationsIsOpen().subscribe(isOpen => {
+      this.staffApplicationsIsOpen.set(isOpen)
+    })
     const uuid = this.authService.getUuid();
     if (uuid === null) {
       alert('Error retrieving token, please relog on the website and try again')