TD-29: Player Registration Form implemented WIP: Empty spaces as login data

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"
     }

src/app/app.component.html

@@ -3,4 +3,5 @@
 <main>
     <h1>{{title.getTitle()}}</h1>
     <router-outlet />
+    <app-registration-form></app-registration-form>
 </main>

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'
 })

src/app/app.config.ts

@@ -1,15 +1,18 @@
-import { provideHttpClient } from '@angular/common/http';
+import {provideHttpClient} from '@angular/common/http';
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
-import { provideRouter } from '@angular/router';
+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'}
     ]
 };

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>

src/app/registration-form/registration-form.component.scss

@@ -0,0 +1,5 @@
+.registration-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

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();
+  });
+});

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);
+            });
+    }
+
+}

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 {
-   
+
 }