Implemented profile picture updating in profile settings

5 files changed, 97 insertions, 5 deletions

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 7402cc0..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
@@ -108,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/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/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()),