From c7d62bb4e34c64c501760c31ca7aeabcb3226820 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 13 Feb 2025 11:35:30 +0100 Subject: [PATCH 1/5] feat: payment modal --- frontend/angular.json | 2 ++ frontend/bun.lock | 6 ++++++ frontend/package.json | 2 ++ frontend/src/app/app.config.ts | 3 ++- frontend/src/app/app.routes.ts | 2 +- .../src/app/deposit/deposit.component.css | 0 .../src/app/deposit/deposit.component.html | 21 ------------------- .../feature/deposit/deposit.component.html | 20 ++++++++++++++++++ .../deposit/deposit.component.ts | 19 +++++++++++++---- .../src/app/feature/home/home.component.html | 2 +- .../src/app/feature/home/home.component.ts | 13 +++++++++--- frontend/src/index.html | 6 ++++-- frontend/src/styles.css | 16 ++++++++++++++ 13 files changed, 79 insertions(+), 33 deletions(-) delete mode 100644 frontend/src/app/deposit/deposit.component.css delete mode 100644 frontend/src/app/deposit/deposit.component.html create mode 100644 frontend/src/app/feature/deposit/deposit.component.html rename frontend/src/app/{ => feature}/deposit/deposit.component.ts (73%) diff --git a/frontend/angular.json b/frontend/angular.json index f7a1430..a6a1c7c 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -24,6 +24,7 @@ } ], "styles": [ + "@angular/material/prebuilt-themes/azure-blue.css", "src/styles.css" ], "scripts": [] @@ -78,6 +79,7 @@ } ], "styles": [ + "@angular/material/prebuilt-themes/azure-blue.css", "src/styles.css" ], "scripts": [] diff --git a/frontend/bun.lock b/frontend/bun.lock index 2154b1a..f09b071 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -5,10 +5,12 @@ "name": "lf10-starter2024", "dependencies": { "@angular/animations": "^18.2.0", + "@angular/cdk": "~18.2.14", "@angular/common": "^18.2.0", "@angular/compiler": "^18.2.0", "@angular/core": "^18.2.0", "@angular/forms": "^18.2.0", + "@angular/material": "~18.2.14", "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", @@ -73,6 +75,8 @@ "@angular/build": ["@angular/build@18.2.14", "", { "dependencies": { "@ampproject/remapping": "2.3.0", "@angular-devkit/architect": "0.1802.14", "@babel/core": "7.25.2", "@babel/helper-annotate-as-pure": "7.24.7", "@babel/helper-split-export-declaration": "7.24.7", "@babel/plugin-syntax-import-attributes": "7.24.7", "@inquirer/confirm": "3.1.22", "@vitejs/plugin-basic-ssl": "1.1.0", "browserslist": "^4.23.0", "critters": "0.0.24", "esbuild": "0.23.0", "fast-glob": "3.3.2", "https-proxy-agent": "7.0.5", "listr2": "8.2.4", "lmdb": "3.0.13", "magic-string": "0.30.11", "mrmime": "2.0.0", "parse5-html-rewriting-stream": "7.0.0", "picomatch": "4.0.2", "piscina": "4.6.1", "rollup": "4.22.4", "sass": "1.77.6", "semver": "7.6.3", "vite": "5.4.14", "watchpack": "2.4.1" }, "peerDependencies": { "@angular/compiler-cli": "^18.0.0", "@angular/localize": "^18.0.0", "@angular/platform-server": "^18.0.0", "@angular/service-worker": "^18.0.0", "less": "^4.2.0", "postcss": "^8.4.0", "tailwindcss": "^2.0.0 || ^3.0.0", "typescript": ">=5.4 <5.6" }, "optionalPeers": ["@angular/localize", "@angular/platform-server", "@angular/service-worker", "less", "postcss", "tailwindcss"] }, "sha512-9g24Oe/ZLULacW3hEpRCjSZIJPJTzN5BeFbA27epSV5NsrQOoeUGsEpRs90Zmt6eReO0fW1BGshWRoZtpSedcw=="], + "@angular/cdk": ["@angular/cdk@18.2.14", "", { "dependencies": { "tslib": "^2.3.0" }, "optionalDependencies": { "parse5": "^7.1.2" }, "peerDependencies": { "@angular/common": "^18.0.0 || ^19.0.0", "@angular/core": "^18.0.0 || ^19.0.0", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-vDyOh1lwjfVk9OqoroZAP8pf3xxKUvyl+TVR8nJxL4c5fOfUFkD7l94HaanqKSRwJcI2xiztuu92IVoHn8T33Q=="], + "@angular/cli": ["@angular/cli@18.2.14", "", { "dependencies": { "@angular-devkit/architect": "0.1802.14", "@angular-devkit/core": "18.2.14", "@angular-devkit/schematics": "18.2.14", "@inquirer/prompts": "5.3.8", "@listr2/prompt-adapter-inquirer": "2.0.15", "@schematics/angular": "18.2.14", "@yarnpkg/lockfile": "1.1.0", "ini": "4.1.3", "jsonc-parser": "3.3.1", "listr2": "8.2.4", "npm-package-arg": "11.0.3", "npm-pick-manifest": "9.1.0", "pacote": "18.0.6", "resolve": "1.22.8", "semver": "7.6.3", "symbol-observable": "4.0.0", "yargs": "17.7.2" }, "bin": { "ng": "bin/ng.js" } }, "sha512-kWgRRQtJPkr8iwN7DMbTi3sXOnv7H5QhbU/GgD3nNX3D8YCSPmnby4PAE/P3wn7FsIK9JsSchsCt7MZ37Urh9A=="], "@angular/common": ["@angular/common@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/core": "18.2.13", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-4ZqrNp1PoZo7VNvW+sbSc2CB2axP1sCH2wXl8B0wdjsj8JY1hF1OhuugwhpAHtGxqewed2kCXayE+ZJqSTV4jw=="], @@ -85,6 +89,8 @@ "@angular/forms": ["@angular/forms@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": "18.2.13", "@angular/core": "18.2.13", "@angular/platform-browser": "18.2.13", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-A67D867fu3DSBhdLWWZl/F5pr7v2+dRM2u3U7ZJ0ewh4a+sv+0yqWdJW+a8xIoiHxS+btGEJL2qAKJiH+MCFfg=="], + "@angular/material": ["@angular/material@18.2.14", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "^18.0.0 || ^19.0.0", "@angular/cdk": "18.2.14", "@angular/common": "^18.0.0 || ^19.0.0", "@angular/core": "^18.0.0 || ^19.0.0", "@angular/forms": "^18.0.0 || ^19.0.0", "@angular/platform-browser": "^18.0.0 || ^19.0.0", "rxjs": "^6.5.3 || ^7.4.0" } }, "sha512-28pxzJP49Mymt664WnCtPkKeg7kXUsQKTKGf/Kl95rNTEdTJLbnlcc8wV0rT0yQNR7kXgpfBnG7h0ETLv/iu5Q=="], + "@angular/platform-browser": ["@angular/platform-browser@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "18.2.13", "@angular/common": "18.2.13", "@angular/core": "18.2.13" }, "optionalPeers": ["@angular/animations"] }, "sha512-tu7ZzY6qD3ATdWFzcTcsAKe7M6cJeWbT/4/bF9unyGO3XBPcNYDKoiz10+7ap2PUd0fmPwvuvTvSNJiFEBnB8Q=="], "@angular/platform-browser-dynamic": ["@angular/platform-browser-dynamic@18.2.13", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": "18.2.13", "@angular/compiler": "18.2.13", "@angular/core": "18.2.13", "@angular/platform-browser": "18.2.13" } }, "sha512-kbQCf9+8EpuJC7buBxhSiwBtXvjAwAKh6MznD6zd2pyCYqfY6gfRCZQRtK59IfgVtKmEONWI9grEyNIRoTmqJg=="], diff --git a/frontend/package.json b/frontend/package.json index 6d79510..c6be094 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,10 +14,12 @@ "private": true, "dependencies": { "@angular/animations": "^18.2.0", + "@angular/cdk": "~18.2.14", "@angular/common": "^18.2.0", "@angular/compiler": "^18.2.0", "@angular/core": "^18.2.0", "@angular/forms": "^18.2.0", + "@angular/material": "~18.2.14", "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts index e7761ba..f7dce41 100644 --- a/frontend/src/app/app.config.ts +++ b/frontend/src/app/app.config.ts @@ -12,6 +12,7 @@ import { KeycloakService, } from 'keycloak-angular'; import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; export const initializeKeycloak = (keycloak: KeycloakService) => async () => keycloak.init({ @@ -50,6 +51,6 @@ export const appConfig: ApplicationConfig = { provide: HTTP_INTERCEPTORS, useClass: KeycloakBearerInterceptor, multi: true, - }, + }, provideAnimationsAsync(), ], }; diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index b58c796..028f3db 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -2,7 +2,7 @@ import { Routes } from '@angular/router'; import { LandingComponent } from './feature/landing/landing.component'; import { HomeComponent } from './feature/home/home.component'; import { authGuard } from './auth.guard'; -import { DepositComponent } from './deposit/deposit.component'; +import { DepositComponent } from './feature/deposit/deposit.component'; export const routes: Routes = [ { diff --git a/frontend/src/app/deposit/deposit.component.css b/frontend/src/app/deposit/deposit.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/app/deposit/deposit.component.html b/frontend/src/app/deposit/deposit.component.html deleted file mode 100644 index 1bdaf6e..0000000 --- a/frontend/src/app/deposit/deposit.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
- {{ errorMsg }} -
-
- - -
- -
diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html new file mode 100644 index 0000000..79ac16d --- /dev/null +++ b/frontend/src/app/feature/deposit/deposit.component.html @@ -0,0 +1,20 @@ +

Guthaben aufladen

+ +
+
+ {{ errorMsg }} +
+
+ + +
+
+ + + + + diff --git a/frontend/src/app/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts similarity index 73% rename from frontend/src/app/deposit/deposit.component.ts rename to frontend/src/app/feature/deposit/deposit.component.ts index 0d56c70..7cfd834 100644 --- a/frontend/src/app/deposit/deposit.component.ts +++ b/frontend/src/app/feature/deposit/deposit.component.ts @@ -1,17 +1,23 @@ 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 { DepositService } from '../../service/deposit.service'; import { debounceTime } from 'rxjs'; -import { environment } from '../../environments/environment'; +import { environment } from '../../../environments/environment'; import { NgIf } from '@angular/common'; +import { + MatDialogActions, + MatDialogClose, + MatDialogContent, + MatDialogRef, + MatDialogTitle +} from "@angular/material/dialog"; @Component({ selector: 'app-deposit', standalone: true, - imports: [ReactiveFormsModule, NgIf], + imports: [ReactiveFormsModule, NgIf, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose], templateUrl: './deposit.component.html', - styleUrl: './deposit.component.css', changeDetection: ChangeDetectionStrategy.OnPush, }) export class DepositComponent implements OnInit { @@ -19,6 +25,7 @@ export class DepositComponent implements OnInit { protected errorMsg = ''; private stripe: Stripe | null = null; private service: DepositService = inject(DepositService); + public dialogRef: MatDialogRef = inject(MatDialogRef); async ngOnInit() { this.form = new FormGroup({ @@ -48,4 +55,8 @@ export class DepositComponent implements OnInit { this.stripe?.redirectToCheckout({ sessionId }); }); } + + public closeDialog(): void { + this.dialogRef.close(); + } } diff --git a/frontend/src/app/feature/home/home.component.html b/frontend/src/app/feature/home/home.component.html index 6a710c5..b85ce29 100644 --- a/frontend/src/app/feature/home/home.component.html +++ b/frontend/src/app/feature/home/home.component.html @@ -5,7 +5,7 @@
- +
diff --git a/frontend/src/app/feature/home/home.component.ts b/frontend/src/app/feature/home/home.component.ts index 06aa423..deeb4dc 100644 --- a/frontend/src/app/feature/home/home.component.ts +++ b/frontend/src/app/feature/home/home.component.ts @@ -1,5 +1,7 @@ -import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; -import { KeycloakService } from 'keycloak-angular'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {KeycloakService} from 'keycloak-angular'; +import {MatDialog} from "@angular/material/dialog"; +import {DepositComponent} from "../deposit/deposit.component"; @Component({ selector: 'app-homepage', @@ -10,10 +12,15 @@ import { KeycloakService } from 'keycloak-angular'; }) export class HomeComponent { private keycloakService: KeycloakService = inject(KeycloakService); + public dialog: MatDialog = inject(MatDialog); - logout() { + public logout() { const baseUrl = window.location.origin; this.keycloakService.logout(`${baseUrl}/`); } + + public openDialog() { + this.dialog.open(DepositComponent); + } } diff --git a/frontend/src/index.html b/frontend/src/index.html index 8d60cc1..bd4ced1 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -6,8 +6,10 @@ - - + + + + diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 8de5d08..39160ef 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -10,3 +10,19 @@ body { @apply bg-deep-blue text-gray-100; } + +html, +body { + height: 100%; +} +body { + margin: 0; + font-family: Roboto, 'Helvetica Neue', sans-serif; +} + +.mat-mdc-dialog-container { + --mdc-dialog-container-color: var(--color-deep-blue-light) !important; + --mdc-dialog-subhead-color: #ffffff !important; + --mdc-dialog-supporting-text-color: #9ca3af !important; + --mdc-dialog-container-shape: 6px !important; +} -- 2.47.2 From 55502b771d1ec0c5c0c1945abd9db4e72c7b55b8 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 13 Feb 2025 11:35:54 +0100 Subject: [PATCH 2/5] fix: Remove deposit route --- frontend/src/app/app.routes.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 028f3db..373fb5f 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -14,9 +14,4 @@ export const routes: Routes = [ component: HomeComponent, canActivate: [authGuard], }, - { - path: 'deposit', - component: DepositComponent, - canActivate: [authGuard], - }, ]; -- 2.47.2 From 3fc290ecd1f046b8b09bd636c868080e4d892d39 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 13 Feb 2025 11:56:14 +0100 Subject: [PATCH 3/5] feat: Add basic styling --- frontend/src/app/feature/deposit/deposit.component.html | 9 +++++---- frontend/src/app/feature/deposit/deposit.component.ts | 3 ++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html index 79ac16d..78c7a07 100644 --- a/frontend/src/app/feature/deposit/deposit.component.html +++ b/frontend/src/app/feature/deposit/deposit.component.html @@ -1,20 +1,21 @@ -

Guthaben aufladen

+

Guthaben aufladen

{{ errorMsg }}
-
+
- - + + diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts index 7cfd834..43fb94a 100644 --- a/frontend/src/app/feature/deposit/deposit.component.ts +++ b/frontend/src/app/feature/deposit/deposit.component.ts @@ -12,11 +12,12 @@ import { MatDialogRef, MatDialogTitle } from "@angular/material/dialog"; +import {MatButton} from "@angular/material/button"; @Component({ selector: 'app-deposit', standalone: true, - imports: [ReactiveFormsModule, NgIf, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose], + imports: [ReactiveFormsModule, NgIf, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatButton], templateUrl: './deposit.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -- 2.47.2 From a0751ae3c64783d6ffa95d3339d4c1abd92b1405 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 13 Feb 2025 12:10:07 +0100 Subject: [PATCH 4/5] style: Run linters --- frontend/src/app/app.config.ts | 3 +- frontend/src/app/app.routes.ts | 9 +++--- .../feature/deposit/deposit.component.html | 32 +++++++++---------- .../app/feature/deposit/deposit.component.ts | 16 +++++++--- .../src/app/feature/home/home.component.ts | 8 ++--- frontend/src/index.html | 9 ++++-- 6 files changed, 44 insertions(+), 33 deletions(-) diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts index f7dce41..c6b9f77 100644 --- a/frontend/src/app/app.config.ts +++ b/frontend/src/app/app.config.ts @@ -51,6 +51,7 @@ export const appConfig: ApplicationConfig = { provide: HTTP_INTERCEPTORS, useClass: KeycloakBearerInterceptor, multi: true, - }, provideAnimationsAsync(), + }, + provideAnimationsAsync(), ], }; diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 373fb5f..536f89a 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -1,8 +1,7 @@ -import { Routes } from '@angular/router'; -import { LandingComponent } from './feature/landing/landing.component'; -import { HomeComponent } from './feature/home/home.component'; -import { authGuard } from './auth.guard'; -import { DepositComponent } from './feature/deposit/deposit.component'; +import {Routes} from '@angular/router'; +import {LandingComponent} from './feature/landing/landing.component'; +import {HomeComponent} from './feature/home/home.component'; +import {authGuard} from './auth.guard'; export const routes: Routes = [ { diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html index 78c7a07..707d145 100644 --- a/frontend/src/app/feature/deposit/deposit.component.html +++ b/frontend/src/app/feature/deposit/deposit.component.html @@ -1,21 +1,21 @@

Guthaben aufladen

-
-
- {{ errorMsg }} -
-
- - -
-
+
+
+ {{ errorMsg }} +
+
+ + +
+
- - + + diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts index 43fb94a..6b8393d 100644 --- a/frontend/src/app/feature/deposit/deposit.component.ts +++ b/frontend/src/app/feature/deposit/deposit.component.ts @@ -10,14 +10,22 @@ import { MatDialogClose, MatDialogContent, MatDialogRef, - MatDialogTitle -} from "@angular/material/dialog"; -import {MatButton} from "@angular/material/button"; + MatDialogTitle, +} from '@angular/material/dialog'; +import { MatButton } from '@angular/material/button'; @Component({ selector: 'app-deposit', standalone: true, - imports: [ReactiveFormsModule, NgIf, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatButton], + imports: [ + ReactiveFormsModule, + NgIf, + MatDialogTitle, + MatDialogContent, + MatDialogActions, + MatDialogClose, + MatButton, + ], templateUrl: './deposit.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/frontend/src/app/feature/home/home.component.ts b/frontend/src/app/feature/home/home.component.ts index deeb4dc..a4b2b8b 100644 --- a/frontend/src/app/feature/home/home.component.ts +++ b/frontend/src/app/feature/home/home.component.ts @@ -1,7 +1,7 @@ -import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; -import {KeycloakService} from 'keycloak-angular'; -import {MatDialog} from "@angular/material/dialog"; -import {DepositComponent} from "../deposit/deposit.component"; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { KeycloakService } from 'keycloak-angular'; +import { MatDialog } from '@angular/material/dialog'; +import { DepositComponent } from '../deposit/deposit.component'; @Component({ selector: 'app-homepage', diff --git a/frontend/src/index.html b/frontend/src/index.html index bd4ced1..41fedf4 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -6,9 +6,12 @@ - - - + + + -- 2.47.2 From b0c43e0b7c4c6768677eb36f3f79e2aac13f9d02 Mon Sep 17 00:00:00 2001 From: Phan Huy Tran Date: Thu, 13 Feb 2025 12:12:05 +0100 Subject: [PATCH 5/5] style: Run prettier --- frontend/src/app/app.routes.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 536f89a..73ed20c 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -1,7 +1,7 @@ -import {Routes} from '@angular/router'; -import {LandingComponent} from './feature/landing/landing.component'; -import {HomeComponent} from './feature/home/home.component'; -import {authGuard} from './auth.guard'; +import { Routes } from '@angular/router'; +import { LandingComponent } from './feature/landing/landing.component'; +import { HomeComponent } from './feature/home/home.component'; +import { authGuard } from './auth.guard'; export const routes: Routes = [ { -- 2.47.2