Form validators refractoring

4 files changed, 48 insertions, 112 deletions

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 73ff4b7bb..f2a3464cb 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
@@ -17,6 +17,7 @@ import {
 import { NotificationsService } from 'angular2-notifications'
 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',
@@ -44,38 +45,11 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     { value: 8, label: '8' }
   ]
 
-  form: FormGroup
-  formErrors = {
-    instanceName: '',
-    instanceShortDescription: '',
-    instanceDescription: '',
-    instanceTerms: '',
-    instanceDefaultClientRoute: '',
-    instanceDefaultNSFWPolicy: '',
-    servicesTwitterUsername: '',
-    cachePreviewsSize: '',
-    signupLimit: '',
-    adminEmail: '',
-    userVideoQuota: '',
-    transcodingThreads: '',
-    customizationJavascript: '',
-    customizationCSS: ''
-  }
-  validationMessages = {
-    instanceShortDescription: INSTANCE_SHORT_DESCRIPTION.MESSAGES,
-    instanceName: INSTANCE_NAME.MESSAGES,
-    servicesTwitterUsername: SERVICES_TWITTER_USERNAME,
-    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,
@@ -90,39 +64,35 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     return 'transcodingResolution' + resolution
   }
 
-  buildForm () {
+  ngOnInit () {
     const formGroupData = {
-      instanceName: [ '', INSTANCE_NAME.VALIDATORS ],
-      instanceShortDescription: [ '', INSTANCE_SHORT_DESCRIPTION.VALIDATORS ],
-      instanceDescription: [ '' ],
-      instanceTerms: [ '' ],
-      instanceDefaultClientRoute: [ '' ],
-      instanceDefaultNSFWPolicy: [ '' ],
-      servicesTwitterUsername: [ '', SERVICES_TWITTER_USERNAME.VALIDATORS ],
-      servicesTwitterWhitelisted: [ ],
-      cachePreviewsSize: [ '', CACHE_PREVIEWS_SIZE.VALIDATORS ],
-      signupEnabled: [ ],
-      signupLimit: [ '', SIGNUP_LIMIT.VALIDATORS ],
-      adminEmail: [ '', ADMIN_EMAIL.VALIDATORS ],
-      userVideoQuota: [ '', USER_VIDEO_QUOTA.VALIDATORS ],
-      transcodingThreads: [ '', TRANSCODING_THREADS.VALIDATORS ],
-      transcodingEnabled: [ ],
-      customizationJavascript: [ '' ],
-      customizationCSS: [ '' ]
+      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(
diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts
index 8478a7692..e5f0903b6 100644
--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core'
-import { FormBuilder, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
 import { NotificationsService } from 'angular2-notifications'
 import { UserService } from '../shared'
@@ -8,6 +7,7 @@ import { ServerService } from '../../../core'
 import { UserCreate, UserRole } from '../../../../../../shared'
 import { UserEdit } from './user-edit'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 
 @Component({
   selector: 'my-user-create',
@@ -17,25 +17,9 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 export class UserCreateComponent extends UserEdit implements OnInit {
   error: string
 
-  form: FormGroup
-  formErrors = {
-    'username': '',
-    'email': '',
-    'password': '',
-    'role': '',
-    'videoQuota': ''
-  }
-  validationMessages = {
-    'username': USER_USERNAME.MESSAGES,
-    'email': USER_EMAIL.MESSAGES,
-    'password': USER_PASSWORD.MESSAGES,
-    'role': USER_ROLE.MESSAGES,
-    'videoQuota': USER_VIDEO_QUOTA.MESSAGES
-  }
-
   constructor (
     protected serverService: ServerService,
-    private formBuilder: FormBuilder,
+    protected formValidatorService: FormValidatorService,
     private router: Router,
     private notificationsService: NotificationsService,
     private userService: UserService,
@@ -44,20 +28,19 @@ export class UserCreateComponent extends UserEdit implements OnInit {
     super()
   }
 
-  buildForm () {
-    this.form = this.formBuilder.group({
-      username: [ '', USER_USERNAME.VALIDATORS ],
-      email:    [ '', USER_EMAIL.VALIDATORS ],
-      password: [ '', USER_PASSWORD.VALIDATORS ],
-      role: [ UserRole.USER, USER_ROLE.VALIDATORS ],
-      videoQuota: [ '-1', USER_VIDEO_QUOTA.VALIDATORS ]
-    })
-
-    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
-  }
-
   ngOnInit () {
-    this.buildForm()
+    const defaultValues = {
+      role: UserRole.USER.toString(),
+      videoQuota: '-1'
+    }
+
+    this.buildForm({
+      username: USER_USERNAME,
+      email: USER_EMAIL,
+      password: USER_PASSWORD,
+      role: USER_ROLE,
+      videoQuota: USER_VIDEO_QUOTA
+    }, defaultValues)
   }
 
   formValidated () {
diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts
index 2b47c685c..ea8c733c3 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/users/user-edit/user-edit.ts
@@ -12,9 +12,9 @@ export abstract class UserEdit extends FormReactive {
     { value: 5 * 1024 * 1024 * 1024, label: '5GB' },
     { value: 20 * 1024 * 1024 * 1024, label: '20GB' },
     { value: 50 * 1024 * 1024 * 1024, label: '50GB' }
-  ]
+  ].map(q => ({ value: q.value.toString(), label: q.label })) // Used by a HTML select, so convert key into strings
 
-  roles = Object.keys(USER_ROLE_LABELS).map(key => ({ value: key, label: USER_ROLE_LABELS[key] }))
+  roles = Object.keys(USER_ROLE_LABELS).map(key => ({ value: key.toString(), label: USER_ROLE_LABELS[key] }))
 
   protected abstract serverService: ServerService
   abstract isCreation (): boolean
diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts
index 5689aab2f..f8073c928 100644
--- a/client/src/app/+admin/users/user-edit/user-update.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { FormBuilder, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Subscription } from 'rxjs'
 import { NotificationsService } from 'angular2-notifications'
@@ -9,6 +8,7 @@ import { ServerService } from '../../../core'
 import { UserEdit } from './user-edit'
 import { UserUpdate } from '../../../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 
 @Component({
   selector: 'my-user-update',
@@ -20,44 +20,27 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
   userId: number
   username: string
 
-  form: FormGroup
-  formErrors = {
-    'email': '',
-    'role': '',
-    'videoQuota': ''
-  }
-  validationMessages = {
-    'email': USER_EMAIL.MESSAGES,
-    'role': USER_ROLE.MESSAGES,
-    'videoQuota': USER_VIDEO_QUOTA.MESSAGES
-  }
-
   private paramsSub: Subscription
 
   constructor (
+    protected formValidatorService: FormValidatorService,
     protected serverService: ServerService,
     private route: ActivatedRoute,
     private router: Router,
     private notificationsService: NotificationsService,
-    private formBuilder: FormBuilder,
     private userService: UserService,
     private i18n: I18n
   ) {
     super()
   }
 
-  buildForm () {
-    this.form = this.formBuilder.group({
-      email:    [ '', USER_EMAIL.VALIDATORS ],
-      role: [ '', USER_ROLE.VALIDATORS ],
-      videoQuota: [ '-1', USER_VIDEO_QUOTA.VALIDATORS ]
-    })
-
-    this.form.valueChanges.subscribe(data => this.onValueChanged(data))
-  }
-
   ngOnInit () {
-    this.buildForm()
+    const defaultValues = { videoQuota: '-1' }
+    this.buildForm({
+      email: USER_EMAIL,
+      role: USER_ROLE,
+      videoQuota: USER_VIDEO_QUOTA
+    }, defaultValues)
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
       const userId = routeParams['id']