Merge pull request 'feature: removed angular materials and implemented new deposit modal' (!44) from feature/deposit-modal into main

Reviewed-on: https://git.simonis.lol/projects/casino/pulls/44
Reviewed-by: Huy <ptran@noreply@simonis.lol>
Reviewed-by: Klan Jattenhoff <jan@kjan.email>

frontend/bun.lock

@@ -10,7 +10,6 @@
         "@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",
@@ -93,8 +92,6 @@
 
     "@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=="],

frontend/package.json

@@ -19,7 +19,6 @@
     "@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",

frontend/src/app/feature/deposit/deposit.component.html

@@ -1,5 +1,9 @@
-<h2 mat-dialog-title class="text-xl font-semibold">Guthaben aufladen</h2>
-<mat-dialog-content>
+<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>
       <form [formGroup]="form">
         <div *ngIf="errorMsg">
           {{ errorMsg }}
@@ -10,12 +14,19 @@
             type="number"
             id="amount"
             formControlName="amount"
-        class="w-full px-2 py-1 bg-white text-black"
+            class="w-full px-2 py-1 bg-deep-blue-light text-white rounded my-1"
           />
         </div>
       </form>
-</mat-dialog-content>
-<mat-dialog-actions>
-  <button mat-flat-button (click)="closeDialog()">Abbrechen</button>
-  <button mat-flat-button (click)="submit()">Einzahlen</button>
-</mat-dialog-actions>
+      <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>
+      </div>
+    </div>
+  </div>
+</ng-container>

frontend/src/app/feature/deposit/deposit.component.ts

@@ -1,38 +1,33 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnInit,
+  Output,
+} 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';
 import { environment } from '../../../environments/environment';
 import { NgIf } from '@angular/common';
-import {
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
-import { MatButton } from '@angular/material/button';
 
 @Component({
   selector: 'app-deposit',
   standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    NgIf,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatButton,
-  ],
+  imports: [ReactiveFormsModule, NgIf],
   templateUrl: './deposit.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DepositComponent implements OnInit {
+  @Input() isOpen = false;
+  @Output() close = new EventEmitter<void>();
   protected form!: FormGroup;
   protected errorMsg = '';
   private stripe: Stripe | null = null;
   private service: DepositService = inject(DepositService);
-  public dialogRef: MatDialogRef<DepositComponent> = inject(MatDialogRef<DepositComponent>);
 
   async ngOnInit() {
     this.form = new FormGroup({
@@ -63,7 +58,7 @@ export class DepositComponent implements OnInit {
     });
   }
 
-  public closeDialog(): void {
-    this.dialogRef.close();
+  public closeModal() {
+    this.close.emit();
   }
 }

frontend/src/app/feature/home/home.component.html

@@ -60,6 +60,8 @@
       <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>
+          <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
           </button>

frontend/src/app/feature/home/home.component.ts

@@ -3,15 +3,18 @@ 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';
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [NavbarComponent, CurrencyPipe, NgFor],
+  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class HomeComponent {
+  isDepositModalOpen = false;
+
   featuredGames: Game[] = [
     {
       id: '1',
@@ -67,4 +70,11 @@ export default class HomeComponent {
       date: '2024-03-18',
     },
   ];
+
+  openDepositModal() {
+    this.isDepositModalOpen = true;
+  }
+  closeDepositModal() {
+    this.isDepositModalOpen = false;
+  }
 }

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -12,7 +12,6 @@ import { KeycloakService } from 'keycloak-angular';
 export class NavbarComponent {
   isMenuOpen = false;
   private keycloakService: KeycloakService = inject(KeycloakService);
-
   isLoggedIn = this.keycloakService.isLoggedIn();
 
   login() {

frontend/src/styles.css

@@ -138,10 +138,3 @@ a {
 .footer-disclaimer {
   @apply text-xs;
 }
-
-.mat-mdc-dialog-container {
-  --mdc-dialog-container-color: var(--color-deep-blue-light) important;
-  --mdc-dialog-subhead-color: var(--color-text-primary) important;
-  --mdc-dialog-supporting-text-color: var(--color-text-secondary) important;
-  --mdc-dialog-container-shape: 6px important;
-}