diff --git a/package-lock.json b/package-lock.json index cdce84c..80d0cbf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", "bootstrap": "^5.1.3", + "jwt-decode": "^3.1.2", "rxjs": "~7.4.0", "tslib": "^2.3.0", "underscore": "^1.13.1", @@ -7733,6 +7734,11 @@ "safe-buffer": "^5.0.1" } }, + "node_modules/jwt-decode": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz", + "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==" + }, "node_modules/karma": { "version": "6.3.9", "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.9.tgz", @@ -19833,6 +19839,11 @@ "safe-buffer": "^5.0.1" } }, + "jwt-decode": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz", + "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==" + }, "karma": { "version": "6.3.9", "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.9.tgz", diff --git a/package.json b/package.json index 24a69bd..10e4812 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", "bootstrap": "^5.1.3", + "jwt-decode": "^3.1.2", "rxjs": "~7.4.0", "tslib": "^2.3.0", "underscore": "^1.13.1", diff --git a/src/app/components/nav-bar/nav-bar.component.html b/src/app/components/nav-bar/nav-bar.component.html index 4b77033..4b44be0 100644 --- a/src/app/components/nav-bar/nav-bar.component.html +++ b/src/app/components/nav-bar/nav-bar.component.html @@ -17,6 +17,7 @@ Compte utilisateur Se connecter S'inscrire + Mon compte Panier Plus d'option bientôt Pas de plante likée diff --git a/src/app/modules/account/account-routing.module.ts b/src/app/modules/account/account-routing.module.ts index be72b80..444531f 100644 --- a/src/app/modules/account/account-routing.module.ts +++ b/src/app/modules/account/account-routing.module.ts @@ -1,6 +1,8 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { any } from 'underscore'; +import { AuthGuard } from './auth.guard'; +import { PageAccountComponent } from './pages/page-account/page-account.component'; import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component'; import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component'; import { PageSigninComponent } from './pages/page-signin/page-signin.component'; @@ -11,7 +13,8 @@ const routes: Routes = [ { path: 'signin', component: PageSigninComponent }, { path: 'signup', component: PageSignupnComponent }, { path: 'forgot-password', component: PageForgotPasswordComponent }, - { path: 'reset-password', component: PageResetPasswordComponent } + { path: 'reset-password', component: PageResetPasswordComponent }, + { path: 'user', canActivate: [AuthGuard], component: PageAccountComponent } ]; @NgModule({ diff --git a/src/app/modules/account/account.module.ts b/src/app/modules/account/account.module.ts index babf4fb..313b9c5 100644 --- a/src/app/modules/account/account.module.ts +++ b/src/app/modules/account/account.module.ts @@ -7,6 +7,7 @@ import { PageSignupnComponent } from './pages/page-signupn/page-signupn.componen import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component'; import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { PageAccountComponent } from './pages/page-account/page-account.component'; @NgModule({ @@ -14,7 +15,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; PageSigninComponent, PageSignupnComponent, PageForgotPasswordComponent, - PageResetPasswordComponent + PageResetPasswordComponent, + PageAccountComponent ], imports: [ CommonModule, diff --git a/src/app/modules/account/auth.guard.spec.ts b/src/app/modules/account/auth.guard.spec.ts new file mode 100644 index 0000000..68889d2 --- /dev/null +++ b/src/app/modules/account/auth.guard.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { AuthGuard } from './auth.guard'; + +describe('AuthGuard', () => { + let guard: AuthGuard; + + beforeEach(() => { + TestBed.configureTestingModule({}); + guard = TestBed.inject(AuthGuard); + }); + + it('should be created', () => { + expect(guard).toBeTruthy(); + }); +}); diff --git a/src/app/modules/account/auth.guard.ts b/src/app/modules/account/auth.guard.ts new file mode 100644 index 0000000..91a6778 --- /dev/null +++ b/src/app/modules/account/auth.guard.ts @@ -0,0 +1,36 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router'; +import { Observable } from 'rxjs'; +import { environment } from 'src/environments/environment'; +import jwt_decode from 'jwt-decode'; + +@Injectable({ + providedIn: 'root' +}) +export class AuthGuard implements CanActivate { + private tokenKey: string; + constructor(private router: Router) { + this.tokenKey = environment.tokenKey; + } + canActivate( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { + const token = localStorage.getItem(this.tokenKey); + if(token) { + const decodedToken = jwt_decode(token); + if(decodedToken.exp) { + const dateExp = new Date(decodedToken.exp * 1000); + if(new Date() >= dateExp) { + this.router.navigate(['account/signin']); + return false; + } + } + + return true; + } else { + this.router.navigate(['account/signin']); + return false; + } + } + +} diff --git a/src/app/modules/account/pages/page-account/page-account.component.html b/src/app/modules/account/pages/page-account/page-account.component.html new file mode 100644 index 0000000..ea9a0aa --- /dev/null +++ b/src/app/modules/account/pages/page-account/page-account.component.html @@ -0,0 +1 @@ +

page-account works!

diff --git a/src/app/modules/account/pages/page-account/page-account.component.scss b/src/app/modules/account/pages/page-account/page-account.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/account/pages/page-account/page-account.component.spec.ts b/src/app/modules/account/pages/page-account/page-account.component.spec.ts new file mode 100644 index 0000000..8bbe80f --- /dev/null +++ b/src/app/modules/account/pages/page-account/page-account.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageAccountComponent } from './page-account.component'; + +describe('PageAccountComponent', () => { + let component: PageAccountComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PageAccountComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PageAccountComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/account/pages/page-account/page-account.component.ts b/src/app/modules/account/pages/page-account/page-account.component.ts new file mode 100644 index 0000000..e9d4df3 --- /dev/null +++ b/src/app/modules/account/pages/page-account/page-account.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-page-account', + templateUrl: './page-account.component.html', + styleUrls: ['./page-account.component.scss'] +}) +export class PageAccountComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/modules/account/services/auth.service.ts b/src/app/modules/account/services/auth.service.ts index e7fcd45..b674615 100644 --- a/src/app/modules/account/services/auth.service.ts +++ b/src/app/modules/account/services/auth.service.ts @@ -1,7 +1,8 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; +import { map, Observable } from 'rxjs'; import { environment } from 'src/environments/environment'; +import { any } from 'underscore'; import { User } from '../models/user'; @Injectable({ @@ -9,9 +10,11 @@ import { User } from '../models/user'; }) export class AuthService { private apiUrl: string; + private tokenKey: string; constructor(private http: HttpClient) { this.apiUrl = environment.apiUrl; + this.tokenKey = environment.tokenKey; } signup(newUser: User): Observable { @@ -33,6 +36,13 @@ export class AuthService { password: password }; - return this.http.post(`${this.apiUrl}/login`, body); + return this.http.post(`${this.apiUrl}/login`, body).pipe( + map((x: any) => { + console.log('Service : ', x.accessToken); + // Modification à faire ici + localStorage.setItem(this.tokenKey, x.accessToken); + return x; // permet de renvoyer la réponse à l'initiateur (page Signin) après le traitement du map + }) + ); } } diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 0e46b37..6508222 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,4 +1,5 @@ export const environment = { production: true, - apiUrl: "" + apiUrl: "", + tokenKey: "TOKEN-LBP" }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index eb39b32..4a6dabf 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,7 +4,8 @@ export const environment = { production: false, - apiUrl: "http://localhost:3000" + apiUrl: "http://localhost:3000", + tokenKey: "TOKEN-LBP" }; /*