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

- @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 - } -
- } -
- -
- -
-
- } - -
-

- -

+ + + + +

+ @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 + } +
+ } +
+ +
+ +
+
+ } + +
+

+ + Zurück zur Startseite + +

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