From df95e75025785a6b35c52f2b9fec4182395b822b Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Wed, 27 May 2015 17:34:15 +0200
Subject: [PATCH 01/17] WIP

---
 js/components/ascribe_media/image_viewer.js   | 25 --------
 .../ascribe_media/resource_viewer.js          | 40 +++++++++++++
 .../ascribe_table/table_item_subtable.js      |  2 +-
 js/components/edition.js                      | 11 +++-
 js/mixins/inject_in_head_mixin.js             | 57 +++++++++++++++++++
 5 files changed, 106 insertions(+), 29 deletions(-)
 delete mode 100644 js/components/ascribe_media/image_viewer.js
 create mode 100644 js/components/ascribe_media/resource_viewer.js
 create mode 100644 js/mixins/inject_in_head_mixin.js

diff --git a/js/components/ascribe_media/image_viewer.js b/js/components/ascribe_media/image_viewer.js
deleted file mode 100644
index fdbd0342..00000000
--- a/js/components/ascribe_media/image_viewer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-/**
- * This is the component that implements display-specific functionality
- */
-let ImageViewer = React.createClass({
-    propTypes: {
-        thumbnail: React.PropTypes.string.isRequired
-    },
-
-    render() {
-        let thumbnail = <img className="img-responsive" src={this.props.thumbnail}/>;
-        let aligner = <span className="vcenter"></span>;
-        return (
-            <div>
-                <div>
-                {aligner}
-                {thumbnail}
-                </div>
-            </div>
-        );
-    }
-});
-
-export default ImageViewer;
\ No newline at end of file
diff --git a/js/components/ascribe_media/resource_viewer.js b/js/components/ascribe_media/resource_viewer.js
new file mode 100644
index 00000000..4519bcb7
--- /dev/null
+++ b/js/components/ascribe_media/resource_viewer.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
+
+/**
+ * This is the component that implements display-specific functionality.
+ *
+ * ResourceViewer handles the following mimetypes:
+ *  - image
+ *  - video
+ *  - audio
+ *  - pdf
+ *  - other
+ */
+
+let resourceMap = {
+    'image': 1
+}
+
+let ResourceViewer = React.createClass({
+    propTypes: {
+        thumbnail: React.PropTypes.string.isRequired,
+        mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired
+    },
+
+    mixins: [InjectInHeadMixin],
+
+    componentDidMount() {
+        this.inject('http://antani.com');
+    },
+
+    render() {
+        return (
+            <div>
+                resourceviewer {this.props.thumbnail} {this.props.mimetype}
+            </div>
+        );
+    }
+});
+
+export default ResourceViewer;
diff --git a/js/components/ascribe_table/table_item_subtable.js b/js/components/ascribe_table/table_item_subtable.js
index e9bd05f2..c8f4c498 100644
--- a/js/components/ascribe_table/table_item_subtable.js
+++ b/js/components/ascribe_table/table_item_subtable.js
@@ -55,7 +55,7 @@ let TableItemSubtable = React.createClass({
         let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
 
         if(numOfColumns > 10) {
-            throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.')
+            throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.');
         } else {
             return bootstrapClasses.join( listOfRowValues[i] + ' ') + listOfRowValues[i];
         }
diff --git a/js/components/edition.js b/js/components/edition.js
index 336bacff..7bb3f221 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ImageViewer from './ascribe_media/image_viewer';
+import ResourceViewer from './ascribe_media/resource_viewer';
 
 /**
  * This is the component that implements display-specific functionality
@@ -10,10 +10,15 @@ let Edition = React.createClass({
     //},
 
     render() {
+        let thumbnail = this.props.edition.thumbnail;
+        let mimetype = this.props.edition.digital_work.mime;
+
         return (
             <div>
                 <div className="col-md-7">
-                    <ImageViewer thumbnail={this.props.edition.thumbnail}/>
+                    <ResourceViewer thumbnail={thumbnail}
+                                    mimetype={mimetype}
+                                    />
                 </div>
                 <div className="col-md-5">
                     <EditionHeader edition={this.props.edition}/>
@@ -103,4 +108,4 @@ let EditionDetails = React.createClass({
 });
 
 
-export default Edition;
\ No newline at end of file
+export default Edition;
diff --git a/js/mixins/inject_in_head_mixin.js b/js/mixins/inject_in_head_mixin.js
new file mode 100644
index 00000000..0c83be16
--- /dev/null
+++ b/js/mixins/inject_in_head_mixin.js
@@ -0,0 +1,57 @@
+let mapAttr = {
+    link: 'href',
+    source: 'src'
+}
+
+let mapExt = {
+    js: 'source',
+    css: 'link'
+}
+
+
+let InjectInHeadMixin = {
+    /**
+     * Provide functions to inject `<script>` and `<link>` in `<head>`.
+     * Useful when you have to load a huge external library and
+     * you don't want to embed everything inside the build file.
+     */
+
+    isPresent(tag, src) {
+        let attr = mapAttr[tag];
+        let query = `head > ${tag}[${attr}="${src}"]`;
+        return document.querySelector(query);
+    },
+
+    injectTag(tag, src){
+        console.log(this.foobar);
+        if (InjectInHeadMixin.isPresent(tag, src))
+            return;
+
+        let attr = mapAttr[tag];
+        let element = document.createElement(tag);
+        document.head.appendChild(element);
+        element[attr] = src;
+    },
+
+    injectStylesheet(src) {
+        this.injectTag('link', src);
+    },
+
+    injectScript(src) {
+        this.injectTag('source', src);
+    },
+
+    inject(src) {
+        debugger;
+        let ext = src.split('.').pop();
+        try {
+            let tag = mapAttr(src);
+        } catch (e) {
+            throw new Error(`Cannot inject ${src} in the DOM, cannot guess the tag name from extension ${ext}. Valid extensions are "js" and "css".`);
+        }
+        InjectInHeadMixin.injectTag(tag, src);
+    }
+
+};
+
+export default InjectInHeadMixin;

From 7a18c150c791f782f9fd662d6248c470d287312b Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Fri, 29 May 2015 10:58:07 +0200
Subject: [PATCH 02/17] merged all branches fixed clear errors

---
 .../ascribe_forms/button_submit_close.js         | 10 +++++-----
 js/components/ascribe_forms/form_share_email.js  | 16 ++++++++++------
 js/mixins/alert_mixin.js                         |  4 ++++
 js/mixins/form_mixin.js                          |  3 +++
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/js/components/ascribe_forms/button_submit_close.js b/js/components/ascribe_forms/button_submit_close.js
index 60091f2f..e811cab5 100644
--- a/js/components/ascribe_forms/button_submit_close.js
+++ b/js/components/ascribe_forms/button_submit_close.js
@@ -3,11 +3,11 @@ import React from 'react';
 let ButtonSubmitOrClose = React.createClass({
     render() {
         if (this.props.submitted){
-            return (
-                <div className="modal-footer">
-                    Loading
-                </div>
-            )
+            //return (
+            //    <div className="modal-footer">
+            //        Loading
+            //    </div>
+            //)
         }
         return (
             <div className="modal-footer">
diff --git a/js/components/ascribe_forms/form_share_email.js b/js/components/ascribe_forms/form_share_email.js
index dd61bc7b..ea87b4cf 100644
--- a/js/components/ascribe_forms/form_share_email.js
+++ b/js/components/ascribe_forms/form_share_email.js
@@ -22,12 +22,16 @@ let ShareForm = React.createClass({
         }
     },
     renderForm() {
-        let message = "Hi,\n" +
-                        "\n" +
-                        "I am sharing \"" + this.props.edition.title + "\" with you.\n" +
-                        "\n" +
-                        "Truly yours,\n" +
-                        this.props.currentUser.username;
+        let title = this.props.edition.title;
+        let username = this.props.currentUser.username;
+        let message =
+`Hi,
+
+I am sharing \" ${title} \" with you.
+
+Truly yours,
+${username}`;
+
         return (
             <form id="share_modal_content" role="form" key="share_modal_content" onSubmit={this.submit}>
                 <InputText
diff --git a/js/mixins/alert_mixin.js b/js/mixins/alert_mixin.js
index efabed0e..90289d22 100644
--- a/js/mixins/alert_mixin.js
+++ b/js/mixins/alert_mixin.js
@@ -10,7 +10,11 @@ let AlertMixin = {
                         }.bind(this)
                     );
         this.setState({alerts: alerts, retry: this.state.retry + 1});
+    },
+    clearAlerts(){
+        this.setState({alerts: null});
     }
+
 };
 
 export default AlertMixin;
\ No newline at end of file
diff --git a/js/mixins/form_mixin.js b/js/mixins/form_mixin.js
index 6bbf5efa..060a297e 100644
--- a/js/mixins/form_mixin.js
+++ b/js/mixins/form_mixin.js
@@ -12,6 +12,9 @@ export const FormMixin = {
     },
     submit(e) {
         e.preventDefault();
+        for (var ref in this.refs){
+            this.refs[ref].clearAlerts();
+        }
         this.setState({submitted: true});
         fetch(this.url(), {
             method: 'post',

From 961b8ee58d57e46ad7ee9a23a6e7db7ad902952d Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Fri, 29 May 2015 15:16:42 +0200
Subject: [PATCH 03/17] errors for non-fields, 500 removed retry consign_form

---
 js/components/ascribe_forms/form_consign.js   | 66 +++++++++++++++++++
 js/components/ascribe_forms/input_text.js     |  3 +-
 js/components/ascribe_forms/input_textarea.js |  3 +-
 js/components/ascribe_modal/modal_consign.js  | 43 ++++++++++++
 js/components/ascribe_modal/modal_share.js    |  8 +--
 js/components/ascribe_modal/modal_transfer.js |  8 +--
 js/components/edition.js                      |  2 +
 js/constants/api_urls.js                      |  3 +-
 js/mixins/alert_mixin.js                      |  5 +-
 js/mixins/form_mixin.js                       | 22 +++++--
 js/mixins/modal_mixin.js                      | 11 ++++
 11 files changed, 151 insertions(+), 23 deletions(-)
 create mode 100644 js/components/ascribe_forms/form_consign.js
 create mode 100644 js/components/ascribe_modal/modal_consign.js
 create mode 100644 js/mixins/modal_mixin.js

diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js
new file mode 100644
index 00000000..cf68d429
--- /dev/null
+++ b/js/components/ascribe_forms/form_consign.js
@@ -0,0 +1,66 @@
+import fetch from 'isomorphic-fetch';
+
+import React from 'react';
+
+import ApiUrls from '../../constants/api_urls';
+import FormMixin from '../../mixins/form_mixin';
+import InputText from './input_text';
+import InputTextArea from './input_textarea';
+import ButtonSubmitOrClose from './button_submit_close';
+
+let ConsignForm = React.createClass({
+    mixins: [FormMixin],
+
+    url() {
+        return ApiUrls.ownership_consigns
+    },
+    getFormData() {
+        return {
+            bitcoin_id: this.props.edition.bitcoin_id,
+            consignee: this.refs.consignee.state.value,
+            consign_message: this.refs.consign_message.state.value,
+            password: this.refs.password.state.value
+        }
+    },
+    renderForm() {
+        let title = this.props.edition.title;
+        let username = this.props.currentUser.username;
+        let message =
+`Hi,
+
+I consign \" ${title} \" to you.
+
+Truly yours,
+${username}`;
+
+        return (
+            <form id="transfer_modal_content" role="form" onSubmit={this.submit}>
+                <input className="invisible" type="email" name="fake_consignee"/>
+                <input className="invisible" type="password" name="fake_password"/>
+                <InputText
+                    ref="consignee"
+                    placeHolder="Consignee email"
+                    required="required"
+                    type="email"
+                    submitted={this.state.submitted}/>
+                <InputTextArea
+                    ref="consign_message"
+                    defaultValue={message}
+                    required=""
+                    />
+                <InputText
+                    ref="password"
+                    placeHolder="Password"
+                    required="required"
+                    type="password"
+                    submitted={this.state.submitted}/>
+               <ButtonSubmitOrClose
+                    text="CONSIGN"
+                    onClose={this.props.onRequestHide}
+                    submitted={this.state.submitted} />
+            </form>
+        );
+    }
+});
+
+export default ConsignForm;
\ No newline at end of file
diff --git a/js/components/ascribe_forms/input_text.js b/js/components/ascribe_forms/input_text.js
index a65bcc8f..9d4d4b61 100644
--- a/js/components/ascribe_forms/input_text.js
+++ b/js/components/ascribe_forms/input_text.js
@@ -8,8 +8,7 @@ let InputText = React.createClass({
 
     getInitialState() {
         return {value: null,
-                alerts: null, // needed in AlertMixin
-                retry: 0 // needed in AlertMixin for generating unique alerts
+                alerts: null
         };
     },
     handleChange(event) {
diff --git a/js/components/ascribe_forms/input_textarea.js b/js/components/ascribe_forms/input_textarea.js
index b5f64b66..c4e0d7b1 100644
--- a/js/components/ascribe_forms/input_textarea.js
+++ b/js/components/ascribe_forms/input_textarea.js
@@ -8,8 +8,7 @@ let InputTextArea = React.createClass({
 
     getInitialState() {
         return {value: this.props.defaultValue,
-                alerts: null, // needed in AlertMixin
-                retry: 0 // needed in AlertMixin for generating unique alerts
+                alerts: null // needed in AlertMixin
         };
     },
     handleChange(event) {
diff --git a/js/components/ascribe_modal/modal_consign.js b/js/components/ascribe_modal/modal_consign.js
new file mode 100644
index 00000000..bcd47973
--- /dev/null
+++ b/js/components/ascribe_modal/modal_consign.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import Modal from 'react-bootstrap/lib/Modal';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+import ConsignForm from '../ascribe_forms/form_consign'
+import ModalMixin from '../../mixins/modal_mixin'
+
+let ConsignModalButton = React.createClass({
+    render() {
+        return (
+            <OverlayTrigger delay={500} placement="left"
+                            overlay={<Tooltip>Have someone else sell the artwork</Tooltip>}>
+                <ModalTrigger modal={<ConsignModal edition={this.props.edition}
+                                                   currentUser={this.props.currentUser}/>}>
+                    <div className="btn btn-ascribe-inv">
+                        CONSIGN
+                    </div>
+                </ModalTrigger>
+            </OverlayTrigger>
+        )
+    }
+});
+
+let ConsignModal = React.createClass({
+    mixins : [ModalMixin],
+
+    render() {
+        return (
+            <Modal {...this.props} title="Consign artwork">
+                <div className="modal-body">
+                    <ConsignForm edition={this.props.edition}
+                                 currentUser={this.props.currentUser}
+                                 onRequestHide={this.onRequestHide}/>
+                </div>
+            </Modal>
+        )
+    }
+});
+
+
+export default ConsignModalButton;
diff --git a/js/components/ascribe_modal/modal_share.js b/js/components/ascribe_modal/modal_share.js
index 176541ee..4ada244c 100644
--- a/js/components/ascribe_modal/modal_share.js
+++ b/js/components/ascribe_modal/modal_share.js
@@ -4,6 +4,7 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 
+import ModalMixin from '../../mixins/modal_mixin'
 
 
 import ShareForm from '../ascribe_forms/form_share_email'
@@ -24,11 +25,8 @@ let ShareModalButton = React.createClass({
 });
 
 let ShareModal = React.createClass({
-    onRequestHide(e){
-        if (e)
-            e.preventDefault();
-        this.props.onRequestHide();
-    },
+    mixins : [ModalMixin],
+
     render() {
         return (
             <Modal {...this.props} title="Share artwork">
diff --git a/js/components/ascribe_modal/modal_transfer.js b/js/components/ascribe_modal/modal_transfer.js
index b57064ff..12b40524 100644
--- a/js/components/ascribe_modal/modal_transfer.js
+++ b/js/components/ascribe_modal/modal_transfer.js
@@ -5,7 +5,7 @@ import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 
 import TransferForm from '../ascribe_forms/form_transfer'
-
+import ModalMixin from '../../mixins/modal_mixin'
 
 let TransferModalButton = React.createClass({
     render() {
@@ -24,10 +24,8 @@ let TransferModalButton = React.createClass({
 });
 
 let TransferModal = React.createClass({
-    onRequestHide(e){
-        e.preventDefault();
-        this.props.onRequestHide();
-    },
+    mixins : [ModalMixin],
+
     render() {
         return (
             <Modal {...this.props} title="Transfer artwork">
diff --git a/js/components/edition.js b/js/components/edition.js
index ffeb9b25..65fa2a51 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import ImageViewer from './ascribe_media/image_viewer';
+import ConsignModalButton from './ascribe_modal/modal_consign';
 import TransferModalButton from './ascribe_modal/modal_transfer';
 import ShareModalButton from './ascribe_modal/modal_share';
 
@@ -47,6 +48,7 @@ let EditionDetails = React.createClass({
                 <EditionDetailProperty label="id" value={ this.props.edition.bitcoin_id } />
                 <EditionDetailProperty label="owner" value={ this.props.edition.owner } />
                 <br/>
+                <ConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <TransferModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <ShareModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <hr/>
diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js
index f0c7f9b6..d26352bc 100644
--- a/js/constants/api_urls.js
+++ b/js/constants/api_urls.js
@@ -2,7 +2,8 @@ import AppConstants from './application_constants';
 
 let apiUrls = {
     'ownership_shares_mail' : AppConstants.baseUrl + 'ownership/shares/mail/',
-    'ownership_transfers' : AppConstants.baseUrl + 'ownership/transfers/'
+    'ownership_transfers' : AppConstants.baseUrl + 'ownership/transfers/',
+    'ownership_consigns' : AppConstants.baseUrl + 'ownership/consigns/'
 };
 
 export default apiUrls;
\ No newline at end of file
diff --git a/js/mixins/alert_mixin.js b/js/mixins/alert_mixin.js
index 90289d22..f52890c7 100644
--- a/js/mixins/alert_mixin.js
+++ b/js/mixins/alert_mixin.js
@@ -5,11 +5,10 @@ let AlertMixin = {
     setAlerts(errors){
         let alerts = errors.map(
                         function(error) {
-                            let key = error + this.state.retry;
-                            return <AlertDismissable error={error} key={key}/>;
+                            return <AlertDismissable error={error} key={error}/>;
                         }.bind(this)
                     );
-        this.setState({alerts: alerts, retry: this.state.retry + 1});
+        this.setState({alerts: alerts});
     },
     clearAlerts(){
         this.setState({alerts: null});
diff --git a/js/mixins/form_mixin.js b/js/mixins/form_mixin.js
index 060a297e..65983653 100644
--- a/js/mixins/form_mixin.js
+++ b/js/mixins/form_mixin.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import EditionActions from '../actions/edition_actions'
 import AppConstants from '../constants/application_constants'
 import AlertDismissable from '../components/ascribe_forms/alert'
 
@@ -8,6 +9,7 @@ export const FormMixin = {
         return {
             submitted: false
             , status: null
+            , errors: []
         }
     },
     submit(e) {
@@ -15,7 +17,7 @@ export const FormMixin = {
         for (var ref in this.refs){
             this.refs[ref].clearAlerts();
         }
-        this.setState({submitted: true});
+        this.setState({submitted: true, errors: []});
         fetch(this.url(), {
             method: 'post',
             headers: {
@@ -30,15 +32,16 @@ export const FormMixin = {
         );
     },
     handleResponse(response){
+        let submitted = false;
         if (response.status >= 200 && response.status < 300){
+            EditionActions.fetchOne(this.props.edition.id);
             this.props.onRequestHide();
+            submitted = true;
         }
         else if (response.status >= 400 && response.status < 500) {
             this.handleError(response);
         }
-        else {
-            this.setState({submitted: false, status: response.status});
-        }
+        this.setState({submitted: submitted, status: response.status});
     },
     handleError(response){
         response.json().then((response) => this.dispatchErrors(response.errors));
@@ -49,14 +52,23 @@ export const FormMixin = {
             if (this.refs && this.refs[input] && this.refs[input].state){
                 this.refs[input].setAlerts(errors[input]);
             }
+            else{
+                this.setState({errors: this.state.errors.concat(errors[input])});
+            }
         }
-        this.setState({submitted: false});
     },
     render(){
         let alert = null;
         if (this.state.status >= 500){
             alert = <AlertDismissable error="Something went wrong, please try again later"/>;
         }
+        if (this.state.errors.length > 0){
+            alert = this.state.errors.map(
+                        function(error) {
+                            return <AlertDismissable error={error} key={error}/>;
+                        }.bind(this)
+                    );
+        }
         return (
             <div>
                 {alert}
diff --git a/js/mixins/modal_mixin.js b/js/mixins/modal_mixin.js
new file mode 100644
index 00000000..7dee243b
--- /dev/null
+++ b/js/mixins/modal_mixin.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+let ModalMixin = {
+    onRequestHide(e){
+        if (e)
+            e.preventDefault();
+        this.props.onRequestHide();
+    }
+};
+
+export default ModalMixin;
\ No newline at end of file

From c6e97d916dcab20a0b1290e73bc2c1780aaeceee Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Fri, 29 May 2015 15:27:40 +0200
Subject: [PATCH 04/17] Merge remote-tracking branch 'remotes/origin/master'
 into AD-51-easy-to-view-manage-1-editions-coi

Conflicts:
	piece/models.py
	web/urls/frontend.py
---
 js/components/ascribe_forms/input_text.js     | 2 +-
 js/components/ascribe_forms/input_textarea.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/js/components/ascribe_forms/input_text.js b/js/components/ascribe_forms/input_text.js
index 9d4d4b61..d242de86 100644
--- a/js/components/ascribe_forms/input_text.js
+++ b/js/components/ascribe_forms/input_text.js
@@ -8,7 +8,7 @@ let InputText = React.createClass({
 
     getInitialState() {
         return {value: null,
-                alerts: null
+                alerts: null // needed in AlertMixin
         };
     },
     handleChange(event) {
diff --git a/js/components/ascribe_forms/input_textarea.js b/js/components/ascribe_forms/input_textarea.js
index c4e0d7b1..cf5cfc4a 100644
--- a/js/components/ascribe_forms/input_textarea.js
+++ b/js/components/ascribe_forms/input_textarea.js
@@ -27,7 +27,6 @@ let InputTextArea = React.createClass({
                     onChange={this.handleChange}></textarea>
             </div>
         );
-
     }
 });
 

From 2c7535a73ae04d661edfeb3387bbfcd86d344120 Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Fri, 29 May 2015 16:53:30 +0200
Subject: [PATCH 05/17] unconsign

---
 js/components/ascribe_forms/form_consign.js   |  2 +-
 js/components/ascribe_forms/form_loan.js      | 66 +++++++++++++++++++
 js/components/ascribe_forms/form_unconsign.js | 58 ++++++++++++++++
 .../ascribe_forms/form_unconsign_request.js   | 49 ++++++++++++++
 js/components/ascribe_modal/modal_loan.js     | 43 ++++++++++++
 .../ascribe_modal/modal_unconsign.js          | 43 ++++++++++++
 .../ascribe_modal/modal_unconsign_request.js  | 43 ++++++++++++
 js/components/edition.js                      |  4 ++
 js/constants/api_urls.js                      |  4 +-
 js/constants/application_constants.js         |  4 +-
 10 files changed, 312 insertions(+), 4 deletions(-)
 create mode 100644 js/components/ascribe_forms/form_loan.js
 create mode 100644 js/components/ascribe_forms/form_unconsign.js
 create mode 100644 js/components/ascribe_forms/form_unconsign_request.js
 create mode 100644 js/components/ascribe_modal/modal_loan.js
 create mode 100644 js/components/ascribe_modal/modal_unconsign.js
 create mode 100644 js/components/ascribe_modal/modal_unconsign_request.js

diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js
index cf68d429..708ab70e 100644
--- a/js/components/ascribe_forms/form_consign.js
+++ b/js/components/ascribe_forms/form_consign.js
@@ -34,7 +34,7 @@ Truly yours,
 ${username}`;
 
         return (
-            <form id="transfer_modal_content" role="form" onSubmit={this.submit}>
+            <form id="consign_modal_content" role="form" onSubmit={this.submit}>
                 <input className="invisible" type="email" name="fake_consignee"/>
                 <input className="invisible" type="password" name="fake_password"/>
                 <InputText
diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
new file mode 100644
index 00000000..708ab70e
--- /dev/null
+++ b/js/components/ascribe_forms/form_loan.js
@@ -0,0 +1,66 @@
+import fetch from 'isomorphic-fetch';
+
+import React from 'react';
+
+import ApiUrls from '../../constants/api_urls';
+import FormMixin from '../../mixins/form_mixin';
+import InputText from './input_text';
+import InputTextArea from './input_textarea';
+import ButtonSubmitOrClose from './button_submit_close';
+
+let ConsignForm = React.createClass({
+    mixins: [FormMixin],
+
+    url() {
+        return ApiUrls.ownership_consigns
+    },
+    getFormData() {
+        return {
+            bitcoin_id: this.props.edition.bitcoin_id,
+            consignee: this.refs.consignee.state.value,
+            consign_message: this.refs.consign_message.state.value,
+            password: this.refs.password.state.value
+        }
+    },
+    renderForm() {
+        let title = this.props.edition.title;
+        let username = this.props.currentUser.username;
+        let message =
+`Hi,
+
+I consign \" ${title} \" to you.
+
+Truly yours,
+${username}`;
+
+        return (
+            <form id="consign_modal_content" role="form" onSubmit={this.submit}>
+                <input className="invisible" type="email" name="fake_consignee"/>
+                <input className="invisible" type="password" name="fake_password"/>
+                <InputText
+                    ref="consignee"
+                    placeHolder="Consignee email"
+                    required="required"
+                    type="email"
+                    submitted={this.state.submitted}/>
+                <InputTextArea
+                    ref="consign_message"
+                    defaultValue={message}
+                    required=""
+                    />
+                <InputText
+                    ref="password"
+                    placeHolder="Password"
+                    required="required"
+                    type="password"
+                    submitted={this.state.submitted}/>
+               <ButtonSubmitOrClose
+                    text="CONSIGN"
+                    onClose={this.props.onRequestHide}
+                    submitted={this.state.submitted} />
+            </form>
+        );
+    }
+});
+
+export default ConsignForm;
\ No newline at end of file
diff --git a/js/components/ascribe_forms/form_unconsign.js b/js/components/ascribe_forms/form_unconsign.js
new file mode 100644
index 00000000..60112334
--- /dev/null
+++ b/js/components/ascribe_forms/form_unconsign.js
@@ -0,0 +1,58 @@
+import fetch from 'isomorphic-fetch';
+
+import React from 'react';
+
+import ApiUrls from '../../constants/api_urls';
+import FormMixin from '../../mixins/form_mixin';
+import InputText from './input_text';
+import InputTextArea from './input_textarea';
+import ButtonSubmitOrClose from './button_submit_close';
+
+let UnConsignForm = React.createClass({
+    mixins: [FormMixin],
+
+    url() {
+        return ApiUrls.ownership_unconsigns
+    },
+    getFormData() {
+        return {
+            bitcoin_id: this.props.edition.bitcoin_id,
+            unconsign_message: this.refs.unconsign_message.state.value,
+            password: this.refs.password.state.value
+        }
+    },
+    renderForm() {
+        let title = this.props.edition.title;
+        let username = this.props.currentUser.username;
+        let message =
+`Hi,
+
+I un-consign \" ${title} \" from you.
+
+Truly yours,
+${username}`;
+
+        return (
+            <form id="unconsign_modal_content" role="form" onSubmit={this.submit}>
+                <input className="invisible" type="email" name="fake_unconsignee"/>
+                <input className="invisible" type="password" name="fake_password"/>
+                <InputTextArea
+                    ref="unconsign_message"
+                    defaultValue={message}
+                    required="" />
+                <InputText
+                    ref="password"
+                    placeHolder="Password"
+                    required="required"
+                    type="password"
+                    submitted={this.state.submitted} />
+               <ButtonSubmitOrClose
+                    text="UNCONSIGN"
+                    onClose={this.props.onRequestHide}
+                    submitted={this.state.submitted} />
+            </form>
+        );
+    }
+});
+
+export default UnConsignForm;
\ No newline at end of file
diff --git a/js/components/ascribe_forms/form_unconsign_request.js b/js/components/ascribe_forms/form_unconsign_request.js
new file mode 100644
index 00000000..f572a287
--- /dev/null
+++ b/js/components/ascribe_forms/form_unconsign_request.js
@@ -0,0 +1,49 @@
+import fetch from 'isomorphic-fetch';
+
+import React from 'react';
+
+import ApiUrls from '../../constants/api_urls';
+import FormMixin from '../../mixins/form_mixin';
+import InputText from './input_text';
+import InputTextArea from './input_textarea';
+import ButtonSubmitOrClose from './button_submit_close';
+
+let UnConsignRequestForm = React.createClass({
+    mixins: [FormMixin],
+
+    url() {
+        return ApiUrls.ownership_unconsigns_request
+    },
+    getFormData() {
+        return {
+            bitcoin_id: this.props.edition.bitcoin_id,
+            unconsign_request_message: this.refs.unconsign_request_message.state.value
+        }
+    },
+    renderForm() {
+        let title = this.props.edition.title;
+        let username = this.props.currentUser.username;
+        let message =
+`Hi,
+
+I request you to un-consign \" ${title} \".
+
+Truly yours,
+${username}`;
+
+        return (
+            <form id="unconsign_request_modal_content" role="form" onSubmit={this.submit}>
+                <InputTextArea
+                    ref="unconsign_request_message"
+                    defaultValue={message}
+                    required="" />
+                <ButtonSubmitOrClose
+                    text="UNCONSIGN REQUEST"
+                    onClose={this.props.onRequestHide}
+                    submitted={this.state.submitted} />
+            </form>
+        );
+    }
+});
+
+export default UnConsignRequestForm;
\ No newline at end of file
diff --git a/js/components/ascribe_modal/modal_loan.js b/js/components/ascribe_modal/modal_loan.js
new file mode 100644
index 00000000..bcd47973
--- /dev/null
+++ b/js/components/ascribe_modal/modal_loan.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import Modal from 'react-bootstrap/lib/Modal';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+import ConsignForm from '../ascribe_forms/form_consign'
+import ModalMixin from '../../mixins/modal_mixin'
+
+let ConsignModalButton = React.createClass({
+    render() {
+        return (
+            <OverlayTrigger delay={500} placement="left"
+                            overlay={<Tooltip>Have someone else sell the artwork</Tooltip>}>
+                <ModalTrigger modal={<ConsignModal edition={this.props.edition}
+                                                   currentUser={this.props.currentUser}/>}>
+                    <div className="btn btn-ascribe-inv">
+                        CONSIGN
+                    </div>
+                </ModalTrigger>
+            </OverlayTrigger>
+        )
+    }
+});
+
+let ConsignModal = React.createClass({
+    mixins : [ModalMixin],
+
+    render() {
+        return (
+            <Modal {...this.props} title="Consign artwork">
+                <div className="modal-body">
+                    <ConsignForm edition={this.props.edition}
+                                 currentUser={this.props.currentUser}
+                                 onRequestHide={this.onRequestHide}/>
+                </div>
+            </Modal>
+        )
+    }
+});
+
+
+export default ConsignModalButton;
diff --git a/js/components/ascribe_modal/modal_unconsign.js b/js/components/ascribe_modal/modal_unconsign.js
new file mode 100644
index 00000000..1245fc01
--- /dev/null
+++ b/js/components/ascribe_modal/modal_unconsign.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import Modal from 'react-bootstrap/lib/Modal';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+import UnConsignForm from '../ascribe_forms/form_unconsign'
+import ModalMixin from '../../mixins/modal_mixin'
+
+let UnConsignModalButton = React.createClass({
+    render() {
+        return (
+            <OverlayTrigger delay={500} placement="left"
+                            overlay={<Tooltip>Unconsign this artwork</Tooltip>}>
+                <ModalTrigger modal={<UnConsignModal edition={this.props.edition}
+                                                   currentUser={this.props.currentUser}/>}>
+                    <div className="btn btn-ascribe-inv">
+                        UNCONSIGN
+                    </div>
+                </ModalTrigger>
+            </OverlayTrigger>
+        )
+    }
+});
+
+let UnConsignModal = React.createClass({
+    mixins : [ModalMixin],
+
+    render() {
+        return (
+            <Modal {...this.props} title="Consign artwork">
+                <div className="modal-body">
+                    <UnConsignForm edition={this.props.edition}
+                                 currentUser={this.props.currentUser}
+                                 onRequestHide={this.onRequestHide}/>
+                </div>
+            </Modal>
+        )
+    }
+});
+
+
+export default UnConsignModalButton;
diff --git a/js/components/ascribe_modal/modal_unconsign_request.js b/js/components/ascribe_modal/modal_unconsign_request.js
new file mode 100644
index 00000000..c74e637b
--- /dev/null
+++ b/js/components/ascribe_modal/modal_unconsign_request.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import Modal from 'react-bootstrap/lib/Modal';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+import UnConsignRequestForm from '../ascribe_forms/form_unconsign_request'
+import ModalMixin from '../../mixins/modal_mixin'
+
+let UnConsignRequestModalButton = React.createClass({
+    render() {
+        return (
+            <OverlayTrigger delay={500} placement="left"
+                            overlay={<Tooltip>Request to unconsign the artwork</Tooltip>}>
+                <ModalTrigger modal={<UnConsignRequestModal edition={this.props.edition}
+                                                            currentUser={this.props.currentUser}/>}>
+                    <div className="btn btn-ascribe-inv">
+                        UNCONSIGN REQUEST
+                    </div>
+                </ModalTrigger>
+            </OverlayTrigger>
+        )
+    }
+});
+
+let UnConsignRequestModal = React.createClass({
+    mixins : [ModalMixin],
+
+    render() {
+        return (
+            <Modal {...this.props} title="Request to unconsign artwork">
+                <div className="modal-body">
+                    <UnConsignRequestForm edition={this.props.edition}
+                                 currentUser={this.props.currentUser}
+                                 onRequestHide={this.onRequestHide}/>
+                </div>
+            </Modal>
+        )
+    }
+});
+
+
+export default UnConsignRequestModalButton;
diff --git a/js/components/edition.js b/js/components/edition.js
index 65fa2a51..2c5279c1 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -2,6 +2,8 @@ import React from 'react';
 
 import ImageViewer from './ascribe_media/image_viewer';
 import ConsignModalButton from './ascribe_modal/modal_consign';
+import UnConsignModalButton from './ascribe_modal/modal_unconsign';
+import UnConsignRequestModalButton from './ascribe_modal/modal_unconsign_request';
 import TransferModalButton from './ascribe_modal/modal_transfer';
 import ShareModalButton from './ascribe_modal/modal_share';
 
@@ -49,6 +51,8 @@ let EditionDetails = React.createClass({
                 <EditionDetailProperty label="owner" value={ this.props.edition.owner } />
                 <br/>
                 <ConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
+                <UnConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
+                <UnConsignRequestModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <TransferModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <ShareModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <hr/>
diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js
index d26352bc..6099710b 100644
--- a/js/constants/api_urls.js
+++ b/js/constants/api_urls.js
@@ -3,7 +3,9 @@ import AppConstants from './application_constants';
 let apiUrls = {
     'ownership_shares_mail' : AppConstants.baseUrl + 'ownership/shares/mail/',
     'ownership_transfers' : AppConstants.baseUrl + 'ownership/transfers/',
-    'ownership_consigns' : AppConstants.baseUrl + 'ownership/consigns/'
+    'ownership_consigns' : AppConstants.baseUrl + 'ownership/consigns/',
+    'ownership_unconsigns' : AppConstants.baseUrl + 'ownership/unconsigns/',
+    'ownership_unconsigns_request' : AppConstants.baseUrl + 'ownership/unconsigns/request/'
 };
 
 export default apiUrls;
\ No newline at end of file
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 17a6d7df..9c20a7ba 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -1,6 +1,6 @@
 let constants = {
-    //'baseUrl': 'http://localhost:8000/api/',
-    'baseUrl': 'http://staging.ascribe.io/api/',
+    'baseUrl': 'http://localhost:8000/api/',
+    //'baseUrl': 'http://staging.ascribe.io/api/',
     'debugCredentialBase64': 'ZGltaUBtYWlsaW5hdG9yLmNvbTowMDAwMDAwMDAw', // dimi@mailinator:0000000000
     'aclList': ['edit', 'consign', 'transfer', 'loan', 'share', 'download', 'view', 'delete', 'del_from_collection', 'add_to_collection']
 };

From d90a4f97dbc55eb11b841faa41998a2cfcd7b538 Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Mon, 1 Jun 2015 13:02:53 +0200
Subject: [PATCH 06/17] loan

---
 index.html                                    |   1 +
 js/components/ascribe_forms/form_loan.js      | 107 +++++++++++++++---
 js/components/ascribe_forms/input_checkbox.js |  40 +++++++
 js/components/ascribe_forms/input_date.js     |  53 +++++++++
 js/components/ascribe_forms/input_hidden.js   |  33 ++++++
 js/components/ascribe_forms/input_text.js     |   3 +-
 js/components/ascribe_modal/modal_loan.js     |  24 ++--
 js/components/edition.js                      |   2 +
 js/constants/api_urls.js                      |   1 +
 js/fetchers/ownership_fetcher.js              |  24 ++++
 package.json                                  |   3 +-
 sass/main.scss                                |   8 ++
 12 files changed, 270 insertions(+), 29 deletions(-)
 create mode 100644 js/components/ascribe_forms/input_checkbox.js
 create mode 100644 js/components/ascribe_forms/input_date.js
 create mode 100644 js/components/ascribe_forms/input_hidden.js
 create mode 100644 js/fetchers/ownership_fetcher.js

diff --git a/index.html b/index.html
index 4c875443..dec0a732 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="build/css/main.css">
         <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
+        <link rel="stylesheet" href="node_modules/react-datepicker/dist/react-datepicker.css">
     </head>
     <body>
         <div id="main" class="container"></div>
diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index 708ab70e..1822b8ce 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -5,46 +5,122 @@ import React from 'react';
 import ApiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
+import InputHidden from './input_hidden';
+import InputCheckbox from './input_checkbox';
+//import InputDate from './input_date';
 import InputTextArea from './input_textarea';
+import OwnershipFetcher from '../../fetchers/ownership_fetcher'
 import ButtonSubmitOrClose from './button_submit_close';
 
-let ConsignForm = React.createClass({
+let LoanForm = React.createClass({
     mixins: [FormMixin],
 
     url() {
-        return ApiUrls.ownership_consigns
+        return ApiUrls.ownership_loans
+    },
+    componentDidMount(){
+        this.setState({contract_key: null,
+                       contract_url: null,
+                       loaneeHasContract: false});
     },
     getFormData() {
         return {
             bitcoin_id: this.props.edition.bitcoin_id,
-            consignee: this.refs.consignee.state.value,
-            consign_message: this.refs.consign_message.state.value,
-            password: this.refs.password.state.value
+            loanee: this.refs.loanee.state.value,
+            gallery_name: this.refs.gallery_name.state.value,
+            startdate: this.refs.startdate.state.value,
+            enddate: this.refs.enddate.state.value,
+            loan_message: this.refs.loan_message.state.value,
+            password: this.refs.password.state.value,
+            terms: this.refs.terms.state.value
         }
     },
+    handleLoanEmailBlur(e){
+        OwnershipFetcher.fetchLoanContract(this.refs.loanee.state.value)
+            .then((res) => {
+                if (res && res.length > 0) {
+                    this.setState({contract_key: res[0].s3Key,
+                                   contract_url: res[0].s3Url,
+                                   loaneeHasContract: true});
+                }
+                else{
+                    this.resetLoanContract();
+                }
+            })
+            .catch((err) => {
+                console.log(err);
+                this.resetLoanContract();
+            });
+    },
+    resetLoanContract(){
+        this.setState({contract_key: null,
+                        contract_url: null,
+                        loaneeHasContract: false
+                       });
+    },
     renderForm() {
         let title = this.props.edition.title;
         let username = this.props.currentUser.username;
         let message =
 `Hi,
 
-I consign \" ${title} \" to you.
+I loan \" ${title} \" to you.
 
 Truly yours,
 ${username}`;
-
+        let contract = <InputHidden ref="terms" value="True"/>;
+        if (this.state.loaneeHasContract){
+            let label = <div>
+                            I agree to the&nbsp;
+                            <a href={this.state.contract_url} target="_blank">
+                                terms of {this.refs.loanee.state.value}
+                            </a>
+                        </div>;
+            contract = <InputCheckbox
+                            ref="terms"
+                            required="required"
+                            label={label}
+                        />
+        }
         return (
-            <form id="consign_modal_content" role="form" onSubmit={this.submit}>
-                <input className="invisible" type="email" name="fake_consignee"/>
+            <form id="loan_modal_content" role="form" onSubmit={this.submit}>
+                <input className="invisible" type="email" name="fake_loanee"/>
                 <input className="invisible" type="password" name="fake_password"/>
                 <InputText
-                    ref="consignee"
-                    placeHolder="Consignee email"
+                    ref="loanee"
+                    placeHolder="Loanee email"
                     required="required"
                     type="email"
+                    submitted={this.state.submitted}
+                    onBlur={this.handleLoanEmailBlur}/>
+                <InputText
+                    ref="gallery_name"
+                    placeHolder="Gallery/exhibition (optional)"
+                    required=""
+                    type="text"
                     submitted={this.state.submitted}/>
+                <div className="row">
+                    <div className="col-md-6">
+                        <InputText
+                            ref="startdate"
+                            name="startdate"
+                            placeHolder="Loan start date"
+                            required="required"
+                            type="text"
+                            submitted={this.state.submitted}/>
+                    </div>
+                    <div className="col-md-6 form-group">
+                        <InputText
+                            ref="enddate"
+                            name="enddate"
+                            placeHolder="Loan end date"
+                            required="required"
+                            type="text"
+                            submitted={this.state.submitted}/>
+                    </div>
+                </div>
                 <InputTextArea
-                    ref="consign_message"
+                    ref="loan_message"
                     defaultValue={message}
                     required=""
                     />
@@ -54,8 +130,9 @@ ${username}`;
                     required="required"
                     type="password"
                     submitted={this.state.submitted}/>
-               <ButtonSubmitOrClose
-                    text="CONSIGN"
+                {contract}
+                <ButtonSubmitOrClose
+                    text="LOAN"
                     onClose={this.props.onRequestHide}
                     submitted={this.state.submitted} />
             </form>
@@ -63,4 +140,4 @@ ${username}`;
     }
 });
 
-export default ConsignForm;
\ No newline at end of file
+export default LoanForm;
\ No newline at end of file
diff --git a/js/components/ascribe_forms/input_checkbox.js b/js/components/ascribe_forms/input_checkbox.js
new file mode 100644
index 00000000..c1ecda1a
--- /dev/null
+++ b/js/components/ascribe_forms/input_checkbox.js
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import AlertMixin from '../../mixins/alert_mixin'
+
+let InputCheckbox = React.createClass({
+
+    mixins : [AlertMixin],
+
+    getInitialState() {
+        return {value: null,
+                alerts: null // needed in AlertMixin
+        };
+    },
+    handleChange(event) {
+        this.setState({value: event.target.value});
+    },
+    render() {
+        let alerts = (this.props.submitted) ? null : this.state.alerts;
+        return (
+            <div className="form-group">
+                {alerts}
+                <div className="input-checkbox-ascribe">
+                    <div className="checkbox">
+                        <label>
+                            <input
+                                type="checkbox"
+                                required={this.props.required}
+                                onChange={this.handleChange}
+                            />
+                            {this.props.label}
+                        </label>
+                    </div>
+                </div>
+            </div>
+        );
+
+    }
+});
+
+export default InputCheckbox;
\ No newline at end of file
diff --git a/js/components/ascribe_forms/input_date.js b/js/components/ascribe_forms/input_date.js
new file mode 100644
index 00000000..aa3e9e94
--- /dev/null
+++ b/js/components/ascribe_forms/input_date.js
@@ -0,0 +1,53 @@
+import React from 'react';
+
+import AlertMixin from '../../mixins/alert_mixin'
+import DatePicker from 'react-datepicker/dist/react-datepicker'
+
+let InputDate = React.createClass({
+
+    mixins : [AlertMixin],
+
+    getInitialState() {
+        return {value: '2015-01-01',
+                alerts: null // needed in AlertMixin
+        };
+    },
+    handleChange(moment_date) {
+        this.setState({value: moment_date.format("YYYY-MM-DD")});
+    },
+    isValidDate: function (str) {
+        return (
+            /^[0-9]{4}$/.test(str) &&
+            moment(str, 'YYYY-MM-DD').isValid()
+        );
+    },
+    render: function () {
+        let className = "form-control input-text-ascribe";
+        let alerts = (this.props.submitted) ? null : this.state.alerts;
+        return (
+             <DatePicker
+                 key="example2"
+                 dateFormat="YYYY-MM-DD"
+                 onChange={this.handleChange}
+              />
+        );
+        //return (
+        //    <div className="input-group date"
+        //        ref={this.props.name + "_picker"}
+        //        onChange={this.handleChange}>
+        //        <input className={className}
+        //            ref={this.props.name}
+        //            placeholder={this.props.placeholder}
+        //            required={this.props.required}
+        //            type="text"/>
+        //        <span className="input-group-addon input-text-ascribe">
+        //            <span className="glyphicon glyphicon-calendar" style={{"color": "black"}}></span>
+        //        </span>
+        //    </div>
+        //)
+
+
+    }
+});
+
+export default InputDate;
\ No newline at end of file
diff --git a/js/components/ascribe_forms/input_hidden.js b/js/components/ascribe_forms/input_hidden.js
new file mode 100644
index 00000000..96ff95ce
--- /dev/null
+++ b/js/components/ascribe_forms/input_hidden.js
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import AlertMixin from '../../mixins/alert_mixin'
+
+let InputHidden = React.createClass({
+
+    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 (
+            <div className="form-group">
+                {alerts}
+                <input
+                    value={this.props.value}
+                    type="hidden"
+                    onChange={this.handleChange}
+                />
+            </div>
+        );
+
+    }
+});
+
+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
index d242de86..b9e7287a 100644
--- a/js/components/ascribe_forms/input_text.js
+++ b/js/components/ascribe_forms/input_text.js
@@ -24,7 +24,8 @@ let InputText = React.createClass({
                         placeholder={this.props.placeHolder}
                         required={this.props.required}
                         type={this.props.type}
-                        onChange={this.handleChange}/>
+                        onChange={this.handleChange}
+                        onBlur={this.props.onBlur}/>
             </div>
         );
 
diff --git a/js/components/ascribe_modal/modal_loan.js b/js/components/ascribe_modal/modal_loan.js
index bcd47973..aed475b1 100644
--- a/js/components/ascribe_modal/modal_loan.js
+++ b/js/components/ascribe_modal/modal_loan.js
@@ -4,18 +4,18 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 
-import ConsignForm from '../ascribe_forms/form_consign'
+import LoanForm from '../ascribe_forms/form_loan'
 import ModalMixin from '../../mixins/modal_mixin'
 
-let ConsignModalButton = React.createClass({
+let LoanModalButton = React.createClass({
     render() {
         return (
             <OverlayTrigger delay={500} placement="left"
-                            overlay={<Tooltip>Have someone else sell the artwork</Tooltip>}>
-                <ModalTrigger modal={<ConsignModal edition={this.props.edition}
-                                                   currentUser={this.props.currentUser}/>}>
+                            overlay={<Tooltip>Loan your artwork for a limited period of time</Tooltip>}>
+                <ModalTrigger modal={<LoanModal edition={this.props.edition}
+                                                currentUser={this.props.currentUser}/>}>
                     <div className="btn btn-ascribe-inv">
-                        CONSIGN
+                        LOAN
                     </div>
                 </ModalTrigger>
             </OverlayTrigger>
@@ -23,16 +23,16 @@ let ConsignModalButton = React.createClass({
     }
 });
 
-let ConsignModal = React.createClass({
+let LoanModal = React.createClass({
     mixins : [ModalMixin],
 
     render() {
         return (
-            <Modal {...this.props} title="Consign artwork">
+            <Modal {...this.props} title="Loan artwork">
                 <div className="modal-body">
-                    <ConsignForm edition={this.props.edition}
-                                 currentUser={this.props.currentUser}
-                                 onRequestHide={this.onRequestHide}/>
+                    <LoanForm edition={this.props.edition}
+                              currentUser={this.props.currentUser}
+                              onRequestHide={this.onRequestHide}/>
                 </div>
             </Modal>
         )
@@ -40,4 +40,4 @@ let ConsignModal = React.createClass({
 });
 
 
-export default ConsignModalButton;
+export default LoanModalButton;
diff --git a/js/components/edition.js b/js/components/edition.js
index 2c5279c1..18c09675 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import ImageViewer from './ascribe_media/image_viewer';
+import LoanModalButton from './ascribe_modal/modal_loan';
 import ConsignModalButton from './ascribe_modal/modal_consign';
 import UnConsignModalButton from './ascribe_modal/modal_unconsign';
 import UnConsignRequestModalButton from './ascribe_modal/modal_unconsign_request';
@@ -50,6 +51,7 @@ let EditionDetails = React.createClass({
                 <EditionDetailProperty label="id" value={ this.props.edition.bitcoin_id } />
                 <EditionDetailProperty label="owner" value={ this.props.edition.owner } />
                 <br/>
+                <LoanModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <ConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <UnConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <UnConsignRequestModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js
index 6099710b..c1288fcd 100644
--- a/js/constants/api_urls.js
+++ b/js/constants/api_urls.js
@@ -3,6 +3,7 @@ import AppConstants from './application_constants';
 let apiUrls = {
     'ownership_shares_mail' : AppConstants.baseUrl + 'ownership/shares/mail/',
     'ownership_transfers' : AppConstants.baseUrl + 'ownership/transfers/',
+    'ownership_loans' : AppConstants.baseUrl + 'ownership/loans/',
     'ownership_consigns' : AppConstants.baseUrl + 'ownership/consigns/',
     'ownership_unconsigns' : AppConstants.baseUrl + 'ownership/unconsigns/',
     'ownership_unconsigns_request' : AppConstants.baseUrl + 'ownership/unconsigns/request/'
diff --git a/js/fetchers/ownership_fetcher.js b/js/fetchers/ownership_fetcher.js
new file mode 100644
index 00000000..94050860
--- /dev/null
+++ b/js/fetchers/ownership_fetcher.js
@@ -0,0 +1,24 @@
+import fetch from 'isomorphic-fetch';
+
+import AppConstants from '../constants/application_constants';
+import FetchApiUtils from '../utils/fetch_api_utils';
+
+
+let OwnershipFetcher = {
+    /**
+     * Fetch one user from the API.
+     * If no arg is supplied, load the current user
+     * 
+     */
+    fetchLoanContract(email) {
+        return fetch(AppConstants.baseUrl + 'ownership/loans/contract/?loanee=' + email, {
+            headers: {
+                'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
+            }
+        }).then(
+            (res) => res.json()
+        );
+    }
+};
+
+export default OwnershipFetcher;
diff --git a/package.json b/package.json
index 38710b47..adc61664 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
     "react": "^0.13.2",
     "react-router": "^0.13.3",
     "uglifyjs": "^2.4.10",
-    "react-bootstrap": "~0.22.6"
+    "react-bootstrap": "~0.22.6",
+    "react-datepicker": "~0.8.0"
   },
   "jest": {
     "scriptPreprocessor": "node_modules/babel-jest",
diff --git a/sass/main.scss b/sass/main.scss
index cd0edf3a..d1a54ee8 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -163,6 +163,14 @@
     height: 13em !important;
 }
 
+.input-checkbox-ascribe {
+    text-align: left;
+    line-height: 1.6;
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 /* columns of same height styles */
 /* http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height */
 .row-full-height {

From f9a3be61d2cd29fbbb128b0fa49aab3db3a76db4 Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Mon, 1 Jun 2015 14:16:06 +0200
Subject: [PATCH 07/17] loan date

---
 js/components/ascribe_forms/form_loan.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index 1822b8ce..be44bb54 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -7,7 +7,7 @@ import FormMixin from '../../mixins/form_mixin';
 import InputText from './input_text';
 import InputHidden from './input_hidden';
 import InputCheckbox from './input_checkbox';
-//import InputDate from './input_date';
+import InputDate from './input_date';
 import InputTextArea from './input_textarea';
 import OwnershipFetcher from '../../fetchers/ownership_fetcher'
 import ButtonSubmitOrClose from './button_submit_close';
@@ -82,6 +82,13 @@ ${username}`;
                             label={label}
                         />
         }
+        //<InputText
+        //                    ref="startdate"
+        //                    name="startdate"
+        //                    placeHolder="Loan start date"
+        //                    required="required"
+        //                    type="text"
+        //                    submitted={this.state.submitted}/>
         return (
             <form id="loan_modal_content" role="form" onSubmit={this.submit}>
                 <input className="invisible" type="email" name="fake_loanee"/>
@@ -101,13 +108,7 @@ ${username}`;
                     submitted={this.state.submitted}/>
                 <div className="row">
                     <div className="col-md-6">
-                        <InputText
-                            ref="startdate"
-                            name="startdate"
-                            placeHolder="Loan start date"
-                            required="required"
-                            type="text"
-                            submitted={this.state.submitted}/>
+                        <InputDate ref="startdate"/>
                     </div>
                     <div className="col-md-6 form-group">
                         <InputText

From 165d2e9b1da2e51392218827ee598243a46e6216 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Mon, 1 Jun 2015 14:49:13 +0200
Subject: [PATCH 08/17] Fix datetime selector

---
 js/components/ascribe_forms/form_loan.js  |  8 +++++---
 js/components/ascribe_forms/input_date.js | 18 ++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index be44bb54..9a1cce27 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -108,13 +108,15 @@ ${username}`;
                     submitted={this.state.submitted}/>
                 <div className="row">
                     <div className="col-md-6">
-                        <InputDate ref="startdate"/>
+                        <InputDate
+                            ref="startdate"
+                            placeholderText="Loan start date" />
                     </div>
                     <div className="col-md-6 form-group">
                         <InputText
                             ref="enddate"
                             name="enddate"
-                            placeHolder="Loan end date"
+                            placeholderText="Loan end date"
                             required="required"
                             type="text"
                             submitted={this.state.submitted}/>
@@ -141,4 +143,4 @@ ${username}`;
     }
 });
 
-export default LoanForm;
\ No newline at end of file
+export default LoanForm;
diff --git a/js/components/ascribe_forms/input_date.js b/js/components/ascribe_forms/input_date.js
index aa3e9e94..98422c72 100644
--- a/js/components/ascribe_forms/input_date.js
+++ b/js/components/ascribe_forms/input_date.js
@@ -8,19 +8,15 @@ let InputDate = React.createClass({
     mixins : [AlertMixin],
 
     getInitialState() {
-        return {value: '2015-01-01',
+        return {value: null,
                 alerts: null // needed in AlertMixin
         };
     },
-    handleChange(moment_date) {
-        this.setState({value: moment_date.format("YYYY-MM-DD")});
-    },
-    isValidDate: function (str) {
-        return (
-            /^[0-9]{4}$/.test(str) &&
-            moment(str, 'YYYY-MM-DD').isValid()
-        );
+
+    handleChange(date) {
+        this.setState({value: date});
     },
+
     render: function () {
         let className = "form-control input-text-ascribe";
         let alerts = (this.props.submitted) ? null : this.state.alerts;
@@ -28,7 +24,9 @@ let InputDate = React.createClass({
              <DatePicker
                  key="example2"
                  dateFormat="YYYY-MM-DD"
+                 selected={this.state.value}
                  onChange={this.handleChange}
+                 placeholderText={this.props.placeholderText}
               />
         );
         //return (
@@ -50,4 +48,4 @@ let InputDate = React.createClass({
     }
 });
 
-export default InputDate;
\ No newline at end of file
+export default InputDate;

From 420516a2fe99ad321d7e1c6d25b7f16f0ea73abe Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Mon, 1 Jun 2015 16:03:41 +0200
Subject: [PATCH 09/17] merge fix

---
 js/components/edition.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/js/components/edition.js b/js/components/edition.js
index f8a433f1..f5792c37 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -1,7 +1,5 @@
 import React from 'react';
-<<<<<<< HEAD
 import ResourceViewer from './ascribe_media/resource_viewer';
-=======
 
 import ImageViewer from './ascribe_media/image_viewer';
 import LoanModalButton from './ascribe_modal/modal_loan';
@@ -10,7 +8,6 @@ import UnConsignModalButton from './ascribe_modal/modal_unconsign';
 import UnConsignRequestModalButton from './ascribe_modal/modal_unconsign_request';
 import TransferModalButton from './ascribe_modal/modal_transfer';
 import ShareModalButton from './ascribe_modal/modal_share';
->>>>>>> master
 
 /**
  * This is the component that implements display-specific functionality

From 1c76c5ef487ea6f14d303127dfdf0bbf1604a1d8 Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Mon, 1 Jun 2015 16:04:34 +0200
Subject: [PATCH 10/17] merge fix

---
 js/components/edition.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/components/edition.js b/js/components/edition.js
index f5792c37..c3c14c57 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import ResourceViewer from './ascribe_media/resource_viewer';
 
-import ImageViewer from './ascribe_media/image_viewer';
 import LoanModalButton from './ascribe_modal/modal_loan';
 import ConsignModalButton from './ascribe_modal/modal_consign';
 import UnConsignModalButton from './ascribe_modal/modal_unconsign';

From cbecbf44ad58d8df361e272d2a4050eaaeca3aaf Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Mon, 1 Jun 2015 18:59:47 +0200
Subject: [PATCH 11/17] bind modals to actionbuttons

---
 js/components/acl_button.js                   | 55 +++++++++++++++---
 js/components/ascribe_modal/modal_consign.js  | 43 --------------
 js/components/ascribe_modal/modal_wrapper.js  | 57 +++++++++++++++++++
 .../piece_list_toolbar.js                     | 35 ++++++++++--
 js/components/edition.js                      | 13 ++++-
 js/components/edition_container.js            |  1 -
 js/mixins/inject_in_head_mixin.js             |  2 +-
 js/stores/user_store.js                       |  4 +-
 8 files changed, 148 insertions(+), 62 deletions(-)
 delete mode 100644 js/components/ascribe_modal/modal_consign.js
 create mode 100644 js/components/ascribe_modal/modal_wrapper.js

diff --git a/js/components/acl_button.js b/js/components/acl_button.js
index 6d4f1756..65af1e18 100644
--- a/js/components/acl_button.js
+++ b/js/components/acl_button.js
@@ -1,27 +1,68 @@
 import React from 'react';
 
+import ConsignForm from './ascribe_forms/form_consign';
+import TransferForm from './ascribe_forms/form_transfer';
+import LoanForm from './ascribe_forms/form_loan';
+import ShareForm from './ascribe_forms/form_share_email';
+import ModalWrapper from './ascribe_modal/modal_wrapper';
 import AppConstants from '../constants/application_constants';
 
 let AclButton = React.createClass({
     propTypes: {
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
         availableAcls: React.PropTypes.array.isRequired,
-        actionFunction: React.PropTypes.func.isRequired
+        editions: React.PropTypes.array.isRequired,
+        currentUser: React.PropTypes.object
     },
 
     actionFunction() {
         this.props.actionFunction(this.props.action);
     },
 
+    actionProperties(){
+        if (this.props.action == 'consign'){
+            return {
+                title: "Consign artwork",
+                tooltip: "Have someone else sell the artwork",
+                form: <ConsignForm />
+            }
+        }
+        else if (this.props.action == 'transfer') {
+            return {
+                title: "Transfer artwork",
+                tooltip: "Transfer the ownership of the artwork",
+                form: <TransferForm />
+            }
+        }
+        else if (this.props.action == 'loan'){
+            return {
+                title: "Loan artwork",
+                tooltip: "Loan your artwork for a limited period of time",
+                form: <LoanForm />}
+        }
+        else if (this.props.action == 'share'){
+            return {
+                title: "Share artwork",
+                tooltip: "Share the artwork",
+                form: <ShareForm />}
+        }
+    },
     render() {
         let shouldDisplay = this.props.availableAcls.indexOf(this.props.action) > -1;
+        let aclProps = this.actionProperties();
         return (
-            <button 
-                type="button" 
-                className={shouldDisplay ? 'btn btn-default btn-sm' : 'hidden'}
-                onClick={this.actionFunction}>
-                {this.props.action.toUpperCase()}
-            </button>
+            <ModalWrapper
+                button={
+                    <div className={shouldDisplay ? 'btn btn-default btn-sm' : 'hidden'}>
+                        {this.props.action.toUpperCase()}
+                    </div>
+                }
+                currentUser={ this.props.currentUser }
+                edition={ this.props.editions[0] }
+                title={ aclProps.title }
+                tooltip={ aclProps.tooltip }>
+                { aclProps.form }
+            </ModalWrapper>
         );
     }
 });
diff --git a/js/components/ascribe_modal/modal_consign.js b/js/components/ascribe_modal/modal_consign.js
deleted file mode 100644
index bcd47973..00000000
--- a/js/components/ascribe_modal/modal_consign.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import Modal from 'react-bootstrap/lib/Modal';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
-import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
-import Tooltip from 'react-bootstrap/lib/Tooltip';
-
-import ConsignForm from '../ascribe_forms/form_consign'
-import ModalMixin from '../../mixins/modal_mixin'
-
-let ConsignModalButton = React.createClass({
-    render() {
-        return (
-            <OverlayTrigger delay={500} placement="left"
-                            overlay={<Tooltip>Have someone else sell the artwork</Tooltip>}>
-                <ModalTrigger modal={<ConsignModal edition={this.props.edition}
-                                                   currentUser={this.props.currentUser}/>}>
-                    <div className="btn btn-ascribe-inv">
-                        CONSIGN
-                    </div>
-                </ModalTrigger>
-            </OverlayTrigger>
-        )
-    }
-});
-
-let ConsignModal = React.createClass({
-    mixins : [ModalMixin],
-
-    render() {
-        return (
-            <Modal {...this.props} title="Consign artwork">
-                <div className="modal-body">
-                    <ConsignForm edition={this.props.edition}
-                                 currentUser={this.props.currentUser}
-                                 onRequestHide={this.onRequestHide}/>
-                </div>
-            </Modal>
-        )
-    }
-});
-
-
-export default ConsignModalButton;
diff --git a/js/components/ascribe_modal/modal_wrapper.js b/js/components/ascribe_modal/modal_wrapper.js
new file mode 100644
index 00000000..83a60c64
--- /dev/null
+++ b/js/components/ascribe_modal/modal_wrapper.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import ReactAddons from 'react/addons';
+
+import Modal from 'react-bootstrap/lib/Modal';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+import ModalMixin from '../../mixins/modal_mixin'
+
+let ModalWrapper = React.createClass({
+
+    render() {
+        return (
+            <OverlayTrigger delay={500} placement="left"
+                            overlay={<Tooltip>{this.props.tooltip}</Tooltip>}>
+                <ModalTrigger modal={
+                    <ModalBody
+                        title={this.props.title}
+                        edition={this.props.edition}
+                        currentUser={this.props.currentUser}>
+                    {this.props.children}
+                    </ModalBody>
+                }>
+                {this.props.button}
+                </ModalTrigger>
+            </OverlayTrigger>
+        )
+    }
+});
+
+//
+let ModalBody = React.createClass({
+    mixins : [ModalMixin],
+
+    renderChildren() {
+        return ReactAddons.Children.map(this.props.children, (child, i) => {
+            return ReactAddons.addons.cloneWithProps(child, {
+                edition: this.props.edition,
+                currentUser: this.props.currentUser,
+                onRequestHide: this.onRequestHide
+            });
+        });
+    },
+    render() {
+        return (
+            <Modal {...this.props} title={this.props.title}>
+                <div className="modal-body">
+                {this.renderChildren()}
+                </div>
+            </Modal>
+        )
+    }
+});
+
+
+export default ModalWrapper;
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
index f7b04cc6..30a30ecb 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
@@ -3,6 +3,9 @@ import React from 'react';
 import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
 
+import UserActions from '../../actions/user_actions';
+import UserStore from '../../stores/user_store';
+
 import AclButton from '../acl_button';
 import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget';
 
@@ -20,11 +23,14 @@ let PieceListToolbar = React.createClass({
     },
 
     componentDidMount() {
-        EditionListStore.listen(this.onChange)
+        EditionListStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
+        UserActions.fetchCurrentUser();
     },
 
     componentDidUnmount() {
-        EditionListStore.unlisten(this.onChange)
+        EditionListStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
     },
 
     filterForSelected(edition) {
@@ -77,6 +83,7 @@ let PieceListToolbar = React.createClass({
 
     render() {
         let availableAcls = this.getAvailableAcls();
+        let editions = this.fetchSelectedEditionList();
 
         if(availableAcls.length > 0) {
             return (
@@ -97,10 +104,26 @@ let PieceListToolbar = React.createClass({
                             <p></p>
                             <div className="row">
                                 <div className="text-center">
-                                    <AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
-                                    <AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
-                                    <AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
-                                    <AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
+                                    <AclButton
+                                        availableAcls={availableAcls}
+                                        action="transfer"
+                                        editions={editions}
+                                        currentUser={this.state.currentUser}/>
+                                    <AclButton
+                                        availableAcls={availableAcls}
+                                        action="consign"
+                                        editions={editions}
+                                        currentUser={this.state.currentUser}/>
+                                    <AclButton
+                                        availableAcls={availableAcls}
+                                        action="loan"
+                                        editions={editions}
+                                        currentUser={this.state.currentUser}/>
+                                    <AclButton
+                                        availableAcls={availableAcls}
+                                        action="share"
+                                        editions={editions}
+                                        currentUser={this.state.currentUser}/>
                                 </div>
                             </div>
                         </div>
diff --git a/js/components/edition.js b/js/components/edition.js
index c3c14c57..92bf5c77 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -2,7 +2,8 @@ import React from 'react';
 import ResourceViewer from './ascribe_media/resource_viewer';
 
 import LoanModalButton from './ascribe_modal/modal_loan';
-import ConsignModalButton from './ascribe_modal/modal_consign';
+import ModalWrapper from './ascribe_modal/modal_wrapper';
+import ConsignForm from './ascribe_forms/form_consign.js';
 import UnConsignModalButton from './ascribe_modal/modal_unconsign';
 import UnConsignRequestModalButton from './ascribe_modal/modal_unconsign_request';
 import TransferModalButton from './ascribe_modal/modal_transfer';
@@ -48,6 +49,7 @@ let EditionHeader = React.createClass({
 });
 
 let EditionDetails = React.createClass({
+
     render() {
         return (
             <div className="ascribe-detail-header">
@@ -57,7 +59,14 @@ let EditionDetails = React.createClass({
                 <EditionDetailProperty label="owner" value={ this.props.edition.owner } />
                 <br/>
                 <LoanModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
-                <ConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
+                <ModalWrapper
+                    button={<div className="btn btn-ascribe-inv">CONSIGN</div>}
+                    currentUser={ this.props.currentUser }
+                    edition={ this.props.edition }
+                    title="Consign artwork"
+                    tooltip="Have someone else sell the artwork">
+                    <ConsignForm />
+                </ModalWrapper>
                 <UnConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <UnConsignRequestModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
                 <TransferModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
diff --git a/js/components/edition_container.js b/js/components/edition_container.js
index 77d28962..6887fd20 100644
--- a/js/components/edition_container.js
+++ b/js/components/edition_container.js
@@ -27,7 +27,6 @@ let EditionContainer = React.createClass({
         UserActions.fetchCurrentUser();
         UserStore.listen(this.onChange);
     },
-
     componentDidUnmount() {
         EditionStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
diff --git a/js/mixins/inject_in_head_mixin.js b/js/mixins/inject_in_head_mixin.js
index 0c83be16..72ecdfe1 100644
--- a/js/mixins/inject_in_head_mixin.js
+++ b/js/mixins/inject_in_head_mixin.js
@@ -42,7 +42,7 @@ let InjectInHeadMixin = {
     },
 
     inject(src) {
-        debugger;
+        //debugger;
         let ext = src.split('.').pop();
         try {
             let tag = mapAttr(src);
diff --git a/js/stores/user_store.js b/js/stores/user_store.js
index 45fbec57..6ae631c9 100644
--- a/js/stores/user_store.js
+++ b/js/stores/user_store.js
@@ -4,13 +4,13 @@ import UserAction from '../actions/user_actions';
 
 class UserStore{
     constructor() {
-        this.currentUser = {}
+        this.currentUser = {};
         this.bindActions(UserAction);
     }
 
     onUpdateCurrentUser(user) {
         this.currentUser = user;
     }
-};
+}
 
 export default alt.createStore(UserStore);

From dc3d024f8d614d23418fb8294ae6d048d79a962d Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Tue, 2 Jun 2015 11:38:18 +0200
Subject: [PATCH 12/17] bulk transfer part 1

---
 js/components/acl_button.js                   | 10 ++---
 js/components/ascribe_forms/form_consign.js   |  8 ++--
 js/components/ascribe_forms/form_transfer.js  | 19 +++++----
 js/components/ascribe_modal/modal_wrapper.js  | 15 +++++--
 .../piece_list_toolbar.js                     | 14 +++++--
 js/components/edition.js                      | 40 +++++++++----------
 js/mixins/form_mixin.js                       | 14 +++++--
 7 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/js/components/acl_button.js b/js/components/acl_button.js
index 65af1e18..5f2a0708 100644
--- a/js/components/acl_button.js
+++ b/js/components/acl_button.js
@@ -12,11 +12,8 @@ let AclButton = React.createClass({
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
         availableAcls: React.PropTypes.array.isRequired,
         editions: React.PropTypes.array.isRequired,
-        currentUser: React.PropTypes.object
-    },
-
-    actionFunction() {
-        this.props.actionFunction(this.props.action);
+        currentUser: React.PropTypes.object,
+        handleSuccess: React.PropTypes.func.isRequired
     },
 
     actionProperties(){
@@ -58,7 +55,8 @@ let AclButton = React.createClass({
                     </div>
                 }
                 currentUser={ this.props.currentUser }
-                edition={ this.props.editions[0] }
+                editions={ this.props.editions }
+                handleSuccess={ this.props.handleSuccess }
                 title={ aclProps.title }
                 tooltip={ aclProps.tooltip }>
                 { aclProps.form }
diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js
index 708ab70e..dbb1eee0 100644
--- a/js/components/ascribe_forms/form_consign.js
+++ b/js/components/ascribe_forms/form_consign.js
@@ -16,19 +16,21 @@ let ConsignForm = React.createClass({
     },
     getFormData() {
         return {
-            bitcoin_id: this.props.edition.bitcoin_id,
+            bitcoin_id: this.getBitcoinIds().join(),
             consignee: this.refs.consignee.state.value,
             consign_message: this.refs.consign_message.state.value,
             password: this.refs.password.state.value
         }
     },
+
     renderForm() {
-        let title = this.props.edition.title;
+        let title = this.getTitlesString().join("");
         let username = this.props.currentUser.username;
         let message =
 `Hi,
 
-I consign \" ${title} \" to you.
+I consign :
+${title}to you.
 
 Truly yours,
 ${username}`;
diff --git a/js/components/ascribe_forms/form_transfer.js b/js/components/ascribe_forms/form_transfer.js
index 28e86db3..c724edd0 100644
--- a/js/components/ascribe_forms/form_transfer.js
+++ b/js/components/ascribe_forms/form_transfer.js
@@ -18,19 +18,24 @@ let TransferForm = React.createClass({
     },
     getFormData() {
         return {
-            bitcoin_id: this.props.edition.bitcoin_id,
+            bitcoin_id: this.getBitcoinIds().join(),
             transferee: this.refs.transferee.state.value,
             transfer_message: this.refs.transfer_message.state.value,
             password: this.refs.password.state.value
         }
     },
     renderForm() {
-        let message = "Hi,\n" +
-                        "\n" +
-                        "I transfer ownership of \"" + this.props.edition.title + "\" to you.\n" +
-                        "\n" +
-                        "Truly yours,\n" +
-                        this.props.currentUser.username;
+        let title = this.getTitlesString().join("");
+        let username = this.props.currentUser.username;
+        let message =
+`Hi,
+
+I transfer ownership of :
+${title}to you.
+
+Truly yours,
+${username}`;
+
         return (
             <form id="transfer_modal_content" role="form" onSubmit={this.submit}>
                 <input className="invisible" type="email" name="fake_transferee"/>
diff --git a/js/components/ascribe_modal/modal_wrapper.js b/js/components/ascribe_modal/modal_wrapper.js
index 83a60c64..a5d20389 100644
--- a/js/components/ascribe_modal/modal_wrapper.js
+++ b/js/components/ascribe_modal/modal_wrapper.js
@@ -17,8 +17,10 @@ let ModalWrapper = React.createClass({
                 <ModalTrigger modal={
                     <ModalBody
                         title={this.props.title}
-                        edition={this.props.edition}
-                        currentUser={this.props.currentUser}>
+                        editions={this.props.editions}
+                        currentUser={this.props.currentUser}
+                        handleSuccess={this.props.handleSuccess}
+                    >
                     {this.props.children}
                     </ModalBody>
                 }>
@@ -33,12 +35,17 @@ let ModalWrapper = React.createClass({
 let ModalBody = React.createClass({
     mixins : [ModalMixin],
 
+    handleSuccess(){
+        this.props.handleSuccess();
+        this.props.onRequestHide();
+    },
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child, i) => {
             return ReactAddons.addons.cloneWithProps(child, {
-                edition: this.props.edition,
+                editions: this.props.editions,
                 currentUser: this.props.currentUser,
-                onRequestHide: this.onRequestHide
+                onRequestHide: this.onRequestHide,
+                handleSuccess: this.handleSuccess
             });
         });
     },
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
index 30a30ecb..dc6fad19 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
@@ -80,7 +80,9 @@ let PieceListToolbar = React.createClass({
     clearAllSelections() {
         EditionListActions.clearAllEditionSelections();
     },
+    handleSuccess(){
 
+    },
     render() {
         let availableAcls = this.getAvailableAcls();
         let editions = this.fetchSelectedEditionList();
@@ -107,23 +109,27 @@ let PieceListToolbar = React.createClass({
                                     <AclButton
                                         availableAcls={availableAcls}
                                         action="transfer"
+                                        currentUser={this.state.currentUser}
                                         editions={editions}
-                                        currentUser={this.state.currentUser}/>
+                                        handleSuccess={this.handleSuccess}/>
                                     <AclButton
                                         availableAcls={availableAcls}
                                         action="consign"
+                                        currentUser={this.state.currentUser}
                                         editions={editions}
-                                        currentUser={this.state.currentUser}/>
+                                        handleSuccess={this.handleSuccess}/>
                                     <AclButton
                                         availableAcls={availableAcls}
                                         action="loan"
+                                        currentUser={this.state.currentUser}
                                         editions={editions}
-                                        currentUser={this.state.currentUser}/>
+                                        handleSuccess={this.handleSuccess}/>
                                     <AclButton
                                         availableAcls={availableAcls}
                                         action="share"
+                                        currentUser={this.state.currentUser}
                                         editions={editions}
-                                        currentUser={this.state.currentUser}/>
+                                        handleSuccess={this.handleSuccess}/>
                                 </div>
                             </div>
                         </div>
diff --git a/js/components/edition.js b/js/components/edition.js
index 92bf5c77..9d0352de 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -1,13 +1,8 @@
 import React from 'react';
 import ResourceViewer from './ascribe_media/resource_viewer';
 
-import LoanModalButton from './ascribe_modal/modal_loan';
-import ModalWrapper from './ascribe_modal/modal_wrapper';
-import ConsignForm from './ascribe_forms/form_consign.js';
-import UnConsignModalButton from './ascribe_modal/modal_unconsign';
-import UnConsignRequestModalButton from './ascribe_modal/modal_unconsign_request';
-import TransferModalButton from './ascribe_modal/modal_transfer';
-import ShareModalButton from './ascribe_modal/modal_share';
+import EditionActions from '../actions/edition_actions'
+import AclButton from './acl_button'
 
 /**
  * This is the component that implements display-specific functionality
@@ -49,7 +44,9 @@ let EditionHeader = React.createClass({
 });
 
 let EditionDetails = React.createClass({
-
+    handleSuccess(){
+        EditionActions.fetchOne(this.props.edition.id);
+    },
     render() {
         return (
             <div className="ascribe-detail-header">
@@ -58,19 +55,20 @@ let EditionDetails = React.createClass({
                 <EditionDetailProperty label="id" value={ this.props.edition.bitcoin_id } />
                 <EditionDetailProperty label="owner" value={ this.props.edition.owner } />
                 <br/>
-                <LoanModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
-                <ModalWrapper
-                    button={<div className="btn btn-ascribe-inv">CONSIGN</div>}
-                    currentUser={ this.props.currentUser }
-                    edition={ this.props.edition }
-                    title="Consign artwork"
-                    tooltip="Have someone else sell the artwork">
-                    <ConsignForm />
-                </ModalWrapper>
-                <UnConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
-                <UnConsignRequestModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
-                <TransferModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
-                <ShareModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
+                <AclButton
+                    availableAcls={["transfer"]}
+                    action="transfer"
+                    editions={[this.props.edition]}
+                    currentUser={this.props.currentUser}
+                    handleSuccess={this.handleSuccess}
+                />
+                <AclButton
+                    availableAcls={["consign"]}
+                    action="consign"
+                    editions={[this.props.edition]}
+                    currentUser={this.props.currentUser}
+                    handleSuccess={this.handleSuccess}
+                />
                 <hr/>
             </div>
         );
diff --git a/js/mixins/form_mixin.js b/js/mixins/form_mixin.js
index 65983653..aa58c8a8 100644
--- a/js/mixins/form_mixin.js
+++ b/js/mixins/form_mixin.js
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import EditionActions from '../actions/edition_actions'
 import AppConstants from '../constants/application_constants'
 import AlertDismissable from '../components/ascribe_forms/alert'
 
@@ -34,8 +33,7 @@ export const FormMixin = {
     handleResponse(response){
         let submitted = false;
         if (response.status >= 200 && response.status < 300){
-            EditionActions.fetchOne(this.props.edition.id);
-            this.props.onRequestHide();
+            this.props.handleSuccess();
             submitted = true;
         }
         else if (response.status >= 400 && response.status < 500) {
@@ -57,6 +55,16 @@ export const FormMixin = {
             }
         }
     },
+    getBitcoinIds(){
+        return this.props.editions.map(function(edition){
+            return edition.bitcoin_id
+        })
+    },
+    getTitlesString(){
+        return this.props.editions.map(function(edition){
+            return '- \"' + edition.title + ', edition ' + edition.edition_number + '\"\n'
+        })
+    },
     render(){
         let alert = null;
         if (this.state.status >= 500){

From 141d21155ba5ecdd20638030adf61767cf7eb178 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Tue, 2 Jun 2015 13:44:50 +0200
Subject: [PATCH 13/17] WIP to style widgets, will continue later

---
 index.html     | 4 ++--
 sass/main.scss | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 7b54e6a2..f11830bf 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,9 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>ascribe</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="build/css/main.css">
-        <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
         <link rel="stylesheet" href="node_modules/react-datepicker/dist/react-datepicker.css">
+        <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
+        <link rel="stylesheet" href="build/css/main.css">
     </head>
     <body>
         <div id="main" class="container clear-margins-and-paddings"></div>
diff --git a/sass/main.scss b/sass/main.scss
index 2734ffdf..abd0a757 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -162,7 +162,8 @@
     text-transform: uppercase;
 }
 
-.input-text-ascribe {
+.input-text-ascribe,
+.datepicker__input {
     border-bottom: 1px solid black;
     border-top: 0;
     border-left: 0;
@@ -240,4 +241,4 @@
 
 .col-bottom {
     vertical-align: bottom;
-}
\ No newline at end of file
+}

From 74faa286f1a8a1734b8724d0bb94805326d8db68 Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Tue, 2 Jun 2015 14:00:05 +0200
Subject: [PATCH 14/17] loan/share forms multiedition

---
 js/components/ascribe_forms/form_loan.js      | 15 +++----
 .../ascribe_forms/form_share_email.js         |  7 +--
 js/components/ascribe_modal/modal_transfer.js | 43 -------------------
 js/constants/application_constants.js         |  4 +-
 4 files changed, 11 insertions(+), 58 deletions(-)
 delete mode 100644 js/components/ascribe_modal/modal_transfer.js

diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index 9a1cce27..90232bd8 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -25,7 +25,7 @@ let LoanForm = React.createClass({
     },
     getFormData() {
         return {
-            bitcoin_id: this.props.edition.bitcoin_id,
+            bitcoin_id: this.getBitcoinIds().join(),
             loanee: this.refs.loanee.state.value,
             gallery_name: this.refs.gallery_name.state.value,
             startdate: this.refs.startdate.state.value,
@@ -59,15 +59,17 @@ let LoanForm = React.createClass({
                        });
     },
     renderForm() {
-        let title = this.props.edition.title;
+        let title = this.getTitlesString().join("");
         let username = this.props.currentUser.username;
         let message =
 `Hi,
 
-I loan \" ${title} \" to you.
+I loan :
+${title}to you.
 
 Truly yours,
 ${username}`;
+
         let contract = <InputHidden ref="terms" value="True"/>;
         if (this.state.loaneeHasContract){
             let label = <div>
@@ -82,13 +84,6 @@ ${username}`;
                             label={label}
                         />
         }
-        //<InputText
-        //                    ref="startdate"
-        //                    name="startdate"
-        //                    placeHolder="Loan start date"
-        //                    required="required"
-        //                    type="text"
-        //                    submitted={this.state.submitted}/>
         return (
             <form id="loan_modal_content" role="form" onSubmit={this.submit}>
                 <input className="invisible" type="email" name="fake_loanee"/>
diff --git a/js/components/ascribe_forms/form_share_email.js b/js/components/ascribe_forms/form_share_email.js
index ea87b4cf..cbcfc7a1 100644
--- a/js/components/ascribe_forms/form_share_email.js
+++ b/js/components/ascribe_forms/form_share_email.js
@@ -16,18 +16,19 @@ let ShareForm = React.createClass({
     },
     getFormData() {
         return {
-            bitcoin_id: this.props.edition.bitcoin_id,
+            bitcoin_id: this.getBitcoinIds().join(),
             share_emails: this.refs.share_emails.state.value,
             share_message: this.refs.share_message.state.value
         }
     },
     renderForm() {
-        let title = this.props.edition.title;
+        let title = this.getTitlesString().join("");
         let username = this.props.currentUser.username;
         let message =
 `Hi,
 
-I am sharing \" ${title} \" with you.
+I am sharing :
+${title}with you.
 
 Truly yours,
 ${username}`;
diff --git a/js/components/ascribe_modal/modal_transfer.js b/js/components/ascribe_modal/modal_transfer.js
deleted file mode 100644
index 12b40524..00000000
--- a/js/components/ascribe_modal/modal_transfer.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import Modal from 'react-bootstrap/lib/Modal';
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
-import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
-import Tooltip from 'react-bootstrap/lib/Tooltip';
-
-import TransferForm from '../ascribe_forms/form_transfer'
-import ModalMixin from '../../mixins/modal_mixin'
-
-let TransferModalButton = React.createClass({
-    render() {
-        return (
-            <OverlayTrigger delay={500} placement="left"
-                            overlay={<Tooltip>Transfer the ownership of the artwork</Tooltip>}>
-                <ModalTrigger modal={<TransferModal edition={this.props.edition}
-                                                    currentUser={this.props.currentUser}/>}>
-                    <div className="btn btn-ascribe-inv">
-                        TRANSFER
-                    </div>
-                </ModalTrigger>
-            </OverlayTrigger>
-        )
-    }
-});
-
-let TransferModal = React.createClass({
-    mixins : [ModalMixin],
-
-    render() {
-        return (
-            <Modal {...this.props} title="Transfer artwork">
-                <div className="modal-body">
-                    <TransferForm edition={this.props.edition}
-                                  currentUser={this.props.currentUser}
-                                  onRequestHide={this.onRequestHide}/>
-                </div>
-            </Modal>
-        )
-    }
-});
-
-
-export default TransferModalButton;
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 9c20a7ba..17a6d7df 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -1,6 +1,6 @@
 let constants = {
-    'baseUrl': 'http://localhost:8000/api/',
-    //'baseUrl': 'http://staging.ascribe.io/api/',
+    //'baseUrl': 'http://localhost:8000/api/',
+    'baseUrl': 'http://staging.ascribe.io/api/',
     'debugCredentialBase64': 'ZGltaUBtYWlsaW5hdG9yLmNvbTowMDAwMDAwMDAw', // dimi@mailinator:0000000000
     'aclList': ['edit', 'consign', 'transfer', 'loan', 'share', 'download', 'view', 'delete', 'del_from_collection', 'add_to_collection']
 };

From cdf8a358df36f0b646bee724bf8eb4d6a0c06bac Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Tue, 2 Jun 2015 15:10:40 +0200
Subject: [PATCH 15/17] loan/share forms multiedition

---
 js/constants/application_constants.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 17a6d7df..9c20a7ba 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -1,6 +1,6 @@
 let constants = {
-    //'baseUrl': 'http://localhost:8000/api/',
-    'baseUrl': 'http://staging.ascribe.io/api/',
+    'baseUrl': 'http://localhost:8000/api/',
+    //'baseUrl': 'http://staging.ascribe.io/api/',
     'debugCredentialBase64': 'ZGltaUBtYWlsaW5hdG9yLmNvbTowMDAwMDAwMDAw', // dimi@mailinator:0000000000
     'aclList': ['edit', 'consign', 'transfer', 'loan', 'share', 'download', 'view', 'delete', 'del_from_collection', 'add_to_collection']
 };

From d1577190430c7d961f0b91ab6c937e781d6b3b7a Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Tue, 2 Jun 2015 15:38:47 +0200
Subject: [PATCH 16/17] multiloan

---
 js/components/ascribe_forms/form_loan.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index 90232bd8..483d0f0a 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -28,8 +28,8 @@ let LoanForm = React.createClass({
             bitcoin_id: this.getBitcoinIds().join(),
             loanee: this.refs.loanee.state.value,
             gallery_name: this.refs.gallery_name.state.value,
-            startdate: this.refs.startdate.state.value,
-            enddate: this.refs.enddate.state.value,
+            startdate: this.refs.startdate.state.value.format("YYYY-MM-DD"),
+            enddate: this.refs.enddate.state.value.format("YYYY-MM-DD"),
             loan_message: this.refs.loan_message.state.value,
             password: this.refs.password.state.value,
             terms: this.refs.terms.state.value
@@ -108,13 +108,9 @@ ${username}`;
                             placeholderText="Loan start date" />
                     </div>
                     <div className="col-md-6 form-group">
-                        <InputText
+                        <InputDate
                             ref="enddate"
-                            name="enddate"
-                            placeholderText="Loan end date"
-                            required="required"
-                            type="text"
-                            submitted={this.state.submitted}/>
+                            placeholderText="Loan end date" />
                     </div>
                 </div>
                 <InputTextArea

From 97338f2727ec77b3d8f04ea8e574c63013197fd7 Mon Sep 17 00:00:00 2001
From: ddejongh <dimi.dejonghe@gmail.com>
Date: Tue, 2 Jun 2015 16:47:25 +0200
Subject: [PATCH 17/17] multiloan

---
 js/components/fatal_error.js |   0
 js/utils/fetch.js            | 113 +++++++++++++++++++++++++++++++++++
 js/utils/lang_utils.js       |  18 ++++++
 3 files changed, 131 insertions(+)
 create mode 100644 js/components/fatal_error.js
 create mode 100644 js/utils/fetch.js
 create mode 100644 js/utils/lang_utils.js

diff --git a/js/components/fatal_error.js b/js/components/fatal_error.js
new file mode 100644
index 00000000..e69de29b
diff --git a/js/utils/fetch.js b/js/utils/fetch.js
new file mode 100644
index 00000000..37626a71
--- /dev/null
+++ b/js/utils/fetch.js
@@ -0,0 +1,113 @@
+import { default as _fetch } from 'isomorphic-fetch';
+import FetchApiUtils from '../utils/fetch_api_utils';
+
+
+class UrlMapError extends Error {};
+class ServerError extends Error {};
+class APIError extends Error {};
+
+
+class Fetch {
+    _merge(defaults, options) {
+        let merged = {};
+        for (let key in defaults) {
+            merged[key] = defaults[key];
+        }
+        for (let key in options) {
+            merged[key] = options[key];
+        }
+        return merged;
+    }
+
+    unpackResponse(response) {
+        if (response.status >= 500) {
+            throw new ServerError();
+        }
+        return response.text();
+    }
+
+    handleFatalError(err) {
+        this.fatalErrorHandler(err);
+        throw new ServerError(err);
+    }
+
+    handleAPIError(json) {
+        if (!json['success']) {
+            let error = new APIError();
+            error.json = json;
+            throw error;
+        }
+        return json;
+    }
+
+    getUrl(url) {
+        let name = url;
+        if (!url.match(/^http/)) {
+            url = this.urlMap[url];
+            if (!url) {
+                throw new UrlMapError(`Cannot find a mapping for "${name}"`);
+            }
+        }
+        
+        return url;
+    }
+
+    prepareUrl(url, params, attachParamsToQuery) {
+        let newUrl = this.getUrl(url);
+        let re = /\${(\w+)}/g;
+
+        newUrl = newUrl.replace(re, (match, key) => {
+            let val = params[key]
+            if (!val) {
+                throw new Error(`Cannot find param ${key}`);
+            }
+            delete params[key];
+            return val;
+        });
+
+        if (attachParamsToQuery && params && Object.keys(params).length > 0) {
+            newUrl += FetchApiUtils.argsToQueryParams(params);
+        }
+
+        return newUrl;
+    }
+
+    request(verb, url, options) {
+        options = options || {};
+        let merged = this._merge(this.httpOptions, options);
+        merged['method'] = verb;
+        return _fetch(url, merged)
+                    .then(this.unpackResponse)
+                    .then(JSON.parse)
+                    .catch(this.handleFatalError.bind(this))
+                    .then(this.handleAPIError);
+    }
+
+    get(url, params) {
+        let paramsCopy = this._merge(params);
+        let newUrl = this.prepareUrl(url, params);
+        return this.request('get', newUrl, true);
+    }
+
+    post(url, params) {
+        let paramsCopy = this._merge(params);
+        let newUrl = this.prepareUrl(url, params);
+        let body = null;
+
+        if (params['body']) {
+            body = JSON.stringify(params['body'])
+        }
+        return this.request('post', url, { body });
+    }
+
+    defaults(options) {
+        this.httpOptions = options.http || {};
+        this.urlMap = options.urlMap || {};
+        this.fatalErrorHandler = options.fatalErrorHandler || (() => {});
+    }
+}
+
+
+let fetch = new Fetch();
+
+export default fetch;
diff --git a/js/utils/lang_utils.js b/js/utils/lang_utils.js
new file mode 100644
index 00000000..a936294e
--- /dev/null
+++ b/js/utils/lang_utils.js
@@ -0,0 +1,18 @@
+import languages from '../constants/languages';
+import template from 'lodash.template';
+
+let getText = function(s, ...args) {
+    let lang = navigator.language || navigator.userLanguage;
+    try {
+        if(lang in languages) {
+            return languages[lang][s];
+        } else {
+            // just use the english language
+            return languages['en-US'][s];
+        }
+    } catch(err) {
+        console.error(err);
+    }
+};
+
+export default getText;
\ No newline at end of file