create guard and ui secure module

jhonacs2 · May 4, 2023 · e2cec2f · e2cec2f
1 parent ea0757d
commit e2cec2f
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 14 deletions.
diff --git a/src/presentation/app/guard/token.guard.spec.ts b/src/presentation/app/guard/token.guard.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TokenGuard } from './token.guard';
+
+describe('TokenGuard', () => {
+  let guard: TokenGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(TokenGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});
diff --git a/src/presentation/app/guard/token.guard.ts b/src/presentation/app/guard/token.guard.ts
@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router} from '@angular/router';
+import {map, Observable, tap} from 'rxjs';
+import {Store} from "@ngrx/store";
+import {AppState} from "../state/app.state";
+import {selectTokenUser} from "../state/selectors/user.selector";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TokenGuard implements CanActivate {
+
+  constructor(private _store: Store<AppState>, private _router: Router) {
+  }
+
+  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
+    return this._store.select(selectTokenUser).pipe(
+      map(value => !!value),
+      tap(hasToken => {
+        if (!hasToken) {
+          this._router.navigate(['/login']);
+        }
+      })
+    );
+  }
+
+}
diff --git a/src/presentation/app/modules/secure/components/header/header.component.html b/src/presentation/app/modules/secure/components/header/header.component.html
@@ -107,7 +107,8 @@ <h5>Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span>
                   </a>
                   <!-- Message -->
                   <a href="#">
-                    <div class="user-img"><img src="./assets/images/users/3.jpg" alt="user" class="img-circle"> <span
+                    <div class="user-img"><img ngSrc="./assets/images/users/3.jpg" alt="user" class="img-circle"
+                                               height="600" width="600"> <span
                       class="profile-status away pull-right"></span></div>
                     <div class="mail-contnet">
                       <h5>Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span
@@ -144,17 +145,17 @@ <h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle waves-effect waves-dark" href="" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
-            <!--            <img [src]="usuario.imagenUrl" alt="user" class="profile-pic" />-->
+            <img [src]="userData.data.img" alt="user" class="profile-pic"/>
           </a>
           <div class="dropdown-menu dropdown-menu-right animated fadeIn fast">
             <ul class="dropdown-user">
               <li>
                 <div class="dw-user-box">
-                  <!--                  <div class="u-img"><img [src]="usuario.imagenUrl" alt="user"></div>-->
+                  <div class="u-img"><img [src]="userData.data.img" alt="user"></div>
                   <div class="u-text">
-                    <!--                    <h4>{{ usuario.nombre }}</h4>-->
+                    <h4>{{ userData.data.name }}</h4>
                     <p class="text-muted">
-                      <!--                      {{ usuario.email | slice:0:20 }}{{ (usuario.email.length > 20) ? '...': '' }}-->
+                      {{ userData.data.email | slice:0:20 }}{{ (userData.data.email.length > 20) ? '...' : '' }}
                     </p>
                     <a href="pages-profile.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a>
                   </div>

diff --git a/src/presentation/app/modules/secure/components/header/header.component.ts b/src/presentation/app/modules/secure/components/header/header.component.ts
@@ -1,10 +1,24 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {Store} from "@ngrx/store";
+import {AppState} from "../../../../state/app.state";
+import {selectUserData} from "../../../../state/selectors/user.selector";
+import {DataUser} from "../../../../state/reducers/user.reducer";
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   encapsulation: ViewEncapsulation.None
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
 
+  public userData!: DataUser
+
+  constructor(private _store: Store<AppState>) {
+  }
+
+  ngOnInit(): void {
+    this._store.select(selectUserData).subscribe(value => {
+      this.userData = value;
+    })
+  }
 }
diff --git a/src/presentation/app/modules/secure/secure.module.ts b/src/presentation/app/modules/secure/secure.module.ts
@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {MainPageComponent} from './main-page/main-page.component';
 import {SecureRoutesModule} from "./routes/secure-routes.module";
 import { HeaderComponent } from './components/header/header.component';
@@ -14,7 +14,8 @@ import { SideBarComponent } from './components/side-bar/side-bar.component';
   ],
   imports: [
     CommonModule,
-    SecureRoutesModule
+    SecureRoutesModule,
+    NgOptimizedImage
   ]
 })
 export class SecureModule {

diff --git a/src/presentation/app/routes/app-routes.ts b/src/presentation/app/routes/app-routes.ts
@@ -1,4 +1,5 @@
 import {Routes} from "@angular/router";
+import {TokenGuard} from "../guard/token.guard";
 
 export const APP_ROUTES: Routes = [
   {
@@ -7,11 +8,13 @@ export const APP_ROUTES: Routes = [
   },
   {
     path: 'secure',
-    loadChildren: () => import('../modules/secure/secure.module').then(m => m.SecureModule)
+    loadChildren: () => import('../modules/secure/secure.module').then(m => m.SecureModule),
+    canActivate: [TokenGuard],
   },
   {
     path: '',
     redirectTo: 'public',
     pathMatch: 'full'
-  }
+  },
+  {path: '**', redirectTo: 'public'}
 ]
diff --git a/src/presentation/app/state/effects/user.effect.ts b/src/presentation/app/state/effects/user.effect.ts
@@ -1,16 +1,18 @@
 import {Injectable} from "@angular/core";
 import {Actions, createEffect, ofType} from "@ngrx/effects";
 import {UserActions} from "../action";
-import {map, mergeMap} from "rxjs";
+import {map, mergeMap, tap} from "rxjs";
 import {AuthLoginUseCase} from "../../../../domain/usecases/auth/auth-login-use.case";
 import {RenewTokenUseCase} from "../../../../domain/usecases/auth/renew-token-use.case";
+import {Router} from "@angular/router";
 
 @Injectable()
 export class UserEffect {
 
   constructor(private _action$: Actions,
               private _authLoginUseCase: AuthLoginUseCase,
-              private _renewTokenUseCase: RenewTokenUseCase) {
+              private _renewTokenUseCase: RenewTokenUseCase,
+              private _router: Router) {
   }
 
   loginUser$ = createEffect(() =>
@@ -31,6 +33,7 @@ export class UserEffect {
       mergeMap(
         (action) => this._renewTokenUseCase.execute({token: action.token})
           .pipe(
+            tap(() => this._router.navigateByUrl('/secure')),
             map(userData => UserActions.loadDataUser({userData}))
           )
       )

diff --git a/src/presentation/app/state/reducers/user.reducer.ts b/src/presentation/app/state/reducers/user.reducer.ts
@@ -7,7 +7,7 @@ export interface UserState {
   loading: boolean
 }
 
-interface DataUser {
+export interface DataUser {
   token: string,
   data: UserModel
 }

diff --git a/src/presentation/app/state/selectors/user.selector.ts b/src/presentation/app/state/selectors/user.selector.ts
@@ -0,0 +1,16 @@
+import {AppState} from "../app.state";
+import {createSelector} from "@ngrx/store";
+import {DataUser} from "../reducers/user.reducer";
+
+export const selectUser = (state: AppState) => state.user.user
+export const selectToken = (state: AppState) => state.user.user.token
+
+export const selectUserData = createSelector(
+  selectUser,
+  (state: DataUser) => state
+)
+
+export const selectTokenUser = createSelector(
+  selectToken,
+  (state) => state
+)