Add ability to set a name to a channel

5 files changed, 38 insertions, 5 deletions

diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts
index c0eaa4763..79ac07c93 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts
@@ -29,8 +29,13 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
     super()
   }
 
+  get instanceHost () {
+    return window.location.host
+  }
+
   ngOnInit () {
     this.buildForm({
+      name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME,
       'display-name': this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME,
       description: this.videoChannelValidatorsService.VIDEO_CHANNEL_DESCRIPTION,
       support: this.videoChannelValidatorsService.VIDEO_CHANNEL_SUPPORT
@@ -42,6 +47,7 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
 
     const body = this.form.value
     const videoChannelCreate: VideoChannelCreate = {
+      name: body.name,
       displayName: body['display-name'],
       description: body.description || null,
       support: body.support || null
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
index f7ca2ec43..81fb11f45 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html
@@ -8,6 +8,22 @@
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+  <div class="form-group" *ngIf="isCreation() === true">
+    <label i18n for="name">Name</label>
+    <div class="input-group">
+      <input
+        type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
+        formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
+      >
+      <div class="input-group-append">
+        <span class="input-group-text">@{{ instanceHost }}</span>
+      </div>
+    </div>
+    <div *ngIf="formErrors['name']" class="form-error">
+      {{ formErrors['name'] }}
+    </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-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
index 86c2598b7..833fda450 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.scss
@@ -10,10 +10,19 @@ my-actor-avatar-info {
   margin-bottom: 20px;
 }
 
+.input-group {
+  @include peertube-input-group(340px);
+}
+
 input[type=text] {
   @include peertube-input-text(340px);
 
   display: block;
+
+  &#name {
+    width: auto;
+    flex-grow: 1;
+  }
 }
 
 textarea {
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
index d27c3b4ec..548645a76 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html
@@ -7,15 +7,14 @@
 
 <div class="video-channels">
   <div *ngFor="let videoChannel of videoChannels" class="video-channel">
-    <a [routerLink]="[ '/video-channels', videoChannel.uuid ]">
+    <a [routerLink]="[ '/video-channels', videoChannel.name ]">
       <img [src]="videoChannel.avatarUrl" alt="Avatar" />
     </a>
 
     <div class="video-channel-info">
-      <a [routerLink]="[ '/video-channels', videoChannel.uuid ]" class="video-channel-names" i18n-title title="Go to the channel">
+      <a [routerLink]="[ '/video-channels', videoChannel.name ]" class="video-channel-names" i18n-title title="Go to the channel">
         <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
-        <!-- Hide the name for now, because it's an UUID not very friendly -->
-        <!--<div class="video-channel-name">{{ videoChannel.name }}</div>-->
+        <div class="video-channel-name">{{ videoChannel.name }}</div>
       </a>
 
       <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
@@ -24,7 +23,7 @@
     <div class="video-channel-buttons">
       <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
 
-      <my-edit-button [routerLink]="[ 'update', videoChannel.uuid ]"></my-edit-button>
+      <my-edit-button [routerLink]="[ 'update', videoChannel.name ]"></my-edit-button>
     </div>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index f047bb411..f8fd2684e 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -30,7 +30,9 @@
     a.video-channel-names {
       @include disable-default-a-behaviour;
 
+      width: fit-content;
       display: flex;
+      align-items: baseline;
       color: #000;
 
       .video-channel-display-name {
@@ -41,6 +43,7 @@
       .video-channel-name {
         font-size: 14px;
         color: #777272;
+        margin-left: 5px;
       }
     }
   }