From c80b74eb7f090b31004db43b1fdbf1815a6d3da8 Mon Sep 17 00:00:00 2001 From: Romain Verger <romainverger35@gmail.com> Date: Mon, 7 Mar 2022 15:36:40 +0100 Subject: [PATCH] page account --- src/app/app-routing.module.ts | 2 ++ src/app/app.module.ts | 4 ++- .../components/nav-bar/nav-bar.component.html | 1 + src/app/pages/models/user.ts | 2 -- .../page-account/page-account.component.html | 16 +++++++++ .../page-account/page-account.component.scss | 0 .../page-account.component.spec.ts | 25 +++++++++++++ .../page-account/page-account.component.ts | 36 +++++++++++++++++++ src/app/services/auth.service.ts | 16 ++++++++- 9 files changed, 98 insertions(+), 4 deletions(-) create mode 100644 src/app/pages/page-account/page-account.component.html create mode 100644 src/app/pages/page-account/page-account.component.scss create mode 100644 src/app/pages/page-account/page-account.component.spec.ts create mode 100644 src/app/pages/page-account/page-account.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c4fde3d..2571469 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -10,6 +10,7 @@ import { SigninComponent } from './pages/signin/signin.component'; import { SignupComponent } from './pages/signup/signup.component'; import { AdminPageComponent } from './pages/admin-page/admin-page.component'; import { AuthGuard } from './services/auth.guard'; +import { PageAccountComponent } from './pages/page-account/page-account.component'; const routes: Routes = [ { path: '', redirectTo: 'signin', pathMatch: 'full' }, @@ -19,6 +20,7 @@ const routes: Routes = [ { path: 'categories', component: ListCategoriesComponent }, { path: 'favoris', component: FavorisUserComponent }, { path: 'filtres', component: FiltersPageComponent }, + { path: 'profil', component: PageAccountComponent }, { path: 'Deconnexion', redirectTo: 'home'}, {path: 'restaurants', canActivate: [AuthGuard], component: RestoPageComponent}, {path: 'page-not-found',component: PageNotFoundComponent}, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 895593a..de864a8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,6 +25,7 @@ import { HeaderLogoComponent } from './header/components/header-logo/header-logo import { AuthInterceptor } from './services/auth.interceptor'; import { FavorisUserComponent } from './pages/favoris-user/favoris-user.component'; import { SignupComponent } from './pages/signup/signup.component'; +import { PageAccountComponent } from './pages/page-account/page-account.component'; @NgModule({ declarations: [ @@ -48,7 +49,8 @@ import { SignupComponent } from './pages/signup/signup.component'; UpdateDelRestauComponent, HeaderLogoComponent, FavorisUserComponent, - SignupComponent + SignupComponent, + PageAccountComponent ], imports: [ BrowserModule, diff --git a/src/app/header/components/nav-bar/nav-bar.component.html b/src/app/header/components/nav-bar/nav-bar.component.html index 8fadc20..6a99db4 100644 --- a/src/app/header/components/nav-bar/nav-bar.component.html +++ b/src/app/header/components/nav-bar/nav-bar.component.html @@ -16,6 +16,7 @@ <a routerLink="restaurants" routerLinkActive="active-custom" class="nav-link p-4 pe-5" style="font-size: 21px;">Restaurants</a> <a routerLink="filtres" routerLinkActive="active-custom" class="nav-link p-4 pe-5" style="font-size: 21px;">Filtres</a> <a routerLink="favoris" routerLinkActive="active-custom" class="nav-link p-4 pe-5" style="font-size: 21px;">Mes favoris</a> + <a routerLink="profil" routerLinkActive="active-custom" class="nav-link p-4 pe-5" style="font-size: 21px;">Mon profil</a> <a routerLink="deconnexion" routerLinkActive="active-custom" (click) = "onCloseSession()" class="nav-link p-4 pe-5" style="font-size: 21px;">Deconnexion</a> </div> </div> diff --git a/src/app/pages/models/user.ts b/src/app/pages/models/user.ts index 9e2e971..2eba1ca 100644 --- a/src/app/pages/models/user.ts +++ b/src/app/pages/models/user.ts @@ -1,5 +1,3 @@ -import { RoleList } from "./roleList"; - export interface User { id?:number; prenom: string; diff --git a/src/app/pages/page-account/page-account.component.html b/src/app/pages/page-account/page-account.component.html new file mode 100644 index 0000000..52fc6ea --- /dev/null +++ b/src/app/pages/page-account/page-account.component.html @@ -0,0 +1,16 @@ +<div class="container mt-5"> + <form class="row g-2" [formGroup]="userInfo"> + <div class="col-md-6"> + <label for="inputFirstName" class="form-label">Prénom</label> + <input type="text" class="form-control" id="inputFirstName" formControlName="firstName" readonly="readonly"> + </div> + <div class="col-md-6"> + <label for="inputLastName" class="form-label">Nom</label> + <input type="text" class="form-control" id="inputLastName" formControlName="lastName" readonly="readonly"> + </div> + <div class="col-md-12"> + <label for="inputEmail" class="form-label">Email</label> + <input type="email" class="form-control" id="inputEmail" formControlName="email" readonly="readonly"> + </div> + </form> +</div> \ No newline at end of file diff --git a/src/app/pages/page-account/page-account.component.scss b/src/app/pages/page-account/page-account.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/page-account/page-account.component.spec.ts b/src/app/pages/page-account/page-account.component.spec.ts new file mode 100644 index 0000000..8bbe80f --- /dev/null +++ b/src/app/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<PageAccountComponent>; + + 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/pages/page-account/page-account.component.ts b/src/app/pages/page-account/page-account.component.ts new file mode 100644 index 0000000..41068c2 --- /dev/null +++ b/src/app/pages/page-account/page-account.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { AuthService } from 'src/app/services/auth.service'; +import { User } from '../models/user'; + +@Component({ + selector: 'app-page-account', + templateUrl: './page-account.component.html', + styleUrls: ['./page-account.component.scss'] +}) +export class PageAccountComponent implements OnInit { + + public userInfo: FormGroup; + + constructor(private fb: FormBuilder, private authService: AuthService) { + this.userInfo = this.initForm(); + + this.authService.getConnectedUserInfo()?.subscribe( + (user: User) => { + this.userInfo = this.initForm(user); + } + ) + + } + + ngOnInit(): void { + } + + private initForm(user?: User): FormGroup { + return this.fb.group({ + firstName: [user ? user.prenom : ''], + lastName: [user ? user.nom : ''], + email: [user ? user.email : ''] + }) + } +} diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index 4fe0010..9cf8b88 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -3,6 +3,9 @@ import { Injectable } from '@angular/core'; import { map, Observable } from 'rxjs'; import { environment } from 'src/environments/environment'; import { User } from 'src/app/pages/models/user'; +import jwt_decode from 'jwt-decode'; +import { Router } from '@angular/router'; + @Injectable({ @@ -12,7 +15,7 @@ export class AuthService { private apiUrl: string; private tokenKey: string; - constructor(private http: HttpClient) { + constructor(private http: HttpClient, private router: Router) { // On se sert des variables d'environnement de notre application this.apiUrl = environment.apiUrl; this.tokenKey = environment.tokenKey; @@ -47,4 +50,15 @@ export class AuthService { ); } + getConnectedUserInfo(): Observable<User> | void { + const token = localStorage.getItem(this.tokenKey); + if(token) { + const decodedToken = jwt_decode<any>(token); + const userId = decodedToken.userId; + return this.http.get<User>(`${this.apiUrl}/user/${userId}`); + } else { + this.router.navigate(['signin']); + } + } + }