Add ability to update the user display name/description

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 @@
     </a>
 
     <div class="logged-in-info">
-      <a routerLink="/my-account/settings" class="logged-in-username">{{ user.username }}</a>
+      <a routerLink="/my-account/settings" class="logged-in-username">{{ user.account?.displayName }}</a>
       <div class="logged-in-email">{{ user.email }}</div>
     </div>
 
@@ -14,8 +14,8 @@
 
       <ul *dropdownMenu class="dropdown-menu">
         <li>
-          <a i18n routerLink="/my-account/settings" class="dropdown-item" title="My account">
-            My account
+          <a routerLink="/my-account/settings" class="dropdown-item" title="My settings">
+            My settings
           </a>
 
           <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 @@
-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
   ],
 
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 = {
     'required': 'User role is required.'
   }
 }
+export const USER_DISPLAY_NAME = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(3),
+    Validators.maxLength(120)
+  ],
+  MESSAGES: {
+    'required': 'Display name is required.',
+    'minlength': 'Display name must be at least 3 characters long.',
+    'maxlength': 'Display name cannot be more than 120 characters long.'
+  }
+}
+export const USER_DESCRIPTION = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(3),
+    Validators.maxLength(250)
+  ],
+  MESSAGES: {
+    'required': 'Display name is required.',
+    'minlength': 'Display name must be at least 3 characters long.',
+    'maxlength': 'Display name cannot be more than 250 characters long.'
+  }
+}
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 {
                         .catch(res => this.restExtractor.handleError(res))
   }
 
-  updateMyDetails (details: UserUpdateMe) {
+  updateMyProfile (profile: UserUpdateMe) {
     const url = UserService.BASE_USERS_URL + 'me'
 
-    return this.authHttp.put(url, details)
+    return this.authHttp.put(url, profile)
                         .map(this.restExtractor.extractDataBool)
                         .catch(res => this.restExtractor.handleError(res))
   }