feat(home): display user balance on home page

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

@@ -10,7 +10,7 @@ import {
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { loadStripe, Stripe } from '@stripe/stripe-js';
 import { DepositService } from '../../service/deposit.service';
-import { debounceTime } from 'rxjs';
+import { debounceTime, from } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { NgIf } from '@angular/common';
 
@@ -29,7 +29,7 @@ export class DepositComponent implements OnInit {
   private stripe: Stripe | null = null;
   private service: DepositService = inject(DepositService);
 
-  async ngOnInit() {
+  ngOnInit() {
     this.form = new FormGroup({
       amount: new FormControl(50, [Validators.min(50)]),
     });
@@ -40,7 +40,9 @@ export class DepositComponent implements OnInit {
       }
     });
 
-    this.stripe = await loadStripe(environment.STRIPE_KEY);
+    from(loadStripe(environment.STRIPE_KEY)).subscribe(stripe => {
+      this.stripe = stripe;
+    });
   }
 
   submit() {

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

@@ -59,6 +59,12 @@
     <div class="lg:col-span-1 space-y-6">
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Konto</h3>
+        <div *ngIf="user" class="mb-4 p-3 bg-deep-blue-light rounded">
+          <div class="flex justify-between items-center">
+            <span class="text-sm text-text-secondary">Kontostand</span>
+            <span class="text-xl font-bold text-emerald">{{ user.balance | currency: 'EUR' }}</span>
+          </div>
+        </div>
         <div class="space-y-4">
           <button class="button-base w-full py-2" (click)="openDepositModal()">Einzahlen</button>
           <app-deposit [isOpen]="isDepositModalOpen" (close)="closeDepositModal()"></app-deposit>

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

@@ -1,19 +1,28 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
-import { CurrencyPipe, NgFor } from '@angular/common';
+import { CurrencyPipe, NgFor, NgIf } from '@angular/common';
 import { Game } from '../../model/Game';
 import { Transaction } from '../../model/Transaction';
 import { DepositComponent } from '../deposit/deposit.component';
+import { User } from '../../model/User';
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent],
+  imports: [NavbarComponent, CurrencyPipe, NgFor, NgIf, DepositComponent],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export default class HomeComponent {
+export default class HomeComponent implements OnInit {
   isDepositModalOpen = false;
+  user: User | null = null;
+  
+  ngOnInit(): void {
+    const userJson = sessionStorage.getItem('user');
+    if (userJson) {
+      this.user = JSON.parse(userJson);
+    }
+  }
 
   featuredGames: Game[] = [
     {

frontend/src/app/feature/login-success/login-success.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/cor
 import { UserService } from '../../service/user.service';
 import { KeycloakService } from 'keycloak-angular';
 import { Router } from '@angular/router';
+import { from, switchMap } from 'rxjs';
 
 @Component({
   selector: 'app-login-success',
@@ -16,11 +17,14 @@ export default class LoginSuccessComponent implements OnInit {
   private keycloakService: KeycloakService = inject(KeycloakService);
   private router: Router = inject(Router);
 
-  async ngOnInit() {
-    const userProfile = await this.keycloakService.loadUserProfile();
-    const user = await this.userService.getOrCreateUser(userProfile);
-    sessionStorage.setItem('user', JSON.stringify(user));
-
-    this.router.navigate(['home']);
+  ngOnInit() {
+    from(this.keycloakService.loadUserProfile()).pipe(
+      switchMap(userProfile => this.userService.getOrCreateUser(userProfile))
+    ).subscribe(user => {
+      if (user) {
+        sessionStorage.setItem('user', JSON.stringify(user));
+      }
+      this.router.navigate(['home']);
+    });
   }
 }

frontend/src/app/service/user.service.ts

@@ -1,7 +1,7 @@
 import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { KeycloakProfile } from 'keycloak-js';
-import { catchError, EMPTY, Observable } from 'rxjs';
+import { catchError, EMPTY, Observable, of, switchMap } from 'rxjs';
 import { User } from '../model/User';
 
 @Injectable({
@@ -21,18 +21,19 @@ export class UserService {
     });
   }
 
-  public async getOrCreateUser(userProfile: KeycloakProfile) {
+  public getOrCreateUser(userProfile: KeycloakProfile): Observable<User | undefined> {
     if (userProfile.id == null) {
-      return;
+      return of(undefined);
     }
-    return await this.getUser(userProfile.id)
-      .toPromise()
-      .then(async (user) => {
+    
+    return this.getUser(userProfile.id).pipe(
+      switchMap(user => {
         if (user) {
-          return user;
+          return of(user);
         }
-
-        return await this.createUser(userProfile.id ?? '', userProfile.username ?? '').toPromise();
-      });
+        
+        return this.createUser(userProfile.id ?? '', userProfile.username ?? '');
+      })
+    );
   }
 }