From 1941a5ea3d00ac3e44c05fcb2ed05fbf8e6ff749 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 5 Feb 2021 20:16:09 +0200 Subject: Added user interface for adding and removing friends --- .../app/components/profile/profile.component.css | 16 ++++-- .../app/components/profile/profile.component.html | 6 ++- .../app/components/profile/profile.component.ts | 62 ++++++++++++---------- .../src/app/services/user.service.ts | 13 ++++- 4 files changed, 62 insertions(+), 35 deletions(-) (limited to 'src') 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 @@
@{{ user.userName }}
- +
+ +
+ +
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 { + const userId = this._tokenService.getUserIdFromSessionStorageToken(); + const token = this._tokenService.getTokenFromSessionStorage(); + + return this.putBareUserRequest(userId, token, user, password); + } + deleteUserFromSessionStorageRequest(): Observable { 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 { + putBareUserRequest(userId: Guid, authToken: string, user: User, password: string): Observable { + 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 { -- cgit v1.2.3