diff --git a/frontend/bun.lock b/frontend/bun.lock index f5631b4..5b0629c 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -19,6 +19,7 @@ "@fortawesome/free-solid-svg-icons": "^6.7.2", "@stripe/stripe-js": "^5.6.0", "@tailwindcss/postcss": "^4.0.3", + "gsap": "^3.12.7", "keycloak-angular": "^16.0.1", "keycloak-js": "^25.0.5", "postcss": "^8.5.1", @@ -1068,6 +1069,8 @@ "graphemer": ["graphemer@1.4.0", "", {}, "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="], + "gsap": ["gsap@3.12.7", "", {}, "sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg=="], + "handle-thing": ["handle-thing@2.0.1", "", {}, "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="], "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="], diff --git a/frontend/package.json b/frontend/package.json index 646c8a4..0ad0967 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,6 +28,7 @@ "@fortawesome/free-solid-svg-icons": "^6.7.2", "@stripe/stripe-js": "^5.6.0", "@tailwindcss/postcss": "^4.0.3", + "gsap": "^3.12.7", "keycloak-angular": "^16.0.1", "keycloak-js": "^25.0.5", "postcss": "^8.5.1", diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html index fdaf87a..e8e4dfb 100644 --- a/frontend/src/app/feature/deposit/deposit.component.html +++ b/frontend/src/app/feature/deposit/deposit.component.html @@ -1,6 +1,6 @@ @if (isOpen) { -
-
+
+

Guthaben aufladen

@if (errorMsg) { diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts index 7a45859..f0f900a 100644 --- a/frontend/src/app/feature/deposit/deposit.component.ts +++ b/frontend/src/app/feature/deposit/deposit.component.ts @@ -1,11 +1,18 @@ import { ChangeDetectionStrategy, Component, + ElementRef, EventEmitter, inject, Input, OnInit, Output, + ViewChild, + AfterViewInit, + OnDestroy, + OnChanges, + SimpleChanges, + ChangeDetectorRef, } from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { loadStripe, Stripe } from '@stripe/stripe-js'; @@ -13,6 +20,8 @@ import { DepositService } from '../../service/deposit.service'; import { debounceTime } from 'rxjs'; import { environment } from '../../../environments/environment'; import { NgIf } from '@angular/common'; +import { ModalAnimationService } from '../../shared/services/modal-animation.service'; +import gsap from 'gsap'; @Component({ selector: 'app-deposit', @@ -21,13 +30,17 @@ import { NgIf } from '@angular/common'; templateUrl: './deposit.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DepositComponent implements OnInit { +export class DepositComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges { @Input() isOpen = false; @Output() close = new EventEmitter(); + @ViewChild('modalBg') modalBg!: ElementRef; + @ViewChild('modalCard') modalCard!: ElementRef; protected form!: FormGroup; protected errorMsg = ''; private stripe: Stripe | null = null; private service: DepositService = inject(DepositService); + private modalAnimationService: ModalAnimationService = inject(ModalAnimationService); + private cdr: ChangeDetectorRef = inject(ChangeDetectorRef); async ngOnInit() { this.form = new FormGroup({ @@ -43,6 +56,40 @@ export class DepositComponent implements OnInit { this.stripe = await loadStripe(environment.STRIPE_KEY); } + ngAfterViewInit() { + if (this.isOpen) { + this.openModal(); + } + } + + ngOnChanges(changes: SimpleChanges) { + if (changes['isOpen']) { + this.cdr.detectChanges(); + setTimeout(() => { + if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) { + if (changes['isOpen'].currentValue) { + this.openModal(); + } else { + this.closeModal(); + } + } + }, 0); + } + } + + ngOnDestroy() { + gsap.killTweensOf([this.modalBg?.nativeElement, this.modalCard?.nativeElement]); + } + + private openModal() { + if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) { + this.modalAnimationService.openModal( + this.modalCard.nativeElement, + this.modalBg.nativeElement + ); + } + } + submit() { if (!this.stripe) { this.errorMsg = 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.'; @@ -59,6 +106,12 @@ export class DepositComponent implements OnInit { } public closeModal() { - this.close.emit(); + if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) { + this.modalAnimationService.closeModal( + this.modalCard.nativeElement, + this.modalBg.nativeElement, + () => this.close.emit() + ); + } } } diff --git a/frontend/src/app/shared/components/confirmation/confirmation.component.html b/frontend/src/app/shared/components/confirmation/confirmation.component.html index d9546e0..193ea9a 100644 --- a/frontend/src/app/shared/components/confirmation/confirmation.component.html +++ b/frontend/src/app/shared/components/confirmation/confirmation.component.html @@ -1,6 +1,6 @@ @if (successful) { -
-
+
+

Bestätigung

Der Vorgang wurde erfolgreich abgeschlossen.

diff --git a/frontend/src/app/shared/services/modal-animation.service.ts b/frontend/src/app/shared/services/modal-animation.service.ts new file mode 100644 index 0000000..f54c2bc --- /dev/null +++ b/frontend/src/app/shared/services/modal-animation.service.ts @@ -0,0 +1,53 @@ +import { Injectable } from '@angular/core'; +import gsap from 'gsap'; + +@Injectable({ + providedIn: 'root', +}) +export class ModalAnimationService { + private readonly defaultDuration = 0.3; + private readonly defaultEase = 'power2.out'; + + openModal(modalElement: HTMLElement, overlayElement: HTMLElement) { + gsap.set(overlayElement, { opacity: 0, display: 'block' }); + gsap.set(modalElement, { + opacity: 0, + scale: 0.95, + y: 20, + display: 'block', + }); + + gsap.to(overlayElement, { + opacity: 1, + duration: this.defaultDuration, + ease: this.defaultEase, + }); + + gsap.to(modalElement, { + opacity: 1, + scale: 1, + y: 0, + duration: this.defaultDuration, + ease: this.defaultEase, + }); + } + + closeModal(modalElement: HTMLElement, overlayElement: HTMLElement, onComplete?: () => void) { + gsap.to([overlayElement, modalElement], { + opacity: 0, + duration: this.defaultDuration, + ease: this.defaultEase, + onComplete: () => { + gsap.set([overlayElement, modalElement], { display: 'none' }); + onComplete?.(); + }, + }); + + gsap.to(modalElement, { + scale: 0.95, + y: 20, + duration: this.defaultDuration, + ease: this.defaultEase, + }); + } +} diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 5693d6b..300a61a 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -144,13 +144,33 @@ a { } .modal-bg { - @apply fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light; + @apply fixed inset-0 bg-black/80 backdrop-blur-sm 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]; + @apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-6 rounded-xl shadow-2xl z-50 min-w-[300px] max-w-[400px] w-full mx-auto border border-deep-blue-light/20 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2; } .modal-heading { - @apply text-xl font-bold text-text-primary; + @apply text-2xl font-bold text-text-primary mb-4; +} + +.modal-card input { + @apply w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200; +} + +.modal-card label { + @apply text-text-secondary text-sm font-medium mb-1 block; +} + +.modal-card button { + @apply transition-all duration-200; +} + +.modal-card .button-primary { + @apply bg-emerald hover:bg-emerald-dark text-text-primary transition-all duration-300 active:scale-95 shadow-lg shadow-emerald/20; +} + +.modal-card .button-secondary { + @apply bg-deep-blue-light/50 hover:bg-deep-blue-light w-full py-2.5 my-2 border border-deep-blue-light/30 hover:border-deep-blue-light/50; }