From 52a3f561f5357d076ddc36897d5e1d0fc60a8730 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Sun, 17 Jan 2021 18:13:05 +0100
Subject: add username information in profile settings

---
 .../my-account-profile/my-account-profile.component.html      | 11 +++++++++++
 .../my-account-profile/my-account-profile.component.scss      |  8 ++++++++
 .../my-account-profile/my-account-profile.component.ts        |  7 +++++++
 3 files changed, 26 insertions(+)

(limited to 'client/src/app/+my-account/my-account-settings/my-account-profile')

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
@@ -2,6 +2,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
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
-- 
cgit v1.2.3