Merge branch 'refactor_user_updating' into dev

21 files changed, 276 insertions, 35 deletions

diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts
index df676da..9ce8896 100644
--- a/src/DevHive.Angular/src/app/app-constants.module.ts
+++ b/src/DevHive.Angular/src/app/app-constants.module.ts
@@ -5,4 +5,6 @@ export class AppConstants {
   public static API_USER_REGISTER_URL = AppConstants.API_USER_URL + '/register';
 
   public static FETCH_TIMEOUT = 500;
+
+  public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png';
 }
diff --git a/src/DevHive.Angular/src/app/app-routing.module.ts b/src/DevHive.Angular/src/app/app-routing.module.ts
index 7817dcb..c511fe2 100644
--- a/src/DevHive.Angular/src/app/app-routing.module.ts
+++ b/src/DevHive.Angular/src/app/app-routing.module.ts
@@ -5,13 +5,15 @@ import { LoginComponent } from './components/login/login.component';
 import { RegisterComponent } from './components/register/register.component';
 import { ProfileComponent } from './components/profile/profile.component';
 import {ProfileSettingsComponent} from './components/profile-settings/profile-settings.component';
+import {ErrorComponent} from './components/error/error.component';
 
 const routes: Routes = [
   { path: '', component: FeedComponent },
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent },
   { path: 'profile/:username', component: ProfileComponent },
-  { path: 'profile/:username/settings', component: ProfileSettingsComponent }
+  { path: 'profile/:username/settings', component: ProfileSettingsComponent },
+  { path: '**', component: ErrorComponent }
 ];
 
 @NgModule({
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index 7158941..8591724 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -14,6 +14,8 @@ import { FeedComponent } from './components/feed/feed.component';
 import { PostComponent } from './components/post/post.component';
 import { ProfileComponent } from './components/profile/profile.component';
 import { ProfileSettingsComponent } from './components/profile-settings/profile-settings.component';
+import { ErrorComponent } from './components/error/error.component';
+import { LoadingComponent } from './components/loading/loading.component';
 
 @NgModule({
   declarations: [
@@ -23,7 +25,9 @@ import { ProfileSettingsComponent } from './components/profile-settings/profile-
     FeedComponent,
     PostComponent,
     ProfileComponent,
-    ProfileSettingsComponent
+    ProfileSettingsComponent,
+    ErrorComponent,
+    LoadingComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/DevHive.Angular/src/app/components/error/error.component.css b/src/DevHive.Angular/src/app/components/error/error.component.css
new file mode 100644
index 0000000..ef6231d
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/error/error.component.css
@@ -0,0 +1,23 @@
+#content {
+  font-size: 1.3em;
+}
+
+#content hr {
+	width: 100%;
+	border: 1px solid black;
+	box-sizing: border-box;
+}
+
+#back-btns {
+  width: 100%;
+  display: flex;
+}
+
+#back-btns > * {
+  flex: 1;
+  margin-right: .2em;
+}
+
+#back-btns > *:nth-last-child(1) {
+  margin-right: 0;
+}
diff --git a/src/DevHive.Angular/src/app/components/error/error.component.html b/src/DevHive.Angular/src/app/components/error/error.component.html
new file mode 100644
index 0000000..8394810
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/error/error.component.html
@@ -0,0 +1,10 @@
+<div id="content">
+	<div class="title">
+		Page not found!
+	</div>
+	<hr>
+	<div id="back-btns">
+		<button class="submit-btn" type="submit" (click)="backToFeed()">Back to feed</button>
+		<button class="submit-btn" type="submit" (click)="backToLogin()">Back to login</button>
+	</div>
+</div>
diff --git a/src/DevHive.Angular/src/app/components/error/error.component.ts b/src/DevHive.Angular/src/app/components/error/error.component.ts
new file mode 100644
index 0000000..7069dc0
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/error/error.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-error',
+  templateUrl: './error.component.html',
+  styleUrls: ['./error.component.css']
+})
+export class ErrorComponent implements OnInit {
+
+  constructor(private _router: Router)
+  { }
+
+  ngOnInit(): void {
+  }
+
+  backToFeed(): void {
+    this._router.navigate(['/']);
+  }
+
+  backToLogin(): void {
+    this._router.navigate(['/login']);
+  }
+}
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..fe3f4a1 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -65,14 +65,24 @@
 }
 
 #profile-bar-profile-pic {
-  width: 100%;
+  width: 7em;
+  height: 7em;
   box-sizing: border-box;
   padding: .5em;
 }
 
 #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 +130,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..22213bc 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -1,21 +1,22 @@
-<!-- TODO: replace with loading component -->
-<div id="content" *ngIf="!dataArrived">
-	Loading...
-</div>
+<app-loading *ngIf="!dataArrived"></app-loading>
 
 <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]="user.imageUrl" 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()">
+			<img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()">
 			<input id="top-bar-create-post" type="text" placeholder="What's on your mind?"/>
 			<a id="top-bar-open-chat" href="">
 				<img src="assets/images/feed/chat-pic.png" alt=""/>
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..aa8599d 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -33,7 +33,12 @@ export class FeedComponent implements OnInit {
       // 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);
-      setTimeout(() => { this.dataArrived = true; }, AppConstants.FETCH_TIMEOUT + 100);
+      setTimeout(() => {
+        this.dataArrived = true;
+        if (this.user.imageUrl === '') {
+          this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON;
+        }
+      }, AppConstants.FETCH_TIMEOUT + 100);
     } else {
       this._router.navigate(['/login']);
     }
@@ -42,4 +47,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/components/loading/loading.component.css b/src/DevHive.Angular/src/app/components/loading/loading.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/loading/loading.component.css
diff --git a/src/DevHive.Angular/src/app/components/loading/loading.component.html b/src/DevHive.Angular/src/app/components/loading/loading.component.html
new file mode 100644
index 0000000..8440f4e
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/loading/loading.component.html
@@ -0,0 +1,3 @@
+<div id="content">
+	Loading...
+</div>
diff --git a/src/DevHive.Angular/src/app/components/loading/loading.component.ts b/src/DevHive.Angular/src/app/components/loading/loading.component.ts
new file mode 100644
index 0000000..4dff0cd
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/loading/loading.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.css']
+})
+export class LoadingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts
index a9206f2..bde7a09 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.ts
+++ b/src/DevHive.Angular/src/app/components/login/login.component.ts
@@ -3,6 +3,7 @@ import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from
 import { Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { UserService } from 'src/app/services/user.service';
+import {AppConstants} from 'src/app/app-constants.module';
 
 @Component({
   selector: 'app-login',
@@ -28,9 +29,9 @@ export class LoginComponent implements OnInit {
     });
   }
 
-  async onSubmit(): Promise<void> {
-    this._userService.loginUser(this.loginUserFormGroup);
-    this._router.navigate(['/']);
+  onSubmit(): void {
+    setTimeout(() => { this._userService.loginUser(this.loginUserFormGroup); }, AppConstants.FETCH_TIMEOUT);
+    setTimeout(() => { this._router.navigate(['/']); }, AppConstants.FETCH_TIMEOUT + 100);
   }
 
   onRedirectRegister(): void {
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html
index 041158f..a7acb0e 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -1,7 +1,7 @@
 <div class="post">
 	<div class="content">
 		<div class="author">
-			<img class="round-image" src="assets/images/feed/profile-pic.png">
+			<img class="round-image" [src]="user.imageUrl">
 			<div class="author-info">
 				<div class="name">
 					{{ user.firstName }} {{ user.lastName }}
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts
index b4bb2f0..f615262 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.ts
+++ b/src/DevHive.Angular/src/app/components/post/post.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Guid } from 'guid-typescript';
+import {AppConstants} from 'src/app/app-constants.module';
 import { User } from 'src/models/identity/user';
 
 @Component({
@@ -20,7 +21,7 @@ export class PostComponent implements OnInit {
         'gosho_trapov',
         'Gosho',
         'Trapov',
-        'assets/images/feed/profile-pic.png'
+        AppConstants.FALLBACK_PROFILE_ICON
     );
 
     this.votesNumber = 23;
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 5303db3..442cb8b 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.html
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html
@@ -1,16 +1,14 @@
-<!-- TODO: replace with loading component -->
-<div id="content" style="justify-content: center;" *ngIf="!dataArrived">
-	Loading...
-</div>
+<app-loading *ngIf="!dataArrived"></app-loading>
 
 <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">
-		<img class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
+		<img class="round-image" [src]="user.imageUrl" alt=""/>
 		<div id="other-main-info">
 			<div id="name">
 				{{ user.firstName }} {{ user.lastName }}
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 16bb053..9eb6e91 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
@@ -23,7 +23,6 @@ export class ProfileComponent implements OnInit {
 
   ngOnInit(): void {
     const username = this._router.url.substring(9);
-    console.log(username);
 
     if (sessionStorage.getItem('UserCred')) {
       // Workaround for waiting the fetch response
@@ -37,6 +36,9 @@ export class ProfileComponent implements OnInit {
                           if (this.user.userName !== username) {
                             this.setDefaultUser();
                           } else {
+                            if (this.user.imageUrl === '') {
+                              this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON;
+                            }
                             this.loggedInUser = true;
                           }
       }, AppConstants.FETCH_TIMEOUT + 50);
@@ -57,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 8c679d7..7cf574b 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -14,7 +14,13 @@ export class UserService {
   constructor() { }
 
   getDefaultUser(): User {
-    return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', '');
+    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 {
@@ -77,4 +83,19 @@ export class UserService {
     }).then(response => response.json())
       .then(data => sessionStorage.setItem('UserCred', JSON.stringify(data)));
   }
+
+  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
+      }
+    });
+  }
 }