refactor: apply email format validator to LoginComponent and rename 'mail' to 'email'

frontend/README.md

@@ -21,7 +21,7 @@ export const environment = {
   baseUrl: "YOUR_API_URL_HERE",
 
   // Guest account
-  guestMail: "YOUR_GUEST_EMAIL_HERE",
+  guestEmail: "YOUR_GUEST_EMAIL_HERE",
   guestPassword: "YOUR_GUEST_PASSWORD_HERE",
 };
 ```

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

@@ -1,50 +1,50 @@
 <section class="login-background">
   <div class="content">
     <div class="headline">Forgot your password?</div>
-    @if (!queryEmail && !sendMailSuccess && !queryEmailSuccess) {
+    @if (!queryEmail && !sendEmailSuccess && !queryEmailSuccess) {
     <div class="note">
       <p>We will send you an email with instructions to reset your password.</p>
     </div>
     <form
       #taskForm="ngForm"
-      (ngSubmit)="onSubmit(taskForm, mail)"
+      (ngSubmit)="onSubmit(taskForm, email)"
       onsubmit="return false"
     >
-      <div class="mail-field">
+      <div class="email-field">
         <input
-          type="mail"
+          type="email"
-          id="mail"
+          id="email"
-          name="mail"
+          name="email"
-          #mail="ngModel"
+          #email="ngModel"
           placeholder="Email Address"
           class="custom-input"
           autocomplete="email"
-          [(ngModel)]="authData.mail"
+          [(ngModel)]="authData.email"
           [class.error-border]="
-            (!mail.valid && mail.touched) ||
+            (!email.valid && email.touched) ||
-            (mail.touched &&
+            (email.touched &&
-              !isUserEmailValid(authData.mail.toLowerCase()) &&
+              !isUserEmailValid(authData.email.toLowerCase()) &&
-              authData.mail.length > 0)
+              authData.email.length > 0)
           "
           (click)="this.errorService.clearError()"
           required
         />
-        <img class="mail-icon" src="./assets/img/mail.svg" />
+        <img class="email-icon" src="./assets/img/email.svg" />
       </div>
       <div class="error-msg">
-        @if (!mail.valid && mail.touched) {
+        @if (!email.valid && email.touched) {
         <p>Please enter your email</p>
-        } @else { @if (mail.touched && authData.mail.length > 0 &&
+        } @else { @if (email.touched && authData.email.length > 0 &&
-        !isUserEmailValid(authData.mail.toLowerCase())) {
+        !isUserEmailValid(authData.email.toLowerCase())) {
         <p>This is not a valid email format</p>
         }}
       </div>
       <app-btn-large
         [value]="'Send Email'"
-        [disabled]="!isUserEmailValid(authData.mail) || authData.send"
+        [disabled]="!isUserEmailValid(authData.email) || authData.send"
       ></app-btn-large>
     </form>
-    } @else { @if (sendMailSuccess) {
+    } @else { @if (sendEmailSuccess) {
     <div class="note">
       <p>
         If the email you entered exists on our server, you will receive a
@@ -134,7 +134,7 @@
       <app-btn-large
         [value]="'Update Password'"
         [disabled]="
-          !isUserEmailValid(authData.mail) ||
+          !isUserEmailValid(authData.email) ||
           authData.password !== authData.passwordConfirm ||
           !authData.password ||
           !authData.passwordConfirm ||

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

@@ -14,12 +14,12 @@ import { ErrorService } from '../../../services/error.service';
   styleUrl: './forgot-password.component.scss',
 })
 export class ForgotPasswordComponent implements OnInit {
-  sendMailSuccess: boolean = false;
+  sendEmailSuccess: boolean = false;
   queryEmail: boolean = false;
   queryEmailSuccess: boolean = false;
 
   authData = {
-    mail: '',
+    email: '',
     token: '',
     password: '',
     passwordConfirm: '',
@@ -50,7 +50,7 @@ export class ForgotPasswordComponent implements OnInit {
     this.route.queryParams.subscribe((params) => {
       this.extractAuthParams(params);
       this.queryEmailSuccess = params['pw-change'] || '';
-      if (this.authData.mail && this.authData.token) {
+      if (this.authData.email && this.authData.token) {
         this.queryEmail = true;
       }
     });
@@ -62,7 +62,7 @@ export class ForgotPasswordComponent implements OnInit {
    * @param params The query parameters from the URL.
    */
   private extractAuthParams(params: Params): void {
-    this.authData.mail = params['email'] || '';
+    this.authData.email = params['email'] || '';
     this.authData.token = params['token'] || '';
   }
 
@@ -81,20 +81,20 @@ export class ForgotPasswordComponent implements OnInit {
    * Handles form submission based on which field was used (email or password).
    *
    * @param ngForm The form group.
-   * @param mailInput The input field triggering the submit.
+   * @param emailInput The input field triggering the submit.
    */
-  async onSubmit(ngForm: NgForm, mailInput: any): Promise<void> {
+  async onSubmit(ngForm: NgForm, emailInput: any): Promise<void> {
     if (ngForm.submitted && ngForm.form.valid) {
       try {
-        if (mailInput.name === 'mail') {
+        if (emailInput.name === 'email') {
           await this.verifyEmail();
-        } else if (mailInput.name === 'password') {
+        } else if (emailInput.name === 'password') {
           await this.changePassword();
         }
         ngForm.form.reset();
       } catch {}
     } else {
-      mailInput.control.markAsTouched();
+      emailInput.control.markAsTouched();
     }
   }
 
@@ -104,16 +104,16 @@ export class ForgotPasswordComponent implements OnInit {
    */
   private async verifyEmail(): Promise<void> {
     const body = {
-      email: this.authData.mail.toLowerCase(),
+      email: this.authData.email.toLowerCase(),
     };
     this.authData.send = true;
     try {
       await this.authService.forgotPassword(body);
-      this.sendMailSuccess = true;
+      this.sendEmailSuccess = true;
       this.errorService.clearError();
     } catch (error) {
       this.authData.send = false;
-      this.sendMailSuccess = false;
+      this.sendEmailSuccess = false;
       this.errorService.handleError(error);
     }
   }
@@ -124,7 +124,7 @@ export class ForgotPasswordComponent implements OnInit {
    */
   private async changePassword(): Promise<void> {
     const body = {
-      email: this.authData.mail.toLowerCase(),
+      email: this.authData.email.toLowerCase(),
       token: this.authData.token,
       new_password: this.authData.password,
     };

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

@@ -6,31 +6,31 @@
   </div>
   <form
     #taskForm="ngForm"
-    (ngSubmit)="onSubmit(taskForm, mail)"
+    (ngSubmit)="onSubmit(taskForm, email)"
     onsubmit="return false"
   >
     <input
-      type="mail"
+      type="email"
-      id="mail"
+      id="email"
-      name="mail"
+      name="email"
-      #mail="ngModel"
+      #email="ngModel"
       placeholder="Email Address"
       class="custom-input"
       autocomplete="email"
-      [(ngModel)]="authData.mail"
+      [(ngModel)]="authData.email"
       [class.error-border]="
-        (!mail.valid && mail.touched) ||
+        (!email.valid && email.touched) ||
-        (mail.touched &&
+        (email.touched &&
-          !isUserEmailValid(authData.mail) &&
+          !isUserEmailValid(authData.email) &&
-          authData.mail.length > 0)
+          authData.email.length > 0)
       "
       required
     />
     <div class="error-msg">
-      @if (!mail.valid && mail.touched) {
+      @if (!email.valid && email.touched) {
       <p>Please enter your email</p>
-      } @else { @if (mail.touched && authData.mail.length > 0 &&
+      } @else { @if (email.touched && authData.email.length > 0 &&
-      !isUserEmailValid(authData.mail)) {
+      !isUserEmailValid(authData.email)) {
       <p>This is not a valid email format</p>
       }}
     </div>
@@ -40,7 +40,7 @@
       [imgPath]="'arrow_right'"
       [imgReverse]="true"
       [disabled]="
-        (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
+        (!isUserEmailValid(authData.email) && authData.email.length > 0) ||
         authData.send
       "
     ></app-btn-large>

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

@@ -15,7 +15,7 @@ import { AuthService } from '../../../services/auth.service';
 })
 export class LandingPageComponent {
   authData = {
-    mail: '',
+    email: '',
     send: false,
   };
 
@@ -45,13 +45,13 @@ export class LandingPageComponent {
    * If the form is valid, checks for duplicate email addresses.
    *
    * @param ngForm The submitted form.
-   * @param mailInput The input field for the email.
+   * @param emailInput The input field for the email.
    */
-  async onSubmit(ngForm: NgForm, mailInput: any): Promise<void> {
+  async onSubmit(ngForm: NgForm, emailInput: any): Promise<void> {
     if (ngForm.submitted && ngForm.form.valid) {
       await this.checkDuplicatesEmail();
     } else {
-      mailInput.control.markAsTouched();
+      emailInput.control.markAsTouched();
     }
   }
 
@@ -61,15 +61,15 @@ export class LandingPageComponent {
    * Handles UI state and errors accordingly.
    */
   private async checkDuplicatesEmail(): Promise<void> {
-    const email = this.authData.mail.trim().toLowerCase();
+    const email = this.authData.email.trim().toLowerCase();
     if (!email) return;
 
     this.authData.send = true;
 
     try {
-      await this.authService.checkAuthUserMail({ email });
+      await this.authService.checkAuthUserEmail({ email });
       this.errorService.clearError();
-      this.router.navigate(['/register'], { queryParams: { mail: email } });
+      this.router.navigate(['/register'], { queryParams: { email: email } });
     } catch (error) {
       this.errorService.handleError(error);
     } finally {

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

@@ -1,55 +1,50 @@
 <section class="login-background">
   <div class="content">
     <div class="headline">Log in</div>
+
     <form
-      #loginForm="ngForm"
+      [formGroup]="form"
-      (ngSubmit)="onSubmit(loginForm)"
+      (ngSubmit)="onSubmit()"
-      onsubmit="return false"
       (input)="this.errorService.clearError()"
     >
-      <div class="mail-field">
+      <div class="email-field">
         <input
-          type="mail"
+          formControlName="email"
-          id="mail"
+          type="email"
-          name="mail"
+          id="email"
-          #mail="ngModel"
           placeholder="Email Address"
           autocomplete="email"
-          [(ngModel)]="authData.mail"
           [class.error-border]="
-            (!mail.valid && mail.touched) ||
+            form.controls['email'].invalid && form.controls['email'].touched
-            (mail.touched &&
-              !isUserEmailValid(authData.mail) &&
-              authData.mail.length > 0)
           "
-          required
         />
-        <img class="mail-icon" src="./assets/img/mail.svg" />
+        <img class="email-icon" src="./assets/img/email.svg" />
       </div>
+
+      <div class="error-container">
+        @if (form.controls['email'].touched && form.controls['email'].invalid) {
         <div class="error-msg">
-        @if (!mail.valid && mail.touched) {
+          @if (form.controls['email'].errors?.['required']) {
-        <p>Please enter your email</p>
+          <p role="alert">Please enter your email</p>
-        } @else { @if (mail.touched && authData.mail.length > 0 &&
+          } @if (form.controls['email'].errors?.['invalidEmailFormat']) {
-        !isUserEmailValid(authData.mail)) {
+          <p role="alert">This is not a valid email format</p>
-        <p>This is not a valid email format</p>
+          }
-        }}
         </div>
+        }
+      </div>
+
       <div class="password-field">
         <input
           [type]="authService.passwordFieldType"
           id="password"
-          name="password"
+          formControlName="password"
-          class="password-input"
-          #password="ngModel"
           placeholder="Enter a password"
           autocomplete="new-password"
-          [(ngModel)]="authData.password"
+          minlength="8"
-          pattern="[^<>]*"
-          minlength="6"
           [class.error-border]="
-            password.invalid && password.touched && authData.password.length < 6
+            form.controls['password'].invalid &&
+            form.controls['password'].touched
           "
-          required
         />
         <img class="password-icon" src="./assets/img/password.svg" />
         <img
@@ -58,50 +53,46 @@
           [src]="authService.passwordIcon"
         />
       </div>
+
+      <div class="error-container">
+        @if (form.controls['password'].touched &&
+        form.controls['password'].invalid) {
         <div class="error-msg">
-        @if (!password.valid && password.touched && authData.password.length <
+          @if (form.controls['password'].errors?.['required']) {
-        1) {
+          <p role="alert">Please enter a password</p>
-        <p>Please enter your password</p>
+          } @if (form.controls['password'].errors?.['minlength']) {
-        } @else { @if (authData.password && authData.password.length < 6 &&
+          <p role="alert">Password is too short, min 8 characters</p>
-        password.touched) {
+          }
-        <p>Password is too short, min 6 characters</p>
-        } }
         </div>
+        }
+      </div>
+
       <div class="checkbox">
-        <label class="container"
+        <label class="container">
-          >Remember me
+          Stay signed in?
           <input
-            type="checkbox"
             id="checkbox"
             name="checkbox"
-            #checkbox
+            type="checkbox"
-            [(ngModel)]="authData.checkbox"
+            formControlName="keepLoggedIn"
           />
           <span class="checkmark"></span>
         </label>
       </div>
+
       <div class="buttons">
         <app-btn-large
           [value]="'Log in'"
-          [disabled]="
+          [disabled]="form.invalid"
-            !authData.mail ||
-            (!isUserEmailValid(authData.mail) && authData.mail.length > 0) ||
-            !password.valid ||
-            authData.guestLogin ||
-            authData.send
-          "
         ></app-btn-large>
         <app-btn-large
           [value]="'Guest Log in'"
-          [disabled]="
+          [disabled]="form.value.mail || form.value.password"
-            authData.guestLogin ||
+          (click)="guestLogin()"
-            (!!authData.mail && !!authData.password) ||
-            authData.send
-          "
-          (click)="guestLogin(loginForm)"
         ></app-btn-large>
       </div>
     </form>
+
     <div class="footer">
       <a routerLink="/forgot-password">Forgot password?</a>
       <div class="footer-content">

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

@@ -1,107 +1,114 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { BtnLargeComponent } from '../../../shared/components/buttons/btn-large/btn-large.component';
-import { FormsModule, NgForm } from '@angular/forms';
+import {
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 import { AuthService } from '../../../services/auth.service';
 import { ErrorService } from '../../../services/error.service';
 import { CommonModule } from '@angular/common';
 import { environment } from '../../../../environments/environment';
+import { emailFormatValidator } from '../../../validators/email-format.validator';
 
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [BtnLargeComponent, CommonModule, FormsModule, RouterLink],
+  imports: [
+    BtnLargeComponent,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterLink,
+  ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss',
 })
-export class LoginComponent {
+export class LoginComponent implements OnInit {
   showPassword: boolean = false;
-
+  form: FormGroup = new FormGroup({});
-  authData = {
-    mail: '',
-    password: '',
-    checkbox: false,
-    send: false,
-    guestLogin: false,
-  };
 
   /**
-   * Initializes the LoginComponent with Router, AuthService, and ErrorService.
+   * Initializes the LoginComponent with Router, FormBuilder, AuthService, and ErrorService.
    */
   constructor(
     private router: Router,
+    private fb: FormBuilder,
     public authService: AuthService,
     public errorService: ErrorService
   ) {}
 
   /**
-   * Validates the given email address.
+   * Initializes the component by setting up necessary data.
-   * 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 {
+  ngOnInit(): void {
-    const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/;
+    this.createLoginForm();
-    return emailRegex.test(emailValue.toLowerCase());
   }
 
   /**
-   * Logs the user in as a guest using predefined credentials from the environment.
+   * Initializes the login form with required fields and validators.
-   * Resets form and navigates to the main application area on success.
-   *
-   * @param ngForm The login form instance.
    */
-  async guestLogin(ngForm: NgForm): Promise<void> {
+  private createLoginForm(): void {
+    this.form = this.fb.group({
+      email: ['', [Validators.required, emailFormatValidator()]],
+      password: ['', Validators.required],
+      keepLoggedIn: [false],
+    });
+  }
+
+  /**
+   * Handles the submission of the login form.
+   *
+   * @returns A Promise that resolves when the login process is complete.
+   */
+  async onSubmit(): Promise<void> {
+    if (this.form.invalid) return;
+    const body = this.createLoginRequestBody();
+
+    await this.performLogin(body);
+  }
+
+  /**
+   * Initiates a guest login by preparing guest credentials and performing the login request.
+   *
+   * @returns A Promise that resolves when the login process is complete.
+   */
+  async guestLogin(): Promise<void> {
     this.prepareGuestLoginData();
-    const body = this.createLoginRequestBody(
+    const body = this.createLoginRequestBody();
-      environment.guestMail,
-      environment.guestPassword
-    );
 
-    try {
+    await this.performLogin(body);
-      this.authData.send = true;
-      await this.authService.login(body, this.authData.checkbox);
-      this.resetAuthData();
-      this.router.navigate(['/browse/']);
-      this.errorService.clearError();
-    } catch (error) {
-      this.handleLoginError(error, 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 = this.createLoginRequestBody(
-        this.authData.mail,
-        this.authData.password
-      );
-
-      try {
-        this.authData.send = true;
-        await this.authService.login(body, this.authData.checkbox);
-        ngForm.resetForm();
-        this.router.navigate(['/browse/']);
-        this.errorService.clearError();
-      } catch (error) {
-        this.handleLoginError(error, ngForm);
-      }
-    }
   }
 
   /**
    * Prepares the authentication data for a guest login.
    */
   private prepareGuestLoginData(): void {
-    this.authData.mail = environment.guestMail;
+    this.form.patchValue({
-    this.authData.password = environment.guestPassword;
+      email: environment.guestEmail.toLowerCase(),
-    this.authData.guestLogin = true;
+      password: environment.guestPassword,
+    });
+  }
+
+  /**
+   * Performs the login process.
+   *
+   * @param body The login request body containing email, password, and keepLoggedIn.
+   * @returns A Promise that resolves when the login process is complete.
+   */
+  private async performLogin(body: any): Promise<void> {
+    try {
+      this.form.disable();
+      await this.authService.login(body);
+      this.form.reset();
+      this.router.navigate(['/browse/']);
+    } catch (error) {
+      this.form.enable();
+      this.errorService.handleError(error);
+    }
   }
 
   /**
@@ -109,37 +116,19 @@ export class LoginComponent {
    *
    * @param email The email for the login request.
    * @param password The password for the login request.
+   * @param keepLoggedIn Whether to keep the user signed in.
    * @returns The body of the login request.
    */
-  private createLoginRequestBody(
+  private createLoginRequestBody(): {
-    email: string,
+    email: string;
-    password: string
+    password: string;
-  ): { email: string; password: string } {
+    keepLoggedIn: boolean;
+  } {
+    const formValue = this.form.value;
     return {
-      email,
+      email: formValue.email.toLowerCase(),
-      password,
+      password: formValue.password,
+      keepLoggedIn: formValue.keepLoggedIn,
     };
   }
-
-  /**
-   * 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

@@ -16,26 +16,26 @@
       (ngSubmit)="onSubmit()"
       (input)="this.errorService.clearError()"
     >
-      <div class="mail-field">
+      <div class="email-field">
         <input
-          formControlName="mail"
+          formControlName="email"
           type="email"
-          id="mail"
+          id="email"
           placeholder="Email Address"
           autocomplete="email"
           [class.error-border]="
-            form.controls['mail'].invalid && form.controls['mail'].touched
+            form.controls['email'].invalid && form.controls['email'].touched
           "
         />
-        <img class="mail-icon" src="./assets/img/mail.svg" />
+        <img class="email-icon" src="./assets/img/email.svg" />
       </div>
 
       <div class="error-container">
-        @if (form.controls['mail'].touched && form.controls['mail'].invalid) {
+        @if (form.controls['email'].touched && form.controls['email'].invalid) {
         <div class="error-msg">
-          @if (form.controls['mail'].errors?.['required']) {
+          @if (form.controls['email'].errors?.['required']) {
           <p role="alert">Please enter your email</p>
-          } @if (form.controls['mail'].errors?.['invalidEmailFormat']) {
+          } @if (form.controls['email'].errors?.['invalidEmailFormat']) {
           <p role="alert">This is not a valid email format</p>
           }
         </div>
@@ -102,11 +102,11 @@
         form.controls['passwordConfirm'].invalid ) {
         <div class="error-msg">
           @if (form.controls['passwordConfirm'].errors?.['required']) {
-          <p>Please confirm your password</p>
+          <p role="alert">Please confirm your password</p>
           } @if ( form.controls['password'].value !==
           form.controls['passwordConfirm'].value &&
           form.controls['passwordConfirm'].touched ) {
-          <p>The passwords do not match</p>
+          <p role="alert">The passwords do not match</p>
           }
         </div>
         }
@@ -116,16 +116,19 @@
         <label class="container">
           I agree to the&nbsp;
           <a routerLink="/privacy-policy">Privacy policy</a>.
-          <input type="checkbox" formControlName="privacyPolicy" />
+          <input
+            id="checkbox"
+            name="checkbox"
+            type="checkbox"
+            formControlName="privacyPolicy"
+          />
           <span class="checkmark"></span>
         </label>
       </div>
 
       <app-btn-large
         [value]="'Get Started'"
-        [disabled]="
+        [disabled]="form.invalid"
-          form.invalid || form.controls['privacyPolicy'].value === false
-        "
       ></app-btn-large>
     </form>
     }

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

@@ -53,7 +53,7 @@ export class RegisterComponent implements OnInit {
    */
   private createRegisterForm(): void {
     this.form = this.fb.group({
-      mail: ['', [Validators.required, emailFormatValidator()]],
+      email: ['', [Validators.required, emailFormatValidator()]],
       password: ['', Validators.required],
       passwordConfirm: ['', Validators.required],
       privacyPolicy: [false, Validators.requiredTrue],
@@ -61,12 +61,12 @@ export class RegisterComponent implements OnInit {
   }
 
   /**
-   * Sets the email address from the query parameters in the URL.
+   * Sets the mail address from the query parameters in the URL.
    */
   private setEmailFromQueryParams(): void {
     this.route.queryParams.subscribe((params) => {
-      const email = params['mail'] || '';
+      const email = params['email'] || '';
-      this.form.patchValue({ mail: email });
+      this.form.patchValue({ email: email });
     });
   }
 
@@ -104,8 +104,8 @@ export class RegisterComponent implements OnInit {
   } {
     const formValue = this.form.value;
     return {
-      email: formValue.mail.toLowerCase(),
+      email: formValue.email.toLowerCase(),
-      username: formValue.mail.split('@')[0],
+      username: formValue.email.split('@')[0],
       password: formValue.password,
     };
   }

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

@@ -15,7 +15,7 @@ export class VerifyEmailComponent {
   verified: boolean = false;
 
   authData = {
-    mail: '',
+    email: '',
     token: '',
     send: false,
   };
@@ -54,7 +54,7 @@ export class VerifyEmailComponent {
    * @param params The query parameters from the route.
    */
   private extractAuthParams(params: Params): void {
-    this.authData.mail = params['email'] || '';
+    this.authData.email = params['email'] || '';
     this.authData.token = params['token'] || '';
   }
 
@@ -64,7 +64,7 @@ export class VerifyEmailComponent {
    */
   private async verifyEmail(): Promise<void> {
     const body = {
-      email: this.authData.mail.toLowerCase(),
+      email: this.authData.email.toLowerCase(),
       token: this.authData.token,
     };
 

frontend/src/app/services/auth.service.ts

@@ -28,12 +28,12 @@ export class AuthService {
    * @param storage Whether to persist the token in local storage.
    * @throws Error if no token is received upon successful login.
    */
-  async login(body: any, storage: boolean) {
+  async login(body: any) {
     const data = await firstValueFrom(
       this.apiService.post<{ token: string }>('/auth/login/', body)
     );
     if (data?.token) {
-      this.tokenService.setToken(data.token, storage);
+      this.tokenService.setToken(data.token, body.keepLoggedIn);
     } else {
       throw new Error('Login failed: No token received');
     }
@@ -87,7 +87,7 @@ export class AuthService {
    *
    * @param body The email to verify.
    */
-  async checkAuthUserMail(body: any) {
+  async checkAuthUserEmail(body: any) {
     await firstValueFrom(this.apiService.post('/auth/', body));
   }
 

frontend/src/assets/style/form.scss

@@ -71,7 +71,7 @@ form {
 // Show / Hide Password
 
 .password-field,
-.mail-field {
+.email-field {
   position: relative;
   width: 100%;
 
@@ -94,7 +94,7 @@ form {
 
 // Icons
 
-.mail-icon,
+.email-icon,
 .password-icon {
   position: absolute;
   left: 44px;

frontend/src/environments/environment.example.ts

@@ -3,6 +3,6 @@ export const environment = {
   baseUrl: 'YOUR_API_URL_HERE',
 
   // Guest account
-  guestMail: 'YOUR_GUEST_EMAIL_HERE',
+  guestEmail: 'YOUR_GUEST_EMAIL_HERE',
   guestPassword: 'YOUR_GUEST_PASSWORD_HERE',
 };