transfer + withdraw

js/components/ascribe_buttons/acl_button.js

@@ -50,10 +50,21 @@ let AclButton = React.createClass({
                 handleSuccess: this.showNotification
             };
         }else if (this.props.action === 'acl_transfer') {
+            //return {
+            //    title: getLangText('Transfer artwork'),
+            //    tooltip: getLangText('Transfer the ownership of the artwork'),
+            //    form: <TransferForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
+            //    handleSuccess: this.showNotification
+            //};
             return {
                 title: getLangText('Transfer artwork'),
                 tooltip: getLangText('Transfer the ownership of the artwork'),
-                form: <TransferForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
+                form: (
+                    <TransferForm
+                        message={this.getTransferMessage()}
+                        id={this.getFormDataId()}
+                        url={apiUrls.ownership_transfers}/>
+                    ),
                 handleSuccess: this.showNotification
             };
         }
@@ -112,11 +123,24 @@ let AclButton = React.createClass({
         }
     },
 
+// plz move to share form
+    getTransferMessage(){
+        return (
+            `${getLangText('Hi')},
+
+${getLangText('I transfer ownership of')}:
+${this.getTitlesString()} ${getLangText('to you')}.
+
+${getLangText('Truly yours')},
+${this.props.currentUser.username}
+            `
+        );
+    },
+
 // plz move to share form
     getShareMessage(){
         return (
-            `
-${getLangText('Hi')},
+            `${getLangText('Hi')},
 
 ${getLangText('I am sharing')}:
 ${this.getTitlesString()} ${getLangText('with you')}.

js/components/ascribe_detail/edition.js

@@ -6,6 +6,7 @@ import Router from 'react-router';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+import Button from 'react-bootstrap/lib/Button';
 
 import UserActions from '../../actions/user_actions';
 import UserStore from '../../stores/user_store';
@@ -172,18 +173,9 @@ let EditionSummary = React.createClass({
             status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
             if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
                 status = (
-                    <Form
-                        url={apiUrls.ownership_transfers_withdraw}
-                        getFormData={this.getTransferWithdrawData}
-                        handleSuccess={this.showNotification}>
-                        <EditionDetailProperty label="STATUS" value={ statusStr }>
-                            <button
-                                type="submit"
-                                className="pull-right btn btn-default btn-sm">
-                                WITHDRAW
-                            </button>
-                        </EditionDetailProperty>
-                    </Form>
+
+                        <EditionDetailProperty label="STATUS" value={ statusStr } />
+
                 );
             }
         }
@@ -197,7 +189,22 @@ let EditionSummary = React.createClass({
                     editions={ [this.props.edition] }
                     handleSuccess={this.showNotification}/>);
         }
+
         else {
+            let withdrawButton = null;
+            if (this.props.edition.status.length > 0 && this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer) {
+                withdrawButton = (
+                    <Form
+                        url={apiUrls.ownership_transfers_withdraw}
+                        getFormData={this.getTransferWithdrawData}
+                        handleSuccess={this.showNotification}
+                        className='inline'>
+                        <Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
+                            WITHDRAW TRANSFER
+                        </Button>
+                    </Form>
+                );
+            }
             actions = (
                 <Row>
                     <Col md={12}>
@@ -205,7 +212,9 @@ let EditionSummary = React.createClass({
                             className="text-center ascribe-button-list"
                             availableAcls={this.props.edition.acl}
                             editions={[this.props.edition]}
-                            handleSuccess={this.handleSuccess} />
+                            handleSuccess={this.handleSuccess}>
+                            {withdrawButton}
+                        </AclButtonList>
                     </Col>
                 </Row>);
         }

js/components/ascribe_forms/form_request_action.js

@@ -8,7 +8,7 @@ import apiUrls from '../../constants/api_urls';
 import FormMixin from '../../mixins/form_mixin';
 
 import AppConstants from '../../constants/application_constants';
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
 let RequestActionForm = React.createClass({
     mixins: [FormMixin],

js/components/ascribe_forms/form_transfer.js

@@ -1,72 +1,165 @@
+//'use strict';
+//
+//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 '../ascribe_buttons/button_submit_close';
+//import { getLangText } from '../../utils/lang_utils.js'
+//
+//let TransferForm = React.createClass({
+//    mixins: [FormMixin],
+//
+//    url() {
+//        return ApiUrls.ownership_transfers;
+//    },
+//
+//    getFormData() {
+//        return {
+//            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 title = this.getTitlesString().join('');
+//        let username = this.props.currentUser.username;
+//        let message =
+//`${getLangText('Hi')},
+//
+//${getLangText('I transfer ownership of')} :
+//${title}${getLangText('to you')}.
+//
+//${getLangText('Truly yours')},
+//${username}`;
+//
+//        return (
+//            <form id="transfer_modal_content" role="form" onSubmit={this.submit}>
+//                <input className="invisible" type="email" name="fake_transferee"/>
+//                <input className="invisible" type="password" name="fake_password"/>
+//                <InputText
+//                    ref="transferee"
+//                    placeHolder={getLangText('Transferee email')}
+//                    required="required"
+//                    type="email"
+//                    submitted={this.state.submitted}/>
+//                <InputTextArea
+//                    ref="transfer_message"
+//                    defaultValue={message}
+//                    required=""
+//                    />
+//                <InputText
+//                    ref="password"
+//                    placeHolder={getLangText('Password')}
+//                    required="required"
+//                    type="password"
+//                    submitted={this.state.submitted}/>
+//                <div>
+//                    Make sure that display instructions and technology details are correct.
+//                    They cannot be edited after the transfer.
+//                </div>
+//               <ButtonSubmitOrClose
+//                    text={getLangText('TRANSFER')}
+//                    onClose={this.props.onRequestHide}
+//                    submitted={this.state.submitted} />
+//            </form>
+//        );
+//    }
+//});
+//
 'use strict';
 
 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 '../ascribe_buttons/button_submit_close';
-import { getLangText } from '../../utils/lang_utils.js'
+import Button from 'react-bootstrap/lib/Button';
+import Alert from 'react-bootstrap/lib/Alert';
+
+import Form from './form';
+import Property from './property';
+import InputTextAreaToggable from './input_textarea_toggable';
+
+
+import AppConstants from '../../constants/application_constants';
+import { getLangText } from '../../utils/lang_utils.js';
+
 
 let TransferForm = React.createClass({
-    mixins: [FormMixin],
-
-    url() {
-        return ApiUrls.ownership_transfers;
-    },
-    
-    getFormData() {
-        return {
-            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
-        };
+    propTypes: {
+        url: React.PropTypes.string,
+        id: React.PropTypes.object,
+        message: React.PropTypes.string,
+        editions: React.PropTypes.array,
+        currentUser: React.PropTypes.object,
+        onRequestHide: React.PropTypes.func,
+        handleSuccess: React.PropTypes.func
     },
 
-    renderForm() {
-        let title = this.getTitlesString().join('');
-        let username = this.props.currentUser.username;
-        let message =
-`${getLangText('Hi')},
+    getFormData(){
+        return this.props.id;
+    },
 
-${getLangText('I transfer ownership of')} :
-${title}${getLangText('to you')}.
-
-${getLangText('Truly yours')},
-${username}`;
+    render() {
 
         return (
-            <form id="transfer_modal_content" role="form" onSubmit={this.submit}>
-                <input className="invisible" type="email" name="fake_transferee"/>
-                <input className="invisible" type="password" name="fake_password"/>
-                <InputText
-                    ref="transferee"
-                    placeHolder={getLangText('Transferee email')}
-                    required="required"
-                    type="email"
-                    submitted={this.state.submitted}/>
-                <InputTextArea
-                    ref="transfer_message"
-                    defaultValue={message}
-                    required=""
-                    />
-                <InputText
-                    ref="password"
-                    placeHolder={getLangText('Password')}
-                    required="required"
-                    type="password"
-                    submitted={this.state.submitted}/>
-                <div>
-                    Make sure that display instructions and technology details are correct.
+            <Form
+                ref='form'
+                url={this.props.url}
+                getFormData={this.getFormData}
+                handleSuccess={this.props.handleSuccess}
+                buttons={
+                    <div className="modal-footer">
+                        <p className="pull-right">
+                            <Button
+                                className="btn btn-default btn-sm ascribe-margin-1px"
+                                type="submit">TRANSFER</Button>
+                            <Button
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                                style={{marginLeft: '0'}}
+                                onClick={this.props.onRequestHide}>CLOSE</Button>
+                        </p>
+                    </div>}
+                spinner={
+                    <div className="modal-footer">
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    </div>}>
+                <Property
+                    name='transferee'
+                    label={getLangText('Email')}>
+                    <input
+                        type="email"
+                        placeholder={getLangText('Email of the transferee')}
+                        required/>
+                </Property>
+                <Property
+                    name='transfer_message'
+                    label='Personal Message'
+                    editable={true}>
+                    <InputTextAreaToggable
+                        rows={1}
+                        editable={true}
+                        defaultValue={this.props.message}
+                        placeholder={getLangText('Enter a message...')}
+                        required="required"/>
+                </Property>
+                <Property
+                    name='password'
+                    label={getLangText('Password')}>
+                    <input
+                        type="password"
+                        placeholder={getLangText('Enter your password')}
+                        required/>
+                </Property>
+                <hr />
+                <br />
+                <Alert bsStyle='warning'>
+                    Make sure that display instructions and technology details are correct.<br/>
                     They cannot be edited after the transfer.
-                </div>
-               <ButtonSubmitOrClose
-                    text={getLangText('TRANSFER')}
-                    onClose={this.props.onRequestHide}
-                    submitted={this.state.submitted} />
-            </form>
+                </Alert>
+            </Form>
         );
     }
 });

js/components/ascribe_forms/input_textarea_toggable.js

@@ -32,6 +32,7 @@ let InputTextAreaToggable = React.createClass({
                     className={className}
                     value={this.state.value}
                     rows={this.props.rows}
+                    maxRows={10}
                     required={this.props.required}
                     onChange={this.handleChange}
                     onBlur={this.props.onBlur}

sass/main.scss

@@ -58,6 +58,10 @@ hr {
 .no-padding{
     padding: 0;
 }
+.inline{
+    display: inline;
+}
+
 .navbar-default {
     border: none;
     border-left:0;