feat: create PasswordRequestComponent and integrate into ForgotPasswordComponent to separate responsibilities

frontend/src/app/components/auth/forgot-password/email-request/email-request.component.ts

@@ -18,7 +18,7 @@ import { emailFormatValidator } from '../../../../validators/email-format.valida
   styleUrl: './email-request.component.scss',
 })
 export class EmailRequestComponent implements OnInit {
-  @Output() submittedChange = new EventEmitter<boolean>();
+  @Output() submittedChangeEmail = new EventEmitter<boolean>();
 
   form: FormGroup = new FormGroup({});
 
@@ -86,6 +86,6 @@ export class EmailRequestComponent implements OnInit {
    * Emits an event indicating that the form was successfully submitted.
    */
   private emitFormSubmitted(): void {
-    this.submittedChange.emit(true);
+    this.submittedChangeEmail.emit(true);
   }
 }

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

@@ -1,11 +1,11 @@
 <section class="login-background">
   <div class="content">
     <div class="headline">Forgot your password?</div>
-    @if (!queryEmail && !sendEmailSuccess && !queryEmailSuccess) {
+    @if (!queryEmail && !emailSendSuccess && !passwordChangeSuccess) {
     <app-email-request
-      (submittedChange)="submittedChange($event)"
+      (submittedChangeEmail)="submittedChangeEmail($event)"
     ></app-email-request>
-    } @else { @if (sendEmailSuccess) {
+    } @else { @if (emailSendSuccess) {
     <div class="note">
       <p>
         If the email you entered exists on our server, you will receive a
@@ -13,7 +13,7 @@
       </p>
       <a routerLink="/login">To the login</a>
     </div>
-    } @if (queryEmailSuccess) {
+    } @if (passwordChangeSuccess) {
     <div class="note">
       <p>
         Password change successful.<br />You can now log in with your new
@@ -21,88 +21,12 @@
       </p>
       <a routerLink="/login">To the login</a>
     </div>
-    } @if (queryEmail && !queryEmailSuccess) {
+    } @if (queryEmail && !passwordChangeSuccess) {
-    <div class="note">
+    <app-password-request
-      <p>Please enter your new password and confirm it.</p>
+      [queryData]="queryData"
-    </div>
+      (submittedChangePassword)="submittedChangePassword($event)"
-    <form
+    ></app-password-request>
-      #taskForm="ngForm"
+
-      (ngSubmit)="onSubmit(taskForm, password)"
-      onsubmit="return false"
-    >
-      <div class="password-field">
-        <input
-          [type]="authService.passwordFieldType"
-          id="password"
-          name="password"
-          #password="ngModel"
-          placeholder="Enter a password"
-          autocomplete="new-password"
-          [(ngModel)]="authData.password"
-          pattern="[^<>]*"
-          minlength="6"
-          [class.error-border]="
-            password.invalid && password.touched && authData.password.length < 6
-          "
-          required
-        />
-        <img class="password-icon" src="./assets/img/password.svg" />
-        <img
-          class="password-eye"
-          (click)="authService.togglePasswordVisibility()"
-          [src]="authService.passwordIcon"
-        />
-      </div>
-      <div class="error-msg">
-        @if (!password.valid && password.touched && authData.password.length <
-        1) {
-        <p>Please enter a password</p>
-        } @else { @if (authData.password && authData.password.length < 6 &&
-        password.touched) {
-        <p>Password is too short, min 6 characters</p>
-        } }
-      </div>
-      <div class="password-field">
-        <input
-          [type]="authService.passwordFieldType"
-          id="passwordConfirm"
-          name="passwordConfirm"
-          #passwordConfirm="ngModel"
-          placeholder="Confirm password"
-          autocomplete="new-password"
-          [(ngModel)]="authData.passwordConfirm"
-          pattern="[^<>]*"
-          minlength="6"
-          [class.error-border]="
-            authData.password !== authData.passwordConfirm &&
-            passwordConfirm.touched
-          "
-          required
-        />
-        <img class="password-icon" src="./assets/img/password.svg" />
-        <img
-          class="password-eye"
-          (click)="authService.togglePasswordVisibility()"
-          [src]="authService.passwordIcon"
-        />
-      </div>
-      <div class="error-msg">
-        @if (authData.password !== authData.passwordConfirm &&
-        passwordConfirm.touched) {
-        <p>The passwords do not match</p>
-        }
-      </div>
-      <app-btn-large
-        [value]="'Update Password'"
-        [disabled]="
-          !isUserEmailValid(authData.email) ||
-          authData.password !== authData.passwordConfirm ||
-          !authData.password ||
-          !authData.passwordConfirm ||
-          authData.send
-        "
-      ></app-btn-large>
-    </form>
     } }
   </div>
 </section>

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

@@ -6,22 +6,25 @@ 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';
 
 @Component({
   selector: 'app-forgot-password',
   standalone: true,
   imports: [
     CommonModule,
-    BtnLargeComponent,
     FormsModule,
     RouterLink,
     EmailRequestComponent,
+    PasswordRequestComponent,
   ],
   templateUrl: './forgot-password.component.html',
   styleUrl: './forgot-password.component.scss',
 })
 export class ForgotPasswordComponent implements OnInit {
-  sendEmailSuccess: boolean = false;
+  emailSendSuccess: boolean = false;
+  passwordChangeSuccess: boolean = false;
+
   queryEmail: boolean = false;
   queryEmailSuccess: boolean = false;
 
@@ -29,10 +32,14 @@ export class ForgotPasswordComponent implements OnInit {
     email: '',
     token: '',
     password: '',
-    passwordConfirm: '',
     send: false,
   };
 
+  queryData = {
+    email: '',
+    token: '',
+  };
+
   /**
    * Initializes the ForgotPasswordComponent with ActivatedRoute, AuthService, and ErrorService.
    */
@@ -50,8 +57,12 @@ export class ForgotPasswordComponent implements OnInit {
     this.handleQueryParams();
   }
 
-  submittedChange(value: boolean): void {
+  submittedChangeEmail(success: boolean): void {
-    this.sendEmailSuccess = value;
+    this.emailSendSuccess = success;
+  }
+
+  submittedChangePassword(success: boolean): void {
+    this.passwordChangeSuccess = success;
   }
 
   /**
@@ -60,8 +71,7 @@ export class ForgotPasswordComponent implements OnInit {
   private handleQueryParams(): void {
     this.route.queryParams.subscribe((params) => {
       this.extractAuthParams(params);
-      this.queryEmailSuccess = params['pw-change'] || '';
+      if (this.queryData.email && this.queryData.token) {
-      if (this.authData.email && this.authData.token) {
         this.queryEmail = true;
       }
     });
@@ -73,8 +83,8 @@ export class ForgotPasswordComponent implements OnInit {
    * @param params The query parameters from the URL.
    */
   private extractAuthParams(params: Params): void {
-    this.authData.email = params['email'] || '';
+    this.queryData.email = params['email'] || '';
-    this.authData.token = params['token'] || '';
+    this.queryData.token = params['token'] || '';
   }
 
   /**
@@ -120,11 +130,11 @@ export class ForgotPasswordComponent implements OnInit {
     this.authData.send = true;
     try {
       await this.authService.forgotPassword(body);
-      this.sendEmailSuccess = true;
+      this.emailSendSuccess = true;
       this.errorService.clearError();
     } catch (error) {
       this.authData.send = false;
-      this.sendEmailSuccess = false;
+      this.emailSendSuccess = false;
       this.errorService.handleError(error);
     }
   }

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

@@ -0,0 +1,79 @@
+<div class="note">
+  <p>Please enter your new password and confirm it.</p>
+</div>
+
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
+  <div class="password-field">
+    <input
+      [type]="authService.passwordFieldType"
+      id="password"
+      formControlName="password"
+      placeholder="Enter a password"
+      autocomplete="new-password"
+      minlength="8"
+      [class.error-border]="
+        form.controls['password'].invalid && form.controls['password'].touched
+      "
+    />
+    <img class="password-icon" src="./assets/img/password.svg" />
+    <img
+      class="password-eye"
+      (click)="authService.togglePasswordVisibility()"
+      [src]="authService.passwordIcon"
+    />
+  </div>
+
+  <div class="error-container">
+    @if (form.controls['password'].touched && form.controls['password'].invalid)
+    {
+    <div class="error-msg">
+      @if (form.controls['password'].errors?.['required']) {
+      <p role="alert">Please enter a password</p>
+      } @if (form.controls['password'].errors?.['minlength']) {
+      <p role="alert">Password is too short, min 8 characters</p>
+      }
+    </div>
+    }
+  </div>
+
+  <div class="password-field">
+    <input
+      [type]="authService.passwordFieldType"
+      id="passwordConfirm"
+      formControlName="passwordConfirm"
+      placeholder="Confirm password"
+      autocomplete="new-password"
+      minlength="8"
+      [class.error-border]="
+        form.controls['passwordConfirm'].invalid &&
+        form.controls['passwordConfirm'].touched
+      "
+    />
+    <img class="password-icon" src="./assets/img/password.svg" />
+    <img
+      class="password-eye"
+      (click)="authService.togglePasswordVisibility()"
+      [src]="authService.passwordIcon"
+    />
+  </div>
+
+  <div class="error-container">
+    @if ( form.controls['passwordConfirm'].touched &&
+    form.controls['passwordConfirm'].invalid ) {
+    <div class="error-msg">
+      @if (form.controls['passwordConfirm'].errors?.['required']) {
+      <p role="alert">Please confirm your password</p>
+      } @if ( form.controls['password'].value !==
+      form.controls['passwordConfirm'].value &&
+      form.controls['passwordConfirm'].touched ) {
+      <p role="alert">The passwords do not match</p>
+      }
+    </div>
+    }
+  </div>
+
+  <app-btn-large
+    [value]="'Update Password'"
+    [disabled]="form.invalid || form.disabled"
+  ></app-btn-large>
+</form>

frontend/src/app/components/auth/forgot-password/password-request/password-request.component.scss

@@ -0,0 +1,3 @@
+@use "./../../../../../assets/style/backgrounds.scss" as *;
+@use "./../../../../../assets/style/form.scss" as *;
+@use "./../../../../../assets/style/auth-layout.scss" as *;

frontend/src/app/components/auth/forgot-password/password-request/password-request.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordRequestComponent } from './password-request.component';
+
+describe('PasswordRequestComponent', () => {
+  let component: PasswordRequestComponent;
+  let fixture: ComponentFixture<PasswordRequestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PasswordRequestComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PasswordRequestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,99 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component';
+import {
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { AuthService } from '../../../../services/auth.service';
+import { ErrorService } from '../../../../services/error.service';
+
+@Component({
+  selector: 'app-password-request',
+  imports: [BtnLargeComponent, FormsModule, ReactiveFormsModule],
+  templateUrl: './password-request.component.html',
+  styleUrl: './password-request.component.scss',
+})
+export class PasswordRequestComponent {
+  @Input() queryData!: { email: string; token: string };
+
+  @Output() submittedChangePassword = new EventEmitter<boolean>();
+
+  form: FormGroup = new FormGroup({});
+
+  /**
+   * Initializes the PasswordRequestComponent with FormBuilder, AuthService, and ErrorService.
+   */
+  constructor(
+    private fb: FormBuilder,
+    public authService: AuthService,
+    private errorService: ErrorService
+  ) {}
+
+  /**
+   * Lifecycle hook that initializes the component.
+   * Initializes the form on component load.
+   */
+  ngOnInit(): void {
+    this.createForm();
+  }
+
+  /**
+   * Handles the form submission for password change.
+   * Validates the form, sends a password change request,
+   * and emits a submission event on success.
+   *
+   * @returns A Promise that resolves when the process is complete.
+   */
+  async onSubmit(): Promise<void> {
+    if (this.form.valid) {
+      const body = this.createFormRequestBody();
+      this.form.disable();
+
+      try {
+        await this.authService.changePassword(body);
+        this.emitFormSubmitted();
+      } catch (error) {
+        this.errorService.handleError(error);
+      } finally {
+        this.form.enable();
+      }
+    }
+  }
+
+  /**
+   * Initializes the reactive form with validators.
+   */
+  private createForm(): void {
+    this.form = this.fb.group({
+      password: ['', Validators.required],
+      passwordConfirm: ['', Validators.required],
+    });
+  }
+
+  /**
+   * Constructs the request payload from the form values.
+   *
+   * @returns An object containing the email, token, and password.
+   */
+  private createFormRequestBody(): {
+    email: string;
+    token: string;
+    password: string;
+  } {
+    return {
+      email: this.queryData.email,
+      token: this.queryData.token,
+      password: this.form.value.password,
+    };
+  }
+
+  /**
+   * Emits an event indicating that the form was successfully submitted.
+   */
+  private emitFormSubmitted(): void {
+    this.submittedChangePassword.emit(true);
+  }
+}