feat: added sign-in configuration

server/db.json

 {
-  "agents": [
+  "users": [
     {
-      "name": "John",
-      "lastname": "Doe",
-      "detail": "",
-      "email": "john.doe@gmail.com",
-      "password": "heber12345",
-      "id": 1
+      "id": 1,
+      "email": "supervisor@gmail.com",
+      "password": "$2a$10$p3DUg5omCWx80I5vJDFSHeysEAN8VQPzngH.HhtpWL9LFqpxl71Ie",
+      "role": "supervisor"
     },
     {
       "id": 2,
-      "name": "Alice",
-      "lastname": "Smith",
-      "email": "alice.smith@gmail.com",
-      "cellphone": "+51965456935",
-      "dateCreated": "10/11/2023",
-      "typeDocumentId": 2,
-      "identificationDocument": "87654321"
+      "email": "agent@gmail.com",
+      "password": "$2a$10$oiFXCA1rXxCXV.eRN7eDH.1qL8031cklq56zpyQbYCr/1otdFMV9q",
+      "role": "agent"
     },
     {
       "id": 3,
-      "name": "Bob",
-      "lastname": "Johnson",
-      "email": "bob.johnson@gmail.com",
-      "cellphone": "+51965456936",
-      "dateCreated": "10/11/2023",
-      "typeDocumentId": 1,
-      "identificationDocument": "65432187"
-    },
+      "email": "passenger@gmail.com",
+      "password": "$2a$10$tSIYpGX2R0GUDVw32bFN4uCI5X7Xq4wQBhPv0XjExnFl79XPVJWKm",
+      "role": "passenger"
+    }
+  ],
+  "supervisors": [
     {
-      "name": "Maria",
+      "id": 1,
+      "name": "Joffret",
       "lastname": "Cordova",
       "detail": "",
-      "email": "mcordova@gmail.com",
-      "password": "maria123",
-      "id": 5
-    },
+      "userId": 1
+    }
+  ],
+  "agents": [
     {
-      "name": "Neyser",
-      "lastname": "Cordova",
+      "name": "Heber ",
+      "lastname": "Cordova Jimenez",
       "detail": "",
-      "email": "ncordova@gmail.com",
-      "password": "hebeer123",
-      "id": 6
-    },
+      "email": "hcordova@gmail.com",
+      "password": "heber123",
+      "id": 1
+    }
+  ],
+  "passengers": [
     {
       "name": "Heber",
+      "secondName": "",
       "lastname": "Cordova",
-      "detail": "",
-      "email": "correo@correo.com",
-      "password": "correo123",
-      "id": 7
+      "country": "Peru",
+      "city": "Lima",
+      "address": "Calle 123",
+      "phone": "987654321",
+      "email": "hcordova@gmail.com",
+      "password": "heber123",
+      "userId": 3,
+      "id": 4
     }
   ],
   "reservations": [
@@ -62,85 +62,12 @@
       "travelClassName": "Economico",
       "ticketTypeCode": 2,
       "ticketTypeName": "Ejecutivo",
-      "statusCode": "REGISTRADO",
+      "statusCode": "PROCESANDO_PAGO",
       "dateReservationMade": "22/10/2023",
       "flightId": 2,
       "id": 1
     }
   ],
-  "bookings": [
-    {
-      "id": 1,
-      "passengerId": 1,
-      "typeTicket": "Economico",
-      "class": "Economico",
-      "status": "Pendiente"
-    },
-    {
-      "id": 2,
-      "passengerId": 2,
-      "typeTicket": "Economico",
-      "class": "Economico",
-      "status": "Pendiente"
-    },
-    {
-      "id": 3,
-      "passengerId": 3,
-      "typeTicket": "Ejecutivo",
-      "class": "Ejecutivo",
-      "status": "Pendiente"
-    }
-  ],
-  "passengers": [
-    {
-      "name": "Michael",
-      "secondName": "",
-      "lastname": "Johnson",
-      "country": "USA",
-      "city": "Anytown",
-      "address": "123 Main Street",
-      "phone": "+123456789",
-      "email": "michael.johnson@example.com",
-      "password": "123456",
-      "id": 1
-    },
-    {
-      "name": "Jennifer",
-      "secondName": "",
-      "lastname": "Williams",
-      "country": "Canada",
-      "city": "Somewhere",
-      "address": "456 Elm Avenue",
-      "phone": "+987654321",
-      "email": "jennifer.williams@example.com",
-      "password": "123456",
-      "id": 2
-    },
-    {
-      "name": "Sarah",
-      "secondName": "",
-      "lastname": "Brown",
-      "country": "UKS",
-      "city": "Everytown",
-      "address": "789 Oak Road",
-      "phone": "+1122334455",
-      "email": "sarah.brown@example.com",
-      "password": "123456",
-      "id": 3
-    },
-    {
-      "name": "Heber",
-      "secondName": "",
-      "lastname": "Cordova",
-      "country": "Peru",
-      "city": "Lima",
-      "address": "Calle 123",
-      "phone": "987654321",
-      "email": "hcordova@gmail.com",
-      "password": "heber123",
-      "id": 4
-    }
-  ],
   "airports": [
     {
       "id": 1,

src/app/agent/services/reservations.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Reservation } from '../interfaces/reservation.interface';
-import { Observable } from 'rxjs';
+import { Observable, tap } from 'rxjs';
 
 @Injectable({providedIn: 'root'})
 export class ReservationsService {
@@ -17,6 +17,10 @@ export class ReservationsService {
     return this.http.get<Reservation>(`${this.URL_BASE}/${id}`);
   }
 
+  getByPassengerId(id: number): Observable<Reservation[]> {
+    return this.http.get<Reservation[]>(`${this.URL_BASE}?passengerId=${id}`);
+  }
+
   save(reservation: Reservation): Observable<Reservation> {
     return this.http.post<Reservation>(this.URL_BASE, reservation);
   }

src/app/app.module.ts

@@ -7,7 +7,7 @@ import { PassengerModule } from './passenger/passenger.module';
 import { AgentModule } from './agent/agent.module';
 import { SharedModule } from './shared/shared.module';
 import { SignInComponent } from './security/pages/sign-in/sign-in.component';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -21,7 +21,8 @@ import { FormsModule } from '@angular/forms';
     AgentModule,
     SupervisorModule,
     PassengerModule,
-    FormsModule
+    FormsModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/passenger/interfaces/reservation-detail.interface.ts

+import { ReservationStatusCode } from "src/app/agent/interfaces/reservation.interface";
+
 export interface ReservationDetail {
   id: number;
   origin: string;
   destination: string;
   date: string;
-  status: string;
+  status: ReservationStatusCode;
   cost: number;
 }

src/app/passenger/pages/my-reservations/my-reservations.component.html

@@ -53,8 +53,8 @@
         <button (click)="onTogleDialogPay()" class="btn btn-back">
           Cancelar
         </button>
-        <button class="btn btn-pay" (click)="onSave()">
-          Pagar: 120 USD
+        <button [disabled]="formGroup.invalid" class="btn btn-pay" (click)="onSave()">
+          Pagar: {{ reservationSelected?.cost }} USD
         </button>
       </div>
     </form>

src/app/passenger/pages/my-reservations/my-reservations.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { TableModel } from 'src/app/shared/interfaces/table-model.interface';
 import { ReservationDetail } from '../../interfaces/reservation-detail.interface';
 import { TableAction } from 'src/app/shared/interfaces/table-action.interface';
 import { Router } from '@angular/router';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ReservationsService } from 'src/app/agent/services/reservations.service';
+import { FlightService } from 'src/app/supervisor/services/flight.service';
+import { Reservation } from 'src/app/agent/interfaces/reservation.interface';
 
 @Component({
   selector: 'passenger-my-reservations',
   templateUrl: './my-reservations.component.html',
   styleUrls: ['./my-reservations.component.css']
 })
-export class MyReservationsComponent {
+export class MyReservationsComponent implements OnInit {
 
   public actions: TableAction[] = [
     {
@@ -26,10 +29,13 @@ export class MyReservationsComponent {
     {
       title: "Pagar",
       icon: "bi-cash",
-      action: () => { this.onTogleDialogPay(); }
+      action: (item) => { this.onTogleDialogPay(); this.reservationSelected = item; }
     }
   ];
 
+  public reservationSelected: ReservationDetail | null = null;
+  public reservation: Reservation | null = null;
+
   public tableModel: TableModel[] = [
     {
       name: 'id',
@@ -56,24 +62,7 @@ export class MyReservationsComponent {
       title: 'Costo',
     }
   ]
-  public tableData: ReservationDetail[] = [
-    {
-      id: 1,
-      origin: 'Bogotá',
-      destination: 'Medellín',
-      date: '2021-10-10',
-      status: 'Activo',
-      cost: 1500
-    },
-    {
-      id: 2,
-      origin: 'Bogotá',
-      destination: 'Medellín',
-      date: '2021-10-10',
-      status: 'Activo',
-      cost: 1500
-    }
-  ];
+  public tableData: ReservationDetail[] = [];
 
   cardControl = new FormControl<string>('', [Validators.required]);
   expirationControl = new FormControl<string>('', [Validators.required]);
@@ -88,17 +77,43 @@ export class MyReservationsComponent {
   });
 
   onSave(): void {
-    console.log(this.formGroup.value);
-
+    if (this.formGroup.valid && this.reservation && this.reservationSelected) {
+      this.reservation.statusCode = 'PROCESANDO_PAGO';
+      this.reservationSelected.status = 'PROCESANDO_PAGO';
+      this.reservationService.edit(this.reservationSelected!.id, this.reservation)
+        .subscribe(() => {
+          this.formGroup.reset();
+          this.onTogleDialogPay();
+        });
+    }
   }
 
-  // formPay = new FormGroup<string>({
-  //   name: new FormControl<string>('', [Validators.required]),
-  // });
-
   public openDialogPay: boolean = false;
 
-  constructor(private router: Router) {}
+  constructor(private router: Router,
+    private reservationService: ReservationsService,
+    private flightService: FlightService) {}
+
+  ngOnInit(): void {
+    this.reservationService.getByPassengerId(4)
+      .subscribe(response => {
+        response.forEach(reservation => {
+          this.reservation = reservation;
+          this.flightService.getById(reservation.flightId)
+            .subscribe((flight) => {
+              const reservationDetail: ReservationDetail = {
+                id: reservation.id!,
+                origin: flight.airportOrigin,
+                destination: flight.airportDestination,
+                date: reservation.dateReservationMade,
+                status: reservation.statusCode,
+                cost: flight.costs[0].cost
+              }
+              this.tableData.push(reservationDetail);
+            })
+        })
+      })
+  }
 
   onClickItem(item: ReservationDetail): void {
     this.router.navigate(['/passenger/reservations', item.id]);

src/app/security/models/security-credentials.interface.ts

+export interface SecurityCredentials {
+  email: string;
+  password: string;
+}

src/app/security/models/security-response.interface.ts

+export interface SecurityResponse {
+  accessToken: string;
+  user: User;
+}
+
+interface User {
+  id: number;
+  email: string;
+  role: string;
+}

src/app/security/pages/sign-in/sign-in.component.css

@@ -89,3 +89,7 @@
   border: none;
   border-radius: 0;
 }
+
+.error {
+  font-size: 12px;
+}

src/app/security/pages/sign-in/sign-in.component.html

@@ -9,14 +9,15 @@
           <option *ngFor="let leng of lenguages" [value]="leng.value">{{leng.text}}</option>
         </select>
       </div>
-      <form class="login__content-security">
+      <form [formGroup]="signInForm" (ngSubmit)="onSignIn()" autocomplete="off" class="login__content-security">
         <div class="field">
           <label class="field__label" for="user">{{ text[lenguage].email }}</label>
-          <input class="field__input" type="text" name="user" id="user">
+          <input formControlName="email" class="field__input" type="text" name="user" id="user">
+          <span *ngIf="showError" class="error">Usuario o contraseña incorrectos.</span>
         </div>
         <div class="field">
           <label class="field__label" for="password">{{ text[lenguage].password }}</label>
-          <input class="field__input" type="password" name="password" id="password">
+          <input formControlName="password" class="field__input" type="password" name="password" id="password">
         </div>
         <div class="actions">
           <input class="btn" type="submit" [value]="text[lenguage].button">

src/app/security/pages/sign-in/sign-in.component.ts

 import { Component } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { SecurityService } from '../../services/security.service';
+import { SecurityCredentials } from '../../models/security-credentials.interface';
+import { SecurityResponse } from '../../models/security-response.interface';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-sign-in',
@@ -32,7 +37,40 @@ export class SignInComponent {
     }
   }
 
+  constructor(private securityService: SecurityService,
+    private router: Router) {}
+
+  public signInForm: FormGroup = new FormGroup({
+    email: new FormControl<string | null>(null, [Validators.required, Validators.minLength(3)]),
+    password: new FormControl<string | null>(null, [Validators.required, Validators.minLength(3)])
+  });
+
+  public showError: boolean = false;
+  public securityResponse: SecurityResponse | null = null;
+
   changeLenguage(lenguage: string) {
     this.lenguage = lenguage;
   }
+
+  onSignIn(): void {
+    this.signInForm.markAllAsTouched();
+    if (this.signInForm.valid) {
+      const credentials: SecurityCredentials = this.signInForm.value;
+      this.securityService.login(credentials)
+        .subscribe(securityResponse => {
+          switch(securityResponse.user.role) {
+            case 'supervisor':
+              this.router.navigate(['/supervisors']);
+              break;
+            case 'agent':
+              this.router.navigate(['/agents']);
+              break;
+            case 'passenger':
+              this.router.navigate(['/passengers']);
+              break;
+          }
+        }, error => this.showError = true);
+    } else this.showError = true;
+
+  }
 }

src/app/security/services/security.service.ts

+
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { SecurityCredentials } from '../models/security-credentials.interface';
+import { SecurityResponse } from '../models/security-response.interface';
+import { Observable } from 'rxjs';
+
+@Injectable({providedIn: 'root'})
+export class SecurityService {
+  constructor(private http: HttpClient) { }
+
+  URL_BASE: string = 'http://localhost:3000/';
+
+  login(securityCredentials: SecurityCredentials): Observable<SecurityResponse> {
+    return this.http.post<SecurityResponse>(this.URL_BASE + 'signin', securityCredentials);
+  }
+}