refactor(auth): replace UserService with AuthService usage

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

@@ -14,6 +14,7 @@ import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { UserService } from '@service/user.service';
 import { timer } from 'rxjs';
 import { DebtDialogComponent } from '@shared/components/debt-dialog/debt-dialog.component';
+import { AuthService } from '@service/auth.service';
 
 @Component({
   selector: 'app-blackjack',
@@ -34,6 +35,7 @@ import { DebtDialogComponent } from '@shared/components/debt-dialog/debt-dialog.
 export default class BlackjackComponent implements OnInit {
   private router = inject(Router);
   private userService = inject(UserService);
+  private authService = inject(AuthService);
   private blackjackService = inject(BlackjackService);
 
   dealerCards = signal<Card[]>([]);
@@ -51,15 +53,8 @@ export default class BlackjackComponent implements OnInit {
   debtAmount = signal(0);
 
   ngOnInit(): void {
-    // Initial user load from server
-    this.userService.getCurrentUser().subscribe((user) => {
-      if (user) {
-        this.balance.set(user.balance);
-      }
-    });
-
     // Subscribe to user updates for real-time balance changes
-    this.userService.currentUser$.subscribe((user) => {
+    this.authService.userSubject.subscribe((user) => {
       if (user) {
         this.balance.set(user.balance);
       }
@@ -95,15 +90,10 @@ export default class BlackjackComponent implements OnInit {
 
       // Get the latest balance before showing the result dialog
       timer(1000).subscribe(() => {
-        this.userService.getCurrentUser().subscribe((user) => {
-          if (user) {
-            this.balance.set(user.balance);
-            // Show the result dialog after updating the balance
-            timer(500).subscribe(() => {
-              this.showGameResult.set(true);
-              console.log('Game result dialog shown after delay');
-            });
-          }
+        // Show the result dialog after refreshing user data
+        timer(500).subscribe(() => {
+          this.showGameResult.set(true);
+          console.log('Game result dialog shown after delay');
         });
       });
     }
@@ -186,15 +176,11 @@ export default class BlackjackComponent implements OnInit {
 
         // Wait a bit to ensure the backend has finished processing
         timer(1000).subscribe(() => {
-          this.userService.getCurrentUser().subscribe((user) => {
-            if (user) {
-              this.balance.set(user.balance);
-              if (user.balance < 0) {
-                this.debtAmount.set(Math.abs(user.balance));
-                this.showDebtDialog.set(true);
-              }
-            }
-          });
+          const user = this.authService.currentUserValue;
+          if (user && user.balance < 0) {
+            this.debtAmount.set(Math.abs(user.balance));
+            this.showDebtDialog.set(true);
+          }
         });
 
         this.isActionInProgress.set(false);
@@ -210,13 +196,6 @@ export default class BlackjackComponent implements OnInit {
   onCloseGameResult(): void {
     console.log('Closing game result dialog');
     this.showGameResult.set(false);
-
-    // Refresh the balance when dialog is closed and update local state
-    this.userService.getCurrentUser().subscribe((user) => {
-      if (user) {
-        this.balance.set(user.balance);
-      }
-    });
   }
 
   onCloseDebtDialog(): void {

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

@@ -13,6 +13,7 @@ import { FormsModule } from '@angular/forms';
 import { UserService } from '@service/user.service';
 import { Subscription } from 'rxjs';
 import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
+import { AuthService } from '@service/auth.service';
 
 interface SlotResult {
   status: 'win' | 'lose' | 'blank' | 'start';
@@ -39,6 +40,7 @@ interface SlotResult {
 export default class SlotsComponent implements OnInit, OnDestroy {
   private httpClient: HttpClient = inject(HttpClient);
   private userService = inject(UserService);
+  private authService = inject(AuthService);
   private userSubscription: Subscription | undefined;
 
   slotInfo = signal<Record<string, number> | null>(null);
@@ -61,7 +63,7 @@ export default class SlotsComponent implements OnInit, OnDestroy {
       this.slotInfo.set(data);
     });
 
-    this.userSubscription = this.userService.getCurrentUser().subscribe((user) => {
+    this.userSubscription = this.authService.userSubject.subscribe((user) => {
       this.balance.set(user?.balance ?? 0);
     });
 

frontend/src/app/feature/lootboxes/lootbox-opening/lootbox-opening.component.ts

@@ -6,6 +6,7 @@ import { LootBox, Reward } from 'app/model/LootBox';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { UserService } from '@service/user.service';
 import { User } from 'app/model/User';
+import { AuthService } from '@service/auth.service';
 
 @Component({
   selector: 'app-lootbox-opening',
@@ -30,10 +31,11 @@ export default class LootboxOpeningComponent {
     private router: Router,
     private lootboxService: LootboxService,
     private userService: UserService,
+    private authService: AuthService,
     private cdr: ChangeDetectorRef
   ) {
     this.loadLootbox();
-    this.userService.currentUser$.subscribe((user) => {
+    this.authService.userSubject.subscribe((user) => {
       this.currentUser = user;
       this.cdr.detectChanges();
     });

frontend/src/app/feature/lootboxes/lootbox-selection/lootbox-selection.component.ts

@@ -5,8 +5,9 @@ import { LootboxService } from '../services/lootbox.service';
 import { LootBox } from 'app/model/LootBox';
 import { Router } from '@angular/router';
 import { timeout } from 'rxjs';
-import { UserService } from '@service/user.service';
 import { User } from 'app/model/User';
+import { AuthService } from '@service/auth.service';
+import { UserService } from '@service/user.service';
 
 @Component({
   selector: 'app-lootbox-selection',
@@ -90,12 +91,13 @@ export default class LootboxSelectionComponent implements OnInit {
     private lootboxService: LootboxService,
     private router: Router,
     private cdr: ChangeDetectorRef,
+    private authService: AuthService,
     private userService: UserService
   ) {}
 
   ngOnInit(): void {
     this.loadLootboxes();
-    this.userService.currentUser$.subscribe((user) => {
+    this.authService.userSubject.subscribe((user) => {
       this.currentUser = user;
       this.cdr.detectChanges();
     });

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

@@ -1,51 +1,33 @@
 import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, catchError, EMPTY, Observable, tap } from 'rxjs';
-import { User } from '../model/User';
 import { AuthService } from '@service/auth.service';
+import { User } from '../model/User';
 
 @Injectable({
   providedIn: 'root',
 })
 export class UserService {
-  public currentUserSubject = new BehaviorSubject<User | null>(null);
-  public currentUser$ = this.currentUserSubject.asObservable();
-  private http: HttpClient = inject(HttpClient);
   private authService = inject(AuthService);
 
-  constructor() {
-    // Initialize with the current user from AuthService if available
-    const currentUser = this.authService.getUser();
-    if (currentUser) {
-      this.currentUserSubject.next(currentUser);
-    }
-
-    // Subscribe to auth service user updates
-    this.authService.userSubject.subscribe((user) => {
-      this.currentUserSubject.next(user);
-    });
-  }
-
-  public getCurrentUser(): Observable<User | null> {
-    return this.http.get<User | null>('/backend/users/me').pipe(
-      catchError(() => EMPTY),
-      tap((user) => this.currentUserSubject.next(user))
-    );
-  }
-
-  public refreshCurrentUser(): void {
-    this.getCurrentUser().subscribe();
-    this.authService.loadCurrentUser();
-  }
-
+  /**
+   * Updates the user's balance locally for immediate UI feedback
+   * This should be called before a server-side balance change is made
+   * The server update will be reflected when AuthService.loadCurrentUser() is called
+   */
   public updateLocalBalance(amount: number): void {
-    const currentUser = this.currentUserSubject.getValue();
+    const currentUser = this.authService.currentUserValue;
     if (currentUser) {
-      const updatedUser = {
+      const updatedUser: User = {
         ...currentUser,
         balance: currentUser.balance + amount,
       };
-      this.currentUserSubject.next(updatedUser);
+      this.authService.userSubject.next(updatedUser);
     }
   }
+  
+  /**
+   * Refreshes the current user's data from the server
+   */
+  public refreshCurrentUser(): void {
+    this.authService.loadCurrentUser();
+  }
 }

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -10,7 +10,6 @@ import { RouterModule } from '@angular/router';
 import { AuthService } from '@service/auth.service';
 import { Subscription } from 'rxjs';
 import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
-import { UserService } from '@service/user.service';
 
 @Component({
   selector: 'app-navbar',
@@ -22,11 +21,9 @@ import { UserService } from '@service/user.service';
 export class NavbarComponent implements OnInit, OnDestroy {
   isMenuOpen = false;
   private authService: AuthService = inject(AuthService);
-  private userService: UserService = inject(UserService);
   isLoggedIn = this.authService.isLoggedIn();
 
   private authSubscription!: Subscription;
-  private userSubscription!: Subscription;
   public balance = signal(0);
 
   ngOnInit() {
@@ -35,22 +32,10 @@ export class NavbarComponent implements OnInit, OnDestroy {
         this.balance.set(user?.balance ?? 0);
       },
     });
-
-    // Also subscribe to UserService for real-time balance updates
-    this.userSubscription = this.userService.currentUser$.subscribe({
-      next: (user) => {
-        if (user) {
-          this.balance.set(user.balance);
-        }
-      },
-    });
   }
 
   ngOnDestroy() {
     this.authSubscription.unsubscribe();
-    if (this.userSubscription) {
-      this.userSubscription.unsubscribe();
-    }
   }
 
   logout() {