From 5013b9a204e246cc722decf206951f8998813900 Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Tue, 5 Aug 2025 20:59:22 +0200
Subject: [PATCH] Add pagination logic to `AppealComponent` and update layout
 structure.

---
 .../pages/forms/appeal/appeal.component.html  | 55 +++++++++++++---
 .../pages/forms/appeal/appeal.component.scss  | 66 ++++++++++++++++++-
 .../pages/forms/appeal/appeal.component.ts    | 24 +++++++
 3 files changed, 134 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/pages/forms/appeal/appeal.component.html b/frontend/src/app/pages/forms/appeal/appeal.component.html
index ce4ae9a..5d1d9f1 100644
--- a/frontend/src/app/pages/forms/appeal/appeal.component.html
+++ b/frontend/src/app/pages/forms/appeal/appeal.component.html
@@ -7,15 +7,52 @@
   </app-header>
   <main>
     <section class="darkmodeSection appeal-container">
-      <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>
-          <mat-icon>send</mat-icon>
-          Minecraft Appeal
-        </button>
-      </section>
+      <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>
+          }
+
+          <!-- Page 2 -->
+          @if (currentPageIndex === 1) {
+            <section class="formPage">
+              <h1>Page 2</h1>
+              <p>This is the second page of the form.</p>
+            </section>
+          }
+
+          <!-- Page 3 -->
+          @if (currentPageIndex === 2) {
+            <section class="formPage">
+              <h1>Page 3</h1>
+              <p>This is the third page of the form.</p>
+            </section>
+          }
+        </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>
+
+          @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>
diff --git a/frontend/src/app/pages/forms/appeal/appeal.component.scss b/frontend/src/app/pages/forms/appeal/appeal.component.scss
index ba237e9..75ab28c 100644
--- a/frontend/src/app/pages/forms/appeal/appeal.component.scss
+++ b/frontend/src/app/pages/forms/appeal/appeal.component.scss
@@ -12,7 +12,15 @@ main {
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+}
+
+.form-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .formPage {
@@ -20,5 +28,59 @@ main {
   flex-direction: column;
   align-items: center;
   text-align: center;
-  margin: auto;
+  width: 100%;
+  height: 100%;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.navigation-buttons {
+  display: flex;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.form-navigation {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+
+.nav-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-top: auto;
+  margin-bottom: auto;
+
+  &.active {
+    background-color: #fff;
+  }
+}
+
+.nav-button {
+  color: #1f9bde;
+}
+
+.pages {
+  margin-top: auto;
+  margin-bottom: auto;
 }
diff --git a/frontend/src/app/pages/forms/appeal/appeal.component.ts b/frontend/src/app/pages/forms/appeal/appeal.component.ts
index 5019c60..1c1f1cc 100644
--- a/frontend/src/app/pages/forms/appeal/appeal.component.ts
+++ b/frontend/src/app/pages/forms/appeal/appeal.component.ts
@@ -126,6 +126,30 @@ export class AppealComponent implements OnInit, AfterViewInit {
     this.appealApi.submitMinecraftAppeal(appeal).subscribe()
   }
 
+  public currentPageIndex: number = 0;
+  public totalPages: number[] = [0, 1, 2];
+
+  public goToPage(pageIndex: number): void {
+    if (pageIndex >= 0 && pageIndex < this.totalPages.length) {
+      this.currentPageIndex = pageIndex;
+    }
+  }
+
+  public previousPage() {
+    this.goToPage(this.currentPageIndex - 1);
+  }
+
+  public nextPage() {
+    this.goToPage(this.currentPageIndex + 1);
+  }
+
+  public isFirstPage(): boolean {
+    return this.currentPageIndex === 0;
+  }
+
+  public isLastPage(): boolean {
+    return this.currentPageIndex === this.totalPages.length - 1;
+  }
 }
 
 interface Appeal {