aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/account/account-settings
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-01 17:38:26 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-01 17:38:26 +0100
commitc30745f342480b59fb0856a059c8c2fbffbcfc6a (patch)
tree06209d7831131120b097b538c0ed851f8e40a280 /client/src/app/account/account-settings
parent2bbb34127fccd187ed690949b6791e49fdd77194 (diff)
downloadPeerTube-c30745f342480b59fb0856a059c8c2fbffbcfc6a.tar.gz
PeerTube-c30745f342480b59fb0856a059c8c2fbffbcfc6a.tar.zst
PeerTube-c30745f342480b59fb0856a059c8c2fbffbcfc6a.zip
Add account settings new design
Diffstat (limited to 'client/src/app/account/account-settings')
-rw-r--r--client/src/app/account/account-settings/account-change-password/account-change-password.component.html18
-rw-r--r--client/src/app/account/account-settings/account-change-password/account-change-password.component.scss9
-rw-r--r--client/src/app/account/account-settings/account-change-password/account-change-password.component.ts62
-rw-r--r--client/src/app/account/account-settings/account-change-password/index.ts1
-rw-r--r--client/src/app/account/account-settings/account-details/account-details.component.html14
-rw-r--r--client/src/app/account/account-settings/account-details/account-details.component.scss11
-rw-r--r--client/src/app/account/account-settings/account-details/account-details.component.ts61
-rw-r--r--client/src/app/account/account-settings/account-details/index.ts1
-rw-r--r--client/src/app/account/account-settings/account-settings.component.html9
-rw-r--r--client/src/app/account/account-settings/account-settings.component.scss13
-rw-r--r--client/src/app/account/account-settings/account-settings.component.ts18
11 files changed, 217 insertions, 0 deletions
diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.html b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
new file mode 100644
index 000000000..bfb55218f
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
@@ -0,0 +1,18 @@
1<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
2
3<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
4 <input
5 type="password" class="form-control" id="new-password" placeholder="Old password"
6 formControlName="new-password"
7 >
8 <div *ngIf="formErrors['new-password']" class="alert alert-danger">
9 {{ formErrors['new-password'] }}
10 </div>
11
12 <input
13 type="password" id="new-confirmed-password" placeholder="New password"
14 formControlName="new-confirmed-password"
15 >
16
17 <input type="submit" value="Change password" [disabled]="!form.valid">
18</form>
diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
new file mode 100644
index 000000000..593355b70
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
@@ -0,0 +1,9 @@
1input[type=password] {
2 @include peertube-input-text(340px);
3 display: block;
4 margin-bottom: 10px;
5}
6
7input[type=submit] {
8 @include peertube-button;
9}
diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts b/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts
new file mode 100644
index 000000000..8979e1734
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts
@@ -0,0 +1,62 @@
1import { Component, OnInit } from '@angular/core'
2import { FormBuilder, FormGroup } from '@angular/forms'
3import { NotificationsService } from 'angular2-notifications'
4import { FormReactive, USER_PASSWORD, UserService } from '../../../shared'
5
6@Component({
7 selector: 'my-account-change-password',
8 templateUrl: './account-change-password.component.html',
9 styleUrls: [ './account-change-password.component.scss' ]
10})
11export class AccountChangePasswordComponent extends FormReactive implements OnInit {
12 error: string = null
13
14 form: FormGroup
15 formErrors = {
16 'new-password': '',
17 'new-confirmed-password': ''
18 }
19 validationMessages = {
20 'new-password': USER_PASSWORD.MESSAGES,
21 'new-confirmed-password': USER_PASSWORD.MESSAGES
22 }
23
24 constructor (
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 'new-password': [ '', USER_PASSWORD.VALIDATORS ],
35 'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ]
36 })
37
38 this.form.valueChanges.subscribe(data => this.onValueChanged(data))
39 }
40
41 ngOnInit () {
42 this.buildForm()
43 }
44
45 changePassword () {
46 const newPassword = this.form.value['new-password']
47 const newConfirmedPassword = this.form.value['new-confirmed-password']
48
49 this.error = null
50
51 if (newPassword !== newConfirmedPassword) {
52 this.error = 'The new password and the confirmed password do not correspond.'
53 return
54 }
55
56 this.userService.changePassword(newPassword).subscribe(
57 () => this.notificationsService.success('Success', 'Password updated.'),
58
59 err => this.error = err.message
60 )
61 }
62}
diff --git a/client/src/app/account/account-settings/account-change-password/index.ts b/client/src/app/account/account-settings/account-change-password/index.ts
new file mode 100644
index 000000000..44c330b66
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/index.ts
@@ -0,0 +1 @@
export * from './account-change-password.component'
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 @@
1label {
2 font-size: 15px;
3 font-weight: $font-regular;
4 margin-left: 5px;
5}
6
7input[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 @@
1import { Component, Input, OnInit } from '@angular/core'
2import { FormBuilder, FormGroup } from '@angular/forms'
3import { NotificationsService } from 'angular2-notifications'
4import { UserUpdateMe } from '../../../../../../shared'
5import { AuthService } from '../../../core'
6import { 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
14export 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'
diff --git a/client/src/app/account/account-settings/account-settings.component.html b/client/src/app/account/account-settings/account-settings.component.html
new file mode 100644
index 000000000..2509eb5aa
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -0,0 +1,9 @@
1<div class="user-info">
2 {{ user.username }}
3</div>
4
5<div class="account-title">Account settings</div>
6<my-account-change-password></my-account-change-password>
7
8<div class="account-title">Filtering</div>
9<my-account-details [user]="user"></my-account-details>
diff --git a/client/src/app/account/account-settings/account-settings.component.scss b/client/src/app/account/account-settings/account-settings.component.scss
new file mode 100644
index 000000000..a0822631d
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -0,0 +1,13 @@
1.user-info {
2 font-size: 20px;
3 font-weight: $font-bold;
4}
5
6.account-title {
7 text-transform: uppercase;
8 color: $orange-color;
9 font-weight: $font-bold;
10 font-size: 13px;
11 margin-top: 55px;
12 margin-bottom: 30px;
13}
diff --git a/client/src/app/account/account-settings/account-settings.component.ts b/client/src/app/account/account-settings/account-settings.component.ts
new file mode 100644
index 000000000..c3b670e02
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.ts
@@ -0,0 +1,18 @@
1import { Component, OnInit } from '@angular/core'
2import { User } from '../../shared'
3import { AuthService } from '../../core'
4
5@Component({
6 selector: 'my-account-settings',
7 templateUrl: './account-settings.component.html',
8 styleUrls: [ './account-settings.component.scss' ]
9})
10export class AccountSettingsComponent implements OnInit {
11 user: User = null
12
13 constructor (private authService: AuthService) {}
14
15 ngOnInit () {
16 this.user = this.authService.getUser()
17 }
18}