From af5e743b01f20f24d0c25e786d57f557b21f3a24 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 6 Apr 2017 21:21:03 +0200 Subject: [PATCH] Client: add ability for user to change nsfw settings --- .../account-change-password.component.html | 24 +++++++ .../account-change-password.component.ts | 66 ++++++++++++++++++ .../account/account-change-password/index.ts | 1 + .../account-details.component.html | 16 +++++ .../account-details.component.ts | 68 +++++++++++++++++++ .../src/app/account/account-details/index.ts | 1 + client/src/app/account/account.component.html | 33 +++------ client/src/app/account/account.component.scss | 3 + client/src/app/account/account.component.ts | 64 ++++------------- client/src/app/account/account.module.ts | 6 +- client/src/app/core/auth/auth-user.model.ts | 2 +- client/src/app/core/auth/auth.service.ts | 33 +++++++-- client/src/app/shared/users/user.service.ts | 8 +++ 13 files changed, 242 insertions(+), 83 deletions(-) create mode 100644 client/src/app/account/account-change-password/account-change-password.component.html create mode 100644 client/src/app/account/account-change-password/account-change-password.component.ts create mode 100644 client/src/app/account/account-change-password/index.ts create mode 100644 client/src/app/account/account-details/account-details.component.html create mode 100644 client/src/app/account/account-details/account-details.component.ts create mode 100644 client/src/app/account/account-details/index.ts create mode 100644 client/src/app/account/account.component.scss diff --git a/client/src/app/account/account-change-password/account-change-password.component.html b/client/src/app/account/account-change-password/account-change-password.component.html new file mode 100644 index 000000000..92d9f900a --- /dev/null +++ b/client/src/app/account/account-change-password/account-change-password.component.html @@ -0,0 +1,24 @@ +
{{ error }}
+ +
+
+ + +
+ {{ formErrors['new-password'] }} +
+
+ +
+ + +
+ + +
diff --git a/client/src/app/account/account-change-password/account-change-password.component.ts b/client/src/app/account/account-change-password/account-change-password.component.ts new file mode 100644 index 000000000..15dc42d22 --- /dev/null +++ b/client/src/app/account/account-change-password/account-change-password.component.ts @@ -0,0 +1,66 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Router } from '@angular/router'; + +import { NotificationsService } from 'angular2-notifications'; + +import { FormReactive, UserService, USER_PASSWORD } from '../../shared'; + +@Component({ + selector: 'my-account-change-password', + templateUrl: './account-change-password.component.html' +}) + +export class AccountChangePasswordComponent extends FormReactive implements OnInit { + error: string = null; + + form: FormGroup; + formErrors = { + 'new-password': '', + 'new-confirmed-password': '' + }; + validationMessages = { + 'new-password': USER_PASSWORD.MESSAGES, + 'new-confirmed-password': USER_PASSWORD.MESSAGES + }; + + constructor( + private formBuilder: FormBuilder, + private router: Router, + private notificationsService: NotificationsService, + private userService: UserService + ) { + super(); + } + + buildForm() { + this.form = this.formBuilder.group({ + 'new-password': [ '', USER_PASSWORD.VALIDATORS ], + 'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ], + }); + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)); + } + + ngOnInit() { + this.buildForm(); + } + + changePassword() { + const newPassword = this.form.value['new-password']; + const newConfirmedPassword = this.form.value['new-confirmed-password']; + + this.error = null; + + if (newPassword !== newConfirmedPassword) { + this.error = 'The new password and the confirmed password do not correspond.'; + return; + } + + this.userService.changePassword(newPassword).subscribe( + () => this.notificationsService.success('Success', 'Password updated.'), + + err => this.error = err + ); + } +} diff --git a/client/src/app/account/account-change-password/index.ts b/client/src/app/account/account-change-password/index.ts new file mode 100644 index 000000000..72a63e48d --- /dev/null +++ b/client/src/app/account/account-change-password/index.ts @@ -0,0 +1 @@ +export * from './account-change-password.component'; diff --git a/client/src/app/account/account-details/account-details.component.html b/client/src/app/account/account-details/account-details.component.html new file mode 100644 index 000000000..24b0750d2 --- /dev/null +++ b/client/src/app/account/account-details/account-details.component.html @@ -0,0 +1,16 @@ +
{{ error }}
+ +
+
+ + +
+ {{ formErrors['displayNSFW'] }} +
+
+ + +
diff --git a/client/src/app/account/account-details/account-details.component.ts b/client/src/app/account/account-details/account-details.component.ts new file mode 100644 index 000000000..30e5b14ee --- /dev/null +++ b/client/src/app/account/account-details/account-details.component.ts @@ -0,0 +1,68 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Router } from '@angular/router'; + +import { NotificationsService } from 'angular2-notifications'; + +import { AuthService } from '../../core'; +import { + FormReactive, + User, + UserService, + USER_PASSWORD +} from '../../shared'; + +@Component({ + selector: 'my-account-details', + templateUrl: './account-details.component.html' +}) + +export class AccountDetailsComponent extends FormReactive implements OnInit { + @Input() user: User = null; + + error: string = null; + + form: FormGroup; + formErrors = {}; + validationMessages = {}; + + constructor( + private authService: AuthService, + private formBuilder: FormBuilder, + private router: Router, + private notificationsService: NotificationsService, + private userService: UserService + ) { + super(); + } + + buildForm() { + this.form = this.formBuilder.group({ + displayNSFW: [ this.user.displayNSFW ], + }); + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)); + } + + ngOnInit() { + this.buildForm(); + } + + updateDetails() { + const displayNSFW = this.form.value['displayNSFW']; + const details = { + displayNSFW + }; + + this.error = null; + this.userService.updateDetails(details).subscribe( + () => { + this.notificationsService.success('Success', 'Informations updated.'); + + this.authService.refreshUserInformations(); + }, + + err => this.error = err + ); + } +} diff --git a/client/src/app/account/account-details/index.ts b/client/src/app/account/account-details/index.ts new file mode 100644 index 000000000..28f644738 --- /dev/null +++ b/client/src/app/account/account-details/index.ts @@ -0,0 +1 @@ +export * from './account-details.component'; diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html index 2fbb5a908..6f10e79cd 100644 --- a/client/src/app/account/account.component.html +++ b/client/src/app/account/account.component.html @@ -1,26 +1,11 @@

Account

-
{{ error }}
- -
-
- - -
- {{ formErrors['new-password'] }} -
-
- -
- - -
- - -
+
+

Change password

+ +
+ +
+

Update my informations

+ +
diff --git a/client/src/app/account/account.component.scss b/client/src/app/account/account.component.scss new file mode 100644 index 000000000..e0437e792 --- /dev/null +++ b/client/src/app/account/account.component.scss @@ -0,0 +1,3 @@ +.block { + margin-top: 40px; +} diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts index 14452a73e..57b3d4ccd 100644 --- a/client/src/app/account/account.component.ts +++ b/client/src/app/account/account.component.ts @@ -4,63 +4,25 @@ import { Router } from '@angular/router'; import { NotificationsService } from 'angular2-notifications'; -import { FormReactive, UserService, USER_PASSWORD } from '../shared'; +import { AuthService } from '../core'; +import { + FormReactive, + User, + UserService, + USER_PASSWORD +} from '../shared'; @Component({ selector: 'my-account', - templateUrl: './account.component.html' + templateUrl: './account.component.html', + styleUrls: [ './account.component.scss' ] }) +export class AccountComponent implements OnInit { + user: User = null; -export class AccountComponent extends FormReactive implements OnInit { - error: string = null; - - form: FormGroup; - formErrors = { - 'new-password': '', - 'new-confirmed-password': '' - }; - validationMessages = { - 'new-password': USER_PASSWORD.MESSAGES, - 'new-confirmed-password': USER_PASSWORD.MESSAGES - }; - - constructor( - private formBuilder: FormBuilder, - private router: Router, - private notificationsService: NotificationsService, - private userService: UserService - ) { - super(); - } - - buildForm() { - this.form = this.formBuilder.group({ - 'new-password': [ '', USER_PASSWORD.VALIDATORS ], - 'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ], - }); - - this.form.valueChanges.subscribe(data => this.onValueChanged(data)); - } + constructor(private authService: AuthService) {} ngOnInit() { - this.buildForm(); - } - - changePassword() { - const newPassword = this.form.value['new-password']; - const newConfirmedPassword = this.form.value['new-confirmed-password']; - - this.error = null; - - if (newPassword !== newConfirmedPassword) { - this.error = 'The new password and the confirmed password do not correspond.'; - return; - } - - this.userService.changePassword(newPassword).subscribe( - () => this.notificationsService.success('Success', 'Password updated.'), - - err => this.error = err - ); + this.user = this.authService.getUser(); } } diff --git a/client/src/app/account/account.module.ts b/client/src/app/account/account.module.ts index 75f2ee6f9..f6c141ae6 100644 --- a/client/src/app/account/account.module.ts +++ b/client/src/app/account/account.module.ts @@ -2,6 +2,8 @@ import { NgModule } from '@angular/core'; import { AccountRoutingModule } from './account-routing.module'; import { AccountComponent } from './account.component'; +import { AccountChangePasswordComponent } from './account-change-password'; +import { AccountDetailsComponent } from './account-details'; import { AccountService } from './account.service'; import { SharedModule } from '../shared'; @@ -12,7 +14,9 @@ import { SharedModule } from '../shared'; ], declarations: [ - AccountComponent + AccountComponent, + AccountChangePasswordComponent, + AccountDetailsComponent ], exports: [ diff --git a/client/src/app/core/auth/auth-user.model.ts b/client/src/app/core/auth/auth-user.model.ts index cb7e88d19..7115b9781 100644 --- a/client/src/app/core/auth/auth-user.model.ts +++ b/client/src/app/core/auth/auth-user.model.ts @@ -67,7 +67,7 @@ export class AuthUser extends User { localStorage.setItem(AuthUser.KEYS.ID, this.id.toString()); localStorage.setItem(AuthUser.KEYS.USERNAME, this.username); localStorage.setItem(AuthUser.KEYS.ROLE, this.role); - localStorage.setItem(AuthUser.KEYS.DISPLAY_NSFW, JSON.stringify(this.displayNSFW); + localStorage.setItem(AuthUser.KEYS.DISPLAY_NSFW, JSON.stringify(this.displayNSFW)); this.tokens.save(); } } diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts index 2e7328197..00a4216ef 100644 --- a/client/src/app/core/auth/auth.service.ts +++ b/client/src/app/core/auth/auth.service.ts @@ -125,7 +125,7 @@ export class AuthService { res.username = username; return res; }) - .flatMap(res => this.fetchUserInformations(res)) + .flatMap(res => this.mergeUserInformations(res)) .map(res => this.handleLogin(res)) .catch((res) => this.restExtractor.handleError(res)); } @@ -178,7 +178,23 @@ export class AuthService { }); } - private fetchUserInformations (obj: any) { + refreshUserInformations() { + const obj = { + access_token: this.user.getAccessToken() + }; + + this.mergeUserInformations(obj) + .subscribe( + res => { + this.user.displayNSFW = res.displayNSFW; + this.user.role = res.role; + + this.user.save(); + } + ); + } + + private mergeUserInformations(obj: { access_token: string }) { // Do not call authHttp here to avoid circular dependencies headaches const headers = new Headers(); @@ -187,9 +203,13 @@ export class AuthService { return this.http.get(AuthService.BASE_USER_INFORMATIONS_URL, { headers }) .map(res => res.json()) .map(res => { - obj.id = res.id; - obj.role = res.role; - return obj; + const newProperties = { + id: res.id, + role: res.role, + displayNSFW: res.displayNSFW + }; + + return Object.assign(obj, newProperties); } ); } @@ -198,13 +218,14 @@ export class AuthService { const id = obj.id; const username = obj.username; const role = obj.role; + const displayNSFW = obj.displayNSFW; const hashTokens = { access_token: obj.access_token, token_type: obj.token_type, refresh_token: obj.refresh_token }; - this.user = new AuthUser({ id, username, role }, hashTokens); + this.user = new AuthUser({ id, username, role, displayNSFW }, hashTokens); this.user.save(); this.setStatus(AuthStatus.LoggedIn); diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts index 865e04d48..0d41b900d 100644 --- a/client/src/app/shared/users/user.service.ts +++ b/client/src/app/shared/users/user.service.ts @@ -33,4 +33,12 @@ export class UserService { .map(this.restExtractor.extractDataBool) .catch((res) => this.restExtractor.handleError(res)); } + + updateDetails(details: { displayNSFW: boolean }) { + const url = UserService.BASE_USERS_URL + this.authService.getUser().id; + + return this.authHttp.put(url, details) + .map(this.restExtractor.extractDataBool) + .catch((res) => this.restExtractor.handleError(res)); + } } -- 2.25.1