input checkbox functionality

js/components/ascribe_forms/input_checkbox.js

@@ -2,48 +2,43 @@
 
 import React from 'react';
 
-import AlertMixin from '../../mixins/alert_mixin';
+import { getLangText } from '../../utils/lang_utils';
 
 let InputCheckbox = React.createClass({
     propTypes: {
-        submitted: React.PropTypes.bool.isRequired,
         required: React.PropTypes.string.isRequired,
         label: React.PropTypes.string.isRequired
     },
 
-    mixins: [AlertMixin],
-
     getInitialState() {
         return {
-            value: null,
-            alerts: null // needed in AlertMixin
+            show: false
         };
     },
-    
-    handleChange(event) {
-        this.setState({value: event.target.value});
+
+    handleFocus() {
+        this.refs.checkbox.getDOMNode().checked = !this.refs.checkbox.getDOMNode().checked;
+        this.setState({
+            show: this.refs.checkbox.getDOMNode().checked
+        });
     },
 
     render() {
-        let alerts = (this.props.submitted) ? null : this.state.alerts;
         return (
-            <div className="form-group">
-                {alerts}
-                <div className="input-checkbox-ascribe">
-                    <div className="checkbox">
-                        <label>
-                            <input
-                                type="checkbox"
-                                required={this.props.required}
-                                onChange={this.handleChange}
-                            />
-                            {this.props.label}
-                        </label>
-                    </div>
-                </div>
-            </div>
+            <span
+                onClick={this.handleFocus}
+                onFocus={this.handleFocus}>
+                <input type="checkbox" ref="checkbox"/>
+                <span className="checkbox">
+                    <span>
+                        {getLangText('I agree to the Terms of Service') + ' '}
+                        (<a href="/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
+                            {getLangText('read')}
+                        </a>)
+                    </span>
+                </span>
+            </span>
         );
-
     }
 });
 

js/components/ascribe_forms/property.js

@@ -18,13 +18,21 @@ let Property = React.createClass({
         ]),
         footer: React.PropTypes.element,
         handleChange: React.PropTypes.func,
-        ignoreFocus: React.PropTypes.bool
+        ignoreFocus: React.PropTypes.bool,
+        className: React.PropTypes.string,
+        onClick: React.PropTypes.func,
+        onChange: React.PropTypes.func,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
     },
 
     getDefaultProps() {
         return {
             editable: true,
-            hidden: false
+            hidden: false,
+            className: ''
         };
     },
 
@@ -36,12 +44,14 @@ let Property = React.createClass({
             errors: null
         };
     },
+
     componentWillReceiveProps(){
         this.setState({
             initialValue: this.refs.input.getDOMNode().defaultValue,
             value: this.refs.input.getDOMNode().value
         });
     },
+
     reset(){
         // maybe do reset by reload instead of frontend state?
         this.setState({value: this.state.initialValue});
@@ -62,26 +72,39 @@ let Property = React.createClass({
         }
         this.setState({value: event.target.value});
     },
+
     handleFocus() {
+        // if ignoreFocus (bool) is defined, then just ignore focusing on
+        // the property and input
         if(this.props.ignoreFocus) {
             return;
         }
+
+        // if onClick is defined from the outside,
+        // just call it
+        if(this.props.onClick) {
+            this.props.onClick();
+        }
+
         this.refs.input.getDOMNode().focus();
         this.setState({
             isFocused: true
         });
     },
+
     handleBlur() {
         this.setState({
             isFocused: false
         });
     },
+
     handleSuccess(){
         this.setState({
             isFocused: false,
             errors: null
         });
     },
+
     setErrors(errors){
         this.setState({
             errors: errors.map((error) => {
@@ -89,9 +112,11 @@ let Property = React.createClass({
             })
         });
     },
+
     clearErrors(){
         this.setState({errors: null});
     },
+
     getClassName() {
         if(this.props.hidden){
             return 'is-hidden';
@@ -108,6 +133,7 @@ let Property = React.createClass({
             return '';
         }
     },
+
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
             return ReactAddons.addons.cloneWithProps(child, {
@@ -120,6 +146,7 @@ let Property = React.createClass({
             });
         });
     },
+
     render() {
         let tooltip = <span/>;
         if (this.props.tooltip){
@@ -139,12 +166,12 @@ let Property = React.createClass({
             <div
                 className={'ascribe-settings-wrapper ' + this.getClassName()}
                 onClick={this.handleFocus}
-                onfocus={this.handleFocus}>
+                onFocus={this.handleFocus}>
                 <OverlayTrigger
                     delay={500}
                     placement="top"
                     overlay={tooltip}>
-                    <div className="ascribe-settings-property">
+                    <div className={'ascribe-settings-property ' + this.props.className}>
                         {this.state.errors}
                         <span>{ this.props.label}</span>
                         {this.renderChildren()}

js/components/signup_container.js

@@ -15,6 +15,7 @@ import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
 import InputCheckbox from './ascribe_forms/input_checkbox';
 
+
 import apiUrls from '../constants/api_urls';
 
 
@@ -77,6 +78,10 @@ let SignupContainer = React.createClass({
 
 
 let SignupForm = React.createClass({
+    propTypes: {
+        handleSuccess: React.PropTypes.func
+    },
+
     mixins: [Router.Navigation],
 
     handleSuccess(response){
@@ -142,16 +147,11 @@ let SignupForm = React.createClass({
                         type="text"
                         placeholder={getLangText('Enter a promocode here (Optional)')}/>
                 </Property>
-                <hr />
-                <InputCheckbox
-                    name='terms'
-                    required="required"
-                    label={
-                        <div>
-                            <a href="/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
-                                {getLangText('I agree to the')}&nbsp;{getLangText('Terms of Service')}
-                            </a>
-                        </div>}/>
+                <Property
+                    name="terms"
+                    className="ascribe-settings-property-collapsible-toggle">
+                    <InputCheckbox />
+                </Property>
             </Form>
         );
     }

js/constants/languages.js

@@ -207,6 +207,8 @@ const languages = {
         'Specify editions': 'Specify editions',
         'Editions': 'Editions',
         'Create editions': 'Create editions',
+        'I agree to the Terms of Service': 'I agree to the Terms of Service',
+        'read': 'read',
     },
     'de': {
         'ID': 'ID',
@@ -414,6 +416,8 @@ const languages = {
         'Specify editions': 'Specify editions',
         'Editions': 'Editions',
         'Create editions': 'Create editions',
+        'I agree to the Terms of Service': 'I agree to the Terms of Service',
+        'read': 'read',
     },
     'fr': {
         'ID': 'ID',
@@ -621,6 +625,8 @@ const languages = {
         'Specify editions': 'Specify editions',
         'Editions': 'Editions',
         'Create editions': 'Create editions',
+        'I agree to the Terms of Service': 'I agree to the Terms of Service',
+        'read': 'read',
     }
 };
 

sass/ascribe_accordion_list.scss

@@ -122,8 +122,11 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
 }
 
 span.ascribe-accordion-list-table-toggle {
-    ::selection { background: transparent; }
-    ::-moz-selection { background: transparent; }
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -ms-user-select: none;
+    
     &:hover {
         color: $ascribe-color-dark;
         cursor:pointer;

sass/ascribe_settings.scss

@@ -58,8 +58,6 @@
     }
 }
 
-
-
 .ascribe-settings-property {
     display: inline-block;
     width: 100%;
@@ -145,7 +143,7 @@
     cursor:pointer;
 
     /* Taken from: http://www.htmllion.com/css3-checkbox.html */
-    .checkbox {
+    > .checkbox {
         display: inline-block;
         cursor: pointer;
 
@@ -155,14 +153,15 @@
         color: rgba(0, 0, 0, .5);
         vertical-align:middle;
 
-        span {
+        > span {
             position: relative;
             top: 1px;
             left: 5px;
 
-            &:hover {
-                color: rgba(2, 182, 163, 1);
-            }
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -khtml-user-select: none;
+            -ms-user-select: none;
         }
     }
 

sass/main.scss

@@ -92,6 +92,11 @@ hr {
     padding-right:0;
 }
 
+.clear-margins {
+    margin-top:0;
+    margin-bottom:0;
+}
+
 .ascribe-color {
     color: $ascribe-color;
 }