feat: payment modal

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(),
   ],
 };

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 = [
   {

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>

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>

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();
+  }
 }

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>

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);
+  }
 }

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>

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;
+}