From 1f73811950a736c4db08b78c4b9ee131a0ba988b Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Mon, 13 Jul 2015 18:13:47 +0200
Subject: [PATCH] register form separate spinner => spans

---
 .../accordion_list_item_create_editions.js    |   4 +-
 js/components/ascribe_forms/form_login.js     |   8 +-
 .../ascribe_forms/form_register_piece.js      | 165 ++++++++++++++++++
 js/components/ascribe_forms/form_signup.js    |   4 +-
 js/components/coa_verify_container.js         |   4 +-
 js/components/login_container.js              |  10 +-
 js/components/password_reset_container.js     |   8 +-
 js/components/register_piece.js               | 147 +---------------
 8 files changed, 193 insertions(+), 157 deletions(-)
 create mode 100644 js/components/ascribe_forms/form_register_piece.js

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_create_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_create_editions.js
index 30a6efbc..66fadd8d 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_create_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_create_editions.js
@@ -30,9 +30,9 @@ let AccordionListItemCreateEditions = React.createClass({
                     getFormData={this.getFormData}
                     handleSuccess={this.props.handleSuccess}
                     spinner={
-                        <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                             <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                        </button>
+                        </span>
                         }>
                     <Property
                         name='num_editions'
diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js
index fbc2e80e..de483874 100644
--- a/js/components/ascribe_forms/form_login.js
+++ b/js/components/ascribe_forms/form_login.js
@@ -24,6 +24,8 @@ let LoginForm = React.createClass({
         redirectOnLoginSuccess: React.PropTypes.bool
     },
 
+    mixins: [Router.Navigation],
+
     getDefaultProps() {
         return {
             redirectOnLoggedIn: true,
@@ -31,8 +33,6 @@ let LoginForm = React.createClass({
         };
     },
 
-    mixins: [Router.Navigation],
-
     getInitialState() {
         return UserStore.getState();
     },
@@ -90,9 +90,9 @@ let LoginForm = React.createClass({
                         {getLangText('Enter')} ascribe
                     </button>}
                 spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
+                    </span>
                     }>
                 <Property
                     name='email'
diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
new file mode 100644
index 00000000..41d0834f
--- /dev/null
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -0,0 +1,165 @@
+'use strict';
+
+import React from 'react';
+
+import AppConstants from '../../constants/application_constants';
+
+import Form from './form';
+import Property from './property';
+import FormPropertyHeader from './form_property_header';
+
+import apiUrls from '../../constants/api_urls';
+
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+
+import { getCookie } from '../../utils/fetch_api_utils';
+import { getLangText } from '../../utils/lang_utils';
+
+
+let RegisterPieceForm = React.createClass({
+    getInitialState(){
+        return {
+            digitalWorkKey: null,
+            isUploadReady: false
+        };
+    },
+
+    getFormData(){
+        return {
+            digital_work_key: this.state.digitalWorkKey
+        };
+    },
+
+    submitKey(key){
+        this.setState({
+            digitalWorkKey: key
+        });
+    },
+
+    setIsUploadReady(isReady) {
+        this.setState({
+            isUploadReady: isReady
+        });
+    },
+
+    isReadyForFormSubmission(files) {
+        files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
+        if (files.length > 0 && files[0].status === 'upload successful') {
+            return true;
+        } else {
+            return false;
+        }
+    },
+
+    render() {
+        return (
+            <Form
+                className="ascribe-form-bordered"
+                ref='form'
+                url={apiUrls.pieces_list}
+                getFormData={this.getFormData}
+                handleSuccess={this.props.handleSuccess}
+                buttons={<button
+                            type="submit"
+                            className="btn ascribe-btn ascribe-btn-login"
+                            disabled={!this.state.isUploadReady}>
+                            {getLangText('Register work')}
+                        </button>}
+                spinner={
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    </span>
+                    }>
+                <FormPropertyHeader>
+                    <h3>{getLangText('Register your work')}</h3>
+                </FormPropertyHeader>
+                <Property
+                    ignoreFocus={true}>
+                    <FileUploader
+                        submitKey={this.submitKey}
+                        setIsUploadReady={this.setIsUploadReady}
+                        isReadyForFormSubmission={this.isReadyForFormSubmission}
+                        editable={this.props.isFineUploaderEditable}/>
+                </Property>
+                <Property
+                    name='artist_name'
+                    label={getLangText('Artist Name')}>
+                    <input
+                        type="text"
+                        placeholder="(e.g. Andy Warhol)"
+                        required/>
+                </Property>
+                <Property
+                    name='title'
+                    label={getLangText('Title')}>
+                    <input
+                        type="text"
+                        placeholder="(e.g. 32 Campbell's Soup Cans)"
+                        required/>
+                </Property>
+                <Property
+                    name='date_created'
+                    label={getLangText('Year Created')}>
+                    <input
+                        type="number"
+                        placeholder="(e.g. 1962)"
+                        min={0}
+                        required/>
+                </Property>
+                {this.props.children}
+            </Form>
+        );
+    }
+});
+
+let FileUploader = React.createClass({
+    propTypes: {
+        setIsUploadReady: React.PropTypes.func,
+        submitKey: React.PropTypes.func,
+        isReadyForFormSubmission: React.PropTypes.func,
+        onClick: React.PropTypes.func,
+        // editable is used to lock react fine uploader in case
+        // a user is actually not logged in already to prevent him from droping files
+        // before login in
+        editable: React.PropTypes.bool
+    },
+
+    render() {
+        return (
+            <ReactS3FineUploader
+                onClick={this.props.onClick}
+                keyRoutine={{
+                    url: AppConstants.serverUrl + 's3/key/',
+                    fileClass: 'digitalwork'
+                }}
+                createBlobRoutine={{
+                    url: apiUrls.blob_digitalworks
+                }}
+                submitKey={this.props.submitKey}
+                validation={{
+                    itemLimit: 100000,
+                    sizeLimit: '25000000000'
+                }}
+                setIsUploadReady={this.props.setIsUploadReady}
+                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
+                areAssetsDownloadable={false}
+                areAssetsEditable={this.props.editable}
+                signature={{
+                    endpoint: AppConstants.serverUrl + 's3/signature/',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie('csrftoken')
+                    }
+                }}
+                deleteFile={{
+                    enabled: true,
+                    method: 'DELETE',
+                    endpoint: AppConstants.serverUrl + 's3/delete',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie('csrftoken')
+                    }
+                }}/>
+        );
+    }
+});
+
+export default RegisterPieceForm;
\ No newline at end of file
diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js
index 258a3923..3c50c7fd 100644
--- a/js/components/ascribe_forms/form_signup.js
+++ b/js/components/ascribe_forms/form_signup.js
@@ -75,9 +75,9 @@ let SignupForm = React.createClass({
                         {getLangText('Sign up to ascribe')}
                     </button>}
                 spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
+                    </span>
                     }>
                 <FormPropertyHeader>
                     <h3>{getLangText('Welcome to ascribe')}</h3>
diff --git a/js/components/coa_verify_container.js b/js/components/coa_verify_container.js
index 6afbdfa5..8c2f2e77 100644
--- a/js/components/coa_verify_container.js
+++ b/js/components/coa_verify_container.js
@@ -68,9 +68,9 @@ let CoaVerifyForm = React.createClass({
                             {getLangText('Verify your Certificate of Authenticity')}
                         </button>}
                     spinner={
-                        <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                             <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                        </button>
+                        </span>
                         }>
                     <Property
                         name='message'
diff --git a/js/components/login_container.js b/js/components/login_container.js
index b3bfc3b4..90e0e37a 100644
--- a/js/components/login_container.js
+++ b/js/components/login_container.js
@@ -12,12 +12,16 @@ let Link = Router.Link;
 
 let LoginContainer = React.createClass({
     propTypes: {
-        message: React.PropTypes.string
+        message: React.PropTypes.string,
+        redirectOnLoggedIn: React.PropTypes.bool,
+        redirectOnLoginSuccess: React.PropTypes.bool
     },
 
     getDefaultProps() {
         return {
-            message: getLangText('Enter') + ' ascribe'
+            message: getLangText('Enter') + ' ascribe',
+            redirectOnLoggedIn: true,
+            redirectOnLoginSuccess: true
         };
     },
 
@@ -26,6 +30,8 @@ let LoginContainer = React.createClass({
             <div className="ascribe-login-wrapper">
                 <br/>
                 <LoginForm
+                    redirectOnLoggedIn={this.props.redirectOnLoggedIn}
+                    redirectOnLoginSuccess={this.props.redirectOnLoginSuccess}
                     message={this.props.message} />
                 <div className="ascribe-login-text">
                     {getLangText('Not an ascribe user')}&#63; <Link to="signup">{getLangText('Sign up')}...</Link><br/>
diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js
index 5ab258b0..b149d45d 100644
--- a/js/components/password_reset_container.js
+++ b/js/components/password_reset_container.js
@@ -82,9 +82,9 @@ let PasswordRequestResetForm = React.createClass({
                         {getLangText('Reset your password')}
                     </button>}
                 spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
+                    </span>
                     }>
                 <Property
                     name='email'
@@ -129,9 +129,9 @@ let PasswordResetForm = React.createClass({
                         {getLangText('Reset your password')}
                     </button>}
                 spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
+                    </span>
                     }>
                 <Property
                     name='password'
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index cb3a7946..f0a59ab0 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -2,14 +2,10 @@
 
 import React from 'react';
 
-import DatePicker from 'react-datepicker/dist/react-datepicker';
-
 import Router from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
-import AppConstants from '../constants/application_constants';
-
 import LicenseActions from '../actions/license_actions';
 import LicenseStore from '../stores/license_store';
 
@@ -21,17 +17,14 @@ import UserStore from '../stores/user_store';
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
-import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
 import PropertyCollapsible from './ascribe_forms/property_collapsible';
-import FormPropertyHeader from './ascribe_forms/form_property_header';
+import RegisterPieceForm from './ascribe_forms/form_register_piece';
+//import FormPropertyHeader from './ascribe_forms/form_property_header';
 
 import LoginContainer from './login_container';
 import SlidesContainer from './ascribe_slides_container/slides_container';
 
-import apiUrls from '../constants/api_urls';
-
-import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
 
 import { mergeOptions } from '../utils/general_utils';
 import { getCookie } from '../utils/fetch_api_utils';
@@ -46,8 +39,6 @@ let RegisterPiece = React.createClass( {
             UserStore.getState(),
             PieceListStore.getState(),
             {
-                digitalWorkKey: null,
-                uploadStatus: false,
                 selectedLicense: 0,
                 isFineUploaderEditable: false
             });
@@ -97,32 +88,6 @@ let RegisterPiece = React.createClass( {
         this.transitionTo('piece', {pieceId: response.piece.id});
     },
 
-    getFormData(){
-        return {
-            digital_work_key: this.state.digitalWorkKey
-        };
-    },
-
-    submitKey(key){
-        this.setState({
-            digitalWorkKey: key
-        });
-    },
-
-    setIsUploadReady(isReady) {
-        this.setState({
-            isUploadReady: isReady
-        });
-    },
-
-    isReadyForFormSubmission(files) {
-        files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
-        if (files.length > 0 && files[0].status === 'upload successful') {
-            return true;
-        } else {
-            return false;
-        }
-    },
     onLicenseChange(event){
         //console.log(this.state.licenses[event.target.selectedIndex].url);
         this.setState({selectedLicense: event.target.selectedIndex});
@@ -170,59 +135,9 @@ let RegisterPiece = React.createClass( {
                     onFocus={this.changeSlide}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
-                            <Form
-                                className="ascribe-form-bordered"
-                                ref='form'
-                                url={apiUrls.pieces_list}
-                                getFormData={this.getFormData}
-                                handleSuccess={this.handleSuccess}
-                                buttons={<button
-                                            type="submit"
-                                            className="btn ascribe-btn ascribe-btn-login"
-                                            disabled={!this.state.isUploadReady}>
-                                            {getLangText('Register work')}
-                                        </button>}
-                                spinner={
-                                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
-                                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                                    </button>
-                                    }>
-                                <FormPropertyHeader>
-                                    <h3>{getLangText('Register your work')}</h3>
-                                </FormPropertyHeader>
-                                <Property
-                                    ignoreFocus={true}>
-                                    <FileUploader
-                                        submitKey={this.submitKey}
-                                        setIsUploadReady={this.setIsUploadReady}
-                                        isReadyForFormSubmission={this.isReadyForFormSubmission}
-                                        editable={this.state.isFineUploaderEditable}/>
-                                </Property>
-                                <Property
-                                    name='artist_name'
-                                    label={getLangText('Artist Name')}>
-                                    <input
-                                        type="text"
-                                        placeholder="(e.g. Andy Warhol)"
-                                        required/>
-                                </Property>
-                                <Property
-                                    name='title'
-                                    label={getLangText('Title')}>
-                                    <input
-                                        type="text"
-                                        placeholder="(e.g. 32 Campbell's Soup Cans)"
-                                        required/>
-                                </Property>
-                                <Property
-                                    name='date_created'
-                                    label={getLangText('Year Created')}>
-                                    <input
-                                        type="number"
-                                        placeholder="(e.g. 1962)"
-                                        min={0}
-                                        required/>
-                                </Property>
+                            <RegisterPieceForm
+                                isFineUploaderEditable={this.state.isFineUploaderEditable}
+                                handleSuccess={this.handleSuccess}>
                                 <PropertyCollapsible
                                     checkboxLabel={getLangText('Specify editions')}>
                                     <span>{getLangText('Editions')}</span>
@@ -232,7 +147,7 @@ let RegisterPiece = React.createClass( {
                                         min={0}/>
                                 </PropertyCollapsible>
                                 {this.getLicenses()}
-                            </Form>
+                            </RegisterPieceForm>
                         </Col>
                     </Row>
                 </div>
@@ -248,54 +163,4 @@ let RegisterPiece = React.createClass( {
 });
 
 
-let FileUploader = React.createClass({
-    propTypes: {
-        setIsUploadReady: React.PropTypes.func,
-        submitKey: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func,
-        onClick: React.PropTypes.func,
-        // editable is used to lock react fine uploader in case
-        // a user is actually not logged in already to prevent him from droping files
-        // before login in
-        editable: React.PropTypes.bool
-    },
-
-    render() {
-        return (
-            <ReactS3FineUploader
-                onClick={this.props.onClick}
-                keyRoutine={{
-                    url: AppConstants.serverUrl + 's3/key/',
-                    fileClass: 'digitalwork'
-                }}
-                createBlobRoutine={{
-                    url: apiUrls.blob_digitalworks
-                }}
-                submitKey={this.props.submitKey}
-                validation={{
-                    itemLimit: 100000,
-                    sizeLimit: '25000000000'
-                }}
-                setIsUploadReady={this.props.setIsUploadReady}
-                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
-                areAssetsDownloadable={false}
-                areAssetsEditable={this.props.editable}
-                signature={{
-                    endpoint: AppConstants.serverUrl + 's3/signature/',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie('csrftoken')
-                    }
-                }}
-                deleteFile={{
-                    enabled: true,
-                    method: 'DELETE',
-                    endpoint: AppConstants.serverUrl + 's3/delete',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie('csrftoken')
-                    }
-                }}/>
-        );
-    }
-});
-
 export default RegisterPiece;