diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 3adc99f..e07b16d 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -5,8 +5,8 @@ - Auth Forms Overlay --> - @if (showLogin() || showRegister()) { + + @if (showLogin() || showRegister() || showRecoverPassword()) { } diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 52c1fc3..a889011 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -4,16 +4,25 @@ import { NavbarComponent } from './shared/components/navbar/navbar.component'; import { FooterComponent } from './shared/components/footer/footer.component'; import { LoginComponent } from './feature/auth/login/login.component'; import { RegisterComponent } from './feature/auth/register/register.component'; +import { RecoverPasswordComponent } from './feature/auth/recover-password/recover-password.component'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, NavbarComponent, FooterComponent, LoginComponent, RegisterComponent], + imports: [ + RouterOutlet, + NavbarComponent, + FooterComponent, + LoginComponent, + RegisterComponent, + RecoverPasswordComponent, + ], templateUrl: './app.component.html', }) export class AppComponent { showLogin = signal(false); showRegister = signal(false); + showRecoverPassword = signal(false); @HostListener('document:keydown.escape') handleEscapeKey() { @@ -23,18 +32,28 @@ export class AppComponent { showLoginForm() { this.showLogin.set(true); this.showRegister.set(false); + this.showRecoverPassword.set(false); document.body.style.overflow = 'hidden'; } showRegisterForm() { this.showRegister.set(true); this.showLogin.set(false); + this.showRecoverPassword.set(false); + document.body.style.overflow = 'hidden'; + } + + showRecoverPasswordForm() { + this.showRecoverPassword.set(true); + this.showLogin.set(false); + this.showRegister.set(false); document.body.style.overflow = 'hidden'; } hideAuthForms() { this.showLogin.set(false); this.showRegister.set(false); + this.showRecoverPassword.set(false); document.body.style.overflow = 'auto'; } diff --git a/frontend/src/app/feature/auth/login/login.component.ts b/frontend/src/app/feature/auth/login/login.component.ts index 946f412..dc8a307 100644 --- a/frontend/src/app/feature/auth/login/login.component.ts +++ b/frontend/src/app/feature/auth/login/login.component.ts @@ -17,6 +17,7 @@ export class LoginComponent { isLoading = signal(false); @Output() switchForm = new EventEmitter(); @Output() closeDialog = new EventEmitter(); + @Output() forgotPassword = new EventEmitter(); constructor( private fb: FormBuilder, @@ -65,7 +66,6 @@ export class LoginComponent { } switchToForgotPassword() { - this.closeDialog.emit(); - this.router.navigate(['/recover-password']); + this.forgotPassword.emit(); } } diff --git a/frontend/src/app/feature/auth/recover-password/recover-password.component.html b/frontend/src/app/feature/auth/recover-password/recover-password.component.html index 8dccc09..d89ce27 100644 --- a/frontend/src/app/feature/auth/recover-password/recover-password.component.html +++ b/frontend/src/app/feature/auth/recover-password/recover-password.component.html @@ -1,172 +1,170 @@ -
-
- - -

- @if (isResetMode()) { - Passwort zurücksetzen - } @else { - Passwort vergessen - } -

- - @if (errorMessage()) { -
- {{ errorMessage() }} -
- } - - @if (successMessage()) { -
- {{ successMessage() }} -
- } - - @if (!isResetMode()) { - -
-
-

- Gib deine E-Mail-Adresse ein, und wir senden dir einen Link zum Zurücksetzen deines - Passworts. -

-
- -
- - - - @if (emailFormControls['email'].touched && emailFormControls['email'].errors) { -
- @if (emailFormControls['email'].errors['required']) { - E-Mail ist erforderlich - } - @if (emailFormControls['email'].errors['email']) { - Bitte gib eine gültige E-Mail-Adresse ein - } -
- } -
- -
- -
-
- } + + + +

@if (isResetMode()) { - -
-
-

Gib dein neues Passwort ein.

-
- -
- - - - @if (resetFormControls['password'].touched && resetFormControls['password'].errors) { -
- @if (resetFormControls['password'].errors['required']) { - Passwort ist erforderlich - } - @if (resetFormControls['password'].errors['minlength']) { - Passwort muss mindestens 8 Zeichen lang sein - } -
- } -
- -
- - - - @if ( - resetFormControls['confirmPassword'].touched && - (resetFormControls['confirmPassword'].errors || - resetPasswordForm.errors?.['passwordMismatch']) - ) { -
- @if (resetFormControls['confirmPassword'].errors?.['required']) { - Passwortbestätigung ist erforderlich - } - @if (resetPasswordForm.errors?.['passwordMismatch']) { - Passwörter stimmen nicht überein - } -
- } -
- -
- -
-
+ Passwort zurücksetzen + } @else { + Passwort vergessen } +

-
-

- - Zurück zur Startseite - -

+ @if (errorMessage()) { +
+ {{ errorMessage() }}
+ } + + @if (successMessage()) { +
+ {{ successMessage() }} +
+ } + + @if (!isResetMode()) { + +
+
+

+ Gib deine E-Mail-Adresse ein, und wir senden dir einen Link zum Zurücksetzen deines + Passworts. +

+
+ +
+ + + + @if (emailFormControls['email'].touched && emailFormControls['email'].errors) { +
+ @if (emailFormControls['email'].errors['required']) { + E-Mail ist erforderlich + } + @if (emailFormControls['email'].errors['email']) { + Bitte gib eine gültige E-Mail-Adresse ein + } +
+ } +
+ +
+ +
+
+ } + + @if (isResetMode()) { + +
+
+

Gib dein neues Passwort ein.

+
+ +
+ + + + @if (resetFormControls['password'].touched && resetFormControls['password'].errors) { +
+ @if (resetFormControls['password'].errors['required']) { + Passwort ist erforderlich + } + @if (resetFormControls['password'].errors['minlength']) { + Passwort muss mindestens 8 Zeichen lang sein + } +
+ } +
+ +
+ + + + @if ( + resetFormControls['confirmPassword'].touched && + (resetFormControls['confirmPassword'].errors || + resetPasswordForm.errors?.['passwordMismatch']) + ) { +
+ @if (resetFormControls['confirmPassword'].errors?.['required']) { + Passwortbestätigung ist erforderlich + } + @if (resetPasswordForm.errors?.['passwordMismatch']) { + Passwörter stimmen nicht überein + } +
+ } +
+ +
+ +
+
+ } + +
+

+ +

diff --git a/frontend/src/app/feature/auth/recover-password/recover-password.component.ts b/frontend/src/app/feature/auth/recover-password/recover-password.component.ts index d1ad253..3695d57 100644 --- a/frontend/src/app/feature/auth/recover-password/recover-password.component.ts +++ b/frontend/src/app/feature/auth/recover-password/recover-password.component.ts @@ -1,16 +1,16 @@ -import { Component, EventEmitter, Output, signal } from '@angular/core'; +import { Component, EventEmitter, Output, signal, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute, Router, RouterModule } from '@angular/router'; import { AuthService } from '@service/auth.service'; @Component({ selector: 'app-recover-password', standalone: true, - imports: [CommonModule, ReactiveFormsModule], + imports: [CommonModule, ReactiveFormsModule, RouterModule], templateUrl: './recover-password.component.html', }) -export class RecoverPasswordComponent { +export class RecoverPasswordComponent implements OnInit { emailForm: FormGroup; resetPasswordForm: FormGroup; errorMessage = signal(''); @@ -20,6 +20,7 @@ export class RecoverPasswordComponent { isResetMode = signal(false); @Output() closeDialog = new EventEmitter(); + @Output() switchToLogin = new EventEmitter(); constructor( private fb: FormBuilder, @@ -40,8 +41,11 @@ export class RecoverPasswordComponent { validators: this.passwordMatchValidator, } ); + } - // Check if we're in reset mode + ngOnInit(): void { + // Check if we're in reset mode via URL parameters + // This is still needed for direct access via URLs with token this.route.queryParamMap.subscribe((params) => { const token = params.get('token'); if (token) { @@ -111,7 +115,8 @@ export class RecoverPasswordComponent { 'Dein Passwort wurde erfolgreich zurückgesetzt. Du kannst dich jetzt anmelden.' ); setTimeout(() => { - this.router.navigate([''], { queryParams: { login: true } }); + this.closeDialog.emit(); + this.switchToLogin.emit(); }, 3000); }, error: (err) => { @@ -122,4 +127,8 @@ export class RecoverPasswordComponent { }, }); } + + goBackToLogin(): void { + this.switchToLogin.emit(); + } }