Add new name/terms/description config options

13 files changed, 156 insertions, 70 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index c568a43b4..0fe2aa203 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -2,6 +2,41 @@
 
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
 
+  <div class="inner-form-title">Instance</div>
+
+  <div class="form-group">
+    <label for="instanceName">Name</label>
+    <input
+        type="text" id="instanceName"
+        formControlName="instanceName" [ngClass]="{ 'input-error': formErrors['instanceName'] }"
+    >
+    <div *ngIf="formErrors.instanceName" class="form-error">
+      {{ formErrors.instanceName }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="instanceDescription">Description (markdown)</label>
+    <my-markdown-textarea
+        id="instanceDescription" formControlName="instanceDescription" textareaWidth="500px" [previewColumn]="true"
+        [classes]="{ 'input-error': formErrors['instanceDescription'] }"
+    ></my-markdown-textarea>
+    <div *ngIf="formErrors.instanceDescription" class="form-error">
+      {{ formErrors.instanceDescription }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="instanceTerms">Terms (markdown)</label>
+    <my-markdown-textarea
+        id="instanceTerms" formControlName="instanceTerms" textareaWidth="500px" [previewColumn]="true"
+        [ngClass]="{ 'input-error': formErrors['instanceTerms'] }"
+    ></my-markdown-textarea>
+    <div *ngIf="formErrors.instanceTerms" class="form-error">
+      {{ formErrors.instanceTerms }}
+    </div>
+  </div>
+
   <div class="inner-form-title">Cache</div>
 
   <div class="form-group">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 1b3522786..cd8c926f7 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -4,7 +4,13 @@ import { Router } from '@angular/router'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { ServerService } from '@app/core/server/server.service'
 import { FormReactive, USER_VIDEO_QUOTA } from '@app/shared'
-import { ADMIN_EMAIL, CACHE_PREVIEWS_SIZE, SIGNUP_LIMIT, TRANSCODING_THREADS } from '@app/shared/forms/form-validators/custom-config'
+import {
+  ADMIN_EMAIL,
+  CACHE_PREVIEWS_SIZE,
+  INSTANCE_NAME,
+  SIGNUP_LIMIT,
+  TRANSCODING_THREADS
+} from '@app/shared/forms/form-validators/custom-config'
 import { NotificationsService } from 'angular2-notifications'
 import { CustomConfig } from '../../../../../../shared/models/config/custom-config.model'
 
@@ -36,6 +42,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
 
   form: FormGroup
   formErrors = {
+    instanceName: '',
+    instanceDescription: '',
+    instanceTerms: '',
     cachePreviewsSize: '',
     signupLimit: '',
     adminEmail: '',
@@ -43,6 +52,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     transcodingThreads: ''
   }
   validationMessages = {
+    instanceName: INSTANCE_NAME.MESSAGES,
     cachePreviewsSize: CACHE_PREVIEWS_SIZE.MESSAGES,
     signupLimit: SIGNUP_LIMIT.MESSAGES,
     adminEmail: ADMIN_EMAIL.MESSAGES,
@@ -65,6 +75,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
 
   buildForm () {
     const formGroupData = {
+      instanceName: [ '', INSTANCE_NAME.VALIDATORS ],
+      instanceDescription: [ '' ],
+      instanceTerms: [ '' ],
       cachePreviewsSize: [ '', CACHE_PREVIEWS_SIZE.VALIDATORS ],
       signupEnabled: [ ],
       signupLimit: [ '', SIGNUP_LIMIT.VALIDATORS ],
@@ -109,6 +122,11 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
 
   formValidated () {
     const data = {
+      instance: {
+        name: this.form.value['instanceName'],
+        description: this.form.value['instanceDescription'],
+        terms: this.form.value['instanceTerms']
+      },
       cache: {
         previews: {
           size: this.form.value['cachePreviewsSize']
@@ -146,6 +164,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
           this.serverService.loadConfig()
 
           this.updateForm()
+
+          this.notificationsService.success('Success', 'Configuration updated.')
         },
 
         err => this.notificationsService.error('Error', err.message)
@@ -154,6 +174,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
 
   private updateForm () {
     const data = {
+      instanceName: this.customConfig.instance.name,
+      instanceDescription: this.customConfig.instance.description,
+      instanceTerms: this.customConfig.instance.terms,
       cachePreviewsSize: this.customConfig.cache.previews.size,
       signupEnabled: this.customConfig.signup.enabled,
       signupLimit: this.customConfig.signup.limit,
diff --git a/client/src/app/shared/forms/form-validators/custom-config.ts b/client/src/app/shared/forms/form-validators/custom-config.ts
index 17ae0e75c..9e3fa98d8 100644
--- a/client/src/app/shared/forms/form-validators/custom-config.ts
+++ b/client/src/app/shared/forms/form-validators/custom-config.ts
@@ -1,5 +1,12 @@
 import { Validators } from '@angular/forms'
 
+export const INSTANCE_NAME = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': 'Instance name is required.',
+  }
+}
+
 export const CACHE_PREVIEWS_SIZE = {
   VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
   MESSAGES: {
diff --git a/client/src/app/shared/forms/markdown-textarea.component.html b/client/src/app/shared/forms/markdown-textarea.component.html
new file mode 100644
index 000000000..d2d4cf95c
--- /dev/null
+++ b/client/src/app/shared/forms/markdown-textarea.component.html
@@ -0,0 +1,12 @@
+<div class="root" [ngStyle]="{ 'flex-direction': flexDirection }">
+  <textarea
+    [(ngModel)]="description" (ngModelChange)="onModelChange()"
+    [ngClass]="classes" [ngStyle]="{ width: textareaWidth, height: textareaHeight, 'margin-right': textareaMarginRight }"
+    id="description" name="description">
+  </textarea>
+
+  <tabset *ngIf="arePreviewsDisplayed()" #staticTabs class="previews">
+    <tab *ngIf="truncate !== undefined" heading="Truncated description preview" [innerHTML]="truncatedDescriptionHTML"></tab>
+    <tab heading="Complete description preview" [innerHTML]="descriptionHTML"></tab>
+  </tabset>
+</div>
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
new file mode 100644
index 000000000..82aff541d
--- /dev/null
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -0,0 +1,27 @@
+@import '_variables';
+@import '_mixins';
+
+.root {
+  display: flex;
+  
+  textarea {
+    @include peertube-textarea(100%, 150px);
+
+    margin-bottom: 15px;
+  }
+
+  /deep/ {
+    .nav-link {
+      display: flex !important;
+      align-items: center;
+      height: 30px !important;
+      padding: 0 15px !important;
+    }
+
+    .tab-content {
+      min-height: 75px;
+      padding: 15px;
+      font-size: 15px;
+    }
+  }
+}
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index eba345412..20f13b28c 100644
--- a/client/src/app/videos/+video-edit/shared/video-description.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -3,25 +3,33 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import 'rxjs/add/operator/debounceTime'
 import 'rxjs/add/operator/distinctUntilChanged'
 import { isInMobileView } from '@app/shared/misc/utils'
+import { MarkdownService } from '@app/videos/shared'
 import { Subject } from 'rxjs/Subject'
-import { MarkdownService } from '../../shared'
 import truncate from 'lodash-es/truncate'
 
 @Component({
-  selector: 'my-video-description',
-  templateUrl: './video-description.component.html',
-  styleUrls: [ './video-description.component.scss' ],
+  selector: 'my-markdown-textarea',
+  templateUrl: './markdown-textarea.component.html',
+  styleUrls: [ './markdown-textarea.component.scss' ],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => VideoDescriptionComponent),
+      useExisting: forwardRef(() => MarkdownTextareaComponent),
       multi: true
     }
   ]
 })
 
-export class VideoDescriptionComponent implements ControlValueAccessor, OnInit {
+export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   @Input() description = ''
+  @Input() classes: string[] = []
+  @Input() textareaWidth = '100%'
+  @Input() textareaHeight = '150px'
+  @Input() previewColumn = false
+  @Input() truncate: number
+
+  textareaMarginRight = '0'
+  flexDirection = 'column'
   truncatedDescriptionHTML = ''
   descriptionHTML = ''
 
@@ -36,6 +44,11 @@ export class VideoDescriptionComponent implements ControlValueAccessor, OnInit {
       .subscribe(() => this.updateDescriptionPreviews())
 
     this.descriptionChanged.next(this.description)
+
+    if (this.previewColumn) {
+      this.flexDirection = 'row'
+      this.textareaMarginRight = '15px'
+    }
   }
 
   propagateChange = (_: any) => { /* empty */ }
@@ -65,9 +78,9 @@ export class VideoDescriptionComponent implements ControlValueAccessor, OnInit {
   }
 
   private updateDescriptionPreviews () {
-    if (!this.description) return
+    if (this.description === null || this.description === undefined) return
 
-    this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: 250 }))
+    this.truncatedDescriptionHTML = this.markdownService.markdownToHTML(truncate(this.description, { length: this.truncate }))
     this.descriptionHTML = this.markdownService.markdownToHTML(this.description)
   }
 }
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index a5c56cb46..d8f98bdf6 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -3,10 +3,13 @@ import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
+import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
+import { MarkdownService } from '@app/videos/shared'
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
 
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
 import { ModalModule } from 'ngx-bootstrap/modal'
+import { TabsModule } from 'ngx-bootstrap/tabs'
 import { InfiniteScrollModule } from 'ngx-infinite-scroll'
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
@@ -40,7 +43,8 @@ import { VideoService } from './video/video.service'
 
     PrimeSharedModule,
     InfiniteScrollModule,
-    NgPipesModule
+    NgPipesModule,
+    TabsModule.forRoot()
   ],
 
   declarations: [
@@ -50,7 +54,8 @@ import { VideoService } from './video/video.service'
     DeleteButtonComponent,
     EditButtonComponent,
     NumberFormatterPipe,
-    FromNowPipe
+    FromNowPipe,
+    MarkdownTextareaComponent
   ],
 
   exports: [
@@ -74,6 +79,7 @@ import { VideoService } from './video/video.service'
     VideoMiniatureComponent,
     DeleteButtonComponent,
     EditButtonComponent,
+    MarkdownTextareaComponent,
 
     NumberFormatterPipe,
     FromNowPipe
@@ -86,7 +92,8 @@ import { VideoService } from './video/video.service'
     VideoAbuseService,
     VideoBlacklistService,
     UserService,
-    VideoService
+    VideoService,
+    MarkdownService
   ]
 })
 export class SharedModule { }
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 50761ca0c..d4f5e258f 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -42,10 +42,10 @@ export class VideoService {
   }
 
   updateVideo (video: VideoEdit) {
-    const language = video.language || undefined
-    const licence = video.licence || undefined
-    const category = video.category || undefined
-    const description = video.description || undefined
+    const language = video.language || null
+    const licence = video.licence || null
+    const category = video.category || null
+    const description = video.description || null
 
     const body: VideoUpdate = {
       name: video.name,
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.html b/client/src/app/videos/+video-edit/shared/video-description.component.html
deleted file mode 100644
index 989292c47..000000000
--- a/client/src/app/videos/+video-edit/shared/video-description.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<textarea
-  [(ngModel)]="description" (ngModelChange)="onModelChange()"
-  id="description" name="description">
-</textarea>
-
-<tabset *ngIf="arePreviewsDisplayed()" #staticTabs class="previews">
-  <tab heading="Truncated description preview" [innerHTML]="truncatedDescriptionHTML"></tab>
-  <tab heading="Complete description preview" [innerHTML]="descriptionHTML"></tab>
-</tabset>
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
deleted file mode 100644
index 2c731bee3..000000000
--- a/client/src/app/videos/+video-edit/shared/video-description.component.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-textarea {
-  @include peertube-textarea(100%, 150px);
-
-  margin-bottom: 15px;
-}
-
-/deep/ {
-  .nav-link {
-    display: flex !important;
-    align-items: center;
-    height: 30px !important;
-    padding: 0 15px !important;
-  }
-
-  .tab-content {
-    min-height: 75px;
-    padding: 15px;
-    font-size: 15px;
-  }
-}
-
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index 80377933e..d031825bd 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -12,14 +12,14 @@
     <div class="form-group">
       <label class="label-tags">Tags</label> <span>(press Enter to add)</span>
       <tag-input
-          [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
-          formControlName="tags" maxItems="5" modelAsStrings="true"
+        [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
+        formControlName="tags" maxItems="5" modelAsStrings="true"
       ></tag-input>
     </div>
 
     <div class="form-group">
       <label for="description">Description</label>
-      <my-video-description formControlName="description"></my-video-description>
+      <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
 
       <div *ngIf="formErrors.description" class="form-error">
         {{ formErrors.description }}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index ce106d82f..098a71ae6 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -1,23 +1,17 @@
 import { NgModule } from '@angular/core'
-
-import { TagInputModule } from 'ngx-chips'
 import { TabsModule } from 'ngx-bootstrap/tabs'
-
-import { MarkdownService } from '../../shared'
+import { TagInputModule } from 'ngx-chips'
 import { SharedModule } from '../../../shared'
-import { VideoDescriptionComponent } from './video-description.component'
 import { VideoEditComponent } from './video-edit.component'
 
 @NgModule({
   imports: [
     TagInputModule,
-    TabsModule.forRoot(),
 
     SharedModule
   ],
 
   declarations: [
-    VideoDescriptionComponent,
     VideoEditComponent
   ],
 
@@ -25,12 +19,9 @@ import { VideoEditComponent } from './video-edit.component'
     TagInputModule,
     TabsModule,
 
-    VideoDescriptionComponent,
     VideoEditComponent
   ],
 
-  providers: [
-    MarkdownService
-  ]
+  providers: []
 })
 export class VideoEditModule { }
diff --git a/client/src/app/videos/shared/markdown.service.ts b/client/src/app/videos/shared/markdown.service.ts
index 82745f0c6..fd0330f9b 100644
--- a/client/src/app/videos/shared/markdown.service.ts
+++ b/client/src/app/videos/shared/markdown.service.ts
@@ -14,6 +14,17 @@ export class MarkdownService {
       .enable('link')
       .enable('newline')
 
+    this.setTargetToLinks()
+  }
+
+  markdownToHTML (markdown: string) {
+    const html = this.markdownIt.render(markdown)
+
+    // Avoid linkify truncated links
+    return html.replace(/<a[^>]+>([^<]+)<\/a>\s*...(<\/p>)?$/mi, '$1...')
+  }
+
+  private setTargetToLinks () {
     // Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
     const defaultRender = this.markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
       return self.renderToken(tokens, idx, options)
@@ -33,11 +44,4 @@ export class MarkdownService {
       return defaultRender(tokens, idx, options, env, self)
     }
   }
-
-  markdownToHTML (markdown: string) {
-    const html = this.markdownIt.render(markdown)
-
-    // Avoid linkify truncated links
-    return html.replace(/<a[^>]+>([^<]+)<\/a>\s*...(<\/p>)?$/mi, '$1...')
-  }
 }