diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 2e3cd9a..2b9d140 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,7 +1,45 @@
- +
+ + + @if (showLogin() || showRegister()) { + + + }
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 3e25d5b..52c1fc3 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,16 +1,44 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { Component, HostListener, signal } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import { FooterComponent } from '@shared/components/footer/footer.component'; -import { NavbarComponent } from '@shared/components/navbar/navbar.component'; +import { NavbarComponent } from './shared/components/navbar/navbar.component'; +import { FooterComponent } from './shared/components/footer/footer.component'; +import { LoginComponent } from './feature/auth/login/login.component'; +import { RegisterComponent } from './feature/auth/register/register.component'; @Component({ selector: 'app-root', standalone: true, - imports: [CommonModule, RouterOutlet, FooterComponent, NavbarComponent], - providers: [], + imports: [RouterOutlet, NavbarComponent, FooterComponent, LoginComponent, RegisterComponent], templateUrl: './app.component.html', - styleUrl: './app.component.css', - changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AppComponent {} +export class AppComponent { + showLogin = signal(false); + showRegister = signal(false); + + @HostListener('document:keydown.escape') + handleEscapeKey() { + this.hideAuthForms(); + } + + showLoginForm() { + this.showLogin.set(true); + this.showRegister.set(false); + document.body.style.overflow = 'hidden'; + } + + showRegisterForm() { + this.showRegister.set(true); + this.showLogin.set(false); + document.body.style.overflow = 'hidden'; + } + + hideAuthForms() { + this.showLogin.set(false); + this.showRegister.set(false); + document.body.style.overflow = 'auto'; + } + + stopPropagation(event: MouseEvent) { + event.stopPropagation(); + } +} diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 86ce3d4..3792038 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -7,16 +7,6 @@ export const routes: Routes = [ path: '', component: LandingComponent, }, - { - path: 'login', - loadComponent: () => - import('./feature/auth/login/login.component').then((m) => m.LoginComponent), - }, - { - path: 'register', - loadComponent: () => - import('./feature/auth/register/register.component').then((m) => m.RegisterComponent), - }, { path: 'home', loadComponent: () => import('./feature/home/home.component'), diff --git a/frontend/src/app/feature/auth/login/login.component.html b/frontend/src/app/feature/auth/login/login.component.html index 40fc3e6..9017a95 100644 --- a/frontend/src/app/feature/auth/login/login.component.html +++ b/frontend/src/app/feature/auth/login/login.component.html @@ -1,5 +1,16 @@
-
+
+ + +

Anmelden

@if (errorMessage()) { @@ -65,12 +76,12 @@

Noch kein Konto? - Registrieren - +

diff --git a/frontend/src/app/feature/auth/login/login.component.ts b/frontend/src/app/feature/auth/login/login.component.ts index 8874dbc..b5a67a0 100644 --- a/frontend/src/app/feature/auth/login/login.component.ts +++ b/frontend/src/app/feature/auth/login/login.component.ts @@ -1,6 +1,6 @@ -import { Component, signal } from '@angular/core'; +import { Component, EventEmitter, Output, signal } from '@angular/core'; import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { Router, RouterLink } from '@angular/router'; +import { Router } from '@angular/router'; import { LoginRequest } from '../../../model/auth/LoginRequest'; import { AuthService } from '@service/auth.service'; import { CommonModule } from '@angular/common'; @@ -8,13 +8,15 @@ import { CommonModule } from '@angular/common'; @Component({ selector: 'app-login', standalone: true, - imports: [CommonModule, ReactiveFormsModule, RouterLink], + imports: [CommonModule, ReactiveFormsModule], templateUrl: './login.component.html', }) export class LoginComponent { loginForm: FormGroup; errorMessage = signal(''); isLoading = signal(false); + @Output() switchForm = new EventEmitter(); + @Output() closeDialog = new EventEmitter(); constructor( private fb: FormBuilder, @@ -31,6 +33,10 @@ export class LoginComponent { return this.loginForm.controls; } + switchToRegister(): void { + this.switchForm.emit(); + } + onSubmit(): void { if (this.loginForm.invalid) { return; @@ -46,6 +52,7 @@ export class LoginComponent { this.authService.login(loginRequest).subscribe({ next: () => { + this.closeDialog.emit(); this.router.navigate(['/home']); }, error: (err) => { diff --git a/frontend/src/app/feature/auth/register/register.component.html b/frontend/src/app/feature/auth/register/register.component.html index 5339e36..d099bf9 100644 --- a/frontend/src/app/feature/auth/register/register.component.html +++ b/frontend/src/app/feature/auth/register/register.component.html @@ -1,5 +1,16 @@
-
+
+ + +

Konto erstellen

@if (errorMessage()) { @@ -107,12 +118,12 @@

Bereits ein Konto? - Anmelden - +

diff --git a/frontend/src/app/feature/auth/register/register.component.ts b/frontend/src/app/feature/auth/register/register.component.ts index 1ccc15c..7a3e381 100644 --- a/frontend/src/app/feature/auth/register/register.component.ts +++ b/frontend/src/app/feature/auth/register/register.component.ts @@ -1,6 +1,6 @@ -import { Component, signal } from '@angular/core'; +import { Component, EventEmitter, Output, signal } from '@angular/core'; import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { Router, RouterLink } from '@angular/router'; +import { Router } from '@angular/router'; import { RegisterRequest } from '../../../model/auth/RegisterRequest'; import { AuthService } from '@service/auth.service'; import { CommonModule } from '@angular/common'; @@ -9,7 +9,7 @@ import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-register', standalone: true, - imports: [CommonModule, ReactiveFormsModule, RouterLink], + imports: [CommonModule, ReactiveFormsModule], templateUrl: './register.component.html', }) export class RegisterComponent { @@ -17,6 +17,8 @@ export class RegisterComponent { errorMessage = signal(''); isLoading = signal(false); fieldErrors = signal>({}); + @Output() switchForm = new EventEmitter(); + @Output() closeDialog = new EventEmitter(); constructor( private fb: FormBuilder, @@ -34,6 +36,10 @@ export class RegisterComponent { return this.registerForm.controls; } + switchToLogin(): void { + this.switchForm.emit(); + } + onSubmit(): void { if (this.registerForm.invalid) { return; diff --git a/frontend/src/app/feature/landing/landing.component.html b/frontend/src/app/feature/landing/landing.component.html index aa411fd..cac12a1 100644 --- a/frontend/src/app/feature/landing/landing.component.html +++ b/frontend/src/app/feature/landing/landing.component.html @@ -1,4 +1,4 @@ -
+
@@ -17,18 +17,18 @@ Spiele } @else { - Konto erstellen - - + }
@@ -120,8 +120,8 @@ xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" - viewBox="0 0 24 24" stroke="currentColor" + viewBox="0 0 24 24" >
+ + + @if (showLogin() || showRegister()) { + + + }
diff --git a/frontend/src/app/feature/landing/landing.component.ts b/frontend/src/app/feature/landing/landing.component.ts index 9e66baf..ee9615a 100644 --- a/frontend/src/app/feature/landing/landing.component.ts +++ b/frontend/src/app/feature/landing/landing.component.ts @@ -1,12 +1,14 @@ -import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit, signal } from '@angular/core'; import { NgFor } from '@angular/common'; import { RouterLink } from '@angular/router'; import { AuthService } from '@service/auth.service'; +import { LoginComponent } from '../auth/login/login.component'; +import { RegisterComponent } from '../auth/register/register.component'; @Component({ selector: 'app-landing-page', standalone: true, - imports: [NgFor, RouterLink], + imports: [NgFor, RouterLink, LoginComponent, RegisterComponent], templateUrl: './landing.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -14,13 +16,35 @@ export class LandingComponent implements OnInit, OnDestroy { currentSlide = 0; private autoplayInterval: ReturnType | undefined; authService: AuthService = inject(AuthService); + showLogin = signal(false); + showRegister = signal(false); ngOnInit() { this.startAutoplay(); + document.body.style.overflow = 'auto'; } ngOnDestroy() { this.stopAutoplay(); + document.body.style.overflow = 'auto'; + } + + showLoginForm() { + this.showLogin.set(true); + this.showRegister.set(false); + document.body.style.overflow = 'hidden'; + } + + showRegisterForm() { + this.showRegister.set(true); + this.showLogin.set(false); + document.body.style.overflow = 'hidden'; + } + + hideAuthForms() { + this.showLogin.set(false); + this.showRegister.set(false); + document.body.style.overflow = 'auto'; } prevSlide() { diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index 749437f..cadb7f6 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -12,12 +12,13 @@