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