2.0.52-RELEASE - Feature#188 (login and register)

CHANGELOG.md

@@ -3,6 +3,9 @@
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 
 
+### [ita-challenges-frontend-2.0.52-RELEASE] - 2024-02-29
+* Fixing register and login basic functionalities 
+
 ### [ita-challenges-frontend-2.0.51-RELEASE] - 2024-02-29
 * Fixing nginx.conf to find assets folder
 

conf/.env.CI.dev

@@ -1,2 +1,2 @@
 MICROSERVICE_DEPLOY=ita-challenges-frontend
-MICROSERVICE_VERSION=2.0.51-RELEASE
+MICROSERVICE_VERSION=2.0.52-RELEASE

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ita-challenges-frontend",
-  "version": "2.0.51-RELEASE",
+  "version": "2.0.52-RELEASE",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.dev.json",

src/app/modules/modals/login-modal/login-modal.component.html

@@ -10,17 +10,20 @@
             <h2 class="modal-title">Login</h2>
             <div id="sing-up-form" class="d-flex gap-3 flex-column justify-content-start">
                 <input formControlName="dni" class="form-control" type="text" name="dni" placeholder="DNI o NIE"
-                [ngClass]="!isValidInput('dni') ? 'form-control' : 'form-control is-invalid'">
+                [ngClass]="!isValidInput('dni') ? 'form-control' : 'form-control is-invalid'" [tabIndex]="-1">
                 @if(isValidInput('dni')){
                 <p class="text-danger form-text ps-3"> {{getInputError('dni')}}</p>
                 }
                 <input formControlName="password" class="form-control" type="password" name="password"
-                    placeholder="Contraseña" [ngClass]="!isValidInput('password') ? 'form-control' : 'form-control is-invalid'">
+                    placeholder="Contraseña" [ngClass]="!isValidInput('password') ? 'form-control' : 'form-control is-invalid'" [tabIndex]="-1">
                     @if(isValidInput('password')){
                     <p class="text-danger form-text ps-3"> {{getInputError('password')}}</p>
                     }
                 <a class="text-end">Recordar/cambiar contraseña</a>
             </div>
+            @if(loginError != ""){
+                <p class="w-100 text-center text-danger mt-3 mb-0 fs-6"> {{loginError}}</p>
+                }
         </div>
         <div class="modal-footer d-flex flex-column gap-3 mb-3">
             <button (click)="login()" type="submit" class="btn btn-primary w-100">Login</button>

src/app/modules/modals/login-modal/login-modal.component.spec.ts

@@ -7,6 +7,7 @@ import { of, throwError } from 'rxjs';
 import { User } from "src/app/models/user.model";
 
 import { LoginModalComponent } from './login-modal.component';
+import { error } from 'node:console';
 
 describe('LoginModalComponent', () => {
   let component: LoginModalComponent;
@@ -17,7 +18,8 @@ describe('LoginModalComponent', () => {
 
   beforeEach(async () => {
     authServiceMock = {
-      login: jest.fn()
+      login: jest.fn(),
+      notifyErrorLogin: jest.fn(),
     };
     routerMock = {
       navigateByUrl: jest.fn()
@@ -37,51 +39,63 @@ describe('LoginModalComponent', () => {
         { provide: NgbModal, useValue: modalServiceMock }
       ]
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(LoginModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should create login component correctly', (done) => {
     expect(component).toBeTruthy();
+    done();
   });
 
-  it('should not call authService.login if form is invalid', () => {
+  it('should not call authService.login if form is invalid', (done) => {
     component.login();
     expect(authServiceMock.login).not.toHaveBeenCalled();
+    done();
   });
 
-  it('should call authService.login if form is valid', () => {
-    //TODO revise this test
-    // component.loginForm.setValue({ dni: '12345678', password: 'password' });
-    // authServiceMock.login.mockReturnValue(of({}));
-    // component.login();
-    // expect(authServiceMock.login).toHaveBeenCalled();//TODO - fix this
-  });
+  it('should call authService.login and success response if form is valid', async () => {
+
+    component.loginForm.setValue({ dni: '12345678Z', password: 'password' });
+    authServiceMock.login.mockReturnValue(of({
+      idUser: '',
+      dni: component.loginForm.get('dni')?.value,
+      password: component.loginForm.get('password')?.value,
+    }));
+    component.login();
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    expect(authServiceMock.login).toHaveBeenCalled();
+    expect(modalServiceMock.dismissAll).toHaveBeenCalled();
+    // expect(modalServiceMock.open).toHaveBeenCalled(); //todo: need the succesfull modal
 
-  it('should handle login success', () => {
-    //TODO revise this test
-    // component.loginForm.setValue({ dni: '12345678', password: 'password' });
-    // authServiceMock.login.mockReturnValue(of({}));
-    // component.login();
-    // expect(modalServiceMock.dismissAll).toHaveBeenCalled();
   });
 
-  it('should handle login error', () => {
-    //TODO revise this test
-    // component.loginForm.setValue({ dni: '12345678', password: 'password' });
-    // const errorResponse = { error: { message: 'Login failed' } };
-    // authServiceMock.login.mockReturnValue(throwError(() => errorResponse));
-    // component.login();
-    // expect(component.loginError).toEqual('Login failed');
+  it('should handle login error', async () => {
+    component.loginForm.setValue({ dni: '12345678Z', password: 'password' });
+    let errorResponse = { error: { message: 'Error en el login' } };
+
+    spyOn(authServiceMock, 'login').and.returnValue(Promise.reject(errorResponse));
+
+    await component.login();
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(component.loginError).toEqual(errorResponse.error.message);
   });
 
-  it('should open register modal', () => {
+  it('should open register modal', (done) => {
     component.openRegisterModal();
     expect(modalServiceMock.dismissAll).toHaveBeenCalled();
     expect(modalServiceMock.open).toHaveBeenCalled();
+    done();
+  });
+
+  it('should close login modal', (donde) => {
+    component.openRegisterModal();
+    expect(modalServiceMock.dismissAll).toHaveBeenCalled();
+    donde();
   });
 });

src/app/modules/modals/login-modal/login-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { RegisterModalComponent } from '../register-modal/register-modal.component';
 import { FormBuilder, Validators } from '@angular/forms';
@@ -14,20 +14,20 @@ import { ValidatorsService } from 'src/app/services/validators.service';
 })
 export class LoginModalComponent {
 
-  constructor(private modalService: NgbModal,
-    private formBuilder: FormBuilder,
-    private authService: AuthService,
-    private validatorsService: ValidatorsService,
-    private router: Router) { }
-
   loginError: string = "";
 
   loginForm = this.formBuilder.group({
     dni: ['', Validators.required, this.validatorsService.isValidDni],
     password: ['', [Validators.required, Validators.minLength(6)]],
   });
 
-  public login(): void {
+  constructor(private modalService: NgbModal,
+    private formBuilder: FormBuilder,
+    private authService: AuthService,
+    private validatorsService: ValidatorsService,
+    private router: Router) { }
+
+  public async login(): Promise<void> {
     this.loginForm.markAllAsTouched();
     if (this.loginForm.valid) {
       let user: User = {
@@ -36,41 +36,48 @@ export class LoginModalComponent {
         password: `${this.loginForm.get('password')?.value}`,
       }
 
-      let registerResp = this.authService.login(user)
-			.then( (res) => {this.openSuccessfulLoginModal(res)})
-			.catch( (err) => this.notifyErrorLogin(err));
+      try {
+        let res = await this.authService.login(user);
+        this.openSuccessfulLoginModal(res);
+      } catch (err) {
+        this.notifyErrorLogin(err);
+      }
     }
   };
+
   public isValidField(field: string) {
     return this.validatorsService.isValidInput(field, this.loginForm);
   };
 
   public openSuccessfulLoginModal(res: any) {
+    this.closeModal();
     //TODO create routing to the page after success login
     alert('Success login');
   }
 
   public notifyErrorLogin(err: any) {
-    if ((typeof err.message) === "string") {
-      this.loginError = err.message;
+    if ((typeof err.error.message) === "string") {
+      this.loginError = err.error.message;
     } else {
       this.loginError = 'Error en el login';
     }
+
   }
 
   closeModal() {
     this.modalService.dismissAll();
   }
+
   openRegisterModal() {
     this.closeModal();
     this.modalService.open(RegisterModalComponent, { centered: true, size: 'lg' })
   }
-
-	isValidInput(input: string ): boolean | null {
-		return this.validatorsService.isValidInput(input, this.loginForm);
-	}
 
-	getInputError(field: string): string {
-		return this.validatorsService.getInputError(field, this.loginForm);
-	}
+  isValidInput(input: string): boolean | null {
+    return this.validatorsService.isValidInput(input, this.loginForm);
+  }
+
+  getInputError(field: string): string {
+    return this.validatorsService.getInputError(field, this.loginForm);
+  }
 }

src/app/modules/modals/register-modal/register-modal.component.html

@@ -9,28 +9,28 @@ <h2 class="modal-title text-center w-100">Registro</h2>
     <form [formGroup]="registerForm" class=" my-4 mx-sm-0 mx-lg-5 ps-5 pe-5 row">
         <div class="col-sm-12 col-lg-6">
             <input formControlName="dni" type="text" name="dni" placeholder="DNI"
-                [ngClass]="!isValidInput('dni') ? 'form-control' : 'form-control is-invalid'">
+                [ngClass]="!isValidInput('dni') ? 'form-control' : 'form-control is-invalid'" [tabindex]="-1">
             @if(isValidInput('dni')){
             <p class="text-danger form-text ps-3"> {{getInputError('dni')}}</p>
             }
         </div>
         <div class="col-sm-12 col-lg-6">
             <input formControlName="email" class="form-control" type="email" name="email" placeholder="Email"
-                [ngClass]="!isValidInput('email') ? 'form-control' : 'form-control is-invalid'">
+                [ngClass]="!isValidInput('email') ? 'form-control' : 'form-control is-invalid'" [tabIndex]="-1">
             @if(isValidInput('email')){
             <p class="text-danger form-text ps-3"> {{getInputError('email')}}</p>
             }
         </div>
         <div class="col-sm-12 col-lg-6">
             <input formControlName="name" class="form-control" type="text" name="name" placeholder="Username"
-                [ngClass]="!isValidInput('name') ? 'form-control' : 'form-control is-invalid'">
+                [ngClass]="!isValidInput('name') ? 'form-control' : 'form-control is-invalid'" [tabIndex]="-1">
             @if(isValidInput('name')){
             <p class="text-danger form-text ps-3"> {{getInputError('name')}}</p>
             }
         </div>
         <div class="col-sm-12 col-lg-6">
             <select formControlName="itineraryId" class="form-select" placeholder="Especialización"
-                [ngClass]="!isValidInput('name') ? 'form-control' : 'form-control is-invalid'">
+                [ngClass]="!isValidInput('name') ? 'form-control' : 'form-control is-invalid'" [tabIndex]="-1">
                 <option value="" class="text-muted">Especialización</option>
                 @for( itinerary of itineraries; track itinerary.id ){
                 <option [value]="itinerary.id">{{itinerary.name}}</option>
@@ -43,15 +43,15 @@ <h2 class="modal-title text-center w-100">Registro</h2>
         <div class="col-sm-12 col-lg-6">
             <input formControlName="password" class="form-control" type="password" name="password"
                 placeholder="Contraseña"
-                [ngClass]="!isValidInput('password') ? 'form-control' : 'form-control is-invalid'">
+                [ngClass]="!isValidInput('password') ? 'form-control' : 'form-control is-invalid'" [tabIndex]="-1">
             @if(isValidInput('password')){
             <p class="text-danger form-text ps-3"> {{getInputError('password')}}</p>
             }
         </div>
         <div class="col-sm-12 col-lg-6">
             <input formControlName="confirmPassword" type="password" name="confirmPassword"
                 placeholder="Repetir contraseña"
-                [ngClass]="!isValidInput('confirmPassword') ? 'form-control' : 'form-control is-invalid'">
+                [ngClass]="!isValidInput('confirmPassword') ? 'form-control' : 'form-control is-invalid'" [tabIndex]="-1">
             @if(isValidInput('confirmPassword')){
             <p class="text-danger form-text ps-3"> {{getInputError('confirmPassword')}}</p>
             }
@@ -61,10 +61,15 @@ <h2 class="modal-title text-center w-100">Registro</h2>
         <p class="w-100 text-center text-danger mt-3 mb-0 fs-6"> {{registerError}}</p>
         }
         <div class="row mt-3 mt-lg-4">
-            <div class="form-check col-sm-12 col-lg-6 d-flex align-items-center mb-3 mb-lg-0">
-                <input formControlName="legalTermsAccepted" class="form-check-input ms-1 mb-1" type="checkbox" value=""
-                    id="flexCheckDefault">
-                <label class="form-check-label fs-6 ps-2" for="flexCheckDefault"> Acepto términos legales </label>
+            <div class="form-check col-sm-12 col-lg-6 d-flex align-items-center mb-3 mb-lg-0 row">
+                <div class="w-100">
+                    <input formControlName="legalTermsAccepted" class="form-check-input ms-1 mb-1 " type="checkbox" value=""
+                        id="flexCheckDefault" [tabIndex]="-1">
+                    <label class="form-check-label fs-6 ps-2 pt-1" for="flexCheckDefault"> Acepto términos legales </label>
+                </div>
+                @if(isValidInput('legalTermsAccepted')){
+                    <p class="text-danger form-text ps-5 col-12"> {{getInputError('legalTermsAccepted')}}</p>
+                    }
             </div>
 
             <div class="col-sm-12 col-lg-6 d-flex align-items-center ">