From cb9728a90b83b8555f05bf7fee8c7fb8108e0ec6 Mon Sep 17 00:00:00 2001
From: eneller <erikneller@gmx.de>
Date: Thu, 23 Jul 2026 16:29:03 +0200
Subject: [PATCH] feat: notifications

---
 client/src/app/app.html                       |  1 +
 client/src/app/app.ts                         |  3 +-
 .../toast-container/toast-container.html      | 13 ++++++
 .../toast-container/toast-container.less      |  0
 .../toast-container/toast-container.spec.ts   | 22 ++++++++++
 .../toast-container/toast-container.ts        | 13 ++++++
 .../app/screens/screen-login/screen-login.ts  |  4 +-
 .../app/screens/screen-send/screen-send.html  |  2 +-
 .../app/screens/screen-send/screen-send.ts    | 20 ++++++---
 client/src/app/services/notification.spec.ts  | 16 ++++++++
 client/src/app/services/notification.ts       | 41 +++++++++++++++++++
 11 files changed, 127 insertions(+), 8 deletions(-)
 create mode 100644 client/src/app/components/toast-container/toast-container.html
 create mode 100644 client/src/app/components/toast-container/toast-container.less
 create mode 100644 client/src/app/components/toast-container/toast-container.spec.ts
 create mode 100644 client/src/app/components/toast-container/toast-container.ts
 create mode 100644 client/src/app/services/notification.spec.ts
 create mode 100644 client/src/app/services/notification.ts

diff --git a/client/src/app/app.html b/client/src/app/app.html
index bd8c277..aa43b47 100644
--- a/client/src/app/app.html
+++ b/client/src/app/app.html
@@ -1,4 +1,5 @@
 <main class="main">
+  <app-toast-container></app-toast-container>
   <router-outlet></router-outlet>
 </main>
 <nav>
diff --git a/client/src/app/app.ts b/client/src/app/app.ts
index 3fc7d6a..0c30b6f 100644
--- a/client/src/app/app.ts
+++ b/client/src/app/app.ts
@@ -9,10 +9,11 @@ import {
 } from '@ng-bootstrap/ng-bootstrap/nav';
 import { filter } from 'rxjs';
 import { APIService } from './services/api';
+import { ToastContainer } from "./components/toast-container/toast-container";
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, NgbModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkBase, RouterLinkWithHref],
+  imports: [RouterOutlet, NgbModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkBase, RouterLinkWithHref, ToastContainer],
   templateUrl: './app.html',
   styleUrl: './app.less'
 })
diff --git a/client/src/app/components/toast-container/toast-container.html b/client/src/app/components/toast-container/toast-container.html
new file mode 100644
index 0000000..85e100f
--- /dev/null
+++ b/client/src/app/components/toast-container/toast-container.html
@@ -0,0 +1,13 @@
+<div class="toast-container position-fixed top-0 end-0 p-3">
+  @for (notification of notifications.notifications(); track notification) {
+    <ngb-toast
+      [autohide]="true"
+      [delay]="notification.delay ?? 3000"
+      (hidden)="notifications.remove(notification)"
+    >
+      <div class="text-{{ notification.type }}">
+        {{ notification.message }}
+      </div>
+    </ngb-toast>
+  }
+</div>
diff --git a/client/src/app/components/toast-container/toast-container.less b/client/src/app/components/toast-container/toast-container.less
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/app/components/toast-container/toast-container.spec.ts b/client/src/app/components/toast-container/toast-container.spec.ts
new file mode 100644
index 0000000..bef3c40
--- /dev/null
+++ b/client/src/app/components/toast-container/toast-container.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastContainer } from './toast-container';
+
+describe('ToastContainer', () => {
+  let component: ToastContainer;
+  let fixture: ComponentFixture<ToastContainer>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ToastContainer],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ToastContainer);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/client/src/app/components/toast-container/toast-container.ts b/client/src/app/components/toast-container/toast-container.ts
new file mode 100644
index 0000000..4e81b50
--- /dev/null
+++ b/client/src/app/components/toast-container/toast-container.ts
@@ -0,0 +1,13 @@
+import { Component, inject } from '@angular/core';
+import { NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
+import { NotificationService } from '../../services/notification';
+
+@Component({
+  selector: 'app-toast-container',
+  imports: [NgbToastModule],
+  templateUrl: './toast-container.html',
+  styleUrl: './toast-container.less',
+})
+export class ToastContainer {
+  notifications = inject(NotificationService);
+}
diff --git a/client/src/app/screens/screen-login/screen-login.ts b/client/src/app/screens/screen-login/screen-login.ts
index 13a2062..1763ac3 100644
--- a/client/src/app/screens/screen-login/screen-login.ts
+++ b/client/src/app/screens/screen-login/screen-login.ts
@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { APIService } from '../../services/api';
 import { GenericMessage } from '@message/Message';
+import { NotificationService } from '../../services/notification';
 
 @Component({
   selector: 'app-screen-login',
@@ -21,6 +22,7 @@ export class ScreenLogin {
 
   constructor(
     private api: APIService,
+    private notify: NotificationService,
     private router: Router,
     private route: ActivatedRoute,
     private fb: FormBuilder,
@@ -43,7 +45,7 @@ export class ScreenLogin {
       },
       error: (resp) => {
         let msg: GenericMessage = resp.error;
-        this.error.set(msg.message || 'Login failed. Please try again.');
+        this.notify.error(msg.message || 'Login failed. Please try again.');
         this.loading.set(false);
       }
     });
diff --git a/client/src/app/screens/screen-send/screen-send.html b/client/src/app/screens/screen-send/screen-send.html
index f13095e..4be2355 100644
--- a/client/src/app/screens/screen-send/screen-send.html
+++ b/client/src/app/screens/screen-send/screen-send.html
@@ -45,7 +45,7 @@
             <button class="btn btn-primary btn-lg" (click)="sendMoney()">
               Send Money
             </button>
-            <button class="btn btn-outline-secondary btn-lg" (click)="cancel()">
+            <button class="btn btn-outline-secondary btn-lg" (click)="clear()">
               Cancel
             </button>
           </div>
diff --git a/client/src/app/screens/screen-send/screen-send.ts b/client/src/app/screens/screen-send/screen-send.ts
index 75bd541..a511156 100644
--- a/client/src/app/screens/screen-send/screen-send.ts
+++ b/client/src/app/screens/screen-send/screen-send.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { APIService } from '../../services/api';
+import { NotificationService } from '../../services/notification';
 
 @Component({
   selector: 'app-screen-send',
@@ -15,21 +16,30 @@ export class ScreenSend {
 
   constructor(
     private api: APIService,
+    private notify: NotificationService,
   ){}
 
   sendMoney() {
     this.api.send(this.amount, this.recipient, this.reference).subscribe({
       next:()=> {
-        this.cancel()
-        //TODO show success message
+        this.clear()
+        this.notify.success(`Sent ${this.amount} to ${this.recipient}`);
       },
-      error:()=> {
-        //TODO show error message
+      error:(err)=> {
+        if(err.status == 404){
+          this.notify.error(`Invalid recipient "${this.recipient}"`);
+        }
+        else if(err.status == 402){
+          this.notify.error(`Insufficient funds.`);
+        }
+        else{
+          this.notify.error(`An error occurred during payment: ${err.status}`);
+        }
       }
     });
   }
 
-  cancel() {
+  clear() {
     this.amount = 0;
     this.recipient = '';
     this.reference = '';
diff --git a/client/src/app/services/notification.spec.ts b/client/src/app/services/notification.spec.ts
new file mode 100644
index 0000000..05dca76
--- /dev/null
+++ b/client/src/app/services/notification.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NotificationService } from './notification';
+
+describe('Notification', () => {
+  let service: NotificationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NotificationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/client/src/app/services/notification.ts b/client/src/app/services/notification.ts
new file mode 100644
index 0000000..3d0b4c1
--- /dev/null
+++ b/client/src/app/services/notification.ts
@@ -0,0 +1,41 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationService {
+  notifications = signal<Notification[]>([]);
+
+  show(notification: Notification) {
+    this.notifications.update(items => [
+      ...items,
+      notification,
+    ]);
+  }
+
+  remove(notification: Notification) {
+    this.notifications.update(items =>
+      items.filter(item => item !== notification)
+    );
+  }
+
+  success(message: string) {
+    this.show({ type: 'success', message});
+  }
+
+  error(message: string) {
+    this.show({ type: 'danger', message});
+  }
+
+  warn(message: string) {
+    this.show({ type: 'warning', message});
+  }
+  info(message: string) {
+    this.show({ type: 'info', message});
+  }
+}
+export interface Notification {
+  type: 'success' | 'warning' | 'info' | 'danger';
+  message: string;
+  delay?: number;
+}