diff --git a/frontend/src/app/components/auth/landing-page/landing-page.component.html b/frontend/src/app/components/auth/landing-page/landing-page.component.html index 218fc95..9c165d7 100644 --- a/frontend/src/app/components/auth/landing-page/landing-page.component.html +++ b/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) {

Please enter your email

} @else { @if (mail.touched && authData.mail.length > 0 && - !isUserEmailValid(authData.mail.toLowerCase())) { + !isUserEmailValid(authData.mail)) {

This is not a valid email format

}} diff --git a/frontend/src/app/components/auth/landing-page/landing-page.component.ts b/frontend/src/app/components/auth/landing-page/landing-page.component.ts index 732b510..e3e11eb 100644 --- a/frontend/src/app/components/auth/landing-page/landing-page.component.ts +++ b/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 { if (ngForm.submitted && ngForm.form.valid) { await this.checkDuplicatesEmail(); } else { @@ -38,19 +55,25 @@ export class LandingPageComponent { } } - async checkDuplicatesEmail() { - const body = { - email: this.authData.mail.toLowerCase(), - }; + /** + * Checks whether the entered email already exists. + * Navigates to the registration page if it's available. + * Handles UI state and errors accordingly. + */ + private async checkDuplicatesEmail(): Promise { + const email = this.authData.mail.trim().toLowerCase(); + if (!email) return; + + this.authData.send = true; + try { - this.authData.send = true; - await this.authService.checkAuthUserMail(body); - const queryParams = { mail: this.authData.mail.toLowerCase() }; - this.router.navigate(['/register'], { queryParams }); + await this.authService.checkAuthUserMail({ email }); 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; } } } diff --git a/frontend/src/app/components/auth/login/login.component.html b/frontend/src/app/components/auth/login/login.component.html index 5bb44ee..506705d 100644 --- a/frontend/src/app/components/auth/login/login.component.html +++ b/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) {

Please enter your email

} @else { @if (mail.touched && authData.mail.length > 0 && - !isUserEmailValid(authData.mail.toLowerCase())) { + !isUserEmailValid(authData.mail)) {

This is not a valid email format

}} diff --git a/frontend/src/app/components/auth/login/login.component.ts b/frontend/src/app/components/auth/login/login.component.ts index 1682640..b08a54d 100644 --- a/frontend/src/app/components/auth/login/login.component.ts +++ b/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, - private router: Router + 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 guestLogin(ngForm: NgForm) { - this.authData.mail = environment.guestMail; - this.authData.password = environment.guestPassword; - this.authData.guestLogin = true; - const body = { - email: environment.guestMail, - password: environment.guestPassword, - }; + /** + * Logs the user in as a guest using predefined credentials from the environment. + * Resets form and navigates to the main application area on success. + * + * @param ngForm The login form instance. + */ + async guestLogin(ngForm: NgForm): Promise { + 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.authData.password = ''; - this.authData.guestLogin = false; + this.resetAuthData(); this.router.navigate(['/browse/']); this.errorService.clearError(); } catch (error) { - this.authData.send = false; - this.authData.guestLogin = false; - ngForm.reset(); - this.errorService.handleError(error); + this.handleLoginError(error, ngForm); } } - 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 { if (ngForm.submitted && ngForm.form.valid) { - const body = { - email: this.authData.mail, - password: this.authData.password, - }; + const body = this.createLoginRequestBody( + this.authData.mail, + 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.errorService.handleError(error); + this.handleLoginError(error, ngForm); } } } + + /** + * 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); + } } diff --git a/frontend/src/app/components/auth/register/register.component.html b/frontend/src/app/components/auth/register/register.component.html index 376d645..0080e56 100644 --- a/frontend/src/app/components/auth/register/register.component.html +++ b/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) {

Please enter your email

} @else { @if (mail.touched && authData.mail.length > 0 && - !isUserEmailValid(authData.mail.toLowerCase())) { + !isUserEmailValid(authData.mail)) {

This is not a valid email format

}} diff --git a/frontend/src/app/components/auth/register/register.component.ts b/frontend/src/app/components/auth/register/register.component.ts index 7dd9bef..ff6d8f5 100644 --- a/frontend/src/app/components/auth/register/register.component.ts +++ b/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 { if (ngForm.submitted && ngForm.form.valid) { - const body = { - email: this.authData.mail.toLowerCase(), - username: this.authData.mail.split('@')[0], - password: this.authData.password, - }; + const body = this.createRegistrationRequestBody(); + + this.authData.send = true; + 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, + }; + } }