aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/my-account/my-account-settings
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-05-09 09:26:41 +0200
committerChocobozzz <me@florianbigard.com>2018-05-09 09:32:26 +0200
commit62e62f118d5da57acd3494fece2e8ed357564ffe (patch)
treeff5b7c6ec5708d71a76a2eb5744d810015ae29a5 /client/src/app/my-account/my-account-settings
parent1952a538baa330b13bd11631b3975f7ef1c37e70 (diff)
downloadPeerTube-62e62f118d5da57acd3494fece2e8ed357564ffe.tar.gz
PeerTube-62e62f118d5da57acd3494fece2e8ed357564ffe.tar.zst
PeerTube-62e62f118d5da57acd3494fece2e8ed357564ffe.zip
Load my-account module lazily
Diffstat (limited to 'client/src/app/my-account/my-account-settings')
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-change-password/index.ts1
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html20
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss19
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts62
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-profile/index.ts1
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.html24
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.scss23
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.ts65
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-settings.component.html32
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-settings.component.scss67
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-settings.component.ts70
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-video-settings/index.ts1
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html25
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss20
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts60
15 files changed, 0 insertions, 490 deletions
diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts b/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts
deleted file mode 100644
index 644047c5f..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts
+++ /dev/null
@@ -1 +0,0 @@
1export * from './my-account-change-password.component'
diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
deleted file mode 100644
index b0e3cada4..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
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/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
deleted file mode 100644
index f8279ffd3..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4input[type=password] {
5 @include peertube-input-text(340px);
6 display: block;
7
8 &#new-confirmed-password {
9 margin-top: 15px;
10 }
11}
12
13input[type=submit] {
14 @include peertube-button;
15 @include orange-button;
16
17 margin-top: 15px;
18}
19
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
deleted file mode 100644
index 80af668f9..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
+++ /dev/null
@@ -1,62 +0,0 @@
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: './my-account-change-password.component.html',
9 styleUrls: [ './my-account-change-password.component.scss' ]
10})
11export class MyAccountChangePasswordComponent 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/my-account/my-account-settings/my-account-profile/index.ts b/client/src/app/my-account/my-account-settings/my-account-profile/index.ts
deleted file mode 100644
index 3cc049f8f..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-profile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
1export * from './my-account-profile.component'
diff --git a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.html
deleted file mode 100644
index 306f3a12c..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ /dev/null
@@ -1,24 +0,0 @@
1<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
2
3<form role="form" (ngSubmit)="updateMyProfile()" [formGroup]="form">
4
5 <label for="display-name">Display name</label>
6 <input
7 type="text" id="display-name"
8 formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
9 >
10 <div *ngIf="formErrors['display-name']" class="form-error">
11 {{ formErrors['display-name'] }}
12 </div>
13
14 <label for="description">Description</label>
15 <textarea
16 id="description" formControlName="description"
17 [ngClass]="{ 'input-error': formErrors['description'] }"
18 ></textarea>
19 <div *ngIf="formErrors.description" class="form-error">
20 {{ formErrors.description }}
21 </div>
22
23 <input type="submit" value="Update my profile" [disabled]="!form.valid">
24</form>
diff --git a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
deleted file mode 100644
index fc2b92c89..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4input[type=text] {
5 @include peertube-input-text(340px);
6
7 display: block;
8 margin-bottom: 15px;
9}
10
11textarea {
12 @include peertube-textarea(500px, 150px);
13
14 display: block;
15}
16
17input[type=submit] {
18 @include peertube-button;
19 @include orange-button;
20
21 margin-top: 15px;
22}
23
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
deleted file mode 100644
index 2b7ba353c..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
+++ /dev/null
@@ -1,65 +0,0 @@
1import { Component, Input, OnInit } from '@angular/core'
2import { FormBuilder, FormGroup } from '@angular/forms'
3import { NotificationsService } from 'angular2-notifications'
4import { FormReactive, USER_DESCRIPTION, USER_DISPLAY_NAME, UserService } from '../../../shared'
5import { User } from '@app/shared'
6
7@Component({
8 selector: 'my-account-profile',
9 templateUrl: './my-account-profile.component.html',
10 styleUrls: [ './my-account-profile.component.scss' ]
11})
12export class MyAccountProfileComponent extends FormReactive implements OnInit {
13 @Input() user: User = null
14
15 error: string = null
16
17 form: FormGroup
18 formErrors = {
19 'display-name': '',
20 'description': ''
21 }
22 validationMessages = {
23 'display-name': USER_DISPLAY_NAME.MESSAGES,
24 'description': USER_DESCRIPTION.MESSAGES
25 }
26
27 constructor (
28 private formBuilder: FormBuilder,
29 private notificationsService: NotificationsService,
30 private userService: UserService
31 ) {
32 super()
33 }
34
35 buildForm () {
36 this.form = this.formBuilder.group({
37 'display-name': [ this.user.account.displayName, USER_DISPLAY_NAME.VALIDATORS ],
38 'description': [ this.user.account.description, USER_DESCRIPTION.VALIDATORS ]
39 })
40
41 this.form.valueChanges.subscribe(data => this.onValueChanged(data))
42 }
43
44 ngOnInit () {
45 this.buildForm()
46 }
47
48 updateMyProfile () {
49 const displayName = this.form.value['display-name']
50 const description = this.form.value['description']
51
52 this.error = null
53
54 this.userService.updateMyProfile({ displayName, description }).subscribe(
55 () => {
56 this.user.account.displayName = displayName
57 this.user.account.description = description
58
59 this.notificationsService.success('Success', 'Profile updated.')
60 },
61
62 err => this.error = err.message
63 )
64 }
65}
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
deleted file mode 100644
index 0fcc7782e..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-settings.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
1<div class="user">
2 <img [src]="user.accountAvatarUrl" alt="Avatar" />
3
4 <div class="user-info">
5 <div class="user-info-names">
6 <div class="user-info-display-name">{{ user.account.displayName }}</div>
7 <div class="user-info-username">{{ user.username }}</div>
8 </div>
9 <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
10 </div>
11</div>
12
13<div class="button-file">
14 <span>Change your avatar</span>
15 <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="changeAvatar()" />
16</div>
17<div class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div>
18
19<div class="user-quota">
20 <span class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }}
21</div>
22
23<ng-template [ngIf]="user && user.account">
24 <div class="account-title">Profile</div>
25 <my-account-profile [user]="user"></my-account-profile>
26</ng-template>
27
28<div class="account-title">Password</div>
29<my-account-change-password></my-account-change-password>
30
31<div class="account-title">Video settings</div>
32<my-account-video-settings [user]="user"></my-account-video-settings>
diff --git a/client/src/app/my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/my-account/my-account-settings/my-account-settings.component.scss
deleted file mode 100644
index ec0d40b93..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-settings.component.scss
+++ /dev/null
@@ -1,67 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4.user {
5 display: flex;
6
7 img {
8 @include avatar(50px);
9
10 margin-right: 15px;
11 }
12
13 .user-info {
14 .user-info-names {
15 display: flex;
16 align-items: center;
17
18 .user-info-display-name {
19 font-size: 20px;
20 font-weight: $font-bold;
21 }
22
23 .user-info-username {
24 margin-left: 7px;
25 position: relative;
26 top: 2px;
27 font-size: 14px;
28 color: #777272;
29 }
30 }
31
32 .user-info-followers {
33 font-size: 15px;
34 }
35 }
36}
37
38.button-file {
39 @include peertube-button-file(160px);
40
41 margin-top: 10px;
42 margin-bottom: 5px;
43}
44
45.file-max-size {
46 display: inline-block;
47 font-size: 13px;
48
49 position: relative;
50 top: -10px;
51}
52
53.user-quota {
54 font-size: 15px;
55 margin-top: 20px;
56
57 .user-quota-label {
58 font-weight: $font-semibold;
59 }
60}
61
62.account-title {
63 @include in-content-small-title;
64
65 margin-top: 55px;
66 margin-bottom: 30px;
67}
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
deleted file mode 100644
index 06d1138e7..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-settings.component.ts
+++ /dev/null
@@ -1,70 +0,0 @@
1import { Component, OnInit, ViewChild } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications'
3import { BytesPipe } from 'ngx-pipes'
4import { AuthService } from '../../core'
5import { ServerService } from '../../core/server'
6import { User } from '../../shared'
7import { UserService } from '../../shared/users'
8
9@Component({
10 selector: 'my-account-settings',
11 templateUrl: './my-account-settings.component.html',
12 styleUrls: [ './my-account-settings.component.scss' ]
13})
14export class MyAccountSettingsComponent implements OnInit {
15 @ViewChild('avatarfileInput') avatarfileInput
16
17 user: User = null
18 userVideoQuota = '0'
19 userVideoQuotaUsed = 0
20
21 constructor (
22 private userService: UserService,
23 private authService: AuthService,
24 private serverService: ServerService,
25 private notificationsService: NotificationsService
26 ) {}
27
28 ngOnInit () {
29 this.user = this.authService.getUser()
30
31 this.authService.userInformationLoaded.subscribe(
32 () => {
33 if (this.user.videoQuota !== -1) {
34 this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString()
35 } else {
36 this.userVideoQuota = 'Unlimited'
37 }
38 }
39 )
40
41 this.userService.getMyVideoQuotaUsed()
42 .subscribe(data => this.userVideoQuotaUsed = data.videoQuotaUsed)
43 }
44
45 changeAvatar () {
46 const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
47
48 const formData = new FormData()
49 formData.append('avatarfile', avatarfile)
50
51 this.userService.changeAvatar(formData)
52 .subscribe(
53 data => {
54 this.notificationsService.success('Success', 'Avatar changed.')
55
56 this.user.account.avatar = data.avatar
57 },
58
59 err => this.notificationsService.error('Error', err.message)
60 )
61 }
62
63 get maxAvatarSize () {
64 return this.serverService.getConfig().avatar.file.size.max
65 }
66
67 get avatarExtensions () {
68 return this.serverService.getConfig().avatar.file.extensions.join(',')
69 }
70}
diff --git a/client/src/app/my-account/my-account-settings/my-account-video-settings/index.ts b/client/src/app/my-account/my-account-settings/my-account-video-settings/index.ts
deleted file mode 100644
index 1253bd369..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-video-settings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
1export * from './my-account-video-settings.component'
diff --git a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
deleted file mode 100644
index 0e8598e9e..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
1<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
2 <div class="form-group">
3 <label for="nsfwPolicy">Default policy on videos containing sensitive content</label>
4 <my-help helpType="custom" customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."></my-help>
5
6 <div class="peertube-select-container">
7 <select id="nsfwPolicy" formControlName="nsfwPolicy">
8 <option value="do_not_list">Do not list</option>
9 <option value="blur">Blur thumbnails</option>
10 <option value="display">Display</option>
11 </select>
12 </div>
13 </div>
14
15 <div class="form-group">
16 <input
17 type="checkbox" id="autoPlayVideo"
18 formControlName="autoPlayVideo"
19 >
20 <label for="autoPlayVideo"></label>
21 <label for="autoPlayVideo">Automatically plays video</label>
22 </div>
23
24 <input type="submit" value="Save" [disabled]="!form.valid">
25</form>
diff --git a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
deleted file mode 100644
index ed59e4689..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
1@import '_variables';
2@import '_mixins';
3
4input[type=checkbox] {
5 @include peertube-checkbox(1px);
6}
7
8input[type=submit] {
9 @include peertube-button;
10 @include orange-button;
11
12 display: block;
13 margin-top: 15px;
14}
15
16.peertube-select-container {
17 @include peertube-select-container(340px);
18
19 margin-bottom: 30px;
20} \ No newline at end of file
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
deleted file mode 100644
index acc70c14d..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
+++ /dev/null
@@ -1,60 +0,0 @@
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-video-settings',
10 templateUrl: './my-account-video-settings.component.html',
11 styleUrls: [ './my-account-video-settings.component.scss' ]
12})
13export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit {
14 @Input() user: User = null
15
16 form: FormGroup
17 formErrors = {}
18 validationMessages = {}
19
20 constructor (
21 private authService: AuthService,
22 private formBuilder: FormBuilder,
23 private notificationsService: NotificationsService,
24 private userService: UserService
25 ) {
26 super()
27 }
28
29 buildForm () {
30 this.form = this.formBuilder.group({
31 nsfwPolicy: [ this.user.nsfwPolicy ],
32 autoPlayVideo: [ this.user.autoPlayVideo ]
33 })
34
35 this.form.valueChanges.subscribe(data => this.onValueChanged(data))
36 }
37
38 ngOnInit () {
39 this.buildForm()
40 }
41
42 updateDetails () {
43 const nsfwPolicy = this.form.value['nsfwPolicy']
44 const autoPlayVideo = this.form.value['autoPlayVideo']
45 const details: UserUpdateMe = {
46 nsfwPolicy,
47 autoPlayVideo
48 }
49
50 this.userService.updateMyProfile(details).subscribe(
51 () => {
52 this.notificationsService.success('Success', 'Information updated.')
53
54 this.authService.refreshUserInformation()
55 },
56
57 err => this.notificationsService.error('Error', err.message)
58 )
59 }
60}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-09 23:57:25 +0000