add username information in profile settings

4 files changed, 28 insertions, 1 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index 29823bdec..6d2d7d46e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -2,7 +2,8 @@
 <div *ngIf="success" class="alert alert-success">{{ success }}</div>
 
 <div i18n class="current-email">
-  Your current email is <span class="email">{{ user.email }}</span>
+  Your current email is <span class="email">{{ user.email }}</span>.
+  It is never shown to the public.
 </div>
 
 <div i18n class="pending-email" *ngIf="user.pendingEmail">
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 818e34ee0..7e6b45386 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
@@ -3,6 +3,17 @@
 <form role="form" (ngSubmit)="updateMyProfile()" [formGroup]="form">
 
   <div class="form-group">
+    <label i18n for="user-name">User name</label>
+    <input
+      type="text" id="user-name" class="form-control"
+      formControlName="user-name"
+    >
+    <div class="text-muted" i18n>
+      People can find you @{{ user.username }}@{{ instanceHost }}
+    </div>
+  </div>
+
+  <div class="form-group">
     <label i18n for="display-name">Display name</label>
     <input
       type="text" id="display-name" class="form-control"
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 ec3f6029e..58402a272 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
@@ -16,6 +16,14 @@ input[type=text] {
   display: block;
 }
 
+input#user-name {
+  border: none;
+
+  & + div {
+    padding-left: 15px;
+  }
+}
+
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
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 000a2c0ac..957abe555 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
@@ -25,18 +25,25 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
 
   ngOnInit () {
     this.buildForm({
+      'user-name': null,
       'display-name': USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
       description: USER_DESCRIPTION_VALIDATOR
     })
+    this.form.controls['user-name'].disable()
 
     this.userInformationLoaded.subscribe(() => {
       this.form.patchValue({
+        'user-name': this.user.username,
         'display-name': this.user.account.displayName,
         description: this.user.account.description
       })
     })
   }
 
+  get instanceHost () {
+    return window.location.host
+  }
+
   updateMyProfile () {
     const displayName = this.form.value['display-name']
     const description = this.form.value['description'] || null