frontend/src/app/app.routes.ts

@@ -18,5 +18,5 @@ export const routes: Routes = [
     path: 'deposit',
     component: DepositComponent,
     canActivate: [authGuard],
-  },
+  }
 ];

frontend/src/app/deposit/deposit.component.html

@@ -1,8 +1,5 @@
 <form [formGroup]="form">
-  @if (errorMsg) {
+  <input type="number" formControlName="amount">€
-    <div>{{ errorMsg }}</div>
+  <br>
-  }
-  <input type="number" formControlName="amount" />€
-  <br />
   <button type="button" (click)="submit()">Einzahlen</button>
 </form>

frontend/src/app/deposit/deposit.component.ts

@@ -1,51 +1,32 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { 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',
   standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [
+    ReactiveFormsModule,
+  ],
   templateUrl: './deposit.component.html',
-  styleUrl: './deposit.component.css',
+  styleUrl: './deposit.component.css'
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DepositComponent implements OnInit {
+export class DepositComponent implements OnInit{
-  protected form!: FormGroup;
+  protected form = new FormGroup({amount: new FormControl(50, [Validators.min(50)])});
-  protected errorMsg: string = '';
   private stripe: Stripe | null = null;
   private service: DepositService = inject(DepositService);
 
   async ngOnInit() {
-    this.form = new FormGroup({
+    this.stripe = await loadStripe('pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG');
-      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) {
+    if (this.stripe) {
-      this.errorMsg = 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
+      console.log(JSON.stringify(this.form.value.amount as number));
-      return;
+      this.service.handleDeposit(this.form.value.amount as number).subscribe(({sessionId}) => {
+        this.stripe?.redirectToCheckout({sessionId});
+      });
     }
-    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 });
-    });
   }
 }

frontend/src/app/service/deposit.service.ts

@@ -2,13 +2,14 @@ import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
+
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class DepositService {
   private http: HttpClient = inject(HttpClient);
 
   handleDeposit(amount: number): Observable<{ sessionId: string }> {
-    return this.http.post<{ sessionId: string }>('/backend/deposit/checkout', { amount });
+    return this.http.post<{sessionId: string}>('/backend/deposit/checkout', {amount});
   }
 }