1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00

make dropzone inactive when user is logged out

This commit is contained in:
Tim Daubenschütz 2015-07-21 11:09:21 +02:00
parent d0e5fe50cb
commit 23e6cc17b2
5 changed files with 45 additions and 16 deletions

View File

@ -21,8 +21,9 @@ let RegisterPieceForm = React.createClass({
headerMessage: React.PropTypes.string,
submitMessage: React.PropTypes.string,
handleSuccess: React.PropTypes.func,
isFineUploaderEditable: React.PropTypes.bool,
children: React.PropTypes.element
isFineUploaderActive: React.PropTypes.bool,
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}/>
);
}
});

View File

@ -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;
}

View File

@ -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>
);
}

View File

@ -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}
handleSuccess={this.handleSuccess}>
isFineUploaderActive={this.state.isFineUploaderActive}
handleSuccess={this.handleSuccess}
onLoggedOut={this.onLoggedOut}>
{this.props.children}
{this.getLicenses()}
{this.getSpecifyEditions()}

View File

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