refactor(deposit, login-success, user.service): convert async to observables

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/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);
+  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 await this.getUser(userProfile.id)
-      .toPromise()
-      .then(async (user) => {
-        if (user) {
-          return user;
+      return of(undefined);
     }
     
-        return await this.createUser(userProfile.id ?? '', userProfile.username ?? '').toPromise();
-      });
+    return this.getUser(userProfile.id).pipe(
+      switchMap(user => {
+        if (user) {
+          return of(user);
+        }
+        
+        return this.createUser(userProfile.id ?? '', userProfile.username ?? '');
+      })
+    );
   }
 }