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

DM2-2791-mejoras-de-interfaz-y-funcionalidad

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/app.module.ts

@@ -19,6 +19,7 @@ import { ApplianceRegistrationModule } from './pages/appliance-registration/appl
 import { AlertConfirmationModule } from './pages/components/alert-confirmation/alert-confirmation.module';
 import { ProductModule } from './pages/product/product.module';
 import { ModalProductModule } from './pages/components/modal-product/modal-product.module';
+import { PaymentModule } from './pages/payment/payment.module';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
@@ -33,6 +34,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     HomeModule,
     DashboardModule,
     ProductModule,
+    PaymentModule,
     ReactiveFormsModule,
     HttpClientModule,
     TranslateModule.forRoot({

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/constants/routes.constants.ts

@@ -5,6 +5,5 @@ export const RoutesConstants = {
   dashboard: '/pages/:userId/home',
   form: '/pages/:userId/form',
   product: '/pages/:userId/product',
-  root: '/',
+  payment: '/pages/:userId/payment/:id',
 };
-

src/app/models/payment.ts

@@ -0,0 +1,11 @@
+export interface Payment {
+  user_id: number;
+  full_name: string;
+  email: string;
+  telephone_number: string;
+  card_type: string;
+  card_number: string;
+  security_code: string;
+  amount_payable: number;
+  product_id: number;
+}