From 6ba4937538b102a2e4b9cb2c730c3dbc7f4a1e11 Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Thu, 13 Feb 2025 10:29:08 +0100
Subject: [PATCH] feat: add form validation

---
 .../src/app/deposit/deposit.component.html    |  3 ++
 frontend/src/app/deposit/deposit.component.ts | 39 ++++++++++++++-----
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/deposit/deposit.component.html b/frontend/src/app/deposit/deposit.component.html
index 7476f8e..a24f3b3 100644
--- a/frontend/src/app/deposit/deposit.component.html
+++ b/frontend/src/app/deposit/deposit.component.html
@@ -1,4 +1,7 @@
 <form [formGroup]="form">
+  @if (errorMsg) {
+    <div>{{ errorMsg }}</div>
+  }
   <input type="number" formControlName="amount">€
   <br>
   <button type="button" (click)="submit()">Einzahlen</button>
diff --git a/frontend/src/app/deposit/deposit.component.ts b/frontend/src/app/deposit/deposit.component.ts
index 6667dcd..db6d41a 100644
--- a/frontend/src/app/deposit/deposit.component.ts
+++ b/frontend/src/app/deposit/deposit.component.ts
@@ -1,7 +1,8 @@
-import { Component, inject, OnInit } from '@angular/core';
+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';
 
 @Component({
   selector: 'app-deposit',
@@ -10,23 +11,43 @@ import { DepositService } from '../service/deposit.service';
     ReactiveFormsModule,
   ],
   templateUrl: './deposit.component.html',
-  styleUrl: './deposit.component.css'
+  styleUrl: './deposit.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DepositComponent implements OnInit{
-  protected form = new FormGroup({amount: new FormControl(50, [Validators.min(50)])});
+export class DepositComponent implements OnInit {
+  protected form!: FormGroup;
+  protected errorMsg: string = '';
   private stripe: Stripe | null = null;
   private service: DepositService = inject(DepositService);
 
   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('pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG');
   }
 
   submit() {
-    if (this.stripe) {
-      console.log(JSON.stringify(this.form.value.amount as number));
-      this.service.handleDeposit(this.form.value.amount as number).subscribe(({sessionId}) => {
-        this.stripe?.redirectToCheckout({sessionId});
-      });
+    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 });
+    });
   }
 }