Add ability to add custom css/javascript

3 files changed, 44 insertions, 4 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 0fe2aa203..8dca9bc04 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
@@ -128,5 +128,29 @@
     </div>
   </ng-template>
 
+  <div class="inner-form-title">Customizations</div>
+
+  <div class="form-group">
+    <label for="customizationJavascript">JavaScript</label>
+    <textarea
+        id="customizationJavascript" formControlName="customizationJavascript"
+        [ngClass]="{ 'input-error': formErrors['customizationJavascript'] }"
+    ></textarea>
+    <div *ngIf="formErrors.customizationJavascript" class="form-error">
+      {{ formErrors.customizationJavascript }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="customizationCSS">CSS</label>
+    <textarea
+        id="customizationCSS" formControlName="customizationCSS"
+        [ngClass]="{ 'input-error': formErrors['customizationCSS'] }"
+    ></textarea>
+    <div *ngIf="formErrors.customizationCSS" class="form-error">
+      {{ formErrors.customizationCSS }}
+    </div>
+  </div>
+
   <input type="submit" value="Update configuration" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 0195f44eb..e72f30c69 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -29,3 +29,9 @@ input[type=submit] {
   margin-top: 30px;
   margin-bottom: 10px;
 }
+
+textarea {
+  @include peertube-textarea(500px, 150px);
+
+  display: block;
+}
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 cd8c926f7..027268536 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
@@ -49,7 +49,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     signupLimit: '',
     adminEmail: '',
     userVideoQuota: '',
-    transcodingThreads: ''
+    transcodingThreads: '',
+    customizationJavascript: '',
+    customizationCSS: ''
   }
   validationMessages = {
     instanceName: INSTANCE_NAME.MESSAGES,
@@ -84,7 +86,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
       adminEmail: [ '', ADMIN_EMAIL.VALIDATORS ],
       userVideoQuota: [ '', USER_VIDEO_QUOTA.VALIDATORS ],
       transcodingThreads: [ '', TRANSCODING_THREADS.VALIDATORS ],
-      transcodingEnabled: [ ]
+      transcodingEnabled: [ ],
+      customizationJavascript: [ '' ],
+      customizationCSS: [ '' ]
     }
 
     for (const resolution of this.resolutions) {
@@ -125,7 +129,11 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
       instance: {
         name: this.form.value['instanceName'],
         description: this.form.value['instanceDescription'],
-        terms: this.form.value['instanceTerms']
+        terms: this.form.value['instanceTerms'],
+        customizations: {
+          javascript: this.form.value['customizationJavascript'],
+          css: this.form.value['customizationCSS']
+        }
       },
       cache: {
         previews: {
@@ -183,7 +191,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
       adminEmail: this.customConfig.admin.email,
       userVideoQuota: this.customConfig.user.videoQuota,
       transcodingThreads: this.customConfig.transcoding.threads,
-      transcodingEnabled: this.customConfig.transcoding.enabled
+      transcodingEnabled: this.customConfig.transcoding.enabled,
+      customizationJavascript: this.customConfig.instance.customizations.javascript,
+      customizationCSS: this.customConfig.instance.customizations.css
     }
 
     for (const resolution of this.resolutions) {