Client: reactive forms

8 files changed, 72 insertions, 2 deletions

diff --git a/client/src/app/shared/form-validators/index.ts b/client/src/app/shared/form-validators/index.ts
deleted file mode 100644
index f9e9a6191..000000000
--- a/client/src/app/shared/form-validators/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './url.validator';
diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
new file mode 100644
index 000000000..1e8a69771
--- /dev/null
+++ b/client/src/app/shared/forms/form-reactive.ts
@@ -0,0 +1,24 @@
+import { FormGroup } from '@angular/forms';
+
+export abstract class FormReactive {
+  abstract form: FormGroup;
+  abstract formErrors: Object;
+  abstract validationMessages: Object;
+
+  abstract buildForm(): void;
+
+  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);
+
+      if (control && control.dirty && !control.valid) {
+        const messages = this.validationMessages[field];
+        for (const key in control.errors) {
+          this.formErrors[field] += messages[key] + ' ';
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts
new file mode 100644
index 000000000..1d2ae6f68
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/index.ts
@@ -0,0 +1,3 @@
+export * from './url.validator';
+export * from './user';
+export * from './video';
diff --git a/client/src/app/shared/form-validators/url.validator.ts b/client/src/app/shared/forms/form-validators/url.validator.ts
index 67163b4e9..67163b4e9 100644
--- a/client/src/app/shared/form-validators/url.validator.ts
+++ b/client/src/app/shared/forms/form-validators/url.validator.ts
diff --git a/client/src/app/shared/forms/form-validators/user.ts b/client/src/app/shared/forms/form-validators/user.ts
new file mode 100644
index 000000000..5b11ff265
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/user.ts
@@ -0,0 +1,17 @@
+import { Validators } from '@angular/forms';
+
+export const USER_USERNAME = {
+  VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(20) ],
+  MESSAGES: {
+    'required': 'Username is required.',
+    'minlength': 'Username must be at least 3 characters long.',
+    'maxlength': 'Username cannot be more than 20 characters long.'
+  }
+};
+export const USER_PASSWORD = {
+  VALIDATORS: [ Validators.required, Validators.minLength(6) ],
+  MESSAGES: {
+    'required': 'Password is required.',
+    'minlength': 'Password must be at least 6 characters long.',
+  }
+};
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts
new file mode 100644
index 000000000..3766d4018
--- /dev/null
+++ b/client/src/app/shared/forms/form-validators/video.ts
@@ -0,0 +1,25 @@
+import { Validators } from '@angular/forms';
+
+export const VIDEO_NAME = {
+  VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(50) ],
+  MESSAGES: {
+    'required': 'Video name is required.',
+    'minlength': 'Video name must be at least 3 characters long.',
+    'maxlength': 'Video name cannot be more than 50 characters long.'
+  }
+};
+export const VIDEO_DESCRIPTION = {
+  VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(250) ],
+  MESSAGES: {
+    'required': 'Video description is required.',
+    'minlength': 'Video description must be at least 3 characters long.',
+    'maxlength': 'Video description cannot be more than 250 characters long.'
+  }
+};
+
+export const VIDEO_TAGS = {
+  VALIDATORS: [ Validators.pattern('^[a-zA-Z0-9]{2,10}$') ],
+  MESSAGES: {
+    'pattern': 'A tag should be between 2 and 10 alphanumeric characters long.'
+  }
+};
diff --git a/client/src/app/shared/forms/index.ts b/client/src/app/shared/forms/index.ts
new file mode 100644
index 000000000..588ebb4be
--- /dev/null
+++ b/client/src/app/shared/forms/index.ts
@@ -0,0 +1,2 @@
+export * from './form-validators';
+export * from './form-reactive';
diff --git a/client/src/app/shared/index.ts b/client/src/app/shared/index.ts
index c362a0e4a..af34b4b64 100644
--- a/client/src/app/shared/index.ts
+++ b/client/src/app/shared/index.ts
@@ -1,5 +1,5 @@
 export * from './auth';
-export * from './form-validators';
+export * from './forms';
 export * from './rest';
 export * from './search';
 export * from './users';