Merge branch 'AD-499-whitelabel-prize-with-sluice-as-k' of bitbucket.org:ascribe/onion into AD-499-whitelabel-prize-with-sluice-as-k

js/components/ascribe_forms/form.js

@@ -56,9 +56,11 @@ let Form = React.createClass({
 
     getFormData(){
         let data = {};
+        console.log(this.refs);
         for (let ref in this.refs){
             data[this.refs[ref].props.name] = this.refs[ref].state.value;
         }
+        console.log(data);
         if ('getFormData' in this.props){
             data = mergeOptionsWithDuplicates(data, this.props.getFormData());
         }

js/components/ascribe_forms/form_signup.js

@@ -126,7 +126,14 @@ let SignupForm = React.createClass({
                     name="terms"
                     className="ascribe-settings-property-collapsible-toggle"
                     style={{paddingBottom: 0}}>
-                    <InputCheckbox/>
+                    <InputCheckbox>
+                        <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>
+                    </InputCheckbox>
                 </Property>
             </Form>
         );

js/components/ascribe_forms/input_checkbox.js

@@ -2,12 +2,13 @@
 
 import React from 'react';
 
-import { getLangText } from '../../utils/lang_utils';
-
 let InputCheckbox = React.createClass({
     propTypes: {
         required: React.PropTypes.string.isRequired,
-        label: React.PropTypes.string.isRequired
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]).isRequired
     },
 
     getInitialState() {
@@ -16,12 +17,22 @@ let InputCheckbox = React.createClass({
         };
     },
 
-    handleFocus() {
+    handleFocus(event) {
         this.refs.checkbox.getDOMNode().checked = !this.refs.checkbox.getDOMNode().checked;
+        
+        // This is calling property.js's method handleChange which
+        // expects an event object
+        // Since we don't have a valid one, we'll just manipulate the one we get and send
+        // it to handleChange
+        event.target.value = this.refs.checkbox.getDOMNode().checked;
+        this.props.onChange(event);
+        event.stopPropagation();
+
         this.setState({
             show: this.refs.checkbox.getDOMNode().checked,
             value: this.refs.checkbox.getDOMNode().checked
         });
+        
     },
 
     render() {
@@ -31,12 +42,7 @@ let InputCheckbox = React.createClass({
                 onFocus={this.handleFocus}>
                 <input type="checkbox" ref="checkbox"/>
                 <span className="checkbox">
-                    <span>
+                    {this.props.children}
-                        {' ' + 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

@@ -46,11 +46,20 @@ let Property = React.createClass({
         };
     },
 
-    componentWillReceiveProps(){
+    componentWillReceiveProps() {
+
+        // 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') {
             this.setState({
-            initialValue: this.refs.input.getDOMNode().defaultValue,
                 value: this.refs.input.getDOMNode().value
             });
+        }
+
+        this.setState({
+            initialValue: this.refs.input.getDOMNode().defaultValue
+        });
     },
 
     reset(){
@@ -67,11 +76,13 @@ let Property = React.createClass({
     },
 
     handleChange(event) {
+
         this.props.handleChange(event);
         if ('onChange' in this.props) {
             this.props.onChange(event);
         }
-        this.setState({value: event.target.value});
+
+        this.setState({value: true});
     },
 
     handleFocus() {

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -4,16 +4,17 @@ import React from 'react';
 
 import Input from 'react-bootstrap/lib/Input';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
-import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
-import Row from 'react-bootstrap/lib/Row';
-import Col from 'react-bootstrap/lib/Col';
 import { getLangText } from '../../utils/lang_utils';
 
 let PieceListToolbar = React.createClass({
 
     propTypes: {
         className: React.PropTypes.string,
-        searchFor: React.PropTypes.func
+        searchFor: React.PropTypes.func,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
     },
 
     searchFor() {
@@ -29,6 +30,9 @@ let PieceListToolbar = React.createClass({
                 <div className="row">
                     <div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
                         <div className="row">
+                            <span className="pull-left">
+                                {this.props.children}
+                            </span>
                             <span className="pull-right search-bar">
                                 <Input
                                     type='text'

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -163,6 +163,13 @@ var ReactS3FineUploader = React.createClass({
         }
     },
 
+    componentWillUnmount() {
+        // Without this method, fineuploader will continue to try to upload artworks
+        // even though this component is not mounted any more.
+        // Therefore we cancel all uploads
+        this.state.uploader.cancelAll();
+    },
+
     propsToConfig() {
         let objectProperties = this.props.objectProperties;
         objectProperties.key = this.requestKey;

js/components/header.js

@@ -27,8 +27,18 @@ import { getLangText } from '../utils/lang_utils';
 
 
 let Header = React.createClass({
+    propTypes: {
+        showAddWork: React.PropTypes.bool
+    },
+
     mixins: [Router.Navigation, Router.State],
 
+    getDefaultProps() {
+        return {
+            showAddWork: true
+        };
+    },
+
     getInitialState() {
         return mergeOptions(WhitelabelStore.getState(), UserStore.getState());
     },
@@ -96,7 +106,7 @@ let Header = React.createClass({
             );
 
             collection = <NavItemLink to="pieces" query={this.getQuery()}>{getLangText('COLLECTION')}</NavItemLink>;
-            addNewWork = <NavItemLink to="register_piece">+ {getLangText('NEW WORK')}</NavItemLink>;
+            addNewWork = this.props.showAddWork ? <NavItemLink to="register_piece">+ {getLangText('NEW WORK')}</NavItemLink> : null;
         }
         else {
             account = <NavItemLink to="login">{getLangText('LOGIN')}</NavItemLink>;

js/components/piece_list.js

@@ -20,7 +20,8 @@ import AppConstants from '../constants/application_constants';
 
 let PieceList = React.createClass({
     propTypes: {
-        redirectTo: React.PropTypes.string
+        redirectTo: React.PropTypes.string,
+        customSubmitButton: React.PropTypes.element
     },
 
     mixins: [Router.Navigation, Router.State],
@@ -93,7 +94,9 @@ let PieceList = React.createClass({
             <div>
                 <PieceListToolbar
                     className="ascribe-piece-list-toolbar"
-                    searchFor={this.searchFor} />
+                    searchFor={this.searchFor}>
+                    {this.props.customSubmitButton}
+                </PieceListToolbar>
                 <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
                 <AccordionList
                     className="ascribe-accordion-list"

js/components/whitelabel/prize/app.js

@@ -9,7 +9,6 @@ import GlobalNotification from '../../global_notification';
 
 let RouteHandler = Router.RouteHandler;
 
-
 let PrizeApp = React.createClass({
     mixins: [Router.State],
 
@@ -18,7 +17,7 @@ let PrizeApp = React.createClass({
         if (this.isActive('landing') || this.isActive('login') || this.isActive('signup')) {
             header = <Hero />;
         } else {
-            header = <Header />;
+            header = <Header showAddWork={false} />;
         }
 
         return (

js/components/whitelabel/prize/components/piece_list.js

@@ -10,11 +10,13 @@ let PrizePieceList = React.createClass({
     render() {
         return (
             <div>
+                <PieceList
+                    redirectTo="register_piece"
+                    customSubmitButton={
                         <ButtonLink to="register_piece">
                             Submit a new artwork to the prize
                         </ButtonLink>
-
+                    }/>
-                <PieceList redirectTo="register_piece" />
             </div>
         );
     }

js/components/whitelabel/prize/components/register_piece.js

@@ -40,7 +40,14 @@ let PrizeRegisterPiece = React.createClass({
                     name="terms"
                     className="ascribe-settings-property-collapsible-toggle"
                     style={{paddingBottom: 0}}>
-                    <InputCheckbox/>
+                    <InputCheckbox>
+                        <span>
+                            {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
+                            (<a href="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/sluice/terms.pdf" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
+                                {getLangText('read')}
+                            </a>)
+                        </span>
+                    </InputCheckbox>
                 </Property>
             </RegisterPiece>
         );

sass/whitelabel/prize/index.scss

@@ -1,6 +1,7 @@
 @import 'landing';
 
 .ascribe-prize-app {
+    background-color: #FDFDFD;
     border-radius: 0;
     padding-top: 70px;
 }

sass/whitelabel/prize/landing.scss

@@ -1,6 +1,4 @@
 .wp {
-    background-color: #FDFDFD;
-
     height: 100%;
 
     /* We need this, otherwise piece list will have a scrollbar */