refactor: clean up VerifyEmailComponent for improved readability and maintainability

frontend/src/app/components/auth/verify-email/verify-email.component.html

@@ -2,13 +2,13 @@
   <div class="content">
     <div class="headline">Verify Email</div>
     <div class="note">
-      @if (verified) {
+      @if (verificationSuccess) {
       <p>Your email has been successfully verified! You can now log in.</p>
       <a routerLink="/login">To the login</a>
       } @else {
       <p>
-        There was an issue verifying your email.<br />Please try again or
+        There was an issue verifying your data.<br />Please try again or contact
-        contact support for assistance.
+        <a href="mailto: andre.kempf.dev@gmail.com">support</a> for assistance.
       </p>
       }
     </div>

frontend/src/app/components/auth/verify-email/verify-email.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, RouterLink } from '@angular/router';
 import { AuthService } from '../../../services/auth.service';
 import { ErrorService } from '../../../services/error.service';
 import { CommonModule } from '@angular/common';
+import { firstValueFrom } from 'rxjs';
 
 @Component({
   selector: 'app-verify-email',
@@ -11,13 +12,12 @@ import { CommonModule } from '@angular/common';
   templateUrl: './verify-email.component.html',
   styleUrl: './verify-email.component.scss',
 })
-export class VerifyEmailComponent {
+export class VerifyEmailComponent implements OnInit {
-  verified: boolean = false;
+  verificationSuccess: boolean = false;
 
-  authData = {
+  verificationParams: { email: string; token: string } = {
     email: '',
     token: '',
-    send: false,
   };
 
   /**
@@ -26,56 +26,64 @@ export class VerifyEmailComponent {
   constructor(
     private route: ActivatedRoute,
     private authService: AuthService,
-    public errorService: ErrorService
+    private errorService: ErrorService
   ) {}
 
   /**
-   * Lifecycle hook that is called after data-bound properties are initialized.
+   * Initializes the component and triggers the email verification process.
-   * Subscribes to query parameters and triggers email verification.
    */
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
-    this.handleQueryParams();
+    await this.initVerification();
   }
 
   /**
-   * Subscribes to the query parameters from the route and extracts authentication data.
+   * Coordinates the overall email verification process by handling query parameters
-   * Then triggers the email verification process.
+   * and calling the verification API if valid data is present.
    */
-  private handleQueryParams(): void {
+  private async initVerification(): Promise<void> {
-    this.route.queryParams.subscribe((params) => {
+    await this.handleQueryParams();
+    if (this.verificationParams.email && this.verificationParams.token) {
+      await this.verifyEmail();
+    }
+  }
+
+  /**
+   * Retrieves and processes query parameters from the current route.
+   * Extracts the necessary authentication data for email verification.
+   */
+  private async handleQueryParams(): Promise<void> {
+    const params = await firstValueFrom(this.route.queryParams);
     this.extractAuthParams(params);
-      this.verifyEmail();
-    });
   }
 
   /**
-   * Extracts the 'email' and 'token' parameters from the query and assigns them to authData.
+   * 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 route.
+   * @param params The query parameters from the current route.
    */
   private extractAuthParams(params: Params): void {
-    this.authData.email = params['email'] || '';
+    this.verificationParams = {
-    this.authData.token = params['token'] || '';
+      email: params['email'] || '',
+      token: params['token'] || '',
+    };
   }
 
   /**
-   * Sends a request to verify the user's email using the extracted authentication data.
+   * Calls the AuthService to verify the user's email using the provided credentials.
-   * Sets the appropriate flags based on the result and handles errors if any occur.
+   * Updates the verification status and delegates error handling if the request fails.
    */
   private async verifyEmail(): Promise<void> {
-    const body = {
+    const body: { email: string; token: string } = {
-      email: this.authData.email.toLowerCase(),
+      email: this.verificationParams.email.toLowerCase(),
-      token: this.authData.token,
+      token: this.verificationParams.token,
     };
 
-    this.authData.send = true;
     try {
       await this.authService.verifyEmail(body);
-      this.verified = true;
+      this.verificationSuccess = true;
-      this.errorService.clearError();
     } catch (error) {
-      this.authData.send = false;
+      this.verificationSuccess = false;
-      this.verified = false;
       this.errorService.handleError(error);
     }
   }