wip: try to send cookie

.gitignore

@@ -192,4 +192,4 @@ dist
 .ionide
 
 # End of https://www.toptal.com/developers/gitignore/api/nextjs,node,visualstudiocode
-
+.docker/

README.md

@@ -0,0 +1,10 @@
+# FakeMoney
+A PayPal-like payment processor for virtual money, intended to be used for simulation games.
+
+## Development
+
+### Frontend
+Is written in angular + bootstrap.
+
+### Backend
+Uses NextJS + PostgreSQL with JWT as cookies.

client/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

client/.gitignore

@@ -0,0 +1,44 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db

client/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

client/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

client/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

client/.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+  // For more information, visit: https://angular.dev/ai/mcp
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}

client/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    }
+  ]
+}

client/README.md

@@ -0,0 +1,59 @@
+# Client
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

client/angular.json

@@ -0,0 +1,88 @@
+{
+  "$schema": "../node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "client": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "less"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "../dist/out-tsc/client",
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "less",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "../node_modules/bootstrap-icons/font/bootstrap-icons.min.css",
+              "src/styles.less"
+            ],
+            "scripts": [
+              "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+            ],
+            "polyfills": ["@angular/localize/init"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "options": {
+            "proxyConfig": "proxy.json"
+          },
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "client:build:production"
+            },
+            "development": {
+              "buildTarget": "client:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

client/package.json

@@ -1,12 +1,41 @@
 {
   "name": "client",
-  "version": "1.0.0",
-  "description": "",
-  "license": "GPL-3.0",
-  "author": "",
-  "type": "commonjs",
-  "main": "index.js",
+  "version": "0.0.0",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "packageManager": "npm@11.10.0",
+  "dependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.1",
+    "ng-qrcode": "^21.0.0",
+    "qrcode": "^1.5.4",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.2.0",
+    "@angular/cli": "^21.2.0",
+    "@angular/compiler-cli": "^21.2.0",
+    "@angular/localize": "^21.2.0",
+    "@types/qrcode": "^1.5.6",
+    "jsdom": "^28.0.0",
+    "less": "^4.2.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
   }
 }

client/proxy.json

@@ -0,0 +1,8 @@
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false,
+    "changeOrigin": true,
+    "withCredentials": true
+  }
+}

client/src/app/app.config.ts

@@ -0,0 +1,14 @@
+import { ApplicationConfig, DEFAULT_CURRENCY_CODE, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    {provide: DEFAULT_CURRENCY_CODE, useValue: ''},
+    {provide: DATE_PIPE_DEFAULT_OPTIONS, useValue: {dateFormat: 'shortDate'}},
+  ]
+};

client/src/app/app.html

@@ -0,0 +1,16 @@
+<main class="main">
+  <router-outlet></router-outlet>
+</main>
+<nav>
+  <ul ngbNav [(activeId)]="active" class="nav-tabs custom-navbar bg-body-secondary">
+    <li [ngbNavItem]="1" class="custom-navitem"><a ngbNavLink routerLink="/send">
+        <i class="bi bi-cash"></i>
+    </a></li>
+    <li [ngbNavItem]="2" class="custom-navitem"><a ngbNavLink routerLink="/receive">
+        <i class="bi bi-piggy-bank"></i>
+    </a></li>
+    <li [ngbNavItem]="3" class="custom-navitem"><a ngbNavLink routerLink="/profile">
+        <i class="bi bi-person"></i>
+    </a></li>
+  </ul>
+</nav>

client/src/app/app.less

@@ -0,0 +1,35 @@
+html, body{
+    max-width: 100%;
+    overflow-x: hidden;
+}
+*{
+    text-align: center;
+}
+.custom-table {
+    //table-layout: fixed;
+    max-width: 100%;
+}
+tr{
+    padding-right: .2em;
+}
+.wrap-cell{
+    word-break: break-all;
+    white-space: normal;
+}
+.main{
+    margin-bottom: 5rem;
+    padding: 1rem;
+    overflow-y: auto;
+}
+.custom-navbar{
+    width: 100vw;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: space-around; /* Distribute items evenly */
+    z-index: 1000;
+}
+.custom-navitem{
+    text-align: center; /* Center the content of each item */
+    flex: 1;
+}

client/src/app/app.routes.ts

@@ -0,0 +1,33 @@
+import { Routes } from '@angular/router';
+import { ScreenSend } from './screens/screen-send/screen-send';
+import { ScreenReceive } from './screens/screen-receive/screen-receive';
+import { ScreenProfile } from './screens/screen-profile/screen-profile';
+import { ScreenLogin } from './screens/screen-login/screen-login';
+import { authGuard } from './services/auth-guard';
+
+export const routes: Routes = [
+    {
+        path: '',
+        pathMatch:'full',
+        redirectTo: '/send',
+    },
+    {
+        path: 'login',
+        component: ScreenLogin,
+    },
+    {
+        path:'send',
+        component: ScreenSend,
+        canActivate: [authGuard],
+    },
+    {
+        path:'receive',
+        component: ScreenReceive,
+        canActivate: [authGuard],
+    },
+    {
+        path:'profile',
+        component: ScreenProfile,
+        canActivate: [authGuard],
+    },
+];

client/src/app/app.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, client');
+  });
+});

client/src/app/app.ts

@@ -0,0 +1,21 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet, RouterLinkWithHref } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+	NgbNav,
+	NgbNavItem,
+	NgbNavItemRole,
+	NgbNavLinkBase,
+} from '@ng-bootstrap/ng-bootstrap/nav';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, NgbModule, NgbNav, NgbNavItem, NgbNavItemRole, NgbNavLinkBase, RouterLinkWithHref],
+  templateUrl: './app.html',
+  styleUrl: './app.less'
+})
+export class App {
+  protected readonly title = signal('client');
+  //FIXME nav jumping back to 1 after reload
+  active = 1;
+}

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

@@ -0,0 +1,77 @@
+<div class="d-flex align-items-center min-vh-100 bg-light">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-4 col-md-6 col-sm-8">
+        <div class="card shadow-sm">
+          <div class="card-body p-4">
+            <div class="text-center mb-4">
+              <i class="bi bi-lock-fill fs-1 text-primary"></i>
+              <h3 class="mt-2">Sign In</h3>
+            </div>
+
+            <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate>
+              <!-- Email -->
+              <div class="mb-3">
+                <label for="email" class="form-label">Username</label>
+                <input
+                  type="text"
+                  id="username"
+                  class="form-control"
+                  formControlName="username"
+                  placeholder="Enter your username"
+                >
+              </div>
+
+              <!-- Password -->
+              <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
+                <div class="input-group">
+                  <input
+                    [type]="showPassword ? 'text' : 'password'"
+                    id="password"
+                    class="form-control"
+                    formControlName="password"
+                    placeholder="Enter your password"
+                  >
+                  <button
+                    class="btn btn-outline-secondary"
+                    type="button"
+                    (click)="showPassword = !showPassword"
+                  >
+                    <i class="bi" [class.bi-eye-fill]="showPassword" [class.bi-eye-slash-fill]="!showPassword"></i>
+                  </button>
+                </div>
+                </div>
+
+                <!-- Submit Button -->
+              <button
+                type="submit"
+                class="btn btn-primary w-100 mb-3"
+              >
+              @if (loading) {
+                <span> Signing In... </span>
+              }@else {
+                <span>Sign In</span>
+              }
+              </button>
+
+
+              <!-- Error Alert -->
+              <ngb-alert
+                *ngIf="error"
+                type="danger"
+                (closed)="error = null"
+                [dismissible]="true"
+              >
+                {{ error }}
+              </ngb-alert>
+
+            </form>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+

client/src/app/screens/screen-login/screen-login.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScreenLogin } from './screen-login';
+
+describe('ScreenLogin', () => {
+  let component: ScreenLogin;
+  let fixture: ComponentFixture<ScreenLogin>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ScreenLogin],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ScreenLogin);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { Validators, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Form } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { APIService } from '../../services/api';
+
+@Component({
+  selector: 'app-screen-login',
+  imports: [FormsModule, NgbModule, ReactiveFormsModule, CommonModule],
+  templateUrl: './screen-login.html',
+  styleUrl: './screen-login.less',
+})
+export class ScreenLogin {
+  loginForm: FormGroup;
+  submitted = false;
+  loading = false;
+  showPassword = false;
+  error: string | null = null;
+
+  constructor(
+    private api: APIService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private fb: FormBuilder,
+  ) {
+    this.loginForm = this.fb.group({
+      username: ['', [Validators.required]],
+      password: ['', [Validators.required]],
+    });
+  }
+
+  onSubmit() {
+    this.submitted = true;
+    this.error = null;
+    this.loading = true;
+
+    this.api.login(this.loginForm.value.username, this.loginForm.value.password).subscribe({
+      next: () => {
+        const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+        this.router.navigateByUrl(returnUrl);
+      },
+      error: (err) => {
+        this.error = err.error?.message || 'Login failed. Please try again.';
+        this.loading = false;
+      }
+    });
+    this.api.checkAuthStatus().subscribe();
+  }
+}
+

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

@@ -0,0 +1,59 @@
+<div class="container py-4">
+  <!-- Profile Header -->
+  <div class="card mb-4 shadow-sm">
+    <div class="card-body text-center p-4">
+      <div class="avatar avatar-xl mb-3">
+        <i class="bi bi-person-circle fs-1 text-primary"></i>
+      </div>
+      <h3 class="mb-1">{{ username }}</h3>
+      <p class="text-muted mb-4">{{ userID }}</p>
+      <div class="d-flex align-items-center justify-content-center gap-2 mb-1">
+        <i class="bi bi-wallet2 fs-4"></i>
+        <h3 class="mb-0">{{ balance  | currency}}</h3>
+      </div>
+      <button type="button" (click)="logOut()" class="btn btn-outline-secondary">Log out</button>
+    </div>
+  </div>
+
+  <!-- Recent Transactions -->
+  <div class="card mb-4 shadow-sm">
+    <div class="card-header bg-light">
+      <h5 class="mb-0">Recent Transactions</h5>
+    </div>
+    <div class="card-body p-0">
+      <div class="list-group list-group-flush">
+        <!-- Transaction Item -->
+         @for (transaction of transactions; track $index) {
+        <div class="list-group-item">
+          <div class="d-flex justify-content-between align-items-center">
+            <div class="d-flex align-items-center">
+              <div class="me-3">
+                <i class="bi bi-person-fill fs-4 text-secondary"></i>
+              </div>
+              <div class="text-start">
+              @if (transaction.receiverID == userID) {
+                <h6 class="mb-0">{{ transaction.senderID }}</h6>
+              }@else {
+                <h6 class="mb-0">{{ transaction.receiverID }}</h6>
+              }
+                <small class="text-muted">{{ transaction.date | date:'medium' }}</small>
+              </div>
+            </div>
+            <div class="text-end">
+              @if (transaction.receiverID == userID) {
+                <h6 class="mb-0 text-success">
+                  {{ transaction.amount | currency }}
+                </h6>
+              }@else {
+                <h6 class="mb-0 text-danger">
+                  {{ - transaction.amount | currency }}
+                </h6>
+              }
+            </div>
+          </div>
+        </div>
+       }
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScreenProfile } from './screen-profile';
+
+describe('ScreenProfile', () => {
+  let component: ScreenProfile;
+  let fixture: ComponentFixture<ScreenProfile>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ScreenProfile],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ScreenProfile);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,46 @@
+import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { APIService } from '../../services/api';
+import Transaction from '@model/transaction';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-screen-profile',
+  imports: [CurrencyPipe, DatePipe, CommonModule],
+  templateUrl: './screen-profile.html',
+  styleUrl: './screen-profile.less',
+})
+export class ScreenProfile implements OnInit{
+  username = 'John Doe';
+  userID = 'testuser';
+  balance = 200;
+  transactions!: Transaction[];
+
+  constructor(
+    private api: APIService,
+    private router: Router,
+  ){}
+
+  ngOnInit(): void {
+    // FIXME transactions displaying delayed (only on second nav click)
+    this.api.getTransactions().subscribe({
+      next: (transactions) => {
+        this.transactions = transactions;
+      },
+      error: (err) => {
+        console.error('Error fetching transactions:', err);
+      },
+    })
+  }
+  logOut(){
+    this.api.logout().subscribe({
+      next: () => {
+        this.router.navigate(['login'])
+      },
+      error: (err) => {
+        console.error('Error logging out:', err)
+      }
+    })
+  }
+
+}

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

@@ -0,0 +1,63 @@
+<div class="container py-5">
+  <div class="row justify-content-center">
+    <div class="col-lg-6 col-md-8">
+      <div class="card shadow-sm">
+        <div class="card-header bg-success text-white">
+          <h3 class="mb-0">Receive Money</h3>
+        </div>
+        <div class="card-body p-4 text-center">
+          <!-- Large Amount Display -->
+          <div class="mb-4">
+            <label class="form-label h5">Amount to Receive</label>
+            <div class="input-group input-group-lg mb-3">
+              <span class="input-group-text"><i class="bi bi-wallet2"></i></span>
+              <input
+                type="number"
+                class="form-control text-center fs-2"
+                placeholder="0.00"
+                [(ngModel)]="amount"
+              />
+            </div>
+          </div>
+
+          <!-- Shareable Link -->
+          <div class="mb-4">
+            <p class="text-muted">Share this link to receive money:</p>
+            <div class="input-group mb-3">
+              <input
+                type="text"
+                class="form-control"
+                [value]="shareableLink"
+                readonly
+              />
+              <button class="btn btn-outline-secondary" (click)="copyLink()">
+                Copy
+              </button>
+            </div>
+          </div>
+
+          <!-- Share Button -->
+      
+        <ng-template #content let-modal>
+            <div class="modal-header">
+                <h4 class="modal-title" id="modal-basic-title">Pay {{ amount}} to {{ user }}</h4>
+                <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
+            </div>
+            <div class="modal-body text-center">
+                      <qr-code [value]="shareableLink" 
+                             size="300" 
+                             errorCorrectionLevel="M" />
+            </div>
+        </ng-template>
+          <div class="d-grid gap-2">
+            <button class="btn btn-primary btn-lg" (click)="open(content)">
+              <i class="bi bi-qr-code-scan me-2"></i> Show QR Code
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScreenReceive } from './screen-receive';
+
+describe('ScreenReceive', () => {
+  let component: ScreenReceive;
+  let fixture: ComponentFixture<ScreenReceive>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ScreenReceive],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ScreenReceive);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,28 @@
+import { Component, inject, TemplateRef } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { QrCodeComponent } from 'ng-qrcode';
+
+@Component({
+  selector: 'app-screen-receive',
+  imports: [FormsModule, QrCodeComponent],
+  templateUrl: './screen-receive.html',
+  styleUrl: './screen-receive.less',
+})
+export class ScreenReceive {
+  private modalService = inject(NgbModal);
+
+  user = 'DemoUser';
+  amount: number = 0;
+  get shareableLink(): string {
+    const currentDomain = window.location.origin;
+    return `${currentDomain}/send/${this.user}?amount=${this.amount}`;
+  }
+
+  copyLink() {
+    navigator.clipboard.writeText(this.shareableLink);
+  }
+  open(content: TemplateRef<any>) {
+    this.modalService.open(content)
+  }
+}

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

@@ -0,0 +1,57 @@
+<div class="container py-5">
+  <div class="row justify-content-center">
+    <div class="col-lg-6 col-md-8">
+      <div class="card shadow-sm">
+        <div class="card-header bg-primary text-white">
+          <h3 class="mb-0">Send Money</h3>
+        </div>
+        <div class="card-body p-4">
+          <!-- Amount Input (Centered Large Field) -->
+          <div class="text-center mb-4">
+            <label class="form-label h5">Amount</label>
+            <div class="input-group input-group-lg mb-3">
+              <span class="input-group-text"><i class="bi bi-wallet2"></i></span>
+              <input
+                type="number"
+                class="form-control text-center fs-2"
+                placeholder="0.00"
+                [(ngModel)]="amount"
+              />
+            </div>
+          </div>
+
+          <!-- Recipient Field -->
+          <div class="mb-3">
+            <label class="form-label">To</label>
+            <div class="input-group">
+              <span class="input-group-text">@</span>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Email or phone number"
+                [(ngModel)]="recipient"
+              />
+            </div>
+          </div>
+
+          <!-- Note Field -->
+          <div class="mb-4">
+            <label class="form-label">Note (Optional)</label>
+            <textarea class="form-control" rows="2" [(ngModel)]="note"></textarea>
+          </div>
+
+          <!-- Action Buttons -->
+          <div class="d-grid gap-2">
+            <button class="btn btn-primary btn-lg" (click)="sendMoney()">
+              Send Money
+            </button>
+            <button class="btn btn-outline-secondary btn-lg" (click)="cancel()">
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScreenSend } from './screen-send';
+
+describe('ScreenSend', () => {
+  let component: ScreenSend;
+  let fixture: ComponentFixture<ScreenSend>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ScreenSend],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ScreenSend);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-screen-send',
+  imports: [FormsModule],
+  templateUrl: './screen-send.html',
+  styleUrl: './screen-send.less',
+})
+export class ScreenSend {
+  amount: number = 0;
+  recipient: string = '';
+  note: string = '';
+
+  sendMoney() {
+    console.log('Sending:', this.amount, 'to', this.recipient);
+    // Add your logic here (e.g., API call)
+  }
+
+  cancel() {
+    this.amount = 0;
+    this.recipient = '';
+    this.note = '';
+  }
+}

client/src/app/services/api.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { APIService } from './api';
+
+describe('Api', () => {
+  let service: APIService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(APIService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

client/src/app/services/api.ts

@@ -0,0 +1,35 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, catchError, map, Observable, of, tap } from 'rxjs';
+import Transaction from '@model/transaction'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class APIService {
+  private apiUrl = 'http://localhost:3000/api' 
+  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
+  isAuthenticated$ = this.isAuthenticatedSubject.asObservable();
+  
+  constructor(private http: HttpClient){}
+
+  getTransactions(): Observable<Transaction[]>{
+    return this.http.get<Transaction[]>(this.apiUrl + '/transactions');
+  }
+  login(username: string, password: string): Observable<any>{
+    return this.http.post(this.apiUrl + '/auth/login',{ 'username': username, 'password': password});
+  }
+  logout(): Observable<any>{
+    return this.http.post(this.apiUrl + '/auth/logout', {});
+  }
+  checkAuthStatus(): Observable<boolean> {
+    return this.http.get(`${this.apiUrl}/auth/status`, { withCredentials: true}).pipe(
+      map(() => true),
+      catchError(() => of(false)),
+      tap({
+        next: () => this.isAuthenticatedSubject.next(true),
+        error: () => this.isAuthenticatedSubject.next(false),
+      })
+    );
+  }
+}

client/src/app/services/auth-guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth-guard';
+
+describe('authGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) =>
+    TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

client/src/app/services/auth-guard.ts

@@ -0,0 +1,20 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { APIService } from './api';
+import { map } from 'rxjs/operators';
+
+export const authGuard: CanActivateFn = (route, state) => {
+  const api = inject(APIService);
+  const router = inject(Router);
+
+  return api.isAuthenticated$.pipe(
+    map((isAuthenticated) => {
+      if (isAuthenticated) {
+        return true;
+      } else {
+        router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+        return false;
+      }
+    })
+  );
+};

client/src/app/services/data.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataService } from './data';
+
+describe('Data', () => {
+  let service: DataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

client/src/app/services/data.ts

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DataService {}

client/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Client</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

client/src/main.ts

@@ -0,0 +1,7 @@
+/// <reference types="@angular/localize" />
+
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));

client/src/styles.less

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

client/tsconfig.app.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc/client",
+    "types": ["@angular/localize"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}

client/tsconfig.json

@@ -0,0 +1,31 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../tsconfig.json",
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "importHelpers": true,
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

client/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc/spec",
+    "types": ["vitest/globals", "@angular/localize"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}

package.json

@@ -5,13 +5,21 @@
   "license": "GPL-3.0",
   "author": "",
   "type": "commonjs",
-  "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "server": "npm run dev --workspace=server",
+    "client": "npm start --prefix client",
+    "dev": "concurrently \"npm run server\" \"npm run client\""
   },
   "workspaces": [
     "client",
-    "server",
-    "shared"
-  ]
+    "server"
+  ],
+  "devDependencies": {
+    "@types/node": "^25.3.2",
+    "concurrently": "^9.2.1",
+    "nodemon": "^3.1.14",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  }
 }

server/compose.yml

@@ -0,0 +1,19 @@
+services:
+  postgres:
+    image: postgres
+    environment:
+      POSTGRES_PASSWORD: pass
+    ports:
+      - "5432:5432"
+    volumes:
+      - ./.docker:/var/lib/postgresql
+
+  adminer:
+    image: adminer
+    restart: always
+    environment:
+      ADMINER_DEFAULT_SERVER: postgres
+    ports:
+      - "8080:8080"
+    depends_on:
+      - postgres

server/nodemon.json

@@ -0,0 +1,6 @@
+{
+  "watch": ["src"],
+  "ext": "ts,json",
+  "exec": "ts-node src/index.ts"
+}
+

server/package.json

@@ -5,9 +5,42 @@
   "license": "GPL-3.0",
   "author": "",
   "type": "commonjs",
-  "main": "index.js",
+  "main": "../dist/out-tsc/server/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "node": "nodemon",
+    "start": "ts-node src/index.ts",
+    "build": "tsc",
+    "serve": "node ../dist/out-tsc/server/index.js",
+    "setup": "docker compose up -d",
+    "teardown": "docker compose down",
+    "dev": "npm run setup && npm run node; npm run teardown"
   },
-  "devDependencies": {}
+  "dependencies": {
+    "cookie-parser": "^1.4.7",
+    "cors": "^2.8.6",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "pg": "^8.20.0",
+    "pg-hstore": "^2.3.4",
+    "reflect-metadata": "^0.2.2",
+    "sequelize": "^6.37.7",
+    "sequelize-typescript": "^2.1.6",
+    "ts-jose": "^6.2.0",
+    "winston": "^3.19.0"
+  },
+  "devDependencies": {
+    "@types/cookie-parser": "^1.4.10",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/node": "^25.3.5",
+    "@types/pg": "^8.16.0",
+    "@types/validator": "^13.15.10",
+    "concurrently": "^9.2.1",
+    "eslint": "^10.0.2",
+    "nodemon": "^3.1.14",
+    "prettier": "^3.8.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  }
 }

server/src/index.ts

@@ -0,0 +1,38 @@
+import express, { Express, Request, Response } from "express";
+import cors from "cors";
+import cookieParser from "cookie-parser";
+import transactionsRouter from './routes/transactions';
+import authRouter from './routes/auth';
+import { db, testConnection } from "./util/db";
+import { logger } from "./util/logging";
+
+const app: Express = express();
+// TODO replace with frontend URL
+app.use(cors({ origin: 'http://localhost:4200', credentials: true}));
+app.use(cookieParser());
+app.use(express.json());
+
+app.get("/api/health", (req: Request, res: Response) => {
+  res.json({ status: "OK" });
+});
+
+app.use('/api/transactions', transactionsRouter);
+app.use('/api/auth', authRouter);
+
+const PORT: number = parseInt(process.env.PORT as string) || 3000;
+
+async function startServer() {
+  await testConnection();
+
+  // Sync models (use migrations in production!)
+  // Use { force: true } to drop and recreate tables (development only!)
+  await db.sync({ alter: true });
+
+  app.listen(PORT, () => {
+    logger.info(`🚀 Backend Server running on http://localhost:${PORT}`);
+  });
+}
+startServer().catch((err) => {
+  logger.error('Failed to start server:', err);
+  process.exit(1);
+});

server/src/model/transaction.ts

@@ -0,0 +1,25 @@
+import { Table, Column, Model, CreatedAt, ForeignKey, BelongsTo} from 'sequelize-typescript';
+import User from './user';
+
+@Table
+export default class Transaction extends Model{
+    @Column
+    declare amount: number;
+
+    @Column
+    @ForeignKey(()=> User)
+    declare senderID: string;
+
+    @BelongsTo(() => User, 'senderID')
+    declare sender: User;
+
+    @Column
+    @ForeignKey(()=> User)
+    declare receiverID: string;
+
+    @BelongsTo(() => User, 'receiverID')
+    declare receiver: User;
+
+    @CreatedAt
+    declare date: Date;
+}

server/src/model/user.ts

@@ -0,0 +1,21 @@
+import { Table, Column, Model, CreatedAt, DataType} from 'sequelize-typescript';
+
+@Table
+export default class User extends Model{
+
+    @Column({primaryKey: true, unique: true, allowNull: false})
+    declare userID: string;
+
+    @Column
+    declare displayName: string;
+
+    @Column(DataType.DECIMAL(20,2))
+    declare balance: number;
+
+    @Column
+    declare password: string;
+
+    @CreatedAt
+    declare creationDate: Date;
+
+}

server/src/routes/auth.ts

@@ -0,0 +1,54 @@
+import express, { Request } from 'express';
+import { logger } from '../util/logging';
+import User from '../model/user';
+import { JWT, JWK } from 'ts-jose';
+
+const router = express.Router();
+
+router.post('/login', async (req, res) => {
+  try {
+    const { username, password } = req.body;
+    const user = await User.findOne({where: { userID: username}});
+    if (!user) return res.status(401).json({ message: 'Invalid credentials' });
+    const isMatch = (password == user.password);
+    //TODO hash passwords
+    //const isMatch = await bcrypt.compare(password, user.passwordHash);
+    if (!isMatch) return res.status(401).json({ message: 'Invalid credentials' });
+
+    // successfully authenticated
+    res.cookie('jwt', 'toekn', {
+      httpOnly: true,    // Prevent XSS
+      secure: false,      // HTTPS only
+      sameSite: 'lax', // CSRF protection
+      maxAge: 86400000,  // 1 day
+    });
+    res.json({ message: 'Logged in successfully' });
+  }catch (err) {
+    logger.error('Failed to authenticate:', err);
+    res.status(500).json({ error: 'Failed to authenticate' });
+  }
+});
+
+router.post('/logout', (req, res) => {
+  res.clearCookie('jwt');
+  res.json({ message: 'Logged out successfully' });
+});
+
+router.get('/status', (req, res) => {
+  console.log(req.cookies);
+  if (isAuthenticated(req)){
+    return res.status(200).json({authenticated: true});
+  }
+  return res.status(401).json({authenticated: false});
+})
+
+function isAuthenticated(req: Request){
+  // TODO check JWT
+  return req.cookies.jwt
+}
+
+function getJWT(user: User){
+
+}
+
+export default router;

server/src/routes/transactions.ts

@@ -0,0 +1,17 @@
+import express from 'express';
+import { logger } from '../util/logging';
+import Transaction from '../model/transaction';
+
+const router = express.Router();
+
+router.get('/', async (req, res) => {
+  try {
+    const transactions = await Transaction.findAll({ limit: 10 });
+    res.json(transactions);
+  } catch (err) {
+    logger.error('Failed to fetch transactions:', err);
+    res.status(500).json({ error: 'Failed to fetch transactions' });
+  }
+});
+
+export default router;

server/src/util/db.ts

@@ -0,0 +1,31 @@
+import { Sequelize } from 'sequelize-typescript';
+import { logger } from './logging';
+import User from '../model/user';
+import Transaction from '../model/transaction';
+
+// Initialize Sequelize
+const db = new Sequelize({
+  dialect: 'postgres',
+  host: process.env.DB_HOST || 'localhost',
+  port: parseInt(process.env.DB_PORT || '5432'),
+  database: process.env.DB_NAME || 'postgres',
+  username: process.env.DB_USER || 'postgres',
+  password: process.env.DB_PASSWORD || 'pass',
+  logging: logger.debug.bind(logger),
+});
+
+db.addModels([User, Transaction ])
+
+// Test the connection
+async function testConnection() {
+  try {
+    await db.authenticate();
+    logger.info('✅ Database connection established.');
+  } catch (err) {
+    logger.error('❌ Unable to connect to the database:', err);
+    process.exit(1); // Exit if DB connection fails
+  }
+}
+
+// Export Sequelize instance and models
+export { logger, db, testConnection };

server/src/util/logging.ts

@@ -0,0 +1,20 @@
+import winston, { format } from "winston";
+import dotenv from 'dotenv';
+
+dotenv.config();
+const logger = winston.createLogger({
+  level:'info',
+})
+if (process.env.NODE_ENV !== 'production') {
+  logger.add(new winston.transports.Console({
+    format: format.combine(
+      format.colorize({all: true}),
+      format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),
+      format.printf((info) => `${info.timestamp} [${info.level}]: ${info.message}`),
+    )
+
+}));
+}
+
+// Export Sequelize instance and models
+export { logger };

server/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc/server",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "module": "nodenext",
+    "moduleResolution": "nodenext"
+
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+

shared/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "shared",
-  "version": "1.0.0",
-  "description": "",
-  "license": "GPL-3.0",
-  "author": "",
-  "type": "commonjs",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "devDependencies": {}
-}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "module": "es2022",
+    "lib": ["es2022", "dom"],
+    "paths": {
+      "@model/*": ["server/src/model/*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}