Fertig- next ist dashboard

2025-09-17 09:43:45 +02:00
parent 1bb9a408b8
commit 7e5939868b
26 changed files with 424 additions and 369 deletions
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -9,14 +9,9 @@ export const routes: Routes = [
  // wird sofort und ohne Umwege zur Login-Seite weitergeleitet.
  {
    path: '',
-    redirectTo: 'auth', // Leitet zur /auth-Route weiter
-    pathMatch: 'full', // Wichtig: Gilt nur für den exakt leeren Pfad
+    redirectTo: 'auth',
+    pathMatch: 'full',
  },
-
-  // Regel 2: Authentifizierungs-Feature
-  // Alle URLs, die mit "auth/" beginnen (z.B. "/auth/login", "/auth/register"),
-  // werden von dieser Regel abgefangen und an die auth.routes.ts zur
-  // weiteren Verarbeitung übergeben.
  {
    path: 'auth',
    loadChildren: () =>
@@ -27,14 +22,11 @@ export const routes: Routes = [
    loadChildren: () =>
      import('./features/demo/demo.routes').then((r) => r.DEMO_ROUTES),
  },
-
  {
    path: 'access-denied',
    component: AccessDeniedComponent,
    title: 'Zugriff verweigert',
  },
-
-  
  {
    path: '**',
    component: NotFoundComponent,
--- a/src/app/core/components/not-found/not-found.component.html
+++ b/src/app/core/components/not-found/not-found.component.html
@@ -1,6 +1,5 @@
-<!-- <div class="not-found-container">
+<div class="not-found-container">
  <div class="not-found-box">
-    
    <div class="status-code">404</div>
    <h1 class="title">Seite nicht gefunden</h1>
    <p class="subtitle">
@@ -9,17 +8,12 @@
    </p>

    <div class="actions">
-      <button class="btn btn-stroked" (click)="goBack()">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-        <span>Zurück</span>
-      </button>
-      <button class="btn btn-primary" routerLink="/"> 
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-        <span>Zur Startseite</span>
-      </button>
+      <div class="button-group">
+        <app-button buttonType="primary" (click)="goBack()">Zurück</app-button>
+        <app-button buttonType="secondary" routerLink="/"
+          >Zur Startseite</app-button
+        >
+      </div>
+    </div>
  </div>
-
 </div>
-</div> -->
-
-<p>404</p>
--- a/src/app/core/components/not-found/not-found.component.ts
+++ b/src/app/core/components/not-found/not-found.component.ts
@@ -2,17 +2,15 @@ import { Component } from '@angular/core';
 import { CommonModule, Location } from '@angular/common';
 import { RouterLink } from '@angular/router';

+import { ButtonComponent } from '../../../shared/components/ui/button/button.component';
+
@Component({
  selector: 'app-not-found',
-  imports: [
-    CommonModule
-    
-  ],
+  imports: [CommonModule, ButtonComponent,RouterLink],
  templateUrl: './not-found.component.html',
-  styleUrl: './not-found.component.css'
+  styleUrl: './not-found.component.css',
 })
 export class NotFoundComponent {
-
  constructor(private location: Location) {}

  /**
--- a/src/app/features/auth/_auth-common.css
+++ b/src/app/features/auth/_auth-common.css
@@ -1,85 +0,0 @@
-/* src\app\features\auth\_auth-common.css */
-/* =================================================================================
- * GEMEINSAME STILE FÜR DAS AUTH-FEATURE
- * ================================================================================= */
-
-/* -- Globale Layout-Elemente -- */
-.component-header {
-  text-align: center;
-  margin-bottom: 2rem;
-}
-.auth-title {
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: var(--color-text);
-  margin-bottom: 0.5rem;
-}
-.auth-subtitle {
-  color: var(--color-text-light);
-  font-size: 1rem;
-}
-
-/* -- Formular-Basiselemente & Helfer -- */
-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-.btn-full-width {
-  width: 100%;
-}
-.btn-icon-left {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.75rem;
-}
-.error-text {
-  color: var(--color-danger);
-  font-size: 0.85rem;
-  padding-top: 0.25rem;
-}
-.info-text {
-  color: var(--color-text-light);
-  text-align: center;
-  line-height: 1.6;
-}
-
-/* -- Links & Footer -- */
-.link {
-  color: var(--color-primary);
-  font-weight: 500;
-  text-decoration: none;
-  font-size: 0.9rem;
-  transition: color var(--transition-speed);
-}
-.link:hover {
-  text-decoration: underline;
-  color: var(--color-primary-dark);
-}
-.footer-link {
-  text-align: center;
-  margin-top: 1.5rem;
-  color: var(--color-text-light);
-  font-size: 0.95rem;
-}
-
-/* -- Visueller Trenner ("oder") -- */
-.divider-or {
-  display: flex;
-  align-items: center;
-  text-align: center;
-  color: var(--color-text-light);
-  font-size: 0.85rem;
-  font-weight: 500;
-  margin: 0.5rem 0;
-}
-.divider-or::before,
-.divider-or::after {
-  content: '';
-  flex: 1;
-  border-bottom: 1px solid var(--color-border);
-}
-.divider-or:not(:empty)::before { margin-right: 1em; }
-.divider-or:not(:empty)::after { margin-left: 1em; }
-
--- a/src/app/features/auth/auth.routes.ts
+++ b/src/app/features/auth/auth.routes.ts
@@ -6,6 +6,8 @@ import { LoginComponent } from './components/login/login.component';
 import { RegisterComponent } from './components/register/register.component';
 import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
 import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
+import { VerifyEmailComponent } from './components/verify-email/verify-email.component';
+import { NotFoundComponent } from '../../core/components/not-found/not-found.component';

 export const AUTH_ROUTES: Routes = [
  {
@@ -26,6 +28,11 @@ export const AUTH_ROUTES: Routes = [
        component: ResetPasswordComponent,
        title: 'Neues Passwort',
      },
+      {
+        path: 'verify-email/:token',
+        component: VerifyEmailComponent,
+        title: 'Email bestätigen',
+      },
    ],
  },
 ];
--- a/src/app/features/auth/components/auth-layout/auth-layout.component.css
+++ b/src/app/features/auth/components/auth-layout/auth-layout.component.css
@@ -1,39 +1,56 @@
-/* src\app\features\auth\components\auth-layout\auth-layout.component.css */
-/* Stile NUR für den äußeren Rahmen aller Auth-Seiten */
+/* =================================================================================
+    FINALES & ZENTRALISIERTES STYLING FÜR DAS AUTH-LAYOUT
+================================================================================== */
+
+:host ::ng-deep .form-content-wrapper {
+  flex-grow: 1; /* Sorgt dafür, dass der Inhalt den Platz füllt */
+}
+
+:host ::ng-deep .verify-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+:host ::ng-deep .verify-content app-icon {
+  font-size: 64px;
+  color: var(--color-primary);
+  margin-bottom: 1.5rem;
+}
+:host ::ng-deep .verify-content .info-text.small {
+  font-size: 0.9rem;
+}
+
+/* 1. Basis-Layout für den Container und die Karte */
 :host {
  display: block;
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-body-bg);
 }
-
 .auth-container {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1rem;
 }
-
 .auth-card {
-  padding: 2rem;
  width: 100%;
  max-width: 450px;
  animation: fade-in 0.5s ease-out forwards;
 }
-
 .auth-header {
  text-align: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
 }
-
-.auth-logo {
+.auth-header app-icon {
+  font-size: 48px;
  display: inline-block;
  padding: 0.75rem;
  background: var(--color-primary-gradient);
  color: #fff;
  border-radius: 50%;
 }
-
@keyframes fade-in {
  from {
    opacity: 0;
@@ -44,3 +61,94 @@
    transform: translateY(0);
  }
 }
+
+/* 2. Flexbox-Layout für den Karteninhalt (DER ENTSCHEIDENDE TEIL) */
+/* Wir verwenden ::ng-deep, damit diese Layout-Regeln auf die projizierten Inhalte wirken. */
+:host ::ng-deep .auth-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* 3. Stile für die gemeinsamen Elemente innerhalb der Auth-Seiten */
+:host ::ng-deep .component-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+:host ::ng-deep .auth-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: 0.5rem;
+}
+:host ::ng-deep .auth-subtitle {
+  color: var(--color-text-light);
+  font-size: 1rem;
+}
+
+/* Der <form>-Tag oder ein anderer Inhalts-Wrapper wird anpassungsfähig */
+:host ::ng-deep form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  flex-grow: 1; /* WICHTIG: Nimmt den verfügbaren Platz ein */
+}
+
+/* Spezifische Formular-Elemente */
+:host ::ng-deep .form-actions {
+  text-align: right;
+  margin-top: -0.75rem;
+  margin-bottom: 0.5rem;
+}
+:host ::ng-deep .error-text {
+  color: var(--color-danger);
+  font-size: 0.85rem;
+  padding-top: 0.25rem;
+}
+:host ::ng-deep .info-text {
+  color: var(--color-text-light);
+  text-align: center;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+
+/* Links & Footer */
+:host ::ng-deep .link {
+  color: var(--color-primary);
+  font-weight: 500;
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: color var(--transition-speed);
+}
+:host ::ng-deep .link:hover {
+  text-decoration: underline;
+  color: var(--color-primary-dark);
+}
+:host ::ng-deep .footer-link {
+  text-align: center;
+  margin-top: auto; /* WICHTIG: Schiebt den Footer immer nach ganz unten */
+  padding-top: 1.5rem; /* Sorgt für Abstand zum Element darüber */
+  color: var(--color-text-light);
+  font-size: 0.95rem;
+}
+
+/* Visueller Trenner */
+:host ::ng-deep .divider-or {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-light);
+  font-size: 0.85rem;
+  margin: 0.5rem 0;
+}
+:host ::ng-deep .divider-or::before,
+:host ::ng-deep .divider-or::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid var(--color-border);
+}
+:host ::ng-deep .divider-or:not(:empty)::before {
+  margin-right: 1em;
+}
+:host ::ng-deep .divider-or:not(:empty)::after {
+  margin-left: 1em;
+}
--- a/src/app/features/auth/components/auth-layout/auth-layout.component.html
+++ b/src/app/features/auth/components/auth-layout/auth-layout.component.html
@@ -1,29 +1,11 @@
-
-
 <div class="auth-container">
-  <div class="auth-card card">
-    <div class="auth-header">
-      <svg
-        class="auth-logo"
-        xmlns="http://www.w3.org/2000/svg"
-        width="48"
-        height="48"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
-        <polyline points="10 17 15 12 10 7"></polyline>
-        <line x1="15" y1="12" x2="3" y2="12"></line>
-      </svg>
-    </div>
+  <!-- Wir verwenden jetzt eine app-card für den konsistenten Look -->
+  <app-card class="auth-card">
+    <!-- <div class="auth-header">
     
-    <!-- Der RouterOutlet rendert die spezifischen Inhalte (Login, Register, etc.) -->
+    </div> -->
    <div class="auth-content">
      <router-outlet></router-outlet>
    </div>
-  </div>
+  </app-card>
 </div>
--- a/src/app/features/auth/components/auth-layout/auth-layout.component.ts
+++ b/src/app/features/auth/components/auth-layout/auth-layout.component.ts
@@ -2,13 +2,11 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { CardComponent } from '../../../../shared/components/ui/card/card.component';

+
@Component({
  selector: 'app-auth-layout',
  imports: [RouterOutlet, CardComponent],
  templateUrl: './auth-layout.component.html',
  styleUrl: './auth-layout.component.css',
 })
-export class AuthLayoutComponent {
-  // Diese Komponente benötigt in der Regel keine eigene Logik.
-  // Sie dient nur als Hülle für die untergeordneten Routen.
-}
+export class AuthLayoutComponent {}
--- a/src/app/features/auth/components/forgot-password/forgot-password.component.css
+++ b/src/app/features/auth/components/forgot-password/forgot-password.component.css
@@ -1,28 +0,0 @@
-/* src\app\features\auth\components\forgot-password\forgot-password.component.css */
-@import '../../_auth-common.css';
-
-/* Stile NUR für die Passwort-vergessen-Seite */
-:host { display: block; width: 100%; }
-
-form {
-  gap: 1.5rem; /* Etwas mehr Abstand als beim Login */
-}
-
-.info-text {
-  margin-bottom: 2rem;
-}
-
-.success-message {
-  text-align: center;
-}
-
-.success-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text);
-  margin-bottom: 0.75rem;
-}
-
-.footer-link {
-  margin-top: 2rem;
-}
--- a/src/app/features/auth/components/forgot-password/forgot-password.component.html
+++ b/src/app/features/auth/components/forgot-password/forgot-password.component.html
@@ -2,27 +2,38 @@
  <h2 class="auth-title">Passwort vergessen?</h2>
 </div>

+<!-- Container für den Inhalt, damit der Footer nach unten rutscht -->
+<div class="form-content-wrapper">
+  <!-- Fall 1: Formular anzeigen -->
  <div *ngIf="!emailSent">
    <p class="info-text">
-    Geben Sie Ihre E-Mail-Adresse ein. Wir senden Ihnen einen Link, mit dem Sie Ihr Passwort zurücksetzen können.
+      Geben Sie Ihre E-Mail ein, wir senden Ihnen einen Link zum Zurücksetzen.
    </p>
-  <form [formGroup]="forgotPasswordForm" (ngSubmit)="onSubmit()" novalidate>
-    <div class="form-field">
-      <input type="email" class="form-input" id="email" placeholder=" " formControlName="email">
-      <label for="email" class="form-label">E-Mail-Adresse</label>
-    </div>
-    <button type="submit" class="btn btn-primary btn-full-width" [disabled]="forgotPasswordForm.invalid">
-      Link anfordern
-    </button>
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
+      <app-form-field
+        label="E-Mail-Adresse"
+        type="email"
+        formControlName="email"
+      ></app-form-field>
+      <app-button
+        submitType="submit"
+        buttonType="primary"
+        [fullWidth]="true"
+        [disabled]="form.invalid"
+        >Link anfordern</app-button
+      >
    </form>
  </div>

+  <!-- Fall 2: Erfolgsmeldung anzeigen -->
  <div *ngIf="emailSent" class="success-message">
-  <h3 class="success-title">Prüfen Sie Ihr Postfach</h3>
+    <h2 class="auth-title">Prüfen Sie Ihr Postfach</h2>
    <p class="info-text">
-    Wenn ein Konto mit <strong>{{ forgotPasswordForm.value.email }}</strong> existiert, wurde ein Link versendet.
+      Wenn ein Konto existiert, wurde ein Link an
+      <strong>{{ form.value.email }}</strong> gesendet.
    </p>
  </div>
+</div>

 <div class="footer-link">
  <a routerLink="/auth/login" class="link">Zurück zum Login</a>
--- a/src/app/features/auth/components/forgot-password/forgot-password.component.ts
+++ b/src/app/features/auth/components/forgot-password/forgot-password.component.ts
@@ -2,38 +2,39 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angular/forms';
 import { RouterLink } from '@angular/router';
+import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
+import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';

@Component({
  selector: 'app-forgot-password',
  imports: [
    CommonModule,
    ReactiveFormsModule,
-    RouterLink
+    RouterLink,ButtonComponent,FormFieldComponent
  ],
  templateUrl: './forgot-password.component.html',
  styleUrl: './forgot-password.component.css'
 })
 export class ForgotPasswordComponent {
-  forgotPasswordForm: FormGroup;
-  // Optional: Eine Eigenschaft, um eine Erfolgsmeldung anzuzeigen
+  form: FormGroup;
  emailSent = false;

  constructor(private fb: FormBuilder) {
-    this.forgotPasswordForm = this.fb.group({
+    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
-    if (this.forgotPasswordForm.valid) {
+    if (this.form.valid) {
      // Hier würde die Logik zum Senden der E-Mail an das Backend stehen
-      console.log('Anforderung zum Zurücksetzen des Passworts für:', this.forgotPasswordForm.value.email);
+      console.log('Anforderung zum Zurücksetzen des Passworts für:', this.form.value.email);
      // z.B. this.authService.sendPasswordResetEmail(this.forgotPasswordForm.value.email);

      // Setze den Zustand, um die Erfolgsmeldung anzuzeigen
      this.emailSent = true;
    } else {
-      this.forgotPasswordForm.markAllAsTouched();
+      this.form.markAllAsTouched();
    }
  }
 }
--- a/src/app/features/auth/components/login/login.component.html
+++ b/src/app/features/auth/components/login/login.component.html
@@ -1,36 +1,43 @@
-<!-- Seitenspezifischer Titel und Untertitel -->
 <div class="component-header">
  <h2 class="auth-title">Anmelden</h2>
  <p class="auth-subtitle">Bitte geben Sie Ihre Daten ein, um fortzufahren.</p>
 </div>

 <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate>
-  <div class="form-field">
-    <input type="email" class="form-input" id="email" placeholder=" " formControlName="email">
-    <label for="email" class="form-label">E-Mail-Adresse</label>
-  </div>
+  <app-form-field 
+    label="E-Mail-Adresse" 
+    type="email"
+    formControlName="email">
+  </app-form-field>
  
-  <div class="form-field">
-    <input type="password" class="form-input" id="password" placeholder=" " formControlName="password">
-    <label for="password" class="form-label">Passwort</label>
-  </div>
+  <app-form-field 
+    label="Passwort" 
+    type="password"
+    formControlName="password">
+  </app-form-field>

  <div class="form-actions">
    <a routerLink="/auth/forgot-password" class="link">Passwort vergessen?</a>
  </div>

-  <button type="submit" class="btn btn-primary btn-full-width" [disabled]="loginForm.invalid">
+  <app-button 
+    submitType="submit" 
+    buttonType="primary" 
+    [fullWidth]="true" 
+    [disabled]="loginForm.invalid">
    Anmelden
-  </button>
+  </app-button>

  <div class="divider-or"><span>oder</span></div>

-  <button type="button" class="btn btn-secondary btn-full-width btn-icon-left">
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>
-    <span>Mit Google anmelden</span>
-  </button>
+  <app-button 
+    buttonType="secondary" 
+    [fullWidth]="true"
+    iconName="placeholder">
+    Mit Google anmelden
+  </app-button>
+</form>
  
 <div class="footer-link">
  Noch kein Konto? <a routerLink="/auth/register" class="link">Jetzt registrieren</a>
 </div>
-</form>
--- a/src/app/features/auth/components/login/login.component.ts
+++ b/src/app/features/auth/components/login/login.component.ts
@@ -28,6 +28,8 @@ import { FormFieldComponent } from '../../../../shared/components/form/form-fiel
 export class LoginComponent {
  loginForm: FormGroup;

+  
+
  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
--- a/src/app/features/auth/components/register/register.component.css
+++ b/src/app/features/auth/components/register/register.component.css
@@ -1,8 +0,0 @@
-/* src\app\features\auth\components\register\register.component.css */
-@import '../../_auth-common.css';
-
-/* Stile NUR für die Registrierungs-Seite */
-:host { display: block; width: 100%; }
-
-/* Diese Komponente hat momentan keine spezifischen Extra-Stile,
-   aber die Datei ist da, falls welche benötigt werden. */
--- a/src/app/features/auth/components/register/register.component.html
+++ b/src/app/features/auth/components/register/register.component.html
@@ -4,32 +4,42 @@
 </div>

 <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" novalidate>
-  <div class="form-field">
-    <input type="text" class="form-input" id="fullName" placeholder=" " formControlName="fullName">
-    <label for="fullName" class="form-label">Vollständiger Name</label>
-  </div>
+  <app-form-field
+    label="Vollständiger Name"
+    type="text"
+    formControlName="fullName"
+  ></app-form-field>
+  <app-form-field
+    label="E-Mail-Adresse"
+    type="email"
+    formControlName="email"
+  ></app-form-field>
+  <app-form-field
+    label="Passwort (min. 8 Zeichen)"
+    type="password"
+    formControlName="password"
+  ></app-form-field>
+  <app-form-field
+    label="Passwort bestätigen"
+    type="password"
+    formControlName="confirmPassword"
+  ></app-form-field>

-  <div class="form-field">
-    <input type="email" class="form-input" id="email" placeholder=" " formControlName="email">
-    <label for="email" class="form-label">E-Mail-Adresse</label>
-  </div>
-  
-  <div class="form-field">
-    <input type="password" class="form-input" id="password" placeholder=" " formControlName="password">
-    <label for="password" class="form-label">Passwort (min. 8 Zeichen)</label>
-  </div>
-
-  <div class="form-field">
-    <input type="password" class="form-input" id="confirmPassword" placeholder=" " formControlName="confirmPassword">
-    <label for="confirmPassword" class="form-label">Passwort bestätigen</label>
-    <div *ngIf="registerForm.errors?.['passwordMismatch'] && registerForm.get('confirmPassword')?.touched" class="error-text">
+  <div
+    *ngIf="registerForm.errors?.['passwordMismatch'] && registerForm.get('confirmPassword')?.touched"
+    class="error-text"
+  >
    Die Passwörter stimmen nicht überein.
  </div>
-  </div>

-  <button type="submit" class="btn btn-primary btn-full-width" [disabled]="registerForm.invalid">
+  <app-button
+    submitType="submit"
+    buttonType="primary"
+    [fullWidth]="true"
+    [disabled]="registerForm.invalid"
+  >
    Registrieren
-  </button>
+  </app-button>
 </form>

 <div class="footer-link">
--- a/src/app/features/auth/components/register/register.component.ts
+++ b/src/app/features/auth/components/register/register.component.ts
@@ -4,10 +4,12 @@ import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angula
 import { RouterLink } from '@angular/router';
 // Optional: Ein Custom Validator für den Passwort-Vergleich
 import { passwordMatchValidator } from '../../../../shared/validators/password-match.validator';
+import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
+import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';

@Component({
  selector: 'app-register',
-  imports: [CommonModule, ReactiveFormsModule, RouterLink],
+  imports: [CommonModule, ReactiveFormsModule, RouterLink,ButtonComponent,FormFieldComponent],
  templateUrl: './register.component.html',
  styleUrl: './register.component.css'
 })
--- a/src/app/features/auth/components/reset-password/reset-password.component.css
+++ b/src/app/features/auth/components/reset-password/reset-password.component.css
@@ -1,5 +0,0 @@
-/* src\app\features\auth\components\reset-password\reset-password.component.css */
-@import '../../_auth-common.css';
-
-/* Stile NUR für die Passwort-zurücksetzen-Seite */
-:host { display: block; width: 100%; }
--- a/src/app/features/auth/components/reset-password/reset-password.component.html
+++ b/src/app/features/auth/components/reset-password/reset-password.component.html
@@ -4,18 +4,32 @@
 </div>

 <form [formGroup]="resetPasswordForm" (ngSubmit)="onSubmit()" novalidate>
-  <div class="form-field">
-    <input type="password" class="form-input" id="password" placeholder=" " formControlName="password">
-    <label for="password" class="form-label">Neues Passwort</label>
-  </div>
-  <div class="form-field">
-    <input type="password" class="form-input" id="confirmPassword" placeholder=" " formControlName="confirmPassword">
-    <label for="confirmPassword" class="form-label">Neues Passwort bestätigen</label>
-    <div *ngIf="resetPasswordForm.errors?.['passwordMismatch'] && resetPasswordForm.get('confirmPassword')?.touched" class="error-text">
+  <app-form-field
+    label="Neues Passwort"
+    type="password"
+    formControlName="password"
+  ></app-form-field>
+  <app-form-field
+    label="Passwort bestätigen"
+    type="password"
+    formControlName="confirmPassword"
+  ></app-form-field>
+
+  <div
+    *ngIf="resetPasswordForm.errors?.['passwordMismatch'] && resetPasswordForm.get('confirmPassword')?.touched"
+    class="error-text"
+  >
    Die Passwörter stimmen nicht überein.
  </div>
-  </div>
-  <button type="submit" class="btn btn-primary btn-full-width" [disabled]="resetPasswordForm.invalid">
+
+  <app-button
+    submitType="submit"
+    buttonType="primary"
+    [fullWidth]="true"
+    [disabled]="resetPasswordForm.invalid"
+  >
    Passwort speichern
-  </button>
+  </app-button>
 </form>
+
+
--- a/src/app/features/auth/components/reset-password/reset-password.component.ts
+++ b/src/app/features/auth/components/reset-password/reset-password.component.ts
@@ -1,15 +1,26 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, FormBuilder, Validators, FormGroup } from '@angular/forms';
+import {
+  ReactiveFormsModule,
+  FormBuilder,
+  Validators,
+  FormGroup,
+} from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { passwordMatchValidator } from '../../../../shared/validators/password-match.validator';
-
+import { ButtonComponent } from '../../../../shared/components/ui/button/button.component';
+import { FormFieldComponent } from '../../../../shared/components/form/form-field/form-field.component';
@Component({
  selector: 'app-reset-password',

-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    ButtonComponent,
+    FormFieldComponent,
+  ],
  templateUrl: './reset-password.component.html',
-  styleUrl: './reset-password.component.css'
+  styleUrl: './reset-password.component.css',
 })
 export class ResetPasswordComponent implements OnInit {
  resetPasswordForm: FormGroup;
@@ -20,10 +31,13 @@ export class ResetPasswordComponent implements OnInit {
    private route: ActivatedRoute,
    private router: Router
  ) {
-    this.resetPasswordForm = this.fb.group({
+    this.resetPasswordForm = this.fb.group(
+      {
        password: ['', [Validators.required, Validators.minLength(8)]],
-      confirmPassword: ['', [Validators.required]]
-    }, { validators: passwordMatchValidator });
+        confirmPassword: ['', [Validators.required]],
+      },
+      { validators: passwordMatchValidator }
+    );
  }

  ngOnInit(): void {
--- a/src/app/features/auth/components/verify-email/verify-email.component.css
+++ b/src/app/features/auth/components/verify-email/verify-email.component.css
@@ -1,22 +0,0 @@
-/* src\app\features\auth\components\register\register.component.css */
-@import '../../_auth-common.css';
-
-/* Stile NUR für die E-Mail-verifizieren-Seite */
-:host { display: block; width: 100%; }
-
-.verify-content {
-  text-align: center;
-}
-.icon {
-  color: var(--color-primary);
-  margin-bottom: 1.5rem;
-}
-.info-text {
-  margin-bottom: 1rem;
-}
-.info-text.small {
-  font-size: 0.9rem;
-}
-.footer-link {
-  margin-top: 2rem;
-}
--- a/src/app/features/auth/components/verify-email/verify-email.component.html
+++ b/src/app/features/auth/components/verify-email/verify-email.component.html
@@ -1,12 +1,12 @@
 <div class="component-header">
  <h2 class="auth-title">Bestätigen Sie Ihre E-Mail</h2>
+  <p class="auth-subtitle">
+    Ein Bestätigungslink wurde an Ihre E-Mail gesendet. Bitte aktivieren Sie Ihr
+    Konto.
+  </p>
 </div>

-<div class="verify-content">
-  <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
-  <p class="info-text">
-    Ein Bestätigungslink wurde an Ihre E-Mail-Adresse gesendet. Bitte klicken Sie darauf, um Ihr Konto zu aktivieren.
-  </p>
+<div class="form-content-wrapper verify-content">
  <p class="info-text small">
    Keine E-Mail erhalten? <a href="#" class="link">Erneut senden</a>.
  </p>
--- a/src/app/features/demo/components/demo2/demo2.component.html
+++ b/src/app/features/demo/components/demo2/demo2.component.html
@@ -26,6 +26,7 @@
  </div>

  <div class="grid-col-span-2">
+      <form [formGroup]="demoForm">
   <app-form-group
        title="Form Components 1"
        description="Diese Informationen sind öffentlich sichtbar."
@@ -34,18 +35,34 @@
          label="Land"
          [options]="countryOptions"
          [(ngModel)]="selectedCountry"
-      >
+          [ngModelOptions]="{standalone: true}"> <!-- Wichtig für die Mischung von ngModel und formGroup -->
        </app-form-select>

-      <app-form-field label="Benutzername" type="text" [(value)]="benutzername">
+        <!-- Diese Felder verwenden jetzt formControlName -->
+        <app-form-field 
+          label="Benutzername" 
+          type="text" 
+          formControlName="username">
+        </app-form-field>
+        <app-form-field 
+          label="E-Mail-Adresse" 
+          type="email" 
+          formControlName="email">
+        </app-form-field>
+        <app-form-field 
+          label="Passwort" 
+          type="password" 
+          formControlName="password">
        </app-form-field>

-      <app-form-field label="E-Mail-Adresse" type="email" [(value)]="email">
-      </app-form-field>
-
-      <app-form-textarea label="Biografie" [rows]="5" [(ngModel)]="biografie">
+        <app-form-textarea 
+          label="Biografie" 
+          [rows]="5" 
+          [(ngModel)]="biografie"
+          [ngModelOptions]="{standalone: true}">
        </app-form-textarea>
    </app-form-group>
+    </form>
  </div>

  <div class="grid-col-span-2">
--- a/src/app/features/demo/components/demo2/demo2.component.ts
+++ b/src/app/features/demo/components/demo2/demo2.component.ts
@@ -24,7 +24,12 @@ import {
  SelectOption,
 } from '../../../../shared/components/form/form-select/form-select.component';

-import { FormsModule } from '@angular/forms';
+import {
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  Validators,
+} from '@angular/forms';

 import { FormTextareaComponent } from '../../../../shared/components/form/form-textarea/form-textarea.component';

@@ -40,6 +45,8 @@ import { ButtonComponent } from '../../../../shared/components/ui/button/button.

 import { ChipComponent } from '../../../../shared/components/ui/chip/chip.component';

+import { ReactiveFormsModule } from '@angular/forms';
+
 // Wir definieren ein Interface für unsere KPI-Daten für Typsicherheit
 interface Kpi {
  value: string;
@@ -65,11 +72,16 @@ interface Kpi {
    ExpansionPanelComponent,
    PageHeaderComponent,
    ButtonComponent,
-    ChipComponent
+    ChipComponent,
+    ReactiveFormsModule
  ],
  templateUrl: './demo2.component.html',
 })
 export class Demo2Component {
+
+  demoForm: FormGroup;
+
+
  kpiData: Kpi[] = [
    {
      value: '€ 14.750',
@@ -199,8 +211,6 @@ export class Demo2Component {
    },
  ];

-  benutzername: string = '';
-  email: string = '';
  aktuellesPasswort: any = '';
  neuesPasswort: any = '';

@@ -221,11 +231,20 @@ export class Demo2Component {
  private readonly darkModeKey = 'app-dark-mode-setting';
  darkModeAktiv: boolean = false;

+
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document,
-    @Inject(PLATFORM_ID) private platformId: Object
-  ) {}
+    @Inject(PLATFORM_ID) private platformId: Object,
+
+    private fb: FormBuilder
+  ) {
+    this.demoForm = this.fb.group({
+      username: [''], // Entspricht dem [(value)]="benutzername"
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required]]
+    });
+  }

  ngOnInit(): void {
    this.loadThemeSetting();
--- a/src/app/features/demo/demo.routes.ts
+++ b/src/app/features/demo/demo.routes.ts
@@ -15,13 +15,13 @@ export const DEMO_ROUTES: Routes = [
    // Diese Route passt auf '/demo/1' und lädt die Komponente genau einmal.
    path: '1',
    component: Demo1Component,
-    title: 'Demo',
+    title: 'Demo1',
  },
  {
    // Diese Route passt auf '/demo/1' und lädt die Komponente genau einmal.
    path: '2',
    component: Demo2Component,
-    title: 'Demo',
+    title: 'Demo2',
  },
  // Hier könntest du weitere Routen wie '2', '3' etc. hinzufügen,
  // die andere Komponenten laden.
--- a/src/app/shared/components/form/form-field/form-field.component.html
+++ b/src/app/shared/components/form/form-field/form-field.component.html
@@ -2,10 +2,12 @@
  <input 
    [type]="type"
    class="form-input"
-    [id]="label"
+    [id]="controlId"
    placeholder=" "
-    [value]="value"
-    (input)="onInput($event)"
-    [disabled]="disabled">
-  <label [for]="label" class="form-label">{{ label }}</label>
+    [disabled]="disabled"
+    [(ngModel)]="value"
+    (ngModelChange)="onChange($event)"
+    (blur)="onTouched()">
+  
+  <label [for]="controlId" class="form-label">{{ label }}</label>
 </div>
--- a/src/app/shared/components/form/form-field/form-field.component.ts
+++ b/src/app/shared/components/form/form-field/form-field.component.ts
@@ -1,32 +1,57 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import {
+  FormsModule,
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';

@Component({
  selector: 'app-form-field',
  standalone: true,
-  imports: [CommonModule], // Kein FormsModule mehr nötig
+  imports: [
+    CommonModule,
+    FormsModule, // Wichtig für [(ngModel)] im Template
+  ],
  templateUrl: './form-field.component.html',
  styleUrl: './form-field.component.css',
-  // Kein 'providers'-Block für ControlValueAccessor mehr
+  providers: [
+    {
+      // Stellt diese Komponente als "Value Accessor" zur Verfügung
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FormFieldComponent),
+      multi: true,
+    },
+  ],
 })
-export class FormFieldComponent {
-  // EINGÄNGE: Werte, die von außen gesetzt werden
+// Die Komponente implementiert die ControlValueAccessor-Schnittstelle
+export class FormFieldComponent implements ControlValueAccessor {
  @Input() label: string = '';
  @Input() type: 'text' | 'email' | 'password' = 'text';
-  @Input() value: string = ''; // Der aktuelle Wert des Feldes
-  @Input() disabled: boolean = false;

-  // AUSGANG: Ein Event, das ausgelöst wird, wenn sich der Wert ändert
-  // WICHTIG: Der Name muss `[InputName]Change` sein, also `valueChange`
-  @Output() valueChange = new EventEmitter<string>();
+  controlId = `form-field-${Math.random().toString(36)}`;

-  /**
-   * Diese Methode wird bei jeder Tastatureingabe im Input-Feld aufgerufen.
-   */
-  onInput(event: Event): void {
-    // 1. Hole den neuen Wert aus dem HTML-Input-Element
-    const newValue = (event.target as HTMLInputElement).value;
-    // 2. Sende den neuen Wert über den EventEmitter nach außen
-    this.valueChange.emit(newValue);
+  // --- Eigenschaften für ControlValueAccessor ---
+  value: string = '';
+  onChange: (value: any) => void = () => {};
+  onTouched: () => void = () => {};
+  disabled = false;
+
+  // --- Methoden, die von Angular Forms aufgerufen werden ---
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
  }
 }