refactor: improve readability and add JSDoc comments in LoginComponent, RegisterComponent, and LandingPageComponent

frontend/src/app/components/auth/landing-page/landing-page.component.html

@@ -21,7 +21,7 @@
       [class.error-border]="
         (!mail.valid && mail.touched) ||
         (mail.touched &&
-          !isUserEmailValid(authData.mail.toLowerCase()) &&
+          !isUserEmailValid(authData.mail) &&
           authData.mail.length > 0)
       "
       required
@@ -30,7 +30,7 @@
       @if (!mail.valid && mail.touched) {
       <p>Please enter your email</p>
       } @else { @if (mail.touched && authData.mail.length > 0 &&
-      !isUserEmailValid(authData.mail.toLowerCase())) {
+      !isUserEmailValid(authData.mail)) {
       <p>This is not a valid email format</p>
       }}
     </div>

frontend/src/app/components/auth/landing-page/landing-page.component.ts

@@ -19,18 +19,35 @@ export class LandingPageComponent {
     send: false,
   };
 
+  /**
+   * Initializes the LandingPageComponent with Router, AuthService, and ErrorService.
+   */
   constructor(
     private router: Router,
-    public errorService: ErrorService,
+    private authService: AuthService,
-    private authService: AuthService
+    public errorService: ErrorService
   ) {}
 
-  isUserEmailValid(emailValue: string) {
+  /**
+   * Validates the given email address.
+   * Converts to lowercase before checking against the regex.
+   *
+   * @param emailValue The email address to validate.
+   * @returns True if the email format is valid, false otherwise.
+   */
+  isUserEmailValid(emailValue: string): boolean {
     const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
-    return emailRegex.test(emailValue);
+    return emailRegex.test(emailValue.toLowerCase());
   }
 
-  async onSubmit(ngForm: NgForm, mailInput: any) {
+  /**
+   * Handles form submission.
+   * If the form is valid, checks for duplicate email addresses.
+   *
+   * @param ngForm The submitted form.
+   * @param mailInput The input field for the email.
+   */
+  async onSubmit(ngForm: NgForm, mailInput: any): Promise<void> {
     if (ngForm.submitted && ngForm.form.valid) {
       await this.checkDuplicatesEmail();
     } else {
@@ -38,19 +55,25 @@ export class LandingPageComponent {
     }
   }
 
-  async checkDuplicatesEmail() {
+  /**
-    const body = {
+   * Checks whether the entered email already exists.
-      email: this.authData.mail.toLowerCase(),
+   * Navigates to the registration page if it's available.
-    };
+   * Handles UI state and errors accordingly.
+   */
+  private async checkDuplicatesEmail(): Promise<void> {
+    const email = this.authData.mail.trim().toLowerCase();
+    if (!email) return;
+
+    this.authData.send = true;
+
     try {
-      this.authData.send = true;
+      await this.authService.checkAuthUserMail({ email });
-      await this.authService.checkAuthUserMail(body);
-      const queryParams = { mail: this.authData.mail.toLowerCase() };
-      this.router.navigate(['/register'], { queryParams });
       this.errorService.clearError();
+      this.router.navigate(['/register'], { queryParams: { mail: email } });
     } catch (error) {
-      this.authData.send = false;
       this.errorService.handleError(error);
+    } finally {
+      this.authData.send = false;
     }
   }
 }

frontend/src/app/components/auth/login/login.component.html

@@ -19,7 +19,7 @@
           [class.error-border]="
             (!mail.valid && mail.touched) ||
             (mail.touched &&
-              !isUserEmailValid(authData.mail.toLowerCase()) &&
+              !isUserEmailValid(authData.mail) &&
               authData.mail.length > 0)
           "
           required
@@ -30,7 +30,7 @@
         @if (!mail.valid && mail.touched) {
         <p>Please enter your email</p>
         } @else { @if (mail.touched && authData.mail.length > 0 &&
-        !isUserEmailValid(authData.mail.toLowerCase())) {
+        !isUserEmailValid(authData.mail)) {
         <p>This is not a valid email format</p>
         }}
       </div>

frontend/src/app/components/auth/login/login.component.ts

@@ -15,6 +15,8 @@ import { environment } from '../../../../environments/environment';
   styleUrl: './login.component.scss',
 })
 export class LoginComponent {
+  showPassword: boolean = false;
+
   authData = {
     mail: '',
     password: '',
@@ -23,49 +25,64 @@ export class LoginComponent {
     guestLogin: false,
   };
 
-  showPassword: boolean = false;
+  /**
-
+   * Initializes the LoginComponent with Router, AuthService, and ErrorService.
+   */
   constructor(
+    private router: Router,
     public authService: AuthService,
-    public errorService: ErrorService,
+    public errorService: ErrorService
-    private router: Router
   ) {}
 
-  isUserEmailValid(emailValue: string) {
+  /**
+   * Validates the given email address.
+   * Converts to lowercase before checking against the regex.
+   *
+   * @param emailValue The email address to validate.
+   * @returns True if the email format is valid, false otherwise.
+   */
+  isUserEmailValid(emailValue: string): boolean {
     const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
-    return emailRegex.test(emailValue);
+    return emailRegex.test(emailValue.toLowerCase());
   }
 
-  async guestLogin(ngForm: NgForm) {
+  /**
-    this.authData.mail = environment.guestMail;
+   * Logs the user in as a guest using predefined credentials from the environment.
-    this.authData.password = environment.guestPassword;
+   * Resets form and navigates to the main application area on success.
-    this.authData.guestLogin = true;
+   *
-    const body = {
+   * @param ngForm The login form instance.
-      email: environment.guestMail,
+   */
-      password: environment.guestPassword,
+  async guestLogin(ngForm: NgForm): Promise<void> {
-    };
+    this.prepareGuestLoginData();
+    const body = this.createLoginRequestBody(
+      environment.guestMail,
+      environment.guestPassword
+    );
+
     try {
       this.authData.send = true;
       await this.authService.login(body, this.authData.checkbox);
-      this.authData.mail = '';
+      this.resetAuthData();
-      this.authData.password = '';
-      this.authData.guestLogin = false;
       this.router.navigate(['/browse/']);
       this.errorService.clearError();
     } catch (error) {
-      this.authData.send = false;
+      this.handleLoginError(error, ngForm);
-      this.authData.guestLogin = false;
-      ngForm.reset();
-      this.errorService.handleError(error);
     }
   }
 
-  async onSubmit(ngForm: NgForm) {
+  /**
+   * Handles standard login form submission.
+   * Sends login request and navigates to the application on success.
+   *
+   * @param ngForm The login form instance.
+   */
+  async onSubmit(ngForm: NgForm): Promise<void> {
     if (ngForm.submitted && ngForm.form.valid) {
-      const body = {
+      const body = this.createLoginRequestBody(
-        email: this.authData.mail,
+        this.authData.mail,
-        password: this.authData.password,
+        this.authData.password
-      };
+      );
+
       try {
         this.authData.send = true;
         await this.authService.login(body, this.authData.checkbox);
@@ -73,9 +90,56 @@ export class LoginComponent {
         this.router.navigate(['/browse/']);
         this.errorService.clearError();
       } catch (error) {
-        this.authData.send = false;
+        this.handleLoginError(error, ngForm);
-        this.errorService.handleError(error);
       }
     }
   }
+
+  /**
+   * Prepares the authentication data for a guest login.
+   */
+  private prepareGuestLoginData(): void {
+    this.authData.mail = environment.guestMail;
+    this.authData.password = environment.guestPassword;
+    this.authData.guestLogin = true;
+  }
+
+  /**
+   * Creates the request body for the login API.
+   *
+   * @param email The email for the login request.
+   * @param password The password for the login request.
+   * @returns The body of the login request.
+   */
+  private createLoginRequestBody(
+    email: string,
+    password: string
+  ): { email: string; password: string } {
+    return {
+      email,
+      password,
+    };
+  }
+
+  /**
+   * Resets the authentication data after a successful login.
+   */
+  private resetAuthData(): void {
+    this.authData.mail = '';
+    this.authData.password = '';
+    this.authData.guestLogin = false;
+  }
+
+  /**
+   * Handles errors during login, resets form, and clears errors.
+   *
+   * @param error The error to handle.
+   * @param ngForm The login form instance.
+   */
+  private handleLoginError(error: any, ngForm: NgForm): void {
+    this.authData.send = false;
+    this.authData.guestLogin = false;
+    ngForm.reset();
+    this.errorService.handleError(error);
+  }
 }

frontend/src/app/components/auth/register/register.component.html

@@ -28,7 +28,7 @@
           [class.error-border]="
             (!mail.valid && mail.touched) ||
             (mail.touched &&
-              !isUserEmailValid(authData.mail.toLowerCase()) &&
+              !isUserEmailValid(authData.mail) &&
               authData.mail.length > 0)
           "
           required
@@ -39,7 +39,7 @@
         @if (!mail.valid && mail.touched) {
         <p>Please enter your email</p>
         } @else { @if (mail.touched && authData.mail.length > 0 &&
-        !isUserEmailValid(authData.mail.toLowerCase())) {
+        !isUserEmailValid(authData.mail)) {
         <p>This is not a valid email format</p>
         }}
       </div>

frontend/src/app/components/auth/register/register.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
 import { FormsModule, NgForm } from '@angular/forms';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { AuthService } from '../../../services/auth.service';
 import { ErrorService } from '../../../services/error.service';
@@ -14,6 +14,8 @@ import { ErrorService } from '../../../services/error.service';
   styleUrl: './register.component.scss',
 })
 export class RegisterComponent implements OnInit {
+  registrationSuccess: boolean = false;
+
   authData = {
     mail: '',
     password: '',
@@ -22,34 +24,56 @@ export class RegisterComponent implements OnInit {
     send: false,
   };
 
-  registrationSuccess: boolean = false;
+  /**
-
+   * Initializes the LoginComponent with ActivatedRoute, AuthService, and ErrorService.
+   */
   constructor(
     private route: ActivatedRoute,
     public authService: AuthService,
     public errorService: ErrorService
   ) {}
 
+  /**
+   * Initializes the component by setting up necessary data.
+   */
   ngOnInit(): void {
+    this.setEmailFromQueryParams();
+  }
+
+  /**
+   * Sets the email address from the query parameters in the URL.
+   */
+  private setEmailFromQueryParams(): void {
     this.route.queryParams.subscribe((params) => {
       this.authData.mail = params['mail'] || '';
     });
   }
 
-  isUserEmailValid(emailValue: string) {
+  /**
+   * Validates the given email address.
+   * Converts to lowercase before checking against the regex.
+   *
+   * @param emailValue The email address to validate.
+   * @returns True if the email format is valid, false otherwise.
+   */
+  isUserEmailValid(emailValue: string): boolean {
     const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
-    return emailRegex.test(emailValue);
+    return emailRegex.test(emailValue.toLowerCase());
   }
 
-  async onSubmit(ngForm: NgForm) {
+  /**
+   * Handles form submission for user registration.
+   * Sends registration request and handles success/error responses.
+   *
+   * @param ngForm The registration form instance.
+   */
+  async onSubmit(ngForm: NgForm): Promise<void> {
     if (ngForm.submitted && ngForm.form.valid) {
-      const body = {
+      const body = this.createRegistrationRequestBody();
-        email: this.authData.mail.toLowerCase(),
+
-        username: this.authData.mail.split('@')[0],
+      this.authData.send = true;
-        password: this.authData.password,
+
-      };
       try {
-        this.authData.send = true;
         await this.authService.register(body);
         ngForm.resetForm();
         this.registrationSuccess = true;
@@ -60,4 +84,21 @@ export class RegisterComponent implements OnInit {
       }
     }
   }
+
+  /**
+   * Creates the request body for the registration API.
+   *
+   * @returns The registration request body.
+   */
+  private createRegistrationRequestBody(): {
+    email: string;
+    username: string;
+    password: string;
+  } {
+    return {
+      email: this.authData.mail.toLowerCase(),
+      username: this.authData.mail.split('@')[0],
+      password: this.authData.password,
+    };
+  }
 }