username field consistency

client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html

@@ -3,13 +3,13 @@
 <form role="form" (ngSubmit)="updateMyProfile()" [formGroup]="form">
 
   <div class="form-group">
-    <label i18n for="user-name">User name</label>
+    <label i18n for="username">Username</label>
     <input
-      type="text" id="user-name" class="form-control"
+      type="text" id="username" class="form-control"
-      formControlName="user-name"
+      formControlName="username" readonly
     >
     <div class="text-muted" i18n>
-      People can find you @{{ user.username }}@{{ instanceHost }}
+      People can find you using @{{ user.username }}@{{ instanceHost }}
     </div>
   </div>
 

client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss

@@ -10,20 +10,16 @@ label {
   margin-bottom: 15px;
 }
 
+input#username + .text-muted {
+  margin-top: 5px;
+}
+
 input[type=text] {
   @include peertube-input-text(340px);
 
   display: block;
 }
 
-input#user-name {
-  border: none;
-
-  & + div {
-    padding-left: 15px;
-  }
-}
-
 input[type=submit] {
   @include peertube-button;
   @include orange-button;

client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts

@@ -25,15 +25,15 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
 
   ngOnInit () {
     this.buildForm({
-      'user-name': null,
+      username: null,
       'display-name': USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
       description: USER_DESCRIPTION_VALIDATOR
     })
-    this.form.controls['user-name'].disable()
+    this.form.controls['username'].disable()
 
     this.userInformationLoaded.subscribe(() => {
       this.form.patchValue({
-        'user-name': this.user.username,
+        username: this.user.username,
         'display-name': this.user.account.displayName,
         description: this.user.account.description
       })