Added user interface for adding and removing friends

4 files changed, 62 insertions, 35 deletions

diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css
index 7a825c6..ebcd406 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.css
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css
@@ -13,6 +13,10 @@ hr {
   border: 1px solid black;
 }
 
+form {
+  width: 100%;
+}
+
 /* Navigation bar (for loggedin user) */
 
 #navigation {
@@ -27,7 +31,7 @@ hr {
   font-size: inherit;
 }
 
-#navigation > .submit-btn:nth-of-type(1) {
+#navigation > .submit-btn:first-child {
   margin-left: 0;
 }
 
@@ -64,11 +68,15 @@ hr {
   margin-bottom: auto;
 }
 
-#add-friend {
+#add-friend, #loggedin-password {
   flex: 0 !important;
   margin-top: .4em;
-  max-width: 9em;
-  font-size: .7em !important;
+  max-width: 8em;
+  font-size: .6em !important;
+}
+
+#loggedin-password {
+  max-width: 100%;
 }
 
 /* Languages and technologies */
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 3420f86..0e5f633 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.html
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html
@@ -18,7 +18,11 @@
 				<div id="username">
 					@{{ user.userName }}
 				</div>
-				<button id="add-friend" class="submit-btn" *ngIf="!isTheLoggedInUser && isUserLoggedIn" (click)="modifyFriend()">{{ friendOfUser ? 'Unfriend' : 'Add friend' }}</button>
+				<form [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
+					<button id="add-friend" type="submit" class="submit-btn">{{ friendOfUser ? 'Unfriend' : 'Add friend' }}</button>
+					<br>
+					<input id="loggedin-password" type="password" formControlName="password" class="input-field" *ngIf="updatingFriendship" placeholder="Type in password to confirm">
+				</form>
 			</div>
 		</div>
 		<div class="secondary-info 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 a60250c..bbf8585 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
@@ -12,6 +12,7 @@ import { FeedService } from 'src/app/services/feed.service';
 import { TokenService } from 'src/app/services/token.service';
 import { Title } from '@angular/platform-browser';
 import { Friend } from 'src/models/identity/friend';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-profile',
@@ -28,10 +29,12 @@ export class ProfileComponent implements OnInit {
   public isAdminUser = false;
   public dataArrived = false;
   public friendOfUser = false;
+  public updatingFriendship = false;
   public user: User;
   public userPosts: Post[];
+  public updateFrienship: FormGroup;
 
-  constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location, private _tokenService: TokenService) {
+  constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location, private _tokenService: TokenService) {
     this._titleService.setTitle(this._title);
   }
 
@@ -50,6 +53,10 @@ export class ProfileComponent implements OnInit {
     this.user = this._userService.getDefaultUser();
     this.userPosts = [];
 
+    this.updateFrienship = this._fb.group({
+      password: new FormControl('')
+    });
+
     this._userService.getUserByUsernameRequest(this._urlUsername).subscribe(
       (res: object) => {
         Object.assign(this.user, res);
@@ -151,35 +158,34 @@ export class ProfileComponent implements OnInit {
   }
 
   modifyFriend(): void {
-    this.dataArrived = false;
-    if (this.friendOfUser) {
-      this.removeFriend();
-    }
-    else {
-      this.addFriend();
-    }
-  }
+    if (this.updatingFriendship) {
+      this.dataArrived = false;
 
-  removeFriend(): void {
-    this._userService.removeFriendFromUserFromSessionStorageRequest(this._urlUsername).subscribe(
-      (result: object) => {
-        this.reloadPage();
-      },
-      (err: HttpErrorResponse) => {
-        this._router.navigate(['/']);
-      }
-    );
-  }
+      this._userService.getUserFromSessionStorageRequest().subscribe(
+        (result: object) => {
+          const loggedInUser: User = result as User;
 
-  addFriend(): void {
-    this._userService.addFriendToUserFromSessionStorageRequest(this._urlUsername).subscribe(
-      (result: object) => {
-        this.reloadPage();
-      },
-      (err: HttpErrorResponse) => {
-        this._router.navigate(['/']);
-      }
-    );
+          if (this.friendOfUser) {
+            loggedInUser.friends = loggedInUser.friends.filter(x => x.userName !== this.user.userName);
+          }
+          else {
+            const newFriend = new Friend();
+            newFriend.userName = this.user.userName;
+            loggedInUser.friends.push(newFriend);
+          }
+
+          this._userService.putBareUserFromSessionStorageRequest(loggedInUser, this.updateFrienship.get('password')?.value).subscribe(
+            (resultUpdate: object) => {
+              this.reloadPage();
+            },
+            (err: HttpErrorResponse) => {
+              this._router.navigate(['/']);
+            }
+          );
+        }
+      );
+    }
+    this.updatingFriendship = !this.updatingFriendship;
   }
 
   onScroll(event: any): void {
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
index 85c5612..31862c4 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -50,6 +50,13 @@ export class UserService {
     return this.putProfilePictureRequest(userId, token, newPicture);
   }
 
+  putBareUserFromSessionStorageRequest(user: User, password: string): Observable<object> {
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.putBareUserRequest(userId, token, user, password);
+  }
+
   deleteUserFromSessionStorageRequest(): Observable<object> {
     const userId = this._tokenService.getUserIdFromSessionStorageToken();
     const token = this._tokenService.getTokenFromSessionStorage();
@@ -131,12 +138,14 @@ export class UserService {
     return this._http.put(AppConstants.API_USER_URL, body, options);
   }
 
-  putBareUserRequest(userId: Guid, authToken: string, user: User): Observable<object> {
+  putBareUserRequest(userId: Guid, authToken: string, user: User, password: string): Observable<object> {
+    const body: object = user;
+    Object.assign(body, { password: password });
     const options = {
       params: new HttpParams().set('Id', userId.toString()),
       headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
     };
-    return this._http.put(AppConstants.API_USER_URL, user, options);
+    return this._http.put(AppConstants.API_USER_URL, body, options);
   }
 
   putProfilePictureRequest(userId: Guid, authToken: string, newPicture: File): Observable<object> {