From bd501f3d4700f1c134eaa52047254ba017659d4b Mon Sep 17 00:00:00 2001 From: Chneemann Date: Thu, 8 May 2025 09:29:53 +0200 Subject: [PATCH] refactor: clean up ForgotPasswordComponent by removing unnecessary code --- .../forgot-password.component.html | 7 +- .../forgot-password.component.ts | 174 ++++++------------ .../password-request.component.ts | 6 +- 3 files changed, 61 insertions(+), 126 deletions(-) diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html index 5c1dc4b..943b7b6 100644 --- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html +++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html @@ -1,7 +1,8 @@
Forgot your password?
- @if (!queryEmail && !emailSendSuccess && !passwordChangeSuccess) { + @if (!hasVerificationParams && !emailSendSuccess && !passwordChangeSuccess) + { @@ -21,9 +22,9 @@

To the login
- } @if (queryEmail && !passwordChangeSuccess) { + } @if (hasVerificationParams && !passwordChangeSuccess) { diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts b/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts index f17c16a..c956c77 100644 --- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts +++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.ts @@ -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 { + 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 { + 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 { + 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 { - 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 { - 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 { - 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); - } - } } diff --git a/frontend/src/app/components/auth/forgot-password/password-request/password-request.component.ts b/frontend/src/app/components/auth/forgot-password/password-request/password-request.component.ts index 1dc7ee6..6325e12 100644 --- a/frontend/src/app/components/auth/forgot-password/password-request/password-request.component.ts +++ b/frontend/src/app/components/auth/forgot-password/password-request/password-request.component.ts @@ -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(); @@ -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, }; }