Merge pull request #43 from teamq-ec/DM2-2770-pagina-de-pagos

Dm2 2770 pagina de pagos

src/app/app-routing.module.ts

@@ -18,11 +18,11 @@ const routes: Routes = [
     path: 'pages/:userId',
     loadChildren: () =>
       import('./pages/pages.module').then((m) => m.PagesModule),
-    canActivate : [loginGuard]
+    canActivate: [loginGuard],
   },
   {
     path: '**',
-    redirectTo: '/home',
+    redirectTo: '',
   },
 ];
 

src/app/app.component.ts

@@ -1,10 +1,39 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from './components/service/auth.service';
+import { NavigationEnd, Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Appliance Care';
+  isLoggedIn = false;
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  ngOnInit(): void {
+    this.isLoggedIn = this.authService.isLoggedIn();
+
+    if (this.isLoggedIn) {
+      this.authService.redirectIfLoggedIn();
+    } else {
+      this.router.navigate(['']);
+    }
+
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.isLoggedIn = this.authService.isLoggedIn();
+        if (this.isLoggedIn && event.urlAfterRedirects === '/') {
+          this.authService.redirectIfLoggedIn();
+        }
+      }
+    });
+  }
+
+  logout(): void {
+    this.authService.logout();
+    this.isLoggedIn = false;
+  }
 }

src/app/components/guards/login.guard.ts

@@ -1,8 +1,13 @@
+import { Router } from '@angular/router';
+import { inject } from '@angular/core';
+
 export const loginGuard = () => {
+  const router = inject(Router);
 
-    if ( localStorage.getItem('token')){
-        return true;
-    } else {
-        return false;
-    }
-}
+  if (localStorage.getItem('token')) {
+    return true;
+  } else {
+    router.navigate(['auth/login']);
+    return false;
+  }
+};

src/app/components/service/auth.service.ts

@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 import { map, Observable } from 'rxjs';
 import { User } from 'src/app/models/user';
 import { environment } from 'src/environments/environment';
@@ -12,10 +13,10 @@ export class AuthService {
   private apiUrlAuthRegister = `${environment.apiUrl}/register`;
   private apiUrlAuthLogin = `${environment.apiUrl}/login`;
 
-  constructor() {}
+  constructor(private router: Router) {}
 
-  register(playload: User): Observable<User> {
-    return this.httpClient.post<User>(this.apiUrlAuthRegister, playload);
+  register(payload: User): Observable<User> {
+    return this.httpClient.post<User>(this.apiUrlAuthRegister, payload);
   }
 
   login(email: string, password: string): Observable<any> {
@@ -25,6 +26,7 @@ export class AuthService {
         map((response) => {
           if (response && response.token) {
             localStorage.setItem('token', response.token);
+            localStorage.setItem('userId', response.user.id.toString());
           }
           return response;
         })
@@ -33,11 +35,24 @@ export class AuthService {
 
   logout() {
     localStorage.removeItem('token');
-    localStorage.removeItem('userName');
-    localStorage.removeItem('userLastName');
+    localStorage.removeItem('userId');
+    this.router.navigate(['auth/login']);
   }
 
   isLoggedIn(): boolean {
     return !!localStorage.getItem('token');
   }
+
+  getUserId(): string | null {
+    return localStorage.getItem('userId');
+  }
+
+  redirectIfLoggedIn() {
+    const userId = localStorage.getItem('userId');
+    if (userId) {
+      this.router.navigate([`/pages/${userId}/home`]);
+    } else {
+      this.router.navigate(['auth/login']);
+    }
+  }
 }

src/app/pages/components/header/header.component.html

@@ -17,11 +17,6 @@
         </svg>
       </button>
     </div>
-    <div class="hidden lg:flex lg:gap-x-12">
-      <a href="#" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.producto' | translate }}</a>
-      <a href="#" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.caracteristicas' | translate }}</a>
-      <a href="#" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.compania' | translate }}</a>
-    </div>
     <div class="hidden lg:flex lg:flex-1 lg:justify-end">
       <a routerLink="/auth/login" class="text-sm font-semibold leading-6 text-gray-900">{{ 'header.ingresar' | translate
         }}<span aria-hidden="true">&rarr;</span></a>
@@ -72,17 +67,6 @@
       </div>
       <div class="mt-6 flow-root">
         <div class="-my-6 divide-y divide-gray-500/10">
-          <div class="space-y-2 py-6">
-            <a href="#"
-              class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">{{
-              'header.producto' | translate }}</a>
-            <a href="#"
-              class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">{{
-              'header.caracteristicas' | translate }}</a>
-            <a href="#"
-              class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">{{
-              'header.compania' | translate }}</a>
-          </div>
           <div class="py-6">
             <a routerLink="/auth/login"
               class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">{{
@@ -93,4 +77,3 @@
     </div>
   </div>
 </header>
-

src/app/pages/home/home.component.html

@@ -133,6 +133,7 @@ <h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-6
                         </div>
                     </div>
                 </div>
+                <br>
                 <a href=""
                     class="block w-full py-2 text-center text-sm font-medium text-white bg-blue-500 hover:bg-blue-600">
                     Ver detalles

src/assets/i18n/en.json

@@ -106,7 +106,7 @@
   },
   "formProduct": {
     "CONTACT_US_TITLE": "Contact Us",
-    "CONTACT_US_DESCRIPTION": "We want to hear from you. Please fill out the form below, and we will get in touch as soon as possible.",
+    "CONTACT_US_DESCRIPTION": "Please fill out the form below, and we will get in touch as soon as possible.",
     "APPLICANT_INFO_TITLE": "Applicant Information",
     "APPLICANT_INFO_DESCRIPTION": "Please provide your personal details.",
     "FIRST_NAME_LABEL": "First Name",

src/assets/i18n/es.json

@@ -106,7 +106,7 @@
   },
   "formProduct": {
     "CONTACT_US_TITLE": "Contáctenos",
-    "CONTACT_US_DESCRIPTION": "Queremos saber de usted. Complete el formulario a continuación y nos pondremos en contacto lo antes posible.",
+    "CONTACT_US_DESCRIPTION": "Complete el formulario a continuación y nos pondremos en contacto lo antes posible.",
     "APPLICANT_INFO_TITLE": "Información del solicitante",
     "APPLICANT_INFO_DESCRIPTION": "Por favor, proporciona tus datos personales.",
     "FIRST_NAME_LABEL": "Nombre",