Chneemann/videoflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: improve code structure and readability in ForgotPasswordComponent

Browse source
This commit is contained in:
Chneemann 2025-05-08 09:39:23 +02:00
parent bd501f3d47
commit aaa2d11194
4 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/components/auth/forgot-password/email-request/email-request.component.html
View file

@ -1,7 +1,3 @@
<div class="note">
<p>We will send you an email with instructions to reset your password.</p>
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="email-field">
<input

41
frontend/src/app/components/auth/forgot-password/forgot-password.component.html
View file

@ -1,33 +1,38 @@
<section class="login-background">
<div class="content">
<div class="headline">Forgot your password?</div>
@if (!hasVerificationParams && !emailSendSuccess && !passwordChangeSuccess)
{
<!-- Email Request -->
@if (!hasVerificationParams && !emailSentSuccessfully) {
<div class="note">
<p>We will send you an email with instructions to reset your password.</p>
</div>
<app-email-request
(submittedChangeEmail)="submittedChangeEmail($event)"
></app-email-request>
} @else { @if (emailSendSuccess) {
}
<!-- Password Request -->
@if (hasVerificationParams && !passwordChangedSuccessfully) {
<div class="note">
<p>
If the email you entered exists on our server, you will receive a
message with instructions on how to reset your password.
</p>
<a routerLink="/login">To the login</a>
<p>Please enter your new password and confirm it.</p>
</div>
} @if (passwordChangeSuccess) {
<div class="note">
<p>
Password change successful.<br />You can now log in with your new
password.
</p>
<a routerLink="/login">To the login</a>
</div>
} @if (hasVerificationParams && !passwordChangeSuccess) {
<app-password-request
[verificationParams]="verificationParams"
(submittedChangePassword)="submittedChangePassword($event)"
></app-password-request>
}
} }
<!-- Success Messages -->
@if (emailSentSuccessfully || passwordChangedSuccessfully) {
<div class="note">
<p>
{{ successMessage }}
</p>
<a routerLink="/login">To the login</a>
</div>
}
</div>
</section>

17
frontend/src/app/components/auth/forgot-password/forgot-password.component.ts
View file

@ -21,8 +21,8 @@ import { firstValueFrom } from 'rxjs';
styleUrl: './forgot-password.component.scss',
})
export class ForgotPasswordComponent implements OnInit {
emailSendSuccess: boolean = false;
passwordChangeSuccess: boolean = false;
emailSentSuccessfully: boolean = false;
passwordChangedSuccessfully: boolean = false;
hasVerificationParams: boolean = false;
verificationParams: { email: string; token: string } = {
@ -82,7 +82,7 @@ export class ForgotPasswordComponent implements OnInit {
* @param success A boolean indicating whether the request was successful.
*/
submittedChangeEmail(success: boolean): void {
this.emailSendSuccess = success;
this.emailSentSuccessfully = success;
}
/**
@ -92,6 +92,15 @@ export class ForgotPasswordComponent implements OnInit {
* @param success A boolean indicating whether the password change was successful.
*/
submittedChangePassword(success: boolean): void {
this.passwordChangeSuccess = success;
this.passwordChangedSuccessfully = success;
}
get successMessage(): string {
if (this.emailSentSuccessfully) {
return 'If the email you entered exists on our server, you will receive a message with instructions on how to reset your password.';
} else if (this.passwordChangedSuccessfully) {
return 'Password change successful. You can now log in with your new password.';
}
return '';
}
}

4
frontend/src/app/components/auth/forgot-password/password-request/password-request.component.html
View file

@ -1,7 +1,3 @@
<div class="note">
<p>Please enter your new password and confirm it.</p>
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="password-field">
<input