Merge pull request 'feature/confirmation-modal-after-deposit (CAS-29)' (!48) from feature/confirmation-modal-after-deposit into main

Reviewed-on: https://git.simonis.lol/projects/casino/pulls/48
Reviewed-by: Klan Jattenhoff <jan@kjan.email>
Reviewed-by: Hop In, I Have Puppies AND WiFi <jleibl@noreply@simonis.lol>

backend/src/main/java/de/szut/casino/deposit/DepositController.java

@@ -3,20 +3,13 @@ package de.szut.casino.deposit;
 import com.stripe.Stripe;
 import com.stripe.exception.StripeException;
 import com.stripe.model.checkout.Session;
-import com.stripe.param.InvoiceItemCreateParams;
-import com.stripe.param.PriceCreateParams;
 import com.stripe.param.checkout.SessionCreateParams;
 import de.szut.casino.deposit.dto.AmountDto;
 import de.szut.casino.deposit.dto.SessionIdDto;
 import jakarta.validation.Valid;
 import org.springframework.beans.factory.annotation.Value;
-import org.springframework.boot.autoconfigure.cassandra.CassandraProperties;
-import org.springframework.http.HttpHeaders;
 import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestHeader;
-import org.springframework.web.bind.annotation.RestController;
 
 @RestController
 public class DepositController {
@@ -38,7 +31,8 @@ public class DepositController {
                         .setQuantity(1L)
                         .setName("Einzahlung")
                         .build())
-                .setSuccessUrl(frontendHost+"/home")
+                .setSuccessUrl(frontendHost+"/home?success=true")
+                .setCancelUrl(frontendHost+"/home?success=false")
                 .setMode(SessionCreateParams.Mode.PAYMENT)
                 .build();
 

backend/src/main/resources/application.properties

@@ -4,7 +4,7 @@ spring.datasource.password=postgres_pass
 server.port=8080
 spring.jpa.hibernate.ddl-auto=create-drop
 stripe.secret.key=${STRIPE_SECRET_KEY:sk_test_51QrePYIvCfqz7ANgqam8rEwWcMeKiLOof3j6SCMgu2sl4sESP45DJxca16mWcYo1sQaiBv32CMR6Z4AAAGQPCJo300ubuZKO8I}
-app.frontend-host=http://localhost:3000
+app.frontend-host=http://localhost:4200
 
 spring.application.name=lf12_starter
 #client registration configuration

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

@@ -1,13 +1,11 @@
-<ng-container *ngIf="isOpen">
+@if (isOpen) {
-  <div class="fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:purple">
+  <div class="modal-bg">
-    <div
+    <div class="modal-card">
-      class="card p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-lg z-50 min-w-[300px]"
+      <h2 class="modal-heading">Guthaben aufladen</h2>
-    >
-      <h2 class="text-xl section-heading">Guthaben aufladen</h2>
       <form [formGroup]="form">
-        <div *ngIf="errorMsg">
+        @if (errorMsg) {
           {{ errorMsg }}
-        </div>
+        }
         <div class="mb-2">
           <label for="amount">Betrag</label>
           <input
@@ -19,14 +17,9 @@
         </div>
       </form>
       <div class="my-1">
-        <button
+        <button (click)="closeModal()" class="button-secondary">Abbrechen</button>
-          (click)="closeModal()"
+        <button (click)="submit()" class="button-primary w-full py-2">Einzahlen</button>
-          class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded my-2"
-        >
-          Abbrechen
-        </button>
-        <button (click)="submit()" class="button-base w-full py-2">Einzahlen</button>
       </div>
     </div>
   </div>
-</ng-container>
+}

frontend/src/app/feature/home/home.component.html

@@ -28,7 +28,7 @@
               >
                 <div class="absolute bottom-4 left-4 right-4">
                   <h4 class="game-heading">{{ game.name }}</h4>
-                  <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  <button class="button-primary w-full py-2">Jetzt Spielen</button>
                 </div>
               </div>
             </div>
@@ -47,7 +47,7 @@
               >
                 <div class="absolute bottom-4 left-4 right-4">
                   <h4 class="game-heading">{{ game.name }}</h4>
-                  <button class="button-base w-full py-2">Jetzt Spielen</button>
+                  <button class="button-primary w-full py-2">Jetzt Spielen</button>
                 </div>
               </div>
             </div>
@@ -60,7 +60,7 @@
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Konto</h3>
         <div class="space-y-4">
-          <button class="button-base w-full py-2" (click)="openDepositModal()">Einzahlen</button>
+          <button class="button-primary w-full py-2" (click)="openDepositModal()">Einzahlen</button>
           <app-deposit [isOpen]="isDepositModalOpen" (close)="closeDepositModal()"></app-deposit>
           <button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
             Transaktionen
@@ -71,6 +71,11 @@
         </div>
       </div>
 
+      <app-confirmation
+        [successful]="isDepositSuccessful"
+        (close)="closeDepositConfirmationModal()"
+      ></app-confirmation>
+
       <div class="card p-4">
         <h3 class="section-heading text-xl mb-4">Letzte Transaktionen</h3>
         <div class="space-y-3">

frontend/src/app/feature/home/home.component.ts

@@ -1,19 +1,31 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
 import { CurrencyPipe, NgFor } from '@angular/common';
 import { Game } from '../../model/Game';
 import { Transaction } from '../../model/Transaction';
 import { DepositComponent } from '../deposit/deposit.component';
+import { ConfirmationComponent } from '../../shared/components/confirmation/confirmation.component';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent],
+  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export default class HomeComponent {
+export default class HomeComponent implements OnInit {
   isDepositModalOpen = false;
+  isDepositSuccessful = false;
+
+  constructor(public route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.isDepositSuccessful = this.route.snapshot.queryParams['success'] == 'true';
+    if (this.isDepositSuccessful) {
+      this.openDepositConfirmationModal();
+    }
+  }
 
   featuredGames: Game[] = [
     {
@@ -50,26 +62,7 @@ export default class HomeComponent {
 
   allGames: Game[] = [...this.featuredGames];
 
-  recentTransactions: Transaction[] = [
+  recentTransactions: Transaction[] = [];
-    {
-      id: '1',
-      type: 'Deposit',
-      amount: 100.0,
-      date: '2024-03-20',
-    },
-    {
-      id: '2',
-      type: 'Withdrawal',
-      amount: -50.0,
-      date: '2024-03-19',
-    },
-    {
-      id: '3',
-      type: 'Bonus',
-      amount: 25.0,
-      date: '2024-03-18',
-    },
-  ];
 
   openDepositModal() {
     this.isDepositModalOpen = true;
@@ -77,4 +70,11 @@ export default class HomeComponent {
   closeDepositModal() {
     this.isDepositModalOpen = false;
   }
+
+  openDepositConfirmationModal() {
+    this.isDepositSuccessful = true;
+  }
+  closeDepositConfirmationModal() {
+    this.isDepositSuccessful = false;
+  }
 }

frontend/src/app/feature/landing/landing.component.html

@@ -10,7 +10,7 @@
         <div class="welcome-bonus">200% bis zu 500€</div>
         <p class="bonus-description">+ 200 Freispiele</p>
 
-        <button class="w-full sm:w-auto button-base px-6 sm:px-8 py-3 shadow-lg">
+        <button class="w-full sm:w-auto button-primary px-6 sm:px-8 py-3 shadow-lg">
           Bonus Sichern
         </button>
       </div>
@@ -28,21 +28,21 @@
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Slots</h3>
                     <p class="game-text">Klassische Spielautomaten</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
                 <div class="card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Plinko</h3>
                     <p class="game-text">Spannendes Geschicklichkeitsspiel</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Blackjack</h3>
                     <p class="game-text">Klassisches Kartenspiel</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
               </div>
@@ -52,21 +52,21 @@
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Poker</h3>
                     <p class="game-text">Texas Hold'em & mehr</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
                 <div class="card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Liars Dice</h3>
                     <p class="game-text">Würfelspiel mit Strategie</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
                 <div class="hidden lg:block card">
                   <div class="game-card-content">
                     <h3 class="game-heading-sm">Lootboxen</h3>
                     <p class="game-text">Überraschungskisten</p>
-                    <button class="button-base w-full py-2">Jetzt Spielen</button>
+                    <button class="button-primary w-full py-2">Jetzt Spielen</button>
                   </div>
                 </div>
               </div>

frontend/src/app/shared/components/confirmation/confirmation.component.html

@@ -0,0 +1,11 @@
+@if (successful) {
+  <div class="modal-bg">
+    <div class="modal-card">
+      <h2 class="modal-heading text-center">Bestätigung</h2>
+      <p class="py-2">Der Vorgang wurde erfolgreich abgeschlossen.</p>
+      <button type="button" class="button-primary w-full py-2 my-auto" (click)="closeModal()">
+        Schließen
+      </button>
+    </div>
+  </div>
+}

frontend/src/app/shared/components/confirmation/confirmation.component.ts

@@ -0,0 +1,16 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-confirmation',
+  standalone: true,
+  imports: [],
+  templateUrl: './confirmation.component.html',
+})
+export class ConfirmationComponent {
+  @Input() successful = true;
+  @Output() close = new EventEmitter<void>();
+
+  public closeModal() {
+    this.close.emit();
+  }
+}

frontend/src/app/shared/components/navbar/navbar.component.html

@@ -12,10 +12,10 @@
 
       <div class="hidden md:flex items-center space-x-4">
         @if (!isLoggedIn) {
-          <button (click)="login()" class="button-base px-4 py-1.5">Anmelden</button>
+          <button (click)="login()" class="button-primary px-4 py-1.5">Anmelden</button>
         }
         @if (isLoggedIn) {
-          <button (click)="logout()" class="button-base px-4 py-1.5">Abmelden</button>
+          <button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
         }
       </div>
 
@@ -58,10 +58,10 @@
         <a routerLink="/games" class="nav-mobile-link">Spiele</a>
         <div class="pt-2 space-y-2">
           @if (!isLoggedIn) {
-            <button (click)="login()" class="button-base w-full py-1.5">Anmelden</button>
+            <button (click)="login()" class="button-primary w-full py-1.5">Anmelden</button>
           }
           @if (isLoggedIn) {
-            <button (click)="logout()" class="button-base w-full py-1.5">Abmelden</button>
+            <button (click)="logout()" class="button-primary w-full py-1.5">Abmelden</button>
           }
         </div>
       </div>

frontend/src/styles.css

@@ -31,10 +31,14 @@ a {
   @apply bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300;
 }
 
-.button-base {
+.button-primary {
   @apply bg-emerald hover:bg-emerald-dark text-text-primary transition-all duration-300 active:scale-95 rounded;
 }
 
+.button-secondary {
+  @apply bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded my-2;
+}
+
 .game-card-content {
   @apply p-4;
 }
@@ -138,3 +142,15 @@ a {
 .footer-disclaimer {
   @apply text-xs;
 }
+
+.modal-bg {
+  @apply fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light;
+}
+
+.modal-card {
+  @apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 rounded-lg shadow-lg z-50 min-w-[300px];
+}
+
+.modal-heading {
+  @apply text-xl font-bold text-text-primary;
+}