SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 64 Wiki Activity Actions

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

Browse source 
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>
This commit is contained in:
lziemke 2025-03-05 11:11:12 +00:00
commit d61ef4df7e
10 changed files with 99 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
backend/src/main/java/de/szut/casino/deposit/DepositController.java
View file

@ -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();

2
backend/src/main/resources/application.properties
View file

@ -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

25
frontend/src/app/feature/deposit/deposit.component.html
View file

@ -1,13 +1,11 @@
<ng-container *ngIf="isOpen">
<div class="fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:purple">
<div
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="text-xl section-heading">Guthaben aufladen</h2>
@if (isOpen) {
<div class="modal-bg">
<div class="modal-card">
<h2 class="modal-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
(click)="closeModal()"
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>
<button (click)="closeModal()" class="button-secondary">Abbrechen</button>
<button (click)="submit()" class="button-primary w-full py-2">Einzahlen</button>
</div>
</div>
</div>
</ng-container>
}

11
frontend/src/app/feature/home/home.component.html
View file

@ -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">

46
frontend/src/app/feature/home/home.component.ts
View file

@ -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;
}
}

14
frontend/src/app/feature/landing/landing.component.html
View file

@ -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>

11
frontend/src/app/shared/components/confirmation/confirmation.component.html Normal file
View file

@ -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>
}

16
frontend/src/app/shared/components/confirmation/confirmation.component.ts Normal file
View file

@ -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();
}
}

8
frontend/src/app/shared/components/navbar/navbar.component.html
View file

@ -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>

18
frontend/src/styles.css
View file

@ -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;
}