From b5a5026a14d41a3f6155726a4685688c58859a4b Mon Sep 17 00:00:00 2001 From: Dorian Nemec Date: Wed, 12 Feb 2025 12:49:36 +0100 Subject: [PATCH] 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 @@

{{title.getTitle()}}

+
\ 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 @@ +
+
+

Player Registration

+ + + Username + + Username is required! + + + + Password + + Password is required! + + + +
+
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; + + 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({ + 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 { - + }