feat: implement authentication with JWT and user management

frontend/src/app/feature/auth/login/login.component.ts

@@ -0,0 +1,113 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { LoginRequest } from '../../../model/auth/LoginRequest';
+import { AuthService } from '../../../service/auth.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  template: `
+    <div class="min-h-screen bg-gray-900 flex items-center justify-center">
+      <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-lg p-8">
+        <h2 class="text-2xl font-bold text-white mb-6 text-center">Login to Casino</h2>
+
+        <div *ngIf="errorMessage" class="bg-red-600 text-white p-4 rounded mb-4">
+          {{ errorMessage }}
+        </div>
+
+        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-6">
+          <div>
+            <label for="usernameOrEmail" class="block text-sm font-medium text-gray-300">Username or Email</label>
+            <input
+              id="usernameOrEmail"
+              type="text"
+              formControlName="usernameOrEmail"
+              class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
+              placeholder="Enter your username or email">
+
+            <div *ngIf="form['usernameOrEmail'].touched && form['usernameOrEmail'].errors" class="text-red-500 mt-1 text-sm">
+              <span *ngIf="form['usernameOrEmail'].errors?.['required']">Username or email is required</span>
+            </div>
+          </div>
+
+          <div>
+            <label for="password" class="block text-sm font-medium text-gray-300">Password</label>
+            <input
+              id="password"
+              type="password"
+              formControlName="password"
+              class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
+              placeholder="Enter your password">
+
+            <div *ngIf="form['password'].touched && form['password'].errors" class="text-red-500 mt-1 text-sm">
+              <span *ngIf="form['password'].errors?.['required']">Password is required</span>
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              [disabled]="loginForm.invalid || isLoading"
+              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+              {{ isLoading ? 'Logging in...' : 'Login' }}
+            </button>
+          </div>
+        </form>
+
+        <div class="mt-6 text-center">
+          <p class="text-sm text-gray-400">
+            Don't have an account?
+            <a routerLink="/register" class="font-medium text-indigo-400 hover:text-indigo-300">Register</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class LoginComponent {
+  loginForm: FormGroup;
+  errorMessage = '';
+  isLoading = false;
+
+  constructor(
+    private fb: FormBuilder,
+    private authService: AuthService,
+    private router: Router
+  ) {
+    this.loginForm = this.fb.group({
+      usernameOrEmail: ['', [Validators.required]],
+      password: ['', [Validators.required]]
+    });
+  }
+
+  get form() {
+    return this.loginForm.controls;
+  }
+
+  onSubmit(): void {
+    if (this.loginForm.invalid) {
+      return;
+    }
+
+    this.isLoading = true;
+    this.errorMessage = '';
+
+    const loginRequest: LoginRequest = {
+      usernameOrEmail: this.form['usernameOrEmail'].value,
+      password: this.form['password'].value
+    };
+
+    this.authService.login(loginRequest).subscribe({
+      next: () => {
+        this.router.navigate(['/home']);
+      },
+      error: err => {
+        this.isLoading = false;
+        this.errorMessage = err.error?.message || 'Failed to login. Please check your credentials.';
+      }
+    });
+  }
+}

frontend/src/app/feature/auth/register/register.component.ts

@@ -0,0 +1,144 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router, RouterLink } from '@angular/router';
+import { RegisterRequest } from '../../../model/auth/RegisterRequest';
+import { AuthService } from '../../../service/auth.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-register',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  template: `
+    <div class="min-h-screen bg-gray-900 flex items-center justify-center">
+      <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-lg p-8">
+        <h2 class="text-2xl font-bold text-white mb-6 text-center">Create Account</h2>
+
+        <div *ngIf="errorMessage" class="bg-red-600 text-white p-4 rounded mb-4">
+          {{ errorMessage }}
+        </div>
+
+        <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-6">
+          <div>
+            <label for="email" class="block text-sm font-medium text-gray-300">Email</label>
+            <input
+              id="email"
+              type="email"
+              formControlName="email"
+              class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
+              placeholder="Enter your email">
+
+            <div *ngIf="form['email'].touched && form['email'].errors" class="text-red-500 mt-1 text-sm">
+              <span *ngIf="form['email'].errors?.['required']">Email is required</span>
+              <span *ngIf="form['email'].errors?.['email']">Please enter a valid email address</span>
+            </div>
+          </div>
+
+          <div>
+            <label for="username" class="block text-sm font-medium text-gray-300">Username</label>
+            <input
+              id="username"
+              type="text"
+              formControlName="username"
+              class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
+              placeholder="Choose a username">
+
+            <div *ngIf="form['username'].touched && form['username'].errors" class="text-red-500 mt-1 text-sm">
+              <span *ngIf="form['username'].errors?.['required']">Username is required</span>
+              <span *ngIf="form['username'].errors?.['minlength']">Username must be at least 3 characters</span>
+            </div>
+          </div>
+
+          <div>
+            <label for="password" class="block text-sm font-medium text-gray-300">Password</label>
+            <input
+              id="password"
+              type="password"
+              formControlName="password"
+              class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
+              placeholder="Create a password">
+
+            <div *ngIf="form['password'].touched && form['password'].errors" class="text-red-500 mt-1 text-sm">
+              <span *ngIf="form['password'].errors?.['required']">Password is required</span>
+              <span *ngIf="form['password'].errors?.['minlength']">Password must be at least 6 characters</span>
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              [disabled]="registerForm.invalid || isLoading"
+              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+              {{ isLoading ? 'Creating account...' : 'Register' }}
+            </button>
+          </div>
+        </form>
+
+        <div class="mt-6 text-center">
+          <p class="text-sm text-gray-400">
+            Already have an account?
+            <a routerLink="/login" class="font-medium text-indigo-400 hover:text-indigo-300">Login</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class RegisterComponent {
+  registerForm: FormGroup;
+  errorMessage = '';
+  isLoading = false;
+
+  constructor(
+    private fb: FormBuilder,
+    private authService: AuthService,
+    private router: Router
+  ) {
+    this.registerForm = this.fb.group({
+      email: ['', [Validators.required, Validators.email]],
+      username: ['', [Validators.required, Validators.minLength(3)]],
+      password: ['', [Validators.required, Validators.minLength(6)]]
+    });
+  }
+
+  get form() {
+    return this.registerForm.controls;
+  }
+
+  onSubmit(): void {
+    if (this.registerForm.invalid) {
+      return;
+    }
+
+    this.isLoading = true;
+    this.errorMessage = '';
+
+    const registerRequest: RegisterRequest = {
+      email: this.form['email'].value,
+      username: this.form['username'].value,
+      password: this.form['password'].value
+    };
+
+    this.authService.register(registerRequest).subscribe({
+      next: () => {
+        // After registration, log in the user
+        this.authService.login({
+          usernameOrEmail: registerRequest.email,
+          password: registerRequest.password
+        }).subscribe({
+          next: () => {
+            this.router.navigate(['/home']);
+          },
+          error: err => {
+            this.isLoading = false;
+            this.errorMessage = 'Registration successful but failed to login automatically. Please log in manually.';
+          }
+        });
+      },
+      error: err => {
+        this.isLoading = false;
+        this.errorMessage = err.error?.message || 'Failed to register. Please try again.';
+      }
+    });
+  }
+}

frontend/src/app/feature/game/blackjack/blackjack.component.ts

@@ -51,7 +51,7 @@ export default class BlackjackComponent implements OnInit {
   debtAmount = signal(0);
 
   ngOnInit(): void {
-    this.userService.currentUser$.subscribe((user) => {
+    this.userService.getCurrentUser().subscribe((user) => {
       if (user) {
         this.balance.set(user.balance);
       }
@@ -83,7 +83,7 @@ export default class BlackjackComponent implements OnInit {
 
     if (isGameOver) {
       console.log('Game is over, state:', game.state);
-      this.userService.refreshCurrentUser();
+      // this.userService.refreshCurrentUser();
       timer(1500).subscribe(() => {
         this.showGameResult.set(true);
         console.log('Game result dialog shown after delay');
@@ -97,7 +97,7 @@ export default class BlackjackComponent implements OnInit {
     this.blackjackService.startGame(bet).subscribe({
       next: (game) => {
         this.updateGameState(game);
-        this.userService.refreshCurrentUser();
+        // this.userService.refreshCurrentUser();
         this.isActionInProgress.set(false);
       },
       error: (error) => {
@@ -116,7 +116,7 @@ export default class BlackjackComponent implements OnInit {
       next: (game) => {
         this.updateGameState(game);
         if (game.state !== 'IN_PROGRESS') {
-          this.userService.refreshCurrentUser();
+          // this.userService.refreshCurrentUser();
         }
         this.isActionInProgress.set(false);
       },
@@ -141,7 +141,7 @@ export default class BlackjackComponent implements OnInit {
     this.blackjackService.stand(this.currentGameId()!).subscribe({
       next: (game) => {
         this.updateGameState(game);
-        this.userService.refreshCurrentUser();
+        // this.userService.refreshCurrentUser();
         this.isActionInProgress.set(false);
       },
       error: (error) => {
@@ -184,7 +184,7 @@ export default class BlackjackComponent implements OnInit {
   onCloseGameResult(): void {
     console.log('Closing game result dialog');
     this.showGameResult.set(false);
-    this.userService.refreshCurrentUser();
+    // this.userService.refreshCurrentUser();
   }
 
   onCloseDebtDialog(): void {
@@ -195,11 +195,11 @@ export default class BlackjackComponent implements OnInit {
     if (error instanceof HttpErrorResponse) {
       if (error.status === 400 && error.error?.error === 'Invalid state') {
         this.gameInProgress.set(false);
-        this.userService.refreshCurrentUser();
+        // this.userService.refreshCurrentUser();
       } else if (error.status === 500) {
         console.log('Server error occurred. The game may have been updated in another session.');
         this.gameInProgress.set(false);
-        this.userService.refreshCurrentUser();
+        // this.userService.refreshCurrentUser();
         if (this.currentGameId()) {
           this.refreshGameState(this.currentGameId()!);
         }

frontend/src/app/feature/landing/landing.component.html

@@ -10,9 +10,14 @@
         <div class="welcome-bonus">200% bis zu 500€</div>
         <p class="bonus-description">+ 200 Freispiele</p>
 
-        <button class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg">
-          Bonus Sichern
-        </button>
+        <div class="flex justify-center space-x-4 mt-6">
+          <a routerLink="/register" class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg">
+            Konto erstellen
+          </a>
+          <a routerLink="/login" 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>
+        </div>
       </div>
 
       <div class="relative mb-16">

frontend/src/app/feature/landing/landing.component.ts

@@ -1,11 +1,12 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-landing-page',
   standalone: true,
-  imports: [NavbarComponent, NgFor],
+  imports: [NavbarComponent, NgFor, RouterLink],
   templateUrl: './landing.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })