added profile section in sidenav and changed auth

src/app/app.component.html

@@ -29,6 +29,12 @@
 
   <mat-sidenav-container id="content">
     <mat-sidenav #appDrawer mode="over" opened="false">
+      <mat-nav-list class="nav-profile-list">
+        <mat-list-item class="nav-profile-list-item">
+            <sidenav-profile>
+          </sidenav-profile>
+        </mat-list-item>
+      </mat-nav-list>
       <mat-nav-list>
         <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
       </mat-nav-list>

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;
+}

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,

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;
     }

src/app/components/sidenav-profile/sidenav-profile.component.html

@@ -0,0 +1,3 @@
+<img class="navbar-photo" src={{profileURL}}>
+<p>{{name}}</p>
+<p>{{email}}</p>

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;
+}

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;
+    });
+  }
+}

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;
+        }
+    }
+    
 }

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<User>;
+  public currentUser: Observable<User>;
   public loggedIn: BehaviorSubject<boolean>;
   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<User>(
+      JSON.parse(localStorage.getItem(this.CURRENT_USER))
+    );
+    this.currentUser = this.currentUserSubject.asObservable();
+
     this.loggedIn = new BehaviorSubject<boolean>(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<any>(`${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);
   }
 }