aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/account/account-settings
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-11 11:06:32 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-11 11:06:32 +0100
commitfada8d75550dc7365f7e18ee1569b9406251d660 (patch)
treedb9dc01c18693824f83fce5020f4c1f3ae7c0865 /client/src/app/account/account-settings
parent492fd28167f770d79a430fc57451b5a9e075d8e7 (diff)
parentc2830fa8f84f61462098bf36add824f89436dfa9 (diff)
downloadPeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.tar.gz
PeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.tar.zst
PeerTube-fada8d75550dc7365f7e18ee1569b9406251d660.zip
Merge branch 'feature/design' into develop
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.html20
-rw-r--r--client/src/app/account/account-settings/account-change-password/account-change-password.component.scss16
-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.scss13
-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.html15
-rw-r--r--client/src/app/account/account-settings/account-settings.component.scss28
-rw-r--r--client/src/app/account/account-settings/account-settings.component.ts22
11 files changed, 253 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..b0e3cada4
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html
@@ -0,0 +1,20 @@
1<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
2
3<form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
4
5 <label for="new-password">Change password</label>
6 <input
7 type="password" id="new-password" placeholder="New password"
8 formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
9 >
10 <div *ngIf="formErrors['new-password']" class="form-error">
11 {{ formErrors['new-password'] }}
12 </div>
13
14 <input
15 type="password" id="new-confirmed-password" placeholder="Confirm new password"
16 formControlName="new-confirmed-password"
17 >
18
19 <input type="submit" value="Change password" [disabled]="!form.valid">
20</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..7a4fdb34d
--- /dev/null
+++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss
@@ -0,0 +1,16 @@
1input[type=password] {
2 @include peertube-input-text(340px);
3 display: block;
4
5 &#new-confirmed-password {
6 margin-top: 15px;
7 }
8}
9
10input[type=submit] {
11 @include peertube-button;
12 @include orange-button;
13
14 margin-top: 15px;
15}
16
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..bc18b39b4
--- /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="Save" [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..5c369f968
--- /dev/null
+++ b/client/src/app/account/account-settings/account-details/account-details.component.scss
@@ -0,0 +1,13 @@
1label {
2 font-size: 15px;
3 font-weight: $font-regular;
4 margin-left: 5px;
5}
6
7input[type=submit] {
8 @include peertube-button;
9 @include orange-button;
10
11 display: block;
12 margin-top: 15px;
13}
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..c0a74cc47
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -0,0 +1,15 @@
1<div class="user">
2 <img [src]="getAvatarPath()" alt="Avatar" />
3
4 <div class="user-info">
5 <div class="user-info-username">{{ user.username }}</div>
6 <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
7 </div>
8</div>
9
10
11<div class="account-title">Account settings</div>
12<my-account-change-password></my-account-change-password>
13
14<div class="account-title">Filtering</div>
15<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..f514809b0
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.scss
@@ -0,0 +1,28 @@
1.user {
2 display: flex;
3
4 img {
5 @include avatar(50px);
6 margin-right: 15px;
7 }
8
9 .user-info {
10 .user-info-username {
11 font-size: 20px;
12 font-weight: $font-bold;
13 }
14
15 .user-info-followers {
16 font-size: 15px;
17 }
18 }
19}
20
21.account-title {
22 text-transform: uppercase;
23 color: $orange-color;
24 font-weight: $font-bold;
25 font-size: 13px;
26 margin-top: 55px;
27 margin-bottom: 30px;
28}
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..cba251000
--- /dev/null
+++ b/client/src/app/account/account-settings/account-settings.component.ts
@@ -0,0 +1,22 @@
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
19 getAvatarPath () {
20 return this.user.getAvatarPath()
21 }
22}