From 58a3f76a3c2d3cbfdf59a362431397020858027b Mon Sep 17 00:00:00 2001 From: FlayInAHook Date: Wed, 18 Nov 2020 21:54:21 +0100 Subject: [PATCH] added profile section in sidenav and changed auth --- src/app/app.component.html | 6 ++ src/app/app.component.scss | 13 +++++ src/app/app.module.ts | 3 + .../menu-list-item.component.ts | 3 +- .../sidenav-profile.component.html | 3 + .../sidenav-profile.component.scss | 8 +++ .../sidenav-profile.component.ts | 23 ++++++++ src/app/models/user.ts | 14 ++++- src/app/services/auth.service.ts | 56 ++++++++++++------- 9 files changed, 106 insertions(+), 23 deletions(-) create mode 100644 src/app/components/sidenav-profile/sidenav-profile.component.html create mode 100644 src/app/components/sidenav-profile/sidenav-profile.component.scss create mode 100644 src/app/components/sidenav-profile/sidenav-profile.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 32018e0..acbeb01 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -29,6 +29,12 @@ + + + + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index f891587..5355149 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,3 +1,5 @@ +@import '../theme'; + #page-wrapper { display: flex; flex-direction: column; @@ -15,3 +17,14 @@ } } } + + +.nav-profile-list { + padding-top:0px +} + +mat-nav-list .nav-profile-list-item { + height:200px; + background: mat-color($light-primary, 300);; + //color:white; +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9231977..1937b15 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -41,13 +41,16 @@ import { LendingStationsComponent } from './pages/tables/lending-stations/lendin import { TableOverviewComponent } from './pages/table-overview/table-overview.component'; import { CellComponent } from './components/tableComponents/cell/cell.component'; import { MenuListItemComponent } from './components/menu-list-item/menu-list-item.component'; +import {SidenavProfileComponent} from './components/sidenav-profile/sidenav-profile.component'; import { NavService }from './components/menu-list-item/nav.service'; import { TokenInterceptor } from './helper/token.interceptor' + @NgModule({ declarations: [ AppComponent, MenuListItemComponent, + SidenavProfileComponent, LoginComponent, BikesComponent, ParticipantsComponent, diff --git a/src/app/components/menu-list-item/menu-list-item.component.ts b/src/app/components/menu-list-item/menu-list-item.component.ts index 98b4704..8974e85 100644 --- a/src/app/components/menu-list-item/menu-list-item.component.ts +++ b/src/app/components/menu-list-item/menu-list-item.component.ts @@ -25,7 +25,8 @@ export class MenuListItemComponent implements OnInit { @Input() depth: number; constructor(public navService: NavService, - public router: Router) { + public router: Router, + ) { if (this.depth === undefined) { this.depth = 0; } diff --git a/src/app/components/sidenav-profile/sidenav-profile.component.html b/src/app/components/sidenav-profile/sidenav-profile.component.html new file mode 100644 index 0000000..8e8db75 --- /dev/null +++ b/src/app/components/sidenav-profile/sidenav-profile.component.html @@ -0,0 +1,3 @@ + +

{{name}}

+

{{email}}

\ No newline at end of file diff --git a/src/app/components/sidenav-profile/sidenav-profile.component.scss b/src/app/components/sidenav-profile/sidenav-profile.component.scss new file mode 100644 index 0000000..59bf5b8 --- /dev/null +++ b/src/app/components/sidenav-profile/sidenav-profile.component.scss @@ -0,0 +1,8 @@ +@import '../../../theme'; + +.navbar-photo { + width:100px; + height:100px; + border-radius:50%; + margin-top:10px; +} \ No newline at end of file diff --git a/src/app/components/sidenav-profile/sidenav-profile.component.ts b/src/app/components/sidenav-profile/sidenav-profile.component.ts new file mode 100644 index 0000000..d4d6a7f --- /dev/null +++ b/src/app/components/sidenav-profile/sidenav-profile.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { AuthService } from '../../services/auth.service'; + +@Component({ + selector: 'sidenav-profile', + templateUrl: './sidenav-profile.component.html', + styleUrls: ['./sidenav-profile.component.scss'] +}) +export class SidenavProfileComponent implements OnInit { + name: String; + email: String; + profileURL: String; + + constructor( private auth: AuthService) { } + + ngOnInit() { + this.auth.currentUser.subscribe(user => { + this.name = user.user.name; + this.email = user.user.email; + this.profileURL = user.user.attributes.profile_url; + }); + } +} \ No newline at end of file diff --git a/src/app/models/user.ts b/src/app/models/user.ts index 16091b4..c092e1a 100644 --- a/src/app/models/user.ts +++ b/src/app/models/user.ts @@ -1,5 +1,13 @@ export class User { - email: string; - requestToken: string; - refreshToken: string; + request_token: string; + refresh_token: string; + user: { + id: number; + name: string; + email: string; + attributes : { + profile_url: string; + } + } + } \ No newline at end of file diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts index 1d498af..457af4c 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/auth.service.ts @@ -2,20 +2,38 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { catchError, finalize, map, tap } from 'rxjs/operators'; import { environment } from '../../environments/environment'; -import { BehaviorSubject, of } from 'rxjs'; +import { Observable, BehaviorSubject, of } from 'rxjs'; +import { User } from "../models/user"; @Injectable({ providedIn: 'root', }) export class AuthService { + private currentUserSubject: BehaviorSubject; + public currentUser: Observable; public loggedIn: BehaviorSubject; private readonly REQUEST_TOKEN = 'requestToken'; private readonly REFRESH_TOKEN = 'refreshToken'; - private readonly EMAIL = 'email'; + private readonly CURRENT_USER = 'currentUser'; constructor(private http: HttpClient) { + this.currentUserSubject = new BehaviorSubject( + JSON.parse(localStorage.getItem(this.CURRENT_USER)) + ); + this.currentUser = this.currentUserSubject.asObservable(); + this.loggedIn = new BehaviorSubject(false); this.checkIfUserIsLoggedIn(); + + + } + + public get getCurrentUserValue(): User { + var value = this.currentUserSubject.value; + if (value === null){ + value = new User(); + } + return value; } private checkIfUserIsLoggedIn(): void { @@ -23,11 +41,11 @@ export class AuthService { } public getRequestToken(): string { - return localStorage.getItem(this.REQUEST_TOKEN); + return this.getCurrentUserValue.request_token; } public getRefreshToken(): string { - return localStorage.getItem(this.REFRESH_TOKEN); + return this.getCurrentUserValue.refresh_token; } login(email: string, password: string) { @@ -36,9 +54,11 @@ export class AuthService { .pipe( map((response) => { // store request and refresh token in local storage to keep user logged in between page refreshes - this.storeTokens(response); + if (response && response.request_token){ + this.storeUser(response); + } this.checkIfUserIsLoggedIn(); - this.storeEmail(email); + //this.storeTokens(response); }) ); } @@ -57,14 +77,6 @@ export class AuthService { ); } - storeEmail(email: string) { - localStorage.setItem(this.EMAIL, email); - } - - getEmail() { - localStorage.getItem(this.EMAIL); - } - refreshToken() { return this.http .post(`${environment.authUrl}/new-token`, { @@ -90,13 +102,19 @@ export class AuthService { } private storeTokens(tokens: any) { - localStorage.setItem(this.REQUEST_TOKEN, tokens.request_token); - localStorage.setItem(this.REFRESH_TOKEN, tokens.refresh_token); + this.storeUser({...this.getCurrentUserValue, ...tokens}); //Merging objects. Properties in obj2 will overwrite those in obj1 + //localStorage.setItem(this.REQUEST_TOKEN, tokens.request_token); + //localStorage.setItem(this.REFRESH_TOKEN, tokens.refresh_token); + } + + private storeUser(usr: User){ + localStorage.setItem(this.CURRENT_USER, JSON.stringify(usr)); + this.currentUserSubject.next(usr); } private removeTokens() { - localStorage.removeItem(this.REQUEST_TOKEN); - localStorage.removeItem(this.REFRESH_TOKEN); - localStorage.removeItem(this.EMAIL) + //localStorage.removeItem(this.REQUEST_TOKEN); + //localStorage.removeItem(this.REFRESH_TOKEN); + localStorage.removeItem(this.CURRENT_USER); } }