From b5a5026a14d41a3f6155726a4685688c58859a4b Mon Sep 17 00:00:00 2001
From: Dorian Nemec <dorian.nemec@octagen.de>
Date: Wed, 12 Feb 2025 12:49:36 +0100
Subject: [PATCH 1/3] TD-29: Player Registration Form implemented WIP: Empty
 spaces as login data

---
 package.json                                  |  2 +-
 src/app/app.component.html                    |  1 +
 src/app/app.component.ts                      |  4 +-
 src/app/app.config.ts                         | 15 ++++---
 .../registration-form.component.html          | 19 +++++++++
 .../registration-form.component.scss          |  5 +++
 .../registration-form.component.spec.ts       | 23 ++++++++++
 .../registration-form.component.ts            | 42 +++++++++++++++++++
 .../views/dashboard/dashboard.component.ts    |  5 ++-
 9 files changed, 106 insertions(+), 10 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.spec.ts
 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.html b/src/app/app.component.html
index bc25e55..f73a699 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,4 +3,5 @@
 <main>
     <h1>{{title.getTitle()}}</h1>
     <router-outlet />
+    <app-registration-form></app-registration-form>
 </main>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2b05453..a7793bd 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,10 +3,12 @@ import { Title } from '@angular/platform-browser';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from '@app/header/header.component';
 import { NotificationBoxComponent } from '@app/notification-box/notification-box.component';
+import {RegistrationFormComponent} from "@app/registration-form/registration-form.component";
+
 
 @Component({
     selector: 'app-root',
-    imports: [RouterOutlet, HeaderComponent, NotificationBoxComponent],
+    imports: [RouterOutlet, HeaderComponent, NotificationBoxComponent, RegistrationFormComponent],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'
 })
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index ab2b169..6c56324 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 { routes } from './app.routes';
+import {routes} from './app.routes';
+import {BASE_PATH, Configuration} from "@core/server";
 
 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..9a46b5a
--- /dev/null
+++ b/src/app/registration-form/registration-form.component.html
@@ -0,0 +1,19 @@
+<div>
+    <form [formGroup]="registrationForm" class="registration-container">
+        <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>
+</div>
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..ba3f8b6
--- /dev/null
+++ b/src/app/registration-form/registration-form.component.scss
@@ -0,0 +1,5 @@
+.registration-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/app/registration-form/registration-form.component.spec.ts b/src/app/registration-form/registration-form.component.spec.ts
new file mode 100644
index 0000000..c279480
--- /dev/null
+++ b/src/app/registration-form/registration-form.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistrationFormComponent } from './registration-form.component';
+
+describe('RegistrationFormComponent', () => {
+  let component: RegistrationFormComponent;
+  let fixture: ComponentFixture<RegistrationFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RegistrationFormComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RegistrationFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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..f8d6d11
--- /dev/null
+++ b/src/app/registration-form/registration-form.component.ts
@@ -0,0 +1,42 @@
+import {Component} from '@angular/core';
+import {PlayerRegistrationData, ServerService} from "@core/server";
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatSelectModule} from '@angular/material/select';
+import {MatInputModule} from '@angular/material/input';
+import {MatButtonModule} from "@angular/material/button";
+import {NotificationService, NotificationType} from "@core/notification/notification.service";
+import {isEmpty, max} from "rxjs";
+
+@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: "",
+        })
+        //this.registrationForm.addValidators(isEmpty);
+    }
+
+    registerPlayer() {
+        if (!this.registrationForm.valid) {
+            this.notifications.publish("This form is invalid!", NotificationType.Error);
+            return;
+        }
+        this.serverApi
+            .playerRegister(this.registrationForm.value)
+            .subscribe((response) => {
+                console.log(response);
+            });
+    }
+
+}
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 4653ae7..6f6fb10 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {ServerService} from "@core/server";
 
 @Component({
     selector: 'app-dashboard',
@@ -7,5 +8,5 @@ import { Component } from '@angular/core';
     styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent {
-   
+
 }
-- 
2.45.3


From d77dfb0526a78ac86a28900adad8af9d525335ed Mon Sep 17 00:00:00 2001
From: Dorian Nemec <dorian.nemec@octagen.de>
Date: Wed, 12 Feb 2025 12:56:03 +0100
Subject: [PATCH 2/3] TD-29: Player Registration Form implemented WIP: Empty
 spaces as login data

---
 src/app/app.component.ts                      |  2 +-
 src/app/app.config.ts                         |  2 +-
 .../registration-form.component.spec.ts       | 28 +++++++++----------
 .../registration-form.component.ts            | 19 ++++++-------
 .../views/dashboard/dashboard.component.ts    |  1 -
 5 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a7793bd..3c345ea 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Title } from '@angular/platform-browser';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from '@app/header/header.component';
 import { NotificationBoxComponent } from '@app/notification-box/notification-box.component';
-import {RegistrationFormComponent} from "@app/registration-form/registration-form.component";
+import {RegistrationFormComponent} from '@app/registration-form/registration-form.component';
 
 
 @Component({
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 6c56324..f47ecae 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -2,9 +2,9 @@ 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 {BASE_PATH, Configuration} from "@core/server";
 
 export const appConfig: ApplicationConfig = {
     providers: [
diff --git a/src/app/registration-form/registration-form.component.spec.ts b/src/app/registration-form/registration-form.component.spec.ts
index c279480..a1068c3 100644
--- a/src/app/registration-form/registration-form.component.spec.ts
+++ b/src/app/registration-form/registration-form.component.spec.ts
@@ -3,21 +3,21 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RegistrationFormComponent } from './registration-form.component';
 
 describe('RegistrationFormComponent', () => {
-  let component: RegistrationFormComponent;
-  let fixture: ComponentFixture<RegistrationFormComponent>;
+    let component: RegistrationFormComponent;
+    let fixture: ComponentFixture<RegistrationFormComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [RegistrationFormComponent]
-    })
-    .compileComponents();
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [RegistrationFormComponent]
+        })
+            .compileComponents();
 
-    fixture = TestBed.createComponent(RegistrationFormComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+        fixture = TestBed.createComponent(RegistrationFormComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });
diff --git a/src/app/registration-form/registration-form.component.ts b/src/app/registration-form/registration-form.component.ts
index f8d6d11..58bf327 100644
--- a/src/app/registration-form/registration-form.component.ts
+++ b/src/app/registration-form/registration-form.component.ts
@@ -1,12 +1,11 @@
 import {Component} from '@angular/core';
-import {PlayerRegistrationData, ServerService} from "@core/server";
-import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatSelectModule} from '@angular/material/select';
+import {MatButtonModule} from '@angular/material/button';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {MatButtonModule} from "@angular/material/button";
-import {NotificationService, NotificationType} from "@core/notification/notification.service";
-import {isEmpty, max} from "rxjs";
+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',
@@ -21,15 +20,15 @@ export class RegistrationFormComponent {
 
     constructor(private serverApi: ServerService, private formBuilder: FormBuilder, private notifications: NotificationService) {
         this.registrationForm = this.formBuilder.group<PlayerRegistrationData>({
-            username: "",
-            password: "",
-        })
+            username: '',
+            password: '',
+        });
         //this.registrationForm.addValidators(isEmpty);
     }
 
     registerPlayer() {
         if (!this.registrationForm.valid) {
-            this.notifications.publish("This form is invalid!", NotificationType.Error);
+            this.notifications.publish('This form is invalid!', NotificationType.Error);
             return;
         }
         this.serverApi
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 6f6fb10..bd2d5c0 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {ServerService} from "@core/server";
 
 @Component({
     selector: 'app-dashboard',
-- 
2.45.3


From a83a0c10cfe94b9b86a8c17a37085b8705d784c8 Mon Sep 17 00:00:00 2001
From: Dorian Nemec <dorian.nemec@octagen.de>
Date: Wed, 12 Feb 2025 12:56:03 +0100
Subject: [PATCH 3/3] TD-29: Player Registration Form implemented

---
 src/app/registration-form/registration-form.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/registration-form/registration-form.component.ts b/src/app/registration-form/registration-form.component.ts
index 58bf327..52dc0b4 100644
--- a/src/app/registration-form/registration-form.component.ts
+++ b/src/app/registration-form/registration-form.component.ts
@@ -23,7 +23,6 @@ export class RegistrationFormComponent {
             username: '',
             password: '',
         });
-        //this.registrationForm.addValidators(isEmpty);
     }
 
     registerPlayer() {
@@ -38,4 +37,6 @@ export class RegistrationFormComponent {
             });
     }
 
+
+
 }
-- 
2.45.3