feat: payment modal

2025-02-13 11:35:30 +01:00 · 2025-02-13 11:35:30 +01:00 · c7d62bb4e3
commit c7d62bb4e3
parent 702e54b5da
13 changed files with 79 additions and 33 deletions
--- a/frontend/angular.json
+++ b/frontend/angular.json
@ -24,6 +24,7 @@
              }
            ],
            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
              "src/styles.css"
            ],
            "scripts": []
@ -78,6 +79,7 @@
              }
            ],
            "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
              "src/styles.css"
            ],
            "scripts": []
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@ -5,10 +5,12 @@
      "name": "lf10-starter2024",
      "dependencies": {
        "@angular/animations": "^18.2.0",
+        "@angular/cdk": "~18.2.14",
        "@angular/common": "^18.2.0",
        "@angular/compiler": "^18.2.0",
        "@angular/core": "^18.2.0",
        "@angular/forms": "^18.2.0",
+        "@angular/material": "~18.2.14",
        "@angular/platform-browser": "^18.2.0",
        "@angular/platform-browser-dynamic": "^18.2.0",
        "@angular/router": "^18.2.0",
@ -73,6 +75,8 @@

    "@angular/build": ["@angular/build@18.2.14", "", { "dependencies": { "@ampproject/remapping": "2.3.0", "@angular-devkit/architect": "0.1802.14", "@babel/core": "7.25.2", "@babel/helper-annotate-as-pure": "7.24.7", "@babel/helper-split-export-declaration": "7.24.7", "@babel/plugin-syntax-import-attributes": "7.24.7", "@inquirer/confirm": "3.1.22", "@vitejs/plugin-basic-ssl": "1.1.0", "browserslist": "^4.23.0", "critters": "0.0.24", "esbuild": "0.23.0", "fast-glob": "3.3.2", "https-proxy-agent": "7.0.5", "listr2": "8.2.4", "lmdb": "3.0.13", "magic-string": "0.30.11", "mrmime": "2.0.0", "parse5-html-rewriting-stream": "7.0.0", "picomatch": "4.0.2", "piscina": "4.6.1", "rollup": "4.22.4", "sass": "1.77.6", "semver": "7.6.3", "vite": "5.4.14", "watchpack": "2.4.1" }, "peerDependencies": { "@angular/compiler-cli": "^18.0.0", "@angular/localize": "^18.0.0", "@angular/platform-server": "^18.0.0", "@angular/service-worker": "^18.0.0", "less": "^4.2.0", "postcss": "^8.4.0", "tailwindcss": "^2.0.0 || ^3.0.0", "typescript": ">=5.4 <5.6" }, "optionalPeers": ["@angular/localize", "@angular/platform-server", "@angular/service-worker", "less", "postcss", "tailwindcss"] }, "sha512-9g24Oe/ZLULacW3hEpRCjSZIJPJTzN5BeFbA27epSV5NsrQOoeUGsEpRs90Zmt6eReO0fW1BGshWRoZtpSedcw=="],

+    "@angular/cdk": ["@angular/cdk@18.2.14", "", { "dependencies": { "tslib": "^2.3.0" }, "optionalDependencies": { "parse5": "^7.1.2" }, "peerDependencies": { "@angular/common": "^18.0.0 || ^19.0.0", "@angular/core": "^18.0.0 || ^19.0.0", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-vDyOh1lwjfVk9OqoroZAP8pf3xxKUvyl+TVR8nJxL4c5fOfUFkD7l94HaanqKSRwJcI2xiztuu92IVoHn8T33Q=="],
+
    "@angular/cli": ["@angular/cli@18.2.14", "", { "dependencies": { "@angular-devkit/architect": "0.1802.14", "@angular-devkit/core": "18.2.14", "@angular-devkit/schematics": "18.2.14", "@inquirer/prompts": "5.3.8", "@listr2/prompt-adapter-inquirer": "2.0.15", "@schematics/angular": "18.2.14", "@yarnpkg/lockfile": "1.1.0", "ini": "4.1.3", "jsonc-parser": "3.3.1", "listr2": "8.2.4", "npm-package-arg": "11.0.3", "npm-pick-manifest": "9.1.0", "pacote": "18.0.6", "resolve": "1.22.8", "semver": "7.6.3", "symbol-observable": "4.0.0", "yargs": "17.7.2" }, "bin": { "ng": "bin/ng.js" } }, "sha512-kWgRRQtJPkr8iwN7DMbTi3sXOnv7H5QhbU/GgD3nNX3D8YCSPmnby4PAE/P3wn7FsIK9JsSchsCt7MZ37Urh9A=="],

    "@angular/common": ["@angular/common@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/core": "18.2.13", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-4ZqrNp1PoZo7VNvW+sbSc2CB2axP1sCH2wXl8B0wdjsj8JY1hF1OhuugwhpAHtGxqewed2kCXayE+ZJqSTV4jw=="],
@ -85,6 +89,8 @@

    "@angular/forms": ["@angular/forms@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": "18.2.13", "@angular/core": "18.2.13", "@angular/platform-browser": "18.2.13", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-A67D867fu3DSBhdLWWZl/F5pr7v2+dRM2u3U7ZJ0ewh4a+sv+0yqWdJW+a8xIoiHxS+btGEJL2qAKJiH+MCFfg=="],

+    "@angular/material": ["@angular/material@18.2.14", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "^18.0.0 || ^19.0.0", "@angular/cdk": "18.2.14", "@angular/common": "^18.0.0 || ^19.0.0", "@angular/core": "^18.0.0 || ^19.0.0", "@angular/forms": "^18.0.0 || ^19.0.0", "@angular/platform-browser": "^18.0.0 || ^19.0.0", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-28pxzJP49Mymt664WnCtPkKeg7kXUsQKTKGf/Kl95rNTEdTJLbnlcc8wV0rT0yQNR7kXgpfBnG7h0ETLv/iu5Q=="],
+
    "@angular/platform-browser": ["@angular/platform-browser@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "18.2.13", "@angular/common": "18.2.13", "@angular/core": "18.2.13" }, "optionalPeers": ["@angular/animations"] }, "sha512-tu7ZzY6qD3ATdWFzcTcsAKe7M6cJeWbT/4/bF9unyGO3XBPcNYDKoiz10+7ap2PUd0fmPwvuvTvSNJiFEBnB8Q=="],

    "@angular/platform-browser-dynamic": ["@angular/platform-browser-dynamic@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": "18.2.13", "@angular/compiler": "18.2.13", "@angular/core": "18.2.13", "@angular/platform-browser": "18.2.13" } }, "sha512-kbQCf9+8EpuJC7buBxhSiwBtXvjAwAKh6MznD6zd2pyCYqfY6gfRCZQRtK59IfgVtKmEONWI9grEyNIRoTmqJg=="],
--- a/frontend/package.json
+++ b/frontend/package.json
@ -14,10 +14,12 @@
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.2.0",
+    "@angular/cdk": "~18.2.14",
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
+    "@angular/material": "~18.2.14",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@ -12,6 +12,7 @@ import {
  KeycloakService,
 } from 'keycloak-angular';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

 export const initializeKeycloak = (keycloak: KeycloakService) => async () =>
  keycloak.init({
@ -50,6 +51,6 @@ export const appConfig: ApplicationConfig = {
      provide: HTTP_INTERCEPTORS,
      useClass: KeycloakBearerInterceptor,
      multi: true,
-    },
+    }, provideAnimationsAsync(),
  ],
 };
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@ -2,7 +2,7 @@ import { Routes } from '@angular/router';
 import { LandingComponent } from './feature/landing/landing.component';
 import { HomeComponent } from './feature/home/home.component';
 import { authGuard } from './auth.guard';
-import { DepositComponent } from './deposit/deposit.component';
+import { DepositComponent } from './feature/deposit/deposit.component';

 export const routes: Routes = [
  {
--- a/frontend/src/app/deposit/deposit.component.css
+++ b/frontend/src/app/deposit/deposit.component.css
--- a/frontend/src/app/deposit/deposit.component.html
+++ b/frontend/src/app/deposit/deposit.component.html
@ -1,21 +0,0 @@
-<form [formGroup]="form" class="max-w-md mx-auto p-4 bg-white shadow-md rounded-lg">
-  <div *ngIf="errorMsg" class="mb-4 text-red-500">
-    {{ errorMsg }}
-  </div>
-  <div class="mb-4">
-    <label for="amount" class="block text-sm font-medium text-gray-700">Betrag</label>
-    <input
-      type="number"
-      id="amount"
-      formControlName="amount"
-      class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-black bg-white"
-    />
-  </div>
-  <button
-    type="button"
-    (click)="submit()"
-    class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-  >
-    Einzahlen
-  </button>
-</form>
--- a/frontend/src/app/feature/deposit/deposit.component.html
+++ b/frontend/src/app/feature/deposit/deposit.component.html
@ -0,0 +1,20 @@
+<h2 mat-dialog-title>Guthaben aufladen</h2>
+<mat-dialog-content>
+    <form [formGroup]="form">
+        <div *ngIf="errorMsg">
+            {{ errorMsg }}
+        </div>
+        <div>
+            <label for="amount">Betrag</label>
+            <input
+                    type="number"
+                    id="amount"
+                    formControlName="amount"
+            />
+        </div>
+    </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button (click)="closeDialog()">Abbrechen</button>
+    <button (click)="submit()">Einzahlen</button>
+</mat-dialog-actions>
--- a/frontend/src/app/feature/deposit/deposit.component.ts
+++ b/frontend/src/app/feature/deposit/deposit.component.ts
@ -1,17 +1,23 @@
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { loadStripe, Stripe } from '@stripe/stripe-js';
-import { DepositService } from '../service/deposit.service';
+import { DepositService } from '../../service/deposit.service';
 import { debounceTime } from 'rxjs';
-import { environment } from '../../environments/environment';
+import { environment } from '../../../environments/environment';
 import { NgIf } from '@angular/common';
+import {
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";

@Component({
  selector: 'app-deposit',
  standalone: true,
-  imports: [ReactiveFormsModule, NgIf],
+  imports: [ReactiveFormsModule, NgIf, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose],
  templateUrl: './deposit.component.html',
-  styleUrl: './deposit.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DepositComponent implements OnInit {
@ -19,6 +25,7 @@ export class DepositComponent implements OnInit {
  protected errorMsg = '';
  private stripe: Stripe | null = null;
  private service: DepositService = inject(DepositService);
+  public dialogRef: MatDialogRef<DepositComponent> = inject(MatDialogRef<DepositComponent>);

  async ngOnInit() {
    this.form = new FormGroup({
@ -48,4 +55,8 @@ export class DepositComponent implements OnInit {
      this.stripe?.redirectToCheckout({ sessionId });
    });
  }
+
+  public closeDialog(): void {
+    this.dialogRef.close();
+  }
 }
--- a/frontend/src/app/feature/home/home.component.html
+++ b/frontend/src/app/feature/home/home.component.html
@ -5,7 +5,7 @@
      <button class="btn-primary" (click)="logout()">Ausloggen</button>
    </div>
    <div>
-      <button class="btn-primary">Benutzer</button>
+      <button (click)="openDialog()">Einzahlen</button>
    </div>
  </div>
 </nav>
--- a/frontend/src/app/feature/home/home.component.ts
+++ b/frontend/src/app/feature/home/home.component.ts
@ -1,5 +1,7 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { KeycloakService } from 'keycloak-angular';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {KeycloakService} from 'keycloak-angular';
+import {MatDialog} from "@angular/material/dialog";
+import {DepositComponent} from "../deposit/deposit.component";

@Component({
  selector: 'app-homepage',
@ -10,10 +12,15 @@ import { KeycloakService } from 'keycloak-angular';
 })
 export class HomeComponent {
  private keycloakService: KeycloakService = inject(KeycloakService);
+  public dialog: MatDialog = inject(MatDialog);

-  logout() {
+  public logout() {
    const baseUrl = window.location.origin;

    this.keycloakService.logout(`${baseUrl}/`);
  }
+
+  public openDialog() {
+    this.dialog.open(DepositComponent);
+  }
 }
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -6,8 +6,10 @@
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
+      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+  <body class="mat-typography">
    <app-root></app-root>
  </body>
 </html>
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@ -10,3 +10,19 @@
 body {
  @apply bg-deep-blue text-gray-100;
 }
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
+
+.mat-mdc-dialog-container {
+  --mdc-dialog-container-color: var(--color-deep-blue-light) !important;
+  --mdc-dialog-subhead-color: #ffffff !important;
+  --mdc-dialog-supporting-text-color: #9ca3af !important;
+  --mdc-dialog-container-shape: 6px !important;
+}