refactor - login und auth

src/app/features/components/auth/login/login.component.ts

@@ -1,16 +1,19 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  ReactiveFormsModule,
-  FormBuilder,
-  Validators,
-  FormGroup,
-} from '@angular/forms';
-import { RouterLink } from '@angular/router';
+// /src/app/features/components/auth/login/login.component.ts
 
-// Importieren der wiederverwendbaren Komponenten
+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',
@@ -27,22 +30,55 @@ import { FormFieldComponent } from '../../../../shared/components/form/form-fiel
 })
 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(private fb: FormBuilder) {
+  constructor() {
     this.loginForm = this.fb.group({
-      email: ['', [Validators.required, Validators.email]],
-      password: ['', [Validators.required]],
+      email: ['admin@yourwebshop.com', [Validators.required, Validators.email]],
+      password: ['SecureAdminPass123!', [Validators.required]],
     });
   }
 
   onSubmit() {
-    if (this.loginForm.valid) {
-      console.log('Formular abgeschickt:', this.loginForm.value);
-    } else {
-      console.log('Formular ist ungültig.');
+    // 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);
+      }
+    });
   }
-}
+}