feat(deposit): implement modal animations with GSAP

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=="],

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",

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

@@ -1,6 +1,6 @@
 @if (isOpen) {
-  <div class="modal-bg">
+  <div #modalBg class="modal-bg">
-    <div class="modal-card">
+    <div #modalCard class="modal-card">
       <h2 class="modal-heading">Guthaben aufladen</h2>
       <form [formGroup]="form">
         @if (errorMsg) {

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<void>();
+  @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,43 @@ export class DepositComponent implements OnInit {
     this.stripe = await loadStripe(environment.STRIPE_KEY);
   }
 
+  ngAfterViewInit() {
+    if (this.isOpen) {
+      this.openModal();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['isOpen']) {
+      // Force change detection to ensure DOM is updated
+      this.cdr.detectChanges();
+      
+      // Small delay to ensure DOM is ready
+      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 +109,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()
+      );
+    }
   }
 }

frontend/src/app/shared/components/confirmation/confirmation.component.html

@@ -1,6 +1,6 @@
 @if (successful) {
-  <div class="modal-bg">
+  <div #modalBg class="modal-bg">
-    <div class="modal-card">
+    <div #modalCard class="modal-card">
       <h2 class="modal-heading text-center">Bestätigung</h2>
       <p class="py-2">Der Vorgang wurde erfolgreich abgeschlossen.</p>
       <button type="button" class="button-primary w-full py-2 my-auto" (click)="closeModal()">

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

@@ -1,4 +1,6 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
+import { ModalAnimationService } from '../../services/modal-animation.service';
+import gsap from 'gsap';
 
 @Component({
   selector: 'app-confirmation',
@@ -6,11 +8,36 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   imports: [],
   templateUrl: './confirmation.component.html',
 })
-export class ConfirmationComponent {
+export class ConfirmationComponent implements AfterViewInit, OnDestroy {
   @Input() successful = true;
   @Output() close = new EventEmitter<void>();
+  @ViewChild('modalBg') modalBg!: ElementRef;
+  @ViewChild('modalCard') modalCard!: ElementRef;
+
+  constructor(private modalAnimationService: ModalAnimationService) {}
+
+  ngAfterViewInit() {
+    if (this.successful) {
+      this.openModal();
+    }
+  }
+
+  ngOnDestroy() {
+    gsap.killTweensOf([this.modalBg?.nativeElement, this.modalCard?.nativeElement]);
+  }
+
+  private openModal() {
+    this.modalAnimationService.openModal(
+      this.modalCard.nativeElement,
+      this.modalBg.nativeElement
+    );
+  }
 
   public closeModal() {
-    this.close.emit();
+    this.modalAnimationService.closeModal(
+      this.modalCard.nativeElement,
+      this.modalBg.nativeElement,
+      () => this.close.emit()
+    );
   }
 }

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

@@ -11,15 +11,15 @@
       </div>
 
       <div class="hidden md:flex items-center space-x-4">
+        @if (!isLoggedIn) {
+          <button (click)="login()" class="button-primary px-4 py-1.5">Anmelden</button>
+        }
+        @if (isLoggedIn) {
           <div
             class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300"
           >
             <span>Balance: {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
           </div>
-        @if (!isLoggedIn) {
-          <button (click)="login()" class="button-primary px-4 py-1.5">Anmelden</button>
-        }
-        @if (isLoggedIn) {
           <button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
         }
       </div>

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
+    });
+  }
+} 

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;
 }