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..c6b9f77 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({ @@ -51,5 +52,6 @@ export const appConfig: ApplicationConfig = { useClass: KeycloakBearerInterceptor, multi: true, }, + provideAnimationsAsync(), ], }; diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index b58c796..73ed20c 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -2,7 +2,6 @@ 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'; export const routes: Routes = [ { @@ -14,9 +13,4 @@ export const routes: Routes = [ component: HomeComponent, 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 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..707d145 --- /dev/null +++ b/frontend/src/app/feature/deposit/deposit.component.html @@ -0,0 +1,21 @@ +

Guthaben aufladen

+ +
+
+ {{ errorMsg }} +
+
+ + +
+
+ + + + + diff --git a/frontend/src/app/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts similarity index 70% rename from frontend/src/app/deposit/deposit.component.ts rename to frontend/src/app/feature/deposit/deposit.component.ts index 0d56c70..6b8393d 100644 --- a/frontend/src/app/deposit/deposit.component.ts +++ b/frontend/src/app/feature/deposit/deposit.component.ts @@ -1,17 +1,32 @@ 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'; +import { MatButton } from '@angular/material/button'; @Component({ selector: 'app-deposit', standalone: true, - imports: [ReactiveFormsModule, NgIf], + imports: [ + ReactiveFormsModule, + NgIf, + MatDialogTitle, + MatDialogContent, + MatDialogActions, + MatDialogClose, + MatButton, + ], templateUrl: './deposit.component.html', - styleUrl: './deposit.component.css', changeDetection: ChangeDetectionStrategy.OnPush, }) export class DepositComponent implements OnInit { @@ -19,6 +34,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 +64,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..a4b2b8b 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 { 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..41fedf4 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -6,8 +6,13 @@ + + - + 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; +}