From a6a62d756366e41315ce215bf75428313aa62d8a Mon Sep 17 00:00:00 2001
From: Dorian Nemec <dorian.nemec@octagen.de>
Date: Wed, 12 Feb 2025 14:14:02 +0100
Subject: [PATCH] TD-29: Registration Form Created

---
 package.json                                  |  2 +-
 src/app/app.component.ts                      |  1 +
 src/app/app.config.ts                         | 15 ++++---
 .../registration-form.component.html          | 17 ++++++++
 .../registration-form.component.scss          |  5 +++
 .../registration-form.component.ts            | 42 +++++++++++++++++++
 .../views/dashboard/dashboard.component.html  |  2 +-
 .../views/dashboard/dashboard.component.ts    |  7 ++--
 8 files changed, 80 insertions(+), 11 deletions(-)
 create mode 100644 src/app/registration-form/registration-form.component.html
 create mode 100644 src/app/registration-form/registration-form.component.scss
 create mode 100644 src/app/registration-form/registration-form.component.ts

diff --git a/package.json b/package.json
index 9f0ef36..03945de 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
         "stylelint-scss": "^6.11.0",
         "typescript": "~5.6.2"
     },
-    "api_version": "v0.0.0-rc.2",
+    "api_version": "v0.0.0-rc.3",
     "volta": {
         "node": "22.13.1"
     }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2b05453..8f78ce5 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -4,6 +4,7 @@ import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from '@app/header/header.component';
 import { NotificationBoxComponent } from '@app/notification-box/notification-box.component';
 
+
 @Component({
     selector: 'app-root',
     imports: [RouterOutlet, HeaderComponent, NotificationBoxComponent],
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index ab2b169..f47ecae 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,15 +1,18 @@
-import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { provideRouter } from '@angular/router';
+import {provideHttpClient} from '@angular/common/http';
+import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
+import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
+import {provideRouter} from '@angular/router';
+import {BASE_PATH, Configuration} from '@core/server';
 
-import { routes } from './app.routes';
+import {routes} from './app.routes';
 
 export const appConfig: ApplicationConfig = {
     providers: [
-        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideZoneChangeDetection({eventCoalescing: true}),
         provideAnimationsAsync(),
         provideRouter(routes),
         provideHttpClient(),
+        Configuration,
+        {provide: BASE_PATH, useValue: 'http://localhost:8080/api/v1'}
     ]
 };
diff --git a/src/app/registration-form/registration-form.component.html b/src/app/registration-form/registration-form.component.html
new file mode 100644
index 0000000..fd3f1ef
--- /dev/null
+++ b/src/app/registration-form/registration-form.component.html
@@ -0,0 +1,17 @@
+<form [formGroup]="registrationForm" class="registration-form">
+        <h2>Player Registration</h2>
+
+        <mat-form-field appearance="fill">
+            <mat-label>Username</mat-label>
+            <input formControlName="username" matInput type="text" required>
+            <mat-error> Username is required! </mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill">
+            <mat-label>Password</mat-label>
+            <input formControlName="password" matInput type="password" required>
+            <mat-error> Password is required! </mat-error>
+        </mat-form-field>
+
+        <button mat-flat-button (click)="registerPlayer()">Register</button>
+</form>
diff --git a/src/app/registration-form/registration-form.component.scss b/src/app/registration-form/registration-form.component.scss
new file mode 100644
index 0000000..ab1a407
--- /dev/null
+++ b/src/app/registration-form/registration-form.component.scss
@@ -0,0 +1,5 @@
+.registration-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/app/registration-form/registration-form.component.ts b/src/app/registration-form/registration-form.component.ts
new file mode 100644
index 0000000..4c44154
--- /dev/null
+++ b/src/app/registration-form/registration-form.component.ts
@@ -0,0 +1,42 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {NotificationService, NotificationType} from '@core/notification/notification.service';
+import {PlayerRegistrationData, ServerService} from '@core/server';
+
+@Component({
+    selector: 'app-registration-form',
+    imports: [MatFormFieldModule, FormsModule, MatSelectModule, MatInputModule, MatButtonModule, ReactiveFormsModule],
+    templateUrl: './registration-form.component.html',
+    styleUrl: './registration-form.component.scss',
+    standalone: true
+})
+export class RegistrationFormComponent {
+    registrationForm: FormGroup;
+
+
+    constructor(private serverApi: ServerService, private formBuilder: FormBuilder, private notifications: NotificationService) {
+        this.registrationForm = this.formBuilder.group<PlayerRegistrationData>({
+            username: '',
+            password: '',
+        });
+    }
+
+    registerPlayer() {
+        if (!this.registrationForm.valid) {
+            this.notifications.publish('This form is invalid!', NotificationType.Error);
+            return;
+        }
+        this.serverApi
+            .playerRegister(this.registrationForm.value)
+            .subscribe((response) => {
+                this.notifications.publish('Registered successfully!', NotificationType.Information);
+            });
+    }
+
+
+
+}
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index e0c966a..a9119ed 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -1,3 +1,3 @@
 <div class="dashboard">
-    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere illo animi quidem repellat perspiciatis, excepturi amet corrupti ipsa sit consequuntur placeat ratione saepe velit asperiores suscipit esse quod minima exercitationem minus, alias laudantium inventore! Beatae cum nobis error suscipit cupiditate, praesentium itaque ut ipsa iusto in doloribus unde quisquam consequuntur.</p>
+    <app-registration-form></app-registration-form>
 </div>
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 4653ae7..2ba77e2 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {RegistrationFormComponent} from '@app/registration-form/registration-form.component';
 
 @Component({
     selector: 'app-dashboard',
-    imports: [],
+    imports: [RegistrationFormComponent],
     templateUrl: './dashboard.component.html',
     styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent {
-   
+
 }