feat: account switcher

client/src/app/screens/screen-profile/screen-profile.html

@@ -4,9 +4,20 @@
     <div class="card-body text-center p-4">
       <div class="avatar avatar-xl mb-3">
         <i class="bi bi-person-circle fs-1 text-primary"></i>
+      <b> {{this.api.loggedInUser.displayName}} </b>
+      </div>
+      <div ngbDropdown class="d-inline-block">
+        <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
+          {{ this.api.currentUser.displayName }}
+			</button>
+			<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+        @for (acc of this.api.ownedAccounts; track $index) {
+				  <button ngbDropdownItem (click)="this.api.currentUser = acc">{{ acc.displayName }}</button>
+        }
+			</div>
+		</div>
+        <h3 class="mb-1"></h3>
       </div>
-      <h3 class="mb-1">{{ this.api.currentUser.displayName }}</h3>
-      <p class="text-muted mb-4">{{ this.api.currentUser.id }}</p>
       <div class="d-flex align-items-center justify-content-center gap-2 mb-1">
         <i class="bi bi-wallet2 fs-4"></i>
         <h3 class="mb-0">{{ this.api.currentUser.balance | currency}}</h3>

client/src/app/screens/screen-profile/screen-profile.ts

@@ -3,10 +3,11 @@ import { Component, inject, OnInit, signal } from '@angular/core';
 import { APIService } from '../../services/api';
 import Transaction from '@model/transaction';
 import { Router } from '@angular/router';
+import { NgbAccordionToggle, NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle } from "@ng-bootstrap/ng-bootstrap";
 
 @Component({
   selector: 'app-screen-profile',
-  imports: [CurrencyPipe, DatePipe, CommonModule],
+  imports: [CurrencyPipe, DatePipe, CommonModule, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbDropdownItem],
   templateUrl: './screen-profile.html',
   styleUrl: './screen-profile.less',
 })

client/src/app/services/api.ts

@@ -3,7 +3,6 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, catchError, map, Observable, of, tap } from 'rxjs';
 import Transaction from '@model/transaction'
 import { SendRequest, SendResponse } from '@message/Send';
-import { TransactionsRequest } from '@message/Transactions';
 import { LoginResponse } from '@message/Login';
 import Account from '@model/user';
 
@@ -15,6 +14,8 @@ export class APIService {
   private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
   isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
   
+  // data holding
+  loggedInUser!: Account;
   currentUser!: Account;
   ownedAccounts!: Account[];
 
@@ -25,8 +26,10 @@ export class APIService {
       tap({
         next: (resp) => {
           this.isAuthenticatedSubject.next(true);
-          this.currentUser = resp.user;
+          this.loggedInUser = resp.user;
+          this.currentUser = this.loggedInUser;
           this.ownedAccounts = resp.ownedAccounts;
+          this.ownedAccounts.push(this.loggedInUser);
         },
         error: () => this.isAuthenticatedSubject.next(false)
       })