feat(client): show real data

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

@@ -5,11 +5,11 @@
       <div class="avatar avatar-xl mb-3">
         <i class="bi bi-person-circle fs-1 text-primary"></i>
       </div>
-      <h3 class="mb-1">{{ username }}</h3>
-      <p class="text-muted mb-4">{{ this.api.currentUser }}</p>
+      <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">{{ balance  | currency}}</h3>
+        <h3 class="mb-0">{{ this.api.currentUser.balance | currency}}</h3>
       </div>
       <button type="button" (click)="logOut()" class="btn btn-outline-secondary">Log out</button>
     </div>
@@ -31,7 +31,7 @@
                 <i class="bi bi-person-fill fs-4 text-secondary"></i>
               </div>
               <div class="text-start">
-              @if (transaction.receiverID == this.api.currentUser) {
+              @if (transaction.receiverID == this.api.currentUser.id) {
                 <h6 class="mb-0">{{ transaction.senderID }}</h6>
               }@else {
                 <h6 class="mb-0">{{ transaction.receiverID }}</h6>
@@ -40,7 +40,7 @@
               </div>
             </div>
             <div class="text-end">
-              @if (transaction.receiverID == this.api.currentUser) {
+              @if (transaction.receiverID == this.api.currentUser.id) {
                 <h6 class="mb-0 text-success">
                   {{ transaction.amount | currency }}
                 </h6>

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

@@ -11,9 +11,6 @@ import { Router } from '@angular/router';
   styleUrl: './screen-profile.less',
 })
 export class ScreenProfile implements OnInit{
-  // TODO display real data
-  username = 'John Doe';
-  balance = 200;
   transactions = signal<Transaction[]>([])
 
   constructor(

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

@@ -40,7 +40,7 @@
       
         <ng-template #content let-modal>
             <div class="modal-header">
-                <h4 class="modal-title" id="modal-basic-title">Pay {{ amount}} to {{ this.api.currentUser }}</h4>
+                <h4 class="modal-title" id="modal-basic-title">Pay {{ amount}} to {{ this.api.currentUser.id }}</h4>
                 <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
             </div>
             <div class="modal-body text-center">

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

@@ -17,7 +17,7 @@ export class ScreenReceive {
   amount: number = 0;
   get shareableLink(): string {
     const currentDomain = window.location.origin;
-    return `${currentDomain}/send/${this.api.currentUser}?amount=${this.amount}`;
+    return `${currentDomain}/send/${this.api.currentUser.id}?amount=${this.amount}`;
   }
 
   copyLink() {

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

@@ -22,8 +22,8 @@ export class ScreenSend {
   sendMoney() {
     this.api.send(this.amount, this.recipient, this.reference).subscribe({
       next:()=> {
-        this.clear()
         this.notify.success(`Sent ${this.amount} to ${this.recipient}`);
+        this.clear()
       },
       error:(err)=> {
         if(err.status == 404){

client/src/app/services/api.ts

@@ -4,6 +4,8 @@ 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';
 
 @Injectable({
   providedIn: 'root',
@@ -13,15 +15,19 @@ export class APIService {
   private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
   isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
   
-  // TODO use real user here
-  currentUser = 'DemoUser';
+  currentUser!: Account;
+  ownedAccounts!: Account[];
 
   constructor(private http: HttpClient){}
 
   login(username: string, password: string): Observable<any>{
-    return this.http.post(`${this.apiUrl}/auth/login`,{ 'username': username, 'password': password}).pipe(
+    return this.http.post<LoginResponse>(`${this.apiUrl}/auth/login`,{ 'username': username, 'password': password}).pipe(
       tap({
-        next: () => this.isAuthenticatedSubject.next(true),
+        next: (resp) => {
+          this.isAuthenticatedSubject.next(true);
+          this.currentUser = resp.user;
+          this.ownedAccounts = resp.ownedAccounts;
+        },
         error: () => this.isAuthenticatedSubject.next(false)
       })
     );
@@ -50,7 +56,8 @@ export class APIService {
     return this.http.get<Transaction[]>(`${this.apiUrl}/transactions`);
   }
   send(amount: number, recipientID: string, reference: string = ""): Observable<SendResponse>{
-    let request: SendRequest = {amount,  recipientID, reference};
+    
+    let request: SendRequest = {senderID: this.currentUser.id, amount,  recipientID, reference};
     return this.http.post<SendResponse>(`${this.apiUrl}/send`, request);
   }
 }