aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-26 10:03:40 +0200
committerChocobozzz <me@florianbigard.com>2018-04-26 10:03:40 +0200
commited56ad1193bb5bb0a81fb843a11eb90d3fed9861 (patch)
tree64842447b4721978c69e1d2b3a964951c789c408 /client
parentd62cf3234ccfca0223a9639782635f0fb6594f8c (diff)
downloadPeerTube-ed56ad1193bb5bb0a81fb843a11eb90d3fed9861.tar.gz
PeerTube-ed56ad1193bb5bb0a81fb843a11eb90d3fed9861.tar.zst
PeerTube-ed56ad1193bb5bb0a81fb843a11eb90d3fed9861.zip
Add ability to update the user display name/description
Diffstat (limited to 'client')
-rw-r--r--client/src/app/menu/menu.component.html6
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-details/index.ts1
-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.html9
-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.html (renamed from client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html)0
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss (renamed from client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.scss)0
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts (renamed from client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.ts)10
-rw-r--r--client/src/app/my-account/my-account.component.html2
-rw-r--r--client/src/app/my-account/my-account.module.ts6
-rw-r--r--client/src/app/shared/forms/form-validators/user.ts24
-rw-r--r--client/src/app/shared/users/user.service.ts4
15 files changed, 160 insertions, 16 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 6e8189371..d1488ec3c 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -5,7 +5,7 @@
5 </a> 5 </a>
6 6
7 <div class="logged-in-info"> 7 <div class="logged-in-info">
8 <a routerLink="/my-account/settings" class="logged-in-username">{{ user.username }}</a> 8 <a routerLink="/my-account/settings" class="logged-in-username">{{ user.account?.displayName }}</a>
9 <div class="logged-in-email">{{ user.email }}</div> 9 <div class="logged-in-email">{{ user.email }}</div>
10 </div> 10 </div>
11 11
@@ -14,8 +14,8 @@
14 14
15 <ul *dropdownMenu class="dropdown-menu"> 15 <ul *dropdownMenu class="dropdown-menu">
16 <li> 16 <li>
17 <a i18n routerLink="/my-account/settings" class="dropdown-item" title="My account"> 17 <a routerLink="/my-account/settings" class="dropdown-item" title="My settings">
18 My account 18 My settings
19 </a> 19 </a>
20 20
21 <a (click)="logout($event)" class="dropdown-item" title="Log out" href="#"> 21 <a (click)="logout($event)" class="dropdown-item" title="Log out" href="#">
diff --git a/client/src/app/my-account/my-account-settings/my-account-details/index.ts b/client/src/app/my-account/my-account-settings/my-account-details/index.ts
deleted file mode 100644
index b7f58e329..000000000
--- a/client/src/app/my-account/my-account-settings/my-account-details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
1export * from './my-account-details.component'
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
new file mode 100644
index 000000000..3cc049f8f
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-profile/index.ts
@@ -0,0 +1 @@
export * 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
new file mode 100644
index 000000000..306f3a12c
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -0,0 +1,24 @@
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
new file mode 100644
index 000000000..fc2b92c89
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -0,0 +1,23 @@
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
new file mode 100644
index 000000000..2b7ba353c
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
@@ -0,0 +1,65 @@
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
index e11d93c01..e655b9d96 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
@@ -17,8 +17,13 @@
17 <span class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }} 17 <span class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }}
18</div> 18</div>
19 19
20<div class="account-title">Account settings</div> 20<ng-template [ngIf]="user && user.account">
21 <div class="account-title">Profile</div>
22 <my-account-profile [user]="user"></my-account-profile>
23</ng-template>
24
25<div class="account-title">Password</div>
21<my-account-change-password></my-account-change-password> 26<my-account-change-password></my-account-change-password>
22 27
23<div class="account-title">Video settings</div> 28<div class="account-title">Video settings</div>
24<my-account-details [user]="user"></my-account-details> 29<my-account-video-settings [user]="user"></my-account-video-settings>
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
new file mode 100644
index 000000000..1253bd369
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-video-settings/index.ts
@@ -0,0 +1 @@
export * from './my-account-video-settings.component'
diff --git a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index 0e8598e9e..0e8598e9e 100644
--- a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html
+++ b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
diff --git a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.scss b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
index ed59e4689..ed59e4689 100644
--- a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.scss
+++ b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
diff --git a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.ts b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
index 4c1456541..acc70c14d 100644
--- a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.ts
+++ b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts
@@ -6,11 +6,11 @@ import { AuthService } from '../../../core'
6import { FormReactive, User, UserService } from '../../../shared' 6import { FormReactive, User, UserService } from '../../../shared'
7 7
8@Component({ 8@Component({
9 selector: 'my-account-details', 9 selector: 'my-account-video-settings',
10 templateUrl: './my-account-details.component.html', 10 templateUrl: './my-account-video-settings.component.html',
11 styleUrls: [ './my-account-details.component.scss' ] 11 styleUrls: [ './my-account-video-settings.component.scss' ]
12}) 12})
13export class MyAccountDetailsComponent extends FormReactive implements OnInit { 13export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit {
14 @Input() user: User = null 14 @Input() user: User = null
15 15
16 form: FormGroup 16 form: FormGroup
@@ -47,7 +47,7 @@ export class MyAccountDetailsComponent extends FormReactive implements OnInit {
47 autoPlayVideo 47 autoPlayVideo
48 } 48 }
49 49
50 this.userService.updateMyDetails(details).subscribe( 50 this.userService.updateMyProfile(details).subscribe(
51 () => { 51 () => {
52 this.notificationsService.success('Success', 'Information updated.') 52 this.notificationsService.success('Success', 'Information updated.')
53 53
diff --git a/client/src/app/my-account/my-account.component.html b/client/src/app/my-account/my-account.component.html
index 637b2587c..41afc1e5d 100644
--- a/client/src/app/my-account/my-account.component.html
+++ b/client/src/app/my-account/my-account.component.html
@@ -1,6 +1,6 @@
1<div class="row"> 1<div class="row">
2 <div class="sub-menu"> 2 <div class="sub-menu">
3 <a routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My account</a> 3 <a routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a>
4 4
5 <a routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a> 5 <a routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a>
6 </div> 6 </div>
diff --git a/client/src/app/my-account/my-account.module.ts b/client/src/app/my-account/my-account.module.ts
index 317277304..981d3c697 100644
--- a/client/src/app/my-account/my-account.module.ts
+++ b/client/src/app/my-account/my-account.module.ts
@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core'
2import { SharedModule } from '../shared' 2import { SharedModule } from '../shared'
3import { MyAccountRoutingModule } from './my-account-routing.module' 3import { MyAccountRoutingModule } from './my-account-routing.module'
4import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component' 4import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component'
5import { MyAccountDetailsComponent } from './my-account-settings/my-account-details/my-account-details.component' 5import { MyAccountVideoSettingsComponent } from './my-account-settings/my-account-video-settings/my-account-video-settings.component'
6import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component' 6import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
7import { MyAccountComponent } from './my-account.component' 7import { MyAccountComponent } from './my-account.component'
8import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' 8import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
9import { MyAccountProfileComponent } from '@app/my-account/my-account-settings/my-account-profile/my-account-profile.component'
9 10
10@NgModule({ 11@NgModule({
11 imports: [ 12 imports: [
@@ -17,7 +18,8 @@ import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.
17 MyAccountComponent, 18 MyAccountComponent,
18 MyAccountSettingsComponent, 19 MyAccountSettingsComponent,
19 MyAccountChangePasswordComponent, 20 MyAccountChangePasswordComponent,
20 MyAccountDetailsComponent, 21 MyAccountVideoSettingsComponent,
22 MyAccountProfileComponent,
21 MyAccountVideosComponent 23 MyAccountVideosComponent
22 ], 24 ],
23 25
diff --git a/client/src/app/shared/forms/form-validators/user.ts b/client/src/app/shared/forms/form-validators/user.ts
index d2a28a272..095b534c0 100644
--- a/client/src/app/shared/forms/form-validators/user.ts
+++ b/client/src/app/shared/forms/form-validators/user.ts
@@ -46,3 +46,27 @@ export const USER_ROLE = {
46 'required': 'User role is required.' 46 'required': 'User role is required.'
47 } 47 }
48} 48}
49export const USER_DISPLAY_NAME = {
50 VALIDATORS: [
51 Validators.required,
52 Validators.minLength(3),
53 Validators.maxLength(120)
54 ],
55 MESSAGES: {
56 'required': 'Display name is required.',
57 'minlength': 'Display name must be at least 3 characters long.',
58 'maxlength': 'Display name cannot be more than 120 characters long.'
59 }
60}
61export const USER_DESCRIPTION = {
62 VALIDATORS: [
63 Validators.required,
64 Validators.minLength(3),
65 Validators.maxLength(250)
66 ],
67 MESSAGES: {
68 'required': 'Display name is required.',
69 'minlength': 'Display name must be at least 3 characters long.',
70 'maxlength': 'Display name cannot be more than 250 characters long.'
71 }
72}
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index da7b583f4..adb840cec 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -26,10 +26,10 @@ export class UserService {
26 .catch(res => this.restExtractor.handleError(res)) 26 .catch(res => this.restExtractor.handleError(res))
27 } 27 }
28 28
29 updateMyDetails (details: UserUpdateMe) { 29 updateMyProfile (profile: UserUpdateMe) {
30 const url = UserService.BASE_USERS_URL + 'me' 30 const url = UserService.BASE_USERS_URL + 'me'
31 31
32 return this.authHttp.put(url, details) 32 return this.authHttp.put(url, profile)
33 .map(this.restExtractor.extractDataBool) 33 .map(this.restExtractor.extractDataBool)
34 .catch(res => this.restExtractor.handleError(res)) 34 .catch(res => this.restExtractor.handleError(res))
35 } 35 }