AltitudeWeb/frontend/src/app/pages/forms/appeal/appeal.component.html

<div>
  <app-header [current_page]="'appeal'" height="200px" background_image="/public/img/backgrounds/staff.png"
              [overlay_gradient]="0.5">
    <div class="title" header-content>
      <h1>Appeal</h1>
    </div>
  </app-header>
  <main>
    <section class="darkmodeSection appeal-container">
      <div class="form-container">
        <div class="pages">
          @if (currentPageIndex === 0) {
            @if (history()?.length === 0) {
              <section class="formPage">
                <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
                <h1>Punishment Appeal</h1>
                <p>You have no punishments to appeal.</p>
              </section>
            } @else {
              <section class="formPage">
                <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
                <h1>Punishment Appeal</h1>
                <p>We aim to respond within 48 hours.</p>
                <button mat-raised-button (click)="nextPage()" [disabled]="history() == null">
                  @if (history() == null) {
                    <mat-spinner></mat-spinner>
                  } @else {
                    Next
                  }
                </button>
              </section>
            }
          }

          @if (currentPageIndex === 1) {
            <section class="formPage">
              <div class="description">
                <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 an appeal is <strong>not</strong> an instant process.
                  We will investigate the punishment you are appealing and respond within 48 hours.</p>
                <p style="font-style: italic;">Appeals that seem to have been made with
                  little to no effort will be automatically denied.</p>
              </div>
              <button mat-raised-button (click)="nextPage()" [disabled]="authService.username() == null">
                I, {{ authService.username() }}, understand and agree
              </button>
            </section>
          }

          @if (currentPageIndex === 2) {
            <section class="formPage">
              <div class="description">
                <h2>Please select the punishment you want to appeal</h2>
              </div>
              <mat-form-field>
                <mat-label>Punishment</mat-label>
                <mat-select (valueChange)="onPunishmentSelected($event)">
                  @for (punishment of history(); track punishment) {
                    <mat-option [value]="punishment">{{ punishment.type }} - {{ punishment.reason }}</mat-option>
                  }
                </mat-select>
              </mat-form-field>
              @if (selectedPunishment() != null) {
                <button mat-raised-button (click)="nextPage()" [disabled]="selectedPunishment() == null">
                  Appeal {{ selectedPunishment()!.type }}
                </button>
              }
            </section>
          }

          <form [formGroup]="form">
            @if (currentPageIndex === 3) {
              <section class="formPage">
                <div class="description">
                  <h2>Please enter your email.</h2>
                  <p style="font-style: italic">It does not have to be your minecraft email. You will have to verify
                    it</p>
                  <mat-form-field appearance="fill" style="width: 100%;">
                    <mat-label>Email</mat-label>
                    <input matInput
                           formControlName="email"
                           placeholder="Email"
                           [defaultValue]="verifiedEmails().length > 0 ? verifiedEmails()[0] : ''">
                    @if (form.controls.email.invalid && form.controls.email.touched) {
                      <mat-error>
                        @if (form.controls.email.errors?.['required']) {
                          Email is required
                        } @else if (form.controls.email.errors?.['email']) {
                          Please enter a valid email address
                        }
                      </mat-error>
                    }
                  </mat-form-field>
                  @if (emailIsValid()) {
                    <div class="valid-email">
                      <ng-container matSuffix>
                        <mat-icon>check</mat-icon>
                        <span>You have validated your email previously, and can continue to the next page!</span>
                      </ng-container>
                    </div>
                  }
                </div>
                <button mat-raised-button (click)="validateMailOrNextPage()" [disabled]="form.controls.email.invalid">
                  Next
                </button>
              </section>
            }

            @if (currentPageIndex === 4) {
              <section class="formPage">
                <div class="description">
                  <h2>Why should your {{ selectedPunishment()?.type }} be reduced or removed?</h2>
                  <p style="font-style: italic">Please take your time writing this, we're more likely to accept an
                    appeal if effort was put into it.</p>
                  <mat-form-field appearance="fill" style="width: 100%;">
                    <mat-label>Reason</mat-label>
                    <textarea matInput formControlName="appeal" placeholder="Reason" rows="6"></textarea>
                    @if (form.controls.appeal.invalid && form.controls.appeal.touched) {
                      <mat-error>
                        @if (form.controls.appeal.errors?.['required']) {
                          Reason is required
                        } @else if (form.controls.appeal.errors?.['minlength']) {
                          Reason must be at least 10 characters
                        }
                      </mat-error>
                    }
                  </mat-form-field>
                </div>
                <button mat-raised-button (click)="onSubmit()" [disabled]="form.invalid">
                  Submit Appeal
                </button>
              </section>
            }
          </form>
        </div>

        <!-- Navigation dots -->
        @if (totalPages.length > 1) {
          <div class="form-navigation">
            <button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
              <mat-icon>navigate_before</mat-icon>
            </button>

            @for (i of totalPages; track i) {
              <div
                class="nav-dot"
                [class.active]="i === currentPageIndex"
                (click)="goToPage(i)">
              </div>
            }

            <button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
              <mat-icon>navigate_next</mat-icon>
            </button>
          </div>
        }
      </div>
    </section>
  </main>
</div>