diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts index 7a45859..0cecdac 100644 --- a/frontend/src/app/feature/deposit/deposit.component.ts +++ b/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() { diff --git a/frontend/src/app/feature/home/home.component.html b/frontend/src/app/feature/home/home.component.html index cc1ed16..3b3232d 100644 --- a/frontend/src/app/feature/home/home.component.html +++ b/frontend/src/app/feature/home/home.component.html @@ -59,6 +59,12 @@

Konto

+
+
+ Kontostand + {{ user.balance | currency: 'EUR' }} +
+
diff --git a/frontend/src/app/feature/home/home.component.ts b/frontend/src/app/feature/home/home.component.ts index 6400d5a..6fcae2f 100644 --- a/frontend/src/app/feature/home/home.component.ts +++ b/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[] = [ { diff --git a/frontend/src/app/feature/login-success/login-success.component.ts b/frontend/src/app/feature/login-success/login-success.component.ts index 067afe6..a637258 100644 --- a/frontend/src/app/feature/login-success/login-success.component.ts +++ b/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']); + }); } } diff --git a/frontend/src/app/service/user.service.ts b/frontend/src/app/service/user.service.ts index ba6bead..500b784 100644 --- a/frontend/src/app/service/user.service.ts +++ b/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 { 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 ?? ''); + }) + ); } }