Add ability to update the user display name/description

12 files changed, 131 insertions, 11 deletions

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 @@
-export * 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 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form role="form" (ngSubmit)="updateMyProfile()" [formGroup]="form">
+
+  <label for="display-name">Display name</label>
+  <input
+    type="text" id="display-name"
+    formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+  >
+  <div *ngIf="formErrors['display-name']" class="form-error">
+    {{ formErrors['display-name'] }}
+  </div>
+
+  <label for="description">Description</label>
+  <textarea
+    id="description" formControlName="description"
+    [ngClass]="{ 'input-error': formErrors['description'] }"
+  ></textarea>
+  <div *ngIf="formErrors.description" class="form-error">
+    {{ formErrors.description }}
+  </div>
+
+  <input type="submit" value="Update my profile" [disabled]="!form.valid">
+</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 @@
+@import '_variables';
+@import '_mixins';
+
+input[type=text] {
+  @include peertube-input-text(340px);
+
+  display: block;
+  margin-bottom: 15px;
+}
+
+textarea {
+  @include peertube-textarea(500px, 150px);
+
+  display: block;
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+
+  margin-top: 15px;
+}
+
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 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { FormBuilder, FormGroup } from '@angular/forms'
+import { NotificationsService } from 'angular2-notifications'
+import { FormReactive, USER_DESCRIPTION, USER_DISPLAY_NAME, UserService } from '../../../shared'
+import { User } from '@app/shared'
+
+@Component({
+  selector: 'my-account-profile',
+  templateUrl: './my-account-profile.component.html',
+  styleUrls: [ './my-account-profile.component.scss' ]
+})
+export class MyAccountProfileComponent extends FormReactive implements OnInit {
+  @Input() user: User = null
+
+  error: string = null
+
+  form: FormGroup
+  formErrors = {
+    'display-name': '',
+    'description': ''
+  }
+  validationMessages = {
+    'display-name': USER_DISPLAY_NAME.MESSAGES,
+    'description': USER_DESCRIPTION.MESSAGES
+  }
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private notificationsService: NotificationsService,
+    private userService: UserService
+  ) {
+    super()
+  }
+
+  buildForm () {
+    this.form = this.formBuilder.group({
+      'display-name': [ this.user.account.displayName, USER_DISPLAY_NAME.VALIDATORS ],
+      'description': [ this.user.account.description, USER_DESCRIPTION.VALIDATORS ]
+    })
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
+  }
+
+  ngOnInit () {
+    this.buildForm()
+  }
+
+  updateMyProfile () {
+    const displayName = this.form.value['display-name']
+    const description = this.form.value['description']
+
+    this.error = null
+
+    this.userService.updateMyProfile({ displayName, description }).subscribe(
+      () => {
+        this.user.account.displayName = displayName
+        this.user.account.description = description
+
+        this.notificationsService.success('Success', 'Profile updated.')
+      },
+
+      err => this.error = err.message
+    )
+  }
+}
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 @@
   <span class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }}
 </div>
 
-<div class="account-title">Account settings</div>
+<ng-template [ngIf]="user && user.account">
+  <div class="account-title">Profile</div>
+  <my-account-profile [user]="user"></my-account-profile>
+</ng-template>
+
+<div class="account-title">Password</div>
 <my-account-change-password></my-account-change-password>
 
 <div class="account-title">Video settings</div>
-<my-account-details [user]="user"></my-account-details>
+<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'
 import { FormReactive, User, UserService } from '../../../shared'
 
 @Component({
-  selector: 'my-account-details',
-  templateUrl: './my-account-details.component.html',
-  styleUrls: [ './my-account-details.component.scss' ]
+  selector: 'my-account-video-settings',
+  templateUrl: './my-account-video-settings.component.html',
+  styleUrls: [ './my-account-video-settings.component.scss' ]
 })
-export class MyAccountDetailsComponent extends FormReactive implements OnInit {
+export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit {
   @Input() user: User = null
 
   form: FormGroup
@@ -47,7 +47,7 @@ export class MyAccountDetailsComponent extends FormReactive implements OnInit {
       autoPlayVideo
     }
 
-    this.userService.updateMyDetails(details).subscribe(
+    this.userService.updateMyProfile(details).subscribe(
       () => {
         this.notificationsService.success('Success', 'Information updated.')
 
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 @@
 <div class="row">
   <div class="sub-menu">
-    <a routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My account</a>
+    <a routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a>
 
     <a routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a>
   </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'
 import { SharedModule } from '../shared'
 import { MyAccountRoutingModule } from './my-account-routing.module'
 import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component'
-import { MyAccountDetailsComponent } from './my-account-settings/my-account-details/my-account-details.component'
+import { MyAccountVideoSettingsComponent } from './my-account-settings/my-account-video-settings/my-account-video-settings.component'
 import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
 import { MyAccountComponent } from './my-account.component'
 import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
+import { MyAccountProfileComponent } from '@app/my-account/my-account-settings/my-account-profile/my-account-profile.component'
 
 @NgModule({
   imports: [
@@ -17,7 +18,8 @@ import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.
     MyAccountComponent,
     MyAccountSettingsComponent,
     MyAccountChangePasswordComponent,
-    MyAccountDetailsComponent,
+    MyAccountVideoSettingsComponent,
+    MyAccountProfileComponent,
     MyAccountVideosComponent
   ],