From 92880679589ec527885a0e0aa022934745750b08 Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Thu, 5 Jan 2017 18:22:36 -0300
Subject: [PATCH] Ivan - Add language list validation [skip ci]

---
 .../settings/admin-panel-system-preferences.js    | 10 +++++-----
 client/src/core-components/checkbox-group.js      | 15 ++++++++++++++-
 client/src/core-components/checkbox-group.scss    |  5 +++++
 client/src/data/languages/en.js                   |  2 ++
 client/src/lib-app/validations/list-validator.js  | 10 ++++++++++
 .../lib-app/validations/validations-factory.js    |  5 ++++-
 6 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 client/src/lib-app/validations/list-validator.js

diff --git a/client/src/app/admin/panel/settings/admin-panel-system-preferences.js b/client/src/app/admin/panel/settings/admin-panel-system-preferences.js
index cdab72ec..dac728dc 100644
--- a/client/src/app/admin/panel/settings/admin-panel-system-preferences.js
+++ b/client/src/app/admin/panel/settings/admin-panel-system-preferences.js
@@ -51,11 +51,11 @@ class AdminPanelSystemPreferences extends React.Component {
                     </div>
                     <div className="row">
                         <div className="col-md-6">
-                            <FormField label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url"/>
-                            <FormField label={i18n('SUPPORT_CENTER_LAYOUT')} fieldProps={{size: 'large', items: [{content: i18n('BOXED')}, {content: i18n('FULL_WIDTH')}]}} field="select" name="layout"/>
+                            <FormField label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url" validation="URL" required/>
+                            <FormField label={i18n('SUPPORT_CENTER_LAYOUT')} fieldProps={{size: 'large', items: [{content: i18n('BOXED')}, {content: i18n('FULL_WIDTH')}]}} field="select" name="layout" />
                         </div>
                         <div className="col-md-6">
-                            <FormField label={i18n('SUPPORT_CENTER_TITLE')} fieldProps={{size: 'large'}} name="title"/>
+                            <FormField label={i18n('SUPPORT_CENTER_TITLE')} fieldProps={{size: 'large'}} name="title" validation="TITLE" required/>
                             <FormField label={i18n('DEFAULT_TIMEZONE')} fieldProps={{size: 'large'}} name="time-zone"/>
                         </div>
                     </div>
@@ -89,11 +89,11 @@ class AdminPanelSystemPreferences extends React.Component {
                             <div className="row admin-panel-system-preferences__languages">
                                 <div className="col-md-6 admin-panel-system-preferences__languages-allowed">
                                     <div>{i18n('ALLOWED_LANGUAGES')} <InfoTooltip text={i18n('ALLOWED_LANGUAGES_INFO')} /></div>
-                                    <FormField name="allowedLanguages" field="checkbox-group" fieldProps={{items: this.getLanguageList()}} />
+                                    <FormField name="allowedLanguages" field="checkbox-group" fieldProps={{items: this.getLanguageList()}} validation="LIST" required/>
                                 </div>
                                 <div className="col-md-6 admin-panel-system-preferences__languages-supported">
                                     <div>{i18n('SUPPORTED_LANGUAGES')} <InfoTooltip text={i18n('SUPPORTED_LANGUAGES_INFO')} /></div>
-                                    <FormField name="supportedLanguages" field="checkbox-group" fieldProps={{items: this.getLanguageList()}} />
+                                    <FormField name="supportedLanguages" field="checkbox-group" fieldProps={{items: this.getLanguageList()}} validation="LIST" required/>
                                 </div>
                             </div>
                         </div>
diff --git a/client/src/core-components/checkbox-group.js b/client/src/core-components/checkbox-group.js
index 76f6eb5c..bbe229a7 100644
--- a/client/src/core-components/checkbox-group.js
+++ b/client/src/core-components/checkbox-group.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import _ from 'lodash';
 
 import Checkbox from 'core-components/checkbox';
@@ -6,6 +7,7 @@ import Checkbox from 'core-components/checkbox';
 class CheckboxGroup extends React.Component {
     static propTypes = {
         items: React.PropTypes.array.isRequired,
+        errored: React.PropTypes.bool,
         value: React.PropTypes.arrayOf(React.PropTypes.number),
         onChange: React.PropTypes.func
     };
@@ -16,7 +18,7 @@ class CheckboxGroup extends React.Component {
     
     render() {
         return (
-            <ul className="checkbox-group">
+            <ul className={this.getClass()}>
                 {this.props.items.map(this.renderItem.bind(this))}
             </ul>
         );
@@ -31,6 +33,17 @@ class CheckboxGroup extends React.Component {
             </li>
         );
     }
+
+    getClass() {
+        let classes = {
+            'checkbox-group': true,
+            'checkbox-group_error': this.props.errored
+        };
+
+        classes[this.props.className] = (this.props.className);
+
+        return classNames(classes);
+    }
     
     onCheckboxChange(index) {
         let value = _.clone(this.getValue());
diff --git a/client/src/core-components/checkbox-group.scss b/client/src/core-components/checkbox-group.scss
index 92612c5c..198476d0 100644
--- a/client/src/core-components/checkbox-group.scss
+++ b/client/src/core-components/checkbox-group.scss
@@ -8,4 +8,9 @@
     &__item {
         margin: 10px 0;
     }
+
+    &_error {
+        border: 1px solid $primary-red;
+        padding-left: 7px;
+    }
 }
\ No newline at end of file
diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js
index 77c777a8..de57522d 100644
--- a/client/src/data/languages/en.js
+++ b/client/src/data/languages/en.js
@@ -199,6 +199,8 @@ export default {
     'ERROR_RETRIEVING_BAN_LIST': 'An error occurred while trying to retrieve the list of banned emails.',
     'ERROR_BANNING_EMAIL': 'An error occurred while trying to ban the email.',
     'ERROR_RETRIEVING_ARTICLES': 'An error occurred while trying to retrieve articles.',
+    'ERROR_LIST': 'Select at least one',
+    'ERROR_URL': 'Invalid URL',
 
     //MESSAGES
     'SIGNUP_SUCCESS': 'You have registered successfully in our support system.',
diff --git a/client/src/lib-app/validations/list-validator.js b/client/src/lib-app/validations/list-validator.js
new file mode 100644
index 00000000..eedc1663
--- /dev/null
+++ b/client/src/lib-app/validations/list-validator.js
@@ -0,0 +1,10 @@
+import Validator from 'lib-app/validations/validator';
+
+class ListValidator extends Validator {
+
+    validate(value, form) {
+        if (!value.length) return this.getError('ERROR_LIST');
+    }
+}
+
+export default ListValidator;
\ No newline at end of file
diff --git a/client/src/lib-app/validations/validations-factory.js b/client/src/lib-app/validations/validations-factory.js
index 6749d3b5..28aab598 100644
--- a/client/src/lib-app/validations/validations-factory.js
+++ b/client/src/lib-app/validations/validations-factory.js
@@ -3,6 +3,7 @@ import AlphaNumericValidator from 'lib-app/validations/alphanumeric-validator';
 import EmailValidator from 'lib-app/validations/email-validator';
 import RepeatPasswordValidator from 'lib-app/validations/repeat-password-validator';
 import LengthValidator from 'lib-app/validations/length-validator';
+import ListValidator from 'lib-app/validations/list-validator';
 
 let validators = {
     'DEFAULT': new Validator(),
@@ -11,7 +12,9 @@ let validators = {
     'EMAIL': new EmailValidator(),
     'TEXT_AREA': new LengthValidator(10, 'ERROR_CONTENT_SHORT'),
     'PASSWORD': new LengthValidator(6, 'ERROR_PASSWORD'),
-    'REPEAT_PASSWORD': new RepeatPasswordValidator()
+    'REPEAT_PASSWORD': new RepeatPasswordValidator(),
+    'URL': new LengthValidator(5, 'ERROR_URL'),
+    'LIST': new ListValidator()
 };
 
 class ValidatorFactory {