From 217adfa88cf8aad1221a4017fcf5a2681d353519 Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Thu, 17 Sep 2015 22:18:47 -0300
Subject: [PATCH] [Ivan Diaz] - Create Form component

---
 src/app/main/main-home-page-login-widget.js | 12 ++--
 src/core-components/form.js                 | 64 +++++++++++++++++++++
 2 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 src/core-components/form.js

diff --git a/src/app/main/main-home-page-login-widget.js b/src/app/main/main-home-page-login-widget.js
index 9955b8c9..e21d88e2 100644
--- a/src/app/main/main-home-page-login-widget.js
+++ b/src/app/main/main-home-page-login-widget.js
@@ -1,5 +1,6 @@
 import React              from 'react/addons';
 
+import Form               from 'core-components/form';
 import Widget             from 'core-components/widget';
 import Input              from 'core-components/input';
 import Button             from 'core-components/button';
@@ -9,11 +10,14 @@ var MainHomePageLoginWidget = React.createClass({
         return (
             <Widget>
                 <h3>Login</h3>
+                <Form>
+                    <div>
+                        <Input placeholder="email" name="email" />
+                    </div>
+                    <Input placeholder="password" name="password" />
 
-                <Input placeholder="email" />
-                <Input placeholder="password" />
-
-                <Button type="primary">LOG IN</Button>
+                    <Button type="primary">LOG IN</Button>
+                </Form>
             </Widget>
         );
     }
diff --git a/src/core-components/form.js b/src/core-components/form.js
new file mode 100644
index 00000000..04b6fdc0
--- /dev/null
+++ b/src/core-components/form.js
@@ -0,0 +1,64 @@
+import React              from 'react/addons';
+import _                  from 'lodash';
+
+import Input              from 'core-components/input';
+
+var Form = React.createClass({
+
+    validations: {},
+
+    getInitialState() {
+        return {
+            form: {}
+        }
+    },
+
+    render() {
+        return (
+            <form>
+                {this.renderTraversedChildren(this.props.children)}
+            </form>
+        );
+    },
+
+    renderTraversedChildren(children) {
+        if (typeof children !== 'object' || children === null) {
+            return children;
+        }
+
+        return React.Children.map(children, function (child) {
+            if (typeof child !== 'object' || child === null) {
+                return child;
+            }
+
+            if (child.props && child.type === Input) {
+                return React.cloneElement(child, this.getInputProps(child.props), child.props && child.props.children);
+            } else {
+                return React.cloneElement(child, {}, this.renderTraversedChildren(child.props && child.props.children));
+            }
+        }.bind(this));
+    },
+
+    getInputProps(props) {
+        var inputName = props.name;
+
+        this.validations[inputName] = props.validation;
+
+        return {
+            onChange: this.handleInputChange.bind(this, inputName),
+            value: this.state.form[inputName] || props.value
+        };
+    },
+
+    handleInputChange(inputName, event) {
+        var form = _.clone(this.state.form);
+
+        form[inputName] = event.target.value;
+
+        this.setState({
+            form: form
+        });
+    }
+});
+
+export default Form;
\ No newline at end of file