Merge remote-tracking branch 'origin/AD-368-harmonize-functionality-of-ascrib' into AD-496-add-control-buttons-to-fineupload

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -345,10 +345,10 @@ var ReactS3FineUploader = React.createClass({
             let newState = React.addons.update(this.state, {filesToUpload: {$set: updatedFilesToUpload}});
             this.setState(newState);
         } else {
-            let notification = new GlobalNotificationModel('Could not load attached files (Further data)', 'danger', 10000);
-            GlobalNotificationActions.appendGlobalNotification(notification);
-
-            throw new Error('The session request failed', response);
+            //let notification = new GlobalNotificationModel('Could not load attached files (Further data)', 'danger', 10000);
+            //GlobalNotificationActions.appendGlobalNotification(notification);
+            //
+            //throw new Error('The session request failed', response);
         }
     },
 

js/components/edition.js

@@ -120,7 +120,9 @@ let Edition = React.createClass({
 
                     <CollapsibleParagraph
                         title="Further Details"
-                        show={this.props.edition.acl.indexOf('edit') > -1 || Object.keys(this.props.edition.extra_data).length > 0}>
+                        show={this.props.edition.acl.indexOf('edit') > -1
+                            || Object.keys(this.props.edition.extra_data).length > 0
+                            || this.props.edition.other_data !== null}>
                         <EditionFurtherDetails
                             handleSuccess={this.props.loadEdition}
                             edition={this.props.edition}/>
@@ -497,6 +499,7 @@ let EditionFurtherDetails = React.createClass({
                         submitKey={this.submitKey}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={this.isReadyForFormSubmission}
+                        editable={editable}
                         edition={this.props.edition}/>
                 </Col>
             </Row>
@@ -513,34 +516,43 @@ let FileUploader = React.createClass({
     },
 
     render() {
+        if (!this.props.editable && this.props.edition.other_data === null){
+            return null;
+        }
         return (
-            <ReactS3FineUploader
-                keyRoutine={{
-                    url: AppConstants.serverUrl + 's3/key/',
-                    fileClass: 'otherdata',
-                    bitcoinId: this.props.edition.bitcoin_id
-                }}
-                createBlobRoutine={{
-                    url: apiUrls.blob_otherdatas,
-                    bitcoinId: this.props.edition.bitcoin_id
-                }}
-                validation={{
-                    itemLimit: 100000,
-                    sizeLimit: '10000000'
-                }}
-                submitKey={this.props.submitKey}
-                setIsUploadReady={this.props.setIsUploadReady}
-                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
-                session={{
-                    endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
-                    customHeaders: {
-                        'X-CSRFToken': getCookie('csrftoken')
-                    },
-                    params: {
-                        'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
-                    }
-                }}
-                areAssetsDownloadable={true}/>
+            <Form>
+                <Property
+                    label="Additional files">
+                    <ReactS3FineUploader
+                        keyRoutine={{
+                            url: AppConstants.serverUrl + 's3/key/',
+                            fileClass: 'otherdata',
+                            bitcoinId: this.props.edition.bitcoin_id
+                        }}
+                        createBlobRoutine={{
+                            url: apiUrls.blob_otherdatas,
+                            bitcoinId: this.props.edition.bitcoin_id
+                        }}
+                        validation={{
+                            itemLimit: 100000,
+                            sizeLimit: '10000000'
+                        }}
+                        submitKey={this.props.submitKey}
+                        setIsUploadReady={this.props.setIsUploadReady}
+                        isReadyForFormSubmission={this.props.isReadyForFormSubmission}
+                        session={{
+                            endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
+                            customHeaders: {
+                                'X-CSRFToken': getCookie('csrftoken')
+                            },
+                            params: {
+                                'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
+                            }
+                        }}
+                        areAssetsDownloadable={true}/>
+                </Property>
+                <hr />
+            </Form>
         );
     }
 });

js/components/login_container.js

@@ -14,6 +14,7 @@ import Property from './ascribe_forms/property';
 import apiUrls from '../constants/api_urls';
 import AppConstants from '../constants/application_constants';
 
+let Link = Router.Link;
 
 let LoginContainer = React.createClass({
     mixins: [Router.Navigation],
@@ -46,7 +47,6 @@ let LoginContainer = React.createClass({
                 <div className="ascribe-login-text ascribe-login-header">
                     Log in to ascribe...
                 </div>
-
                 <LoginForm />
             </div>
         );
@@ -108,8 +108,8 @@ let LoginForm = React.createClass({
                 </Property>
                 <hr />
                 <div className="ascribe-login-text">
-                    Not an ascribe user&#63; Sign up...<br/>
-                    Forgot my password&#63; Rescue me...
+                    Not an ascribe user&#63; <Link to="signup">Sign up...</Link><br/>
+                    Forgot my password&#63; <Link to="password_reset">Rescue me...</Link>
                 </div>
             </Form>
         );

js/components/password_reset_container.js

@@ -3,28 +3,159 @@
 import React from 'react';
 import Router from 'react-router';
 
-import PasswordResetForm from './ascribe_forms/form_password_reset';
+import Form from './ascribe_forms/form';
+import Property from './ascribe_forms/property';
+
+import apiUrls from '../constants/api_urls';
 
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
 let PasswordResetContainer = React.createClass({
     mixins: [Router.Navigation],
+    getInitialState() {
+        return {isRequested: false};
+    },
+    handleRequestSuccess(email){
+        this.setState({isRequested: email});
+    },
+    render() {
+        if (this.props.query.email && this.props.query.token) {
+            return (
+                <div>
+                    <div className="ascribe-login-text ascribe-login-header">
+                        Reset the password for {this.props.query.email}
+                    </div>
+                    <PasswordResetForm
+                        email={this.props.query.email}
+                        token={this.props.query.token}/>
+                </div>
+            );
+        }
+        else {
+            if (this.state.isRequested === false) {
+                return (
+                    <div>
+                        <div className="ascribe-login-text ascribe-login-header">
+                            Reset your ascribe password
+                        </div>
+                        <PasswordRequestResetForm
+                            handleRequestSuccess={this.handleRequestSuccess}/>
+                    </div>
+                );
+            }
+            else if (this.state.isRequested) {
+                return (
+                    <div>
+                        <div className="ascribe-login-text ascribe-login-header">
+                            An email has been sent to "{this.state.isRequested}"
+                        </div>
+                    </div>
+                );
+            }
+            else {
+                return <span />;
+            }
+        }
+  }
+});
 
-    handleSuccess(){
+let PasswordRequestResetForm = React.createClass({
+    handleSuccess() {
+        let notificationText = 'Request succesfully sent, check your email';
+        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+        this.props.handleRequestSuccess(this.refs.form.refs.email.state.value);
+    },
+    render() {
+        return (
+            <Form
+                ref="form"
+                url={apiUrls.users_password_reset_request}
+                handleSuccess={this.handleSuccess}
+                buttons={
+                    <button
+                        type="submit"
+                        className="btn ascribe-btn ascribe-btn-login">
+                        Reset your password
+                    </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>
+                    }>
+                <Property
+                    name='email'
+                    label="Email">
+                    <input
+                        type="email"
+                        placeholder="Enter your email and we'll send a link"
+                        name="email"
+                        required/>
+                </Property>
+                <hr />
+            </Form>
+        );
+    }
+});
+
+let PasswordResetForm = React.createClass({
+    mixins: [Router.Navigation],
+
+    getFormData(){
+        let data = {};
+        for (let ref in this.refs.form.refs){
+            data[this.refs.form.refs[ref].props.name] = this.refs.form.refs[ref].state.value;
+        }
+        data.email = this.props.email;
+        data.token = this.props.token;
+        return data;
+    },
+    handleSuccess() {
         this.transitionTo('pieces');
         let notification = new GlobalNotificationModel('password succesfully updated', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
     render() {
         return (
-            <PasswordResetForm
-                email={this.props.query.email}
-                token={this.props.query.token}
+            <Form
+                ref="form"
+                url={apiUrls.users_password_reset}
                 handleSuccess={this.handleSuccess}
-            />
-      );
-  }
+                getFormData={this.getFormData}
+                buttons={
+                    <button
+                        type="submit"
+                        className="btn ascribe-btn ascribe-btn-login">
+                        Reset your password
+                    </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>
+                    }>
+                <Property
+                    name='password'
+                    label="Password">
+                    <input
+                        type="password"
+                        placeholder="Enter a new password"
+                        name="password"
+                        required/>
+                </Property>
+                <Property
+                    name='password_confirm'
+                    label="Confirm password">
+                    <input
+                        type="password"
+                        placeholder="Enter your password once again"
+                        name="password"
+                        required/>
+                </Property>
+                <hr />
+            </Form>
+        );
+    }
 });
 
 export default PasswordResetContainer;

js/components/piece_list.js

@@ -65,7 +65,6 @@ let PieceList = React.createClass({
         let currentPage = parseInt(this.props.query.page, 10) || 1;
         let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
         let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
-
         return (
             <div>
                 <PieceListToolbar