Added settings and logout buttons to the feed page (user sidebar)

4 files changed, 36 insertions, 10 deletions

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 aa3c392..c54315f 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -72,7 +72,16 @@
 
 #profile-bar-name {
   text-align: center;
-  margin-bottom: .5em;
+}
+
+#profile-bar-username {
+  margin: .5em 0;
+}
+
+#profile-bar > #profile-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 /* Top bar */
@@ -120,7 +129,7 @@
 
 /* Elements, that act as buttons */
 
-#profile-bar:hover,
+#profile-bar > #profile-info:hover,
 #top-bar-profile-pic:hover {
   cursor: pointer;
 }
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 5d7c86a..a12aab6 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -4,16 +4,20 @@
 </div>
 
 <div id="feed-page" *ngIf="dataArrived">
-	<nav id="profile-bar" (click)="goToProfile()">
-		<img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
-		<div id="profile-bar-name">
-			{{ user.firstName }} {{ user.lastName }}
-		</div>
-		<div id="profile-bar-username">
-			@{{ user.userName }}
+	<nav id="profile-bar">
+		<div id="profile-info" (click)="goToProfile()">
+			<img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
+			<div id="profile-bar-name">
+				{{ user.firstName }} {{ user.lastName }}
+			</div>
+			<div id="profile-bar-username">
+				@{{ user.userName }}
+			</div>
 		</div>
+		<button class="submit-btn" (click)="goToSettings()">Settings</button>
+		<button class="submit-btn" (click)="logout()">Logout</button>
 	</nav>
-	<div id="feed-content">
+		<div id="feed-content">
 		<nav id="top-bar">
 			<img id="top-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt="" (click)="goToProfile()">
 			<input id="top-bar-create-post" type="text" placeholder="What's on your mind?"/>
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 7d37c9a..b8fd5e4 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -42,4 +42,13 @@ export class FeedComponent implements OnInit {
   goToProfile(): void {
     this._router.navigate(['/profile/' + this.user.userName]);
   }
+
+  goToSettings(): void {
+    this._router.navigate(['/profile/' + this.user.userName + '/settings']);
+  }
+
+  logout(): void {
+    this._userService.logoutUserFromSessionStorage();
+    this._router.navigate(['/login']);
+  }
 }
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
index 8c679d7..36ac7cb 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -77,4 +77,8 @@ export class UserService {
     }).then(response => response.json())
       .then(data => sessionStorage.setItem('UserCred', JSON.stringify(data)));
   }
+
+  logoutUserFromSessionStorage(): void {
+    sessionStorage.removeItem('UserCred');
+  }
 }