Implement appeal form flow with dynamic pages, integrate punishment selection, and add username retrieval logic. Update API schema and enhance auth.service for username handling.
This commit is contained in:
@@ -10,48 +10,140 @@
|
||||
<div class="form-container">
|
||||
<div class="pages">
|
||||
@if (currentPageIndex === 0) {
|
||||
<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>
|
||||
</section>
|
||||
@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>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- Page 2 -->
|
||||
@if (currentPageIndex === 1) {
|
||||
<section class="formPage">
|
||||
<h1>Page 2</h1>
|
||||
<p>This is the second page of the form.</p>
|
||||
<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>
|
||||
}
|
||||
|
||||
<!-- Page 3 -->
|
||||
@if (currentPageIndex === 2) {
|
||||
<section class="formPage">
|
||||
<h1>Page 3</h1>
|
||||
<p>This is the third page of the form.</p>
|
||||
<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.</p>
|
||||
<mat-form-field appearance="fill" style="width: 100%;">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput formControlName="email" placeholder="Email">
|
||||
@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>
|
||||
</div>
|
||||
<button mat-raised-button (click)="nextPage()" [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 -->
|
||||
<div class="form-navigation">
|
||||
<button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
|
||||
<mat-icon>navigate_before</mat-icon>
|
||||
</button>
|
||||
@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>
|
||||
}
|
||||
@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>
|
||||
<button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
|
||||
<mat-icon>navigate_next</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user