Add ability to set a name to a channel

17 files changed, 96 insertions, 17 deletions

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index bcd3beaf0..114a9e517 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="account" class="row">
   <a
-    *ngFor="let videoChannel of videoChannels" [routerLink]="[ '/video-channels', videoChannel.uuid ]"
+    *ngFor="let videoChannel of videoChannels" [routerLink]="[ '/video-channels', videoChannel.name ]"
     class="video-channel" i18n-title title="See this video channel"
   >
     <img [src]="videoChannel.avatarUrl" alt="Avatar" />
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index ebc671113..44f5626bb 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -2,10 +2,10 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { Account } from '@app/shared/account/account.model'
 import { AccountService } from '@app/shared/account/account.service'
-import { VideoChannel } from '../../../../../shared/models/videos'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { flatMap, map, tap } from 'rxjs/operators'
 import { Subscription } from 'rxjs'
+import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 
 @Component({
   selector: 'my-account-video-channels',
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;
       }
     }
   }
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index a52894cac..5a69a82a0 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -7,6 +7,7 @@
       <div class="actor-info">
         <div class="actor-names">
           <div class="actor-display-name">{{ videoChannel.displayName }}</div>
+          <div class="actor-name">{{ videoChannel.nameWithHost }}</div>
         </div>
         <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
 
diff --git a/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts
index 28b063f89..1ce3a0dca 100644
--- a/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts
@@ -5,11 +5,27 @@ import { BuildFormValidator } from '@app/shared'
 
 @Injectable()
 export class VideoChannelValidatorsService {
+  readonly VIDEO_CHANNEL_NAME: BuildFormValidator
   readonly VIDEO_CHANNEL_DISPLAY_NAME: BuildFormValidator
   readonly VIDEO_CHANNEL_DESCRIPTION: BuildFormValidator
   readonly VIDEO_CHANNEL_SUPPORT: BuildFormValidator
 
   constructor (private i18n: I18n) {
+    this.VIDEO_CHANNEL_NAME = {
+      VALIDATORS: [
+        Validators.required,
+        Validators.minLength(3),
+        Validators.maxLength(20),
+        Validators.pattern(/^[a-z0-9._]+$/)
+      ],
+      MESSAGES: {
+        'required': this.i18n('Name is required.'),
+        'minlength': this.i18n('Name must be at least 3 characters long.'),
+        'maxlength': this.i18n('Name cannot be more than 20 characters long.'),
+        'pattern': this.i18n('Name should be only lowercase alphanumeric characters.')
+      }
+    }
+
     this.VIDEO_CHANNEL_DISPLAY_NAME = {
       VALIDATORS: [
         Validators.required,
diff --git a/client/src/app/shared/video-channel/video-channel.model.ts b/client/src/app/shared/video-channel/video-channel.model.ts
index b6862b681..309b614ae 100644
--- a/client/src/app/shared/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/video-channel/video-channel.model.ts
@@ -7,6 +7,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
   description: string
   support: string
   isLocal: boolean
+  nameWithHost: string
   ownerAccount?: Account
   ownerBy?: string
   ownerAvatarUrl?: string
@@ -18,6 +19,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
     this.description = hash.description
     this.support = hash.support
     this.isLocal = hash.isLocal
+    this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host)
 
     if (hash.ownerAccount) {
       this.ownerAccount = hash.ownerAccount
diff --git a/client/src/app/shared/video-channel/video-channel.service.ts b/client/src/app/shared/video-channel/video-channel.service.ts
index 8c000665f..510dc9c3d 100644
--- a/client/src/app/shared/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/video-channel/video-channel.service.ts
@@ -22,8 +22,8 @@ export class VideoChannelService {
     private restExtractor: RestExtractor
   ) {}
 
-  getVideoChannel (videoChannelUUID: string) {
-    return this.authHttp.get<VideoChannel>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelUUID)
+  getVideoChannel (videoChannelName: string) {
+    return this.authHttp.get<VideoChannel>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName)
                .pipe(
                  map(videoChannelHash => new VideoChannel(videoChannelHash)),
                  tap(videoChannel => this.videoChannelLoaded.next(videoChannel)),
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index e2a62c701..e44f1ee65 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -150,7 +150,7 @@ export class VideoService {
     params = this.restService.addRestGetParams(params, pagination, sort)
 
     return this.authHttp
-               .get<ResultList<Video>>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.uuid + '/videos', { params })
+               .get<ResultList<Video>>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.name + '/videos', { params })
                .pipe(
                  switchMap(res => this.extractVideos(res)),
                  catchError(err => this.restExtractor.handleError(err))
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,
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 8d4a4a5ca..c275258ef 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -37,7 +37,7 @@
           </div>
 
           <div class="video-info-channel">
-            <a [routerLink]="[ '/video-channels', video.channel.uuid ]" i18n-title title="Go the channel page">
+            <a [routerLink]="[ '/video-channels', video.channel.name ]" i18n-title title="Go the channel page">
               {{ video.channel.displayName }}
 
               <img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3d518394a..b0b0f544c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -36,9 +36,16 @@
   border-radius: 3px;
   padding-left: 15px;
   padding-right: 15px;
+}
 
-  &::placeholder {
-    color: #585858;
+@mixin peertube-input-group($width) {
+  width: $width;
+  height: $button-height;
+  padding-top: 0;
+  padding-bottom: 0;
+
+  .input-group-text{
+    font-size: 14px;
   }
 }