Ivan - Add language list validation [skip ci]

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_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"/>
+                            <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>

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());

client/src/core-components/checkbox-group.scss

@@ -8,4 +8,9 @@
     &__item {
         margin: 10px 0;
     }
+
+    &_error {
+        border: 1px solid $primary-red;
+        padding-left: 7px;
+    }
 }

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.',

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;

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 {