Feed now saves the user data and uses it to show the names and username of the user

7 files changed, 54 insertions, 5 deletions

diff --git a/src/DevHive.Angular/package-lock.json b/src/DevHive.Angular/package-lock.json
index 10b35ce..40595d4 100644
--- a/src/DevHive.Angular/package-lock.json
+++ b/src/DevHive.Angular/package-lock.json
@@ -1607,6 +1607,14 @@
       "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
       "dev": true
     },
+    "@types/jwt-decode": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-3.1.0.tgz",
+      "integrity": "sha512-tthwik7TKkou3mVnBnvVuHnHElbjtdbM63pdBCbZTirCt3WAdM73Y79mOri7+ljsS99ZVwUFZHLMxJuJnv/z1w==",
+      "requires": {
+        "jwt-decode": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -6613,6 +6621,11 @@
         "set-immediate-shim": "~1.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": "5.1.1",
       "resolved": "https://registry.npmjs.org/karma/-/karma-5.1.1.tgz",
diff --git a/src/DevHive.Angular/package.json b/src/DevHive.Angular/package.json
index 833c257..1f09ab1 100644
--- a/src/DevHive.Angular/package.json
+++ b/src/DevHive.Angular/package.json
@@ -21,7 +21,9 @@
     "@angular/platform-browser": "^11.0.7",
     "@angular/platform-browser-dynamic": "^11.0.7",
     "@angular/router": "^11.0.7",
+    "@types/jwt-decode": "^3.1.0",
     "guid-typescript": "^1.0.9",
+    "jwt-decode": "^3.1.2",
     "normalize.css": "^8.0.1",
     "reset-css": "^5.0.1",
     "rxjs": "~6.6.0",
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css
index fcfc030..07667c2 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -54,6 +54,11 @@
   padding: .5em;
 }
 
+#profile-bar-name {
+  text-align: center;
+  margin-bottom: .5em;
+}
+
 /* Top bar */
 
 #top-bar {
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html
index de78e59..ffbad14 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -2,10 +2,10 @@
 	<nav id="profile-bar" class="rounded-border">
 		<img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
 		<div id="profile-bar-name">
-			Static
+			{{ user.firstName }} {{ user.lastName }}
 		</div>
 		<div id="profile-bar-username">
-			@static
+			@{{ user.userName }}
 		</div>
 	</nav>
 	<div id="feed-content">
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
index fcf0af4..2889e7f 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -1,7 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
+import { Guid } from 'guid-typescript';
+import jwt_decode from 'jwt-decode';
 import { FeedService } from 'src/app/services/feed.service';
+import { User } from 'src/models/identity/user';
+import { IJWTPayload } from 'src/interfaces/jwt-payload';
+import { IUserCredentials } from 'src/interfaces/user-credentials';
 import { PostComponent } from '../post/post.component';
 
 @Component({
@@ -11,13 +16,17 @@ import { PostComponent } from '../post/post.component';
 })
 export class FeedComponent implements OnInit {
   private _title = 'Feed';
+  public user: User;
   public posts: PostComponent[];
 
   constructor(private titleService: Title, private service: FeedService, private router: Router) {
     this.titleService.setTitle(this._title);
-   }
+  }
 
   ngOnInit(): void {
+    // Default values, so it doesn't give an error while initializing
+    this.user = new User(Guid.createEmpty(), '', '', '', '');
+
     this.posts = [
       new PostComponent(),
       new PostComponent(),
@@ -25,10 +34,22 @@ export class FeedComponent implements OnInit {
       new PostComponent(),
     ];
 
-    if (sessionStorage.getItem('UserCred')) { /* TODO: improve token validation */
-      /* Make use of the JWT, will be implemented later */
+    if (sessionStorage.getItem('UserCred')) {
+      const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? '');
+      const userCred = jwt_decode<IUserCredentials>(jwt.token);
+      this.saveUserData(userCred.ID, jwt.token);
     } else {
       this.router.navigate(['/login']);
     }
   }
+
+  saveUserData(userId: Guid, authToken: string): void {
+    fetch(`http://localhost:5000/api/User?Id=${userId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + authToken
+      }
+    }).then(response => response.json()).then(data => Object.assign(this.user, data));
+  }
 }
diff --git a/src/DevHive.Angular/src/interfaces/jwt-payload.ts b/src/DevHive.Angular/src/interfaces/jwt-payload.ts
new file mode 100644
index 0000000..a2d0f0d
--- /dev/null
+++ b/src/DevHive.Angular/src/interfaces/jwt-payload.ts
@@ -0,0 +1,3 @@
+export interface IJWTPayload {
+  token: string;
+}
diff --git a/src/DevHive.Angular/src/interfaces/user-credentials.ts b/src/DevHive.Angular/src/interfaces/user-credentials.ts
new file mode 100644
index 0000000..d91f715
--- /dev/null
+++ b/src/DevHive.Angular/src/interfaces/user-credentials.ts
@@ -0,0 +1,5 @@
+import { Guid } from 'guid-typescript';
+
+export interface IUserCredentials {
+  ID: Guid;
+}