From 177dd7859241e3d98349e5c45e807af0351a824f Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 09:42:42 +0100 Subject: [PATCH 01/11] wip --- backend/build.gradle.kts | 1 + .../casino/deposit/DepositController.java | 48 +++++++++++++++++++ .../de/szut/casino/deposit/dto/AmountDto.java | 21 ++++++++ .../szut/casino/deposit/dto/SessionIdDto.java | 21 ++++++++ .../src/main/resources/application.properties | 2 +- frontend/bun.lock | 3 ++ frontend/package.json | 1 + frontend/src/app/app.routes.ts | 6 +++ .../src/app/deposit/deposit.component.css | 0 .../src/app/deposit/deposit.component.html | 14 ++++++ frontend/src/app/deposit/deposit.component.ts | 32 +++++++++++++ 11 files changed, 148 insertions(+), 1 deletion(-) create mode 100644 backend/src/main/java/de/szut/casino/deposit/DepositController.java create mode 100644 backend/src/main/java/de/szut/casino/deposit/dto/AmountDto.java create mode 100644 backend/src/main/java/de/szut/casino/deposit/dto/SessionIdDto.java create mode 100644 frontend/src/app/deposit/deposit.component.css create mode 100644 frontend/src/app/deposit/deposit.component.html create mode 100644 frontend/src/app/deposit/deposit.component.ts diff --git a/backend/build.gradle.kts b/backend/build.gradle.kts index f10394a..565e524 100644 --- a/backend/build.gradle.kts +++ b/backend/build.gradle.kts @@ -24,6 +24,7 @@ repositories { } dependencies { + implementation("com.stripe:stripe-java:20.79.0") implementation("org.springframework.boot:spring-boot-starter-data-jpa") implementation("org.springframework.boot:spring-boot-starter-web") compileOnly("org.projectlombok:lombok") diff --git a/backend/src/main/java/de/szut/casino/deposit/DepositController.java b/backend/src/main/java/de/szut/casino/deposit/DepositController.java new file mode 100644 index 0000000..c7c85a8 --- /dev/null +++ b/backend/src/main/java/de/szut/casino/deposit/DepositController.java @@ -0,0 +1,48 @@ +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 org.springframework.boot.autoconfigure.cassandra.CassandraProperties; +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; + +@RestController +public class DepositController { + @PostMapping("/deposit/checkout") + public ResponseEntity checkout(@RequestBody AmountDto amountDto) { + Stripe.apiKey = "sk_test_51QrePYIvCfqz7ANgqam8rEwWcMeKiLOof3j6SCMgu2sl4sESP45DJxca16mWcYo1sQaiBv32CMR6Z4AAAGQPCJo300ubuZKO8I"; + try { + SessionCreateParams params = SessionCreateParams.builder() + .addLineItem(SessionCreateParams.LineItem.builder() + .setPriceData(InvoiceItemCreateParams.PriceData.builder() + .setCurrency("EUR") + .setUnitAmount(1L) + .build() + ) + .build()) + .setSuccessUrl("http://localhost:8080/deposit/success") + .setMode(SessionCreateParams.Mode.PAYMENT) + .build(); + try { + Session session = Session.create(params); + + return ResponseEntity.ok(new SessionIdDto(session.getId())); + } catch (StripeException e) { + return ResponseEntity.ok(e); + } + } catch (Exception e) { + return ResponseEntity.ok(e); + } + + } +} + diff --git a/backend/src/main/java/de/szut/casino/deposit/dto/AmountDto.java b/backend/src/main/java/de/szut/casino/deposit/dto/AmountDto.java new file mode 100644 index 0000000..7996d85 --- /dev/null +++ b/backend/src/main/java/de/szut/casino/deposit/dto/AmountDto.java @@ -0,0 +1,21 @@ +package de.szut.casino.deposit.dto; + +public class AmountDto { + private double amount; + + public AmountDto() { + } + + public AmountDto(double amount) { + this.amount = amount; + } + + public double getAmount() { + return amount; + } + + public void setAmount(double amount) { + this.amount = amount; + } +} + diff --git a/backend/src/main/java/de/szut/casino/deposit/dto/SessionIdDto.java b/backend/src/main/java/de/szut/casino/deposit/dto/SessionIdDto.java new file mode 100644 index 0000000..67ade61 --- /dev/null +++ b/backend/src/main/java/de/szut/casino/deposit/dto/SessionIdDto.java @@ -0,0 +1,21 @@ +package de.szut.casino.deposit.dto; + +public class SessionIdDto { + private String sessionId; + + public SessionIdDto() { + } + + public SessionIdDto(String sessionId) { + this.sessionId = sessionId; + } + + public String getSessionId() { + return sessionId; + } + + public void setSessionId(String sessionId) { + this.sessionId = sessionId; + } +} + diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties index d668f7a..938ce25 100644 --- a/backend/src/main/resources/application.properties +++ b/backend/src/main/resources/application.properties @@ -1,4 +1,4 @@ -spring.datasource.url=jdbc:postgresql://${DB_HOST:-localhost}:5432/postgresdb +spring.datasource.url=jdbc:postgresql://localhost:5432/postgresdb spring.datasource.username=postgres_user spring.datasource.password=postgres_pass server.port=8080 diff --git a/frontend/bun.lock b/frontend/bun.lock index 5011117..d2559e9 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -12,6 +12,7 @@ "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", + "@stripe/stripe-js": "^5.6.0", "@tailwindcss/postcss": "^4.0.3", "keycloak-angular": "^16.0.1", "keycloak-js": "^25.0.5", @@ -489,6 +490,8 @@ "@socket.io/component-emitter": ["@socket.io/component-emitter@3.1.2", "", {}, "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="], + "@stripe/stripe-js": ["@stripe/stripe-js@5.6.0", "", {}, "sha512-w8CEY73X/7tw2KKlL3iOk679V9bWseE4GzNz3zlaYxcTjmcmWOathRb0emgo/QQ3eoNzmq68+2Y2gxluAv3xGw=="], + "@tailwindcss/node": ["@tailwindcss/node@4.0.3", "", { "dependencies": { "enhanced-resolve": "^5.18.0", "jiti": "^2.4.2", "tailwindcss": "4.0.3" } }, "sha512-QsVJokOl0pJ4AbJV33D2npvLcHGPWi5MOSZtrtE0GT3tSx+3D0JE2lokLA8yHS1x3oCY/3IyRyy7XX6tmzid7A=="], "@tailwindcss/oxide": ["@tailwindcss/oxide@4.0.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.0.3", "@tailwindcss/oxide-darwin-arm64": "4.0.3", "@tailwindcss/oxide-darwin-x64": "4.0.3", "@tailwindcss/oxide-freebsd-x64": "4.0.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.0.3", "@tailwindcss/oxide-linux-arm64-musl": "4.0.3", "@tailwindcss/oxide-linux-x64-gnu": "4.0.3", "@tailwindcss/oxide-linux-x64-musl": "4.0.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.0.3", "@tailwindcss/oxide-win32-x64-msvc": "4.0.3" } }, "sha512-FFcp3VNvRjjmFA39ORM27g2mbflMQljhvM7gxBAujHxUy4LXlKa6yMF9wbHdTbPqTONiCyyOYxccvJyVyI/XBg=="], diff --git a/frontend/package.json b/frontend/package.json index 962c3f0..4840fd1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", + "@stripe/stripe-js": "^5.6.0", "@tailwindcss/postcss": "^4.0.3", "keycloak-angular": "^16.0.1", "keycloak-js": "^25.0.5", diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 02b958c..90b84b0 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -2,6 +2,7 @@ import { Routes } from '@angular/router'; import { LandingPageComponent } from './landing-page/landing-page.component'; import { HomepageComponent } from './homepage/homepage/homepage.component'; import { authGuard } from './auth.guard'; +import { DepositComponent } from './deposit/deposit.component'; export const routes: Routes = [ { @@ -13,4 +14,9 @@ export const routes: Routes = [ component: HomepageComponent, canActivate: [authGuard], }, + { + path: 'deposit', + component: DepositComponent, + canActivate: [authGuard], + } ]; diff --git a/frontend/src/app/deposit/deposit.component.css b/frontend/src/app/deposit/deposit.component.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/deposit/deposit.component.html b/frontend/src/app/deposit/deposit.component.html new file mode 100644 index 0000000..f3bbbb2 --- /dev/null +++ b/frontend/src/app/deposit/deposit.component.html @@ -0,0 +1,14 @@ +
+ € +
+
+
+
+
+
+
+
+
+
+ +
diff --git a/frontend/src/app/deposit/deposit.component.ts b/frontend/src/app/deposit/deposit.component.ts new file mode 100644 index 0000000..f28c694 --- /dev/null +++ b/frontend/src/app/deposit/deposit.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; +import { loadStripe, Stripe } from '@stripe/stripe-js'; + +@Component({ + selector: 'app-deposit', + standalone: true, + imports: [ + ReactiveFormsModule, + ], + templateUrl: './deposit.component.html', + styleUrl: './deposit.component.css' +}) +export class DepositComponent implements OnInit{ + protected form = new FormGroup({amount: new FormControl(50, [Validators.min(50)])}); + private stripe: Stripe | null; + + async ngOnInit() { + this.stripe = await loadStripe('pk_test_51'); + } + + submit() { + if (this.stripe) { + fetch('/backend/deposit/checkout', { + method: 'POST', + body: JSON.stringify(this.form.value), + }).then(response => response.json()).then(response => { + this.stripe?.redirectToCheckout({sessionId: response.sessionId}); + }); + } + } +} -- 2.47.2 From 1d0162d250e132eaab746f5bc71222376b30aa48 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 10:22:33 +0100 Subject: [PATCH 02/11] feat: make stripe functional --- .../casino/deposit/DepositController.java | 44 +++++++++---------- .../de/szut/casino/deposit/dto/AmountDto.java | 26 +++++------ .../src/main/resources/application.properties | 2 +- .../src/app/deposit/deposit.component.html | 9 ---- frontend/src/app/deposit/deposit.component.ts | 16 +++---- frontend/src/app/service/deposit.service.ts | 15 +++++++ 6 files changed, 56 insertions(+), 56 deletions(-) create mode 100644 frontend/src/app/service/deposit.service.ts 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 c7c85a8..965946c 100644 --- a/backend/src/main/java/de/szut/casino/deposit/DepositController.java +++ b/backend/src/main/java/de/szut/casino/deposit/DepositController.java @@ -8,6 +8,8 @@ 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.ResponseEntity; import org.springframework.web.bind.annotation.PostMapping; @@ -17,32 +19,28 @@ import org.springframework.web.bind.annotation.RestController; @RestController public class DepositController { + + @Value("${stripe.secret.key}") + private String stripeKey; + @PostMapping("/deposit/checkout") - public ResponseEntity checkout(@RequestBody AmountDto amountDto) { - Stripe.apiKey = "sk_test_51QrePYIvCfqz7ANgqam8rEwWcMeKiLOof3j6SCMgu2sl4sESP45DJxca16mWcYo1sQaiBv32CMR6Z4AAAGQPCJo300ubuZKO8I"; - try { - SessionCreateParams params = SessionCreateParams.builder() - .addLineItem(SessionCreateParams.LineItem.builder() - .setPriceData(InvoiceItemCreateParams.PriceData.builder() - .setCurrency("EUR") - .setUnitAmount(1L) - .build() - ) - .build()) - .setSuccessUrl("http://localhost:8080/deposit/success") - .setMode(SessionCreateParams.Mode.PAYMENT) - .build(); - try { - Session session = Session.create(params); + public ResponseEntity checkout(@RequestBody @Valid AmountDto amountDto) throws StripeException { + Stripe.apiKey = stripeKey; - return ResponseEntity.ok(new SessionIdDto(session.getId())); - } catch (StripeException e) { - return ResponseEntity.ok(e); - } - } catch (Exception e) { - return ResponseEntity.ok(e); - } + SessionCreateParams params = SessionCreateParams.builder() + .addLineItem(SessionCreateParams.LineItem.builder() + .setAmount((long) amountDto.getAmount() * 100) + .setCurrency("EUR") + .setQuantity(1L) + .setName("Einzahlung") + .build()) + .setSuccessUrl("http://localhost:8080/deposit/success") + .setMode(SessionCreateParams.Mode.PAYMENT) + .build(); + Session session = Session.create(params); + + return ResponseEntity.ok(new SessionIdDto(session.getId())); } } diff --git a/backend/src/main/java/de/szut/casino/deposit/dto/AmountDto.java b/backend/src/main/java/de/szut/casino/deposit/dto/AmountDto.java index 7996d85..1f1708e 100644 --- a/backend/src/main/java/de/szut/casino/deposit/dto/AmountDto.java +++ b/backend/src/main/java/de/szut/casino/deposit/dto/AmountDto.java @@ -1,21 +1,17 @@ package de.szut.casino.deposit.dto; +import jakarta.validation.constraints.Min; +import lombok.AllArgsConstructor; +import lombok.Getter; +import lombok.NoArgsConstructor; +import lombok.Setter; + +@Setter +@Getter +@AllArgsConstructor +@NoArgsConstructor public class AmountDto { + @Min(50) private double amount; - - public AmountDto() { - } - - public AmountDto(double amount) { - this.amount = amount; - } - - public double getAmount() { - return amount; - } - - public void setAmount(double amount) { - this.amount = amount; - } } diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties index 938ce25..7f00727 100644 --- a/backend/src/main/resources/application.properties +++ b/backend/src/main/resources/application.properties @@ -3,7 +3,7 @@ spring.datasource.username=postgres_user spring.datasource.password=postgres_pass server.port=8080 spring.jpa.hibernate.ddl-auto=create-drop - +stripe.secret.key=sk_test_51QrePYIvCfqz7ANgqam8rEwWcMeKiLOof3j6SCMgu2sl4sESP45DJxca16mWcYo1sQaiBv32CMR6Z4AAAGQPCJo300ubuZKO8I spring.application.name=lf12_starter #client registration configuration diff --git a/frontend/src/app/deposit/deposit.component.html b/frontend/src/app/deposit/deposit.component.html index f3bbbb2..7476f8e 100644 --- a/frontend/src/app/deposit/deposit.component.html +++ b/frontend/src/app/deposit/deposit.component.html @@ -1,14 +1,5 @@
€
-
-
-
-
-
-
-
-
-
diff --git a/frontend/src/app/deposit/deposit.component.ts b/frontend/src/app/deposit/deposit.component.ts index f28c694..6667dcd 100644 --- a/frontend/src/app/deposit/deposit.component.ts +++ b/frontend/src/app/deposit/deposit.component.ts @@ -1,6 +1,7 @@ -import { Component, 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'; @Component({ selector: 'app-deposit', @@ -13,19 +14,18 @@ import { loadStripe, Stripe } from '@stripe/stripe-js'; }) export class DepositComponent implements OnInit{ protected form = new FormGroup({amount: new FormControl(50, [Validators.min(50)])}); - private stripe: Stripe | null; + private stripe: Stripe | null = null; + private service: DepositService = inject(DepositService); async ngOnInit() { - this.stripe = await loadStripe('pk_test_51'); + this.stripe = await loadStripe('pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG'); } submit() { if (this.stripe) { - fetch('/backend/deposit/checkout', { - method: 'POST', - body: JSON.stringify(this.form.value), - }).then(response => response.json()).then(response => { - this.stripe?.redirectToCheckout({sessionId: response.sessionId}); + 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}); }); } } diff --git a/frontend/src/app/service/deposit.service.ts b/frontend/src/app/service/deposit.service.ts new file mode 100644 index 0000000..7dd8b78 --- /dev/null +++ b/frontend/src/app/service/deposit.service.ts @@ -0,0 +1,15 @@ +import { inject, Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; + + +@Injectable({ + 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}); + } +} -- 2.47.2 From 6ba4937538b102a2e4b9cb2c730c3dbc7f4a1e11 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 10:29:08 +0100 Subject: [PATCH 03/11] 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 @@
+ @if (errorMsg) { +
{{ errorMsg }}
+ } €
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 }); + }); } } -- 2.47.2 From 55cd5fefede54ad91b2f4b1a94ee13c8a79b5bd4 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 10:29:22 +0100 Subject: [PATCH 04/11] prettier --- frontend/src/app/app.routes.ts | 2 +- .../src/app/deposit/deposit.component.html | 4 ++-- frontend/src/app/deposit/deposit.component.ts | 20 +++++++++---------- frontend/src/app/service/deposit.service.ts | 5 ++--- 4 files changed, 14 insertions(+), 17 deletions(-) diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 90b84b0..2eee208 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -18,5 +18,5 @@ export const routes: Routes = [ path: 'deposit', component: DepositComponent, canActivate: [authGuard], - } + }, ]; diff --git a/frontend/src/app/deposit/deposit.component.html b/frontend/src/app/deposit/deposit.component.html index a24f3b3..cac83b2 100644 --- a/frontend/src/app/deposit/deposit.component.html +++ b/frontend/src/app/deposit/deposit.component.html @@ -2,7 +2,7 @@ @if (errorMsg) {
{{ errorMsg }}
} - € -
+ € +
diff --git a/frontend/src/app/deposit/deposit.component.ts b/frontend/src/app/deposit/deposit.component.ts index db6d41a..0da8395 100644 --- a/frontend/src/app/deposit/deposit.component.ts +++ b/frontend/src/app/deposit/deposit.component.ts @@ -7,9 +7,7 @@ import { debounceTime } from 'rxjs'; @Component({ selector: 'app-deposit', standalone: true, - imports: [ - ReactiveFormsModule, - ], + imports: [ReactiveFormsModule], templateUrl: './deposit.component.html', styleUrl: './deposit.component.css', changeDetection: ChangeDetectionStrategy.OnPush, @@ -25,15 +23,15 @@ export class DepositComponent implements OnInit { 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.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'); + this.stripe = await loadStripe( + 'pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG' + ); } submit() { diff --git a/frontend/src/app/service/deposit.service.ts b/frontend/src/app/service/deposit.service.ts index 7dd8b78..02c8ea1 100644 --- a/frontend/src/app/service/deposit.service.ts +++ b/frontend/src/app/service/deposit.service.ts @@ -2,14 +2,13 @@ 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 }); } } -- 2.47.2 From c4252c97e7d60702b635ac67102d4919466ed5f4 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 10:33:06 +0100 Subject: [PATCH 05/11] refactor: refactor application.properties --- backend/src/main/resources/application.properties | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties index 7f00727..268279f 100644 --- a/backend/src/main/resources/application.properties +++ b/backend/src/main/resources/application.properties @@ -1,9 +1,9 @@ -spring.datasource.url=jdbc:postgresql://localhost:5432/postgresdb +spring.datasource.url=jdbc:postgresql://${DB_HOST:localhost}:5432/postgresdb spring.datasource.username=postgres_user spring.datasource.password=postgres_pass server.port=8080 spring.jpa.hibernate.ddl-auto=create-drop -stripe.secret.key=sk_test_51QrePYIvCfqz7ANgqam8rEwWcMeKiLOof3j6SCMgu2sl4sESP45DJxca16mWcYo1sQaiBv32CMR6Z4AAAGQPCJo300ubuZKO8I +stripe.secret.key=${STRIPE_SECRET_KEY:sk_test_51QrePYIvCfqz7ANgqam8rEwWcMeKiLOof3j6SCMgu2sl4sESP45DJxca16mWcYo1sQaiBv32CMR6Z4AAAGQPCJo300ubuZKO8I} spring.application.name=lf12_starter #client registration configuration -- 2.47.2 From da01e272d71857fc5c447c9b47ad1c6aa7a1177c Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 10:38:32 +0100 Subject: [PATCH 06/11] refactor: outsource stripe key to environment --- frontend/src/app/deposit/deposit.component.ts | 5 ++--- frontend/src/environments/environment.ts | 3 +++ 2 files changed, 5 insertions(+), 3 deletions(-) create mode 100644 frontend/src/environments/environment.ts diff --git a/frontend/src/app/deposit/deposit.component.ts b/frontend/src/app/deposit/deposit.component.ts index 0da8395..e07ee85 100644 --- a/frontend/src/app/deposit/deposit.component.ts +++ b/frontend/src/app/deposit/deposit.component.ts @@ -3,6 +3,7 @@ import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angula import { loadStripe, Stripe } from '@stripe/stripe-js'; import { DepositService } from '../service/deposit.service'; import { debounceTime } from 'rxjs'; +import { environment } from '../../environments/environment'; @Component({ selector: 'app-deposit', @@ -29,9 +30,7 @@ export class DepositComponent implements OnInit { } }); - this.stripe = await loadStripe( - 'pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG' - ); + this.stripe = await loadStripe(environment.STRIPE_KEY); } submit() { diff --git a/frontend/src/environments/environment.ts b/frontend/src/environments/environment.ts new file mode 100644 index 0000000..f0dc69d --- /dev/null +++ b/frontend/src/environments/environment.ts @@ -0,0 +1,3 @@ +export const environment = { + STRIPE_KEY: 'pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG', +} -- 2.47.2 From cd6ace28f4a7d0df485c964d8d90c3ab4ec693ec Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 10:42:39 +0100 Subject: [PATCH 07/11] style: style form --- .../src/app/deposit/deposit.component.html | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/deposit/deposit.component.html b/frontend/src/app/deposit/deposit.component.html index cac83b2..9a0be93 100644 --- a/frontend/src/app/deposit/deposit.component.html +++ b/frontend/src/app/deposit/deposit.component.html @@ -1,8 +1,12 @@ -
- @if (errorMsg) { -
{{ errorMsg }}
- } - € -
- + +
+ {{ errorMsg }} +
+
+ + +
+
-- 2.47.2 From 7b020aee759f14308b4ab112368a6da0c56a2dae Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 10:42:53 +0100 Subject: [PATCH 08/11] refactor: run prettier --- frontend/src/app/deposit/deposit.component.html | 13 +++++++++++-- frontend/src/environments/environment.ts | 5 +++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/deposit/deposit.component.html b/frontend/src/app/deposit/deposit.component.html index 9a0be93..1bdaf6e 100644 --- a/frontend/src/app/deposit/deposit.component.html +++ b/frontend/src/app/deposit/deposit.component.html @@ -4,9 +4,18 @@
- +
- diff --git a/frontend/src/environments/environment.ts b/frontend/src/environments/environment.ts index f0dc69d..53866cc 100644 --- a/frontend/src/environments/environment.ts +++ b/frontend/src/environments/environment.ts @@ -1,3 +1,4 @@ export const environment = { - STRIPE_KEY: 'pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG', -} + STRIPE_KEY: + 'pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG', +}; -- 2.47.2 From 1f49bc6a3d2be2414290d7c9d78b548503f76190 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 11:00:27 +0100 Subject: [PATCH 09/11] refactor: add dynamic host to success url --- .../java/de/szut/casino/deposit/DepositController.java | 8 ++++++-- frontend/src/app/deposit/deposit.component.ts | 3 ++- 2 files changed, 8 insertions(+), 3 deletions(-) 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 965946c..0e1ade5 100644 --- a/backend/src/main/java/de/szut/casino/deposit/DepositController.java +++ b/backend/src/main/java/de/szut/casino/deposit/DepositController.java @@ -11,6 +11,7 @@ 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; @@ -24,7 +25,10 @@ public class DepositController { private String stripeKey; @PostMapping("/deposit/checkout") - public ResponseEntity checkout(@RequestBody @Valid AmountDto amountDto) throws StripeException { + public ResponseEntity checkout( + @RequestBody @Valid AmountDto amountDto, + @RequestHeader("Origin") String origin + ) throws StripeException { Stripe.apiKey = stripeKey; SessionCreateParams params = SessionCreateParams.builder() @@ -34,7 +38,7 @@ public class DepositController { .setQuantity(1L) .setName("Einzahlung") .build()) - .setSuccessUrl("http://localhost:8080/deposit/success") + .setSuccessUrl(origin+"/deposit/success") .setMode(SessionCreateParams.Mode.PAYMENT) .build(); diff --git a/frontend/src/app/deposit/deposit.component.ts b/frontend/src/app/deposit/deposit.component.ts index e07ee85..e55dbc6 100644 --- a/frontend/src/app/deposit/deposit.component.ts +++ b/frontend/src/app/deposit/deposit.component.ts @@ -4,11 +4,12 @@ import { loadStripe, Stripe } from '@stripe/stripe-js'; import { DepositService } from '../service/deposit.service'; import { debounceTime } from 'rxjs'; import { environment } from '../../environments/environment'; +import { NgIf } from '@angular/common'; @Component({ selector: 'app-deposit', standalone: true, - imports: [ReactiveFormsModule], + imports: [ReactiveFormsModule, NgIf], templateUrl: './deposit.component.html', styleUrl: './deposit.component.css', changeDetection: ChangeDetectionStrategy.OnPush, -- 2.47.2 From e2927abe6085fd33f5734d2e170907e423a89d69 Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 11:07:59 +0100 Subject: [PATCH 10/11] refactor: add lombok attributes to dto --- .../szut/casino/deposit/dto/SessionIdDto.java | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/backend/src/main/java/de/szut/casino/deposit/dto/SessionIdDto.java b/backend/src/main/java/de/szut/casino/deposit/dto/SessionIdDto.java index 67ade61..b3de1bc 100644 --- a/backend/src/main/java/de/szut/casino/deposit/dto/SessionIdDto.java +++ b/backend/src/main/java/de/szut/casino/deposit/dto/SessionIdDto.java @@ -1,21 +1,15 @@ package de.szut.casino.deposit.dto; +import lombok.AllArgsConstructor; +import lombok.Getter; +import lombok.NoArgsConstructor; +import lombok.Setter; + +@Setter +@Getter +@AllArgsConstructor +@NoArgsConstructor public class SessionIdDto { private String sessionId; - - public SessionIdDto() { - } - - public SessionIdDto(String sessionId) { - this.sessionId = sessionId; - } - - public String getSessionId() { - return sessionId; - } - - public void setSessionId(String sessionId) { - this.sessionId = sessionId; - } } -- 2.47.2 From b7a60f0c53ffcff04ede6298fcfb28dbdb7b1dcd Mon Sep 17 00:00:00 2001 From: Constantin Simonis Date: Thu, 13 Feb 2025 11:11:08 +0100 Subject: [PATCH 11/11] style: run eslint --- frontend/src/app/deposit/deposit.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/deposit/deposit.component.ts b/frontend/src/app/deposit/deposit.component.ts index e55dbc6..0d56c70 100644 --- a/frontend/src/app/deposit/deposit.component.ts +++ b/frontend/src/app/deposit/deposit.component.ts @@ -16,7 +16,7 @@ import { NgIf } from '@angular/common'; }) export class DepositComponent implements OnInit { protected form!: FormGroup; - protected errorMsg: string = ''; + protected errorMsg = ''; private stripe: Stripe | null = null; private service: DepositService = inject(DepositService); -- 2.47.2