Added delete account functionality to settings page, added logout button when in your profile

6 files changed, 132 insertions, 4 deletions

diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
index e69de29..becae6d 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
@@ -0,0 +1,39 @@
+* {
+  box-sizing: border-box;
+}
+
+#content {
+  max-width: 22em;
+  justify-content: start;
+}
+
+hr {
+  width: calc(100% - 1em);
+  color: black;
+  border: 1px solid black;
+}
+
+/* Navigation bar (for loggedin user) */
+
+#navigation {
+  display: flex;
+  width: 100%;
+}
+
+#navigation > .submit-btn {
+  flex: 1;
+  margin-top: 0;
+  margin-left: .5em;
+  font-size: inherit;
+}
+
+#navigation > .submit-btn:nth-of-type(1) {
+  margin-left: 0;
+}
+
+/* Buttons */
+
+#delete-account:hover {
+  color: indianred;
+  border-color: indianred !important;
+}
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
index 0cc443e..24c3eef 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
@@ -1 +1,10 @@
-<p>profile-settings works!</p>
+<app-loading *ngIf="!dataArrived"></app-loading>
+
+<div id="content" *ngIf="dataArrived">
+	<nav id="navigation">
+		<button class="submit-btn" (click)="goBack()">ᐊ Back</button>
+		<button class="submit-btn" (click)="logout()">Logout</button>
+	</nav>
+	<hr>
+	<button id="delete-account" class="submit-btn" (click)="deleteAccount()">Delete account</button>
+</div>
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
index 9226aae..3d7305f 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.ts
@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
+import {AppConstants} from 'src/app/app-constants.module';
+import {UserService} from 'src/app/services/user.service';
+import {User} from 'src/models/identity/user';
 
 @Component({
   selector: 'app-profile-settings',
@@ -6,10 +10,59 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./profile-settings.component.css']
 })
 export class ProfileSettingsComponent implements OnInit {
+  public dataArrived = false;
+  public user: User;
 
-  constructor() { }
+  constructor(private _router: Router, private _userService: UserService)
+  { }
 
   ngOnInit(): void {
+    let username = this._router.url.substring(9);
+    username = username.substring(0, username.length - 9);
+
+    if (sessionStorage.getItem('UserCred')) {
+      // Workaround for waiting the fetch response
+      // TODO: properly wait for it, before loading the page contents
+      setTimeout(() => {
+                          this.user = this._userService.fetchUserFromSessionStorage();
+      }, AppConstants.FETCH_TIMEOUT);
+
+      // After getting the user, check if we're on the profile page of the logged in user
+      setTimeout(() => {
+                          if (this.user.userName !== username) {
+                            this.goToProfile();
+                          } else if (this.user.imageUrl === '') {
+                            this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON;
+                          }
+      }, AppConstants.FETCH_TIMEOUT + 50);
+
+      setTimeout(() => {
+        this.dataArrived = true;
+      }, AppConstants.FETCH_TIMEOUT + 100);
+    }
+    else {
+      this.goToProfile();
+    }
+  }
+
+  goToProfile(): void {
+    this._router.navigate([this._router.url.substring(0, this._router.url.length - 9)]);
   }
 
+  goBack(): void {
+    this._router.navigate(['/']);
+  }
+
+  logout(): void {
+    this._userService.logoutUserFromSessionStorage();
+    this.goToProfile();
+  }
+
+  deleteAccount(): void {
+    setTimeout(() => { this._userService.deleteUserRequest(this._userService.getUserIdFromSessionStroageToken()); }, AppConstants.FETCH_TIMEOUT);
+    setTimeout(() => {
+                       this._userService.logoutUserFromSessionStorage();
+                       this._router.navigate(['/login']);
+    }, AppConstants.FETCH_TIMEOUT + 100);
+  }
 }
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html
index 74aa38b..442cb8b 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.html
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html
@@ -2,8 +2,9 @@
 
 <div id="content" *ngIf="dataArrived">
 	<nav id="navigation">
-		<button class="submit-btn" type="submit" (click)="goBack()">ᐊ Back</button>
-		<button class="submit-btn" type="submit" (click)="navigateToSettings()" *ngIf="loggedInUser">Settings</button>
+		<button class="submit-btn" (click)="goBack()">ᐊ Back</button>
+		<button class="submit-btn" (click)="navigateToSettings()" *ngIf="loggedInUser">Settings</button>
+		<button class="submit-btn" (click)="logout()" *ngIf="loggedInUser">Logout</button>
 	</nav>
 	<hr>
 	<div id="main-info" class="rounded-border">
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.ts b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
index 94ffe85..9eb6e91 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
@@ -59,4 +59,13 @@ export class ProfileComponent implements OnInit {
   navigateToSettings(): void {
     this._router.navigate([this._router.url + '/settings']);
   }
+
+  logout(): void {
+    this._userService.logoutUserFromSessionStorage();
+
+    // Reload the page
+    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this._router.onSameUrlNavigation = 'reload';
+    this._router.navigate([this._router.url]);
+  }
 }
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
index bfe7ed5..7cf574b 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -17,6 +17,12 @@ export class UserService {
     return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', AppConstants.FALLBACK_PROFILE_ICON);
   }
 
+  getUserIdFromSessionStroageToken(): Guid {
+    const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? '');
+    const userCred = jwt_decode<IUserCredentials>(jwt.token);
+    return userCred.ID;
+  }
+
   fetchUserFromSessionStorage(): User {
     // Get the token and userid from session storage
     const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? '');
@@ -81,4 +87,15 @@ export class UserService {
   logoutUserFromSessionStorage(): void {
     sessionStorage.removeItem('UserCred');
   }
+
+  deleteUserRequest(id: Guid): void {
+    const jwt = JSON.parse(sessionStorage.getItem('UserCred') ?? '');
+    fetch(AppConstants.API_USER_URL + '?Id=' + id, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + jwt.token
+      }
+    });
+  }
 }