diff options
author | Chocobozzz <me@florianbigard.com> | 2018-06-05 10:58:45 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-06-05 10:58:45 +0200 |
commit | d18d64787b3ea174f7dc2740c8c8c9555625047e (patch) | |
tree | e65089e0ca81117c1ada981b9b8a524afa8d70f5 /client/src/app/+my-account/my-account-settings | |
parent | 25acef90a85c1584880dec96aa402f896af8364a (diff) | |
download | PeerTube-d18d64787b3ea174f7dc2740c8c8c9555625047e.tar.gz PeerTube-d18d64787b3ea174f7dc2740c8c8c9555625047e.tar.zst PeerTube-d18d64787b3ea174f7dc2740c8c8c9555625047e.zip |
Form validators refractoring
Diffstat (limited to 'client/src/app/+my-account/my-account-settings')
5 files changed, 41 insertions, 61 deletions
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts index 1a88aa82e..56e644f39 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts | |||
@@ -1,8 +1,8 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { NotificationsService } from 'angular2-notifications' | 2 | import { NotificationsService } from 'angular2-notifications' |
4 | import { FormReactive, USER_PASSWORD, UserService } from '../../../shared' | 3 | import { FormReactive, USER_PASSWORD, UserService } from '../../../shared' |
5 | import { I18n } from '@ngx-translate/i18n-polyfill' | 4 | import { I18n } from '@ngx-translate/i18n-polyfill' |
5 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | ||
6 | 6 | ||
7 | @Component({ | 7 | @Component({ |
8 | selector: 'my-account-change-password', | 8 | selector: 'my-account-change-password', |
@@ -12,18 +12,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill' | |||
12 | export class MyAccountChangePasswordComponent extends FormReactive implements OnInit { | 12 | export class MyAccountChangePasswordComponent extends FormReactive implements OnInit { |
13 | error: string = null | 13 | error: string = null |
14 | 14 | ||
15 | form: FormGroup | ||
16 | formErrors = { | ||
17 | 'new-password': '', | ||
18 | 'new-confirmed-password': '' | ||
19 | } | ||
20 | validationMessages = { | ||
21 | 'new-password': USER_PASSWORD.MESSAGES, | ||
22 | 'new-confirmed-password': USER_PASSWORD.MESSAGES | ||
23 | } | ||
24 | |||
25 | constructor ( | 15 | constructor ( |
26 | private formBuilder: FormBuilder, | 16 | protected formValidatorService: FormValidatorService, |
27 | private notificationsService: NotificationsService, | 17 | private notificationsService: NotificationsService, |
28 | private userService: UserService, | 18 | private userService: UserService, |
29 | private i18n: I18n | 19 | private i18n: I18n |
@@ -31,17 +21,11 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On | |||
31 | super() | 21 | super() |
32 | } | 22 | } |
33 | 23 | ||
34 | buildForm () { | ||
35 | this.form = this.formBuilder.group({ | ||
36 | 'new-password': [ '', USER_PASSWORD.VALIDATORS ], | ||
37 | 'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ] | ||
38 | }) | ||
39 | |||
40 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | ||
41 | } | ||
42 | |||
43 | ngOnInit () { | 24 | ngOnInit () { |
44 | this.buildForm() | 25 | this.buildForm({ |
26 | 'new-password': USER_PASSWORD, | ||
27 | 'new-confirmed-password': USER_PASSWORD | ||
28 | }) | ||
45 | } | 29 | } |
46 | 30 | ||
47 | changePassword () { | 31 | changePassword () { |
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts index 35843ecd9..1fe337da0 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts | |||
@@ -1,9 +1,10 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | 1 | import { Component, Input, OnInit } from '@angular/core' |
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { NotificationsService } from 'angular2-notifications' | 2 | import { NotificationsService } from 'angular2-notifications' |
4 | import { FormReactive, USER_DESCRIPTION, USER_DISPLAY_NAME, UserService } from '../../../shared' | 3 | import { FormReactive, USER_DESCRIPTION, USER_DISPLAY_NAME, UserService } from '../../../shared' |
5 | import { User } from '@app/shared' | 4 | import { User } from '@app/shared' |
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | 5 | import { I18n } from '@ngx-translate/i18n-polyfill' |
6 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | ||
7 | import { Subject } from 'rxjs/Subject' | ||
7 | 8 | ||
8 | @Component({ | 9 | @Component({ |
9 | selector: 'my-account-profile', | 10 | selector: 'my-account-profile', |
@@ -12,21 +13,12 @@ import { I18n } from '@ngx-translate/i18n-polyfill' | |||
12 | }) | 13 | }) |
13 | export class MyAccountProfileComponent extends FormReactive implements OnInit { | 14 | export class MyAccountProfileComponent extends FormReactive implements OnInit { |
14 | @Input() user: User = null | 15 | @Input() user: User = null |
16 | @Input() userInformationLoaded: Subject<any> | ||
15 | 17 | ||
16 | error: string = null | 18 | error: string = null |
17 | 19 | ||
18 | form: FormGroup | ||
19 | formErrors = { | ||
20 | 'display-name': '', | ||
21 | 'description': '' | ||
22 | } | ||
23 | validationMessages = { | ||
24 | 'display-name': USER_DISPLAY_NAME.MESSAGES, | ||
25 | 'description': USER_DESCRIPTION.MESSAGES | ||
26 | } | ||
27 | |||
28 | constructor ( | 20 | constructor ( |
29 | private formBuilder: FormBuilder, | 21 | protected formValidatorService: FormValidatorService, |
30 | private notificationsService: NotificationsService, | 22 | private notificationsService: NotificationsService, |
31 | private userService: UserService, | 23 | private userService: UserService, |
32 | private i18n: I18n | 24 | private i18n: I18n |
@@ -34,17 +26,18 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit { | |||
34 | super() | 26 | super() |
35 | } | 27 | } |
36 | 28 | ||
37 | buildForm () { | 29 | ngOnInit () { |
38 | this.form = this.formBuilder.group({ | 30 | this.buildForm({ |
39 | 'display-name': [ this.user.account.displayName, USER_DISPLAY_NAME.VALIDATORS ], | 31 | 'display-name': USER_DISPLAY_NAME, |
40 | 'description': [ this.user.account.description, USER_DESCRIPTION.VALIDATORS ] | 32 | description: USER_DESCRIPTION |
41 | }) | 33 | }) |
42 | 34 | ||
43 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | 35 | this.userInformationLoaded.subscribe(() => { |
44 | } | 36 | this.form.patchValue({ |
45 | 37 | 'display-name': this.user.account.displayName, | |
46 | ngOnInit () { | 38 | description: this.user.account.description |
47 | this.buildForm() | 39 | }) |
40 | }) | ||
48 | } | 41 | } |
49 | 42 | ||
50 | updateMyProfile () { | 43 | updateMyProfile () { |
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html index 056c2a7d7..f5d593f19 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html | |||
@@ -3,7 +3,7 @@ | |||
3 | 3 | ||
4 | <div class="user-info"> | 4 | <div class="user-info"> |
5 | <div class="user-info-names"> | 5 | <div class="user-info-names"> |
6 | <div class="user-info-display-name">{{ user.account.displayName }}</div> | 6 | <div class="user-info-display-name">{{ user.account?.displayName }}</div> |
7 | <div class="user-info-username">{{ user.username }}</div> | 7 | <div class="user-info-username">{{ user.username }}</div> |
8 | </div> | 8 | </div> |
9 | <div i18n class="user-info-followers">{{ user.account?.followersCount }} subscribers</div> | 9 | <div i18n class="user-info-followers">{{ user.account?.followersCount }} subscribers</div> |
@@ -22,11 +22,11 @@ | |||
22 | 22 | ||
23 | <ng-template [ngIf]="user && user.account"> | 23 | <ng-template [ngIf]="user && user.account"> |
24 | <div i18n class="account-title">Profile</div> | 24 | <div i18n class="account-title">Profile</div> |
25 | <my-account-profile [user]="user"></my-account-profile> | 25 | <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile> |
26 | </ng-template> | 26 | </ng-template> |
27 | 27 | ||
28 | <div i18n class="account-title">Password</div> | 28 | <div i18n class="account-title">Password</div> |
29 | <my-account-change-password></my-account-change-password> | 29 | <my-account-change-password></my-account-change-password> |
30 | 30 | ||
31 | <div i18n class="account-title">Video settings</div> | 31 | <div i18n class="account-title">Video settings</div> |
32 | <my-account-video-settings [user]="user"></my-account-video-settings> | 32 | <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings> |
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts index 44eddaa7c..15f977e58 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts | |||
@@ -27,6 +27,10 @@ export class MyAccountSettingsComponent implements OnInit { | |||
27 | private i18n: I18n | 27 | private i18n: I18n |
28 | ) {} | 28 | ) {} |
29 | 29 | ||
30 | get userInformationLoaded () { | ||
31 | return this.authService.userInformationLoaded | ||
32 | } | ||
33 | |||
30 | ngOnInit () { | 34 | ngOnInit () { |
31 | this.user = this.authService.getUser() | 35 | this.user = this.authService.getUser() |
32 | 36 | ||
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts index 4588f73db..85b3a48cc 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts +++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts | |||
@@ -1,10 +1,11 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | 1 | import { Component, Input, OnInit } from '@angular/core' |
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { NotificationsService } from 'angular2-notifications' | 2 | import { NotificationsService } from 'angular2-notifications' |
4 | import { UserUpdateMe } from '../../../../../../shared' | 3 | import { UserUpdateMe } from '../../../../../../shared' |
5 | import { AuthService } from '../../../core' | 4 | import { AuthService } from '../../../core' |
6 | import { FormReactive, User, UserService } from '../../../shared' | 5 | import { FormReactive, User, UserService } from '../../../shared' |
7 | import { I18n } from '@ngx-translate/i18n-polyfill' | 6 | import { I18n } from '@ngx-translate/i18n-polyfill' |
7 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | ||
8 | import { Subject } from 'rxjs/Subject' | ||
8 | 9 | ||
9 | @Component({ | 10 | @Component({ |
10 | selector: 'my-account-video-settings', | 11 | selector: 'my-account-video-settings', |
@@ -13,14 +14,11 @@ import { I18n } from '@ngx-translate/i18n-polyfill' | |||
13 | }) | 14 | }) |
14 | export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit { | 15 | export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit { |
15 | @Input() user: User = null | 16 | @Input() user: User = null |
16 | 17 | @Input() userInformationLoaded: Subject<any> | |
17 | form: FormGroup | ||
18 | formErrors = {} | ||
19 | validationMessages = {} | ||
20 | 18 | ||
21 | constructor ( | 19 | constructor ( |
20 | protected formValidatorService: FormValidatorService, | ||
22 | private authService: AuthService, | 21 | private authService: AuthService, |
23 | private formBuilder: FormBuilder, | ||
24 | private notificationsService: NotificationsService, | 22 | private notificationsService: NotificationsService, |
25 | private userService: UserService, | 23 | private userService: UserService, |
26 | private i18n: I18n | 24 | private i18n: I18n |
@@ -28,17 +26,18 @@ export class MyAccountVideoSettingsComponent extends FormReactive implements OnI | |||
28 | super() | 26 | super() |
29 | } | 27 | } |
30 | 28 | ||
31 | buildForm () { | 29 | ngOnInit () { |
32 | this.form = this.formBuilder.group({ | 30 | this.buildForm({ |
33 | nsfwPolicy: [ this.user.nsfwPolicy ], | 31 | nsfwPolicy: null, |
34 | autoPlayVideo: [ this.user.autoPlayVideo ] | 32 | autoPlayVideo: null |
35 | }) | 33 | }) |
36 | 34 | ||
37 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | 35 | this.userInformationLoaded.subscribe(() => { |
38 | } | 36 | this.form.patchValue({ |
39 | 37 | nsfwPolicy: this.user.nsfwPolicy, | |
40 | ngOnInit () { | 38 | autoPlayVideo: this.user.autoPlayVideo === true ? 'true' : 'false' |
41 | this.buildForm() | 39 | }) |
40 | }) | ||
42 | } | 41 | } |
43 | 42 | ||
44 | updateDetails () { | 43 | updateDetails () { |