Add ability to set a name to a channel

3 files changed, 24 insertions, 4 deletions

diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
index 565b695d9..5fd630b09 100644
--- a/client/src/app/signup/signup.component.html
+++ b/client/src/app/signup/signup.component.html
@@ -23,10 +23,17 @@
   <form role="form" (ngSubmit)="signup()" [formGroup]="form">
     <div class="form-group">
       <label for="username" i18n>Username</label>
-      <input
-        type="text" id="username" i18n-placeholder placeholder="Username"
-        formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
-      >
+
+      <div class="input-group">
+        <input
+          type="text" id="username" i18n-placeholder placeholder="Example: neil_amstrong"
+          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+        >
+        <div class="input-group-append">
+          <span class="input-group-text">@{{ instanceHost }}</span>
+        </div>
+      </div>
+
       <div *ngIf="formErrors.username" class="form-error">
         {{ formErrors.username }}
       </div>
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss
index e6d484297..1c992faf5 100644
--- a/client/src/app/signup/signup.component.scss
+++ b/client/src/app/signup/signup.component.scss
@@ -14,9 +14,18 @@
   margin: 30px 0;
 }
 
+.input-group {
+  @include peertube-input-group(340px);
+}
+
 input:not([type=submit]) {
   @include peertube-input-text(340px);
   display: block;
+
+  &#username {
+    width: auto;
+    flex-grow: 1;
+  }
 }
 
 input[type=submit] {
diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts
index 076dac454..ed68487ae 100644
--- a/client/src/app/signup/signup.component.ts
+++ b/client/src/app/signup/signup.component.ts
@@ -34,6 +34,10 @@ export class SignupComponent extends FormReactive implements OnInit {
     return this.serverService.getConfig().user.videoQuota
   }
 
+  get instanceHost () {
+    return window.location.host
+  }
+
   ngOnInit () {
     this.buildForm({
       username: this.userValidatorsService.USER_USERNAME,