3 files changed, 27 insertions, 18 deletions

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
index bbdce5b02..05c0b5ddc 100644
--- 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
@@ -2,22 +2,26 @@
 
 <form role="form" (ngSubmit)="updateMyProfile()" [formGroup]="form">
 
-  <label i18n 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 class="form-group">
+    <label i18n 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>
   </div>
 
-  <label i18n 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 class="form-group">
+    <label i18n 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>
   </div>
 
   <input type="submit" i18n-value value="Update my profile" [disabled]="!form.valid">
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
index fc2b92c89..6aabb60f4 100644
--- 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
@@ -1,11 +1,14 @@
 @import '_variables';
 @import '_mixins';
 
+.form-group:first-child {
+  margin-bottom: 15px;
+}
+
 input[type=text] {
   @include peertube-input-text(340px);
 
   display: block;
-  margin-bottom: 15px;
 }
 
 textarea {
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
index 1fe337da0..400c3b889 100644
--- 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
@@ -1,10 +1,11 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { NotificationsService } from 'angular2-notifications'
-import { FormReactive, USER_DESCRIPTION, USER_DISPLAY_NAME, UserService } from '../../../shared'
+import { FormReactive, UserService } from '../../../shared'
 import { User } from '@app/shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { Subject } from 'rxjs/Subject'
+import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
 
 @Component({
   selector: 'my-account-profile',
@@ -19,6 +20,7 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
 
   constructor (
     protected formValidatorService: FormValidatorService,
+    private userValidatorsService: UserValidatorsService,
     private notificationsService: NotificationsService,
     private userService: UserService,
     private i18n: I18n
@@ -28,8 +30,8 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
 
   ngOnInit () {
     this.buildForm({
-      'display-name': USER_DISPLAY_NAME,
-      description: USER_DESCRIPTION
+      'display-name': this.userValidatorsService.USER_DISPLAY_NAME,
+      description: this.userValidatorsService.USER_DESCRIPTION
     })
 
     this.userInformationLoaded.subscribe(() => {