feat: payment modal

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

@@ -0,0 +1,62 @@
+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 { debounceTime } from 'rxjs';
+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, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose],
+  templateUrl: './deposit.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DepositComponent implements OnInit {
+  protected form!: FormGroup;
+  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({
+      amount: new FormControl(50, [Validators.min(50)]),
+    });
+
+    this.form.controls['amount'].valueChanges.pipe(debounceTime(1000)).subscribe((value) => {
+      if (value < 50) {
+        this.errorMsg = 'Minimum Einzahlungsbetrag ist 50€';
+      }
+    });
+
+    this.stripe = await loadStripe(environment.STRIPE_KEY);
+  }
+
+  submit() {
+    if (!this.stripe) {
+      this.errorMsg = 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
+      return;
+    }
+    if (!this.form.valid) {
+      this.errorMsg = 'Bitte geben Sie einen gültigen Betrag ein.';
+      return;
+    }
+
+    this.service.handleDeposit(this.form.value.amount as number).subscribe(({ sessionId }) => {
+      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);
+  }
 }