SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

feat(auth): add login and registration modal functionality

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-05-14 12:00:33 +02:00
commit 0079ee7bf2
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
11 changed files with 212 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/app/feature/auth/login/login.component.html
View file

@ -1,5 +1,16 @@
<div class="min-h-screen bg-deep-blue flex items-center justify-center">
<div class="modal-card max-w-md w-full">
<div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
<!-- Close Button -->
<button
(click)="closeDialog.emit()"
class="absolute top-4 right-4 text-text-secondary hover:text-white transition-colors"
aria-label="Dialog schließen"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<h2 class="modal-heading text-center">Anmelden</h2>
@if (errorMessage()) {
@ -65,12 +76,12 @@
<div class="mt-6 text-center">
<p class="text-sm text-text-secondary">
Noch kein Konto?
<a
routerLink="/register"
<button
(click)="switchToRegister()"
class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
>
Registrieren
</a>
</button>
</p>
</div>
</div>

13
frontend/src/app/feature/auth/login/login.component.ts
View file

@ -1,6 +1,6 @@
import { Component, signal } from '@angular/core';
import { Component, EventEmitter, Output, signal } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router, RouterLink } from '@angular/router';
import { Router } from '@angular/router';
import { LoginRequest } from '../../../model/auth/LoginRequest';
import { AuthService } from '@service/auth.service';
import { CommonModule } from '@angular/common';
@ -8,13 +8,15 @@ import { CommonModule } from '@angular/common';
@Component({
selector: 'app-login',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterLink],
imports: [CommonModule, ReactiveFormsModule],
templateUrl: './login.component.html',
})
export class LoginComponent {
loginForm: FormGroup;
errorMessage = signal('');
isLoading = signal(false);
@Output() switchForm = new EventEmitter<void>();
@Output() closeDialog = new EventEmitter<void>();
constructor(
private fb: FormBuilder,
@ -31,6 +33,10 @@ export class LoginComponent {
return this.loginForm.controls;
}
switchToRegister(): void {
this.switchForm.emit();
}
onSubmit(): void {
if (this.loginForm.invalid) {
return;
@ -46,6 +52,7 @@ export class LoginComponent {
this.authService.login(loginRequest).subscribe({
next: () => {
this.closeDialog.emit();
this.router.navigate(['/home']);
},
error: (err) => {

19
frontend/src/app/feature/auth/register/register.component.html
View file

@ -1,5 +1,16 @@
<div class="min-h-screen bg-deep-blue flex items-center justify-center">
<div class="modal-card max-w-md w-full">
<div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
<!-- Close Button -->
<button
(click)="closeDialog.emit()"
class="absolute top-4 right-4 text-text-secondary hover:text-white transition-colors"
aria-label="Dialog schließen"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<h2 class="modal-heading text-center">Konto erstellen</h2>
@if (errorMessage()) {
@ -107,12 +118,12 @@
<div class="mt-6 text-center">
<p class="text-sm text-text-secondary">
Bereits ein Konto?
<a
routerLink="/login"
<button
(click)="switchToLogin()"
class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
>
Anmelden
</a>
</button>
</p>
</div>
</div>

12
frontend/src/app/feature/auth/register/register.component.ts
View file

@ -1,6 +1,6 @@
import { Component, signal } from '@angular/core';
import { Component, EventEmitter, Output, signal } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router, RouterLink } from '@angular/router';
import { Router } from '@angular/router';
import { RegisterRequest } from '../../../model/auth/RegisterRequest';
import { AuthService } from '@service/auth.service';
import { CommonModule } from '@angular/common';
@ -9,7 +9,7 @@ import { HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'app-register',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, RouterLink],
imports: [CommonModule, ReactiveFormsModule],
templateUrl: './register.component.html',
})
export class RegisterComponent {
@ -17,6 +17,8 @@ export class RegisterComponent {
errorMessage = signal<string>('');
isLoading = signal<boolean>(false);
fieldErrors = signal<Record<string, string>>({});
@Output() switchForm = new EventEmitter<void>();
@Output() closeDialog = new EventEmitter<void>();
constructor(
private fb: FormBuilder,
@ -34,6 +36,10 @@ export class RegisterComponent {
return this.registerForm.controls;
}
switchToLogin(): void {
this.switchForm.emit();
}
onSubmit(): void {
if (this.registerForm.invalid) {
return;