Form validators refractoring

3 files changed, 24 insertions, 58 deletions

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']