84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
// /src/app/features/components/auth/login/login.component.ts
|
|
|
|
import { Component, inject } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angular/forms';
|
|
import { Router, RouterLink } from '@angular/router';
|
|
import { finalize } from 'rxjs';
|
|
|
|
// Services
|
|
import { AuthService } from '../../../../core/services/auth.service';
|
|
import { LoggingService } from '../../../../core/services/logging.service';
|
|
|
|
// UI Komponenten
|
|
import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
|
|
import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
|
|
import { LoginRequest } from '../../../../core/models/auth.models';
|
|
|
|
@Component({
|
|
selector: 'app-login',
|
|
standalone: true,
|
|
imports: [
|
|
CommonModule,
|
|
ReactiveFormsModule,
|
|
RouterLink,
|
|
ButtonComponent,
|
|
FormFieldComponent,
|
|
],
|
|
templateUrl: './login.component.html',
|
|
styleUrl: './login.component.css',
|
|
})
|
|
export class LoginComponent {
|
|
loginForm: FormGroup;
|
|
isLoading = false;
|
|
errorMessage: string | null = null;
|
|
|
|
// Moderne Dependency Injection mit inject()
|
|
private fb = inject(FormBuilder);
|
|
private authService = inject(AuthService);
|
|
private router = inject(Router);
|
|
private logger = inject(LoggingService);
|
|
|
|
constructor() {
|
|
this.loginForm = this.fb.group({
|
|
email: ['admin@yourwebshop.com', [Validators.required, Validators.email]],
|
|
password: ['SecureAdminPass123!', [Validators.required]],
|
|
});
|
|
}
|
|
|
|
onSubmit() {
|
|
// Formular erneut prüfen und mehrfaches Absenden verhindern
|
|
if (this.loginForm.invalid || this.isLoading) {
|
|
this.loginForm.markAllAsTouched();
|
|
return;
|
|
}
|
|
|
|
this.isLoading = true;
|
|
this.errorMessage = null;
|
|
|
|
const credentials: LoginRequest = this.loginForm.value;
|
|
|
|
// Wir rufen den zentralen AuthService auf
|
|
this.authService.loginAdmin(credentials).pipe(
|
|
// finalize wird immer ausgeführt, egal ob erfolgreich oder nicht
|
|
finalize(() => this.isLoading = false)
|
|
).subscribe({
|
|
next: (response) => {
|
|
if (response && response.isAuthSuccessful) {
|
|
this.logger.info('Admin login successful', { email: credentials.email });
|
|
// Erfolgreich eingeloggt -> Weiterleiten zum Admin-Dashboard
|
|
this.router.navigate(['/dashboard']); // Passe die Route ggf. an
|
|
} else {
|
|
// Login fehlgeschlagen (falsches Passwort etc.), vom Backend kontrolliert
|
|
this.errorMessage = 'E-Mail oder Passwort ist ungültig.';
|
|
this.logger.warn('Admin login failed: Invalid credentials', { email: credentials.email });
|
|
}
|
|
},
|
|
error: (err) => {
|
|
// Unerwarteter Fehler (z.B. Server nicht erreichbar)
|
|
this.errorMessage = 'Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
|
|
this.logger.error('An unexpected error occurred during admin login', err);
|
|
}
|
|
});
|
|
}
|
|
} |