diff --git a/backend/src/main/java/de/szut/casino/deposit/DepositController.java b/backend/src/main/java/de/szut/casino/deposit/DepositController.java index c178867..6bc0fbc 100644 --- a/backend/src/main/java/de/szut/casino/deposit/DepositController.java +++ b/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.RequestBody; -import org.springframework.web.bind.annotation.RequestHeader; -import org.springframework.web.bind.annotation.RestController; +import org.springframework.web.bind.annotation.*; @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(); diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties index 792244e..c7ccadf 100644 --- a/backend/src/main/resources/application.properties +++ b/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 diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html index 91179a3..fdaf87a 100644 --- a/frontend/src/app/feature/deposit/deposit.component.html +++ b/frontend/src/app/feature/deposit/deposit.component.html @@ -1,13 +1,11 @@ - -
-
-

Guthaben aufladen

+@if (isOpen) { +
+
+

Guthaben aufladen

-
+ @if (errorMsg) { {{ errorMsg }} -
+ }
- - + +
- +} diff --git a/frontend/src/app/feature/home/home.component.html b/frontend/src/app/feature/home/home.component.html index cc1ed16..1cad75c 100644 --- a/frontend/src/app/feature/home/home.component.html +++ b/frontend/src/app/feature/home/home.component.html @@ -28,7 +28,7 @@ >

{{ game.name }}

- +
@@ -47,7 +47,7 @@ >

{{ game.name }}

- +
@@ -60,7 +60,7 @@

Konto

- +
+ +

Letzte Transaktionen

diff --git a/frontend/src/app/feature/home/home.component.ts b/frontend/src/app/feature/home/home.component.ts index 6400d5a..88fe552 100644 --- a/frontend/src/app/feature/home/home.component.ts +++ b/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[] = [ - { - 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', - }, - ]; + recentTransactions: Transaction[] = []; openDepositModal() { this.isDepositModalOpen = true; @@ -77,4 +70,11 @@ export default class HomeComponent { closeDepositModal() { this.isDepositModalOpen = false; } + + openDepositConfirmationModal() { + this.isDepositSuccessful = true; + } + closeDepositConfirmationModal() { + this.isDepositSuccessful = false; + } } diff --git a/frontend/src/app/feature/landing/landing.component.html b/frontend/src/app/feature/landing/landing.component.html index 597c71a..bffa9ad 100644 --- a/frontend/src/app/feature/landing/landing.component.html +++ b/frontend/src/app/feature/landing/landing.component.html @@ -10,7 +10,7 @@
200% bis zu 500€

+ 200 Freispiele

-
@@ -28,21 +28,21 @@

Slots

Klassische Spielautomaten

- +

Plinko

Spannendes Geschicklichkeitsspiel

- +
@@ -52,21 +52,21 @@

Poker

Texas Hold'em & mehr

- +

Liars Dice

Würfelspiel mit Strategie

- +
diff --git a/frontend/src/app/shared/components/confirmation/confirmation.component.html b/frontend/src/app/shared/components/confirmation/confirmation.component.html new file mode 100644 index 0000000..d9546e0 --- /dev/null +++ b/frontend/src/app/shared/components/confirmation/confirmation.component.html @@ -0,0 +1,11 @@ +@if (successful) { +
+
+

Bestätigung

+

Der Vorgang wurde erfolgreich abgeschlossen.

+ +
+
+} diff --git a/frontend/src/app/shared/components/confirmation/confirmation.component.ts b/frontend/src/app/shared/components/confirmation/confirmation.component.ts new file mode 100644 index 0000000..425ddba --- /dev/null +++ b/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(); + + public closeModal() { + this.close.emit(); + } +} diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index b3e3df3..0294aa0 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -12,10 +12,10 @@ @@ -58,10 +58,10 @@ Spiele
@if (!isLoggedIn) { - + } @if (isLoggedIn) { - + }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css index bfdb7fb..5693d6b 100644 --- a/frontend/src/styles.css +++ b/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; +}