auth

src/app/features/auth/components/auth-layout/auth-layout.component.css

@@ -21,6 +21,19 @@
   animation: fade-in 0.5s ease-out forwards;
 }
 
+.auth-header {
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.auth-logo {
+  display: inline-block;
+  padding: 0.75rem;
+  background: var(--color-primary-gradient);
+  color: #fff;
+  border-radius: 50%;
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;

src/app/features/auth/components/auth-layout/auth-layout.component.html

@@ -1,5 +1,25 @@
 <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>
+
+    <!-- Der RouterOutlet rendert die spezifischen Inhalte (Login, Register, etc.) -->
     <div class="auth-content">
       <router-outlet></router-outlet>
     </div>

src/app/features/auth/components/forgot-password/forgot-password.component.html

@@ -1,36 +1,29 @@
-<!-- Ansicht, BEVOR das Formular abgeschickt wurde -->
+<div class="component-header">
+  <h2 class="auth-title">Passwort vergessen?</h2>
+</div>
+
 <div *ngIf="!emailSent">
   <p class="info-text">
-    Geben Sie Ihre E-Mail-Adresse ein, und wir senden Ihnen einen Link zum Zurücksetzen Ihres Passworts.
+    Geben Sie Ihre E-Mail-Adresse ein. Wir senden Ihnen einen Link, mit dem Sie Ihr Passwort zurücksetzen können.
   </p>
-
   <form [formGroup]="forgotPasswordForm" (ngSubmit)="onSubmit()" novalidate>
-    <!-- E-Mail-Feld -->
     <div class="form-field">
-      <input 
+      <input type="email" class="form-input" id="email" placeholder=" " formControlName="email">
-        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 zum Zurücksetzen anfordern
+      Link anfordern
     </button>
   </form>
 </div>
 
-<!-- Ansicht, NACHDEM das Formular erfolgreich abgeschickt wurde -->
 <div *ngIf="emailSent" class="success-message">
   <h3 class="success-title">Prüfen Sie Ihr Postfach</h3>
   <p class="info-text">
-    Wenn ein Konto mit der E-Mail-Adresse <strong>{{ forgotPasswordForm.value.email }}</strong> existiert, haben wir soeben einen Link zum Zurücksetzen des Passworts dorthin gesendet.
+    Wenn ein Konto mit <strong>{{ forgotPasswordForm.value.email }}</strong> existiert, wurde ein Link versendet.
   </p>
 </div>
 
-<!-- Link zurück zum Login -->
 <div class="footer-link">
   <a routerLink="/auth/login" class="link">Zurück zum Login</a>
 </div>

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

@@ -1,60 +1,36 @@
+<!-- Seitenspezifischer Titel und Untertitel -->
 <div class="component-header">
   <h2 class="auth-title">Anmelden</h2>
-  <p class="auth-subtitle">Starten Sie, indem Sie Ihre Daten eingeben.</p>
+  <p class="auth-subtitle">Bitte geben Sie Ihre Daten ein, um fortzufahren.</p>
 </div>
 
-<!-- [formGroup] bindet das Formular an unsere loginForm-Variable im TypeScript -->
 <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate>
-  
-  <!-- E-Mail-Feld -->
   <div class="form-field">
-    <input 
+    <input type="email" class="form-input" id="email" placeholder=" " formControlName="email">
-      type="email" 
-      class="form-input" 
-      id="email" 
-      placeholder=" "
-      formControlName="email"> <!-- Verbindet dieses Input-Feld mit 'email' im FormGroup -->
     <label for="email" class="form-label">E-Mail-Adresse</label>
   </div>
-  <!-- Hier könnten Validierungs-Fehlermeldungen angezeigt werden -->
   
-  <!-- Passwort-Feld -->
   <div class="form-field">
-    <input 
+    <input type="password" class="form-input" id="password" placeholder=" " formControlName="password">
-      type="password" 
-      class="form-input" 
-      id="password" 
-      placeholder=" "
-      formControlName="password"> <!-- Verbindet dieses Input-Feld mit 'password' im FormGroup -->
     <label for="password" class="form-label">Passwort</label>
   </div>
 
-  <!-- "Passwort vergessen?" Link -->
   <div class="form-actions">
-    <!-- routerLink navigiert zur "forgot-password"-Route, die Sie definieren müssen -->
     <a routerLink="/auth/forgot-password" class="link">Passwort vergessen?</a>
   </div>
 
-  <!-- Absende-Button -->
-  <!-- [disabled] wird dynamisch an die Gültigkeit des Formulars gebunden -->
   <button type="submit" class="btn btn-primary btn-full-width" [disabled]="loginForm.invalid">
     Anmelden
   </button>
 
-  <!-- Visueller Trenner -->
+  <div class="divider-or"><span>oder</span></div>
-  <div class="divider-or">
-    <span>oder</span>
-  </div>
 
-  <!-- Social Login Button (Beispiel) -->
   <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>
   
-  <!-- Link zur Registrierung -->
   <div class="footer-link">
     Noch kein Konto? <a routerLink="/auth/register" class="link">Jetzt registrieren</a>
   </div>
-
 </form>

src/app/features/auth/components/register/register.component.html

@@ -4,7 +4,6 @@
 </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>
@@ -23,7 +22,6 @@
   <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>
-    <!-- Fehlermeldung für nicht übereinstimmende Passwörter -->
     <div *ngIf="registerForm.errors?.['passwordMismatch'] && registerForm.get('confirmPassword')?.touched" class="error-text">
       Die Passwörter stimmen nicht überein.
     </div>