@@ -433,8 +442,7 @@ let CoaDetails = React.createClass({
diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index ecbd17de..278901a7 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -45,7 +45,7 @@ let Form = React.createClass({ this.setState({submitted: true}); this.clearErrors(); let action = (this.httpVerb && this.httpVerb()) || 'post'; - this[action](); + window.setTimeout(() => this[action](), 100); }, post(){ requests @@ -59,6 +59,7 @@ let Form = React.createClass({ for (let ref in this.refs){ data[this.refs[ref].props.name] = this.refs[ref].state.value; } + if ('getFormData' in this.props){ data = mergeOptionsWithDuplicates(data, this.props.getFormData()); } @@ -90,7 +91,7 @@ let Form = React.createClass({ } } else { - console.logGlobal(err); + console.logGlobal(err, false, this.getFormData()); this.setState({errors: [getLangText('Something went wrong, please try again later')]}); } this.setState({submitted: false}); diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js index 9e7c9fcc..da5ad6f0 100644 --- a/js/components/ascribe_forms/form_loan.js +++ b/js/components/ascribe_forms/form_loan.js @@ -15,7 +15,6 @@ import LoanContractActions from '../../actions/loan_contract_actions'; import AppConstants from '../../constants/application_constants'; -import { mergeOptions } from '../../utils/general_utils'; import { getLangText } from '../../utils/lang_utils'; @@ -59,7 +58,8 @@ let LoanForm = React.createClass({ name="terms" className="ascribe-settings-property-collapsible-toggle" style={{paddingBottom: 0}}> - + {getLangText('I agree to the')} @@ -72,14 +72,11 @@ let LoanForm = React.createClass({ } else { return ( - + style={{paddingBottom: 0}} + hidden={true}> + ); } @@ -134,8 +131,7 @@ let LoanForm = React.createClass({ + label={getLangText('Gallery/exhibition (optional)')}> diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js index ee6efb54..24b0eb93 100644 --- a/js/components/ascribe_forms/form_login.js +++ b/js/components/ascribe_forms/form_login.js @@ -25,7 +25,8 @@ let LoginForm = React.createClass({ headerMessage: React.PropTypes.string, submitMessage: React.PropTypes.string, redirectOnLoggedIn: React.PropTypes.bool, - redirectOnLoginSuccess: React.PropTypes.bool + redirectOnLoginSuccess: React.PropTypes.bool, + onLogin: React.PropTypes.func }, mixins: [Router.Navigation], @@ -70,18 +71,29 @@ let LoginForm = React.createClass({ // The easiest way to check if the user was successfully logged in is to fetch the user // in the user store (which is obviously only possible if the user is logged in), since // register_piece is listening to the changes of the user_store. - UserActions.fetchCurrentUser(); + UserActions.fetchCurrentUser() + .then(() => { + if(this.props.redirectOnLoginSuccess) { + /* Taken from http://stackoverflow.com/a/14916411 */ + /* + We actually have to trick the Browser into showing the "save password" dialog + as Chrome expects the login page to be reloaded after the login. + Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future. + Until then, we redirect the HARD way, but reloading the whole page using window.location + */ + window.location = AppConstants.baseUrl + 'collection'; + } else if(this.props.onLogin) { + // In some instances we want to give a callback to an outer container, + // to show that the one login action the user triggered actually went through. + // We can not do this by listening on a store's state as it wouldn't really tell us + // if the user did log in or was just fetching the user's data again + this.props.onLogin(); + } + }) + .catch((err) => { + console.logGlobal(err); + }); - /* Taken from http://stackoverflow.com/a/14916411 */ - /* - We actually have to trick the Browser into showing the "save password" dialog - as Chrome expects the login page to be reloaded after the login. - Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future. - Until then, we redirect the HARD way, but reloading the whole page using window.location - */ - if(this.props.redirectOnLoginSuccess) { - window.location = AppConstants.baseUrl + 'collection'; - } }, render() { diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js index 00d3c4d4..b8e1c390 100644 --- a/js/components/ascribe_forms/form_register_piece.js +++ b/js/components/ascribe_forms/form_register_piece.js @@ -2,18 +2,21 @@ import React from 'react'; -import AppConstants from '../../constants/application_constants'; +import UserStore from '../../stores/user_store'; +import UserActions from '../../actions/user_actions'; 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 AppConstants from '../../constants/application_constants'; +import apiUrls from '../../constants/api_urls'; + import { getCookie } from '../../utils/fetch_api_utils'; import { getLangText } from '../../utils/lang_utils'; +import { mergeOptions } from '../../utils/general_utils'; let RegisterPieceForm = React.createClass({ @@ -21,8 +24,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() { @@ -33,10 +37,26 @@ let RegisterPieceForm = React.createClass({ }, getInitialState(){ - return { - digitalWorkKey: null, - isUploadReady: false - }; + return mergeOptions( + { + digitalWorkKey: null, + isUploadReady: false + }, + UserStore.getState() + ); + }, + + componentDidMount() { + UserStore.listen(this.onChange); + UserActions.fetchCurrentUser(); + }, + + componentWillUnmount() { + UserStore.unlisten(this.onChange); + }, + + onChange(state) { + this.setState(state); }, getFormData(){ @@ -67,6 +87,9 @@ let RegisterPieceForm = React.createClass({ }, render() { + let currentUser = this.state.currentUser; + let enableLocalHashing = currentUser && currentUser.profile ? currentUser.profile.hash_locally : false; + return ( + isFineUploaderActive={this.props.isFineUploaderActive} + onLoggedOut={this.props.onLoggedOut} + editable={this.props.isFineUploaderEditable} + enableLocalHashing={enableLocalHashing}/> + }} + onInactive={this.props.onLoggedOut} + enableLocalHashing={this.props.enableLocalHashing} /> ); } }); diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js index dc2a6cdb..238cd74e 100644 --- a/js/components/ascribe_forms/form_signup.js +++ b/js/components/ascribe_forms/form_signup.js @@ -63,9 +63,7 @@ let SignupForm = React.createClass({ this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.'); }, - getFormData(){ - return {terms: this.refs.form.refs.terms.refs.input.state.value}; - }, + render() { let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' + getLangText('This password is securing your digital property like a bank account') + '.\n ' + @@ -76,7 +74,6 @@ let SignupForm = React.createClass({ ref='form' url={apiUrls.users_signup} handleSuccess={this.handleSuccess} - getFormData={this.getFormData} buttons={ {this.props.submitMessage} diff --git a/js/components/ascribe_forms/input_checkbox.js b/js/components/ascribe_forms/input_checkbox.js index 6237fa6c..a71dd4b6 100644 --- a/js/components/ascribe_forms/input_checkbox.js +++ b/js/components/ascribe_forms/input_checkbox.js @@ -2,45 +2,87 @@ import React from 'react'; +/** + * This component can be used as a custom input element for form properties. + * It exposes its state via state.value and can be considered as a reference implementation + * for custom input components that live inside of properties. + */ let InputCheckbox = React.createClass({ propTypes: { - required: React.PropTypes.string.isRequired, + required: React.PropTypes.bool, + + // As can be read here: https://facebook.github.io/react/docs/forms.html + // inputs of type="checkbox" define their state via checked. + // Their default state is defined via defaultChecked. + // + // Since this component even has checkbox in its name, it felt wrong to expose defaultValue + // as the default-setting prop to other developers, which is why we choose defaultChecked. + defaultChecked: React.PropTypes.bool, children: React.PropTypes.oneOfType([ React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.element - ]).isRequired + ]) }, - getInitialState() { + // As HTML inputs, we're setting the default value for an input to checked === false + getDefaultProps() { return { - show: false + defaultChecked: false }; }, - 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(); + // Setting value to null in initialState is essentially since we're deriving a certain state from + // value === null as can be seen in componentWillReceiveProps. + getInitialState() { + return { + value: null + }; + }, - this.setState({ - show: this.refs.checkbox.getDOMNode().checked, - value: this.refs.checkbox.getDOMNode().checked + componentWillReceiveProps(nextProps) { + + // Developer's are used to define defaultValues for inputs via defaultValue, but since this is a + // input of type checkbox we warn the dev to not do that. + if(this.props.defaultValue) { + console.warn('InputCheckbox is of type checkbox. Therefore its value is represented by checked and defaultChecked. defaultValue will do nothing!'); + } + + // The first time InputCheckbox is rendered, we want to set its value to the value of defaultChecked. + // This needs to be done in order to expose it for the Property component. + // We can determine the first render by checking if value still has it's initialState(from getInitialState) + if(this.state.value === null) { + this.setState({value: nextProps.defaultChecked }); + } + }, + + onChange() { + // On every change, we're inversing the input's value + let inverseValue = !this.refs.checkbox.getDOMNode().checked; + + // pass it to the state + this.setState({value: inverseValue}); + + // and also call Property's onChange method + // (in this case we're mocking event.target.value, since we can not use the event + // coming from onChange. Its coming from the span (user is clicking on the span) and not the input) + this.props.onChange({ + target: { + value: inverseValue + } }); - + }, render() { return ( - + onClick={this.onChange}> + {this.props.children} diff --git a/js/components/ascribe_forms/input_hidden.js b/js/components/ascribe_forms/input_hidden.js deleted file mode 100644 index b6a8ac46..00000000 --- a/js/components/ascribe_forms/input_hidden.js +++ /dev/null @@ -1,39 +0,0 @@ -'use strict'; - -import React from 'react'; - -import AlertMixin from '../../mixins/alert_mixin'; - -let InputHidden = React.createClass({ - propTypes: { - submitted: React.PropTypes.bool, - value: React.PropTypes.string - }, - - mixins: [AlertMixin], - - getInitialState() { - return {value: this.props.value, - alerts: null // needed in AlertMixin - }; - }, - handleChange(event) { - this.setState({value: event.target.value}); - }, - render() { - let alerts = (this.props.submitted) ? null : this.state.alerts; - return ( - - {alerts} - - - ); - - } -}); - -export default InputHidden; \ No newline at end of file diff --git a/js/components/ascribe_forms/input_text.js b/js/components/ascribe_forms/input_text.js deleted file mode 100644 index 7f0ee5d0..00000000 --- a/js/components/ascribe_forms/input_text.js +++ /dev/null @@ -1,46 +0,0 @@ -'use strict'; - -import React from 'react'; - -import AlertMixin from '../../mixins/alert_mixin'; - -let InputText = React.createClass({ - propTypes: { - submitted: React.PropTypes.bool, - onBlur: React.PropTypes.func, - type: React.PropTypes.string, - required: React.PropTypes.string, - placeHolder: React.PropTypes.string - }, - - mixins: [AlertMixin], - - getInitialState() { - return {value: null, - alerts: null // needed in AlertMixin - }; - }, - - handleChange(event) { - this.setState({value: event.target.value}); - }, - - render() { - let className = 'form-control input-text-ascribe'; - let alerts = (this.props.submitted) ? null : this.state.alerts; - return ( - - {alerts} - - - ); - - } -}); - -export default InputText; \ No newline at end of file diff --git a/js/components/ascribe_forms/input_textarea.js b/js/components/ascribe_forms/input_textarea.js deleted file mode 100644 index 2c5ab40a..00000000 --- a/js/components/ascribe_forms/input_textarea.js +++ /dev/null @@ -1,41 +0,0 @@ -'use strict'; - -import React from 'react'; - -import AlertMixin from '../../mixins/alert_mixin'; - -let InputTextArea = React.createClass({ - propTypes: { - submitted: React.PropTypes.bool, - required: React.PropTypes.string, - defaultValue: React.PropTypes.string - }, - - mixins: [AlertMixin], - - getInitialState() { - return { - value: this.props.defaultValue, - alerts: null // needed in AlertMixin - }; - }, - handleChange(event) { - this.setState({value: event.target.value}); - }, - render() { - let className = 'form-control input-text-ascribe textarea-ascribe-message'; - - let alerts = (this.props.submitted) ? null : this.state.alerts; - return ( - - {alerts} - - - ); - } -}); - -export default InputTextArea; \ No newline at end of file diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js index 93a32baa..5f7fe603 100644 --- a/js/components/ascribe_forms/property.js +++ b/js/components/ascribe_forms/property.js @@ -39,6 +39,9 @@ let Property = React.createClass({ getInitialState() { return { + // Please don't confuse initialValue with react's defaultValue. + // initialValue is set by us to ensure that a user can reset a specific + // property (after editing) to its initial value initialValue: null, value: null, isFocused: false, @@ -47,19 +50,29 @@ let Property = React.createClass({ }, componentWillReceiveProps() { + let childInput = this.refs.input; // 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') { + if(typeof childInput.getDOMNode().value !== 'undefined') { this.setState({ - value: this.refs.input.getDOMNode().value + value: childInput.getDOMNode().value + }); + + // When implementing custom input components, their value isn't exposed like the one + // from native HTML elements. + // To enable developers to create input elements, they can expose a property called value + // in their state that will be picked up by property.js + } else if(childInput.state && typeof childInput.state.value !== 'undefined') { + this.setState({ + value: childInput.state.value }); } if(!this.state.initialValue) { this.setState({ - initialValue: this.refs.input.getDOMNode().defaultValue + initialValue: childInput.defaultValue }); } }, @@ -158,7 +171,6 @@ let Property = React.createClass({ renderChildren() { return ReactAddons.Children.map(this.props.children, (child) => { return ReactAddons.addons.cloneWithProps(child, { - value: this.state.value, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, diff --git a/js/components/ascribe_media/media_player.js b/js/components/ascribe_media/media_player.js index b4d821ae..da89f4a5 100644 --- a/js/components/ascribe_media/media_player.js +++ b/js/components/ascribe_media/media_player.js @@ -1,6 +1,8 @@ 'use strict'; import React from 'react'; +import Q from 'q'; + import InjectInHeadMixin from '../../mixins/inject_in_head_mixin'; import Panel from 'react-bootstrap/lib/Panel'; import ProgressBar from 'react-bootstrap/lib/ProgressBar'; @@ -47,7 +49,7 @@ let Image = React.createClass({ componentDidMount() { this.inject('https://code.jquery.com/jquery-2.1.4.min.js') .then(() => - Promise.all([ + Q.all([ this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/shmui.css'), this.inject(AppConstants.baseUrl + 'static/thirdparty/shmui/jquery.shmui.js') ]).then(() => { window.jQuery('.shmui-ascribe').shmui(); })); @@ -99,7 +101,7 @@ let Video = React.createClass({ }, componentDidMount() { - Promise.all([ + Q.all([ this.inject('//vjs.zencdn.net/4.12/video-js.css'), this.inject('//vjs.zencdn.net/4.12/video.js') ]).then(this.ready); diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js index 7e37c6c9..67286385 100644 --- a/js/components/ascribe_slides_container/slides_container.js +++ b/js/components/ascribe_slides_container/slides_container.js @@ -17,7 +17,7 @@ let SlidesContainer = React.createClass({ getInitialState() { // handle queryParameters let queryParams = this.getQuery(); - let slideNum = 0; + let slideNum = -1; if(queryParams && 'slide_num' in queryParams) { slideNum = parseInt(queryParams.slide_num, 10); @@ -26,7 +26,8 @@ let SlidesContainer = React.createClass({ return { containerWidth: 0, - slideNum: slideNum + slideNum: slideNum, + historyLength: window.history.length }; }, @@ -34,7 +35,12 @@ let SlidesContainer = React.createClass({ // check if slide_num was defined, and if not then default to 0 let queryParams = this.getQuery(); if(!('slide_num' in queryParams)) { - this.replaceWith(this.getPathname(), null, {slide_num: 0}); + + // we're first requiring all the other possible queryParams and then set + // the specific one we need instead of overwriting them + queryParams.slide_num = 0; + + this.replaceWith(this.getPathname(), null, queryParams); } // init container width @@ -45,22 +51,73 @@ let SlidesContainer = React.createClass({ window.addEventListener('resize', this.handleContainerResize); }, + componentDidUpdate() { + // check if slide_num was defined, and if not then default to 0 + let queryParams = this.getQuery(); + this.setSlideNum(queryParams.slide_num); + }, + componentWillUnmount() { window.removeEventListener('resize', this.handleContainerResize); }, handleContainerResize() { this.setState({ - containerWidth: this.refs.containerWrapper.getDOMNode().offsetWidth + // +30 to get rid of the padding of the container which is 15px + 15px left and right + containerWidth: this.refs.containerWrapper.getDOMNode().offsetWidth + 30 }); }, // We let every one from the outsite set the page number of the slider, // though only if the slideNum is actually in the range of our children-list. setSlideNum(slideNum) { - if(slideNum < 0 || slideNum < React.Children.count(this.props.children)) { - this.replaceWith(this.getPathname(), null, {slide_num: slideNum}); + // we do not want to overwrite other queryParams + let queryParams = this.getQuery(); + + // slideNum can in some instances be not a number, + // therefore we have to parse it to one and make sure that its not NaN + slideNum = parseInt(slideNum, 10); + + // if slideNum is not a number (even after we parsed it to one) and there has + // never been a transition to another slide (this.state.slideNum ==== -1 indicates that) + // then we want to "replace" (in this case append) the current url with ?slide_num=0 + if(isNaN(slideNum) && this.state.slideNum === -1) { + slideNum = 0; + + queryParams.slide_num = slideNum; + + this.replaceWith(this.getPathname(), null, queryParams); + this.setState({slideNum: slideNum}); + return; + + // slideNum always represents the future state. So if slideNum and + // this.state.slideNum are equal, there is no sense in redirecting + } else if(slideNum === this.state.slideNum) { + return; + + // if slideNum is within the range of slides and none of the previous cases + // where matched, we can actually do transitions + } else if(slideNum >= 0 || slideNum < React.Children.count(this.props.children)) { + + if(slideNum !== this.state.slideNum - 1) { + // Bootstrapping the component, getInitialState is called once to save + // the tabs history length. + // In order to know if we already pushed a new state on the history stack or not, + // we're comparing the old history length with the new one and if it didn't change then + // we push a new state on it ONCE (ever). + // Otherwise, we're able to use the browsers history.forward() method + // to keep the stack clean + if(this.state.historyLength === window.history.length) { + + queryParams.slide_num = slideNum; + + this.transitionTo(this.getPathname(), null, queryParams); + } else { + window.history.forward(); + } + } + this.setState({ slideNum: slideNum }); diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js index b95d4a19..7d6c8a66 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop.js +++ b/js/components/ascribe_uploader/file_drag_and_drop.js @@ -1,10 +1,12 @@ 'use strict'; import React from 'react'; +import ProgressBar from 'react-progressbar'; import FileDragAndDropDialog from './file_drag_and_drop_dialog'; import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator'; +import { getLangText } from '../../utils/lang_utils'; // Taken from: https://github.com/fedosejev/react-file-drag-and-drop let FileDragAndDrop = React.createClass({ @@ -18,6 +20,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, @@ -26,7 +29,15 @@ let FileDragAndDrop = React.createClass({ multiple: React.PropTypes.bool, dropzoneInactive: React.PropTypes.bool, areAssetsDownloadable: React.PropTypes.bool, - areAssetsEditable: React.PropTypes.bool + areAssetsEditable: React.PropTypes.bool, + + enableLocalHashing: React.PropTypes.bool, + + // triggers a FileDragAndDrop-global spinner + hashingProgress: React.PropTypes.number, + // sets the value of this.state.hashingProgress in reactfineuploader + // to -1 which is code for: aborted + handleCancelHashing: React.PropTypes.func }, handleDragStart(event) { @@ -72,6 +83,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 +133,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; } @@ -140,40 +165,55 @@ let FileDragAndDrop = React.createClass({ className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone'; className += this.props.className ? ' ' + this.props.className : ''; - return ( - - - - - - ); + // if !== -2: triggers a FileDragAndDrop-global spinner + if(this.props.hashingProgress !== -2) { + return ( + + {getLangText('Computing hash(es)... This may take a few minutes.')} + + {Math.ceil(this.props.hashingProgress)}% + {getLangText('Cancel hashing')} + + + + ); + } else { + return ( + + + + + + ); + } } }); diff --git a/js/components/ascribe_uploader/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/file_drag_and_drop_dialog.js index d8b3dc1e..306eb6f1 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_dialog.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_dialog.js @@ -1,34 +1,80 @@ 'use strict'; import React from 'react'; +import Router from 'react-router'; + +import { getLangText } from '../../utils/lang_utils'; + +let Link = Router.Link; let FileDragAndDropDialog = React.createClass({ propTypes: { hasFiles: React.PropTypes.bool, multipleFiles: React.PropTypes.bool, - onClick: React.PropTypes.func + onClick: React.PropTypes.func, + enableLocalHashing: React.PropTypes.bool }, + mixins: [Router.State], + render() { + const queryParams = this.getQuery(); + if(this.props.hasFiles) { return null; } else { - if(this.props.multipleFiles) { + if(this.props.enableLocalHashing && !queryParams.method) { + + let queryParamsHash = Object.assign({}, queryParams); + queryParamsHash.method = 'hash'; + + let queryParamsUpload = Object.assign({}, queryParams); + queryParamsUpload.method = 'upload'; + return ( - Click or drag to add files - ); - } else { - return ( - - Drag a file here - or - - choose a file to upload - + + {getLangText('Would you rather')} + + + {getLangText('Hash your work')} + + + + or + + + + {getLangText('Upload and hash your work')} + + ); + } else { + if(this.props.multipleFiles) { + return ( + + {getLangText('Click or drag to add files')} + + ); + } else { + let dialog = queryParams.method === 'hash' ? getLangText('choose a file to hash') : getLangText('choose a file to upload'); + + return ( + + {getLangText('Drag a file here')} + {getLangText('or')} + + {dialog} + + + ); + } } } } diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js index b4dd84be..9c6cdbdd 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js @@ -4,7 +4,7 @@ import React from 'react'; import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image'; import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other'; -import { getLangText } from '../../utils/lang_utils.js' +import { getLangText } from '../../utils/lang_utils.js'; let FileDragAndDropPreview = React.createClass({ diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js index 1d145a76..f4b61760 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js @@ -4,7 +4,7 @@ import React from 'react'; import ProgressBar from 'react-progressbar'; import AppConstants from '../../constants/application_constants'; -import { getLangText } from '../../utils/lang_utils.js' +import { getLangText } from '../../utils/lang_utils.js'; let FileDragAndDropPreviewImage = React.createClass({ propTypes: { diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js index 1460a7b6..1d948572 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js +++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js @@ -4,7 +4,7 @@ import React from 'react'; import ProgressBar from 'react-progressbar'; import AppConstants from '../../constants/application_constants'; -import { getLangText } from '../../utils/lang_utils.js' +import { getLangText } from '../../utils/lang_utils.js'; let FileDragAndDropPreviewOther = React.createClass({ propTypes: { diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 3ececa6d..1022a090 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -1,7 +1,9 @@ 'use strict'; import React from 'react/addons'; +import Router from 'react-router'; import Raven from 'raven-js'; +import Q from 'q'; import { getCookie } from '../../utils/fetch_api_utils'; import { getLangText } from '../../utils/lang_utils'; @@ -16,6 +18,8 @@ import GlobalNotificationActions from '../../actions/global_notification_actions import AppConstants from '../../constants/application_constants'; +import { computeHashOfFile } from '../../utils/file_utils'; + var ReactS3FineUploader = React.createClass({ propTypes: { @@ -95,9 +99,23 @@ 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, + + // We encountered some cases where people had difficulties to upload their + // works to ascribe due to a slow internet connection. + // One solution we found in the process of tackling this problem was to hash + // the file in the browser using md5 and then uploading the resulting text document instead + // of the actual file. + // This boolean essentially enables that behavior + enableLocalHashing: React.PropTypes.bool, + + // automatically injected by React-Router + query: React.PropTypes.object }, + mixins: [Router.State], + getDefaultProps() { return { autoUpload: true, @@ -120,7 +138,10 @@ var ReactS3FineUploader = React.createClass({ sendCredentials: true }, chunking: { - enabled: true + enabled: true, + concurrent: { + enabled: true + } }, resume: { enabled: true @@ -132,7 +153,7 @@ var ReactS3FineUploader = React.createClass({ endpoint: null }, messages: { - unsupportedBrowser: 'Upload is not functional in IE7 as IE7 has no support for CORS!' + unsupportedBrowser: '' + getLangText('Upload is not functional in IE7 as IE7 has no support for CORS!') + '' }, formatFileName: function(name){// fix maybe if (name !== undefined && name.length > 26) { @@ -141,7 +162,7 @@ var ReactS3FineUploader = React.createClass({ return name; }, multiple: false, - defaultErrorMessage: 'Unexpected error. Please contact us if this happens repeatedly.' + defaultErrorMessage: getLangText('Unexpected error. Please contact us if this happens repeatedly.') }; }, @@ -149,14 +170,17 @@ var ReactS3FineUploader = React.createClass({ return { filesToUpload: [], uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()), - csrfToken: getCookie(AppConstants.csrftoken) + csrfToken: getCookie(AppConstants.csrftoken), + hashingProgress: -2 + // -1: aborted + // -2: uninitialized }; }, - // since the csrf header is defined in this component's props, - // everytime the csrf cookie is changed we'll need to reinitalize - // fineuploader and update the actual csrf token componentWillUpdate() { + // since the csrf header is defined in this component's props, + // everytime the csrf cookie is changed we'll need to reinitalize + // fineuploader and update the actual csrf token let potentiallyNewCSRFToken = getCookie(AppConstants.csrftoken); if(this.state.csrfToken !== potentiallyNewCSRFToken) { this.setState({ @@ -207,115 +231,127 @@ var ReactS3FineUploader = React.createClass({ }, requestKey(fileId) { - let defer = new fineUploader.Promise(); let filename = this.state.uploader.getName(fileId); let uuid = this.state.uploader.getUuid(fileId); - window.fetch(this.props.keyRoutine.url, { - method: 'post', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json', - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - }, - credentials: 'include', - body: JSON.stringify({ - 'filename': filename, - 'category': this.props.keyRoutine.fileClass, - 'uuid': uuid, - 'piece_id': this.props.keyRoutine.pieceId + return Q.Promise((resolve, reject) => { + window.fetch(this.props.keyRoutine.url, { + method: 'post', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + 'X-CSRFToken': getCookie(AppConstants.csrftoken) + }, + credentials: 'include', + body: JSON.stringify({ + 'filename': filename, + 'category': this.props.keyRoutine.fileClass, + 'uuid': uuid, + 'piece_id': this.props.keyRoutine.pieceId + }) }) - }) - .then((res) => { - return res.json(); - }) - .then((res) =>{ - defer.success(res.key); - }) - .catch((err) => { - defer.failure(err); + .then((res) => { + return res.json(); + }) + .then((res) =>{ + resolve(res.key); + }) + .catch((err) => { + reject(err); + }); }); - - return defer; }, createBlob(file) { - let defer = new fineUploader.Promise(); - - window.fetch(this.props.createBlobRoutine.url, { - method: 'post', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json', - 'X-CSRFToken': getCookie(AppConstants.csrftoken) - }, - credentials: 'include', - body: JSON.stringify({ - 'filename': file.name, - 'key': file.key, - 'piece_id': this.props.createBlobRoutine.pieceId + return Q.Promise((resolve, reject) => { + window.fetch(this.props.createBlobRoutine.url, { + method: 'post', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + 'X-CSRFToken': getCookie(AppConstants.csrftoken) + }, + credentials: 'include', + body: JSON.stringify({ + 'filename': file.name, + 'key': file.key, + 'piece_id': this.props.createBlobRoutine.pieceId + }) }) - }) - .then((res) => { - return res.json(); - }) - .then((res) =>{ - if(res.otherdata) { - file.s3Url = res.otherdata.url_safe; - file.s3UrlSafe = res.otherdata.url_safe; - } else if(res.digitalwork) { - file.s3Url = res.digitalwork.url_safe; - file.s3UrlSafe = res.digitalwork.url_safe; - } else { - throw new Error('Could not find a url to download.'); - } - defer.success(res.key); - }) - .catch((err) => { - defer.failure(err); - console.logGlobal(err); + .then((res) => { + return res.json(); + }) + .then((res) =>{ + if(res.otherdata) { + file.s3Url = res.otherdata.url_safe; + file.s3UrlSafe = res.otherdata.url_safe; + } else if(res.digitalwork) { + file.s3Url = res.digitalwork.url_safe; + file.s3UrlSafe = res.digitalwork.url_safe; + } else { + throw new Error(getLangText('Could not find a url to download.')); + } + resolve(res); + }) + .catch((err) => { + reject(err); + console.logGlobal(err); + }); }); - return defer; }, /* FineUploader specific callback function handlers */ onComplete(id) { let files = this.state.filesToUpload; + + // Set the state of the completed file to 'upload successful' in order to + // remove it from the GUI files[id].status = 'upload successful'; files[id].key = this.state.uploader.getKey(id); let newState = React.addons.update(this.state, { filesToUpload: { $set: files } }); - this.setState(newState); - this.createBlob(files[id]); - // since the form validation props isReadyForFormSubmission, setIsUploadReady and submitKey - // are optional, we'll only trigger them when they're actually defined - if(this.props.submitKey) { - this.props.submitKey(files[id].key); - } else { - console.warn('You didn\'t define submitKey in as a prop in react-s3-fine-uploader'); - } + this.setState(newState); + + // Only after the blob has been created server-side, we can make the form submittable. + this.createBlob(files[id]) + .then(() => { + // since the form validation props isReadyForFormSubmission, setIsUploadReady and submitKey + // are optional, we'll only trigger them when they're actually defined + if(this.props.submitKey) { + this.props.submitKey(files[id].key); + } else { + console.warn('You didn\'t define submitKey in as a prop in react-s3-fine-uploader'); + } + + // for explanation, check comment of if statement above + if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) { + // also, lets check if after the completion of this upload, + // the form is ready for submission or not + if(this.props.isReadyForFormSubmission(this.state.filesToUpload)) { + // if so, set uploadstatus to true + this.props.setIsUploadReady(true); + } else { + this.props.setIsUploadReady(false); + } + } else { + console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader'); + } + }) + .catch((err) => { + console.logGlobal(err); + let notification = new GlobalNotificationModel(err.message, 'danger', 5000); + GlobalNotificationActions.appendGlobalNotification(notification); + }); + - // for explanation, check comment of if statement above - if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) { - // also, lets check if after the completion of this upload, - // the form is ready for submission or not - if(this.props.isReadyForFormSubmission(this.state.filesToUpload)) { - // if so, set uploadstatus to true - this.props.setIsUploadReady(true); - } else { - this.props.setIsUploadReady(false); - } - } else { - console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader'); - } }, - onError() { - Raven.captureException('react-fineuploader-error'); + onError(id, name, errorReason) { + Raven.captureException(errorReason); let notification = new GlobalNotificationModel(this.props.defaultErrorMessage, 'danger', 5000); GlobalNotificationActions.appendGlobalNotification(notification); }, @@ -323,7 +359,9 @@ var ReactS3FineUploader = React.createClass({ onValidate(data) { if(data.size > this.props.validation.sizeLimit) { this.state.uploader.cancelAll(); - let notification = new GlobalNotificationModel('Your file is bigger than 10MB', 'danger', 5000); + + let fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000; + let notification = new GlobalNotificationModel(getLangText('Your file is bigger than %d MB', fileSizeInMegaBytes), 'danger', 5000); GlobalNotificationActions.appendGlobalNotification(notification); } }, @@ -331,7 +369,7 @@ var ReactS3FineUploader = React.createClass({ onCancel(id) { this.removeFileWithIdFromFilesToUpload(id); - let notification = new GlobalNotificationModel('File upload canceled', 'success', 5000); + let notification = new GlobalNotificationModel(getLangText('File upload canceled'), 'success', 5000); GlobalNotificationActions.appendGlobalNotification(notification); // since the form validation props isReadyForFormSubmission, setIsUploadReady and submitKey @@ -448,7 +486,7 @@ var ReactS3FineUploader = React.createClass({ if(this.state.uploader.pauseUpload(fileId)) { this.setStatusOfFile(fileId, 'paused'); } else { - throw new Error('File upload could not be paused.'); + throw new Error(getLangText('File upload could not be paused.')); } }, @@ -457,7 +495,7 @@ var ReactS3FineUploader = React.createClass({ if(this.state.uploader.continueUpload(fileId)) { this.setStatusOfFile(fileId, 'uploading'); } else { - throw new Error('File upload could not be resumed.'); + throw new Error(getLangText('File upload could not be resumed.')); } }, @@ -481,10 +519,128 @@ var ReactS3FineUploader = React.createClass({ GlobalNotificationActions.appendGlobalNotification(notification); } - this.state.uploader.addFiles(files); + // As mentioned already in the propTypes declaration, in some instances we need to calculate the + // md5 hash of a file locally and just upload a txt file containing that hash. + // + // In the view this only happens when the user is allowed to do local hashing as well + // as when the correct query parameter is present in the url ('hash' and not 'upload') + let queryParams = this.getQuery(); + if(this.props.enableLocalHashing && queryParams && queryParams.method === 'hash') { + + let convertedFilePromises = []; + let overallFileSize = 0; + // "files" is not a classical Javascript array but a Javascript FileList, therefore + // we can not use map to convert values + for(let i = 0; i < files.length; i++) { + + // for calculating the overall progress of all submitted files + // we'll need to calculate the overall sum of all files' sizes + overallFileSize += files[i].size; + + // also, we need to set the files' initial progress value + files[i].progress = 0; + + // since the actual computation of a file's hash is an async task , + // we're using promises to handle that + let hashedFilePromise = computeHashOfFile(files[i]); + convertedFilePromises.push(hashedFilePromise); + + } + + // To react after the computation of all files, we define the resolvement + // with the all function for iterables and essentially replace all original files + // with their txt representative + Q.all(convertedFilePromises) + .progress(({index, value: {progress, reject}}) => { + + // hashing progress has been aborted from outside + // To get out of the executing, we need to call reject from the + // inside of the promise's execution. + // This is why we're passing (along with value) a function that essentially + // just does that (calling reject(err)) + // + // In the promises catch method, we're then checking if the interruption + // was due to that error or another generic one. + if(this.state.hashingProgress === -1) { + reject(new Error(getLangText('Hashing canceled'))); + } + + // update file's progress + files[index].progress = progress; + + // calculate weighted average for overall progress of all + // currently hashing files + let overallHashingProgress = 0; + for(let i = 0; i < files.length; i++) { + + let filesSliceOfOverall = files[i].size / overallFileSize; + overallHashingProgress += filesSliceOfOverall * files[i].progress; + + } + + // Multiply by 100, since react-progressbar expects decimal numbers + this.setState({ hashingProgress: overallHashingProgress * 100}); + + }) + .then((convertedFiles) => { + + // clear hashing progress, since its done + this.setState({ hashingProgress: -2}); + + // actually replacing all files with their txt-hash representative + files = convertedFiles; + + // routine for adding all the files submitted to fineuploader for actual uploading them + // to the server + this.state.uploader.addFiles(files); + this.synchronizeFileLists(files); + + }) + .catch((err) => { + // If the error is that hashing has been canceled, we want to display a success + // message instead of a danger message + let typeOfMessage = 'danger'; + + if(err.message === getLangText('Hashing canceled')) { + typeOfMessage = 'success'; + this.setState({ hashingProgress: -2 }); + } else { + // if there was a more generic error, we also log it + console.logGlobal(err); + } + + let notification = new GlobalNotificationModel(err.message, typeOfMessage, 5000); + GlobalNotificationActions.appendGlobalNotification(notification); + }); + + // if we're not hashing the files locally, we're just going to hand them over to fineuploader + // to upload them to the server + } else { + this.state.uploader.addFiles(files); + this.synchronizeFileLists(files); + } + }, + + handleCancelHashing() { + // Every progress tick of the hashing function in handleUploadFile there is a + // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels + // the hashing of all files immediately. + this.setState({ hashingProgress: -1 }); + }, + + // ReactFineUploader is essentially just a react layer around s3 fineuploader. + // However, since we need to display the status of a file (progress, uploading) as well as + // be able to execute actions on a currently uploading file we need to exactly sync the file list + // fineuploader is keeping internally. + // + // Unfortunately though fineuploader is not keeping all of a File object's properties after + // submitting them via .addFiles (it deletes the type, key as well as the ObjectUrl (which we need for + // displaying a thumbnail)), we need to readd them manually after each file that gets submitted + // to the dropzone. + // This method is essentially taking care of all these steps. + synchronizeFileLists(files) { let oldFiles = this.state.filesToUpload; let oldAndNewFiles = this.state.uploader.getUploads(); - // Add fineuploader specific information to new files for(let i = 0; i < oldAndNewFiles.length; i++) { for(let j = 0; j < files.length; j++) { @@ -543,6 +699,18 @@ var ReactS3FineUploader = React.createClass({ this.setState(newState); }, + isDropzoneInactive() { + let filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1); + let queryParams = this.getQuery(); + + if((this.props.enableLocalHashing && !queryParams.method) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) { + return true; + } else { + return false; + } + + }, + render() { return ( @@ -554,10 +722,14 @@ var ReactS3FineUploader = React.createClass({ handleCancelFile={this.handleCancelFile} handlePauseFile={this.handlePauseFile} handleResumeFile={this.handleResumeFile} + handleCancelHashing={this.handleCancelHashing} 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} /> + onInactive={this.props.onInactive} + dropzoneInactive={this.isDropzoneInactive()} + hashingProgress={this.state.hashingProgress} + enableLocalHashing={this.props.enableLocalHashing} /> ); } diff --git a/js/components/header.js b/js/components/header.js index f899def8..43589aa3 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -2,13 +2,13 @@ import React from 'react'; import Router from 'react-router'; -import Raven from 'raven-js'; import UserActions from '../actions/user_actions'; import UserStore from '../stores/user_store'; import WhitelabelActions from '../actions/whitelabel_actions'; import WhitelabelStore from '../stores/whitelabel_store'; +import EventActions from '../actions/event_actions'; import Nav from 'react-bootstrap/lib/Nav'; import Navbar from 'react-bootstrap/lib/Navbar'; @@ -84,19 +84,7 @@ let Header = React.createClass({ this.setState(state); if(this.state.currentUser && this.state.currentUser.email) { - // bootup intercom if the user is logged in - window.Intercom('boot', { - app_id: 'oboxh5w1', - email: this.state.currentUser.email, - subdomain: window.location.host.split('.')[0], - widget: { - activator: '#IntercomDefaultWidget' - } - }); - - Raven.setUserContext({ - email: this.state.currentUser.email - }); + EventActions.profileDidLoad.defer(this.state.currentUser); } }, diff --git a/js/components/login_container.js b/js/components/login_container.js index a8d5c1b1..f050014b 100644 --- a/js/components/login_container.js +++ b/js/components/login_container.js @@ -14,7 +14,8 @@ let LoginContainer = React.createClass({ propTypes: { message: React.PropTypes.string, redirectOnLoggedIn: React.PropTypes.bool, - redirectOnLoginSuccess: React.PropTypes.bool + redirectOnLoginSuccess: React.PropTypes.bool, + onLogin: React.PropTypes.func }, getDefaultProps() { @@ -31,7 +32,8 @@ let LoginContainer = React.createClass({ + message={this.props.message} + onLogin={this.props.onLogin}/> {getLangText('Not an ascribe user')}? {getLangText('Sign up')}... {getLangText('Forgot my password')}? {getLangText('Rescue me')}... diff --git a/js/components/register_piece.js b/js/components/register_piece.js index 37d496a8..20826b7d 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -59,7 +59,7 @@ let RegisterPiece = React.createClass( { PieceListStore.getState(), { selectedLicense: 0, - isFineUploaderEditable: false + isFineUploaderActive: false }); }, @@ -82,14 +82,10 @@ let RegisterPiece = React.createClass( { onChange(state) { this.setState(state); - // once the currentUser object from UserStore is defined (eventually the user was transitioned - // to the login form via the slider and successfully logged in), we can direct him back to the - // register_piece slide - if(state.currentUser && state.currentUser.email || this.state.currentUser && this.state.currentUser.email) { - this.refs.slidesContainer.setSlideNum(0); + if(this.state.currentUser && this.state.currentUser.email) { // we should also make the fineuploader component editable again this.setState({ - isFineUploaderEditable: true + isFineUploaderActive: true }); } }, @@ -105,7 +101,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 +157,25 @@ 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); + }, + + onLogin() { + // once the currentUser object from UserStore is defined (eventually the user was transitioned + // to the login form via the slider and successfully logged in), we can direct him back to the + // register_piece slide + if(this.state.currentUser && this.state.currentUser.email) { + window.history.back(); + } + }, + render() { return ( @@ -175,8 +186,9 @@ let RegisterPiece = React.createClass( { + isFineUploaderActive={this.state.isFineUploaderActive} + handleSuccess={this.handleSuccess} + onLoggedOut={this.onLoggedOut}> {this.props.children} {this.getLicenses()} {this.getSpecifyEditions()} @@ -188,7 +200,8 @@ let RegisterPiece = React.createClass( { + redirectOnLoginSuccess={false} + onLogin={this.onLogin}/> ); diff --git a/js/components/settings_container.js b/js/components/settings_container.js index 7f1ce692..c414f10f 100644 --- a/js/components/settings_container.js +++ b/js/components/settings_container.js @@ -20,6 +20,7 @@ import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader'; import CollapsibleParagraph from './ascribe_collapsible/collapsible_paragraph'; 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'; import AppConstants from '../constants/application_constants'; @@ -65,11 +66,18 @@ let AccountSettings = React.createClass({ handleSuccess(){ UserActions.fetchCurrentUser(); - let notification = new GlobalNotificationModel(getLangText('username succesfully updated'), 'success', 5000); + let notification = new GlobalNotificationModel(getLangText('Settings succesfully updated'), 'success', 5000); GlobalNotificationActions.appendGlobalNotification(notification); }, + + getFormDataProfile(){ + return {'email': this.state.currentUser.email}; + }, + render() { let content = ; + let profile = null; + if (this.state.currentUser.username) { content = ( ); + profile = ( + + + + + {' ' + getLangText('Enable hash option for slow connections. ' + + 'Computes and uploads a hash of the work instead.')} + + + + {/* + + + Français + + + English + + + */} + + + ); } return ( {content} + {profile} {/* ; if (this.state.applications.length > -1) { - content = this.state.applications.map(function(app) { + content = this.state.applications.map(function(app, i) { return ( + label={app.name} + key={i}> {'Bearer ' + app.bearer_token.token} diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js index 3f8bde57..5efe8ca2 100644 --- a/js/constants/api_urls.js +++ b/js/constants/api_urls.js @@ -49,6 +49,7 @@ let apiUrls = { 'users_password_reset_request': AppConstants.apiEndpoint + 'users/request_reset_password/', 'users_signup': AppConstants.apiEndpoint + 'users/', 'users_username': AppConstants.apiEndpoint + 'users/username/', + 'users_profile': AppConstants.apiEndpoint + 'users/profile/', 'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/', 'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/', 'delete_s3_file': AppConstants.serverUrl + 's3/delete/' diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js index 3d3db820..85699a87 100644 --- a/js/constants/application_constants.js +++ b/js/constants/application_constants.js @@ -22,7 +22,8 @@ let constants = { 'name': 'Creative Commons France', 'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/public/creativecommons/cc.logo.sm.png', 'permissions': ['register', 'edit', 'share', 'del_from_collection'], - 'type': 'wallet' + 'type': 'wallet', + 'ga': 'UA-60614729-4' }, { 'subdomain': 'cc-staging', @@ -36,7 +37,8 @@ let constants = { 'name': 'Sluice Art Fair', 'logo': 'http://sluice.info/images/logo.gif', 'permissions': ['register', 'edit', 'share', 'del_from_collection'], - 'type': 'prize' + 'type': 'prize', + 'ga': 'UA-60614729-5' }, { 'subdomain': 'sluice-staging', @@ -46,6 +48,10 @@ let constants = { 'type': 'prize' } ], + 'defaultDomain': { + 'type': 'default', + 'ga': 'UA-60614729-2' + }, // in case of whitelabel customization, we store stuff here 'whitelabel': {}, diff --git a/js/mixins/inject_in_head_mixin.js b/js/mixins/inject_in_head_mixin.js index b537246b..6eacacad 100644 --- a/js/mixins/inject_in_head_mixin.js +++ b/js/mixins/inject_in_head_mixin.js @@ -1,5 +1,7 @@ 'use strict'; +import Q from 'q'; + let mapAttr = { link: 'href', script: 'src' @@ -25,7 +27,7 @@ let InjectInHeadMixin = { }, injectTag(tag, src) { - let promise = new Promise((resolve, reject) => { + return Q.Promise((resolve, reject) => { if (InjectInHeadMixin.isPresent(tag, src)) { resolve(); } else { @@ -44,8 +46,6 @@ let InjectInHeadMixin = { } } }); - - return promise; }, injectStylesheet(src) { diff --git a/js/stores/coa_store.js b/js/stores/coa_store.js index b4173ff1..fa71771e 100644 --- a/js/stores/coa_store.js +++ b/js/stores/coa_store.js @@ -13,9 +13,9 @@ class CoaStore { onUpdateCoa(coa) { this.coa = coa; } - onErrorCoa(err) { + + onFlushCoa() { this.coa = {}; - //this.coa = err } } diff --git a/js/third_party/debug.js b/js/third_party/debug.js new file mode 100644 index 00000000..76178266 --- /dev/null +++ b/js/third_party/debug.js @@ -0,0 +1,30 @@ +'use strict'; + +import alt from '../alt'; +import EventActions from '../actions/event_actions'; + + + +class DebugHandler { + constructor() { + let symbols = []; + + for (let k in EventActions) { + if (typeof EventActions[k] === 'symbol') { + symbols.push(EventActions[k]); + } + } + + this.bindListeners({ + onWhateverEvent: symbols + }); + } + + onWhateverEvent() { + let args = arguments[0]; + let symbol = arguments[1]; + console.debug(symbol, args); + } +} + +export default alt.createStore(DebugHandler, 'DebugHandler'); diff --git a/js/third_party/ga.js b/js/third_party/ga.js new file mode 100644 index 00000000..52832623 --- /dev/null +++ b/js/third_party/ga.js @@ -0,0 +1,27 @@ +'use strict'; + +import alt from '../alt'; +import EventActions from '../actions/event_actions'; + + +class GoogleAnalyticsHandler { + constructor() { + this.bindActions(EventActions); + } + + onRouteDidChange() { + window.ga('send', 'pageview'); + } + + onApplicationWillBoot(settings) { + if (settings.ga) { + window.ga('create', settings.ga, 'auto'); + console.log('Google Analytics loaded'); + } else { + console.log('Cannot load Google Analytics: no tracking code provided'); + } + } + +} + +export default alt.createStore(GoogleAnalyticsHandler, 'GoogleAnalyticsHandler'); diff --git a/js/third_party/intercom.js b/js/third_party/intercom.js new file mode 100644 index 00000000..ef284d7b --- /dev/null +++ b/js/third_party/intercom.js @@ -0,0 +1,34 @@ +'use strict'; + +import alt from '../alt'; +import EventActions from '../actions/event_actions'; + + +class IntercomHandler { + constructor() { + this.bindActions(EventActions); + this.loaded = false; + } + + onProfileDidLoad(profile) { + if (this.loaded) { + return; + } + + /* eslint-disable */ + Intercom('boot', { + /* eslint-enable */ + app_id: 'oboxh5w1', + email: profile.email, + subdomain: window.location.host.split('.')[0], + widget: { + activator: '#IntercomDefaultWidget' + } + }); + console.log('Intercom loaded'); + this.loaded = true; + } + +} + +export default alt.createStore(IntercomHandler, 'IntercomHandler'); diff --git a/js/third_party/raven.js b/js/third_party/raven.js new file mode 100644 index 00000000..eeb5b390 --- /dev/null +++ b/js/third_party/raven.js @@ -0,0 +1,28 @@ +'use strict'; + +import alt from '../alt'; +import EventActions from '../actions/event_actions'; + +import Raven from 'raven-js'; + + +class RavenHandler { + constructor() { + this.bindActions(EventActions); + this.loaded = false; + } + + onProfileDidLoad(profile) { + if (this.loaded) { + return; + } + + Raven.setUserContext({ + email: profile.email + }); + console.log('Raven loaded'); + this.loaded = true; + } +} + +export default alt.createStore(RavenHandler, 'RavenHandler'); diff --git a/js/utils/constants_utils.js b/js/utils/constants_utils.js index 923c98fc..34786af5 100644 --- a/js/utils/constants_utils.js +++ b/js/utils/constants_utils.js @@ -8,8 +8,9 @@ export function getSubdomainSettings(subdomain) { if(settings.length === 1) { return settings[0]; } else if(settings.length === 0) { - throw new Error('There are no subdomain settings for the subdomain: ' + subdomain); + return appConstants.defaultDomain; + // throw new Error('There are no subdomain settings for the subdomain: ' + subdomain); } else { throw new Error('Matched multiple subdomains. Adjust constants file.'); } -} \ No newline at end of file +} diff --git a/js/utils/fetch_api_utils.js b/js/utils/fetch_api_utils.js index db3f93fb..3ed964ba 100644 --- a/js/utils/fetch_api_utils.js +++ b/js/utils/fetch_api_utils.js @@ -1,5 +1,7 @@ 'use strict'; +import Q from 'q'; + import { sanitize } from './general_utils'; import AppConstants from '../constants/application_constants'; @@ -86,7 +88,7 @@ export function getCookie(name) { */ export function fetchImageAsBlob(url) { - return new Promise((resolve, reject) => { + return Q.Promise((resolve, reject) => { let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); diff --git a/js/utils/file_utils.js b/js/utils/file_utils.js new file mode 100644 index 00000000..964ba7b8 --- /dev/null +++ b/js/utils/file_utils.js @@ -0,0 +1,86 @@ +'use strict'; + +import Q from 'q'; +import SparkMD5 from 'spark-md5'; + +import { getLangText } from './lang_utils'; + +/** + * Takes a string, creates a text file and returns the URL + * + * @param {string} text regular javascript string + * @return {string} regular javascript string + */ +function makeTextFile(text, file) { + let textFileBlob = new Blob([text], {type: 'text/plain'}); + let textFile = new File([textFileBlob], 'hash-of-' + file.name + '.txt', { + lastModifiedDate: file.lastModifiedDate, + lastModified: file.lastModified, + type: 'text/plain' + }); + + return textFile; +} + +/** + * Takes a file Object, computes the MD5 hash and returns the URL of the textfile with the hash + * + * @param {File} file javascript File object + * @return {string} regular javascript string + */ +export function computeHashOfFile(file) { + return Q.Promise((resolve, reject, notify) => { + let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice; + let chunkSize = 2097152; // Read in chunks of 2MB + let chunks = Math.ceil(file.size / chunkSize); + let currentChunk = 0; + let spark = new SparkMD5.ArrayBuffer(); + let fileReader = new FileReader(); + + let startTime = new Date(); + + // comment: We should convert this to es6 at some point, however if so please consider that + // an arrow function will get rid of the function's scope... + fileReader.onload = function(e) { + //console.log('read chunk nr', currentChunk + 1, 'of', chunks); + spark.append(e.target.result); // Append array buffer + currentChunk++; + + if (currentChunk < chunks) { + loadNext(); + } else { + let fileHash = spark.end(); + + console.info('computed hash %s (took %d s)', + fileHash, + Math.round(((new Date() - startTime) / 1000) % 60)); // Compute hash + + let blobTextFile = makeTextFile(fileHash, file); + resolve(blobTextFile); + } + }.bind(this); + + fileReader.onerror = function () { + reject(new Error(getLangText('We weren\'t able to hash your file locally. Try to upload it manually or consider contact us.'))); + }; + + function loadNext() { + var start = currentChunk * chunkSize, + end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; + + // send progress + // Due to the fact that progressHandler and notify are going to be removed in v2 + // of Q, the functionality of throwing errors in the progressHandler will not be implemented + // anymore. To still be able to throw an error however, we can just expose the promise's reject + // method to the .progress function to stop the execution immediately. + notify({ + progress: start / file.size, + reject + }); + + fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); + } + + loadNext(); + }); +} \ No newline at end of file diff --git a/js/utils/requests.js b/js/utils/requests.js index c73df352..8705bc0f 100644 --- a/js/utils/requests.js +++ b/js/utils/requests.js @@ -1,5 +1,7 @@ 'use strict'; +import Q from 'q'; + import { argsToQueryParams, getCookie } from '../utils/fetch_api_utils'; import AppConstants from '../constants/application_constants'; @@ -22,7 +24,7 @@ class Requests { throw new Error(response.status + ' - ' + response.statusText + ' - on URL:' + response.url); } - return new Promise((resolve, reject) => { + return Q.Promise((resolve, reject) => { response.text() .then((responseText) => { // If the responses' body does not contain any data, diff --git a/package.json b/package.json index bac4a421..4fdf87fb 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ "classnames": "^1.2.2", "compression": "^1.4.4", "envify": "^3.4.0", - "es6-promise": "^2.1.1", "eslint": "^0.22.1", "eslint-plugin-react": "^2.5.0", "express": "^4.12.4", @@ -69,6 +68,7 @@ "jest-cli": "^0.4.0", "lodash": "^3.9.3", "object-assign": "^2.0.0", + "q": "^1.4.1", "raven-js": "^1.1.19", "react": "^0.13.2", "react-bootstrap": "~0.22.6", @@ -79,6 +79,7 @@ "react-textarea-autosize": "^2.2.3", "reactify": "^1.1.0", "shmui": "^0.1.0", + "spark-md5": "~1.0.0", "uglifyjs": "^2.4.10", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0", diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss index 74ae86af..f3ce7fe8 100644 --- a/sass/ascribe_accordion_list.scss +++ b/sass/ascribe_accordion_list.scss @@ -1,6 +1,11 @@ $ascribe-accordion-list-item-height: 8em; $ascribe-accordion-list-font: 'Source Sans Pro'; +.ascribe-accordion-list { + padding-left: 15px; + padding-right: 15px; +} + .ascribe-accordion-list-item { background-color: white; border: 1px solid black; diff --git a/sass/ascribe_media_player.scss b/sass/ascribe_media_player.scss index 4aeba0d2..250563f9 100644 --- a/sass/ascribe_media_player.scss +++ b/sass/ascribe_media_player.scss @@ -1,13 +1,12 @@ .ascribe-media-player { margin-bottom: 1em; - video { - width: 100%; - height: 100%; - } + video, img { - width: 100%; + width: auto; height: 100%; + display: block; + margin: 0 auto; } .media-other { diff --git a/sass/ascribe_slides_container.scss b/sass/ascribe_slides_container.scss index 2dd1f47a..2bc2d115 100644 --- a/sass/ascribe_slides_container.scss +++ b/sass/ascribe_slides_container.scss @@ -2,16 +2,17 @@ overflow-x: hidden; overflow-y: hidden; padding-left: 0; + padding-right: 0; } .ascribe-sliding-container { transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); + padding-left: 0; + padding-right: 0; } .ascribe-slide { position: relative; min-height: 1px; - padding-left: 15px; - padding-right: 15px; float:left; } \ No newline at end of file diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss index ceb8b427..c96109ed 100644 --- a/sass/ascribe_uploader.scss +++ b/sass/ascribe_uploader.scss @@ -10,7 +10,7 @@ cursor: default !important; - padding: 1.5em 1.5em 1.5em 0; + padding: 1.5em 0 1.5em 0; } .inactive-dropzone { @@ -19,6 +19,16 @@ outline: 0; } +.present-options { + > p { + margin-bottom: .75em !important; + } + + .btn { + margin: 0 1em 0 1em; + } +} + .file-drag-and-drop .file-drag-and-drop-dialog > p:first-child { font-size: 1.5em !important; diff --git a/sass/main.scss b/sass/main.scss index 4c54ed24..d8e5e7ff 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -41,8 +41,8 @@ html { } .ascribe-default-app { - max-width: 90%; padding-top: 70px; + overflow-x: hidden; } hr {
{getLangText('Computing hash(es)... This may take a few minutes.')}
+ {Math.ceil(this.props.hashingProgress)}% + {getLangText('Cancel hashing')} +
Drag a file here
or
{getLangText('Would you rather')}
{getLangText('Drag a file here')}
{getLangText('or')}