Merge branch 'dev' of github.com:Team-Kaleidoscope/DevHive into dev

10 files changed, 115 insertions, 18 deletions

diff --git a/src/DevHive.Angular/src/app/components/comment/comment.component.html b/src/DevHive.Angular/src/app/components/comment/comment.component.html
index 8908b25..718e25c 100644
--- a/src/DevHive.Angular/src/app/components/comment/comment.component.html
+++ b/src/DevHive.Angular/src/app/components/comment/comment.component.html
@@ -3,7 +3,7 @@
 <div class="comment rounded-border" *ngIf="loaded">
 	<div class="content">
 		<div class="author" (click)="goToAuthorProfile()">
-			<img class="round-image" [src]="user.imageUrl">
+			<img class="round-image" [src]="user.profilePictureURL">
 			<div class="author-info">
 				<div class="name">
 					{{ user.firstName }} {{ user.lastName }}
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 6d3da5f..c584055 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -3,7 +3,7 @@
 <div id="feed-page" *ngIf="dataArrived">
 	<nav id="profile-bar" class="round-image rounded-border">
 		<div id="profile-info" (click)="goToProfile()">
-			<img id="profile-bar-profile-pic" [src]="user.imageUrl" alt=""/>
+			<img id="profile-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt=""/>
 			<div id="profile-bar-name">
 				{{ user.firstName }} {{ user.lastName }}
 			</div>
@@ -17,7 +17,7 @@
 	<div id="feed-content">
 		<nav id="top-bar">
 			<div id="main-content">
-				<img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()">
+				<img id="top-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt="" (click)="goToProfile()">
 				<form id="create-post-form" class="rounded-border" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
 					<div id="form-inputs">
 						<input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/>
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
index 3991870..ef046e1 100644
--- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
@@ -45,7 +45,12 @@ export class PostPageComponent implements OnInit {
         if (this.loggedIn) {
           this.editable = this.post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken();
         }
-        this.loadFiles();
+        if (this.post.fileURLs.length > 0) {
+          this.loadFiles();
+        }
+        else {
+          this.dataArrived = true;
+        }
       },
       (err: HttpErrorResponse) => {
         this._router.navigate(['/not-found']);
@@ -103,7 +108,6 @@ export class PostPageComponent implements OnInit {
     this.files = this.files.filter(x => x.name !== fileName);
   }
 
-
   editPost(): void {
     if (this._tokenService.getTokenFromSessionStorage() === '') {
       this.toLogin();
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 7347056..bc0d84a 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -3,7 +3,7 @@
 <div class="post rounded-border" *ngIf="loaded">
 	<div class="content">
 		<div class="author" (click)="goToAuthorProfile()">
-			<img class="round-image" [src]="user.imageUrl">
+			<img class="round-image" [src]="user.profilePictureURL">
 			<div class="author-info">
 				<div class="name">
 					{{ user.firstName }} {{ user.lastName }}
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 716ffc9..27d1584 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
@@ -37,6 +37,41 @@ hr {
 
 /* Form */
 
+#update-profile-picture {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 .5em;
+}
+
+#profile-picture {
+  width: 5em;
+  height: 5em;
+}
+
+#submit-file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1em;
+}
+
+#upload-file:hover {
+  cursor: inherit;
+}
+
+#upload-file > input:hover {
+  cursor: pointer;
+}
+
+#upload-file > input::-webkit-file-upload-button {
+  visibility: hidden;
+}
+
+#update-user {
+  margin-top: 1.1em;
+}
+
 .input-field {
   border-color: var(--focus-color) !important;
   caret-color: var(--focus-color);
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 f8493ab..d87c35c 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
@@ -7,7 +7,17 @@
 	</nav>
 	<hr>
 	<div class="scroll-standalone">
-		<form [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
+		<form id="update-profile-picture" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
+			<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
+			<div id="submit-file">
+				<div id="upload-file" class="submit-btn">
+					<input type="file" formControlName="fileUpload" (change)="onFileUpload($event)">
+				</div>
+				<button class="submit-btn" type="submit">Update profile picture</button>
+			</div>
+		</form>
+		<hr>
+		<form id="update-user" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
 			<div class="input-selection">
 				<input type="text" class="input-field" formControlName="firstName" required>
 				<label class="input-field-label">First Name</label>
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 4a401ef..463b980 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
@@ -29,6 +29,8 @@ export class ProfileSettingsComponent implements OnInit {
   public showLanguages = false;
   public showTechnologies = false;
   public updateUserFormGroup: FormGroup;
+  public updateProfilePictureFormGroup: FormGroup;
+  public newProfilePicture: File;
   public user: User;
   public availableLanguages: Language[];
   public availableTechnologies: Technology[];
@@ -44,6 +46,7 @@ export class ProfileSettingsComponent implements OnInit {
     this.user = this._userService.getDefaultUser();
     this.availableLanguages = [];
     this.availableTechnologies = [];
+    this.newProfilePicture = new File([], '');
 
     this._userService.getUserByUsernameRequest(this._urlUsername).subscribe(
       (res: object) => {
@@ -76,7 +79,7 @@ export class ProfileSettingsComponent implements OnInit {
           Object.assign(userFromToken, tokenRes);
 
           if (userFromToken.userName === this._urlUsername) {
-            this.initForm();
+            this.initForms();
             this.dataArrived = true;
           }
           else {
@@ -93,7 +96,7 @@ export class ProfileSettingsComponent implements OnInit {
     }
   }
 
-  private initForm(): void {
+  private initForms(): void {
     this.updateUserFormGroup = this._fb.group({
       firstName: new FormControl(this.user.firstName, [
         Validators.required,
@@ -137,6 +140,10 @@ export class ProfileSettingsComponent implements OnInit {
       this.updateUserFormGroup.patchValue({ technologyInput : value });
     });
 
+    this.updateProfilePictureFormGroup = this._fb.group({
+      fileUpload: new FormControl('')
+    });
+
     this.updateUserFormGroup.valueChanges.subscribe(() => {
       this._successBar?.hideMsg();
       this._errorBar?.hideError();
@@ -161,6 +168,23 @@ export class ProfileSettingsComponent implements OnInit {
     });
   }
 
+  onFileUpload(event: any): void {
+    this.newProfilePicture = event.target.files[0];
+  }
+
+  updateProfilePicture(): void {
+    if (this.newProfilePicture.size === 0) {
+      return;
+    }
+
+    this._userService.putProfilePictureFromSessionStorageRequest(this.newProfilePicture).subscribe(
+      (result: object) => {
+        this.reloadPage();
+      }
+    );
+    this.dataArrived = false;
+  }
+
   onSubmit(): void {
     this._successBar.hideMsg();
     this._errorBar.hideError();
@@ -169,7 +193,7 @@ export class ProfileSettingsComponent implements OnInit {
     this.patchTechnologiesControl();
 
     this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.user.roles, this.user.friends).subscribe(
-        res => {
+        (result: object) => {
           this._successBar.showMsg('Profile updated successfully!');
         },
         (err: HttpErrorResponse) => {
@@ -261,9 +285,16 @@ export class ProfileSettingsComponent implements OnInit {
           this._errorBar.showError(err);
         }
       );
+      this.dataArrived = false;
     }
     else {
       this.deleteAccountConfirm = true;
     }
   }
+
+  private reloadPage(): void {
+    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this._router.onSameUrlNavigation = 'reload';
+    this._router.navigate([this._router.url]);
+  }
 }
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 e2dacd1..03a36bf 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.html
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html
@@ -10,7 +10,7 @@
 	<hr>
 	<div class="scroll-standalone" (scroll)="onScroll($event)">
 		<div id="main-info" class="rounded-border">
-			<img class="round-image" [src]="user.imageUrl" alt=""/>
+			<img class="round-image" [src]="user.profilePictureURL" alt=""/>
 			<div id="other-main-info">
 				<div id="name">
 					{{ user.firstName }} {{ user.lastName }}
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
index 3bfc857..422d7db 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -36,6 +36,13 @@ export class UserService {
     return this.putUserRequest(userId, token, updateUserFormGroup, userRoles, userFriends);
   }
 
+  putProfilePictureFromSessionStorageRequest(newPicture: File): Observable<object> {
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.putProfilePictureRequest(userId, token, newPicture);
+  }
+
   deleteUserFromSessionStorageRequest(): Observable<object> {
     const userId = this._tokenService.getUserIdFromSessionStorageToken();
     const token = this._tokenService.getTokenFromSessionStorage();
@@ -98,6 +105,16 @@ export class UserService {
     return this._http.put(AppConstants.API_USER_URL, body, options);
   }
 
+  putProfilePictureRequest(userId: Guid, authToken: string, newPicture: File): Observable<object> {
+    const form = new FormData();
+    form.append('picture', newPicture);
+    const options = {
+      params: new HttpParams().set('UserId', userId.toString()),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this._http.put(AppConstants.API_USER_URL + '/ProfilePicture', form, options);
+  }
+
   deleteUserRequest(userId: Guid, authToken: string): Observable<object> {
     const options = {
       params: new HttpParams().set('Id', userId.toString()),
diff --git a/src/DevHive.Angular/src/models/identity/user.ts b/src/DevHive.Angular/src/models/identity/user.ts
index 020a403..e0038e0 100644
--- a/src/DevHive.Angular/src/models/identity/user.ts
+++ b/src/DevHive.Angular/src/models/identity/user.ts
@@ -10,19 +10,19 @@ export class User {
   private _firstName : string;
   private _userName : string;
   private _email: string;
-  private _imageUrl : string;
+  private _profilePictureURL : string;
   private _languages: Language[];
   private _technologies: Technology[];
   private _roles: Role[];
   private _friends: Friend[];
 
-  constructor(id: Guid, userName: string, firstName: string, lastName: string, email: string, imageUrl: string, languages: Language[], technologies: Technology[], roles: Role[], friends: Friend[]) {
+  constructor(id: Guid, userName: string, firstName: string, lastName: string, email: string, profilePictureURL: string, languages: Language[], technologies: Technology[], roles: Role[], friends: Friend[]) {
     this.id = id;
     this.userName = userName;
     this.firstName = firstName;
     this.lastName = lastName;
     this.email = email;
-    this.imageUrl = imageUrl;
+    this._profilePictureURL = profilePictureURL;
     this.languages = languages;
     this.technologies = technologies;
     this.roles = roles;
@@ -63,11 +63,11 @@ export class User {
     this._email = v;
   }
 
-  public get imageUrl(): string {
-    return this._imageUrl;
+  public get profilePictureURL(): string {
+    return this._profilePictureURL;
   }
-  public set imageUrl(v: string) {
-    this._imageUrl = v;
+  public set profilePictureURL(v: string) {
+    this._profilePictureURL = v;
   }
 
   public get languages(): Language[] {