All files / app/features/public/pages/register-page register-page.ts

35.55% Statements 16/45
60% Branches 12/20
16.66% Functions 2/12
29.26% Lines 12/41

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96                              4x   1x 1x 1x 1x   1x 1x   1x 1x 1x 1x     1x                                                                                                                                
import { Component, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FooterComponent } from '../../../../shared/ui/footer/footer.component';
import { Router, RouterLink } from '@angular/router';
import { RegisterFormValidationService } from '../../../../core/users/user.registerform.validation';
import { ToastService } from '../../../../core/toast/toast.service';
import { submit, FormField } from '@angular/forms/signals';
import { UserRegisterFormData } from '../../../../core/users/user.interfaces';
import { UserService } from '../../../../core/users/user.service';
 
@Component({
  selector: 'app-register-page',
  imports: [FormsModule, RouterLink, FooterComponent, FormField],
  templateUrl: './register-page.html',
})
export class RegisterPage {
 
  private readonly router = inject(Router);
  private readonly userService = inject(UserService);
  private readonly toastService = inject(ToastService);
  private readonly formValidationService = inject(RegisterFormValidationService);
 
  readonly registerModel = this.formValidationService.getRegisterModel();
  readonly registerForm = this.formValidationService.getRegisterForm();
 
  emailTaken      = signal<boolean>(false);
  isLoading       = signal<boolean>(false);
  showPassword = false;
  showPassword2 = false;
 
  ngOnInit(): void {
    this.formValidationService.resetForm();
  }
 
  onSubmit(event: Event): void {
    event.preventDefault();
    this.isLoading.set(true);
    this.emailTaken.set(false);
    if (this.registerForm().invalid()) {
      this.isLoading.set(false);
      this.formValidationService.markAllFieldsAsTouched()
      this.toastService.error('Por favor, corrija los errores del formulario antes de registrarse');
      return;
    }
    this.userService.emailExist(this.registerModel().email).subscribe({
      next: (res) => {
        if (res) {
          this.isLoading.set(false);
          this.emailTaken.set(true);
          this.toastService.error('El correo ya esta registrado.');
          return;
        }
        this.submitForm();
      },
      error: (err) => { 
        this.isLoading.set(false);
        this.toastService.error('Ocurrio un error al registrar revisa tus datos.');
      }
    })
    
  }
 
  clearEmailTakenError(): void {
    if (this.emailTaken()) {
      this.emailTaken.set(false);
    }
  }
 
  togglePasswordVisibility(): void {
    this.showPassword = !this.showPassword;
  }
 
  togglePasswordVisibility2(): void {
    this.showPassword2 = !this.showPassword2;
  }
 
  private submitForm(): void {
    submit(this.registerForm, {
      action: async () => {
        const registrationData: UserRegisterFormData = this.registerModel();
        this.userService.sendUserRegister(registrationData).subscribe({
          next: () => {
            this.isLoading.set(false);
            this.toastService.success('Usuario registrado existosamente!!');
            this.router.navigateByUrl("/login");
          },
          error: (err) => { 
            this.isLoading.set(false);
            this.toastService.error('Ocurrio un error al registrar revisa tus datos.');
          }
        })
      },
    });
  }
}