Form validators refractoring

6 files changed, 126 insertions, 22 deletions

diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
index e7764d069..441ec8203 100644
--- a/client/src/app/shared/forms/form-reactive.ts
+++ b/client/src/app/shared/forms/form-reactive.ts
@@ -1,40 +1,48 @@
 import { FormGroup } from '@angular/forms'
+import { BuildFormArgument, BuildFormDefaultValues, FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+
+export type FormReactiveErrors = { [ id: string ]: string }
+export type FormReactiveValidationMessages = {
+  [ id: string ]: {
+    [ name: string ]: string
+  }
+}
 
 export abstract class FormReactive {
-  abstract form: FormGroup
-  abstract formErrors: Object
-  abstract validationMessages: Object
+  protected abstract formValidatorService: FormValidatorService
 
-  abstract buildForm (): void
+  form: FormGroup
+  formErrors: FormReactiveErrors
+  validationMessages: FormReactiveValidationMessages
 
-  protected onValueChanged (data?: any) {
-    for (const field in this.formErrors) {
-      // clear previous error message (if any)
-      this.formErrors[field] = ''
-      const control = this.form.get(field)
+  buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
+    const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues)
 
-      if (control && control.dirty && !control.valid) {
-        const messages = this.validationMessages[field]
-        for (const key in control.errors) {
-          this.formErrors[field] += messages[key] + ' '
-        }
-      }
-    }
+    this.form = form
+    this.formErrors = formErrors
+    this.validationMessages = validationMessages
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(false))
   }
 
-  // Same as onValueChanged but force checking even if the field is not dirty
-  protected forceCheck () {
+  protected onValueChanged (forceCheck = false) {
     for (const field in this.formErrors) {
       // clear previous error message (if any)
-      this.formErrors[field] = ''
+      this.formErrors[ field ] = ''
       const control = this.form.get(field)
 
-      if (control && !control.valid) {
-        const messages = this.validationMessages[field]
+      // Don't care if dirty on force check
+      const isDirty = control.dirty || forceCheck === true
+      if (control && isDirty && !control.valid) {
+        const messages = this.validationMessages[ field ]
         for (const key in control.errors) {
-          this.formErrors[field] += messages[key] + ' '
+          this.formErrors[ field ] += messages[ key ] + ' '
         }
       }
     }
   }
+
+  protected forceCheck () {
+    return this.onValueChanged(true)
+  }
 }
diff --git a/client/src/app/shared/forms/form-validators/form-validator.service.ts b/client/src/app/shared/forms/form-validators/form-validator.service.ts
new file mode 100644
index 000000000..5c3d3e4bd
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/form-validator.service.ts
@@ -0,0 +1,65 @@
+import { FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms'
+import { Injectable } from '@angular/core'
+import { FormReactiveErrors, FormReactiveValidationMessages } from '@app/shared/forms/form-reactive'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+
+export type BuildFormArgument = {
+  [ id: string ]: {
+    VALIDATORS: ValidatorFn[],
+    MESSAGES: { [ name: string ]: string }
+  }
+}
+export type BuildFormDefaultValues = {
+  [ name: string ]: string | string[]
+}
+
+@Injectable()
+export class FormValidatorService {
+
+  constructor (
+    private formBuilder: FormBuilder,
+    private i18n: I18n
+  ) {}
+
+  buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
+    const formErrors: FormReactiveErrors = {}
+    const validationMessages: FormReactiveValidationMessages = {}
+    const group: { [key: string]: any } = {}
+
+    for (const name of Object.keys(obj)) {
+      formErrors[name] = ''
+
+      const field = obj[name]
+      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES
+
+      const defaultValue = defaultValues[name] || ''
+
+      if (field && field.VALIDATORS) group[name] = [ defaultValue, field.VALIDATORS ]
+      else group[name] = [ defaultValue ]
+    }
+
+    const form = this.formBuilder.group(group)
+    return { form, formErrors, validationMessages }
+  }
+
+  updateForm (
+    form: FormGroup,
+    formErrors: FormReactiveErrors,
+    validationMessages: FormReactiveValidationMessages,
+    obj: BuildFormArgument,
+    defaultValues: BuildFormDefaultValues = {}
+  ) {
+    for (const name of Object.keys(obj)) {
+      formErrors[name] = ''
+
+      const field = obj[name]
+      if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES
+
+      const defaultValue = defaultValues[name] || ''
+
+      if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS))
+      else form.addControl(name, new FormControl(defaultValue))
+    }
+  }
+
+}
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts
index 09ae86f8a..cf544b2a9 100644
--- a/client/src/app/shared/forms/form-validators/index.ts
+++ b/client/src/app/shared/forms/form-validators/index.ts
@@ -1,3 +1,4 @@
+export * from './form-validator.service'
 export * from './host'
 export * from './user'
 export * from './video-abuse'
diff --git a/client/src/app/shared/forms/form-validators/login.ts b/client/src/app/shared/forms/form-validators/login.ts
new file mode 100644
index 000000000..f37f8d285
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/login.ts
@@ -0,0 +1,18 @@
+import { Validators } from '@angular/forms'
+
+export const LOGIN_USERNAME = {
+  VALIDATORS: [
+    Validators.required
+  ],
+  MESSAGES: {
+    'required': 'Username is required.'
+  }
+}
+export const LOGIN_PASSWORD = {
+  VALIDATORS: [
+    Validators.required
+  ],
+  MESSAGES: {
+    'required': 'Password is required.'
+  }
+}
diff --git a/client/src/app/shared/forms/form-validators/reset-password.ts b/client/src/app/shared/forms/form-validators/reset-password.ts
new file mode 100644
index 000000000..7dafdef9a
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/reset-password.ts
@@ -0,0 +1,10 @@
+import { Validators } from '@angular/forms'
+
+export const RESET_PASSWORD_CONFIRM = {
+  VALIDATORS: [
+    Validators.required
+  ],
+  MESSAGES: {
+    'required': 'Confirmation of the password is required.'
+  }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index fba099401..91d905ec7 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -34,6 +34,7 @@ import { VideoService } from './video/video.service'
 import { AccountService } from '@app/shared/account/account.service'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 
 @NgModule({
   imports: [
@@ -110,6 +111,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
     AccountService,
     MarkdownService,
     VideoChannelService,
+    FormValidatorService,
     I18n
   ]
 })