TD-29: Registration Form Created

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.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],

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'}
     ]
 };

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>

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

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

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

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>

src/app/views/dashboard/dashboard.component.ts

@@ -1,8 +1,9 @@
-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'
 })