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

refactor: clean up ForgotPasswordComponent by removing unnecessary code

Browse source
This commit is contained in:
Chneemann 2025-05-08 09:29:53 +02:00
parent a8a74761b4
commit bd501f3d47
3 changed files with 61 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,8 @@
<section class="login-background">
<div class="content">
<div class="headline">Forgot your password?</div>
@if (!queryEmail && !emailSendSuccess && !passwordChangeSuccess) {
@if (!hasVerificationParams && !emailSendSuccess && !passwordChangeSuccess)
{
<app-email-request
(submittedChangeEmail)="submittedChangeEmail($event)"
></app-email-request>
@ -21,9 +22,9 @@
</p>
<a routerLink="/login">To the login</a>
</div>
} @if (queryEmail && !passwordChangeSuccess) {
} @if (hasVerificationParams && !passwordChangeSuccess) {
<app-password-request
[queryData]="queryData"
[verificationParams]="verificationParams"
(submittedChangePassword)="submittedChangePassword($event)"
></app-password-request>

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

@ -1,12 +1,11 @@
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
import { FormsModule, NgForm } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Params, RouterLink } from '@angular/router';
import { AuthService } from '../../../services/auth.service';
import { ErrorService } from '../../../services/error.service';
import { EmailRequestComponent } from './email-request/email-request.component';
import { PasswordRequestComponent } from './password-request/password-request.component';
import { firstValueFrom } from 'rxjs';
@Component({
selector: 'app-forgot-password',
@ -24,140 +23,75 @@ import { PasswordRequestComponent } from './password-request/password-request.co
export class ForgotPasswordComponent implements OnInit {
emailSendSuccess: boolean = false;
passwordChangeSuccess: boolean = false;
hasVerificationParams: boolean = false;
queryEmail: boolean = false;
queryEmailSuccess: boolean = false;
authData = {
email: '',
token: '',
password: '',
send: false,
};
queryData = {
verificationParams: { email: string; token: string } = {
email: '',
token: '',
};
/**
* Initializes the ForgotPasswordComponent with ActivatedRoute, AuthService, and ErrorService.
* Initializes the ForgotPasswordComponent with ActivatedRoute and AuthService.
*/
constructor(
private route: ActivatedRoute,
public authService: AuthService,
public errorService: ErrorService
) {}
constructor(private route: ActivatedRoute, public authService: AuthService) {}
/**
* Lifecycle hook that initializes the component.
* Extracts query parameters and triggers email query flag if needed.
* Initializes the component and triggers the email verification process.
*/
ngOnInit(): void {
this.handleQueryParams();
async ngOnInit(): Promise<void> {
await this.initVerification();
}
/**
* Coordinates the overall email verification process by handling query parameters
* and calling the verification API if valid data is present.
*/
private async initVerification(): Promise<void> {
await this.handleQueryParams();
if (this.verificationParams.email && this.verificationParams.token) {
this.hasVerificationParams = true;
}
}
/**
* Retrieves and processes query parameters from the current route.
* Extracts the necessary authentication data for verification.
*/
private async handleQueryParams(): Promise<void> {
const params = await firstValueFrom(this.route.queryParams);
this.extractAuthParams(params);
}
/**
* Extracts the 'email' and 'token' values from the given query parameters
* and stores them in the verifyData object.
*
* @param params The query parameters from the current route.
*/
private extractAuthParams(params: Params): void {
this.verificationParams = {
email: params['email'] || '',
token: params['token'] || '',
};
}
/**
* Event handler for the completion of the email change request process.
* Updates the UI to reflect the success status of the email change.
*
* @param success A boolean indicating whether the request was successful.
*/
submittedChangeEmail(success: boolean): void {
this.emailSendSuccess = success;
}
/**
* Event handler for the completion of the password change request process.
* Updates the UI to reflect the success status of the password change.
*
* @param success A boolean indicating whether the password change was successful.
*/
submittedChangePassword(success: boolean): void {
this.passwordChangeSuccess = success;
}
/**
* Subscribes to query parameters and sets internal flags based on them.
*/
private handleQueryParams(): void {
this.route.queryParams.subscribe((params) => {
this.extractAuthParams(params);
if (this.queryData.email && this.queryData.token) {
this.queryEmail = true;
}
});
}
/**
* Extracts email and token from route parameters and stores them in authData.
*
* @param params The query parameters from the URL.
*/
private extractAuthParams(params: Params): void {
this.queryData.email = params['email'] || '';
this.queryData.token = params['token'] || '';
}
/**
* Validates the given email address.
*
* @param emailValue The email to validate.
* @returns True if the email is valid, false otherwise.
*/
isUserEmailValid(emailValue: string): boolean {
const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
return emailRegex.test(emailValue);
}
/**
* Handles form submission based on which field was used (email or password).
*
* @param ngForm The form group.
* @param emailInput The input field triggering the submit.
*/
async onSubmit(ngForm: NgForm, emailInput: any): Promise<void> {
if (ngForm.submitted && ngForm.form.valid) {
try {
if (emailInput.name === 'email') {
await this.verifyEmail();
} else if (emailInput.name === 'password') {
await this.changePassword();
}
ngForm.form.reset();
} catch {}
} else {
emailInput.control.markAsTouched();
}
}
/**
* Sends a request to start the forgot-password process.
* Updates flags and handles errors accordingly.
*/
private async verifyEmail(): Promise<void> {
const body = {
email: this.authData.email.toLowerCase(),
};
this.authData.send = true;
try {
await this.authService.forgotPassword(body);
this.emailSendSuccess = true;
this.errorService.clearError();
} catch (error) {
this.authData.send = false;
this.emailSendSuccess = false;
this.errorService.handleError(error);
}
}
/**
* Sends a request to update the user's password using the token.
* Updates flags and handles errors accordingly.
*/
private async changePassword(): Promise<void> {
const body = {
email: this.authData.email.toLowerCase(),
token: this.authData.token,
new_password: this.authData.password,
};
this.authData.send = true;
try {
await this.authService.changePassword(body);
this.queryEmail = false;
this.queryEmailSuccess = true;
this.errorService.clearError();
} catch (error) {
this.authData.send = false;
this.errorService.handleError(error);
}
}
}

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

@ -17,7 +17,7 @@ import { ErrorService } from '../../../../services/error.service';
styleUrl: './password-request.component.scss',
})
export class PasswordRequestComponent {
@Input() queryData!: { email: string; token: string };
@Input() verificationParams!: { email: string; token: string };
@Output() submittedChangePassword = new EventEmitter<boolean>();
@ -84,8 +84,8 @@ export class PasswordRequestComponent {
password: string;
} {
return {
email: this.queryData.email,
token: this.queryData.token,
email: this.verificationParams.email,
token: this.verificationParams.token,
password: this.form.value.password,
};
}