[Ivan Diaz] - OS-#10 - Add validations [skip ci]

client/src/app/main/main-home/main-home-page-login-widget.js

@@ -33,7 +33,7 @@ let MainHomePageLoginWidget = React.createClass({
             <Widget className="main-home-page--widget" title="Login">
                 <Form className="login-widget--form" onSubmit={this.handleLoginFormSubmit}>
                     <div className="login-widget--inputs">
-                        <Input placeholder="email" name="email" className="login-widget--input"/>
+                        <Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL"/>
                         <Input placeholder="password" name="password" className="login-widget--input" password/>
                         <Checkbox name="remember" label="Remember Me" className="login-widget--input"/>
                     </div>
@@ -53,7 +53,7 @@ let MainHomePageLoginWidget = React.createClass({
             <Widget className="main-home-page--widget main-home-page--password-widget" title="Password Recovery">
                 <Form className="login-widget--form" onSubmit={this.handleSubmit}>
                     <div className="login-widget--inputs">
-                        <Input placeholder="email" name="email" className="login-widget--input"/>
+                        <Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL"/>
                     </div>
                     <div className="login-widget--submit-button">
                         <Button type="primary">Recover my password</Button>

client/src/core-components/form.js

@@ -1,35 +1,40 @@
-import React              from 'react';
+const React = require('react');
-import _                  from 'lodash';
+const _ = require('lodash');
 
-import {reactDFS, renderChildrenWithProps}  from 'lib-core/react-dfs';
+const {reactDFS, renderChildrenWithProps} = require('lib-core/react-dfs');
+const ValidationFactory = require('lib-app/validations/validations-factory');
 
-import Input              from 'core-components/input';
+const Input = require('core-components/input');
-import Checkbox           from 'core-components/checkbox';
+const Checkbox = require('core-components/checkbox');
 
-let Form = React.createClass({
+const Form = React.createClass({
-
-    validations: {},
 
     getInitialState() {
         return {
-            form: {}
+            form: {},
+            validations: {},
+            errors: {}
         }
     },
 
     componentDidMount() {
         let formState = {};
+        let validations = {};
 
-        reactDFS(this.props.children, (child) => {
+        reactDFS(this.props.children, function (child) {
             if (child.type === Input) {
                 formState[child.props.name] = child.props.value || '';
+                validations[child.props.name] = ValidationFactory.getValidator(child.props.validation || 'DEFAULT');
             }
             else if (child.type === Checkbox) {
                 formState[child.props.name] = child.props.checked || false;
+                validations[child.props.name] = ValidationFactory.getValidator(child.props.validation || 'DEFAULT');
             }
-        });
+        }.bind(this));
 
         this.setState({
-            form: formState
+            form: formState,
+            validations: validations
         });
     },
 
@@ -55,11 +60,11 @@ let Form = React.createClass({
         if (type === Input || type === Checkbox) {
             let inputName = props.name;
 
-            this.validations[inputName] = props.validation;
-
             additionalProps = {
-                onChange: this.handleInputChange.bind(this, inputName, type),
+                ref: inputName,
-                value: this.state.form[inputName] || props.value
+                value: this.state.form[inputName] || props.value,
+                error: this.state.errors[inputName],
+                onChange: this.handleInputChange.bind(this, inputName, type)
             }
         }
 
@@ -69,23 +74,51 @@ let Form = React.createClass({
     handleSubmit(event) {
         event.preventDefault();
 
-        if (this.props.onSubmit) {
+        if (this.hasFormErrors()) {
+            this.focusFirstErrorField();
+        } else if (this.props.onSubmit) {
             this.props.onSubmit(this.state.form);
         }
     },
 
     handleInputChange(inputName, type, event) {
         let form = _.clone(this.state.form);
+        let errors = _.clone(this.state.errors);
+        let inputValue = event.target.value;
 
-        form[inputName] = event.target.value;
+        form[inputName] = inputValue;
+        errors[inputName] = this.state.validations[inputName].validate(inputValue, form);
 
         if (type === Checkbox) {
             form[inputName] = event.target.checked || false;
         }
 
+        console.log(errors);
+
         this.setState({
-            form: form
+            form: form,
+            errors: errors
         });
+    },
+
+    hasFormErrors() {
+        return _.some(this.validateAllFields(), (error) => error);
+    },
+
+    focusFirstErrorField() {
+        let firstErrorField = this.getFirstErrorField();
+
+        if (firstErrorField) {
+            this.refs[firstErrorField].focus();
+        }
+    },
+
+    getFirstErrorField() {
+
+    },
+
+    validateAllFields: function () {
+
     }
 });
 

client/src/core-components/input.js

@@ -1,12 +1,12 @@
-import React              from 'react';
+const React = require('react');
-import classNames         from 'classnames';
+const classNames = require('classnames');
-import _                  from 'lodash';
+const _ = require('lodash');
 
-let Input = React.createClass({
+const Input = React.createClass({
 
     propTypes: {
         value: React.PropTypes.string,
-        validation: React.PropTypes.func,
+        validation: React.PropTypes.string,
         onChange: React.PropTypes.func,
         inputType: React.PropTypes.string,
         password: React.PropTypes.bool

client/src/data/i18n-data.js

@@ -1,15 +1,13 @@
-import keys         from 'data/i18n-keys'
+const englishLanguage = require('data/languages/en');
+const spanishLanguage = require('data/languages/es');
 
-let languages = [
+const languages = {
-    'us',
+    'us': englishLanguage,
-    'es'
+    'es': spanishLanguage
-];
+};
 
-
+const i18nData = function (key, lang) {
-let i18nData = function (key, lang) {
+    return languages[lang][key];
-    let langIndex = languages.indexOf(lang);
-
-    return keys[key][langIndex];
 };
 
 export default i18nData

client/src/data/i18n-keys.js

@@ -1,5 +0,0 @@
-export default {
-    'SUBMIT': ['Submit', 'Enviar'],
-    'LOG_IN': ['Log in', 'Ingresar'],
-    'SIGN_UP': ['Sign up', 'Registrarse']
-};

client/src/data/languages/en.js

@@ -0,0 +1,7 @@
+export default {
+    'SUBMIT': 'Submit',
+    'LOG_IN': 'Log in',
+    'SIGN_UP': 'Sign up',
+    'ERROR_EMPTY': 'Invalid value',
+    'ERROR_EMAIL': 'Invalid email'
+};

client/src/data/languages/es.js

@@ -0,0 +1,7 @@
+export default {
+    'SUBMIT': 'Enviar',
+    'LOG_IN': 'Ingresar',
+    'SIGN_UP': 'Registrarse',
+    'ERROR_EMPTY': 'Valor invalido',
+    'ERROR_EMAIL': 'Email invalido'
+};

client/src/lib-app/validations/email-validator.js

@@ -0,0 +1,11 @@
+const Validator = require('lib-app/validations/validator');
+
+class EmailValidator extends Validator {
+
+    validate(value, form) {
+        if (!value.length) return this.getError('ERROR_EMPTY');
+        if (value.indexOf('@') === -1) return this.getError('ERROR_EMAIL');
+    }
+}
+
+export default EmailValidator;

client/src/lib-app/validations/validations-factory.js

@@ -0,0 +1,16 @@
+const Validator = require('lib-app/validations/validator');
+const EmailValidator = require('lib-app/validations/email-validator');
+
+let validators = {
+    'DEFAULT': new Validator(),
+    'EMAIL': new EmailValidator()
+};
+
+class ValidatorFactory {
+
+    static getValidator(validatorKey) {
+        return validators[validatorKey];
+    }
+}
+
+export default ValidatorFactory;

client/src/lib-app/validations/validator.js

@@ -0,0 +1,13 @@
+const i18n = require('lib-app/i18n');
+
+class Validator {
+    validate(value, form) {
+        if (!value.length) return this.getError('ERROR_EMPTY');
+    }
+
+    getError(errorKey) {
+        return i18n(errorKey);
+    }
+}
+
+export default Validator