make dropzone inactive when user is logged out

js/components/ascribe_forms/form_register_piece.js

@@ -21,8 +21,9 @@ let RegisterPieceForm = React.createClass({
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
         handleSuccess: React.PropTypes.func,
-        isFineUploaderEditable: React.PropTypes.bool,
+        isFineUploaderActive: React.PropTypes.bool,
-        children: React.PropTypes.element
+        children: React.PropTypes.element,
+        onLoggedOut: React.PropTypes.func
     },
 
     getDefaultProps() {
@@ -94,7 +95,8 @@ let RegisterPieceForm = React.createClass({
                         submitKey={this.submitKey}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={this.isReadyForFormSubmission}
-                        editable={this.props.isFineUploaderEditable}/>
+                        isFineUploaderActive={this.props.isFineUploaderActive}
+                        onLoggedOut={this.props.onLoggedOut}/>
                 </Property>
                 <Property
                     name='artist_name'
@@ -133,10 +135,11 @@ let FileUploader = React.createClass({
         submitKey: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func,
         onClick: React.PropTypes.func,
-        // editable is used to lock react fine uploader in case
+        // isFineUploaderActive 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
+        isFineUploaderActive: React.PropTypes.bool,
+        onLoggedOut: React.PropTypes.func
     },
 
     render() {
@@ -158,7 +161,7 @@ let FileUploader = React.createClass({
                 setIsUploadReady={this.props.setIsUploadReady}
                 isReadyForFormSubmission={this.props.isReadyForFormSubmission}
                 areAssetsDownloadable={false}
-                areAssetsEditable={this.props.editable}
+                areAssetsEditable={this.props.isFineUploaderActive}
                 signature={{
                     endpoint: AppConstants.serverUrl + 's3/signature/',
                     customHeaders: {
@@ -172,7 +175,8 @@ let FileUploader = React.createClass({
                     customHeaders: {
                        'X-CSRFToken': getCookie(AppConstants.csrftoken)
                     }
-                }}/>
+                }}
+                onInactive={this.props.onLoggedOut}/>
         );
     }
 });

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -18,6 +18,7 @@ let FileDragAndDrop = React.createClass({
         onDragLeave: React.PropTypes.func,
         onDragOver: React.PropTypes.func,
         onDragEnd: React.PropTypes.func,
+        onInactive: React.PropTypes.func,
         filesToUpload: React.PropTypes.array,
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
@@ -72,6 +73,15 @@ let FileDragAndDrop = React.createClass({
         event.stopPropagation();
         let files;
 
+        if(this.props.dropzoneInactive) {
+            // if there is a handle function for doing stuff
+            // when the dropzone is inactive, then call it
+            if(this.props.onInactive) {
+                this.props.onInactive();
+            }
+            return;
+        }
+
         // handle Drag and Drop
         if(event.dataTransfer && event.dataTransfer.files.length > 0) {
             files = event.dataTransfer.files;
@@ -113,10 +123,15 @@ let FileDragAndDrop = React.createClass({
         this.props.handleResumeFile(fileId);
     },
 
-    handleOnClick(event) {
+    handleOnClick() {
         // when multiple is set to false and the user already uploaded a piece,
         // do not propagate event
         if(this.props.dropzoneInactive) {
+            // if there is a handle function for doing stuff
+            // when the dropzone is inactive, then call it
+            if(this.props.onInactive) {
+                this.props.onInactive();
+            }
             return;
         }
 

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -95,7 +95,8 @@ var ReactS3FineUploader = React.createClass({
         isReadyForFormSubmission: React.PropTypes.func,
         areAssetsDownloadable: React.PropTypes.bool,
         areAssetsEditable: React.PropTypes.bool,
-        defaultErrorMessage: React.PropTypes.string
+        defaultErrorMessage: React.PropTypes.string,
+        onInactive: React.PropTypes.func
     },
 
     getDefaultProps() {
@@ -555,7 +556,8 @@ var ReactS3FineUploader = React.createClass({
                     multiple={this.props.multiple}
                     areAssetsDownloadable={this.props.areAssetsDownloadable}
                     areAssetsEditable={this.props.areAssetsEditable}
-                    dropzoneInactive={!this.props.areAssetsEditable || !this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1).length > 0} />
+                    dropzoneInactive={!this.props.areAssetsEditable || !this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1).length > 0}
+                    onInactive={this.props.onInactive}/>
             </div>
         );
     }

js/components/register_piece.js

@@ -59,7 +59,7 @@ let RegisterPiece = React.createClass( {
             PieceListStore.getState(),
             {
                 selectedLicense: 0,
-                isFineUploaderEditable: false
+                isFineUploaderActive: false
             });
     },
 
@@ -89,7 +89,7 @@ let RegisterPiece = React.createClass( {
             this.refs.slidesContainer.setSlideNum(0);
             // we should also make the fineuploader component editable again
             this.setState({
-                isFineUploaderEditable: true
+                isFineUploaderActive: true
             });
         }
     },
@@ -105,7 +105,8 @@ let RegisterPiece = React.createClass( {
             this.state.pageSize,
             this.state.searchTerm,
             this.state.orderBy,
-            this.state.orderAsc);
+            this.state.orderAsc
+        );
 
         this.transitionTo('piece', {pieceId: response.piece.id});
     },
@@ -160,11 +161,16 @@ let RegisterPiece = React.createClass( {
     changeSlide() {
         // only transition to the login store, if user is not logged in
         // ergo the currentUser object is not properly defined
-        if(!this.state.currentUser.email) {
+        if(this.state.currentUser && !this.state.currentUser.email) {
             this.refs.slidesContainer.setSlideNum(1);
         }
     },
 
+    // basically redirects to the second slide (index: 1), when the user is not logged in
+    onLoggedOut() {
+        this.refs.slidesContainer.setSlideNum(1);
+    },
+
     render() {
         return (
             <SlidesContainer ref="slidesContainer">
@@ -175,8 +181,9 @@ let RegisterPiece = React.createClass( {
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
                                 {...this.props}
-                                isFineUploaderEditable={this.state.isFineUploaderEditable}
+                                isFineUploaderActive={this.state.isFineUploaderActive}
-                                handleSuccess={this.handleSuccess}>
+                                handleSuccess={this.handleSuccess}
+                                onLoggedOut={this.onLoggedOut}>
                                 {this.props.children}
                                 {this.getLicenses()}
                                 {this.getSpecifyEditions()}

sass/main.scss

@@ -43,6 +43,7 @@ html {
 .ascribe-default-app {
     max-width: 90%;
     padding-top: 70px;
+    overflow-x: hidden;
 }
 
 hr {