feat: Display deposit form as modal (CAS-34) #28

Merged
ptran merged 5 commits from feat/payment-modal into main 2025-02-13 11:26:22 +00:00
6 changed files with 44 additions and 33 deletions
Showing only changes of commit a0751ae3c6 - Show all commits

View File

@ -51,6 +51,7 @@ export const appConfig: ApplicationConfig = {
provide: HTTP_INTERCEPTORS,
useClass: KeycloakBearerInterceptor,
multi: true,
}, provideAnimationsAsync(),
},
provideAnimationsAsync(),
],
};

View File

@ -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 = [
{

View File

@ -1,21 +1,21 @@
<h2 mat-dialog-title class="text-xl font-semibold">Guthaben aufladen</h2>
<mat-dialog-content>
<form [formGroup]="form">
<div *ngIf="errorMsg">
{{ errorMsg }}
</div>
<div class="mb-2">
<label for="amount">Betrag</label>
<input
type="number"
id="amount"
formControlName="amount"
class="w-full px-2 py-1 bg-white text-black"
/>
</div>
</form>
<form [formGroup]="form">
<div *ngIf="errorMsg">
{{ errorMsg }}
</div>
<div class="mb-2">
<label for="amount">Betrag</label>
<input
type="number"
id="amount"
formControlName="amount"
class="w-full px-2 py-1 bg-white text-black"
/>
</div>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-flat-button (click)="closeDialog()">Abbrechen</button>
<button mat-flat-button (click)="submit()">Einzahlen</button>
<button mat-flat-button (click)="closeDialog()">Abbrechen</button>
<button mat-flat-button (click)="submit()">Einzahlen</button>
</mat-dialog-actions>

View File

@ -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,
})

View File

@ -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',

View File

@ -6,9 +6,12 @@
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>
<body class="mat-typography">
<app-root></app-root>
</body>