Fix all instances of input checkbox

js/components/ascribe_forms/form.js

@@ -63,6 +63,7 @@ let Form = React.createClass({
         if ('getFormData' in this.props){
             data = mergeOptionsWithDuplicates(data, this.props.getFormData());
         }
+        console.log(data);
         return data;
     },
 

js/components/ascribe_forms/form_loan.js

@@ -15,7 +15,6 @@ import LoanContractActions from '../../actions/loan_contract_actions';
 
 import AppConstants from '../../constants/application_constants';
 
-import { mergeOptions } from '../../utils/general_utils';
 import { getLangText } from '../../utils/lang_utils';
 
 
@@ -60,7 +59,7 @@ let LoanForm = React.createClass({
                     className="ascribe-settings-property-collapsible-toggle"
                     style={{paddingBottom: 0}}>
                     <InputCheckbox
-                        defaultValue={false}>
+                        defaultChecked={false}>
                         <span>
                             {getLangText('I agree to the')}&nbsp;
                             <a href={this.state.contractUrl} target="_blank">
@@ -73,14 +72,11 @@ let LoanForm = React.createClass({
         } else {
             return (
                 <Property
-                    hidden={true}
                     name="terms"
-                    className="ascribe-settings-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
-                    <input
-                        ref="input"
-                        type="checkbox"
-                        defaultValue={true} />
+                    style={{paddingBottom: 0}}
+                    hidden={true}>
+                    <InputCheckbox
+                        defaultChecked={true} />
                 </Property>
             );
         }
@@ -135,8 +131,7 @@ let LoanForm = React.createClass({
                 </Property>
                 <Property
                     name='gallery_name'
-                    label={getLangText('Gallery/exhibition (optional)')}
-                    onBlur={this.handleOnBlur}>
+                    label={getLangText('Gallery/exhibition (optional)')}>
                     <input
                         type="text"
                         placeholder={getLangText('Gallery/exhibition (optional)')}/>

js/components/ascribe_forms/form_signup.js

@@ -63,9 +63,7 @@ let SignupForm = React.createClass({
         this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
 
     },
-    getFormData(){
-        return {terms: this.refs.form.refs.terms.refs.input.state.value};
-    },
+
     render() {
         let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
             getLangText('This password is securing your digital property like a bank account') + '.\n ' +
@@ -76,7 +74,6 @@ let SignupForm = React.createClass({
                 ref='form'
                 url={apiUrls.users_signup}
                 handleSuccess={this.handleSuccess}
-                getFormData={this.getFormData}
                 buttons={
                     <button type="submit" className="btn ascribe-btn ascribe-btn-login">
                         {this.props.submitMessage}
@@ -123,7 +120,8 @@ let SignupForm = React.createClass({
                     name="terms"
                     className="ascribe-settings-property-collapsible-toggle"
                     style={{paddingBottom: 0}}>
-                    <InputCheckbox>
+                    <InputCheckbox
+                        defaultChecked={true}>
                         <span>
                             {' ' + getLangText('I agree to the Terms of Service') + ' '}
                             (<a href="https://www.ascribe.io/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>

js/components/ascribe_forms/input_checkbox.js

@@ -9,36 +9,42 @@ let InputCheckbox = React.createClass({
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]).isRequired
+        ])
     },
+
     getDefaultProps() {
         return {
-            defaultValue: false
+            defaultChecked: false
         };
     },
 
     getInitialState() {
         return {
-            value: this.props.defaultChecked
+            value: null
         };
     },
 
-    componentDidMount() {
-        this.props.onChange({
-            target: {
-                value: this.state.value
-            }
-        });
+    componentWillReceiveProps(nextProps) {
+        if(this.props.defaultValue) {
+            console.warn('InputCheckbox is of type checkbox. Therefore its value is represented by checked and defaultChecked.');
+        }
+
+        if(this.state.value === null) {
+            this.setState({value: !!nextProps.defaultChecked });
+        }
     },
 
     onChange() {
-        let value = !this.refs.checkbox.getDOMNode().checked;
-        this.setState({value: value});
+        let inverseValue = !this.refs.checkbox.getDOMNode().checked;
+
+        this.setState({value: inverseValue});
+        
         this.props.onChange({
             target: {
-                value: value
+                value: inverseValue
             }
         });
+
     },
 
     render() {

js/components/ascribe_forms/property.js

@@ -50,19 +50,29 @@ let Property = React.createClass({
     },
 
     componentWillReceiveProps() {
+        let childInput = this.refs.input;
 
         // In order to set this.state.value from another component
         // the state of value should only be set if its not undefined and
         // actually references something
-        if(typeof this.refs.input.getDOMNode().value !== 'undefined') {
+        if(typeof childInput.getDOMNode().value !== 'undefined') {
             this.setState({
-                value: this.refs.input.getDOMNode().value
+                value: childInput.getDOMNode().value
+            });
+
+        // When implementing custom input components, their value isn't exposed like the one
+        // from native HTML elements.
+        // To enable developers to create input elements, they can expose a property called value
+        // in their state that will be picked up by property.js
+        } else if(childInput.state && typeof childInput.state.value !== 'undefined') {
+            this.setState({
+                value: childInput.state.value
             });
         }
 
         if(!this.state.initialValue) {
             this.setState({
-                initialValue: this.refs.input.getDOMNode().defaultValue
+                initialValue: childInput.defaultValue
             });
         }
     },