refactor input checkbox

js/components/ascribe_forms/form_signup.js

@@ -123,7 +123,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

@@ -4,35 +4,40 @@ import React from 'react';
 
 let InputCheckbox = React.createClass({
     propTypes: {
-        required: React.PropTypes.string.isRequired,
+        required: React.PropTypes.bool,
-        defaultValue: React.PropTypes.bool,
+        defaultChecked: React.PropTypes.bool,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
         ]).isRequired
     },
-    getDefaultProps() {
-        return {
-            required: 'required'
-        };
-    },
 
     getInitialState() {
         return {
-            //show: false
+            value: this.props.defaultChecked
-            value: this.props.defaultValue
         };
     },
 
-    onChange: function(event) {
+    componentDidMount() {
-        let newValue = !this.state.value;
+        this.props.onChange({
-        event.target.value = newValue;
+            target: {
-        this.props.onChange(event);
+                value: this.state.value
-        event.stopPropagation();
+            }
-        this.setState({value: newValue});
+        });
+    },
+
+    onChange() {
+        let value = !this.refs.checkbox.getDOMNode().checked;
+        this.setState({value: value});
+        this.props.onChange({
+            target: {
+                value: value
+            }
+        });
     },
 
     render() {
+        console.log(this.state.value);
         return (
             <span
                 onClick={this.onChange}>
@@ -40,7 +45,8 @@ let InputCheckbox = React.createClass({
                     type="checkbox"
                     ref="checkbox"
                     onChange={this.onChange}
-                    checked={this.state.value}/>
+                    checked={this.state.value}
+                    defaultChecked={this.props.defaultChecked}/>
                 <span className="checkbox">
                     {this.props.children}
                 </span>

js/components/ascribe_forms/property.js

@@ -39,6 +39,9 @@ let Property = React.createClass({
 
     getInitialState() {
         return {
+            // Please don't confuse initialValue with react's defaultValue.
+            // initialValue is set by us to ensure that a user can reset a specific
+            // property (after editing) to its initial value
             initialValue: null,
             value: null,
             isFocused: false,

js/components/settings_container.js

@@ -115,7 +115,7 @@ let AccountSettings = React.createClass({
                         className="ascribe-settings-property-collapsible-toggle"
                         style={{paddingBottom: 0}}>
                         <InputCheckbox
-                            defaultValue={this.state.currentUser.profile.hash_locally}>
+                            defaultChecked={this.state.currentUser.profile.hash_locally}>
                             <span>
                                 {' ' + getLangText('Enable hash option for slow connections. ' +
                                     'Computes and uploads a hash of the work instead.')}