Refactor FormsComponent and add AuthGuard for appeal route protection. Replace dynamic routing with static appeal route, restructure AppealComponent layout, and introduce responsive design adjustments. Update environment configuration for default auth status.

frontend/src/app/pages/forms/appeal/appeal.component.ts

@@ -1,21 +1,27 @@
-import {Component, OnInit} from '@angular/core';
-import {FormsComponent} from '../forms.component';
+import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {AppealsService, MinecraftAppeal} from '@api';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-appeal',
   imports: [
-    FormsComponent
+    HeaderComponent
   ],
   templateUrl: './appeal.component.html',
   styleUrl: './appeal.component.scss'
 })
-export class AppealComponent implements OnInit {
+export class AppealComponent implements OnInit, AfterViewInit {
 
   public form: FormGroup<Appeal>;
+  private resizeObserver: ResizeObserver | null = null;
+  private boundHandleResize: any;
 
-  constructor(private appealApi: AppealsService) {
+  constructor(
+    private appealApi: AppealsService,
+    private elementRef: ElementRef,
+    private renderer: Renderer2
+  ) {
     this.form = new FormGroup({
       username: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
       punishmentId: new FormControl('', {nonNullable: true, validators: [Validators.required]}),
@@ -27,6 +33,62 @@ export class AppealComponent implements OnInit {
   ngOnInit() {
   }
 
+  ngAfterViewInit() {
+    this.setupResizeObserver();
+    this.updateContainerHeight();
+
+    this.boundHandleResize = this.handleResize.bind(this);
+    window.addEventListener('resize', this.boundHandleResize);
+
+    setTimeout(() => this.updateContainerHeight(), 0);
+  }
+
+  ngOnDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
+    if (this.boundHandleResize) {
+      window.removeEventListener('resize', this.boundHandleResize);
+    }
+  }
+
+  private handleResize() {
+    this.updateContainerHeight();
+  }
+
+  private setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateContainerHeight();
+    });
+
+    const headerElement = document.querySelector('app-header');
+    if (headerElement) {
+      this.resizeObserver.observe(headerElement);
+    }
+
+    const footerElement = document.querySelector('footer');
+    if (footerElement) {
+      this.resizeObserver.observe(footerElement);
+    }
+  }
+
+  private updateContainerHeight() {
+    const headerElement = document.querySelector('app-header');
+    const footerElement = document.querySelector('footer');
+
+    const container = this.elementRef.nativeElement.querySelector('.appeal-container');
+
+    if (headerElement && footerElement && container) {
+      const headerHeight = headerElement.getBoundingClientRect().height;
+      const footerHeight = footerElement.getBoundingClientRect().height;
+
+      const calculatedHeight = `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
+      this.renderer.setStyle(container, 'min-height', calculatedHeight);
+    }
+  }
+
   public onSubmit() {
     if (this.form === undefined) {
       console.error('Form is undefined');
@@ -35,7 +97,6 @@ export class AppealComponent implements OnInit {
     if (this.form.valid) {
       this.sendForm()
     } else {
-      // Mark all fields as touched to trigger validation display
       Object.keys(this.form.controls).forEach(field => {
         const control = this.form!.get(field);
         if (!(control instanceof FormGroup)) {