diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-12-01 17:38:26 +0100 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-12-01 17:38:26 +0100 |
commit | c30745f342480b59fb0856a059c8c2fbffbcfc6a (patch) | |
tree | 06209d7831131120b097b538c0ed851f8e40a280 /client/src/app/account/account-settings/account-details | |
parent | 2bbb34127fccd187ed690949b6791e49fdd77194 (diff) | |
download | PeerTube-c30745f342480b59fb0856a059c8c2fbffbcfc6a.tar.gz PeerTube-c30745f342480b59fb0856a059c8c2fbffbcfc6a.tar.zst PeerTube-c30745f342480b59fb0856a059c8c2fbffbcfc6a.zip |
Add account settings new design
Diffstat (limited to 'client/src/app/account/account-settings/account-details')
4 files changed, 87 insertions, 0 deletions
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.html b/client/src/app/account/account-settings/account-details/account-details.component.html new file mode 100644 index 000000000..c3cf6b629 --- /dev/null +++ b/client/src/app/account/account-settings/account-details/account-details.component.html | |||
@@ -0,0 +1,14 @@ | |||
1 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
2 | |||
3 | <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form"> | ||
4 | <input | ||
5 | type="checkbox" id="displayNSFW" | ||
6 | formControlName="displayNSFW" | ||
7 | > | ||
8 | <label for="displayNSFW">Display videos that contain mature or explicit content</label> | ||
9 | <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger"> | ||
10 | {{ formErrors['displayNSFW'] }} | ||
11 | </div> | ||
12 | |||
13 | <input type="submit" value="Update" [disabled]="!form.valid"> | ||
14 | </form> | ||
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss new file mode 100644 index 000000000..b1810d4f9 --- /dev/null +++ b/client/src/app/account/account-settings/account-details/account-details.component.scss | |||
@@ -0,0 +1,11 @@ | |||
1 | label { | ||
2 | font-size: 15px; | ||
3 | font-weight: $font-regular; | ||
4 | margin-left: 5px; | ||
5 | } | ||
6 | |||
7 | input[type=submit] { | ||
8 | @include peertube-button; | ||
9 | |||
10 | display: block; | ||
11 | } | ||
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.ts b/client/src/app/account/account-settings/account-details/account-details.component.ts new file mode 100644 index 000000000..d835c53e5 --- /dev/null +++ b/client/src/app/account/account-settings/account-details/account-details.component.ts | |||
@@ -0,0 +1,61 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | ||
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { NotificationsService } from 'angular2-notifications' | ||
4 | import { UserUpdateMe } from '../../../../../../shared' | ||
5 | import { AuthService } from '../../../core' | ||
6 | import { FormReactive, User, UserService } from '../../../shared' | ||
7 | |||
8 | @Component({ | ||
9 | selector: 'my-account-details', | ||
10 | templateUrl: './account-details.component.html', | ||
11 | styleUrls: [ './account-details.component.scss' ] | ||
12 | }) | ||
13 | |||
14 | export class AccountDetailsComponent extends FormReactive implements OnInit { | ||
15 | @Input() user: User = null | ||
16 | |||
17 | error: string = null | ||
18 | |||
19 | form: FormGroup | ||
20 | formErrors = {} | ||
21 | validationMessages = {} | ||
22 | |||
23 | constructor ( | ||
24 | private authService: AuthService, | ||
25 | private formBuilder: FormBuilder, | ||
26 | private notificationsService: NotificationsService, | ||
27 | private userService: UserService | ||
28 | ) { | ||
29 | super() | ||
30 | } | ||
31 | |||
32 | buildForm () { | ||
33 | this.form = this.formBuilder.group({ | ||
34 | displayNSFW: [ this.user.displayNSFW ] | ||
35 | }) | ||
36 | |||
37 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | ||
38 | } | ||
39 | |||
40 | ngOnInit () { | ||
41 | this.buildForm() | ||
42 | } | ||
43 | |||
44 | updateDetails () { | ||
45 | const displayNSFW = this.form.value['displayNSFW'] | ||
46 | const details: UserUpdateMe = { | ||
47 | displayNSFW | ||
48 | } | ||
49 | |||
50 | this.error = null | ||
51 | this.userService.updateMyDetails(details).subscribe( | ||
52 | () => { | ||
53 | this.notificationsService.success('Success', 'Information updated.') | ||
54 | |||
55 | this.authService.refreshUserInformation() | ||
56 | }, | ||
57 | |||
58 | err => this.error = err.message | ||
59 | ) | ||
60 | } | ||
61 | } | ||
diff --git a/client/src/app/account/account-settings/account-details/index.ts b/client/src/app/account/account-settings/account-details/index.ts new file mode 100644 index 000000000..4829f608a --- /dev/null +++ b/client/src/app/account/account-settings/account-details/index.ts | |||
@@ -0,0 +1 @@ | |||
export * from './account-details.component' | |||