From 601bf256b846d427befe347ebab2dd1a820cd91a Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Tue, 3 Feb 2026 11:40:30 +0100
Subject: [PATCH 01/52] chore: add prettier config in package, remove angular
 animations and lang service

---
 package-lock.json | 44 ++++++++------------------------------------
 package.json      | 16 +++++++++++++---
 2 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8689cd1d..05f76200 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "21.1.2",
       "license": "MIT",
       "dependencies": {
-        "@angular/animations": "^21.1.2",
         "@angular/common": "^21.1.2",
         "@angular/compiler": "^21.1.2",
         "@angular/core": "^21.1.2",
@@ -34,14 +33,13 @@
         "@angular/build": "^21.1.2",
         "@angular/cli": "^21.1.2",
         "@angular/compiler-cli": "^21.1.2",
-        "@angular/language-service": "^21.1.2",
         "@types/bcryptjs": "^2.4.6",
         "@types/express": "^4.17.23",
         "@types/jasmine": "~5.1.0",
         "@types/jest": "^30.0.0",
         "@types/jsonwebtoken": "^9.0.10",
         "@types/morgan": "^1.9.10",
-        "@types/node": "^22.15.29",
+        "@types/node": "^24",
         "@types/supertest": "^6.0.3",
         "angular-eslint": "21.2.0",
         "concurrently": "^9.2.1",
@@ -678,22 +676,6 @@
         "typescript": "*"
       }
     },
-    "node_modules/@angular/animations": {
-      "version": "21.1.2",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.1.2.tgz",
-      "integrity": "sha512-8lVSH3y/Pq22ND9ng80UQwQRiIPIE7oD3vuV98Wufld59+s5g4PdJNqPhEVD5dkYD0gYQcm3jTIXSeYuOfpsUg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "21.1.2"
-      }
-    },
     "node_modules/@angular/build": {
       "version": "21.1.2",
       "resolved": "https://registry.npmjs.org/@angular/build/-/build-21.1.2.tgz",
@@ -1253,16 +1235,6 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
-    "node_modules/@angular/language-service": {
-      "version": "21.1.2",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-21.1.2.tgz",
-      "integrity": "sha512-/2VXz08k0BVQoYiDv/AyQgDY9AVzFuo29I/OAh28za58ReiXkT/WOWgP4el1rewX4uxWnM+BEpYxC3hcc+Ls0Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
-      }
-    },
     "node_modules/@angular/platform-browser": {
       "version": "21.1.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.1.2.tgz",
@@ -6724,14 +6696,14 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.15.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.32.tgz",
-      "integrity": "sha512-3jigKqgSjsH6gYZv2nEsqdXfZqIFGAV36XYYjf9KGZ3PSG+IhLecqPnI310RvjutyMwifE2hhhNEklOUrvx/wA==",
+      "version": "24.10.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.10.tgz",
+      "integrity": "sha512-+0/4J266CBGPUq/ELg7QUHhN25WYjE0wYTPSQJn1xeu8DOlIOPxXxrNGiLmfAWl7HMMgWFWXpt9IDjMWrF5Iow==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "undici-types": "~6.21.0"
+        "undici-types": "~7.16.0"
       }
     },
     "node_modules/@types/qs": {
@@ -17060,9 +17032,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
-      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/package.json b/package.json
index a1dd6c24..9bd91eeb 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,20 @@
     "lint:fix": "ng lint --fix",
     "prepare": "husky || true"
   },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.1.2",
     "@angular/common": "^21.1.2",
     "@angular/compiler": "^21.1.2",
     "@angular/core": "^21.1.2",
@@ -50,14 +61,13 @@
     "@angular/build": "^21.1.2",
     "@angular/cli": "^21.1.2",
     "@angular/compiler-cli": "^21.1.2",
-    "@angular/language-service": "^21.1.2",
     "@types/bcryptjs": "^2.4.6",
     "@types/express": "^4.17.23",
     "@types/jasmine": "~5.1.0",
     "@types/jest": "^30.0.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/morgan": "^1.9.10",
-    "@types/node": "^22.15.29",
+    "@types/node": "^24",
     "@types/supertest": "^6.0.3",
     "angular-eslint": "21.2.0",
     "concurrently": "^9.2.1",

From d9f3719633aaacca33c7103aea29919433c5cf8e Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Tue, 3 Feb 2026 15:25:37 +0100
Subject: [PATCH 02/52] chore: update gitignore and editorconfig

---
 .editorconfig | 1 +
 .gitignore    | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/.editorconfig b/.editorconfig
index 59d9a3a3..f166060d 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off
diff --git a/.gitignore b/.gitignore
index c05f21da..31688422 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ yarn-error.log
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+!.vscode/mcp.json
 .history/*
 
 # Miscellaneous
@@ -36,6 +37,7 @@ yarn-error.log
 /libpeerconnection.log
 testem.log
 /typings
+__screenshots__/
 
 # System files
 .DS_Store

From 06877e723d59a9dac96f7dc9849f26c85a1cebe7 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Tue, 3 Feb 2026 15:25:49 +0100
Subject: [PATCH 03/52] chore: add agents.md and copilot istructions

---
 .github/copilot-instructions.md | 56 +++++++++++++++++++++++++++++++++
 AGENTS.md                       | 56 +++++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 .github/copilot-instructions.md
 create mode 100644 AGENTS.md

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 00000000..34c3b360
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,56 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+- Do not write arrow functions in templates (they are not supported).
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..34c3b360
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,56 @@
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+- Do not write arrow functions in templates (they are not supported).
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

From cb434c12eca3fb8aa1ceea503d85aeb5bb25d066 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Tue, 3 Feb 2026 15:36:12 +0100
Subject: [PATCH 04/52] chore: ignore sass warnings during build, replace
 import with use

---
 angular.json       | 7 ++++++-
 client/styles.scss | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/angular.json b/angular.json
index 60ba86d2..73406a11 100644
--- a/angular.json
+++ b/angular.json
@@ -35,7 +35,12 @@
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "sass": {
+                "silenceDeprecations": ["color-functions", "global-builtin", "import", "if-function"]
+              }
+            }
           },
           "configurations": {
             "production": {
diff --git a/client/styles.scss b/client/styles.scss
index ea1bc393..c36a9a8d 100644
--- a/client/styles.scss
+++ b/client/styles.scss
@@ -3,7 +3,7 @@
 // Add Bootstrap style overrides here
 $primary: #026fbd;
 
-@import '../node_modules/bootstrap/scss/bootstrap';
+@use '../node_modules/bootstrap/scss/bootstrap';
 
 // Add global app styles here
 body {

From 37a272eb2677615c1224a0cf4554d514cac32e91 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Tue, 3 Feb 2026 16:19:14 +0100
Subject: [PATCH 05/52] refactor: migrate to new angular apps structure

* replace main.ts
* add app.config
* add app.routes
* use standalone components
* replace input decorator
---
 client/app/about/about.component.ts           |  1 -
 client/app/account/account.component.html     |  2 +-
 client/app/account/account.component.ts       |  5 +-
 .../add-cat-form/add-cat-form.component.ts    |  5 +-
 client/app/admin/admin.component.html         |  2 +-
 client/app/admin/admin.component.ts           |  3 +-
 client/app/app.config.ts                      | 35 +++++++++++
 client/app/{app.component.html => app.html}   |  0
 client/app/app.module.ts                      | 59 -------------------
 .../{app-routing.module.ts => app.routes.ts}  | 14 +----
 client/app/{app.component.ts => app.ts}       | 12 ++--
 client/app/cats/cats.component.html           |  2 +-
 client/app/cats/cats.component.ts             |  6 +-
 client/app/login/login.component.html         |  2 +-
 client/app/login/login.component.ts           |  5 +-
 client/app/logout/logout.component.ts         |  2 +-
 client/app/not-found/not-found.component.ts   |  1 -
 client/app/register/register.component.html   |  2 +-
 client/app/register/register.component.ts     |  5 +-
 client/app/services/auth.service.ts           |  6 +-
 .../app/shared/loading/loading.component.html |  2 +-
 .../app/shared/loading/loading.component.ts   |  5 +-
 client/app/shared/shared.module.ts            | 33 -----------
 client/app/shared/toast/toast.component.html  | 10 ++--
 client/app/shared/toast/toast.component.ts    | 13 ++--
 client/main.ts                                | 11 ++--
 package-lock.json                             | 19 ------
 package.json                                  |  2 +-
 28 files changed, 95 insertions(+), 169 deletions(-)
 create mode 100644 client/app/app.config.ts
 rename client/app/{app.component.html => app.html} (100%)
 delete mode 100644 client/app/app.module.ts
 rename client/app/{app-routing.module.ts => app.routes.ts} (82%)
 rename client/app/{app.component.ts => app.ts} (53%)
 delete mode 100644 client/app/shared/shared.module.ts

diff --git a/client/app/about/about.component.ts b/client/app/about/about.component.ts
index dfe4549f..ccf946df 100644
--- a/client/app/about/about.component.ts
+++ b/client/app/about/about.component.ts
@@ -4,7 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],
-  standalone: false
 })
 export class AboutComponent {
 
diff --git a/client/app/account/account.component.html b/client/app/account/account.component.html
index d6502238..bdff75c6 100644
--- a/client/app/account/account.component.html
+++ b/client/app/account/account.component.html
@@ -1,6 +1,6 @@
 <app-loading [condition]="isLoading"></app-loading>
 
-<app-toast [message]="toast.message"></app-toast>
+<app-toast [message]="toast.message()"></app-toast>
 
 @if (!isLoading) {
   <div class="card">
diff --git a/client/app/account/account.component.ts b/client/app/account/account.component.ts
index 319d7bb8..0fa1c7bd 100644
--- a/client/app/account/account.component.ts
+++ b/client/app/account/account.component.ts
@@ -1,5 +1,8 @@
 import { Component, OnInit, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
 import { ToastComponent } from '../shared/toast/toast.component';
+import { LoadingComponent } from '../shared/loading/loading.component';
 import { AuthService } from '../services/auth.service';
 import { UserService } from '../services/user.service';
 import { User } from '../shared/models/user.model';
@@ -7,7 +10,7 @@ import { User } from '../shared/models/user.model';
 @Component({
   selector: 'app-account',
   templateUrl: './account.component.html',
-  standalone: false
+  imports: [FormsModule, ToastComponent, LoadingComponent],
 })
 export class AccountComponent implements OnInit {
   private auth = inject(AuthService);
diff --git a/client/app/add-cat-form/add-cat-form.component.ts b/client/app/add-cat-form/add-cat-form.component.ts
index 881f7f38..fe95748c 100644
--- a/client/app/add-cat-form/add-cat-form.component.ts
+++ b/client/app/add-cat-form/add-cat-form.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, inject } from '@angular/core';
-import { UntypedFormGroup, UntypedFormControl, Validators, UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, Validators, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
+
 import { CatService } from '../services/cat.service';
 import { ToastComponent } from '../shared/toast/toast.component';
 import { Cat } from '../shared/models/cat.model';
@@ -8,7 +9,7 @@ import { Cat } from '../shared/models/cat.model';
   selector: 'app-add-cat-form',
   templateUrl: './add-cat-form.component.html',
   styleUrls: ['./add-cat-form.component.scss'],
-  standalone: false
+  imports: [ReactiveFormsModule]
 })
 
 export class AddCatFormComponent {
diff --git a/client/app/admin/admin.component.html b/client/app/admin/admin.component.html
index 92742063..b59f22ce 100644
--- a/client/app/admin/admin.component.html
+++ b/client/app/admin/admin.component.html
@@ -1,6 +1,6 @@
 <app-loading [condition]="isLoading"></app-loading>
 
-<app-toast [message]="toast.message"></app-toast>
+<app-toast [message]="toast.message()"></app-toast>
 
 @if (!isLoading) {
   <div class="card">
diff --git a/client/app/admin/admin.component.ts b/client/app/admin/admin.component.ts
index 938a77fb..720afb71 100644
--- a/client/app/admin/admin.component.ts
+++ b/client/app/admin/admin.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, inject } from '@angular/core';
 
 import { ToastComponent } from '../shared/toast/toast.component';
+import { LoadingComponent } from '../shared/loading/loading.component';
 import { AuthService } from '../services/auth.service';
 import { UserService } from '../services/user.service';
 import { User } from '../shared/models/user.model';
@@ -8,7 +9,7 @@ import { User } from '../shared/models/user.model';
 @Component({
   selector: 'app-admin',
   templateUrl: './admin.component.html',
-  standalone: false
+  imports: [ToastComponent, LoadingComponent],
 })
 export class AdminComponent implements OnInit {
   auth = inject(AuthService);
diff --git a/client/app/app.config.ts b/client/app/app.config.ts
new file mode 100644
index 00000000..122dcc4a
--- /dev/null
+++ b/client/app/app.config.ts
@@ -0,0 +1,35 @@
+import { ApplicationConfig, importProvidersFrom, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { JwtModule } from '@auth0/angular-jwt';
+
+// Routes
+import { routes } from './app.routes';
+// Services
+import { CatService } from './services/cat.service';
+import { UserService } from './services/user.service';
+import { AuthService } from './services/auth.service';
+import { AuthGuardLogin } from './services/auth-guard-login.service';
+import { AuthGuardAdmin } from './services/auth-guard-admin.service';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    importProvidersFrom(
+      JwtModule.forRoot({
+        config: {
+          tokenGetter: () => localStorage.getItem('token'),
+          // allowedDomains: ['example.com'],
+          // disallowedRoutes: ['http://example.com/examplebadroute/'],
+        },
+      }),
+    ),
+    provideHttpClient(withInterceptorsFromDi()),
+    AuthService,
+    AuthGuardLogin,
+    AuthGuardAdmin,
+    CatService,
+    UserService,
+  ],
+};
diff --git a/client/app/app.component.html b/client/app/app.html
similarity index 100%
rename from client/app/app.component.html
rename to client/app/app.html
diff --git a/client/app/app.module.ts b/client/app/app.module.ts
deleted file mode 100644
index b84087a2..00000000
--- a/client/app/app.module.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-// Angular
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { JwtModule } from '@auth0/angular-jwt';
-// Modules
-import { AppRoutingModule } from './app-routing.module';
-import { SharedModule } from './shared/shared.module';
-// Services
-import { CatService } from './services/cat.service';
-import { UserService } from './services/user.service';
-import { AuthService } from './services/auth.service';
-import { AuthGuardLogin } from './services/auth-guard-login.service';
-import { AuthGuardAdmin } from './services/auth-guard-admin.service';
-// Components
-import { AppComponent } from './app.component';
-import { CatsComponent } from './cats/cats.component';
-import { AddCatFormComponent } from './add-cat-form/add-cat-form.component';
-import { AboutComponent } from './about/about.component';
-import { RegisterComponent } from './register/register.component';
-import { LoginComponent } from './login/login.component';
-import { LogoutComponent } from './logout/logout.component';
-import { AccountComponent } from './account/account.component';
-import { AdminComponent } from './admin/admin.component';
-import { NotFoundComponent } from './not-found/not-found.component';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    CatsComponent,
-    AddCatFormComponent,
-    AboutComponent,
-    RegisterComponent,
-    LoginComponent,
-    LogoutComponent,
-    AccountComponent,
-    AdminComponent,
-    NotFoundComponent
-  ],
-  imports: [
-    AppRoutingModule,
-    SharedModule,
-    JwtModule.forRoot({
-      config: {
-        tokenGetter: (): string | null => localStorage.getItem('token'),
-        // allowedDomains: ['localhost:3000', 'localhost:4200']
-      }
-    })
-  ],
-  providers: [
-    AuthService,
-    AuthGuardLogin,
-    AuthGuardAdmin,
-    CatService,
-    UserService
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  bootstrap: [AppComponent]
-})
-
-export class AppModule { }
diff --git a/client/app/app-routing.module.ts b/client/app/app.routes.ts
similarity index 82%
rename from client/app/app-routing.module.ts
rename to client/app/app.routes.ts
index ff833a1d..30c1eaec 100644
--- a/client/app/app-routing.module.ts
+++ b/client/app/app.routes.ts
@@ -1,6 +1,5 @@
-// Angular
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
+
 // Services
 import { AuthGuardLogin } from './services/auth-guard-login.service';
 import { AuthGuardAdmin } from './services/auth-guard-admin.service';
@@ -14,7 +13,7 @@ import { AccountComponent } from './account/account.component';
 import { AdminComponent } from './admin/admin.component';
 import { NotFoundComponent } from './not-found/not-found.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   { path: '', component: AboutComponent },
   { path: 'cats', component: CatsComponent },
   { path: 'register', component: RegisterComponent },
@@ -25,10 +24,3 @@ const routes: Routes = [
   { path: 'notfound', component: NotFoundComponent },
   { path: '**', redirectTo: '/notfound' },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-
-export class AppRoutingModule {}
diff --git a/client/app/app.component.ts b/client/app/app.ts
similarity index 53%
rename from client/app/app.component.ts
rename to client/app/app.ts
index 48b7161d..fb6a4b48 100644
--- a/client/app/app.component.ts
+++ b/client/app/app.ts
@@ -1,16 +1,20 @@
 import { AfterViewChecked, ChangeDetectorRef, Component, inject } from '@angular/core';
+import { RouterModule, RouterOutlet } from '@angular/router';
+
 import { AuthService } from './services/auth.service';
+import { ToastComponent } from './shared/toast/toast.component';
+import { LoadingComponent } from './shared/loading/loading.component';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  standalone: false
+  imports: [RouterOutlet, RouterModule],
+  providers: [AuthService, ToastComponent, LoadingComponent],
+  templateUrl: './app.html',
 })
-export class AppComponent implements AfterViewChecked {
+export class App implements AfterViewChecked {
   auth = inject(AuthService);
   private changeDetector = inject(ChangeDetectorRef);
 
-
   // This fixes: https://github.com/DavideViolante/Angular-Full-Stack/issues/105
   ngAfterViewChecked(): void {
     this.changeDetector.detectChanges();
diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index 9a1668c0..9ac5547c 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -1,6 +1,6 @@
 <app-loading [condition]="isLoading"></app-loading>
 
-<app-toast [message]="toast.message"></app-toast>
+<app-toast [message]="toast.message()"></app-toast>
 
 @if (!isLoading) {
   <div class="card mb-3">
diff --git a/client/app/cats/cats.component.ts b/client/app/cats/cats.component.ts
index 70b89392..f92a78fd 100644
--- a/client/app/cats/cats.component.ts
+++ b/client/app/cats/cats.component.ts
@@ -1,20 +1,22 @@
 import { Component, OnInit, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { CatService } from '../services/cat.service';
+import { LoadingComponent } from '../shared/loading/loading.component';
 import { ToastComponent } from '../shared/toast/toast.component';
+import { AddCatFormComponent } from '../add-cat-form/add-cat-form.component';
 import { Cat } from '../shared/models/cat.model';
 
 @Component({
   selector: 'app-cats',
   templateUrl: './cats.component.html',
   styleUrls: ['./cats.component.scss'],
-  standalone: false
+  imports: [FormsModule, AddCatFormComponent, ToastComponent, LoadingComponent],
 })
 export class CatsComponent implements OnInit {
   private catService = inject(CatService);
   toast = inject(ToastComponent);
 
-
   cat = new Cat();
   cats: Cat[] = [];
   isLoading = true;
diff --git a/client/app/login/login.component.html b/client/app/login/login.component.html
index 5163727e..b499727d 100644
--- a/client/app/login/login.component.html
+++ b/client/app/login/login.component.html
@@ -1,4 +1,4 @@
-<app-toast [message]="toast.message"></app-toast>
+<app-toast [message]="toast.message()"></app-toast>
 
 <div class="card">
   <h4 class="card-header">Login</h4>
diff --git a/client/app/login/login.component.ts b/client/app/login/login.component.ts
index 91f7718e..541d546c 100644
--- a/client/app/login/login.component.ts
+++ b/client/app/login/login.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 
 import { AuthService } from '../services/auth.service';
 import { ToastComponent } from '../shared/toast/toast.component';
@@ -8,7 +9,7 @@ import { ToastComponent } from '../shared/toast/toast.component';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  standalone: false
+  imports: [CommonModule, ReactiveFormsModule, ToastComponent],
 })
 export class LoginComponent implements OnInit {
   private auth = inject(AuthService);
diff --git a/client/app/logout/logout.component.ts b/client/app/logout/logout.component.ts
index b57f40a7..3fb2081d 100644
--- a/client/app/logout/logout.component.ts
+++ b/client/app/logout/logout.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit, inject } from '@angular/core';
+
 import { AuthService } from '../services/auth.service';
 
 @Component({
   selector: 'app-logout',
   template: '',
-  standalone: false
 })
 export class LogoutComponent implements OnInit {
   private auth = inject(AuthService);
diff --git a/client/app/not-found/not-found.component.ts b/client/app/not-found/not-found.component.ts
index d2d33f8e..6246b379 100644
--- a/client/app/not-found/not-found.component.ts
+++ b/client/app/not-found/not-found.component.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-not-found',
   templateUrl: './not-found.component.html',
-  standalone: false
 })
 export class NotFoundComponent {
 
diff --git a/client/app/register/register.component.html b/client/app/register/register.component.html
index e7031097..ad077858 100644
--- a/client/app/register/register.component.html
+++ b/client/app/register/register.component.html
@@ -1,4 +1,4 @@
-<app-toast [message]="toast.message"></app-toast>
+<app-toast [message]="toast.message()"></app-toast>
 
 <div class="card">
   <h4 class="card-header">Register</h4>
diff --git a/client/app/register/register.component.ts b/client/app/register/register.component.ts
index 88b91bde..a1adc5ca 100644
--- a/client/app/register/register.component.ts
+++ b/client/app/register/register.component.ts
@@ -1,6 +1,7 @@
 import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 
 import { UserService } from '../services/user.service';
 import { ToastComponent } from '../shared/toast/toast.component';
@@ -8,7 +9,7 @@ import { ToastComponent } from '../shared/toast/toast.component';
 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
-  standalone: false
+  imports: [CommonModule, ReactiveFormsModule, ToastComponent]
 })
 export class RegisterComponent {
   private formBuilder = inject(UntypedFormBuilder);
diff --git a/client/app/services/auth.service.ts b/client/app/services/auth.service.ts
index 33d17e94..267e5e7f 100644
--- a/client/app/services/auth.service.ts
+++ b/client/app/services/auth.service.ts
@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { JwtHelperService } from '@auth0/angular-jwt';
 
 import { UserService } from './user.service';
-import { ToastComponent } from '../shared/toast/toast.component';
+// import { ToastComponent } from '../shared/toast/toast.component';
 import { User } from '../shared/models/user.model';
 
 @Injectable()
@@ -12,7 +12,7 @@ export class AuthService {
   private userService = inject(UserService);
   private router = inject(Router);
   private jwtHelper = inject(JwtHelperService);
-  toast = inject(ToastComponent);
+  // toast = inject(ToastComponent);
 
   loggedIn = false;
   isAdmin = false;
@@ -36,7 +36,7 @@ export class AuthService {
         this.loggedIn = true;
         this.router.navigate(['/']);
       },
-      error: () => this.toast.setMessage('Invalid email or password!', 'danger')
+      error: () => console.error() // this.toast.setMessage('Invalid email or password!', 'danger')
     });
   }
 
diff --git a/client/app/shared/loading/loading.component.html b/client/app/shared/loading/loading.component.html
index 1277f1b1..5d2341f5 100644
--- a/client/app/shared/loading/loading.component.html
+++ b/client/app/shared/loading/loading.component.html
@@ -1,4 +1,4 @@
-@if (condition) {
+@if (condition()) {
   <div class="card">
     <h4 class="card-header">Loading...</h4>
     <div class="card-body text-xs-center">
diff --git a/client/app/shared/loading/loading.component.ts b/client/app/shared/loading/loading.component.ts
index f97451d4..ffdf76ad 100644
--- a/client/app/shared/loading/loading.component.ts
+++ b/client/app/shared/loading/loading.component.ts
@@ -1,10 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-loading',
   templateUrl: './loading.component.html',
-  standalone: false
 })
 export class LoadingComponent {
-  @Input() condition = false;
+  condition = input<boolean>(false);
 }
diff --git a/client/app/shared/shared.module.ts b/client/app/shared/shared.module.ts
deleted file mode 100644
index 38963d36..00000000
--- a/client/app/shared/shared.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-
-import { ToastComponent } from './toast/toast.component';
-import { LoadingComponent } from './loading/loading.component';
-
-@NgModule({
-  exports: [
-    // Shared Modules
-    BrowserModule,
-    FormsModule,
-    ReactiveFormsModule,
-    // Shared Components
-    ToastComponent,
-    LoadingComponent,
-  ],
-  declarations: [
-    ToastComponent,
-    LoadingComponent
-  ],
-  imports: [
-    BrowserModule,
-    FormsModule,
-    ReactiveFormsModule
-  ],
-  providers: [
-    ToastComponent,
-    provideHttpClient(withInterceptorsFromDi())
-  ],
-})
-export class SharedModule {}
diff --git a/client/app/shared/toast/toast.component.html b/client/app/shared/toast/toast.component.html
index 76934867..462c358b 100644
--- a/client/app/shared/toast/toast.component.html
+++ b/client/app/shared/toast/toast.component.html
@@ -1,9 +1,9 @@
-@if (message.body) {
-  <div class="alert" [ngClass]="'alert-' + message.type" role="alert">
+@if (message().body) {
+  <div class="alert" [ngClass]="'alert-' + message().type" role="alert">
   <i class="fa me-2" [ngClass]="{
-    'fa-check-circle': message.type === 'success',
-    'fa-exclamation-circle': message.type === 'warning' || message.type === 'danger'
+    'fa-check-circle': message().type === 'success',
+    'fa-exclamation-circle': message().type === 'warning' || message().type === 'danger'
   }"></i>
-    <span [innerHTML]="message.body"></span>
+    <span [innerHTML]="message().body"></span>
   </div>
 }
\ No newline at end of file
diff --git a/client/app/shared/toast/toast.component.ts b/client/app/shared/toast/toast.component.ts
index e2085686..6dc6bbbe 100644
--- a/client/app/shared/toast/toast.component.ts
+++ b/client/app/shared/toast/toast.component.ts
@@ -1,21 +1,22 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-toast',
   templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.scss'],
-  standalone: false
+  imports: [CommonModule],
 })
 export class ToastComponent {
-  @Input() message = { body: '', type: '' };
+  message = input({ body: '', type: '' });
   existingTimeout = 0;
 
   setMessage(body: string, type: string, time = 3000): void {
     if (this.existingTimeout) {
       clearTimeout(this.existingTimeout);
     }
-    this.message.body = body;
-    this.message.type = type;
-    this.existingTimeout = window.setTimeout(() => this.message.body = '', time);
+    this.message().body = body;
+    this.message().type = type;
+    this.existingTimeout = window.setTimeout(() => this.message().body = '', time);
   }
 }
diff --git a/client/main.ts b/client/main.ts
index 1c92c66b..027a4820 100644
--- a/client/main.ts
+++ b/client/main.ts
@@ -1,8 +1,7 @@
-import { provideZoneChangeDetection } from "@angular/core";
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
 
-import { AppModule } from './app/app.module';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
 
-
-platformBrowserDynamic().bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()], })
-  .catch(err => console.error(err));
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));
diff --git a/package-lock.json b/package-lock.json
index 05f76200..ac76a3eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,6 @@
         "@angular/core": "^21.1.2",
         "@angular/forms": "^21.1.2",
         "@angular/platform-browser": "^21.1.2",
-        "@angular/platform-browser-dynamic": "^21.1.2",
         "@angular/router": "^21.1.2",
         "@auth0/angular-jwt": "^5.2.0",
         "bcryptjs": "^2.4.3",
@@ -1258,24 +1257,6 @@
         }
       }
     },
-    "node_modules/@angular/platform-browser-dynamic": {
-      "version": "21.1.2",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-21.1.2.tgz",
-      "integrity": "sha512-3+6Le0CuEpJFdJniD2ol6i9i7gmlJv+Qck5lxY+eHq2Ylj0VJ9sBIFaMBCmvdb6lz7QYnKoZr+Lhv1MX6hVXyg==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "21.1.2",
-        "@angular/compiler": "21.1.2",
-        "@angular/core": "21.1.2",
-        "@angular/platform-browser": "21.1.2"
-      }
-    },
     "node_modules/@angular/router": {
       "version": "21.1.2",
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.1.2.tgz",
diff --git a/package.json b/package.json
index 9bd91eeb..0a679206 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "scripts": {
     "ng": "ng",
     "build:dev": "ng build -c development && tsc -p server",
+    "build:dev:w": "ng build -c development --watch",
     "build": "ng build && tsc -p server",
     "start": "node dist/server/app.js",
     "predev": "tsc -p server",
@@ -42,7 +43,6 @@
     "@angular/core": "^21.1.2",
     "@angular/forms": "^21.1.2",
     "@angular/platform-browser": "^21.1.2",
-    "@angular/platform-browser-dynamic": "^21.1.2",
     "@angular/router": "^21.1.2",
     "@auth0/angular-jwt": "^5.2.0",
     "bcryptjs": "^2.4.3",

From 44d5c77c5a5c3d29b62b0342b4e38d77e3236382 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Wed, 4 Feb 2026 17:21:36 +0100
Subject: [PATCH 06/52] chore: use signals in cats component

---
 client/app/cats/cats.component.html | 27 +++++++++----------
 client/app/cats/cats.component.ts   | 42 ++++++++++++++++-------------
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index 9ac5547c..41849573 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -1,10 +1,10 @@
-<app-loading [condition]="isLoading"></app-loading>
+<app-loading [condition]="isLoading()"></app-loading>
 
 <app-toast [message]="toast.message()"></app-toast>
 
-@if (!isLoading) {
+@if (!isLoading()) {
   <div class="card mb-3">
-    <h4 class="card-header">Current cats ({{cats.length}})</h4>
+    <h4 class="card-header">Current cats ({{catsCount()}})</h4>
     <div class="card-body">
       <table class="table table-bordered">
         <thead class="table-secondary">
@@ -15,16 +15,16 @@ <h4 class="card-header">Current cats ({{cats.length}})</h4>
             <th scope="col">Actions</th>
           </tr>
         </thead>
-        @if (cats.length === 0) {
+        @if (catsCount() === 0) {
           <tbody>
             <tr>
               <td colspan="4">There are no cats in the DB. Add a new cat below.</td>
             </tr>
           </tbody>
         }
-        @if (!isEditing) {
+        @if (!isEditing()) {
           <tbody>
-            @for (cat of cats; track cat) {
+            @for (cat of cats(); track cat) {
               <tr>
                 <td>{{cat.name}}</td>
                 <td>{{cat.age}}</td>
@@ -41,23 +41,20 @@ <h4 class="card-header">Current cats ({{cats.length}})</h4>
             }
           </tbody>
         }
-        @if (isEditing) {
+        @if (isEditing()) {
           <tbody>
             <tr>
               <td colspan="4">
-                <form #form="ngForm" (ngSubmit)="editCat(cat)">
+                <form #form="ngForm" (ngSubmit)="editCat(cat())">
                   <div class="row row-cols-1 row-cols-sm-auto g-2">
                     <div class="col">
-                      <input class="form-control" type="text" name="name" [(ngModel)]="cat.name" placeholder="Name"
-                        required>
+                      <input class="form-control" type="text" name="name" [(ngModel)]="cat().name" placeholder="Name" required>
                     </div>
                     <div class="col">
-                      <input class="form-control" type="number" name="age" [(ngModel)]="cat.age" placeholder="Age" min="0"
-                        required>
+                      <input class="form-control" type="number" name="age" [(ngModel)]="cat().age" placeholder="Age" min="0" required>
                     </div>
                     <div class="col">
-                      <input class="form-control" type="number" name="weight" [(ngModel)]="cat.weight" placeholder="Weight"
-                        step="any" min="0" required>
+                      <input class="form-control" type="number" name="weight" [(ngModel)]="cat().weight" placeholder="Weight" step="any" min="0" required>
                     </div>
                     <div class="col d-flex align-items-center">
                       <button class="btn btn-sm btn-primary me-2" type="submit" [disabled]="!form.form.valid">
@@ -79,5 +76,5 @@ <h4 class="card-header">Current cats ({{cats.length}})</h4>
 }
 
 @if (!isEditing) {
-  <app-add-cat-form [cats]="cats"></app-add-cat-form>
+  <app-add-cat-form [cats]="cats()"></app-add-cat-form>
 }
\ No newline at end of file
diff --git a/client/app/cats/cats.component.ts b/client/app/cats/cats.component.ts
index f92a78fd..3540b839 100644
--- a/client/app/cats/cats.component.ts
+++ b/client/app/cats/cats.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, signal, computed, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { CatService } from '../services/cat.service';
@@ -12,49 +12,55 @@ import { Cat } from '../shared/models/cat.model';
   templateUrl: './cats.component.html',
   styleUrls: ['./cats.component.scss'],
   imports: [FormsModule, AddCatFormComponent, ToastComponent, LoadingComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CatsComponent implements OnInit {
   private catService = inject(CatService);
   toast = inject(ToastComponent);
 
-  cat = new Cat();
-  cats: Cat[] = [];
-  isLoading = true;
-  isEditing = false;
+  cat = signal<Cat>(new Cat());
+  cats = signal<Cat[]>([]);
+  isLoading = signal<boolean>(true);
+  isEditing = signal<boolean>(false);
+
+  catsCount = computed(() => this.cats().length);
 
   ngOnInit(): void {
     this.getCats();
   }
 
   getCats(): void {
+    this.isLoading.set(true);
     this.catService.getCats().subscribe({
-      next: data => this.cats = data,
-      error: error => console.log(error),
-      complete: () => this.isLoading = false
+      next: data => this.cats.set(data),
+      error: error => console.error(error),
+      complete: () => this.isLoading.set(false)
     });
   }
 
   enableEditing(cat: Cat): void {
-    this.isEditing = true;
-    this.cat = cat;
+    this.isEditing.set(true);
+    this.cat.set(cat);
   }
 
   cancelEditing(): void {
-    this.isEditing = false;
-    this.cat = new Cat();
+    this.isEditing.set(false);
+    this.cat.set(new Cat());
     this.toast.setMessage('Item editing cancelled.', 'warning');
-    // reload the cats to reset the editing
+    // Reload the cats to reset the editing
     this.getCats();
   }
 
   editCat(cat: Cat): void {
     this.catService.editCat(cat).subscribe({
       next: () => {
-        this.isEditing = false;
-        this.cat = cat;
+        this.isEditing.set(false);
+        this.cat.set(cat);
         this.toast.setMessage('Item edited successfully.', 'success');
+        // Reload the cats to see the changes
+        this.getCats();
       },
-      error: error => console.log(error)
+      error: error => console.error(error)
     });
   }
 
@@ -62,10 +68,10 @@ export class CatsComponent implements OnInit {
     if (window.confirm('Are you sure you want to permanently delete this item?')) {
       this.catService.deleteCat(cat).subscribe({
         next: () => {
-          this.cats = this.cats.filter(elem => elem._id !== cat._id);
+          this.cats.update(list => list.filter(elem => elem._id !== cat._id));
           this.toast.setMessage('Item deleted successfully.', 'success');
         },
-        error: error => console.log(error)
+        error: error => console.error(error)
       });
     }
   }

From 999e4d559b89c8e3991c2ab7ec154c2da9bb060a Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Wed, 4 Feb 2026 17:29:58 +0100
Subject: [PATCH 07/52] chore: use signals in account component

---
 client/app/account/account.component.html | 14 ++++++--------
 client/app/account/account.component.ts   | 20 +++++++++++---------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/client/app/account/account.component.html b/client/app/account/account.component.html
index bdff75c6..72046690 100644
--- a/client/app/account/account.component.html
+++ b/client/app/account/account.component.html
@@ -1,31 +1,29 @@
-<app-loading [condition]="isLoading"></app-loading>
+<app-loading [condition]="isLoading()"></app-loading>
 
 <app-toast [message]="toast.message()"></app-toast>
 
-@if (!isLoading) {
+@if (!isLoading()) {
   <div class="card">
     <h4 class="card-header">Account settings</h4>
     <div class="card-body">
-      <form #accountForm="ngForm" (ngSubmit)="save(user)">
+      <form #accountForm="ngForm" (ngSubmit)="save()">
         <div class="input-group">
           <span class="input-group-text">
             <i class="fa fa-user"></i>
           </span>
-          <input class="form-control" type="text" name="username"
-            [(ngModel)]="user.username" placeholder="Username" required>
+          <input class="form-control" type="text" name="username" [(ngModel)]="user().username" placeholder="Username" required>
         </div>
         <div class="input-group">
           <span class="input-group-text">
             <i class="fa fa-envelope"></i>
           </span>
-          <input class="form-control" type="email" name="email"
-            [(ngModel)]="user.email" placeholder="Email" required>
+          <input class="form-control" type="email" name="email" [(ngModel)]="user().email" placeholder="Email" required>
         </div>
         <div class="input-group">
           <span class="input-group-text">
             <i class="fa fa-black-tie"></i>
           </span>
-          <select class="form-control" name="role" [(ngModel)]="user.role">
+          <select class="form-control" name="role" [(ngModel)]="user().role">
             <option value="" disabled>Role</option>
             <option value="user">User</option>
             <option value="admin">Admin</option>
diff --git a/client/app/account/account.component.ts b/client/app/account/account.component.ts
index 0fa1c7bd..600f9850 100644
--- a/client/app/account/account.component.ts
+++ b/client/app/account/account.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, signal, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { ToastComponent } from '../shared/toast/toast.component';
@@ -11,36 +11,38 @@ import { User } from '../shared/models/user.model';
   selector: 'app-account',
   templateUrl: './account.component.html',
   imports: [FormsModule, ToastComponent, LoadingComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountComponent implements OnInit {
   private auth = inject(AuthService);
   toast = inject(ToastComponent);
   private userService = inject(UserService);
 
-
-  user: User = new User();
-  isLoading = true;
+  user = signal<User>(new User());
+  isLoading = signal<boolean>(true);
 
   ngOnInit(): void {
     this.getUser();
   }
 
   getUser(): void {
+    this.isLoading.set(true);
     this.userService.getUser(this.auth.currentUser).subscribe({
-      next: data => this.user = data,
-      error: error => console.log(error),
-      complete: () => this.isLoading = false
+      next: data => this.user.set(data),
+      error: error => console.error(error),
+      complete: () => this.isLoading.set(false)
     });
   }
 
-  save(user: User): void {
+  save(): void {
+    const user = this.user();
     this.userService.editUser(user).subscribe({
       next: () => {
         this.toast.setMessage('Account settings saved!', 'success');
         this.auth.currentUser = user;
         this.auth.isAdmin = user.role === 'admin';
       },
-      error: error => console.log(error)
+      error: error => console.error(error)
     });
   }
 

From 4d70a00437df2a189cd76ac9dad17b1e5fd06fc1 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Wed, 4 Feb 2026 17:34:36 +0100
Subject: [PATCH 08/52] chore: use signals in admin component

---
 client/app/admin/admin.component.html | 10 +++++-----
 client/app/admin/admin.component.ts   | 21 ++++++++++++---------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/client/app/admin/admin.component.html b/client/app/admin/admin.component.html
index b59f22ce..e7b1464f 100644
--- a/client/app/admin/admin.component.html
+++ b/client/app/admin/admin.component.html
@@ -1,10 +1,10 @@
-<app-loading [condition]="isLoading"></app-loading>
+<app-loading [condition]="isLoading()"></app-loading>
 
 <app-toast [message]="toast.message()"></app-toast>
 
-@if (!isLoading) {
+@if (!isLoading()) {
   <div class="card">
-    <h4 class="card-header">Registered users ({{users.length}})</h4>
+    <h4 class="card-header">Registered users ({{usersCount()}})</h4>
     <div class="card-body">
       <table class="table table-bordered">
         <thead class="table-secondary">
@@ -15,7 +15,7 @@ <h4 class="card-header">Registered users ({{users.length}})</h4>
             <th scope="col">Actions</th>
           </tr>
         </thead>
-        @if (users.length === 0) {
+        @if (usersCount() === 0) {
           <tbody>
             <tr>
               <td colspan="4">There are no registered users.</td>
@@ -23,7 +23,7 @@ <h4 class="card-header">Registered users ({{users.length}})</h4>
           </tbody>
         }
         <tbody>
-          @for (user of users; track user) {
+          @for (user of users(); track user) {
             <tr>
               <td>{{user.username}}</td>
               <td>{{user.email}}</td>
diff --git a/client/app/admin/admin.component.ts b/client/app/admin/admin.component.ts
index 720afb71..7ce72539 100644
--- a/client/app/admin/admin.component.ts
+++ b/client/app/admin/admin.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, signal, computed, ChangeDetectionStrategy } from '@angular/core';
 
 import { ToastComponent } from '../shared/toast/toast.component';
 import { LoadingComponent } from '../shared/loading/loading.component';
@@ -10,33 +10,36 @@ import { User } from '../shared/models/user.model';
   selector: 'app-admin',
   templateUrl: './admin.component.html',
   imports: [ToastComponent, LoadingComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AdminComponent implements OnInit {
   auth = inject(AuthService);
   toast = inject(ToastComponent);
   private userService = inject(UserService);
 
+  users = signal<User[]>([]);
+  isLoading = signal<boolean>(true);
 
-  users: User[] = [];
-  isLoading = true;
+  usersCount = computed(() => this.users().length);
 
   ngOnInit(): void {
     this.getUsers();
   }
 
   getUsers(): void {
+    this.isLoading.set(true);
     this.userService.getUsers().subscribe({
-      next: data => this.users = data,
-      error: error => console.log(error),
-      complete: () => this.isLoading = false
+      next: data => this.users.set(data),
+      error: error => console.error(error),
+      complete: () => this.isLoading.set(false)
     });
   }
 
   deleteUser(user: User): void {
-    if (window.confirm('Are you sure you want to delete ' + user.username + '?')) {
+    if (window.confirm(`Are you sure you want to delete ${user.username}?`)) {
       this.userService.deleteUser(user).subscribe({
-        next: () => this.toast.setMessage('User deleted successfully.', 'success'),
-        error: error => console.log(error),
+        next: () => this.toast.setMessage(`User ${user.username} deleted successfully.`, 'success'),
+        error: error => console.error(error),
         complete: () => this.getUsers()
       });
     }

From 4f52eb10b0dc21efef0e3f3f16d639d0dd64d1b2 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Wed, 4 Feb 2026 17:46:28 +0100
Subject: [PATCH 09/52] fix: prevent triggering editCat on cancel

---
 client/app/cats/cats.component.html | 2 +-
 client/app/cats/cats.component.ts   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index 41849573..b11c61b6 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -60,7 +60,7 @@ <h4 class="card-header">Current cats ({{catsCount()}})</h4>
                       <button class="btn btn-sm btn-primary me-2" type="submit" [disabled]="!form.form.valid">
                         <i class="fa fa-floppy-o"></i> Save
                       </button>
-                      <button class="btn btn-sm btn-warning" (click)="cancelEditing()">
+                      <button class="btn btn-sm btn-warning" (click)="cancelEditing($event)">
                         <i class="fa fa-times"></i> Cancel
                       </button>
                     </div>
diff --git a/client/app/cats/cats.component.ts b/client/app/cats/cats.component.ts
index 3540b839..4a1db293 100644
--- a/client/app/cats/cats.component.ts
+++ b/client/app/cats/cats.component.ts
@@ -43,7 +43,8 @@ export class CatsComponent implements OnInit {
     this.cat.set(cat);
   }
 
-  cancelEditing(): void {
+  cancelEditing(event: Event): void {
+    event.preventDefault(); // Prevent triggering submit
     this.isEditing.set(false);
     this.cat.set(new Cat());
     this.toast.setMessage('Item editing cancelled.', 'warning');

From bf21fbfeaac497e19d5c98b3d46650aef27d6790 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Wed, 4 Feb 2026 17:49:12 +0100
Subject: [PATCH 10/52] chore: remove number 2 from the project name

---
 README.md    | 4 ++--
 angular.json | 6 +++---
 package.json | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 38dbcf41..78b71693 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Other tools and technologies used:
 * [Bootstrap](http://www.getbootstrap.com): layout and styles
 * [Font Awesome](http://fontawesome.com): icons
 * [JSON Web Token](https://jwt.io): user authentication
-* [Angular 2 JWT](https://github.com/auth0/angular2-jwt): JWT helper for Angular 2+
+* [Angular 2 JWT](https://github.com/auth0/angular2-jwt): JWT helper for Angular
 * [Bcrypt.js](https://github.com/dcodeIO/bcrypt.js): password encryption
 
 ## Prerequisites
@@ -55,7 +55,7 @@ A window will automatically open at [localhost:4200](http://localhost:4200). Ang
 10. Tip: use [pm2](https://pm2.keymetrics.io/) to run the app instead of `npm start`, eg: `pm2 start dist/server/app.js`
 
 ## Preview
-![Preview](https://raw.githubusercontent.com/DavideViolante/Angular2-Full-Stack/master/demo.gif "Preview")
+![Preview](https://raw.githubusercontent.com/DavideViolante/Angular-Full-Stack/master/demo.gif "Preview")
 
 ## Please open an issue if
 * you have any suggestion to improve this project
diff --git a/angular.json b/angular.json
index 73406a11..85fc101e 100644
--- a/angular.json
+++ b/angular.json
@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "angular2-full-stack": {
+    "angular-full-stack": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -70,11 +70,11 @@
           "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "angular2-full-stack:build:production"
+              "buildTarget": "angular-full-stack:build:production"
             },
             "development": {
               "proxyConfig": "proxy.conf.json",
-              "buildTarget": "angular2-full-stack:build:development"
+              "buildTarget": "angular-full-stack:build:development"
             }
           },
           "defaultConfiguration": "development"
diff --git a/package.json b/package.json
index 0a679206..6f6741c8 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "angular2-full-stack",
+  "name": "angular-full-stack",
   "version": "21.1.2",
   "license": "MIT",
   "author": "Davide Violante",
-  "description": "Angular Full Stack project built using Angular 2+, Express, Mongoose and Node.",
+  "description": "Angular Full Stack project built using Angular, Express, Mongoose and Node.",
   "engines": {
     "node": ">=24",
     "npm": ">=10"

From 9a43f379a7752106273ecea5bf147f5a4e47464b Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Wed, 4 Feb 2026 17:51:07 +0100
Subject: [PATCH 11/52] fix: show add new cat form

---
 client/app/cats/cats.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index b11c61b6..81d6f97c 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -75,6 +75,6 @@ <h4 class="card-header">Current cats ({{catsCount()}})</h4>
   </div>
 }
 
-@if (!isEditing) {
+@if (!isEditing()) {
   <app-add-cat-form [cats]="cats()"></app-add-cat-form>
 }
\ No newline at end of file

From e46f4eab0e45475af92d47a1b38ed67a5b14f999 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Wed, 4 Feb 2026 18:06:40 +0100
Subject: [PATCH 12/52] fix: use update instead of push to update cats when
 added

---
 client/app/add-cat-form/add-cat-form.component.ts | 8 ++++----
 client/app/cats/cats.component.html               | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/app/add-cat-form/add-cat-form.component.ts b/client/app/add-cat-form/add-cat-form.component.ts
index fe95748c..32fc4fef 100644
--- a/client/app/add-cat-form/add-cat-form.component.ts
+++ b/client/app/add-cat-form/add-cat-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, inject } from '@angular/core';
+import { Component, inject, Input, WritableSignal } from '@angular/core';
 import { UntypedFormGroup, UntypedFormControl, Validators, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 
 import { CatService } from '../services/cat.service';
@@ -17,7 +17,7 @@ export class AddCatFormComponent {
   private formBuilder = inject(UntypedFormBuilder);
   toast = inject(ToastComponent);
 
-  @Input() cats: Cat[] = [];
+  @Input() cats?: WritableSignal<Cat[]>;
 
   addCatForm: UntypedFormGroup;
   name = new UntypedFormControl('', Validators.required);
@@ -35,11 +35,11 @@ export class AddCatFormComponent {
   addCat(): void {
     this.catService.addCat(this.addCatForm.value).subscribe({
       next: res => {
-        this.cats.push(res);
+        this.cats?.update(list => [...list, res]);
         this.addCatForm.reset();
         this.toast.setMessage('Item added successfully.', 'success');
       },
-      error: error => console.log(error)
+      error: error => console.error(error),
     });
   }
 
diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index 81d6f97c..11c3fe42 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -76,5 +76,5 @@ <h4 class="card-header">Current cats ({{catsCount()}})</h4>
 }
 
 @if (!isEditing()) {
-  <app-add-cat-form [cats]="cats()"></app-add-cat-form>
+  <app-add-cat-form [cats]="cats"></app-add-cat-form>
 }
\ No newline at end of file

From 1aa211d3a2bdd31d9d9f56b60b60334a38bb9910 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 11:00:31 +0100
Subject: [PATCH 13/52] chore: align tsconfigs to newest angular project

---
 server/tsconfig.json |  3 +--
 tsconfig.app.json    |  9 ++++-----
 tsconfig.json        | 22 +++++++++++++---------
 tsconfig.spec.json   |  6 +++---
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/server/tsconfig.json b/server/tsconfig.json
index a77a2837..31bb5474 100644
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -3,8 +3,7 @@
   "compilerOptions": {
     "outDir": "../dist/server",
     "baseUrl": "",
-    "moduleResolution": "node",
-    "module": "commonjs",
+    "module": "nodenext",
     "types": ["node", "jest"],
   }
 }
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
index b701485c..771b2f60 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,13 +3,12 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "./out-tsc/app",
     "types": ["node"]
   },
-  "files": [
-    "client/main.ts"
-  ],
   "include": [
-    "client/**/*.d.ts"
+    "client/**/*.ts"
+  ],
+  "exclude": [
+    "client/**/*.spec.ts"
   ]
 }
diff --git a/tsconfig.json b/tsconfig.json
index 8aecc9b1..7673d68d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,27 +3,31 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": false,
+    "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "isolatedModules": true,
     "esModuleInterop": true,
-    "sourceMap": true,
-    "declaration": false,
+    "isolatedModules": true,
     "experimentalDecorators": true,
-    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022"
+    "module": "preserve"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
 }
\ No newline at end of file
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index e6e078f5..395c813e 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -5,11 +5,11 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "vitest/globals"
     ]
   },
   "include": [
-    "client/**/*.spec.ts",
-    "client/**/*.d.ts"
+    "client/**/*.d.ts",
+    "client/**/*.spec.ts"
   ]
 }

From 3e7e5027fed5ec34a95fca18aab7e81b2499a9ee Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 11:58:28 +0100
Subject: [PATCH 14/52] chore: remove jasmine and karma, add vitest

---
 README.md    |  2 +-
 package.json | 14 ++++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 78b71693..781998b5 100644
--- a/README.md
+++ b/README.md
@@ -62,7 +62,7 @@ A window will automatically open at [localhost:4200](http://localhost:4200). Ang
 * you noticed any problem or error
 
 ## Running tests
-Run `ng test` to execute the frontend unit tests via [Karma](https://karma-runner.github.io).
+Run `ng test` to execute the frontend unit tests via [Vitest](https://vitest.dev/).
 
 Run `npm run test:be` to execute the backend tests via [Jest](https://jestjs.io/) (it requires `mongod` already running).
 
diff --git a/package.json b/package.json
index 6f6741c8..fb3ceaec 100644
--- a/package.json
+++ b/package.json
@@ -54,8 +54,7 @@
     "mongoose": "^8.16.0",
     "morgan": "^1.10.1",
     "rxjs": "~7.8.2",
-    "tslib": "^2.8.1",
-    "zone.js": "~0.16.0"
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
     "@angular/build": "^21.1.2",
@@ -63,7 +62,6 @@
     "@angular/compiler-cli": "^21.1.2",
     "@types/bcryptjs": "^2.4.6",
     "@types/express": "^4.17.23",
-    "@types/jasmine": "~5.1.0",
     "@types/jest": "^30.0.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/morgan": "^1.9.10",
@@ -74,17 +72,13 @@
     "eslint": "^9.39.2",
     "htmlhint": "^1.8.0",
     "husky": "^9.1.7",
-    "jasmine-core": "~5.2.0",
     "jest": "^30.2.0",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.2.0",
+    "jsdom": "^27.1.0",
     "nodemon": "^3.1.11",
     "supertest": "^7.2.2",
     "ts-jest": "^29.4.6",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.54.0"
+    "typescript-eslint": "^8.54.0",
+    "vitest": "^4.0.8"
   }
 }

From e47c3c42bc322b31e907169adf8f4f942d79126e Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 11:58:44 +0100
Subject: [PATCH 15/52] chore: align angular json to latest angular project

---
 README.md    |  2 +-
 angular.json | 30 ++++++------------------------
 2 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index 781998b5..988d7d4c 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Angular Full Stack is a project to easly get started with the latest Angular usi
 This project uses the [MEAN stack](https://en.wikipedia.org/wiki/MEAN_(software_bundle)):
 * [**M**ongoose.js](http://www.mongoosejs.com) ([MongoDB](https://www.mongodb.com)): database
 * [**E**xpress.js](http://expressjs.com): backend framework
-* [**A**ngular 2+](https://angular.io): frontend framework
+* [**A**ngular](https://angular.io): frontend framework
 * [**N**ode.js](https://nodejs.org): runtime environment
 
 Other tools and technologies used:
diff --git a/angular.json b/angular.json
index 85fc101e..0087a038 100644
--- a/angular.json
+++ b/angular.json
@@ -18,14 +18,14 @@
           "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/public",
-            "index": "client/index.html",
             "browser": "client/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              },
               "client/assets/favicon.ico",
               "client/assets"
             ],
@@ -83,26 +83,7 @@
           "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular/build:karma",
-          "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "client/assets/favicon.ico",
-              "client/assets"
-            ],
-            "styles": [
-              "node_modules/font-awesome/css/font-awesome.min.css",
-              "client/styles.scss"
-            ],
-            "scripts": [
-              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
-            ]
-          }
+          "builder": "@angular/build:unit-test"
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
@@ -118,6 +99,7 @@
     }
   },
   "cli": {
+    "packageManager": "npm",
     "schematicCollections": [
       "angular-eslint"
     ]

From e037d87e1e41b5ebd20505ac034a475d48807944 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 17:32:05 +0100
Subject: [PATCH 16/52] chore: run npm i, update lock

---
 package-lock.json | 1169 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 978 insertions(+), 191 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ac76a3eb..5b3485b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "angular2-full-stack",
+  "name": "angular-full-stack",
   "version": "21.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "angular2-full-stack",
+      "name": "angular-full-stack",
       "version": "21.1.2",
       "license": "MIT",
       "dependencies": {
@@ -25,8 +25,7 @@
         "mongoose": "^8.16.0",
         "morgan": "^1.10.1",
         "rxjs": "~7.8.2",
-        "tslib": "^2.8.1",
-        "zone.js": "~0.16.0"
+        "tslib": "^2.8.1"
       },
       "devDependencies": {
         "@angular/build": "^21.1.2",
@@ -34,7 +33,6 @@
         "@angular/compiler-cli": "^21.1.2",
         "@types/bcryptjs": "^2.4.6",
         "@types/express": "^4.17.23",
-        "@types/jasmine": "~5.1.0",
         "@types/jest": "^30.0.0",
         "@types/jsonwebtoken": "^9.0.10",
         "@types/morgan": "^1.9.10",
@@ -45,24 +43,27 @@
         "eslint": "^9.39.2",
         "htmlhint": "^1.8.0",
         "husky": "^9.1.7",
-        "jasmine-core": "~5.2.0",
         "jest": "^30.2.0",
-        "karma": "~6.4.4",
-        "karma-chrome-launcher": "~3.2.0",
-        "karma-coverage": "~2.2.1",
-        "karma-jasmine": "~5.1.0",
-        "karma-jasmine-html-reporter": "^2.2.0",
+        "jsdom": "^27.1.0",
         "nodemon": "^3.1.11",
         "supertest": "^7.2.2",
         "ts-jest": "^29.4.6",
         "typescript": "~5.9.3",
-        "typescript-eslint": "^8.54.0"
+        "typescript-eslint": "^8.54.0",
+        "vitest": "^4.0.8"
       },
       "engines": {
         "node": ">=24",
         "npm": ">=10"
       }
     },
+    "node_modules/@acemir/cssom": {
+      "version": "0.9.31",
+      "resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.31.tgz",
+      "integrity": "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@algolia/abtesting": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.12.2.tgz",
@@ -1275,6 +1276,61 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.2.tgz",
+      "integrity": "sha512-NfBUvBaYgKIuq6E/RBLY1m0IohzNHAYyaJGuTK79Z23uNwmz2jl1mPsC5ZxCCxylinKhT1Amn5oNTlx1wN8cQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.0.0",
+        "@csstools/css-color-parser": "^4.0.1",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.2.5"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "11.2.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.5.tgz",
+      "integrity": "sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.7.8",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.7.8.tgz",
+      "integrity": "sha512-stisC1nULNc9oH5lakAj8MH88ZxeGxzyWNDfbdCxvJSJIvDsHNZqYvscGTgy/ysgXWLJPt6K/4t0/GjvtKcFJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.1.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.5"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
+      "version": "11.2.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.5.tgz",
+      "integrity": "sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@auth0/angular-jwt": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@auth0/angular-jwt/-/angular-jwt-5.2.0.tgz",
@@ -1843,10 +1899,145 @@
       "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.1.tgz",
+      "integrity": "sha512-NmXRccUJMk2AWA5A7e5a//3bCIMyOu2hAtdRYrhPPHjDxINuCwX1w6rnIZ4xjLcp0ayv6h8Pc3X0eJUGiAAXHQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.0.0.tgz",
+      "integrity": "sha512-q4d82GTl8BIlh/dTnVsWmxnbWJeb3kiU8eUH71UxlxnS+WIaALmtzTL8gR15PkYOexMQYVk0CO4qIG93C1IvPA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.0.1.tgz",
+      "integrity": "sha512-vYwO15eRBEkeF6xjAno/KQ61HacNhfQuuU/eGwH67DplL0zD5ZixUa563phQvUelA07yDczIXdtmYojCphKJcw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.0.1",
+        "@csstools/css-calc": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.26.tgz",
+      "integrity": "sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0"
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
@@ -2539,6 +2730,24 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.11.0.tgz",
+      "integrity": "sha512-wO3vd8nsEHdumsXrjGO/v4p6irbg7hy9kvIeR6i2AwylZSk4HJdWgL0FNaVquW1+AweJcdvU1IEpuIWk/WaPnA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@hono/node-server": {
       "version": "1.19.9",
       "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz",
@@ -6381,7 +6590,8 @@
       "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
       "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
@@ -6503,6 +6713,17 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -6517,7 +6738,8 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
       "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "node_modules/@types/cookiejar": {
       "version": "2.1.5",
@@ -6531,10 +6753,18 @@
       "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz",
       "integrity": "sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==",
       "dev": true,
+      "optional": true,
       "dependencies": {
         "@types/node": "*"
       }
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -6609,13 +6839,6 @@
         "@types/istanbul-lib-report": "*"
       }
     },
-    "node_modules/@types/jasmine": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.4.tgz",
-      "integrity": "sha512-px7OMFO/ncXxixDe1zR13V1iycqWae0MxTaw62RpFlksUi5QuNWgQJFkTQjIOvrmutJbI7Fp2Y2N1F6D2R4G6w==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/jest": {
       "version": "30.0.0",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-30.0.0.tgz",
@@ -6682,7 +6905,6 @@
       "integrity": "sha512-+0/4J266CBGPUq/ELg7QUHhN25WYjE0wYTPSQJn1xeu8DOlIOPxXxrNGiLmfAWl7HMMgWFWXpt9IDjMWrF5Iow==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -7442,6 +7664,117 @@
         "vite": "^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
+      "integrity": "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "chai": "^6.2.1",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.18.tgz",
+      "integrity": "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.0.18",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
+      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.18.tgz",
+      "integrity": "sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.0.18",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.18.tgz",
+      "integrity": "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.18",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz",
+      "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
+      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.18",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@yarnpkg/lockfile": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
@@ -7740,6 +8073,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/async": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
@@ -7931,6 +8274,7 @@
       "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
       "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
       "dev": true,
+      "optional": true,
       "engines": {
         "node": "^4.5.0 || >= 5.9"
       }
@@ -7989,6 +8333,16 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -8316,6 +8670,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chalk": {
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
@@ -8743,6 +9107,7 @@
       "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "debug": "2.6.9",
         "finalhandler": "1.1.2",
@@ -8759,6 +9124,7 @@
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "ms": "2.0.0"
       }
@@ -8769,6 +9135,7 @@
       "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "debug": "2.6.9",
         "encodeurl": "~1.0.2",
@@ -8787,7 +9154,8 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/connect/node_modules/on-finished": {
       "version": "2.3.0",
@@ -8795,6 +9163,7 @@
       "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -8808,6 +9177,7 @@
       "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8907,6 +9277,20 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/css-what": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-7.0.0.tgz",
@@ -8920,12 +9304,110 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/custom-event": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
+    "node_modules/cssstyle": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.7.tgz",
+      "integrity": "sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^4.1.1",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.21",
+        "css-tree": "^3.1.0",
+        "lru-cache": "^11.2.4"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cssstyle/node_modules/lru-cache": {
+      "version": "11.2.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.5.tgz",
+      "integrity": "sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/custom-event": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
       "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/data-urls": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-6.0.1.tgz",
+      "integrity": "sha512-euIQENZg6x8mj3fO6o9+fOW8MimUI4PpD/fZBhJfeioZVy9TUpM4UY7KjQNVZFlqwJ0UdzRDzkycB997HEq1BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^15.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/data-urls/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-15.1.0.tgz",
+      "integrity": "sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
     },
     "node_modules/date-format": {
       "version": "4.0.14",
@@ -8933,6 +9415,7 @@
       "integrity": "sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -8954,6 +9437,13 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dedent": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.1.tgz",
@@ -9052,7 +9542,8 @@
       "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
       "integrity": "sha512-uJaamHkagcZtHPqCIHZxnFrXlunQXgBOsZSUOWwFw31QJCAbyTBoHMW75YOTur5ZNx8pIeAKgf6GWIgaqqiLhA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/dom-serialize": {
       "version": "2.2.1",
@@ -9060,6 +9551,7 @@
       "integrity": "sha512-Yra4DbvoW7/Z6LBN560ZwXMjoNOSAN2wRsKFGc4iBeso+mpIA6qj1vfdf9HpMaKAqG6wXTy+1SYEzmNpKXOSsQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "custom-event": "~1.0.0",
         "ent": "~2.2.0",
@@ -9240,6 +9732,7 @@
       "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.2.tgz",
       "integrity": "sha512-gmNvsYi9C8iErnZdVcJnvCpSKbWTt1E8+JZo8b+daLninywUWi5NQ5STSHZ9rFjFO7imNcvb8Pc5pe/wMR5xEw==",
       "dev": true,
+      "optional": true,
       "dependencies": {
         "@types/cookie": "^0.4.1",
         "@types/cors": "^2.8.12",
@@ -9261,6 +9754,7 @@
       "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
       "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
       "dev": true,
+      "optional": true,
       "engines": {
         "node": ">=10.0.0"
       }
@@ -9270,6 +9764,7 @@
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
       "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
       "dev": true,
+      "optional": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -9280,6 +9775,7 @@
       "integrity": "sha512-QHuXVeZx9d+tIQAz/XztU0ZwZf2Agg9CcXcgE1rurqvdBeDBrpSwjl8/6XUqMg7tw2Y7uAdKb2sRv+bSEFqQ5A==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "punycode": "^1.4.1"
       },
@@ -9358,6 +9854,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -9769,6 +10272,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -9793,7 +10306,8 @@
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/eventsource": {
       "version": "3.0.7",
@@ -9870,6 +10384,16 @@
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/exponential-backoff": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.3.tgz",
@@ -9967,7 +10491,8 @@
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -10150,6 +10675,7 @@
         }
       ],
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -10604,6 +11130,19 @@
         "node": "20 || >=22"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -10835,6 +11374,7 @@
       "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
@@ -11163,6 +11703,13 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-promise": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
@@ -11202,6 +11749,7 @@
       "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">= 8.0.0"
       },
@@ -11281,21 +11829,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/istanbul-lib-source-maps": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
-      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^3.0.0",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/istanbul-reports": {
       "version": "3.1.7",
       "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
@@ -11326,14 +11859,6 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/jasmine-core": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.2.0.tgz",
-      "integrity": "sha512-tSAtdrvWybZkQmmaIoDgnvHG8ORUNw5kEVlO5CvrXj02Jjr9TZrmjFq7FUiOUzJiOP2wLGYT6PgrQgQF4R1xiw==",
-      "dev": true,
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/jest": {
       "version": "30.2.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-30.2.0.tgz",
@@ -12847,6 +13372,115 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/jsdom": {
+      "version": "27.4.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.4.0.tgz",
+      "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@acemir/cssom": "^0.9.28",
+        "@asamuzakjp/dom-selector": "^6.7.6",
+        "@exodus/bytes": "^1.6.0",
+        "cssstyle": "^5.3.4",
+        "data-urls": "^6.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "parse5": "^8.0.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.0",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^15.1.0",
+        "ws": "^8.18.3",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsdom/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/whatwg-url": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-15.1.0.tgz",
+      "integrity": "sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -13009,7 +13643,7 @@
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
+      "optional": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -13043,139 +13677,13 @@
         "node": ">= 10"
       }
     },
-    "node_modules/karma-chrome-launcher": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.2.0.tgz",
-      "integrity": "sha512-rE9RkUPI7I9mAxByQWkGJFXfFD6lE4gC5nPuZdobf/QdTEJI6EU4yIay/cfU/xV4ZxlM5JiTv7zWYgA64NpS5Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "which": "^1.2.1"
-      }
-    },
-    "node_modules/karma-chrome-launcher/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
-    "node_modules/karma-coverage": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/karma-coverage/-/karma-coverage-2.2.1.tgz",
-      "integrity": "sha512-yj7hbequkQP2qOSb20GuNSIyE//PgJWHwC2IydLE6XRtsnaflv+/OSGNssPjobYUlhVVagy99TQpqUt3vAUG7A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "istanbul-lib-coverage": "^3.2.0",
-        "istanbul-lib-instrument": "^5.1.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.1",
-        "istanbul-reports": "^3.0.5",
-        "minimatch": "^3.0.4"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/karma-coverage/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/karma-coverage/node_modules/istanbul-lib-instrument": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
-      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/core": "^7.12.3",
-        "@babel/parser": "^7.14.7",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-coverage": "^3.2.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/karma-coverage/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/karma-coverage/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/karma-jasmine": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-5.1.0.tgz",
-      "integrity": "sha512-i/zQLFrfEpRyQoJF9fsCdTMOF5c2dK7C7OmsuKg2D0YSsuZSfQDiLuaiktbuio6F2wiCsZSnSnieIQ0ant/uzQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "jasmine-core": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "karma": "^6.0.0"
-      }
-    },
-    "node_modules/karma-jasmine-html-reporter": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-2.2.0.tgz",
-      "integrity": "sha512-J0laEC43Oy2RdR5V5R3bqmdo7yRIYySq6XHKbA+e5iSAgLjhR1oICLGeSREPlJXpeyNcdJf3J17YcdhD0mRssQ==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "jasmine-core": "^4.0.0 || ^5.0.0 || ^6.0.0",
-        "karma": "^6.0.0",
-        "karma-jasmine": "^5.0.0"
-      }
-    },
-    "node_modules/karma-jasmine/node_modules/jasmine-core": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.6.1.tgz",
-      "integrity": "sha512-VYz/BjjmC3klLJlLwA4Kw8ytk0zDSmbbDLNs794VnWmkcCB7I9aAL/D48VNQtmITyPvea2C3jdUMfc3kAoy0PQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/karma/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -13192,6 +13700,7 @@
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -13203,6 +13712,7 @@
       "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
       "dev": true,
       "license": "ISC",
+      "optional": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.0",
@@ -13215,6 +13725,7 @@
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "license": "ISC",
+      "optional": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -13228,6 +13739,7 @@
       "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=14.14"
       }
@@ -13238,6 +13750,7 @@
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -13256,6 +13769,7 @@
       "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
@@ -13275,6 +13789,7 @@
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true,
       "license": "ISC",
+      "optional": true,
       "engines": {
         "node": ">=10"
       }
@@ -13467,7 +13982,8 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
@@ -13656,6 +14172,7 @@
       "integrity": "sha512-1somDdy9sChrr9/f4UlzhdaGfDR2c/SaD2a4T7qEkG4jTS57/B3qmnjLYePwQ8cqWnUHZI0iAKxMBpCZICiZ2g==",
       "dev": true,
       "license": "Apache-2.0",
+      "optional": true,
       "dependencies": {
         "date-format": "^4.0.14",
         "debug": "^4.3.4",
@@ -13762,6 +14279,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -14051,6 +14575,7 @@
       "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "minimist": "^1.2.6"
       },
@@ -14656,6 +15181,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -15077,6 +15613,13 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
       "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -15322,7 +15865,8 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
       "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/pure-rand": {
       "version": "7.0.1",
@@ -15347,6 +15891,7 @@
       "integrity": "sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=0.9"
       }
@@ -15455,7 +16000,8 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/resolve": {
       "version": "1.22.11",
@@ -15581,6 +16127,7 @@
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
       "license": "ISC",
+      "optional": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -15805,6 +16352,19 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@@ -16018,6 +16578,13 @@
       "integrity": "sha512-Rtlj66/b0ICeFzYTuNvX/EF1igRbbnGSvEyT79McoZa/DeGhMyC5pWKOEsZKnpkqtSeovd5FL/bjHWC3CIIvCQ==",
       "license": "MIT"
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -16115,6 +16682,7 @@
       "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.0.tgz",
       "integrity": "sha512-8U6BEgGjQOfGz3HHTYaC/L1GaxDCJ/KM0XTkJly0EhZ5U/du9uNEZy4ZgYzEzIqlx2CMm25CrCqr1ck899eLNA==",
       "dev": true,
+      "optional": true,
       "dependencies": {
         "accepts": "~1.3.4",
         "base64id": "~2.0.0",
@@ -16134,6 +16702,7 @@
       "integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "debug": "~4.3.4",
         "ws": "~8.17.1"
@@ -16145,6 +16714,7 @@
       "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.1"
@@ -16293,6 +16863,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -16302,6 +16879,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stdin-discarder": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.2.2.tgz",
@@ -16321,6 +16905,7 @@
       "integrity": "sha512-KFxaM7XT+irxvdqSP1LGLgNWbYN7ay5owZ3r/8t77p+EtSUAfUgtl7be3xtqtOmGUl9K9YPO2ca8133RlTjvKw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "date-format": "^4.0.14",
         "debug": "^4.3.4",
@@ -16336,6 +16921,7 @@
       "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^4.0.0",
@@ -16351,6 +16937,7 @@
       "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -16573,6 +17160,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/synckit": {
       "version": "0.11.12",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz",
@@ -16655,6 +17249,23 @@
         "node": "*"
       }
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -16672,6 +17283,36 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
+      "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.0.22",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.22.tgz",
+      "integrity": "sha512-nqpKFC53CgopKPjT6Wfb6tpIcZXHcI6G37hesvikhx0EmUGPkZrujRyAjgnmp1SHNgpQfKVanZ+KfpANFt2Hxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.0.22"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.0.22",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.22.tgz",
+      "integrity": "sha512-KgbTDC5wzlL6j/x6np6wCnDSMUq4kucHNm00KXPbfNzmllCmtmvtykJHfmgdHntwIeupW04y8s1N/43S1PkQDw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -16711,6 +17352,19 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.0.tgz",
+      "integrity": "sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tr46": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
@@ -16977,6 +17631,7 @@
         }
       ],
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": "*"
       }
@@ -17051,6 +17706,7 @@
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -17287,16 +17943,109 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.18.tgz",
+      "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vitest/expect": "4.0.18",
+        "@vitest/mocker": "4.0.18",
+        "@vitest/pretty-format": "4.0.18",
+        "@vitest/runner": "4.0.18",
+        "@vitest/snapshot": "4.0.18",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "es-module-lexer": "^1.7.0",
+        "expect-type": "^1.2.2",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.0.18",
+        "@vitest/browser-preview": "4.0.18",
+        "@vitest/browser-webdriverio": "4.0.18",
+        "@vitest/ui": "4.0.18",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
       "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -17338,6 +18087,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "14.2.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
@@ -17367,6 +18126,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -17490,6 +18266,7 @@
       "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -17513,6 +18290,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -17618,13 +18412,6 @@
       "peerDependencies": {
         "zod": "^3.25 || ^4"
       }
-    },
-    "node_modules/zone.js": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.16.0.tgz",
-      "integrity": "sha512-LqLPpIQANebrlxY6jKcYKdgN5DTXyyHAKnnWWjE5pPfEQ4n7j5zn7mOEEpwNZVKGqx3kKKmvplEmoBrvpgROTA==",
-      "license": "MIT",
-      "peer": true
     }
   }
 }

From 2766d54a1679fa2212a5c00419dd88d4fd7f84cc Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 17:47:18 +0100
Subject: [PATCH 17/52] test: replace app component spec with new one

---
 client/app/app.component.spec.ts | 70 --------------------------------
 client/app/app.spec.ts           | 31 ++++++++++++++
 tsconfig.spec.json               |  1 +
 3 files changed, 32 insertions(+), 70 deletions(-)
 delete mode 100644 client/app/app.component.spec.ts
 create mode 100644 client/app/app.spec.ts

diff --git a/client/app/app.component.spec.ts b/client/app/app.component.spec.ts
deleted file mode 100644
index 465b9300..00000000
--- a/client/app/app.component.spec.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { AuthService } from './services/auth.service';
-import { AppComponent } from './app.component';
-
-class AuthServiceMock { }
-
-describe('Component: App', () => {
-  let component: AppComponent;
-  let fixture: ComponentFixture<AppComponent>;
-  let authService: AuthService;
-  let compiled: HTMLElement;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [ RouterTestingModule ],
-      declarations: [ AppComponent ],
-      providers: [ { provide: AuthService, useClass: AuthServiceMock } ],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AppComponent);
-    component = fixture.componentInstance;
-    authService = fixture.debugElement.injector.get(AuthService);
-    fixture.detectChanges();
-    compiled = fixture.nativeElement as HTMLElement;
-  });
-
-  it('should create the app', waitForAsync(() => {
-    expect(component).toBeTruthy();
-  }));
-
-  it('should display the navigation bar correctly for guests', () => {
-    const elems = compiled.querySelectorAll('.nav-link');
-    expect(elems.length).toBe(4);
-    expect(elems[0].textContent).toContain('Home');
-    expect(elems[1].textContent).toContain('Cats');
-    expect(elems[2].textContent).toContain('Login');
-    expect(elems[3].textContent).toContain('Register');
-  });
-
-  it('should display the navigation bar correctly for logged users', () => {
-    authService.loggedIn = true;
-    authService.currentUser = { _id: '123', username: 'Tester', role: 'user' };
-    fixture.detectChanges();
-    const elems = compiled.querySelectorAll('.nav-link');
-    expect(elems.length).toBe(4);
-    expect(elems[0].textContent).toContain('Home');
-    expect(elems[1].textContent).toContain('Cats');
-    expect(elems[2].textContent).toContain('Account (Tester)');
-    expect(elems[3].textContent).toContain('Logout');
-  });
-
-  it('should display the navigation bar correctly for admin users', () => {
-    authService.loggedIn = true;
-    authService.isAdmin = true;
-    authService.currentUser = { _id: '123', username: 'Tester', role: 'admin' };
-    fixture.detectChanges();
-    const elems = compiled.querySelectorAll('.nav-link');
-    expect(elems.length).toBe(5);
-    expect(elems[0].textContent).toContain('Home');
-    expect(elems[1].textContent).toContain('Cats');
-    expect(elems[2].textContent).toContain('Account (Tester)');
-    expect(elems[3].textContent).toContain('Admin');
-    expect(elems[4].textContent).toContain('Logout');
-  });
-
-});
diff --git a/client/app/app.spec.ts b/client/app/app.spec.ts
new file mode 100644
index 00000000..ebe0e368
--- /dev/null
+++ b/client/app/app.spec.ts
@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
+
+import { App } from './app';
+import { UserService } from './services/user.service';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App, RouterTestingModule], // @todo replace deprecated
+      providers: [UserService, { provide: JWT_OPTIONS, useValue: {} }, JwtHelperService]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render nav links', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    const navLinks = compiled.querySelectorAll('.nav-link');
+    expect(navLinks[0]?.textContent).toContain('Home');
+    expect(navLinks[1]?.textContent).toContain('Cats');
+    // @todo test nav links if logged in or not
+  });
+});
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
index 395c813e..8a4972d6 100644
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -4,6 +4,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
+    "skipLibCheck": true,
     "types": [
       "vitest/globals"
     ]

From da27a546a5b07054e50d35ccb1554aaf417d7bb1 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 17:53:29 +0100
Subject: [PATCH 18/52] test: about component

---
 client/app/about/about.component.spec.ts | 37 +++++++++---------------
 1 file changed, 14 insertions(+), 23 deletions(-)

diff --git a/client/app/about/about.component.spec.ts b/client/app/about/about.component.spec.ts
index bca06c9c..93c34075 100644
--- a/client/app/about/about.component.spec.ts
+++ b/client/app/about/about.component.spec.ts
@@ -1,33 +1,24 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 
 import { AboutComponent } from './about.component';
 
 describe('Component: About', () => {
-  let component: AboutComponent;
-  let fixture: ComponentFixture<AboutComponent>;
-  let compiled: HTMLElement;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AboutComponent ]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AboutComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-    compiled = fixture.nativeElement as HTMLElement;
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
+      imports: [AboutComponent]
+    }).compileComponents();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should create the about component', () => {
+    const fixture = TestBed.createComponent(AboutComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
   });
 
-  it('should display the page header text', () => {
-    const header = compiled.querySelector('.card-header');
-    expect(header?.textContent).toContain('About');
+  it('should render the header', async () => {
+    const fixture = TestBed.createComponent(AboutComponent);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.card-header')?.textContent).toContain('About');
   });
-
 });

From a46bc2f7c14b935a68f9b818bce826114e20f5a8 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 18:10:24 +0100
Subject: [PATCH 19/52] test: refactor tests, add account component tests

---
 client/app/about/about.component.spec.ts     | 13 +++--
 client/app/account/account.component.spec.ts | 56 +++++++-------------
 client/app/app.spec.ts                       | 13 +++--
 3 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/client/app/about/about.component.spec.ts b/client/app/about/about.component.spec.ts
index 93c34075..56db3c28 100644
--- a/client/app/about/about.component.spec.ts
+++ b/client/app/about/about.component.spec.ts
@@ -1,24 +1,27 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AboutComponent } from './about.component';
 
 describe('Component: About', () => {
+  let fixture: ComponentFixture<AboutComponent>;
+  let compiled: HTMLElement;
+  
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       imports: [AboutComponent]
     }).compileComponents();
+
+    fixture = TestBed.createComponent(AboutComponent);
+    await fixture.whenStable();
+    compiled = fixture.nativeElement as HTMLElement;
   });
 
   it('should create the about component', () => {
-    const fixture = TestBed.createComponent(AboutComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it('should render the header', async () => {
-    const fixture = TestBed.createComponent(AboutComponent);
-    await fixture.whenStable();
-    const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('.card-header')?.textContent).toContain('About');
   });
 });
diff --git a/client/app/account/account.component.spec.ts b/client/app/account/account.component.spec.ts
index 60bcc3f6..f84037f6 100644
--- a/client/app/account/account.component.spec.ts
+++ b/client/app/account/account.component.spec.ts
@@ -1,15 +1,12 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { JWT_OPTIONS, JwtHelperService } from '@auth0/angular-jwt';
+import { Observable, of } from 'rxjs';
 
-import { ToastComponent } from '../shared/toast/toast.component';
-import { User } from '../shared/models/user.model';
+import { AccountComponent } from './account.component';
 import { AuthService } from '../services/auth.service';
 import { UserService } from '../services/user.service';
-import { AccountComponent } from './account.component';
-import { of, Observable } from 'rxjs';
-
-class AuthServiceMock { }
+import { ToastComponent } from '../shared/toast/toast.component';
+import { User } from '../shared/models/user.model';
 
 class UserServiceMock {
   mockUser = {
@@ -23,56 +20,43 @@ class UserServiceMock {
 }
 
 describe('Component: Account', () => {
-  let component: AccountComponent;
   let fixture: ComponentFixture<AccountComponent>;
   let compiled: HTMLElement;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [ FormsModule ],
-      declarations: [ AccountComponent ],
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
+      imports: [AccountComponent],
       providers: [
+        AuthService,
         ToastComponent,
-        { provide: AuthService, useClass: AuthServiceMock },
         { provide: UserService, useClass: UserServiceMock },
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
+        { provide: JWT_OPTIONS, useValue: {} }, JwtHelperService
+      ]
+    }).compileComponents();
+    
     fixture = TestBed.createComponent(AccountComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-    component.user = {
-      username: 'Test user',
-      email: 'test@example.com'
-    };
-    fixture.detectChanges();
     compiled = fixture.nativeElement as HTMLElement;
+    await fixture.whenStable();
   });
 
-  it('should create', () => {
+  it('should create the account component', () => {
+    const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
 
-  it('should display the page header text', () => {
-    const header = compiled.querySelector('.card-header');
-    expect(header?.textContent).toContain('Account settings');
+  it('should render the header', async () => {
+    expect(compiled.querySelector('.card-header')?.textContent).toContain('Account settings');
   });
 
   it('should display the username and email inputs filled', async () => {
-    await fixture.whenStable();
     const inputs = compiled.querySelectorAll('input');
     expect(inputs[0].value).toContain('Test user');
     expect(inputs[1].value).toContain('test@example.com');
   });
 
-  it('should display the save button enabled', () => {
+  it('should display the save button enabled', async () => {
     const button = compiled.querySelector('button');
     expect(button).toBeTruthy();
     expect(button?.disabled).toBeFalsy();
   });
-
 });
diff --git a/client/app/app.spec.ts b/client/app/app.spec.ts
index ebe0e368..ae3d523e 100644
--- a/client/app/app.spec.ts
+++ b/client/app/app.spec.ts
@@ -1,4 +1,4 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
 
@@ -6,23 +6,26 @@ import { App } from './app';
 import { UserService } from './services/user.service';
 
 describe('App', () => {
+  let fixture: ComponentFixture<App>;
+  let compiled: HTMLElement;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App, RouterTestingModule], // @todo replace deprecated
       providers: [UserService, { provide: JWT_OPTIONS, useValue: {} }, JwtHelperService]
     }).compileComponents();
+
+    fixture = TestBed.createComponent(App);
+    compiled = fixture.nativeElement as HTMLElement;
+    await fixture.whenStable();
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it('should render nav links', async () => {
-    const fixture = TestBed.createComponent(App);
-    await fixture.whenStable();
-    const compiled = fixture.nativeElement as HTMLElement;
     const navLinks = compiled.querySelectorAll('.nav-link');
     expect(navLinks[0]?.textContent).toContain('Home');
     expect(navLinks[1]?.textContent).toContain('Cats');

From 5e60ce9edc872299dccea9321249ef6f9db809d6 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 18:13:08 +0100
Subject: [PATCH 20/52] test: add cat form tests

---
 .../add-cat-form.component.spec.ts            | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/client/app/add-cat-form/add-cat-form.component.spec.ts b/client/app/add-cat-form/add-cat-form.component.spec.ts
index 50b42b51..236541be 100644
--- a/client/app/add-cat-form/add-cat-form.component.spec.ts
+++ b/client/app/add-cat-form/add-cat-form.component.spec.ts
@@ -1,28 +1,21 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
 
 import { ToastComponent } from '../shared/toast/toast.component';
 import { CatService } from '../services/cat.service';
 import { AddCatFormComponent } from './add-cat-form.component';
 
-class CatServiceMock { }
-
 describe('Component: AddCatForm', () => {
   let component: AddCatFormComponent;
   let fixture: ComponentFixture<AddCatFormComponent>;
   let compiled: HTMLElement;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
-      imports: [FormsModule, ReactiveFormsModule],
-      declarations: [ AddCatFormComponent ],
-      providers: [
-        ToastComponent, UntypedFormBuilder,
-        { provide: CatService, useClass: CatServiceMock }
-      ]
-    })
-      .compileComponents();
-  }));
+      imports: [AddCatFormComponent, FormsModule, ReactiveFormsModule],
+      providers: [ToastComponent, UntypedFormBuilder, CatService]
+    }).compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AddCatFormComponent);

From ceee08d81e768a70800c27c07dc7b67d371631aa Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 18:14:49 +0100
Subject: [PATCH 21/52] test: admin tests

---
 client/app/admin/admin.component.spec.ts | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/client/app/admin/admin.component.spec.ts b/client/app/admin/admin.component.spec.ts
index 55d6348d..67fe49e8 100644
--- a/client/app/admin/admin.component.spec.ts
+++ b/client/app/admin/admin.component.spec.ts
@@ -1,5 +1,4 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ToastComponent } from '../shared/toast/toast.component';
 import { AuthService } from '../services/auth.service';
@@ -26,18 +25,16 @@ describe('Component: Admin', () => {
   let fixture: ComponentFixture<AdminComponent>;
   let compiled: HTMLElement;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
-      declarations: [ AdminComponent ],
+      imports: [AdminComponent],
       providers: [
         ToastComponent,
         { provide: AuthService, useClass: AuthServiceMock },
         { provide: UserService, useClass: UserServiceMock },
       ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-      .compileComponents();
-  }));
+    }).compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AdminComponent);
@@ -56,7 +53,7 @@ describe('Component: Admin', () => {
   });
 
   it('should display the text for no users', () => {
-    component.users = [];
+    component.users.set([]);
     fixture.detectChanges();
     const header = compiled.querySelector('h4');
     expect(header?.textContent).toContain('Registered users (0)');

From f67f60e148a4ba0d2c190136f58599208b8dfa33 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 18:16:16 +0100
Subject: [PATCH 22/52] test: cats tests

---
 client/app/cats/cats.component.spec.ts | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/client/app/cats/cats.component.spec.ts b/client/app/cats/cats.component.spec.ts
index a61c8564..e208d727 100644
--- a/client/app/cats/cats.component.spec.ts
+++ b/client/app/cats/cats.component.spec.ts
@@ -1,5 +1,4 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { waitForAsync, TestBed, ComponentFixture } from '@angular/core/testing';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FormsModule, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 
@@ -23,18 +22,15 @@ describe('Component: Cats', () => {
   let fixture: ComponentFixture<CatsComponent>;
   let compiled: HTMLElement;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
-      imports: [ RouterTestingModule, FormsModule, ReactiveFormsModule ],
-      declarations: [ CatsComponent ],
+      imports: [CatsComponent, RouterTestingModule, FormsModule, ReactiveFormsModule],
       providers: [
         ToastComponent, UntypedFormBuilder,
         { provide: CatService, useClass: CatServiceMock }
       ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    })
-      .compileComponents();
-  }));
+    }).compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CatsComponent);
@@ -53,7 +49,7 @@ describe('Component: Cats', () => {
   });
 
   it('should display the text for no cats', () => {
-    component.cats = [];
+    component.cats.set([]);
     fixture.detectChanges();
     const header = compiled.querySelector('.card-header');
     expect(header?.textContent).toContain('Current cats (0)');
@@ -81,8 +77,8 @@ describe('Component: Cats', () => {
   });
 
   it('should display the edit form', async () => {
-    component.isEditing = true;
-    component.cat = { name: 'Cat 1', age: 1, weight: 2 };
+    component.isEditing.set(true);
+    component.cat.set({ name: 'Cat 1', age: 1, weight: 2 });
     fixture.detectChanges();
     await fixture.whenStable();
     const tds = compiled.querySelectorAll('td');

From c1a98d40fab64b005ba651243c022ad5e43ccfc2 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 18:18:24 +0100
Subject: [PATCH 23/52] test: login tests

---
 client/app/login/login.component.spec.ts | 28 ++++++++++--------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/client/app/login/login.component.spec.ts b/client/app/login/login.component.spec.ts
index 4b3c63af..ffabe0e1 100644
--- a/client/app/login/login.component.spec.ts
+++ b/client/app/login/login.component.spec.ts
@@ -1,33 +1,29 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
 
 import { ToastComponent } from '../shared/toast/toast.component';
 import { AuthService } from '../services/auth.service';
 import { LoginComponent } from './login.component';
-
-class AuthServiceMock { }
-class RouterMock { }
+import { UserService } from '../services/user.service';
+import { JWT_OPTIONS, JwtHelperService } from '@auth0/angular-jwt';
 
 describe('Component: Login', () => {
   let component: LoginComponent;
   let fixture: ComponentFixture<LoginComponent>;
   let compiled: HTMLElement;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
-      imports: [ FormsModule, ReactiveFormsModule ],
-      declarations: [ LoginComponent ],
+      imports: [LoginComponent, FormsModule, ReactiveFormsModule],
       providers: [
-        UntypedFormBuilder, ToastComponent,
-        { provide: Router, useClass: RouterMock },
-        { provide: AuthService, useClass: AuthServiceMock }
+        UntypedFormBuilder,
+        ToastComponent,
+        AuthService,
+        UserService,
+        JwtHelperService, { provide: JWT_OPTIONS, useValue: {} }
       ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-      .compileComponents();
-  }));
+    }).compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LoginComponent);

From 18b32fb6a7f8db301d8fdbb2a456479ac4f8f6f7 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 18:23:45 +0100
Subject: [PATCH 24/52] test: one beforeEach

---
 .../add-cat-form/add-cat-form.component.spec.ts |  4 +---
 client/app/admin/admin.component.spec.ts        |  4 +---
 client/app/cats/cats.component.spec.ts          |  7 ++-----
 client/app/login/login.component.spec.ts        |  4 +---
 client/app/logout/logout.component.spec.ts      | 17 +++++++----------
 .../app/not-found/not-found.component.spec.ts   | 13 +++++--------
 6 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/client/app/add-cat-form/add-cat-form.component.spec.ts b/client/app/add-cat-form/add-cat-form.component.spec.ts
index 236541be..e63798bd 100644
--- a/client/app/add-cat-form/add-cat-form.component.spec.ts
+++ b/client/app/add-cat-form/add-cat-form.component.spec.ts
@@ -15,12 +15,10 @@ describe('Component: AddCatForm', () => {
       imports: [AddCatFormComponent, FormsModule, ReactiveFormsModule],
       providers: [ToastComponent, UntypedFormBuilder, CatService]
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(AddCatFormComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    await fixture.whenStable();
     compiled = fixture.nativeElement as HTMLElement;
   });
 
diff --git a/client/app/admin/admin.component.spec.ts b/client/app/admin/admin.component.spec.ts
index 67fe49e8..67716dfe 100644
--- a/client/app/admin/admin.component.spec.ts
+++ b/client/app/admin/admin.component.spec.ts
@@ -34,12 +34,10 @@ describe('Component: Admin', () => {
         { provide: UserService, useClass: UserServiceMock },
       ],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(AdminComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    await fixture.whenStable();
     compiled = fixture.nativeElement as HTMLElement;
   });
 
diff --git a/client/app/cats/cats.component.spec.ts b/client/app/cats/cats.component.spec.ts
index e208d727..32513f85 100644
--- a/client/app/cats/cats.component.spec.ts
+++ b/client/app/cats/cats.component.spec.ts
@@ -30,12 +30,10 @@ describe('Component: Cats', () => {
         { provide: CatService, useClass: CatServiceMock }
       ],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(CatsComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    await fixture.whenStable();
     compiled = fixture.nativeElement as HTMLElement;
   });
 
@@ -48,7 +46,7 @@ describe('Component: Cats', () => {
     expect(header?.textContent).toContain('Current cats (2)');
   });
 
-  it('should display the text for no cats', () => {
+  it('should display the text for no cats', async () => {
     component.cats.set([]);
     fixture.detectChanges();
     const header = compiled.querySelector('.card-header');
@@ -79,7 +77,6 @@ describe('Component: Cats', () => {
   it('should display the edit form', async () => {
     component.isEditing.set(true);
     component.cat.set({ name: 'Cat 1', age: 1, weight: 2 });
-    fixture.detectChanges();
     await fixture.whenStable();
     const tds = compiled.querySelectorAll('td');
     expect(tds.length).toBe(1);
diff --git a/client/app/login/login.component.spec.ts b/client/app/login/login.component.spec.ts
index ffabe0e1..729c760e 100644
--- a/client/app/login/login.component.spec.ts
+++ b/client/app/login/login.component.spec.ts
@@ -23,12 +23,10 @@ describe('Component: Login', () => {
         JwtHelperService, { provide: JWT_OPTIONS, useValue: {} }
       ],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(LoginComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    await fixture.whenStable();
     compiled = fixture.nativeElement as HTMLElement;
   });
 
diff --git a/client/app/logout/logout.component.spec.ts b/client/app/logout/logout.component.spec.ts
index 98784514..67e76d27 100644
--- a/client/app/logout/logout.component.spec.ts
+++ b/client/app/logout/logout.component.spec.ts
@@ -1,4 +1,4 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AuthService } from '../services/auth.service';
 import { LogoutComponent } from './logout.component';
@@ -15,19 +15,16 @@ describe('Component: Logout', () => {
   let fixture: ComponentFixture<LogoutComponent>;
   let authService: AuthService;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ LogoutComponent ],
-      providers: [ { provide: AuthService, useClass: AuthServiceMock } ],
-    })
-      .compileComponents();
-  }));
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
+      imports: [LogoutComponent],
+      providers: [{ provide: AuthService, useClass: AuthServiceMock }],
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(LogoutComponent);
     component = fixture.componentInstance;
     authService = fixture.debugElement.injector.get(AuthService);
-    fixture.detectChanges();
+    await fixture.whenStable();
   });
 
   it('should create', () => {
diff --git a/client/app/not-found/not-found.component.spec.ts b/client/app/not-found/not-found.component.spec.ts
index fa10f270..aab2423a 100644
--- a/client/app/not-found/not-found.component.spec.ts
+++ b/client/app/not-found/not-found.component.spec.ts
@@ -1,4 +1,4 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NotFoundComponent } from './not-found.component';
 
@@ -7,17 +7,14 @@ describe('Component: NotFound', () => {
   let fixture: ComponentFixture<NotFoundComponent>;
   let compiled: HTMLElement;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [ NotFoundComponent ]
-    })
-      .compileComponents();
-  }));
+      imports: [NotFoundComponent]
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(NotFoundComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    await fixture.whenStable();
     compiled = fixture.nativeElement as HTMLElement;
   });
 

From 88551c9aed23f30ef5b945c90d601aa7ad627901 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 18:25:22 +0100
Subject: [PATCH 25/52] test: register tests

---
 .../app/register/register.component.spec.ts   | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/client/app/register/register.component.spec.ts b/client/app/register/register.component.spec.ts
index 4cc72322..1b5f66aa 100644
--- a/client/app/register/register.component.spec.ts
+++ b/client/app/register/register.component.spec.ts
@@ -1,13 +1,10 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
 
 import { ToastComponent } from '../shared/toast/toast.component';
 import { UserService } from '../services/user.service';
 import { RegisterComponent } from './register.component';
 
-class RouterMock { }
 class UserServiceMock { }
 
 describe('Component: Register', () => {
@@ -15,19 +12,15 @@ describe('Component: Register', () => {
   let fixture: ComponentFixture<RegisterComponent>;
   let compiled: HTMLElement;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
-      imports: [ FormsModule, ReactiveFormsModule ],
-      declarations: [ RegisterComponent ],
+      imports: [RegisterComponent, FormsModule, ReactiveFormsModule],
       providers: [
         ToastComponent,
-        { provide: Router, useClass: RouterMock },
         { provide: UserService, useClass: UserServiceMock }
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-      .compileComponents();
-  }));
+      ]
+    }).compileComponents();
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RegisterComponent);

From 272d1976c346c2cff7ce6d49f5f12607611a1959 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 18:44:25 +0100
Subject: [PATCH 26/52] fix: add missing await on testbed

---
 client/app/add-cat-form/add-cat-form.component.spec.ts | 2 +-
 client/app/admin/admin.component.spec.ts               | 2 +-
 client/app/cats/cats.component.spec.ts                 | 2 +-
 client/app/login/login.component.spec.ts               | 2 +-
 client/app/not-found/not-found.component.spec.ts       | 2 +-
 client/app/register/register.component.spec.ts         | 4 +---
 6 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/app/add-cat-form/add-cat-form.component.spec.ts b/client/app/add-cat-form/add-cat-form.component.spec.ts
index e63798bd..3bee5ed6 100644
--- a/client/app/add-cat-form/add-cat-form.component.spec.ts
+++ b/client/app/add-cat-form/add-cat-form.component.spec.ts
@@ -11,7 +11,7 @@ describe('Component: AddCatForm', () => {
   let compiled: HTMLElement;
 
   beforeEach(async() => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [AddCatFormComponent, FormsModule, ReactiveFormsModule],
       providers: [ToastComponent, UntypedFormBuilder, CatService]
     }).compileComponents();
diff --git a/client/app/admin/admin.component.spec.ts b/client/app/admin/admin.component.spec.ts
index 67716dfe..b508949c 100644
--- a/client/app/admin/admin.component.spec.ts
+++ b/client/app/admin/admin.component.spec.ts
@@ -26,7 +26,7 @@ describe('Component: Admin', () => {
   let compiled: HTMLElement;
 
   beforeEach(async() => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [AdminComponent],
       providers: [
         ToastComponent,
diff --git a/client/app/cats/cats.component.spec.ts b/client/app/cats/cats.component.spec.ts
index 32513f85..1ce126a3 100644
--- a/client/app/cats/cats.component.spec.ts
+++ b/client/app/cats/cats.component.spec.ts
@@ -23,7 +23,7 @@ describe('Component: Cats', () => {
   let compiled: HTMLElement;
 
   beforeEach(async() => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [CatsComponent, RouterTestingModule, FormsModule, ReactiveFormsModule],
       providers: [
         ToastComponent, UntypedFormBuilder,
diff --git a/client/app/login/login.component.spec.ts b/client/app/login/login.component.spec.ts
index 729c760e..4d024f40 100644
--- a/client/app/login/login.component.spec.ts
+++ b/client/app/login/login.component.spec.ts
@@ -13,7 +13,7 @@ describe('Component: Login', () => {
   let compiled: HTMLElement;
 
   beforeEach(async() => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [LoginComponent, FormsModule, ReactiveFormsModule],
       providers: [
         UntypedFormBuilder,
diff --git a/client/app/not-found/not-found.component.spec.ts b/client/app/not-found/not-found.component.spec.ts
index aab2423a..dbe76d7a 100644
--- a/client/app/not-found/not-found.component.spec.ts
+++ b/client/app/not-found/not-found.component.spec.ts
@@ -8,7 +8,7 @@ describe('Component: NotFound', () => {
   let compiled: HTMLElement;
 
   beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [NotFoundComponent]
     }).compileComponents();
 
diff --git a/client/app/register/register.component.spec.ts b/client/app/register/register.component.spec.ts
index 1b5f66aa..63162da8 100644
--- a/client/app/register/register.component.spec.ts
+++ b/client/app/register/register.component.spec.ts
@@ -13,16 +13,14 @@ describe('Component: Register', () => {
   let compiled: HTMLElement;
 
   beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
       imports: [RegisterComponent, FormsModule, ReactiveFormsModule],
       providers: [
         ToastComponent,
         { provide: UserService, useClass: UserServiceMock }
       ]
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(RegisterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

From 6e62e2e3c0e0c734aeaa47e7d9c12b097a3d2d8b Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 19:04:21 +0100
Subject: [PATCH 27/52] fix: toast component not showing correctly

---
 client/app/account/account.component.html     |  2 +-
 client/app/admin/admin.component.html         |  2 +-
 client/app/cats/cats.component.html           |  2 +-
 client/app/login/login.component.html         |  2 +-
 client/app/register/register.component.html   |  2 +-
 client/app/shared/toast/toast.component.html  | 10 +++----
 .../app/shared/toast/toast.component.spec.ts  | 26 ++++++++-----------
 client/app/shared/toast/toast.component.ts    | 24 +++++++++++++----
 8 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/client/app/account/account.component.html b/client/app/account/account.component.html
index 72046690..7cc3ab48 100644
--- a/client/app/account/account.component.html
+++ b/client/app/account/account.component.html
@@ -1,6 +1,6 @@
 <app-loading [condition]="isLoading()"></app-loading>
 
-<app-toast [message]="toast.message()"></app-toast>
+<app-toast [message]="toast.displayedMessage()"></app-toast>
 
 @if (!isLoading()) {
   <div class="card">
diff --git a/client/app/admin/admin.component.html b/client/app/admin/admin.component.html
index e7b1464f..b6651daa 100644
--- a/client/app/admin/admin.component.html
+++ b/client/app/admin/admin.component.html
@@ -1,6 +1,6 @@
 <app-loading [condition]="isLoading()"></app-loading>
 
-<app-toast [message]="toast.message()"></app-toast>
+<app-toast [message]="toast.displayedMessage()"></app-toast>
 
 @if (!isLoading()) {
   <div class="card">
diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index 11c3fe42..ba4e82c0 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -1,6 +1,6 @@
 <app-loading [condition]="isLoading()"></app-loading>
 
-<app-toast [message]="toast.message()"></app-toast>
+<app-toast [message]="toast.displayedMessage()"></app-toast>
 
 @if (!isLoading()) {
   <div class="card mb-3">
diff --git a/client/app/login/login.component.html b/client/app/login/login.component.html
index b499727d..45c2de0d 100644
--- a/client/app/login/login.component.html
+++ b/client/app/login/login.component.html
@@ -1,4 +1,4 @@
-<app-toast [message]="toast.message()"></app-toast>
+<app-toast [message]="toast.displayedMessage()"></app-toast>
 
 <div class="card">
   <h4 class="card-header">Login</h4>
diff --git a/client/app/register/register.component.html b/client/app/register/register.component.html
index ad077858..6081be20 100644
--- a/client/app/register/register.component.html
+++ b/client/app/register/register.component.html
@@ -1,4 +1,4 @@
-<app-toast [message]="toast.message()"></app-toast>
+<app-toast [message]="toast.displayedMessage()"></app-toast>
 
 <div class="card">
   <h4 class="card-header">Register</h4>
diff --git a/client/app/shared/toast/toast.component.html b/client/app/shared/toast/toast.component.html
index 462c358b..308882e8 100644
--- a/client/app/shared/toast/toast.component.html
+++ b/client/app/shared/toast/toast.component.html
@@ -1,9 +1,9 @@
-@if (message().body) {
-  <div class="alert" [ngClass]="'alert-' + message().type" role="alert">
+@if (displayedMessage().body) {
+  <div class="alert" [ngClass]="'alert-' + displayedMessage().type" role="alert">
   <i class="fa me-2" [ngClass]="{
-    'fa-check-circle': message().type === 'success',
-    'fa-exclamation-circle': message().type === 'warning' || message().type === 'danger'
+    'fa-check-circle': displayedMessage().type === 'success',
+    'fa-exclamation-circle': displayedMessage().type === 'warning' || displayedMessage().type === 'danger'
   }"></i>
-    <span [innerHTML]="message().body"></span>
+    <span [innerHTML]="displayedMessage().body"></span>
   </div>
 }
\ No newline at end of file
diff --git a/client/app/shared/toast/toast.component.spec.ts b/client/app/shared/toast/toast.component.spec.ts
index 815dc505..99c000bf 100644
--- a/client/app/shared/toast/toast.component.spec.ts
+++ b/client/app/shared/toast/toast.component.spec.ts
@@ -1,5 +1,4 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ToastComponent } from './toast.component';
 
@@ -8,18 +7,15 @@ describe('Component: Toast', () => {
   let fixture: ComponentFixture<ToastComponent>;
   let compiled: HTMLElement;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ToastComponent ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-      .compileComponents();
-  }));
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ToastComponent],
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(ToastComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    await fixture.whenStable();
     compiled = fixture.nativeElement as HTMLElement;
   });
 
@@ -28,20 +24,20 @@ describe('Component: Toast', () => {
   });
 
   it('should not have message set nor DOM element', () => {
-    expect(component.message.body).toBeFalsy();
-    expect(component.message.type).toBeFalsy();
+    expect(component.displayedMessage().body).toBeFalsy();
+    expect(component.displayedMessage().type).toBeFalsy();
     const div = compiled.querySelector('div');
     expect(div).toBeNull();
   });
 
-  it('should set the message and create the DOM element', () => {
+  it('should set the message and create the DOM element', async () => {
     const mockMessage = {
       body: 'test message',
       type: 'warning'
     };
     component.setMessage(mockMessage.body, mockMessage.type);
-    expect(component.message.body).toBe(mockMessage.body);
-    expect(component.message.type).toBe(mockMessage.type);
+    expect(component.displayedMessage().body).toBe(mockMessage.body);
+    expect(component.displayedMessage().type).toBe(mockMessage.type);
     fixture.detectChanges();
     const div = compiled.querySelector('div');
     expect(div).toBeDefined();
diff --git a/client/app/shared/toast/toast.component.ts b/client/app/shared/toast/toast.component.ts
index 6dc6bbbe..74a63f6d 100644
--- a/client/app/shared/toast/toast.component.ts
+++ b/client/app/shared/toast/toast.component.ts
@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { Component, input, signal, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -8,15 +8,29 @@ import { CommonModule } from '@angular/common';
   imports: [CommonModule],
 })
 export class ToastComponent {
-  message = input({ body: '', type: '' });
+  // input value when the component is used in a template: <app-toast [message]="...">
+  message = input<{ body: string; type: string }>({ body: '', type: '' });
+
+  // local writable signal representing the currently displayed message.
+  private _localMessage = signal<{ body: string; type: string }>({ body: '', type: '' });
+  // public accessor used by templates to read the displayed message
+  displayedMessage = () => this._localMessage();
+
   existingTimeout = 0;
 
+  constructor() {
+    // Keep local message in sync with any parent-provided input value.
+    effect(() => {
+      this._localMessage.set(this.message());
+    });
+  }
+
+  // API used by other parts of the app (they inject the ToastComponent as a service)
   setMessage(body: string, type: string, time = 3000): void {
     if (this.existingTimeout) {
       clearTimeout(this.existingTimeout);
     }
-    this.message().body = body;
-    this.message().type = type;
-    this.existingTimeout = window.setTimeout(() => this.message().body = '', time);
+    this._localMessage.set({ body, type });
+    this.existingTimeout = window.setTimeout(() => this._localMessage.set({ body: '', type: '' }), time);
   }
 }

From 4cd7a106249b31c1081b6d5a276411d794e1e678 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 19:18:49 +0100
Subject: [PATCH 28/52] test: loading component

---
 .../app/shared/loading/loading.component.html |  2 +-
 .../shared/loading/loading.component.spec.ts  | 19 +++++++------------
 .../app/shared/loading/loading.component.ts   | 18 +++++++++++++++++-
 client/app/shared/toast/toast.component.ts    |  5 ++---
 4 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/client/app/shared/loading/loading.component.html b/client/app/shared/loading/loading.component.html
index 5d2341f5..15170e11 100644
--- a/client/app/shared/loading/loading.component.html
+++ b/client/app/shared/loading/loading.component.html
@@ -1,4 +1,4 @@
-@if (condition()) {
+@if (displayedCondition()) {
   <div class="card">
     <h4 class="card-header">Loading...</h4>
     <div class="card-body text-xs-center">
diff --git a/client/app/shared/loading/loading.component.spec.ts b/client/app/shared/loading/loading.component.spec.ts
index 5583afda..658b7e8a 100644
--- a/client/app/shared/loading/loading.component.spec.ts
+++ b/client/app/shared/loading/loading.component.spec.ts
@@ -1,5 +1,4 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LoadingComponent } from './loading.component';
 
@@ -8,18 +7,14 @@ describe('Component: Loading', () => {
   let fixture: ComponentFixture<LoadingComponent>;
   let compiled: HTMLElement;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ LoadingComponent ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-      .compileComponents();
-  }));
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
+      imports: [LoadingComponent],
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(LoadingComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    await fixture.whenStable();
     compiled = fixture.nativeElement as HTMLElement;
   });
 
@@ -33,7 +28,7 @@ describe('Component: Loading', () => {
   });
 
   it('should show the DOM element', () => {
-    component.condition = true;
+    component.localCondition.set(true);
     fixture.detectChanges();
     expect(component).toBeTruthy();
     const div = compiled.querySelector('div');
diff --git a/client/app/shared/loading/loading.component.ts b/client/app/shared/loading/loading.component.ts
index ffdf76ad..b9271a13 100644
--- a/client/app/shared/loading/loading.component.ts
+++ b/client/app/shared/loading/loading.component.ts
@@ -1,9 +1,25 @@
-import { Component, input } from '@angular/core';
+import { Component, input, signal, effect } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-loading',
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './loading.component.html',
 })
 export class LoadingComponent {
+  // input value when the component is used in a template
   condition = input<boolean>(false);
+  // local writable signal the template reads from (public so tests can set it)
+  localCondition = signal<boolean>(false);
+  // public accessor used by templates to read the displayed message
+  displayedCondition = () => this.localCondition();
+  
+  constructor() {
+    // Keep local message in sync with any parent-provided input value
+    effect(() => {
+      this.localCondition.set(this.condition());
+    });
+  }
+
 }
diff --git a/client/app/shared/toast/toast.component.ts b/client/app/shared/toast/toast.component.ts
index 74a63f6d..532c7475 100644
--- a/client/app/shared/toast/toast.component.ts
+++ b/client/app/shared/toast/toast.component.ts
@@ -8,9 +8,8 @@ import { CommonModule } from '@angular/common';
   imports: [CommonModule],
 })
 export class ToastComponent {
-  // input value when the component is used in a template: <app-toast [message]="...">
+  // input value when the component is used in a template
   message = input<{ body: string; type: string }>({ body: '', type: '' });
-
   // local writable signal representing the currently displayed message.
   private _localMessage = signal<{ body: string; type: string }>({ body: '', type: '' });
   // public accessor used by templates to read the displayed message
@@ -19,7 +18,7 @@ export class ToastComponent {
   existingTimeout = 0;
 
   constructor() {
-    // Keep local message in sync with any parent-provided input value.
+    // Keep local message in sync with any parent-provided input value
     effect(() => {
       this._localMessage.set(this.message());
     });

From 18c5d1e93f8e12b843d39da2e14f652fd1d2b23b Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 19:20:39 +0100
Subject: [PATCH 29/52] ci: update test cmd

---
 .github/workflows/tests.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 20e77ca9..b744da89 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -22,5 +22,5 @@ jobs:
         node-version: '24'
         cache: 'npm'
     - run: npm ci
-    - run: npm run test -- --watch=false --progress=false --browsers=ChromeHeadless
+    - run: npm run test -- --watch=false
     - run: npm run test:be
\ No newline at end of file

From 9655110ecbc4e6dc83617d68f55a5d9717b4d711 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 19:22:38 +0100
Subject: [PATCH 30/52] chore: remove agents.md, leave copilot istructions

---
 AGENTS.md | 56 -------------------------------------------------------
 1 file changed, 56 deletions(-)
 delete mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
deleted file mode 100644
index 34c3b360..00000000
--- a/AGENTS.md
+++ /dev/null
@@ -1,56 +0,0 @@
-
-You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
-
-## TypeScript Best Practices
-
-- Use strict type checking
-- Prefer type inference when the type is obvious
-- Avoid the `any` type; use `unknown` when type is uncertain
-
-## Angular Best Practices
-
-- Always use standalone components over NgModules
-- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
-- Use signals for state management
-- Implement lazy loading for feature routes
-- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
-- Use `NgOptimizedImage` for all static images.
-  - `NgOptimizedImage` does not work for inline base64 images.
-
-## Accessibility Requirements
-
-- It MUST pass all AXE checks.
-- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
-
-### Components
-
-- Keep components small and focused on a single responsibility
-- Use `input()` and `output()` functions instead of decorators
-- Use `computed()` for derived state
-- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
-- Prefer inline templates for small components
-- Prefer Reactive forms instead of Template-driven ones
-- Do NOT use `ngClass`, use `class` bindings instead
-- Do NOT use `ngStyle`, use `style` bindings instead
-- When using external templates/styles, use paths relative to the component TS file.
-
-## State Management
-
-- Use signals for local component state
-- Use `computed()` for derived state
-- Keep state transformations pure and predictable
-- Do NOT use `mutate` on signals, use `update` or `set` instead
-
-## Templates
-
-- Keep templates simple and avoid complex logic
-- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
-- Use the async pipe to handle observables
-- Do not assume globals like (`new Date()`) are available.
-- Do not write arrow functions in templates (they are not supported).
-
-## Services
-
-- Design services around a single responsibility
-- Use the `providedIn: 'root'` option for singleton services
-- Use the `inject()` function instead of constructor injection

From 75510c324ee9b08f95586ef93fa2b8c82967aed1 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 19:37:18 +0100
Subject: [PATCH 31/52] fix: use signals on auth service and guards

---
 client/app/account/account.component.ts       |  5 ++--
 client/app/admin/admin.component.html         |  2 +-
 client/app/app.html                           | 12 ++++-----
 client/app/login/login.component.ts           |  2 +-
 .../app/services/auth-guard-admin.service.ts  |  2 +-
 .../app/services/auth-guard-login.service.ts  |  2 +-
 client/app/services/auth.service.ts           | 27 ++++++++-----------
 7 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/client/app/account/account.component.ts b/client/app/account/account.component.ts
index 600f9850..4461e4eb 100644
--- a/client/app/account/account.component.ts
+++ b/client/app/account/account.component.ts
@@ -27,7 +27,7 @@ export class AccountComponent implements OnInit {
 
   getUser(): void {
     this.isLoading.set(true);
-    this.userService.getUser(this.auth.currentUser).subscribe({
+    this.userService.getUser(this.auth.currentUser()).subscribe({
       next: data => this.user.set(data),
       error: error => console.error(error),
       complete: () => this.isLoading.set(false)
@@ -39,8 +39,7 @@ export class AccountComponent implements OnInit {
     this.userService.editUser(user).subscribe({
       next: () => {
         this.toast.setMessage('Account settings saved!', 'success');
-        this.auth.currentUser = user;
-        this.auth.isAdmin = user.role === 'admin';
+        this.auth.setCurrentUser(user);
       },
       error: error => console.error(error)
     });
diff --git a/client/app/admin/admin.component.html b/client/app/admin/admin.component.html
index b6651daa..c7088ab3 100644
--- a/client/app/admin/admin.component.html
+++ b/client/app/admin/admin.component.html
@@ -30,7 +30,7 @@ <h4 class="card-header">Registered users ({{usersCount()}})</h4>
               <td>{{user.role}}</td>
               <td>
                 <button class="btn btn-sm btn-danger" (click)="deleteUser(user)"
-                  [disabled]="auth.currentUser._id === user._id">
+                  [disabled]="auth.currentUser()._id === user._id">
                   <i class="fa fa-trash"></i> Delete
                 </button>
               </td>
diff --git a/client/app/app.html b/client/app/app.html
index cc057384..882ce139 100644
--- a/client/app/app.html
+++ b/client/app/app.html
@@ -19,35 +19,35 @@
           </a>
         </li>
         <li class="nav-item">
-          @if (!auth.loggedIn) {
+          @if (!auth.loggedIn()) {
             <a routerLink="/login" class="nav-link" routerLinkActive="active">
               <i class="fa fa-sign-in"></i> Login
             </a>
           }
         </li>
         <li class="nav-item">
-          @if (!auth.loggedIn) {
+          @if (!auth.loggedIn()) {
             <a routerLink="/register" class="nav-link" routerLinkActive="active">
               <i class="fa fa-user-plus"></i> Register
             </a>
           }
         </li>
         <li class="nav-item">
-          @if (auth.loggedIn) {
+          @if (auth.loggedIn()) {
             <a routerLink="/account" class="nav-link" routerLinkActive="active">
-              <i class="fa fa-user"></i> Account ({{auth.currentUser.username}})
+              <i class="fa fa-user"></i> Account ({{auth.currentUser().username}})
             </a>
           }
         </li>
         <li class="nav-item">
-          @if (auth.loggedIn && auth.isAdmin) {
+          @if (auth.loggedIn() && auth.isAdmin()) {
             <a routerLink="/admin" class="nav-link" routerLinkActive="active">
               <i class="fa fa-lock"></i> Admin
             </a>
           }
         </li>
         <li class="nav-item">
-          @if (auth.loggedIn) {
+          @if (auth.loggedIn()) {
             <a routerLink="/logout" class="nav-link" routerLinkActive="active">
               <i class="fa fa-sign-out"></i> Logout
             </a>
diff --git a/client/app/login/login.component.ts b/client/app/login/login.component.ts
index 541d546c..e2a6a981 100644
--- a/client/app/login/login.component.ts
+++ b/client/app/login/login.component.ts
@@ -38,7 +38,7 @@ export class LoginComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    if (this.auth.loggedIn) {
+    if (this.auth.loggedIn()) {
       this.router.navigate(['/']);
     }
   }
diff --git a/client/app/services/auth-guard-admin.service.ts b/client/app/services/auth-guard-admin.service.ts
index 752f8e12..50fdd392 100644
--- a/client/app/services/auth-guard-admin.service.ts
+++ b/client/app/services/auth-guard-admin.service.ts
@@ -8,7 +8,7 @@ export class AuthGuardAdmin  {
 
 
   canActivate(): boolean {
-    return this.auth.isAdmin;
+    return this.auth.isAdmin().valueOf();
   }
 
 }
diff --git a/client/app/services/auth-guard-login.service.ts b/client/app/services/auth-guard-login.service.ts
index 1ee82046..df8afdcb 100644
--- a/client/app/services/auth-guard-login.service.ts
+++ b/client/app/services/auth-guard-login.service.ts
@@ -8,7 +8,7 @@ export class AuthGuardLogin  {
 
 
   canActivate(): boolean {
-    return this.auth.loggedIn;
+    return this.auth.loggedIn().valueOf();
   }
 
 }
diff --git a/client/app/services/auth.service.ts b/client/app/services/auth.service.ts
index 267e5e7f..87fcc44d 100644
--- a/client/app/services/auth.service.ts
+++ b/client/app/services/auth.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core';
+import { Injectable, inject, signal } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { JwtHelperService } from '@auth0/angular-jwt';
@@ -14,10 +14,9 @@ export class AuthService {
   private jwtHelper = inject(JwtHelperService);
   // toast = inject(ToastComponent);
 
-  loggedIn = false;
-  isAdmin = false;
-
-  currentUser: User = new User();
+  loggedIn = signal<boolean>(false);
+  isAdmin = signal<boolean>(false);
+  currentUser = signal<User>(new User());
 
   constructor() {
     const token = localStorage.getItem('token');
@@ -33,7 +32,6 @@ export class AuthService {
         localStorage.setItem('token', res.token);
         const decodedUser = this.decodeUserFromToken(res.token);
         this.setCurrentUser(decodedUser);
-        this.loggedIn = true;
         this.router.navigate(['/']);
       },
       error: () => console.error() // this.toast.setMessage('Invalid email or password!', 'danger')
@@ -42,23 +40,20 @@ export class AuthService {
 
   logout(): void {
     localStorage.removeItem('token');
-    this.loggedIn = false;
-    this.isAdmin = false;
-    this.currentUser = new User();
+    this.loggedIn.set(false);
+    this.isAdmin.set(false);
+    this.currentUser.set(new User());
     this.router.navigate(['/']);
   }
 
-  decodeUserFromToken(token: string): object {
+  decodeUserFromToken(token: string): User {
     return this.jwtHelper.decodeToken(token).user;
   }
 
   setCurrentUser(decodedUser: User): void {
-    this.loggedIn = true;
-    this.currentUser._id = decodedUser._id;
-    this.currentUser.username = decodedUser.username;
-    this.currentUser.role = decodedUser.role;
-    this.isAdmin = decodedUser.role === 'admin';
-    delete decodedUser.role;
+    this.loggedIn.set(true);
+    this.currentUser.set(decodedUser);
+    this.isAdmin.set(decodedUser.role === 'admin');
   }
 
 }

From 4b2e4ea2de1353de859ce3336dd2416f291c544f Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 20:40:54 +0100
Subject: [PATCH 32/52] fix: test for logout

---
 client/app/admin/admin.component.spec.ts   |  2 +-
 client/app/logout/logout.component.spec.ts | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/app/admin/admin.component.spec.ts b/client/app/admin/admin.component.spec.ts
index b508949c..bcea70b2 100644
--- a/client/app/admin/admin.component.spec.ts
+++ b/client/app/admin/admin.component.spec.ts
@@ -7,7 +7,7 @@ import { AdminComponent } from './admin.component';
 import { of, Observable } from 'rxjs';
 
 class AuthServiceMock {
-  currentUser = { _id: '1', username: 'test1@example.com', role: 'admin' };
+  currentUser = () => ({ _id: '1', username: 'test1@example.com', role: 'admin' });
 }
 
 class UserServiceMock {
diff --git a/client/app/logout/logout.component.spec.ts b/client/app/logout/logout.component.spec.ts
index 67e76d27..ce4e986f 100644
--- a/client/app/logout/logout.component.spec.ts
+++ b/client/app/logout/logout.component.spec.ts
@@ -1,12 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { signal } from '@angular/core';
 
 import { AuthService } from '../services/auth.service';
 import { LogoutComponent } from './logout.component';
 
 class AuthServiceMock {
-  loggedIn = true;
+  loggedIn = signal<boolean>(true);
   logout(): void {
-    this.loggedIn = false;
+    this.loggedIn.set(false);
   }
 }
 
@@ -32,10 +33,10 @@ describe('Component: Logout', () => {
   });
 
   it('should logout the user', () => {
-    authService.loggedIn = true;
-    expect(authService.loggedIn).toBeTruthy();
+    authService.loggedIn.set(true);
+    expect(authService.loggedIn()).toBeTruthy();
     authService.logout();
-    expect(authService.loggedIn).toBeFalsy();
+    expect(authService.loggedIn()).toBeFalsy();
   });
 
 });

From 0475e419c77adf4e70466bfcbbeea876b86668cd Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 21:13:52 +0100
Subject: [PATCH 33/52] chore: remove useless standalone true, turn on eslint
 rule too

---
 client/app/shared/loading/loading.component.ts | 1 -
 eslint.config.js                               | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/client/app/shared/loading/loading.component.ts b/client/app/shared/loading/loading.component.ts
index b9271a13..85e72cdc 100644
--- a/client/app/shared/loading/loading.component.ts
+++ b/client/app/shared/loading/loading.component.ts
@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-loading',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './loading.component.html',
 })
diff --git a/eslint.config.js b/eslint.config.js
index f6c97904..eee71051 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -30,9 +30,6 @@ module.exports = tseslint.config(
           style: "kebab-case",
         },
       ],
-      "@angular-eslint/prefer-standalone": [
-        "off"
-      ],
       "arrow-spacing": "error",
       "comma-spacing": "error",
       "indent": ["error", 2],

From 0e3a53dfa7549dc8bc44f77f284176d14260bfa3 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 21:18:51 +0100
Subject: [PATCH 34/52] fix: comma in json

---
 server/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/tsconfig.json b/server/tsconfig.json
index 31bb5474..80292ef3 100644
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -4,6 +4,6 @@
     "outDir": "../dist/server",
     "baseUrl": "",
     "module": "nodenext",
-    "types": ["node", "jest"],
+    "types": ["node", "jest"]
   }
 }
\ No newline at end of file

From 4cf0e8d4e4f8f692f0e6d8af2cfe6db44f7936f1 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 21:24:12 +0100
Subject: [PATCH 35/52] fix: use input signal for cats in add cat form

---
 client/app/add-cat-form/add-cat-form.component.ts | 6 +++---
 client/app/cats/cats.component.html               | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/app/add-cat-form/add-cat-form.component.ts b/client/app/add-cat-form/add-cat-form.component.ts
index 32fc4fef..5a66b042 100644
--- a/client/app/add-cat-form/add-cat-form.component.ts
+++ b/client/app/add-cat-form/add-cat-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, Input, WritableSignal } from '@angular/core';
+import { Component, inject, input, InputSignal } from '@angular/core';
 import { UntypedFormGroup, UntypedFormControl, Validators, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 
 import { CatService } from '../services/cat.service';
@@ -17,7 +17,7 @@ export class AddCatFormComponent {
   private formBuilder = inject(UntypedFormBuilder);
   toast = inject(ToastComponent);
 
-  @Input() cats?: WritableSignal<Cat[]>;
+  cats: InputSignal<Cat[]> = input.required<Cat[]>();
 
   addCatForm: UntypedFormGroup;
   name = new UntypedFormControl('', Validators.required);
@@ -35,7 +35,7 @@ export class AddCatFormComponent {
   addCat(): void {
     this.catService.addCat(this.addCatForm.value).subscribe({
       next: res => {
-        this.cats?.update(list => [...list, res]);
+        this.cats().push(res);
         this.addCatForm.reset();
         this.toast.setMessage('Item added successfully.', 'success');
       },
diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index ba4e82c0..3bd1c348 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -76,5 +76,5 @@ <h4 class="card-header">Current cats ({{catsCount()}})</h4>
 }
 
 @if (!isEditing()) {
-  <app-add-cat-form [cats]="cats"></app-add-cat-form>
+  <app-add-cat-form [cats]="cats()"></app-add-cat-form>
 }
\ No newline at end of file

From d4a3cf14221c81a342ee837e22b78f0a0d0bb32a Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 21:26:08 +0100
Subject: [PATCH 36/52] fix: show error on console error

---
 client/app/services/auth.service.ts | 3 ++-
 client/main.ts                      | 2 +-
 server/app.ts                       | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/app/services/auth.service.ts b/client/app/services/auth.service.ts
index 87fcc44d..49948c1a 100644
--- a/client/app/services/auth.service.ts
+++ b/client/app/services/auth.service.ts
@@ -34,7 +34,8 @@ export class AuthService {
         this.setCurrentUser(decodedUser);
         this.router.navigate(['/']);
       },
-      error: () => console.error() // this.toast.setMessage('Invalid email or password!', 'danger')
+      // @todo show toast instead this.toast.setMessage('Invalid email or password!', 'danger')
+      error: error => console.error(error) 
     });
   }
 
diff --git a/client/main.ts b/client/main.ts
index 027a4820..4087b6e9 100644
--- a/client/main.ts
+++ b/client/main.ts
@@ -4,4 +4,4 @@ import { appConfig } from './app/app.config';
 import { App } from './app/app';
 
 bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));
+  .catch(error => console.error(error));
diff --git a/server/app.ts b/server/app.ts
index 750ae491..4330e234 100644
--- a/server/app.ts
+++ b/server/app.ts
@@ -25,8 +25,8 @@ const main = async (): Promise<void> => {
       res.sendFile(pathJoin(__dirname, `../${feDir}/index.html`));
     });
     app.listen(app.get('port'), () => console.log(`Angular Full Stack listening on port ${app.get('port')}`));
-  } catch (err) {
-    console.error(err);
+  } catch (error) {
+    console.error(error);
   }
 };
 

From c8805ed6bc966486b1a6787711b8d6be81caca62 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 22:03:12 +0100
Subject: [PATCH 37/52] refactor: rewrite toast as a service

---
 client/app/account/account.component.html     |  2 +-
 client/app/account/account.component.spec.ts  |  4 +--
 client/app/account/account.component.ts       |  3 +-
 .../add-cat-form.component.spec.ts            |  7 +++--
 .../add-cat-form/add-cat-form.component.ts    |  4 +--
 client/app/admin/admin.component.html         |  2 +-
 client/app/admin/admin.component.spec.ts      |  6 ++--
 client/app/admin/admin.component.ts           |  3 +-
 client/app/app.spec.ts                        |  8 ++++-
 client/app/app.ts                             |  4 +--
 client/app/cats/cats.component.html           |  2 +-
 client/app/cats/cats.component.spec.ts        |  7 +++--
 client/app/cats/cats.component.ts             |  3 +-
 client/app/login/login.component.html         |  2 +-
 client/app/login/login.component.spec.ts      |  8 ++---
 client/app/login/login.component.ts           |  2 --
 client/app/register/register.component.html   |  2 +-
 .../app/register/register.component.spec.ts   |  4 +--
 client/app/register/register.component.ts     |  3 +-
 .../app/services/auth-guard-admin.service.ts  |  1 -
 .../app/services/auth-guard-login.service.ts  |  1 -
 client/app/services/auth.service.ts           |  5 +---
 client/app/shared/toast/toast.component.html  | 10 +++----
 .../app/shared/toast/toast.component.spec.ts  | 13 ++++----
 client/app/shared/toast/toast.component.ts    | 30 ++++---------------
 client/app/shared/toast/toast.service.ts      | 29 ++++++++++++++++++
 26 files changed, 92 insertions(+), 73 deletions(-)
 create mode 100644 client/app/shared/toast/toast.service.ts

diff --git a/client/app/account/account.component.html b/client/app/account/account.component.html
index 7cc3ab48..7ef08b31 100644
--- a/client/app/account/account.component.html
+++ b/client/app/account/account.component.html
@@ -1,6 +1,6 @@
 <app-loading [condition]="isLoading()"></app-loading>
 
-<app-toast [message]="toast.displayedMessage()"></app-toast>
+<app-toast></app-toast>
 
 @if (!isLoading()) {
   <div class="card">
diff --git a/client/app/account/account.component.spec.ts b/client/app/account/account.component.spec.ts
index f84037f6..a38a1a5a 100644
--- a/client/app/account/account.component.spec.ts
+++ b/client/app/account/account.component.spec.ts
@@ -5,7 +5,7 @@ import { Observable, of } from 'rxjs';
 import { AccountComponent } from './account.component';
 import { AuthService } from '../services/auth.service';
 import { UserService } from '../services/user.service';
-import { ToastComponent } from '../shared/toast/toast.component';
+import { ToastService } from '../shared/toast/toast.service';
 import { User } from '../shared/models/user.model';
 
 class UserServiceMock {
@@ -28,7 +28,7 @@ describe('Component: Account', () => {
       imports: [AccountComponent],
       providers: [
         AuthService,
-        ToastComponent,
+        ToastService,
         { provide: UserService, useClass: UserServiceMock },
         { provide: JWT_OPTIONS, useValue: {} }, JwtHelperService
       ]
diff --git a/client/app/account/account.component.ts b/client/app/account/account.component.ts
index 4461e4eb..f37e844f 100644
--- a/client/app/account/account.component.ts
+++ b/client/app/account/account.component.ts
@@ -5,6 +5,7 @@ import { ToastComponent } from '../shared/toast/toast.component';
 import { LoadingComponent } from '../shared/loading/loading.component';
 import { AuthService } from '../services/auth.service';
 import { UserService } from '../services/user.service';
+import { ToastService } from '../shared/toast/toast.service';
 import { User } from '../shared/models/user.model';
 
 @Component({
@@ -15,7 +16,7 @@ import { User } from '../shared/models/user.model';
 })
 export class AccountComponent implements OnInit {
   private auth = inject(AuthService);
-  toast = inject(ToastComponent);
+  private toast = inject(ToastService);
   private userService = inject(UserService);
 
   user = signal<User>(new User());
diff --git a/client/app/add-cat-form/add-cat-form.component.spec.ts b/client/app/add-cat-form/add-cat-form.component.spec.ts
index 3bee5ed6..c04b1bc3 100644
--- a/client/app/add-cat-form/add-cat-form.component.spec.ts
+++ b/client/app/add-cat-form/add-cat-form.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
 
-import { ToastComponent } from '../shared/toast/toast.component';
+import { ToastService } from '../shared/toast/toast.service';
 import { CatService } from '../services/cat.service';
 import { AddCatFormComponent } from './add-cat-form.component';
 
@@ -13,7 +13,10 @@ describe('Component: AddCatForm', () => {
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       imports: [AddCatFormComponent, FormsModule, ReactiveFormsModule],
-      providers: [ToastComponent, UntypedFormBuilder, CatService]
+      providers: [
+        UntypedFormBuilder,
+        ToastService,
+        CatService]
     }).compileComponents();
 
     fixture = TestBed.createComponent(AddCatFormComponent);
diff --git a/client/app/add-cat-form/add-cat-form.component.ts b/client/app/add-cat-form/add-cat-form.component.ts
index 5a66b042..1ce7674c 100644
--- a/client/app/add-cat-form/add-cat-form.component.ts
+++ b/client/app/add-cat-form/add-cat-form.component.ts
@@ -2,7 +2,7 @@ import { Component, inject, input, InputSignal } from '@angular/core';
 import { UntypedFormGroup, UntypedFormControl, Validators, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 
 import { CatService } from '../services/cat.service';
-import { ToastComponent } from '../shared/toast/toast.component';
+import { ToastService } from '../shared/toast/toast.service';
 import { Cat } from '../shared/models/cat.model';
 
 @Component({
@@ -15,7 +15,7 @@ import { Cat } from '../shared/models/cat.model';
 export class AddCatFormComponent {
   private catService = inject(CatService);
   private formBuilder = inject(UntypedFormBuilder);
-  toast = inject(ToastComponent);
+  private toast = inject(ToastService);
 
   cats: InputSignal<Cat[]> = input.required<Cat[]>();
 
diff --git a/client/app/admin/admin.component.html b/client/app/admin/admin.component.html
index c7088ab3..57c3ac2b 100644
--- a/client/app/admin/admin.component.html
+++ b/client/app/admin/admin.component.html
@@ -1,6 +1,6 @@
 <app-loading [condition]="isLoading()"></app-loading>
 
-<app-toast [message]="toast.displayedMessage()"></app-toast>
+<app-toast></app-toast>
 
 @if (!isLoading()) {
   <div class="card">
diff --git a/client/app/admin/admin.component.spec.ts b/client/app/admin/admin.component.spec.ts
index bcea70b2..3c494719 100644
--- a/client/app/admin/admin.component.spec.ts
+++ b/client/app/admin/admin.component.spec.ts
@@ -1,10 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { of, Observable } from 'rxjs';
 
-import { ToastComponent } from '../shared/toast/toast.component';
 import { AuthService } from '../services/auth.service';
 import { UserService } from '../services/user.service';
+import { ToastService } from '../shared/toast/toast.service';
 import { AdminComponent } from './admin.component';
-import { of, Observable } from 'rxjs';
 
 class AuthServiceMock {
   currentUser = () => ({ _id: '1', username: 'test1@example.com', role: 'admin' });
@@ -29,7 +29,7 @@ describe('Component: Admin', () => {
     await TestBed.configureTestingModule({
       imports: [AdminComponent],
       providers: [
-        ToastComponent,
+        ToastService,
         { provide: AuthService, useClass: AuthServiceMock },
         { provide: UserService, useClass: UserServiceMock },
       ],
diff --git a/client/app/admin/admin.component.ts b/client/app/admin/admin.component.ts
index 7ce72539..17861f45 100644
--- a/client/app/admin/admin.component.ts
+++ b/client/app/admin/admin.component.ts
@@ -4,6 +4,7 @@ import { ToastComponent } from '../shared/toast/toast.component';
 import { LoadingComponent } from '../shared/loading/loading.component';
 import { AuthService } from '../services/auth.service';
 import { UserService } from '../services/user.service';
+import { ToastService } from '../shared/toast/toast.service';
 import { User } from '../shared/models/user.model';
 
 @Component({
@@ -14,7 +15,7 @@ import { User } from '../shared/models/user.model';
 })
 export class AdminComponent implements OnInit {
   auth = inject(AuthService);
-  toast = inject(ToastComponent);
+  private toast = inject(ToastService);
   private userService = inject(UserService);
 
   users = signal<User[]>([]);
diff --git a/client/app/app.spec.ts b/client/app/app.spec.ts
index ae3d523e..3bcd0d19 100644
--- a/client/app/app.spec.ts
+++ b/client/app/app.spec.ts
@@ -4,6 +4,7 @@ import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
 
 import { App } from './app';
 import { UserService } from './services/user.service';
+import { ToastService } from './shared/toast/toast.service';
 
 describe('App', () => {
   let fixture: ComponentFixture<App>;
@@ -12,7 +13,12 @@ describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App, RouterTestingModule], // @todo replace deprecated
-      providers: [UserService, { provide: JWT_OPTIONS, useValue: {} }, JwtHelperService]
+      providers: [
+        ToastService,
+        UserService,
+        { provide: JWT_OPTIONS, useValue: {} },
+        JwtHelperService
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(App);
diff --git a/client/app/app.ts b/client/app/app.ts
index fb6a4b48..95d85e0d 100644
--- a/client/app/app.ts
+++ b/client/app/app.ts
@@ -2,13 +2,13 @@ import { AfterViewChecked, ChangeDetectorRef, Component, inject } from '@angular
 import { RouterModule, RouterOutlet } from '@angular/router';
 
 import { AuthService } from './services/auth.service';
-import { ToastComponent } from './shared/toast/toast.component';
+import { ToastService } from './shared/toast/toast.service';
 import { LoadingComponent } from './shared/loading/loading.component';
 
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet, RouterModule],
-  providers: [AuthService, ToastComponent, LoadingComponent],
+  providers: [AuthService, ToastService, LoadingComponent],
   templateUrl: './app.html',
 })
 export class App implements AfterViewChecked {
diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index 3bd1c348..a6ea64b4 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -1,6 +1,6 @@
 <app-loading [condition]="isLoading()"></app-loading>
 
-<app-toast [message]="toast.displayedMessage()"></app-toast>
+<app-toast></app-toast>
 
 @if (!isLoading()) {
   <div class="card mb-3">
diff --git a/client/app/cats/cats.component.spec.ts b/client/app/cats/cats.component.spec.ts
index 1ce126a3..40d9d87d 100644
--- a/client/app/cats/cats.component.spec.ts
+++ b/client/app/cats/cats.component.spec.ts
@@ -1,11 +1,11 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FormsModule, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { of, Observable } from 'rxjs';
 
-import { ToastComponent } from '../shared/toast/toast.component';
 import { CatService } from '../services/cat.service';
+import { ToastService } from '../shared/toast/toast.service';
 import { CatsComponent } from './cats.component';
-import { of, Observable } from 'rxjs';
 
 class CatServiceMock {
   mockCats = [
@@ -26,7 +26,8 @@ describe('Component: Cats', () => {
     await TestBed.configureTestingModule({
       imports: [CatsComponent, RouterTestingModule, FormsModule, ReactiveFormsModule],
       providers: [
-        ToastComponent, UntypedFormBuilder,
+        ToastService,
+        UntypedFormBuilder,
         { provide: CatService, useClass: CatServiceMock }
       ],
     }).compileComponents();
diff --git a/client/app/cats/cats.component.ts b/client/app/cats/cats.component.ts
index 4a1db293..03b9666b 100644
--- a/client/app/cats/cats.component.ts
+++ b/client/app/cats/cats.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, inject, signal, computed, ChangeDetectionStrategy }
 import { FormsModule } from '@angular/forms';
 
 import { CatService } from '../services/cat.service';
+import { ToastService } from '../shared/toast/toast.service';
 import { LoadingComponent } from '../shared/loading/loading.component';
 import { ToastComponent } from '../shared/toast/toast.component';
 import { AddCatFormComponent } from '../add-cat-form/add-cat-form.component';
@@ -16,7 +17,7 @@ import { Cat } from '../shared/models/cat.model';
 })
 export class CatsComponent implements OnInit {
   private catService = inject(CatService);
-  toast = inject(ToastComponent);
+  private toast = inject(ToastService);
 
   cat = signal<Cat>(new Cat());
   cats = signal<Cat[]>([]);
diff --git a/client/app/login/login.component.html b/client/app/login/login.component.html
index 45c2de0d..00ecaf96 100644
--- a/client/app/login/login.component.html
+++ b/client/app/login/login.component.html
@@ -1,4 +1,4 @@
-<app-toast [message]="toast.displayedMessage()"></app-toast>
+<app-toast></app-toast>
 
 <div class="card">
   <h4 class="card-header">Login</h4>
diff --git a/client/app/login/login.component.spec.ts b/client/app/login/login.component.spec.ts
index 4d024f40..5d9ae678 100644
--- a/client/app/login/login.component.spec.ts
+++ b/client/app/login/login.component.spec.ts
@@ -1,11 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { JWT_OPTIONS, JwtHelperService } from '@auth0/angular-jwt';
 
-import { ToastComponent } from '../shared/toast/toast.component';
+import { ToastService } from '../shared/toast/toast.service';
 import { AuthService } from '../services/auth.service';
-import { LoginComponent } from './login.component';
 import { UserService } from '../services/user.service';
-import { JWT_OPTIONS, JwtHelperService } from '@auth0/angular-jwt';
+import { LoginComponent } from './login.component';
 
 describe('Component: Login', () => {
   let component: LoginComponent;
@@ -17,7 +17,7 @@ describe('Component: Login', () => {
       imports: [LoginComponent, FormsModule, ReactiveFormsModule],
       providers: [
         UntypedFormBuilder,
-        ToastComponent,
+        ToastService,
         AuthService,
         UserService,
         JwtHelperService, { provide: JWT_OPTIONS, useValue: {} }
diff --git a/client/app/login/login.component.ts b/client/app/login/login.component.ts
index e2a6a981..326b30df 100644
--- a/client/app/login/login.component.ts
+++ b/client/app/login/login.component.ts
@@ -15,8 +15,6 @@ export class LoginComponent implements OnInit {
   private auth = inject(AuthService);
   private formBuilder = inject(UntypedFormBuilder);
   private router = inject(Router);
-  toast = inject(ToastComponent);
-
 
   loginForm: UntypedFormGroup;
   email = new UntypedFormControl('', [
diff --git a/client/app/register/register.component.html b/client/app/register/register.component.html
index 6081be20..c2987d55 100644
--- a/client/app/register/register.component.html
+++ b/client/app/register/register.component.html
@@ -1,4 +1,4 @@
-<app-toast [message]="toast.displayedMessage()"></app-toast>
+<app-toast></app-toast>
 
 <div class="card">
   <h4 class="card-header">Register</h4>
diff --git a/client/app/register/register.component.spec.ts b/client/app/register/register.component.spec.ts
index 63162da8..324d412a 100644
--- a/client/app/register/register.component.spec.ts
+++ b/client/app/register/register.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { ToastComponent } from '../shared/toast/toast.component';
+import { ToastService } from '../shared/toast/toast.service';
 import { UserService } from '../services/user.service';
 import { RegisterComponent } from './register.component';
 
@@ -16,7 +16,7 @@ describe('Component: Register', () => {
     await TestBed.configureTestingModule({
       imports: [RegisterComponent, FormsModule, ReactiveFormsModule],
       providers: [
-        ToastComponent,
+        ToastService,
         { provide: UserService, useClass: UserServiceMock }
       ]
     }).compileComponents();
diff --git a/client/app/register/register.component.ts b/client/app/register/register.component.ts
index a1adc5ca..1bcd59c3 100644
--- a/client/app/register/register.component.ts
+++ b/client/app/register/register.component.ts
@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 
 import { UserService } from '../services/user.service';
+import { ToastService } from '../shared/toast/toast.service';
 import { ToastComponent } from '../shared/toast/toast.component';
 
 @Component({
@@ -14,7 +15,7 @@ import { ToastComponent } from '../shared/toast/toast.component';
 export class RegisterComponent {
   private formBuilder = inject(UntypedFormBuilder);
   private router = inject(Router);
-  toast = inject(ToastComponent);
+  private toast = inject(ToastService);
   private userService = inject(UserService);
 
 
diff --git a/client/app/services/auth-guard-admin.service.ts b/client/app/services/auth-guard-admin.service.ts
index 50fdd392..8bf82617 100644
--- a/client/app/services/auth-guard-admin.service.ts
+++ b/client/app/services/auth-guard-admin.service.ts
@@ -6,7 +6,6 @@ import { AuthService } from './auth.service';
 export class AuthGuardAdmin  {
   auth = inject(AuthService);
 
-
   canActivate(): boolean {
     return this.auth.isAdmin().valueOf();
   }
diff --git a/client/app/services/auth-guard-login.service.ts b/client/app/services/auth-guard-login.service.ts
index df8afdcb..119d24ef 100644
--- a/client/app/services/auth-guard-login.service.ts
+++ b/client/app/services/auth-guard-login.service.ts
@@ -6,7 +6,6 @@ import { AuthService } from './auth.service';
 export class AuthGuardLogin  {
   auth = inject(AuthService);
 
-
   canActivate(): boolean {
     return this.auth.loggedIn().valueOf();
   }
diff --git a/client/app/services/auth.service.ts b/client/app/services/auth.service.ts
index 49948c1a..310118dc 100644
--- a/client/app/services/auth.service.ts
+++ b/client/app/services/auth.service.ts
@@ -4,7 +4,6 @@ import { Router } from '@angular/router';
 import { JwtHelperService } from '@auth0/angular-jwt';
 
 import { UserService } from './user.service';
-// import { ToastComponent } from '../shared/toast/toast.component';
 import { User } from '../shared/models/user.model';
 
 @Injectable()
@@ -12,7 +11,6 @@ export class AuthService {
   private userService = inject(UserService);
   private router = inject(Router);
   private jwtHelper = inject(JwtHelperService);
-  // toast = inject(ToastComponent);
 
   loggedIn = signal<boolean>(false);
   isAdmin = signal<boolean>(false);
@@ -34,8 +32,7 @@ export class AuthService {
         this.setCurrentUser(decodedUser);
         this.router.navigate(['/']);
       },
-      // @todo show toast instead this.toast.setMessage('Invalid email or password!', 'danger')
-      error: error => console.error(error) 
+      // error: () => this.toast.setMessage('Invalid email or password!', 'danger')
     });
   }
 
diff --git a/client/app/shared/toast/toast.component.html b/client/app/shared/toast/toast.component.html
index 308882e8..b13f9102 100644
--- a/client/app/shared/toast/toast.component.html
+++ b/client/app/shared/toast/toast.component.html
@@ -1,9 +1,9 @@
-@if (displayedMessage().body) {
-  <div class="alert" [ngClass]="'alert-' + displayedMessage().type" role="alert">
+@if (message()?.body) {
+  <div class="alert" [ngClass]="'alert-' + (message()?.type)" role="alert">
   <i class="fa me-2" [ngClass]="{
-    'fa-check-circle': displayedMessage().type === 'success',
-    'fa-exclamation-circle': displayedMessage().type === 'warning' || displayedMessage().type === 'danger'
+    'fa-check-circle': (message()?.type) === 'success',
+    'fa-exclamation-circle': (message()?.type) === 'warning' || (message()?.type) === 'danger'
   }"></i>
-    <span [innerHTML]="displayedMessage().body"></span>
+    <span [innerHTML]="message()?.body"></span>
   </div>
 }
\ No newline at end of file
diff --git a/client/app/shared/toast/toast.component.spec.ts b/client/app/shared/toast/toast.component.spec.ts
index 99c000bf..620292ed 100644
--- a/client/app/shared/toast/toast.component.spec.ts
+++ b/client/app/shared/toast/toast.component.spec.ts
@@ -1,19 +1,23 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ToastComponent } from './toast.component';
+import { ToastService } from './toast.service';
 
 describe('Component: Toast', () => {
   let component: ToastComponent;
   let fixture: ComponentFixture<ToastComponent>;
   let compiled: HTMLElement;
+  let toastService: ToastService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ToastComponent],
+      providers: [ToastService]
     }).compileComponents();
 
     fixture = TestBed.createComponent(ToastComponent);
     component = fixture.componentInstance;
+    toastService = TestBed.inject(ToastService);
     fixture.detectChanges();
     await fixture.whenStable();
     compiled = fixture.nativeElement as HTMLElement;
@@ -24,8 +28,7 @@ describe('Component: Toast', () => {
   });
 
   it('should not have message set nor DOM element', () => {
-    expect(component.displayedMessage().body).toBeFalsy();
-    expect(component.displayedMessage().type).toBeFalsy();
+    expect(toastService.message()).toBeNull();
     const div = compiled.querySelector('div');
     expect(div).toBeNull();
   });
@@ -35,10 +38,10 @@ describe('Component: Toast', () => {
       body: 'test message',
       type: 'warning'
     };
-    component.setMessage(mockMessage.body, mockMessage.type);
-    expect(component.displayedMessage().body).toBe(mockMessage.body);
-    expect(component.displayedMessage().type).toBe(mockMessage.type);
+    toastService.setMessage(mockMessage.body, mockMessage.type);
     fixture.detectChanges();
+    expect(toastService.message()?.body).toBe(mockMessage.body);
+    expect(toastService.message()?.type).toBe(mockMessage.type);
     const div = compiled.querySelector('div');
     expect(div).toBeDefined();
     expect(div?.textContent).toContain(mockMessage.body);
diff --git a/client/app/shared/toast/toast.component.ts b/client/app/shared/toast/toast.component.ts
index 532c7475..bab88a10 100644
--- a/client/app/shared/toast/toast.component.ts
+++ b/client/app/shared/toast/toast.component.ts
@@ -1,6 +1,8 @@
-import { Component, input, signal, effect } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { ToastService } from './toast.service';
+
 @Component({
   selector: 'app-toast',
   templateUrl: './toast.component.html',
@@ -8,28 +10,6 @@ import { CommonModule } from '@angular/common';
   imports: [CommonModule],
 })
 export class ToastComponent {
-  // input value when the component is used in a template
-  message = input<{ body: string; type: string }>({ body: '', type: '' });
-  // local writable signal representing the currently displayed message.
-  private _localMessage = signal<{ body: string; type: string }>({ body: '', type: '' });
-  // public accessor used by templates to read the displayed message
-  displayedMessage = () => this._localMessage();
-
-  existingTimeout = 0;
-
-  constructor() {
-    // Keep local message in sync with any parent-provided input value
-    effect(() => {
-      this._localMessage.set(this.message());
-    });
-  }
-
-  // API used by other parts of the app (they inject the ToastComponent as a service)
-  setMessage(body: string, type: string, time = 3000): void {
-    if (this.existingTimeout) {
-      clearTimeout(this.existingTimeout);
-    }
-    this._localMessage.set({ body, type });
-    this.existingTimeout = window.setTimeout(() => this._localMessage.set({ body: '', type: '' }), time);
-  }
+  private toastService = inject(ToastService);
+  message = () => this.toastService.message();
 }
diff --git a/client/app/shared/toast/toast.service.ts b/client/app/shared/toast/toast.service.ts
new file mode 100644
index 00000000..702c299d
--- /dev/null
+++ b/client/app/shared/toast/toast.service.ts
@@ -0,0 +1,29 @@
+import { Injectable, signal } from '@angular/core';
+
+interface ToastReq {
+  body: string;
+  type: string;
+}
+
+@Injectable()
+export class ToastService {
+  private _message = signal<ToastReq | null>(null);
+  message = () => this._message();
+
+  private existingTimeout = 0;
+
+  setMessage(body: string, type: string, time = 3000): void {
+    if (this.existingTimeout) {
+      clearTimeout(this.existingTimeout);
+    }
+    this._message.set({ body, type });
+    this.existingTimeout = window.setTimeout(() => this._message.set(null), time);
+  }
+
+  clear(): void {
+    if (this.existingTimeout) {
+      clearTimeout(this.existingTimeout);
+    }
+    this._message.set(null);
+  }
+}

From e8815a1d7eeb2edd53f5c806c38ebde1c5526658 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 22:18:16 +0100
Subject: [PATCH 38/52] fix: cats list not updating

---
 client/app/add-cat-form/add-cat-form.component.ts | 6 +++---
 client/app/cats/cats.component.html               | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/app/add-cat-form/add-cat-form.component.ts b/client/app/add-cat-form/add-cat-form.component.ts
index 1ce7674c..f6d67bfc 100644
--- a/client/app/add-cat-form/add-cat-form.component.ts
+++ b/client/app/add-cat-form/add-cat-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, input, InputSignal } from '@angular/core';
+import { Component, inject, WritableSignal, input, InputSignal } from '@angular/core';
 import { UntypedFormGroup, UntypedFormControl, Validators, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 
 import { CatService } from '../services/cat.service';
@@ -17,7 +17,7 @@ export class AddCatFormComponent {
   private formBuilder = inject(UntypedFormBuilder);
   private toast = inject(ToastService);
 
-  cats: InputSignal<Cat[]> = input.required<Cat[]>();
+  cats: InputSignal<WritableSignal<Cat[]> | undefined> = input<WritableSignal<Cat[]> | undefined>();
 
   addCatForm: UntypedFormGroup;
   name = new UntypedFormControl('', Validators.required);
@@ -35,7 +35,7 @@ export class AddCatFormComponent {
   addCat(): void {
     this.catService.addCat(this.addCatForm.value).subscribe({
       next: res => {
-        this.cats().push(res);
+        this.cats()?.update(list => [...list, res]);
         this.addCatForm.reset();
         this.toast.setMessage('Item added successfully.', 'success');
       },
diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index a6ea64b4..21be2a3d 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -76,5 +76,5 @@ <h4 class="card-header">Current cats ({{catsCount()}})</h4>
 }
 
 @if (!isEditing()) {
-  <app-add-cat-form [cats]="cats()"></app-add-cat-form>
+  <app-add-cat-form [cats]="cats"></app-add-cat-form>
 }
\ No newline at end of file

From 8b0b933aaeb9972e4729c154fccd4c4586d91421 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 22:21:28 +0100
Subject: [PATCH 39/52] perf: dont reload the cats, use copy

---
 client/app/cats/cats.component.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/app/cats/cats.component.ts b/client/app/cats/cats.component.ts
index 03b9666b..61330413 100644
--- a/client/app/cats/cats.component.ts
+++ b/client/app/cats/cats.component.ts
@@ -41,7 +41,7 @@ export class CatsComponent implements OnInit {
 
   enableEditing(cat: Cat): void {
     this.isEditing.set(true);
-    this.cat.set(cat);
+    this.cat.set({ ...cat });
   }
 
   cancelEditing(event: Event): void {
@@ -49,8 +49,6 @@ export class CatsComponent implements OnInit {
     this.isEditing.set(false);
     this.cat.set(new Cat());
     this.toast.setMessage('Item editing cancelled.', 'warning');
-    // Reload the cats to reset the editing
-    this.getCats();
   }
 
   editCat(cat: Cat): void {

From 120f18a41c8c9e18e2fd8aaee047f600a56c2f51 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 22:28:24 +0100
Subject: [PATCH 40/52] chore: remove valueof

---
 client/app/services/auth-guard-admin.service.ts | 2 +-
 client/app/services/auth-guard-login.service.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/app/services/auth-guard-admin.service.ts b/client/app/services/auth-guard-admin.service.ts
index 8bf82617..d495a8a9 100644
--- a/client/app/services/auth-guard-admin.service.ts
+++ b/client/app/services/auth-guard-admin.service.ts
@@ -7,7 +7,7 @@ export class AuthGuardAdmin  {
   auth = inject(AuthService);
 
   canActivate(): boolean {
-    return this.auth.isAdmin().valueOf();
+    return this.auth.isAdmin();
   }
 
 }
diff --git a/client/app/services/auth-guard-login.service.ts b/client/app/services/auth-guard-login.service.ts
index 119d24ef..97f9d521 100644
--- a/client/app/services/auth-guard-login.service.ts
+++ b/client/app/services/auth-guard-login.service.ts
@@ -7,7 +7,7 @@ export class AuthGuardLogin  {
   auth = inject(AuthService);
 
   canActivate(): boolean {
-    return this.auth.loggedIn().valueOf();
+    return this.auth.loggedIn();
   }
 
 }

From 8ff0325102bba7c12d3230040b1f5d21a4afbde4 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 22:35:45 +0100
Subject: [PATCH 41/52] chore: use ngmodel and ngmodelchange

---
 client/app/account/account.component.html | 11 ++++++++---
 client/app/account/account.component.ts   |  4 ++++
 client/app/cats/cats.component.html       | 12 +++++++++---
 client/app/cats/cats.component.ts         |  4 ++++
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/client/app/account/account.component.html b/client/app/account/account.component.html
index 7ef08b31..08e757fd 100644
--- a/client/app/account/account.component.html
+++ b/client/app/account/account.component.html
@@ -11,19 +11,24 @@ <h4 class="card-header">Account settings</h4>
           <span class="input-group-text">
             <i class="fa fa-user"></i>
           </span>
-          <input class="form-control" type="text" name="username" [(ngModel)]="user().username" placeholder="Username" required>
+          <input class="form-control" type="text" name="username"
+            [ngModel]="user().username" (ngModelChange)="updateUserField('username', $event)"
+            placeholder="Username" required>
         </div>
         <div class="input-group">
           <span class="input-group-text">
             <i class="fa fa-envelope"></i>
           </span>
-          <input class="form-control" type="email" name="email" [(ngModel)]="user().email" placeholder="Email" required>
+          <input class="form-control" type="email" name="email"
+            [ngModel]="user().email" (ngModelChange)="updateUserField('email', $event)"
+            placeholder="Email" required>
         </div>
         <div class="input-group">
           <span class="input-group-text">
             <i class="fa fa-black-tie"></i>
           </span>
-          <select class="form-control" name="role" [(ngModel)]="user().role">
+          <select class="form-control" name="role"
+            [ngModel]="user().role" (ngModelChange)="updateUserField('role', $event)">
             <option value="" disabled>Role</option>
             <option value="user">User</option>
             <option value="admin">Admin</option>
diff --git a/client/app/account/account.component.ts b/client/app/account/account.component.ts
index f37e844f..c5b74d88 100644
--- a/client/app/account/account.component.ts
+++ b/client/app/account/account.component.ts
@@ -46,4 +46,8 @@ export class AccountComponent implements OnInit {
     });
   }
 
+  updateUserField(field: string, value: string) {
+    this.user.update(u => ({ ...u, [field]: value }));
+  }
+
 }
diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index 21be2a3d..d24045fe 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -48,13 +48,19 @@ <h4 class="card-header">Current cats ({{catsCount()}})</h4>
                 <form #form="ngForm" (ngSubmit)="editCat(cat())">
                   <div class="row row-cols-1 row-cols-sm-auto g-2">
                     <div class="col">
-                      <input class="form-control" type="text" name="name" [(ngModel)]="cat().name" placeholder="Name" required>
+                      <input class="form-control" type="text" name="name"
+                        [ngModel]="cat().name" (ngModelChange)="updateCatField('name', $event)"
+                        placeholder="Name" required>
                     </div>
                     <div class="col">
-                      <input class="form-control" type="number" name="age" [(ngModel)]="cat().age" placeholder="Age" min="0" required>
+                      <input class="form-control" type="number" name="age"
+                        [ngModel]="cat().age" (ngModelChange)="updateCatField('age', $event)"
+                        placeholder="Age" min="0" required>
                     </div>
                     <div class="col">
-                      <input class="form-control" type="number" name="weight" [(ngModel)]="cat().weight" placeholder="Weight" step="any" min="0" required>
+                      <input class="form-control" type="number" name="weight"
+                        [ngModel]="cat().weight" (ngModelChange)="updateCatField('weight', $event)"
+                        placeholder="Weight" step="any" min="0" required>
                     </div>
                     <div class="col d-flex align-items-center">
                       <button class="btn btn-sm btn-primary me-2" type="submit" [disabled]="!form.form.valid">
diff --git a/client/app/cats/cats.component.ts b/client/app/cats/cats.component.ts
index 61330413..2b6b4d42 100644
--- a/client/app/cats/cats.component.ts
+++ b/client/app/cats/cats.component.ts
@@ -76,4 +76,8 @@ export class CatsComponent implements OnInit {
     }
   }
 
+  updateCatField(field: string, value: string) {
+    this.cat.update(c => ({ ...c, [field]: value }));
+  }
+
 }

From 7f5f5f2c71b2fdca3c5d89df7821a8ef59791bf6 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 22:39:04 +0100
Subject: [PATCH 42/52] fix: scss override

---
 client/styles.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/styles.scss b/client/styles.scss
index c36a9a8d..6a17b637 100644
--- a/client/styles.scss
+++ b/client/styles.scss
@@ -1,9 +1,9 @@
 // You can add global styles to this file, and also import other style files
 
 // Add Bootstrap style overrides here
-$primary: #026fbd;
-
-@use '../node_modules/bootstrap/scss/bootstrap';
+@use '../node_modules/bootstrap/scss/bootstrap' with (
+  $primary: #026fbd
+);
 
 // Add global app styles here
 body {

From a62d600c9875d59383df9b40f9c95650a4deeac8 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 22:55:06 +0100
Subject: [PATCH 43/52] refactor: dont use effect in loading component

---
 .../app/shared/loading/loading.component.spec.ts |  7 +++----
 client/app/shared/loading/loading.component.ts   | 16 ++--------------
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/client/app/shared/loading/loading.component.spec.ts b/client/app/shared/loading/loading.component.spec.ts
index 658b7e8a..712829b6 100644
--- a/client/app/shared/loading/loading.component.spec.ts
+++ b/client/app/shared/loading/loading.component.spec.ts
@@ -28,12 +28,11 @@ describe('Component: Loading', () => {
   });
 
   it('should show the DOM element', () => {
-    component.localCondition.set(true);
+    fixture.componentRef.setInput('condition', true);
     fixture.detectChanges();
     expect(component).toBeTruthy();
-    const div = compiled.querySelector('div');
-    expect(div).toBeDefined();
-    expect(div?.textContent).toContain('Loading...');
+    const header = compiled.querySelector('h4');
+    expect(header?.textContent).toContain('Loading...');
   });
 
 });
diff --git a/client/app/shared/loading/loading.component.ts b/client/app/shared/loading/loading.component.ts
index 85e72cdc..7491b6a7 100644
--- a/client/app/shared/loading/loading.component.ts
+++ b/client/app/shared/loading/loading.component.ts
@@ -1,4 +1,4 @@
-import { Component, input, signal, effect } from '@angular/core';
+import { Component, input, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -7,18 +7,6 @@ import { CommonModule } from '@angular/common';
   templateUrl: './loading.component.html',
 })
 export class LoadingComponent {
-  // input value when the component is used in a template
   condition = input<boolean>(false);
-  // local writable signal the template reads from (public so tests can set it)
-  localCondition = signal<boolean>(false);
-  // public accessor used by templates to read the displayed message
-  displayedCondition = () => this.localCondition();
-  
-  constructor() {
-    // Keep local message in sync with any parent-provided input value
-    effect(() => {
-      this.localCondition.set(this.condition());
-    });
-  }
-
+  displayedCondition = computed(() => this.condition());
 }

From c6b61cdd402748a8b5e7c150399ef14a259e11ac Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 22:59:32 +0100
Subject: [PATCH 44/52] refactor: use output instead of signal to add cat form

---
 client/app/add-cat-form/add-cat-form.component.ts | 6 +++---
 client/app/cats/cats.component.html               | 2 +-
 client/app/cats/cats.component.ts                 | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/app/add-cat-form/add-cat-form.component.ts b/client/app/add-cat-form/add-cat-form.component.ts
index f6d67bfc..1353ff98 100644
--- a/client/app/add-cat-form/add-cat-form.component.ts
+++ b/client/app/add-cat-form/add-cat-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, WritableSignal, input, InputSignal } from '@angular/core';
+import { Component, inject, output } from '@angular/core';
 import { UntypedFormGroup, UntypedFormControl, Validators, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 
 import { CatService } from '../services/cat.service';
@@ -17,7 +17,7 @@ export class AddCatFormComponent {
   private formBuilder = inject(UntypedFormBuilder);
   private toast = inject(ToastService);
 
-  cats: InputSignal<WritableSignal<Cat[]> | undefined> = input<WritableSignal<Cat[]> | undefined>();
+  catAdded = output<Cat>();
 
   addCatForm: UntypedFormGroup;
   name = new UntypedFormControl('', Validators.required);
@@ -35,7 +35,7 @@ export class AddCatFormComponent {
   addCat(): void {
     this.catService.addCat(this.addCatForm.value).subscribe({
       next: res => {
-        this.cats()?.update(list => [...list, res]);
+        this.catAdded.emit(res);
         this.addCatForm.reset();
         this.toast.setMessage('Item added successfully.', 'success');
       },
diff --git a/client/app/cats/cats.component.html b/client/app/cats/cats.component.html
index d24045fe..9d8b616a 100644
--- a/client/app/cats/cats.component.html
+++ b/client/app/cats/cats.component.html
@@ -82,5 +82,5 @@ <h4 class="card-header">Current cats ({{catsCount()}})</h4>
 }
 
 @if (!isEditing()) {
-  <app-add-cat-form [cats]="cats"></app-add-cat-form>
+  <app-add-cat-form (catAdded)="onCatAdded($event)"></app-add-cat-form>
 }
\ No newline at end of file
diff --git a/client/app/cats/cats.component.ts b/client/app/cats/cats.component.ts
index 2b6b4d42..2f4bd0d7 100644
--- a/client/app/cats/cats.component.ts
+++ b/client/app/cats/cats.component.ts
@@ -76,6 +76,10 @@ export class CatsComponent implements OnInit {
     }
   }
 
+  onCatAdded(newCat: Cat): void {
+    this.cats.update(list => [...list, newCat]);
+  }
+
   updateCatField(field: string, value: string) {
     this.cat.update(c => ({ ...c, [field]: value }));
   }

From 9d30cbbfb383d8106bf9be542fcacc63d0d21da5 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 23:01:55 +0100
Subject: [PATCH 45/52] perf: remove workaround, use update

---
 client/app/cats/cats.component.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/app/cats/cats.component.ts b/client/app/cats/cats.component.ts
index 2f4bd0d7..94c3d9a4 100644
--- a/client/app/cats/cats.component.ts
+++ b/client/app/cats/cats.component.ts
@@ -57,8 +57,7 @@ export class CatsComponent implements OnInit {
         this.isEditing.set(false);
         this.cat.set(cat);
         this.toast.setMessage('Item edited successfully.', 'success');
-        // Reload the cats to see the changes
-        this.getCats();
+        this.cats.update(items => items.map(item => item._id === cat._id ? cat : item));
       },
       error: error => console.error(error)
     });

From 59656864fb0be49b11d614b7c0bb879a27a11b89 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 23:11:11 +0100
Subject: [PATCH 46/52] fix: remove providers from app

---
 client/app/app.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/app/app.ts b/client/app/app.ts
index 95d85e0d..1d05e53d 100644
--- a/client/app/app.ts
+++ b/client/app/app.ts
@@ -3,12 +3,11 @@ import { RouterModule, RouterOutlet } from '@angular/router';
 
 import { AuthService } from './services/auth.service';
 import { ToastService } from './shared/toast/toast.service';
-import { LoadingComponent } from './shared/loading/loading.component';
 
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet, RouterModule],
-  providers: [AuthService, ToastService, LoadingComponent],
+  providers: [ToastService],
   templateUrl: './app.html',
 })
 export class App implements AfterViewChecked {

From 371672544c900cc673353b5f5a31894162ccf3da Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 23:24:54 +0100
Subject: [PATCH 47/52] test: fix authservice missing in providers

---
 client/app/app.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/app/app.spec.ts b/client/app/app.spec.ts
index 3bcd0d19..204805d7 100644
--- a/client/app/app.spec.ts
+++ b/client/app/app.spec.ts
@@ -3,6 +3,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
 
 import { App } from './app';
+import { AuthService } from './services/auth.service';
 import { UserService } from './services/user.service';
 import { ToastService } from './shared/toast/toast.service';
 
@@ -14,6 +15,7 @@ describe('App', () => {
     await TestBed.configureTestingModule({
       imports: [App, RouterTestingModule], // @todo replace deprecated
       providers: [
+        AuthService,
         ToastService,
         UserService,
         { provide: JWT_OPTIONS, useValue: {} },

From 51921c57b5325547ec6c8f9fcc4b79deb8612807 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Thu, 5 Feb 2026 23:25:36 +0100
Subject: [PATCH 48/52] fix: update token so user role is updated even if app
 is reloaded

---
 client/app/account/account.component.ts |  6 ++++--
 client/app/services/user.service.ts     |  4 ++--
 server/controllers/user.ts              | 13 +++++++++++++
 server/tsconfig.json                    |  7 +++++--
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/client/app/account/account.component.ts b/client/app/account/account.component.ts
index c5b74d88..c9d000be 100644
--- a/client/app/account/account.component.ts
+++ b/client/app/account/account.component.ts
@@ -38,9 +38,11 @@ export class AccountComponent implements OnInit {
   save(): void {
     const user = this.user();
     this.userService.editUser(user).subscribe({
-      next: () => {
+      next: res => {
         this.toast.setMessage('Account settings saved!', 'success');
-        this.auth.setCurrentUser(user);
+        const decodedUser = this.auth.decodeUserFromToken(res.token);
+        this.auth.setCurrentUser(decodedUser);
+        localStorage.setItem('token', res.token);
       },
       error: error => console.error(error)
     });
diff --git a/client/app/services/user.service.ts b/client/app/services/user.service.ts
index 48142393..65f289c4 100644
--- a/client/app/services/user.service.ts
+++ b/client/app/services/user.service.ts
@@ -33,8 +33,8 @@ export class UserService {
     return this.http.get<User>(`/api/user/${user._id}`);
   }
 
-  editUser(user: User): Observable<string> {
-    return this.http.put(`/api/user/${user._id}`, user, { responseType: 'text' });
+  editUser(user: User): Observable<{ token: string }> {
+    return this.http.put<{ token: string }>(`/api/user/${user._id}`, user);
   }
 
   deleteUser(user: User): Observable<string> {
diff --git a/server/controllers/user.ts b/server/controllers/user.ts
index 287607c7..86e62a7a 100644
--- a/server/controllers/user.ts
+++ b/server/controllers/user.ts
@@ -27,6 +27,19 @@ class UserCtrl extends BaseCtrl<IUser> {
     }
   };
 
+  update = async (req: Request, res: Response) => {
+    try {
+      const user = await this.model.findOneAndUpdate({ _id: req.params.id }, req.body, { new: true });
+      if (!user) {
+        return res.sendStatus(404);
+      }
+      const token = sign({ user }, secret, { expiresIn: '24h' });
+      return res.status(200).json({ token });
+    } catch (err) {
+      return res.status(400).json({ error: (err as Error).message });
+    }
+  };
+
 }
 
 export default UserCtrl;
diff --git a/server/tsconfig.json b/server/tsconfig.json
index 80292ef3..2e4c9b0b 100644
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -4,6 +4,9 @@
     "outDir": "../dist/server",
     "baseUrl": "",
     "module": "nodenext",
-    "types": ["node", "jest"]
-  }
+    "types": ["node", "jest"],
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitOverride": false
+  },
+  "include": ["**/*.ts"]
 }
\ No newline at end of file

From 37073d80ec516f3b0e8c54608bb59a7cd0b60649 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Fri, 6 Feb 2026 16:26:32 +0100
Subject: [PATCH 49/52] test: add more tests for app, as logged in, as admin

---
 client/app/app.spec.ts | 56 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 51 insertions(+), 5 deletions(-)

diff --git a/client/app/app.spec.ts b/client/app/app.spec.ts
index 204805d7..244a1be4 100644
--- a/client/app/app.spec.ts
+++ b/client/app/app.spec.ts
@@ -1,30 +1,44 @@
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';
 
 import { App } from './app';
 import { AuthService } from './services/auth.service';
 import { UserService } from './services/user.service';
 import { ToastService } from './shared/toast/toast.service';
 
+class AuthServiceMock {
+  currentUser = () => ({ _id: '1', username: 'test1@example.com', role: 'user' });
+
+  loggedIn = signal<boolean>(true);
+  isAdmin = signal<boolean>(false);
+  
+  login(): void {
+    this.loggedIn.set(true);
+  }
+  logout(): void {
+    this.loggedIn.set(false);
+  }
+}
+
 describe('App', () => {
   let fixture: ComponentFixture<App>;
   let compiled: HTMLElement;
+  let authService: AuthService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App, RouterTestingModule], // @todo replace deprecated
       providers: [
-        AuthService,
         ToastService,
         UserService,
-        { provide: JWT_OPTIONS, useValue: {} },
-        JwtHelperService
+        { provide: AuthService, useClass: AuthServiceMock },
       ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(App);
     compiled = fixture.nativeElement as HTMLElement;
+    authService = fixture.debugElement.injector.get(AuthService);
     await fixture.whenStable();
   });
 
@@ -34,9 +48,41 @@ describe('App', () => {
   });
 
   it('should render nav links', async () => {
+    authService.loggedIn.set(false);
+    fixture.detectChanges();
+    expect(authService.loggedIn()).toBeFalsy();
+    const navLinks = compiled.querySelectorAll('.nav-link');
+    expect(navLinks[0]?.textContent).toContain('Home');
+    expect(navLinks[1]?.textContent).toContain('Cats');
+    expect(navLinks[2]?.textContent).toContain('Login');
+    expect(navLinks[3]?.textContent).toContain('Register');
+  });
+
+  it('should render nav links as logged in', async () => {
+    authService.loggedIn.set(true);
+    fixture.detectChanges();
+    expect(authService.loggedIn()).toBeTruthy();
+    const navLinks = compiled.querySelectorAll('.nav-link');
+    console.log(Array.from(navLinks).map(link => link.textContent));
+    expect(navLinks[0]?.textContent).toContain('Home');
+    expect(navLinks[1]?.textContent).toContain('Cats');
+    expect(navLinks[2]?.textContent).toContain('Account');
+    expect(navLinks[3]?.textContent).toContain('Logout');
+  });
+  
+  it('should render nav links as logged in as admin', async () => {
+    authService.loggedIn.set(true);
+    authService.isAdmin.set(true);
+    fixture.detectChanges();
+    expect(authService.loggedIn()).toBeTruthy();
+    expect(authService.isAdmin()).toBeTruthy();
     const navLinks = compiled.querySelectorAll('.nav-link');
+    console.log(Array.from(navLinks).map(link => link.textContent));
     expect(navLinks[0]?.textContent).toContain('Home');
     expect(navLinks[1]?.textContent).toContain('Cats');
-    // @todo test nav links if logged in or not
+    expect(navLinks[2]?.textContent).toContain('Account');
+    expect(navLinks[3]?.textContent).toContain('Admin');
+    expect(navLinks[4]?.textContent).toContain('Logout');
   });
+  
 });

From 477963d9a6bdff66dc3365b6ab67ab7160823f0b Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Fri, 6 Feb 2026 16:28:21 +0100
Subject: [PATCH 50/52] test: remove jwt providers

---
 client/app/account/account.component.spec.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/app/account/account.component.spec.ts b/client/app/account/account.component.spec.ts
index a38a1a5a..b6f00c98 100644
--- a/client/app/account/account.component.spec.ts
+++ b/client/app/account/account.component.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { JWT_OPTIONS, JwtHelperService } from '@auth0/angular-jwt';
 import { Observable, of } from 'rxjs';
 
 import { AccountComponent } from './account.component';
@@ -8,6 +7,9 @@ import { UserService } from '../services/user.service';
 import { ToastService } from '../shared/toast/toast.service';
 import { User } from '../shared/models/user.model';
 
+class AuthServiceMock {
+  currentUser = () => ({});
+}
 class UserServiceMock {
   mockUser = {
     username: 'Test user',
@@ -27,10 +29,9 @@ describe('Component: Account', () => {
     await TestBed.configureTestingModule({
       imports: [AccountComponent],
       providers: [
-        AuthService,
         ToastService,
+        { provide: AuthService, useClass: AuthServiceMock },
         { provide: UserService, useClass: UserServiceMock },
-        { provide: JWT_OPTIONS, useValue: {} }, JwtHelperService
       ]
     }).compileComponents();
     

From 094869ee7a24e1dd9d52eb82b7a9868ed4efbf3a Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Fri, 6 Feb 2026 16:33:17 +0100
Subject: [PATCH 51/52] test: user auth service mock with signals

---
 client/app/account/account.component.spec.ts          |  3 ++-
 .../app/add-cat-form/add-cat-form.component.spec.ts   |  5 +----
 client/app/admin/admin.component.spec.ts              |  4 +++-
 client/app/app.spec.ts                                |  6 ++----
 client/app/login/login.component.spec.ts              | 11 ++++++++---
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/client/app/account/account.component.spec.ts b/client/app/account/account.component.spec.ts
index b6f00c98..d4b690dd 100644
--- a/client/app/account/account.component.spec.ts
+++ b/client/app/account/account.component.spec.ts
@@ -1,3 +1,4 @@
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable, of } from 'rxjs';
 
@@ -8,7 +9,7 @@ import { ToastService } from '../shared/toast/toast.service';
 import { User } from '../shared/models/user.model';
 
 class AuthServiceMock {
-  currentUser = () => ({});
+  currentUser = signal<User>(new User());
 }
 class UserServiceMock {
   mockUser = {
diff --git a/client/app/add-cat-form/add-cat-form.component.spec.ts b/client/app/add-cat-form/add-cat-form.component.spec.ts
index c04b1bc3..17e0b7e3 100644
--- a/client/app/add-cat-form/add-cat-form.component.spec.ts
+++ b/client/app/add-cat-form/add-cat-form.component.spec.ts
@@ -13,10 +13,7 @@ describe('Component: AddCatForm', () => {
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       imports: [AddCatFormComponent, FormsModule, ReactiveFormsModule],
-      providers: [
-        UntypedFormBuilder,
-        ToastService,
-        CatService]
+      providers: [UntypedFormBuilder, ToastService, CatService]
     }).compileComponents();
 
     fixture = TestBed.createComponent(AddCatFormComponent);
diff --git a/client/app/admin/admin.component.spec.ts b/client/app/admin/admin.component.spec.ts
index 3c494719..c3246eb9 100644
--- a/client/app/admin/admin.component.spec.ts
+++ b/client/app/admin/admin.component.spec.ts
@@ -1,13 +1,15 @@
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { of, Observable } from 'rxjs';
 
 import { AuthService } from '../services/auth.service';
 import { UserService } from '../services/user.service';
 import { ToastService } from '../shared/toast/toast.service';
+import { User } from '../shared/models/user.model';
 import { AdminComponent } from './admin.component';
 
 class AuthServiceMock {
-  currentUser = () => ({ _id: '1', username: 'test1@example.com', role: 'admin' });
+  currentUser = signal<User>({ _id: '1', username: 'test1@example.com', role: 'admin' });
 }
 
 class UserServiceMock {
diff --git a/client/app/app.spec.ts b/client/app/app.spec.ts
index 244a1be4..01d70132 100644
--- a/client/app/app.spec.ts
+++ b/client/app/app.spec.ts
@@ -6,10 +6,10 @@ import { App } from './app';
 import { AuthService } from './services/auth.service';
 import { UserService } from './services/user.service';
 import { ToastService } from './shared/toast/toast.service';
+import { User } from './shared/models/user.model';
 
 class AuthServiceMock {
-  currentUser = () => ({ _id: '1', username: 'test1@example.com', role: 'user' });
-
+  currentUser = signal<User>({ _id: '1', username: 'test1@example.com', role: 'user' });
   loggedIn = signal<boolean>(true);
   isAdmin = signal<boolean>(false);
   
@@ -63,7 +63,6 @@ describe('App', () => {
     fixture.detectChanges();
     expect(authService.loggedIn()).toBeTruthy();
     const navLinks = compiled.querySelectorAll('.nav-link');
-    console.log(Array.from(navLinks).map(link => link.textContent));
     expect(navLinks[0]?.textContent).toContain('Home');
     expect(navLinks[1]?.textContent).toContain('Cats');
     expect(navLinks[2]?.textContent).toContain('Account');
@@ -77,7 +76,6 @@ describe('App', () => {
     expect(authService.loggedIn()).toBeTruthy();
     expect(authService.isAdmin()).toBeTruthy();
     const navLinks = compiled.querySelectorAll('.nav-link');
-    console.log(Array.from(navLinks).map(link => link.textContent));
     expect(navLinks[0]?.textContent).toContain('Home');
     expect(navLinks[1]?.textContent).toContain('Cats');
     expect(navLinks[2]?.textContent).toContain('Account');
diff --git a/client/app/login/login.component.spec.ts b/client/app/login/login.component.spec.ts
index 5d9ae678..191c7c9e 100644
--- a/client/app/login/login.component.spec.ts
+++ b/client/app/login/login.component.spec.ts
@@ -1,12 +1,18 @@
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { JWT_OPTIONS, JwtHelperService } from '@auth0/angular-jwt';
 
 import { ToastService } from '../shared/toast/toast.service';
 import { AuthService } from '../services/auth.service';
 import { UserService } from '../services/user.service';
+import { User } from '../shared/models/user.model';
 import { LoginComponent } from './login.component';
 
+class AuthServiceMock {
+  currentUser = signal<User>(new User());
+  loggedIn = signal<boolean>(true);
+}
+
 describe('Component: Login', () => {
   let component: LoginComponent;
   let fixture: ComponentFixture<LoginComponent>;
@@ -18,9 +24,8 @@ describe('Component: Login', () => {
       providers: [
         UntypedFormBuilder,
         ToastService,
-        AuthService,
         UserService,
-        JwtHelperService, { provide: JWT_OPTIONS, useValue: {} }
+        { provide: AuthService, useClass: AuthServiceMock },
       ],
     }).compileComponents();
 

From b587f982fea94446405f03dd1f9e9c1c227e37f5 Mon Sep 17 00:00:00 2001
From: DavideViolante <fungtq3@gmail.com>
Date: Fri, 6 Feb 2026 16:36:34 +0100
Subject: [PATCH 52/52] fix: remove useless async

---
 client/app/about/about.component.spec.ts        | 2 +-
 client/app/account/account.component.spec.ts    | 6 +++---
 client/app/app.spec.ts                          | 6 +++---
 client/app/cats/cats.component.spec.ts          | 2 +-
 client/app/shared/toast/toast.component.spec.ts | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/app/about/about.component.spec.ts b/client/app/about/about.component.spec.ts
index 56db3c28..9b5cf19c 100644
--- a/client/app/about/about.component.spec.ts
+++ b/client/app/about/about.component.spec.ts
@@ -21,7 +21,7 @@ describe('Component: About', () => {
     expect(app).toBeTruthy();
   });
 
-  it('should render the header', async () => {
+  it('should render the header', () => {
     expect(compiled.querySelector('.card-header')?.textContent).toContain('About');
   });
 });
diff --git a/client/app/account/account.component.spec.ts b/client/app/account/account.component.spec.ts
index d4b690dd..9b76f886 100644
--- a/client/app/account/account.component.spec.ts
+++ b/client/app/account/account.component.spec.ts
@@ -46,17 +46,17 @@ describe('Component: Account', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should render the header', async () => {
+  it('should render the header', () => {
     expect(compiled.querySelector('.card-header')?.textContent).toContain('Account settings');
   });
 
-  it('should display the username and email inputs filled', async () => {
+  it('should display the username and email inputs filled', () => {
     const inputs = compiled.querySelectorAll('input');
     expect(inputs[0].value).toContain('Test user');
     expect(inputs[1].value).toContain('test@example.com');
   });
 
-  it('should display the save button enabled', async () => {
+  it('should display the save button enabled', () => {
     const button = compiled.querySelector('button');
     expect(button).toBeTruthy();
     expect(button?.disabled).toBeFalsy();
diff --git a/client/app/app.spec.ts b/client/app/app.spec.ts
index 01d70132..d9f4e1b4 100644
--- a/client/app/app.spec.ts
+++ b/client/app/app.spec.ts
@@ -47,7 +47,7 @@ describe('App', () => {
     expect(app).toBeTruthy();
   });
 
-  it('should render nav links', async () => {
+  it('should render nav links', () => {
     authService.loggedIn.set(false);
     fixture.detectChanges();
     expect(authService.loggedIn()).toBeFalsy();
@@ -58,7 +58,7 @@ describe('App', () => {
     expect(navLinks[3]?.textContent).toContain('Register');
   });
 
-  it('should render nav links as logged in', async () => {
+  it('should render nav links as logged in', () => {
     authService.loggedIn.set(true);
     fixture.detectChanges();
     expect(authService.loggedIn()).toBeTruthy();
@@ -69,7 +69,7 @@ describe('App', () => {
     expect(navLinks[3]?.textContent).toContain('Logout');
   });
   
-  it('should render nav links as logged in as admin', async () => {
+  it('should render nav links as logged in as admin', () => {
     authService.loggedIn.set(true);
     authService.isAdmin.set(true);
     fixture.detectChanges();
diff --git a/client/app/cats/cats.component.spec.ts b/client/app/cats/cats.component.spec.ts
index 40d9d87d..8f88c89a 100644
--- a/client/app/cats/cats.component.spec.ts
+++ b/client/app/cats/cats.component.spec.ts
@@ -47,7 +47,7 @@ describe('Component: Cats', () => {
     expect(header?.textContent).toContain('Current cats (2)');
   });
 
-  it('should display the text for no cats', async () => {
+  it('should display the text for no cats', () => {
     component.cats.set([]);
     fixture.detectChanges();
     const header = compiled.querySelector('.card-header');
diff --git a/client/app/shared/toast/toast.component.spec.ts b/client/app/shared/toast/toast.component.spec.ts
index 620292ed..679fe16b 100644
--- a/client/app/shared/toast/toast.component.spec.ts
+++ b/client/app/shared/toast/toast.component.spec.ts
@@ -33,7 +33,7 @@ describe('Component: Toast', () => {
     expect(div).toBeNull();
   });
 
-  it('should set the message and create the DOM element', async () => {
+  it('should set the message and create the DOM element', () => {
     const mockMessage = {
       body: 'test message',
       type: 'warning'