]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
Form validators refractoring
[github/Chocobozzz/PeerTube.git] / client / src / app / +admin / config / edit-custom-config / edit-custom-config.component.ts
index 1b35227864c87759eed9038a51e14c8aa6c8698e..f2a3464cb83ad991c8121e68ed53388bbdf85eed 100644 (file)
@@ -2,11 +2,22 @@ import { Component, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
+import { ConfirmService } from '@app/core'
 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,
+  INSTANCE_SHORT_DESCRIPTION,
+  SERVICES_TWITTER_USERNAME,
+  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'
+import { CustomConfig } from '../../../../../../shared/models/server/custom-config.model'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { BuildFormDefaultValues, FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 
 @Component({
   selector: 'my-edit-custom-config',
@@ -34,27 +45,17 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     { value: 8, label: '8' }
   ]
 
-  form: FormGroup
-  formErrors = {
-    cachePreviewsSize: '',
-    signupLimit: '',
-    adminEmail: '',
-    userVideoQuota: '',
-    transcodingThreads: ''
-  }
-  validationMessages = {
-    cachePreviewsSize: CACHE_PREVIEWS_SIZE.MESSAGES,
-    signupLimit: SIGNUP_LIMIT.MESSAGES,
-    adminEmail: ADMIN_EMAIL.MESSAGES,
-    userVideoQuota: USER_VIDEO_QUOTA.MESSAGES
-  }
+  private oldCustomJavascript: string
+  private oldCustomCSS: string
 
   constructor (
-    private formBuilder: FormBuilder,
+    protected formValidatorService: FormValidatorService,
     private router: Router,
     private notificationsService: NotificationsService,
     private configService: ConfigService,
-    private serverService: ServerService
+    private serverService: ServerService,
+    private confirmService: ConfirmService,
+    private i18n: I18n
   ) {
     super()
   }
@@ -63,39 +64,50 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     return 'transcodingResolution' + resolution
   }
 
-  buildForm () {
+  ngOnInit () {
     const formGroupData = {
-      cachePreviewsSize: [ '', CACHE_PREVIEWS_SIZE.VALIDATORS ],
-      signupEnabled: [ ],
-      signupLimit: [ '', SIGNUP_LIMIT.VALIDATORS ],
-      adminEmail: [ '', ADMIN_EMAIL.VALIDATORS ],
-      userVideoQuota: [ '', USER_VIDEO_QUOTA.VALIDATORS ],
-      transcodingThreads: [ '', TRANSCODING_THREADS.VALIDATORS ],
-      transcodingEnabled: [ ]
+      instanceName: INSTANCE_NAME,
+      instanceShortDescription: INSTANCE_SHORT_DESCRIPTION,
+      instanceDescription: null,
+      instanceTerms: null,
+      instanceDefaultClientRoute: null,
+      instanceDefaultNSFWPolicy: null,
+      servicesTwitterUsername: SERVICES_TWITTER_USERNAME,
+      servicesTwitterWhitelisted: null,
+      cachePreviewsSize: CACHE_PREVIEWS_SIZE,
+      signupEnabled: null,
+      signupLimit: SIGNUP_LIMIT,
+      adminEmail: ADMIN_EMAIL,
+      userVideoQuota: USER_VIDEO_QUOTA,
+      transcodingThreads: TRANSCODING_THREADS,
+      transcodingEnabled: null,
+      customizationJavascript: null,
+      customizationCSS: null
     }
 
+    const defaultValues: BuildFormDefaultValues = {}
     for (const resolution of this.resolutions) {
       const key = this.getResolutionKey(resolution)
-      formGroupData[key] = [ false ]
+      defaultValues[key] = 'false'
+      formGroupData[key] = null
     }
 
-    this.form = this.formBuilder.group(formGroupData)
-
-    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
-  }
-
-  ngOnInit () {
-    this.buildForm()
+    this.buildForm(formGroupData)
 
     this.configService.getCustomConfig()
       .subscribe(
         res => {
           this.customConfig = res
 
+          this.oldCustomCSS = this.customConfig.instance.customizations.css
+          this.oldCustomJavascript = this.customConfig.instance.customizations.javascript
+
           this.updateForm()
+          // Force form validation
+          this.forceCheck()
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }
 
@@ -107,8 +119,50 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     return this.form.value['signupEnabled'] === true
   }
 
-  formValidated () {
-    const data = {
+  async formValidated () {
+    const newCustomizationJavascript = this.form.value['customizationJavascript']
+    const newCustomizationCSS = this.form.value['customizationCSS']
+
+    const customizations = []
+    if (newCustomizationJavascript && newCustomizationJavascript !== this.oldCustomJavascript) customizations.push('JavaScript')
+    if (newCustomizationCSS && newCustomizationCSS !== this.oldCustomCSS) customizations.push('CSS')
+
+    if (customizations.length !== 0) {
+      const customizationsText = customizations.join('/')
+
+      // FIXME: i18n service does not support string concatenation
+      const message = this.i18n('You set custom {{customizationsText}}. ', { customizationsText }) +
+        this.i18n('This could lead to security issues or bugs if you do not understand it. ') +
+        this.i18n('Are you sure you want to update the configuration?')
+      const label = this.i18n(
+        'Please type "I understand the {{customizationsText}} I set" to confirm.',
+        { customizationsText }
+      )
+      const expectedInputValue = this.i18n('I understand the {{customizationsText}} I set', { customizationsText })
+
+      const confirmRes = await this.confirmService.confirmWithInput(message, label, expectedInputValue)
+      if (confirmRes === false) return
+    }
+
+    const data: CustomConfig = {
+      instance: {
+        name: this.form.value['instanceName'],
+        shortDescription: this.form.value['instanceShortDescription'],
+        description: this.form.value['instanceDescription'],
+        terms: this.form.value['instanceTerms'],
+        defaultClientRoute: this.form.value['instanceDefaultClientRoute'],
+        defaultNSFWPolicy: this.form.value['instanceDefaultNSFWPolicy'],
+        customizations: {
+          javascript: this.form.value['customizationJavascript'],
+          css: this.form.value['customizationCSS']
+        }
+      },
+      services: {
+        twitter: {
+          username: this.form.value['servicesTwitterUsername'],
+          whitelisted: this.form.value['servicesTwitterWhitelisted']
+        }
+      },
       cache: {
         previews: {
           size: this.form.value['cachePreviewsSize']
@@ -146,21 +200,33 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
           this.serverService.loadConfig()
 
           this.updateForm()
+
+          this.notificationsService.success(this.i18n('Success'), this.i18n('Configuration updated.'))
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }
 
   private updateForm () {
     const data = {
+      instanceName: this.customConfig.instance.name,
+      instanceShortDescription: this.customConfig.instance.shortDescription,
+      instanceDescription: this.customConfig.instance.description,
+      instanceTerms: this.customConfig.instance.terms,
+      instanceDefaultClientRoute: this.customConfig.instance.defaultClientRoute,
+      instanceDefaultNSFWPolicy: this.customConfig.instance.defaultNSFWPolicy,
+      servicesTwitterUsername: this.customConfig.services.twitter.username,
+      servicesTwitterWhitelisted: this.customConfig.services.twitter.whitelisted,
       cachePreviewsSize: this.customConfig.cache.previews.size,
       signupEnabled: this.customConfig.signup.enabled,
       signupLimit: this.customConfig.signup.limit,
       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) {