Merge pull request 'feat(auth): add login and registration modal functionality' (!189) from refactor/dialogs into main
Reviewed-on: #189 Reviewed-by: Jan K9f <jan@kjan.email>
This commit is contained in:
commit
435f0513b5
12 changed files with 217 additions and 63 deletions
|
|
@ -1,7 +1,32 @@
|
|||
<div class="min-h-screen flex flex-col">
|
||||
<main class="flex-grow">
|
||||
<app-navbar></app-navbar>
|
||||
<app-navbar (showLogin)="showLoginForm()" (showRegister)="showRegisterForm()"></app-navbar>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
<app-footer></app-footer>
|
||||
|
||||
Auth Forms Overlay -->
|
||||
@if (showLogin() || showRegister()) {
|
||||
<div
|
||||
class="fixed inset-0 bg-black/50 z-40"
|
||||
(click)="hideAuthForms()"
|
||||
(keydown.enter)="hideAuthForms()"
|
||||
tabindex="0"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
></div>
|
||||
<div class="fixed inset-0 flex items-center justify-center z-50 p-4" role="presentation">
|
||||
<div class="relative" role="dialog" aria-modal="true">
|
||||
@if (showLogin()) {
|
||||
<app-login (switchForm)="showRegisterForm()" (closeDialog)="hideAuthForms()"></app-login>
|
||||
}
|
||||
@if (showRegister()) {
|
||||
<app-register
|
||||
(switchForm)="showLoginForm()"
|
||||
(closeDialog)="hideAuthForms()"
|
||||
></app-register>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -1,5 +1,26 @@
|
|||
<div class="min-h-screen bg-deep-blue flex items-center justify-center">
|
||||
<div class="modal-card max-w-md w-full">
|
||||
<div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
|
||||
<button
|
||||
(click)="closeDialog.emit()"
|
||||
class="absolute top-4 right-4 text-text-secondary hover:text-white transition-colors"
|
||||
aria-label="Dialog schließen"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<h2 class="modal-heading text-center">Anmelden</h2>
|
||||
|
||||
@if (errorMessage()) {
|
||||
|
|
@ -65,12 +86,12 @@
|
|||
<div class="mt-6 text-center">
|
||||
<p class="text-sm text-text-secondary">
|
||||
Noch kein Konto?
|
||||
<a
|
||||
routerLink="/register"
|
||||
<button
|
||||
(click)="switchToRegister()"
|
||||
class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
|
||||
>
|
||||
Registrieren
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<void>();
|
||||
@Output() closeDialog = new EventEmitter<void>();
|
||||
|
||||
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) => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,26 @@
|
|||
<div class="min-h-screen bg-deep-blue flex items-center justify-center">
|
||||
<div class="modal-card max-w-md w-full">
|
||||
<div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
|
||||
<button
|
||||
(click)="closeDialog.emit()"
|
||||
class="absolute top-4 right-4 text-text-secondary hover:text-white transition-colors"
|
||||
aria-label="Dialog schließen"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<h2 class="modal-heading text-center">Konto erstellen</h2>
|
||||
|
||||
@if (errorMessage()) {
|
||||
|
|
@ -107,12 +128,12 @@
|
|||
<div class="mt-6 text-center">
|
||||
<p class="text-sm text-text-secondary">
|
||||
Bereits ein Konto?
|
||||
<a
|
||||
routerLink="/login"
|
||||
<button
|
||||
(click)="switchToLogin()"
|
||||
class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
|
||||
>
|
||||
Anmelden
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<string>('');
|
||||
isLoading = signal<boolean>(false);
|
||||
fieldErrors = signal<Record<string, string>>({});
|
||||
@Output() switchForm = new EventEmitter<void>();
|
||||
@Output() closeDialog = new EventEmitter<void>();
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,10 @@
|
|||
<h1 class="text-3xl font-bold text-white mb-6">Spielautomaten</h1>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<!-- Slot Machine Display -->
|
||||
<div class="lg:col-span-3 space-y-6 flex flex-col">
|
||||
<div class="card">
|
||||
<!-- Slot Machine Top -->
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<!-- Wrapper for title and win amount -->
|
||||
<div class="flex items-baseline space-x-2">
|
||||
<h2 class="text-xl font-bold text-white">Slot Machine</h2>
|
||||
<span
|
||||
|
|
@ -20,7 +17,6 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Status Badge -->
|
||||
<div
|
||||
[ngClass]="{
|
||||
'bg-emerald': slotResult().status === 'win',
|
||||
|
|
@ -42,7 +38,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slot Display -->
|
||||
<div class="p-6">
|
||||
<div class="bg-deep-blue-light rounded-lg p-4 shadow-inner mb-6">
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
|
|
@ -60,9 +55,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game Result (This section was removed as it's now at the top) -->
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 items-center justify-center">
|
||||
<div class="flex items-center bg-deep-blue-light rounded-lg p-2 flex-1">
|
||||
<label for="betAmount" class="text-text-secondary mr-3">Einsatz:</label>
|
||||
|
|
@ -98,7 +90,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game Info Panel -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="card p-4">
|
||||
<h3 class="section-heading text-xl mb-4">Spiel Informationen</h3>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="min-h-screen bg-deep-blue text-text-primary">
|
||||
<div class="min-h-screen bg-deep-blue text-text-primary relative">
|
||||
<div class="container mx-auto px-4 py-8 sm:py-12">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-12 sm:mb-16">
|
||||
|
|
@ -17,18 +17,18 @@
|
|||
Spiele
|
||||
</a>
|
||||
} @else {
|
||||
<a
|
||||
routerLink="/register"
|
||||
<button
|
||||
(click)="showRegisterForm()"
|
||||
class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg"
|
||||
>
|
||||
Konto erstellen
|
||||
</a>
|
||||
<a
|
||||
routerLink="/login"
|
||||
</button>
|
||||
<button
|
||||
(click)="showLoginForm()"
|
||||
class="w-full sm:w-auto bg-slate-700 text-white hover:bg-slate-600 px-6 sm:px-8 py-3 shadow-lg rounded"
|
||||
>
|
||||
Anmelden
|
||||
</a>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
|
|
@ -136,8 +136,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"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
|
|
@ -181,4 +181,28 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (showLogin() || showRegister()) {
|
||||
<div
|
||||
class="fixed inset-0 bg-black/50 z-40"
|
||||
(click)="hideAuthForms()"
|
||||
(keydown.enter)="hideAuthForms()"
|
||||
tabindex="0"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
></div>
|
||||
<div class="fixed inset-0 flex items-center justify-center z-50 p-4" role="presentation">
|
||||
<div class="relative" role="dialog" aria-modal="true">
|
||||
@if (showLogin()) {
|
||||
<app-login (switchForm)="showRegisterForm()" (closeDialog)="hideAuthForms()"></app-login>
|
||||
}
|
||||
@if (showRegister()) {
|
||||
<app-register
|
||||
(switchForm)="showLoginForm()"
|
||||
(closeDialog)="hideAuthForms()"
|
||||
></app-register>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,21 @@
|
|||
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 +23,35 @@ export class LandingComponent implements OnInit, OnDestroy {
|
|||
currentSlide = 0;
|
||||
private autoplayInterval: ReturnType<typeof setInterval> | 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() {
|
||||
|
|
|
|||
|
|
@ -12,12 +12,13 @@
|
|||
|
||||
<div class="hidden md:flex items-center space-x-4">
|
||||
@if (!isLoggedIn()) {
|
||||
<a routerLink="/login" class="button-primary px-4 py-1.5">Anmelden</a>
|
||||
<a
|
||||
routerLink="/register"
|
||||
<button (click)="showLogin.emit()" class="button-primary px-4 py-1.5">Anmelden</button>
|
||||
<button
|
||||
(click)="showRegister.emit()"
|
||||
class="bg-emerald-700 text-white hover:bg-emerald-600 px-4 py-1.5 rounded"
|
||||
>Registrieren</a
|
||||
>
|
||||
Registrieren
|
||||
</button>
|
||||
}
|
||||
@if (isLoggedIn()) {
|
||||
<div
|
||||
|
|
@ -71,14 +72,18 @@
|
|||
<a routerLink="/games" class="nav-mobile-link">Spiele</a>
|
||||
<div class="pt-2 space-y-2">
|
||||
@if (!isLoggedIn()) {
|
||||
<a routerLink="/login" class="button-primary w-full py-1.5 block text-center"
|
||||
>Anmelden</a
|
||||
<button
|
||||
(click)="showLogin.emit()"
|
||||
class="button-primary w-full py-1.5 block text-center"
|
||||
>
|
||||
<a
|
||||
routerLink="/register"
|
||||
Anmelden
|
||||
</button>
|
||||
<button
|
||||
(click)="showRegister.emit()"
|
||||
class="bg-emerald-700 text-white hover:bg-emerald-600 w-full py-1.5 rounded block text-center"
|
||||
>Registrieren</a
|
||||
>
|
||||
Registrieren
|
||||
</button>
|
||||
}
|
||||
@if (isLoggedIn()) {
|
||||
<button (click)="logout()" class="button-primary w-full py-1.5">Abmelden</button>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
EventEmitter,
|
||||
inject,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
|
@ -26,6 +28,9 @@ export class NavbarComponent implements OnInit, OnDestroy {
|
|||
private authSubscription!: Subscription;
|
||||
public balance = signal(0);
|
||||
|
||||
@Output() showLogin = new EventEmitter<void>();
|
||||
@Output() showRegister = new EventEmitter<void>();
|
||||
|
||||
ngOnInit() {
|
||||
this.authSubscription = this.authService.userSubject.subscribe({
|
||||
next: (user) => {
|
||||
|
|
|
|||
Reference in a new issue