Merge remote-tracking branch 'remotes/origin/AD-716-aclbutton-doesnt-respect-modals-r'

Conflicts:
	js/components/settings_container.js

docs/refactor-todo.md

@@ -2,16 +2,18 @@
 
 *This should be a living document. So if you have any ideas for refactoring stuff, then feel free to add them to this document*
 
-- Get rid of all Mixins. (making good progress there :))
 - Make all standalone components independent from things like global utilities (GeneralUtils is maybe used in table for example)
-- Check if all polyfills are appropriately initialized and available: Compare to this
 - Extract all standalone components to their own folder structure and write application independent tests (+ figure out how to do that in a productive way) (fetch lib especially)
-- Refactor forms to generic-declarative form component
 - Check for mobile compatibility: Is site responsive anywhere?
 queryParams of the piece_list_store should all be reflected in the url and not a single component each should manipulate the URL bar (refactor pagination, use actions and state)
 - Refactor string-templating for api_urls
 - Use classNames plugin instead of if-conditional-classes
 
+# Refactor DONE
+- Refactor forms to generic-declarative form component ✓
+- Get rid of all Mixins (inject head is fine) ✓
+- Check if all polyfills are appropriately initialized and available: Compare to this ✓
+
 ## React-S3-Fineuploader
 - implementation should enable to define all important methods outside
 - and: maybe create a utility class for all methods to avoid code duplication

js/components/ascribe_buttons/acl_button.js

@@ -13,8 +13,10 @@ import AppConstants from '../../constants/application_constants';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import ApiUrls from '../../constants/api_urls';
-import apiUrls from '../../constants/api_urls';
+
+import { getAclFormMessage } from '../../utils/form_utils';
+import { getLangText } from '../../utils/lang_utils';
 
 let AclButton = React.createClass({
     propTypes: {
@@ -34,15 +36,18 @@ let AclButton = React.createClass({
     },
 
     actionProperties(){
+
+        let message = getAclFormMessage(this.props.action, this.getTitlesString(), this.props.currentUser.username);
+
         if (this.props.action === 'acl_consign'){
             return {
                 title: getLangText('Consign artwork'),
                 tooltip: getLangText('Have someone else sell the artwork'),
                 form: (
                     <ConsignForm
-                        message={this.getConsignMessage()}
+                        message={message}
                         id={this.getFormDataId()}
-                        url={apiUrls.ownership_consigns}/>
+                        url={ApiUrls.ownership_consigns}/>
                     ),
                 handleSuccess: this.showNotification
             };
@@ -53,9 +58,9 @@ let AclButton = React.createClass({
                 tooltip: getLangText('Have the owner manage his sales again'),
                 form: (
                     <UnConsignForm
-                        message={this.getUnConsignMessage()}
+                        message={message}
                         id={this.getFormDataId()}
-                        url={apiUrls.ownership_unconsigns}/>
+                        url={ApiUrls.ownership_unconsigns}/>
                     ),
                 handleSuccess: this.showNotification
             };
@@ -65,9 +70,9 @@ let AclButton = React.createClass({
                 tooltip: getLangText('Transfer the ownership of the artwork'),
                 form: (
                     <TransferForm
-                        message={this.getTransferMessage()}
+                        message={message}
                         id={this.getFormDataId()}
-                        url={apiUrls.ownership_transfers}/>
+                        url={ApiUrls.ownership_transfers}/>
                 ),
                 handleSuccess: this.showNotification
             };
@@ -77,9 +82,9 @@ let AclButton = React.createClass({
                 title: getLangText('Loan artwork'),
                 tooltip: getLangText('Loan your artwork for a limited period of time'),
                 form: (<LoanForm
-                        message={this.getLoanMessage()}
+                        message={message}
                         id={this.getFormDataId()}
-                        url={this.isPiece() ? apiUrls.ownership_loans_pieces : apiUrls.ownership_loans_editions}/>
+                        url={this.isPiece() ? ApiUrls.ownership_loans_pieces : ApiUrls.ownership_loans_editions}/>
                 ),
                 handleSuccess: this.showNotification
             };
@@ -90,9 +95,9 @@ let AclButton = React.createClass({
                 tooltip: getLangText('Share the artwork'),
                 form: (
                     <ShareForm
-                        message={this.getShareMessage()}
+                        message={message}
                         id={this.getFormDataId()}
-                        url={this.isPiece() ? apiUrls.ownership_shares_pieces : apiUrls.ownership_shares_editions }/>
+                        url={this.isPiece() ? ApiUrls.ownership_shares_pieces : ApiUrls.ownership_shares_editions }/>
                     ),
                 handleSuccess: this.showNotification
             };
@@ -133,76 +138,6 @@ let AclButton = React.createClass({
         }
     },
 
-// plz move to transfer 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 transfer form
-    getLoanMessage(){
-        return (
-            `${getLangText('Hi')},
-
-${getLangText('I loan')}:
-${this.getTitlesString()} ${getLangText('to you')}.
-
-${getLangText('Truly yours')},
-${this.props.currentUser.username}
-            `
-        );
-    },
-
-    // plz move to consign form
-    getConsignMessage(){
-        return (
-            `${getLangText('Hi')},
-
-${getLangText('I consign')}:
-${this.getTitlesString()} ${getLangText('to you')}.
-
-${getLangText('Truly yours')},
-${this.props.currentUser.username}
-            `
-        );
-    },
-
-    // plz move to consign form
-    getUnConsignMessage(){
-        return (
-            `${getLangText('Hi')},
-
-${getLangText('I un-consign')}:
-${this.getTitlesString()} ${getLangText('from you')}.
-
-${getLangText('Truly yours')},
-${this.props.currentUser.username}
-            `
-        );
-    },
-
-// plz move to share form
-    getShareMessage(){
-        return (
-            `${getLangText('Hi')},
-
-${getLangText('I am sharing')}:
-${this.getTitlesString()} ${getLangText('with you')}.
-
-${getLangText('Truly yours')},
-${this.props.currentUser.username}
-            `
-        );
-    },
-
     // Removes the acl_ prefix and converts to upper case
     sanitizeAction() {
         return this.props.action.split('acl_')[1].toUpperCase();
@@ -214,14 +149,13 @@ ${this.props.currentUser.username}
 
         return (
             <ModalWrapper
-                button={
+                trigger={
                     <button className={shouldDisplay ? 'btn btn-default btn-sm ' : 'hidden'}>
                         {this.sanitizeAction()}
                     </button>
                 }
                 handleSuccess={aclProps.handleSuccess}
-                title={aclProps.title}
+                title={aclProps.title}>
-                tooltip={aclProps.tooltip}>
                 {aclProps.form}
             </ModalWrapper>
         );

js/components/ascribe_buttons/delete_button.js

@@ -26,7 +26,7 @@ let DeleteButton = React.createClass({
 
     mixins: [Router.Navigation],
 
-    render: function () {
+    render() {
         let availableAcls;
         let btnDelete;
         let content;
@@ -61,13 +61,14 @@ let DeleteButton = React.createClass({
             }
 
             btnDelete = <Button bsStyle="danger" className="btn-delete" bsSize="small">{getLangText('REMOVE FROM COLLECTION')}</Button>;
-        }
+        
-        else {
+        } else {
             return null;
         }
+
         return (
             <ModalWrapper
-                button={btnDelete}
+                trigger={btnDelete}
                 handleSuccess={this.props.handleSuccess}
                 title={title}>
                 {content}
@@ -77,4 +78,3 @@ let DeleteButton = React.createClass({
 });
 
 export default DeleteButton;
-

js/components/ascribe_buttons/unconsign_request_button.js

@@ -8,7 +8,7 @@ import ModalWrapper from '../ascribe_modal/modal_wrapper';
 import UnConsignRequestForm from './../ascribe_forms/form_unconsign_request';
 
 import { getLangText } from '../../utils/lang_utils.js';
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
 
 
 let UnConsignRequestButton = React.createClass({
@@ -21,16 +21,15 @@ let UnConsignRequestButton = React.createClass({
     render: function () {
         return (
             <ModalWrapper
-                button={
+                trigger={
                     <Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
                         REQUEST UNCONSIGN
                     </Button>
                 }
                 handleSuccess={this.props.handleSuccess}
-                title='Request to Un-Consign'
+                title='Request to Un-Consign'>
-                tooltip='Ask the consignee to return the ownership of the work back to you'>
                 <UnConsignRequestForm
-                    url={apiUrls.ownership_unconsigns_request}
+                    url={ApiUrls.ownership_unconsigns_request}
                     id={{'bitcoin_id': this.props.edition.bitcoin_id}}
                     message={`${getLangText('Hi')},
 

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -2,13 +2,10 @@
 
 import React from 'react';
 
-import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
+import Panel from 'react-bootstrap/lib/Panel';
-
-import classNames from 'classnames';
 
 
 const CollapsibleParagraph = React.createClass({
-
     propTypes: {
         title: React.PropTypes.string,
         children: React.PropTypes.oneOfType([
@@ -20,18 +17,14 @@ const CollapsibleParagraph = React.createClass({
 
     getDefaultProps() {
         return {
-            show: true
+            show: false
         };
     },
 
-    mixins: [CollapsibleMixin],
+    getInitialState() {
-
+        return {
-    getCollapsibleDOMNode(){
+            expanded: false
-        return React.findDOMNode(this.refs.panel);
+        };
-    },
-
-    getCollapsibleDimensionValue(){
-        return React.findDOMNode(this.refs.panel).scrollHeight;
     },
 
     handleToggle(e){
@@ -40,8 +33,7 @@ const CollapsibleParagraph = React.createClass({
     },
 
     render() {
-        let styles = this.getCollapsibleClassSet();
+        let text = this.state.expanded ? '-' : '+';
-        let text = this.isExpanded() ? '-' : '+';
 
         if(this.props.show) {
             return (
@@ -50,9 +42,12 @@ const CollapsibleParagraph = React.createClass({
                         <div onClick={this.handleToggle}>
                             <span>{text} {this.props.title}</span>
                         </div>
-                        <div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}>
+                        <Panel
+                            collapsible
+                            expanded={this.state.expanded}
+                            className="ascribe-edition-collapsible-content">
                             {this.props.children}
-                        </div>
+                        </Panel>
                     </div>
                 </div>
             );

js/components/ascribe_detail/edition.js

@@ -36,7 +36,7 @@ import DeleteButton from '../ascribe_buttons/delete_button';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
 
 import { getLangText } from '../../utils/lang_utils';
@@ -233,10 +233,11 @@ let EditionSummary = React.createClass({
             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}
+                        url={ApiUrls.ownership_transfers_withdraw}
                         getFormData={this.getTransferWithdrawData}
                         handleSuccess={this.showNotification}
-                        className='inline'>
+                        className='inline'
+                        isInline={true}>
                         <Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
                             WITHDRAW TRANSFER
                         </Button>
@@ -335,7 +336,7 @@ let EditionPersonalNote = React.createClass({
         if (this.props.currentUser.username && true || false) {
             return (
                 <Form
-                    url={apiUrls.note_notes}
+                    url={ApiUrls.note_notes}
                     handleSuccess={this.showNotification}>
                     <Property
                         name='note'
@@ -373,7 +374,7 @@ let EditionPublicEditionNote = React.createClass({
         if (isEditable || this.props.edition.public_note){
             return (
                 <Form
-                    url={apiUrls.note_edition}
+                    url={ApiUrls.note_edition}
                     handleSuccess={this.showNotification}>
                     <Property
                         name='note'

js/components/ascribe_detail/further_details.js

@@ -16,7 +16,7 @@ import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
@@ -133,7 +133,7 @@ let FileUploader = React.createClass({
                             pieceId: this.props.pieceId
                         }}
                         createBlobRoutine={{
-                            url: apiUrls.blob_otherdatas,
+                            url: ApiUrls.blob_otherdatas,
                             pieceId: this.props.pieceId
                         }}
                         validation={{

js/components/ascribe_forms/create_editions_form.js

@@ -8,12 +8,11 @@ import Property from '../ascribe_forms/property';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
 
 import { getLangText } from '../../utils/lang_utils';
 
 let CreateEditionsForm = React.createClass({
-
     propTypes: {
         handleSuccess: React.PropTypes.func,
         pieceId: React.PropTypes.number
@@ -38,7 +37,7 @@ let CreateEditionsForm = React.createClass({
         return (
             <Form
                 ref='form'
-                url={apiUrls.editions}
+                url={ApiUrls.editions}
                 getFormData={this.getFormData}
                 handleSuccess={this.handleSuccess}
                 spinner={

js/components/ascribe_forms/form.js

@@ -6,6 +6,9 @@ import ReactAddons from 'react/addons';
 import Button from 'react-bootstrap/lib/Button';
 import AlertDismissable from './alert';
 
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
 import requests from '../../utils/requests';
 
 import { getLangText } from '../../utils/lang_utils';
@@ -15,20 +18,30 @@ import { mergeOptionsWithDuplicates } from '../../utils/general_utils';
 let Form = React.createClass({
     propTypes: {
         url: React.PropTypes.string,
-        buttons: React.PropTypes.object,
+        method: React.PropTypes.string,
         buttonSubmitText: React.PropTypes.string,
-        spinner: React.PropTypes.object,
         handleSuccess: React.PropTypes.func,
         getFormData: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]),
-        className: React.PropTypes.string
+        className: React.PropTypes.string,
+        spinner: React.PropTypes.element,
+        buttons: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.arrayOf(React.PropTypes.element)
+        ]),
+
+        // You can use the form for inline requests, like the submit click on a button.
+        // For the form to then not display the error on top, you need to enable this option.
+        // It will make use of the GlobalNotification
+        isInline: React.PropTypes.bool
     },
 
     getDefaultProps() {
         return {
+            method: 'post',
             buttonSubmitText: 'SAVE'
         };
     },
@@ -40,6 +53,7 @@ let Form = React.createClass({
             errors: []
         };
     },
+
     reset(){
         for (let ref in this.refs){
             if (typeof this.refs[ref].reset === 'function'){
@@ -48,22 +62,38 @@ let Form = React.createClass({
         }
         this.setState(this.getInitialState());
     },
+
     submit(event){
-        if (event) {
+        
+        if(event) {
             event.preventDefault();
         }
+
         this.setState({submitted: true});
         this.clearErrors();
-        let action = (this.httpVerb && this.httpVerb()) || 'post';
+
-        window.setTimeout(() => this[action](), 100);
+        // selecting http method based on props
+        if(this[this.props.method]) {
+            window.setTimeout(() => this[this.props.method](), 100);
+        } else {
+            throw new Error('This HTTP method is not supported by form.js (' + this.props.method + ')');
+        }
     },
-    post(){
+
+    post() {
         requests
             .post(this.props.url, { body: this.getFormData() })
             .then(this.handleSuccess)
             .catch(this.handleError);
     },
 
+    delete() {
+        requests
+            .delete(this.props.url, this.getFormData())
+            .then(this.handleSuccess)
+            .catch(this.handleError);
+    },
+
     getFormData(){
         let data = {};
         for (let ref in this.refs){
@@ -79,6 +109,7 @@ let Form = React.createClass({
     handleChangeChild(){
         this.setState({edited: true});
     },
+
     handleSuccess(response){
         if ('handleSuccess' in this.props){
             this.props.handleSuccess(response);
@@ -88,8 +119,12 @@ let Form = React.createClass({
                 this.refs[ref].handleSuccess();
             }
         }
-        this.setState({edited: false, submitted: false});
+        this.setState({
+            edited: false,
+            submitted: false
+        });
     },
+
     handleError(err){
         if (err.json) {
             for (var input in err.json.errors){
@@ -109,10 +144,18 @@ let Form = React.createClass({
             }
 
             console.logGlobal(err, false, formData);
-            this.setState({errors: [getLangText('Something went wrong, please try again later')]});
+
+            if(this.props.isInline) {
+                let notification = new GlobalNotificationModel(getLangText('Something went wrong, please try again later'), 'danger');
+                GlobalNotificationActions.appendGlobalNotification(notification);
+            } else {
+                this.setState({errors: [getLangText('Something went wrong, please try again later')]});
+            }
+
         }
         this.setState({submitted: false});
     },
+
     clearErrors(){
         for (var ref in this.refs){
             if ('clearErrors' in this.refs[ref]){
@@ -121,6 +164,7 @@ let Form = React.createClass({
         }
         this.setState({errors: []});
     },
+
     getButtons() {
         if (this.state.submitted){
             return this.props.spinner;
@@ -143,6 +187,7 @@ let Form = React.createClass({
         }
         return buttons;
     },
+
     getErrors() {
         let errors = null;
         if (this.state.errors.length > 0){
@@ -152,6 +197,7 @@ let Form = React.createClass({
         }
         return errors;
     },
+
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
             if (child) {
@@ -162,6 +208,7 @@ let Form = React.createClass({
             }
         });
     },
+
     render() {
         let className = 'ascribe-form';
 

js/components/ascribe_forms/form_consign.js

@@ -8,7 +8,6 @@ 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';
 
@@ -18,7 +17,6 @@ let ConsignForm = React.createClass({
         url: React.PropTypes.string,
         id: React.PropTypes.object,
         message: React.PropTypes.string,
-        onRequestHide: React.PropTypes.func,
         handleSuccess: React.PropTypes.func
     },
 
@@ -27,7 +25,6 @@ let ConsignForm = React.createClass({
     },
 
     render() {
-
         return (
             <Form
                 ref='form'
@@ -39,11 +36,9 @@ let ConsignForm = React.createClass({
                         <p className="pull-right">
                             <Button
                                 className="btn btn-default btn-sm ascribe-margin-1px"
-                                type="submit">{getLangText('CONSIGN')}</Button>
+                                type="submit">
-                            <Button
+                                {getLangText('CONSIGN')}
-                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                            </Button>
-                                style={{marginLeft: '0'}}
-                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
                         </p>
                     </div>}
                 spinner={

js/components/ascribe_forms/form_delete_edition.js

@@ -2,33 +2,65 @@
 
 import React from 'react';
 
-import requests from '../../utils/requests';
+import Form from './form';
+
 import ApiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
+import AppConstants from '../../constants/application_constants';
+
 import { getLangText } from '../../utils/lang_utils';
 
+
 let EditionDeleteForm = React.createClass({
 
-    mixins: [FormMixin],
+    propTypes: {
+        editions: React.PropTypes.arrayOf(React.PropTypes.object),
 
-    url() {
+        // Propagated by ModalWrapper in most cases
-        return requests.prepareUrl(ApiUrls.edition_delete, {edition_id: this.getBitcoinIds().join()});
+        handleSuccess: React.PropTypes.func
-    },
-    httpVerb(){
-        return 'delete';
     },
 
-    renderForm () {
+    getBitcoinIds() {
+        return this.props.editions.map(function(edition){
+            return edition.bitcoin_id;
+        });
+    },
+
+    // Since this form can be used for either deleting a single edition or multiple
+    // we need to call getBitcoinIds to get the value of edition_id
+    getFormData() {
+        return {
+            edition_id: this.getBitcoinIds().join(',')
+        };
+    },
+
+    render () {
         return (
-            <div className="modal-body">
+            <Form
+                ref='form'
+                url={ApiUrls.edition_delete}
+                getFormData={this.getFormData}
+                method="delete"
+                handleSuccess={this.props.handleSuccess}
+                buttons={
+                    <div className="modal-footer">
+                        <p className="pull-right">
+                            <button
+                                type="submit"
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                                onClick={this.submit}>
+                                {getLangText('YES, DELETE')}
+                            </button>
+                        </p>
+                    </div>
+                }
+                spinner={
+                    <div className="modal-footer">
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    </div>
+                }>
                 <p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p>
                 <p>{getLangText('This is an irrevocable action%s', '.')}</p>
-                <div className="modal-footer">
+            </Form>
-                    <button type="submit" className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.submit}>{getLangText('YES, DELETE')}</button>
-                    <button className="btn btn-default btn-sm ascribe-margin-1px" style={{marginLeft: '0'}}
-                            onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
-                </div>
-            </div>
         );
     }
 });

js/components/ascribe_forms/form_delete_piece.js

@@ -2,37 +2,56 @@
 
 import React from 'react';
 
-import requests from '../../utils/requests';
+import Form from '../ascribe_forms/form';
+
 import ApiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
+import AppConstants from '../../constants/application_constants';
+
 import { getLangText } from '../../utils/lang_utils';
 
+
 let PieceDeleteForm = React.createClass({
     propTypes: {
-        pieceId: React.PropTypes.number
+        pieceId: React.PropTypes.number,
+
+        // Propagated by ModalWrapper in most cases
+        handleSuccess: React.PropTypes.func
     },
 
-    mixins: [FormMixin],
+    getFormData() {
-
+        return {
-    url() {
+            piece_id: this.props.pieceId
-        return requests.prepareUrl(ApiUrls.piece, {piece_id: this.props.pieceId});
+        };
     },
 
-    httpVerb() {
+    render() {
-        return 'delete';
-    },
-
-    renderForm () {
         return (
-            <div className="modal-body">
+            <Form
+                ref='form'
+                url={ApiUrls.piece}
+                getFormData={this.getFormData}
+                method="delete"
+                handleSuccess={this.props.handleSuccess}
+                buttons={
+                    <div className="modal-footer">
+                        <p className="pull-right">
+                            <button
+                                type="submit"
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                                onClick={this.submit}>
+                                {getLangText('YES, DELETE')}
+                            </button>
+                        </p>
+                    </div>
+                }
+                spinner={
+                    <div className="modal-footer">
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    </div>
+                }>
                 <p>{getLangText('Are you sure you would like to permanently delete this piece')}&#63;</p>
                 <p>{getLangText('This is an irrevocable action%s', '.')}</p>
-                <div className="modal-footer">
+            </Form>
-                    <button type="submit" className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.submit}>{getLangText('YES, DELETE')}</button>
-                    <button className="btn btn-default btn-sm ascribe-margin-1px" style={{marginLeft: '0'}}
-                            onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
-                </div>
-            </div>
         );
     }
 });

js/components/ascribe_forms/form_loan.js

@@ -23,7 +23,6 @@ let LoanForm = React.createClass({
         url: React.PropTypes.string,
         id: React.PropTypes.object,
         message: React.PropTypes.string,
-        onRequestHide: React.PropTypes.func,
         handleSuccess: React.PropTypes.func
     },
 
@@ -101,11 +100,9 @@ let LoanForm = React.createClass({
                         <p className="pull-right">
                             <Button
                                 className="btn btn-default btn-sm ascribe-margin-1px"
-                                type="submit">{getLangText('LOAN')}</Button>
+                                type="submit">
-                            <Button
+                                {getLangText('LOAN')}
-                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                            </Button>
-                                style={{marginLeft: '0'}}
-                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
                         </p>
                     </div>}
                 spinner={

js/components/ascribe_forms/form_login.js

@@ -11,16 +11,14 @@ import UserActions from '../../actions/user_actions';
 
 import Form from './form';
 import Property from './property';
-import FormPropertyHeader from './form_property_header';
 
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
 
 import { getLangText } from '../../utils/lang_utils';
 
 
 let LoginForm = React.createClass({
-
     propTypes: {
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
@@ -101,7 +99,7 @@ let LoginForm = React.createClass({
             <Form
                 className="ascribe-form-bordered"
                 ref="loginForm"
-                url={apiUrls.users_login}
+                url={ApiUrls.users_login}
                 handleSuccess={this.handleSuccess}
                 buttons={
                     <button
@@ -114,9 +112,9 @@ let LoginForm = React.createClass({
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </span>
                     }>
-                <FormPropertyHeader>
+                <div className="ascribe-form-header">
                     <h3>{this.props.headerMessage}</h3>
-                </FormPropertyHeader>
+                </div>
                 <Property
                     name='email'
                     label={getLangText('Email')}>

js/components/ascribe_forms/form_piece_extradata.js

@@ -3,9 +3,9 @@
 import React from 'react';
 
 import requests from '../../utils/requests';
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
 
 import Form from './form';
 import Property from './property';
@@ -20,7 +20,8 @@ let PieceExtraDataForm = React.createClass({
         title: React.PropTypes.string,
         editable: React.PropTypes.bool
     },
-    getFormData(){
+
+    getFormData() {
         let extradata = {};
         extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
         return {
@@ -28,12 +29,13 @@ let PieceExtraDataForm = React.createClass({
             piece_id: this.props.pieceId
         };
     },
+    
     render() {
         let defaultValue = this.props.extraData[this.props.name] || '';
         if (defaultValue.length === 0 && !this.props.editable){
             return null;
         }
-        let url = requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.pieceId});
+        let url = requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.pieceId});
         return (
             <Form
                 ref='form'

js/components/ascribe_forms/form_property_header.js

@@ -1,22 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-let FormPropertyHeader = React.createClass({
-    propTypes: {
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
-    },
-
-    render() {
-        return (
-            <div className="ascribe-form-header">
-                {this.props.children}
-            </div>
-        );
-    }
-});
-
-export default FormPropertyHeader;

js/components/ascribe_forms/form_register_piece.js

@@ -7,12 +7,11 @@ import UserActions from '../../actions/user_actions';
 
 import Form from './form';
 import Property from './property';
-import FormPropertyHeader from './form_property_header';
 
 import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
 
 import AppConstants from '../../constants/application_constants';
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
 
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -96,7 +95,7 @@ let RegisterPieceForm = React.createClass({
             <Form
                 className="ascribe-form-bordered"
                 ref='form'
-                url={apiUrls.pieces_list}
+                url={ApiUrls.pieces_list}
                 getFormData={this.getFormData}
                 handleSuccess={this.props.handleSuccess}
                 buttons={<button
@@ -110,9 +109,9 @@ let RegisterPieceForm = React.createClass({
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </span>
                     }>
-                <FormPropertyHeader>
+                <div className="ascribe-form-header">
                     <h3>{this.props.headerMessage}</h3>
-                </FormPropertyHeader>
+                </div>
                 <Property
                     ignoreFocus={true}>
                     <FileUploader
@@ -180,7 +179,7 @@ let FileUploader = React.createClass({
                     fileClass: 'digitalwork'
                 }}
                 createBlobRoutine={{
-                    url: apiUrls.blob_digitalworks
+                    url: ApiUrls.blob_digitalworks
                 }}
                 submitKey={this.props.submitKey}
                 validation={{

js/components/ascribe_forms/form_remove_editions_from_collection.js

@@ -2,34 +2,63 @@
 
 import React from 'react';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import Form from './form';
-import requests from '../../utils/requests';
+
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
+import AppConstants from '../../constants/application_constants';
+
+import { getLangText } from '../../utils/lang_utils';
 
 let EditionRemoveFromCollectionForm = React.createClass({
+    propTypes: {
+        editions: React.PropTypes.arrayOf(React.PropTypes.object),
 
-    mixins: [FormMixin],
+        // Propagated by ModalWrapper in most cases
-
+        handleSuccess: React.PropTypes.func
-    url() {
-        return requests.prepareUrl(apiUrls.edition_remove_from_collection, {edition_id: this.getBitcoinIds().join()});
     },
 
-    httpVerb(){
+    getBitcoinIds() {
-        return 'delete';
+        return this.props.editions.map(function(edition){
+            return edition.bitcoin_id;
+        });
     },
 
-    renderForm () {
+    // Since this form can be used for either removing a single edition or multiple
+    // we need to call getBitcoinIds to get the value of edition_id
+    getFormData() {
+        return {
+            edition_id: this.getBitcoinIds().join(',')
+        };
+    },
+
+    render() {
         return (
-            <div className="modal-body">
+            <Form
+                ref='form'
+                url={ApiUrls.edition_remove_from_collection}
+                getFormData={this.getFormData}
+                method="delete"
+                handleSuccess={this.props.handleSuccess}
+                buttons={
+                    <div className="modal-footer">
+                        <p className="pull-right">
+                            <button
+                                type="submit"
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                                onClick={this.submit}>
+                                {getLangText('YES, REMOVE')}
+                            </button>
+                        </p>
+                    </div>
+                }
+                spinner={
+                    <div className="modal-footer">
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    </div>
+                }>
                 <p>{getLangText('Are you sure you would like to remove these editions from your collection')}&#63;</p>
                 <p>{getLangText('This is an irrevocable action%s', '.')}</p>
-                <div className="modal-footer">
+            </Form>
-                    <button type="submit" className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.submit}>{getLangText('YES, REMOVE')}</button>
-                    <button className="btn btn-default btn-sm ascribe-margin-1px" style={{marginLeft: '0'}}
-                            onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
-                </div>
-            </div>
         );
     }
 });

js/components/ascribe_forms/form_remove_piece_from_collection.js

@@ -2,38 +2,56 @@
 
 import React from 'react';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import Form from './form';
-import requests from '../../utils/requests';
+
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
+import AppConstants from '../../constants/application_constants';
+
+import { getLangText } from '../../utils/lang_utils';
+
 
 let PieceRemoveFromCollectionForm = React.createClass({
-
     propTypes: {
-        pieceId: React.PropTypes.number
+        pieceId: React.PropTypes.number,
+
+        // Propagated by ModalWrapper in most cases
+        handleSuccess: React.PropTypes.func
     },
 
-    mixins: [FormMixin],
+    getFormData() {
-
+        return {
-    url() {
+            piece_id: this.props.pieceId
-        return requests.prepareUrl(apiUrls.piece_remove_from_collection, {piece_id: this.props.pieceId});
+        };
     },
 
-    httpVerb(){
+    render () {
-        return 'delete';
-    },
-
-    renderForm () {
         return (
-            <div className="modal-body">
+            <Form
+                ref='form'
+                url={ApiUrls.piece_remove_from_collection}
+                getFormData={this.getFormData}
+                method="delete"
+                handleSuccess={this.props.handleSuccess}
+                buttons={
+                    <div className="modal-footer">
+                        <p className="pull-right">
+                            <button
+                                type="submit"
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                                onClick={this.submit}>
+                                {getLangText('YES, REMOVE')}
+                            </button>
+                        </p>
+                    </div>
+                }
+                spinner={
+                    <div className="modal-footer">
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    </div>
+                }>
                 <p>{getLangText('Are you sure you would like to remove this piece from your collection')}&#63;</p>
                 <p>{getLangText('This is an irrevocable action%s', '.')}</p>
-                <div className="modal-footer">
+            </Form>
-                    <button type="submit" className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.submit}>{getLangText('YES, REMOVE')}</button>
-                    <button className="btn btn-default btn-sm ascribe-margin-1px" style={{marginLeft: '0'}}
-                            onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</button>
-                </div>
-            </div>
         );
     }
 });

js/components/ascribe_forms/form_request_action.js

@@ -2,48 +2,48 @@
 
 import React from 'react';
 
-import Alert from 'react-bootstrap/lib/Alert';
-
-import apiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
-
 import AclButton from './../ascribe_buttons/acl_button';
+import ActionPanel from '../ascribe_panel/action_panel';
+import Form from './form';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import ApiUrls from '../../constants/api_urls';
 
-import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
 
-let RequestActionForm = React.createClass({
-    mixins: [FormMixin],
 
-    url(e){
+let RequestActionForm = React.createClass({
-        let edition = this.props.editions[0];
+    propTypes: {
-        if (e.target.id === 'request_accept'){
+        editions: React.PropTypes.arrayOf(React.PropTypes.object),
-            if (edition.request_action === 'consign'){
+        currentUser: React.PropTypes.object,
-                return apiUrls.ownership_consigns_confirm;
+        handleSuccess: React.PropTypes.func
-            }
-            else if (edition.request_action === 'unconsign'){
-                return apiUrls.ownership_unconsigns;
-            }
-            else if (edition.request_action === 'loan'){
-                return apiUrls.ownership_loans_confirm;
-            }
-        }
-        else if(e.target.id === 'request_deny'){
-            if (edition.request_action === 'consign') {
-                return apiUrls.ownership_consigns_deny;
-            }
-            else if (edition.request_action === 'unconsign') {
-                return apiUrls.ownership_unconsigns_deny;
-            }
-            else if (edition.request_action === 'loan') {
-                return apiUrls.ownership_loans_deny;
-            }
-        }
     },
 
-    handleRequest: function(e){
+    getUrls() {
-        e.preventDefault();
+        let edition = this.props.editions[0];
-        this.submit(e);
+        let urls = {};
+
+
+        if (edition.request_action === 'consign'){
+            urls.accept = ApiUrls.ownership_consigns_confirm;
+            urls.deny = ApiUrls.ownership_consigns_deny;
+        } else if (edition.request_action === 'unconsign'){
+            urls.accept = ApiUrls.ownership_unconsigns;
+            urls.deny = ApiUrls.ownership_unconsigns_deny;
+        } else if (edition.request_action === 'loan'){
+            urls.accept = ApiUrls.ownership_loans_confirm;
+            urls.deny = ApiUrls.ownership_loans_deny;
+        }
+
+        return urls;
+    },
+
+    getBitcoinIds(){
+        return this.props.editions.map(function(edition){
+            return edition.bitcoin_id;
+        });
     },
 
     getFormData() {
@@ -52,16 +52,35 @@ let RequestActionForm = React.createClass({
         };
     },
 
-    renderForm() {
+    showNotification(option, action, owner) {
+        return () => {
+            let message = getLangText('You have successfully') + ' ' + option + ' the ' + action + ' request ' + getLangText('from') + ' ' + owner;
+
+            let notification = new GlobalNotificationModel(message, 'success');
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            if(this.props.handleSuccess) {
+                this.props.handleSuccess();
+            }
+        };
+    },
+
+    getContent() {
         let edition = this.props.editions[0];
-        let buttonAccept = (
+        let message = edition.owner + ' ' + getLangText('requests you') + ' ' + edition.request_action + ' ' + getLangText('this edition%s', '.');
-            <div id="request_accept"
+
-                onClick={this.handleRequest}
+        return (
-                className='btn btn-default btn-sm ascribe-margin-1px'>{getLangText('ACCEPT')}
+            <span>
-            </div>);
+                {message}
-        if (edition.request_action === 'unconsign'){
+            </span>
-            console.log(this.props)
+        );
-            buttonAccept = (
+    },
+
+    getAcceptButtonForm(urls) {
+        let edition = this.props.editions[0];
+
+        if(edition.request_action === 'unconsign') {
+            return (
                 <AclButton
                     availableAcls={{'acl_unconsign': true}}
                     action="acl_unconsign"
@@ -69,31 +88,54 @@ let RequestActionForm = React.createClass({
                     currentUser={this.props.currentUser}
                     handleSuccess={this.props.handleSuccess} />
                 );
-        }
+        } else {
-        let buttons = (
+            return (
-            <span>
+                <Form
-                <span>
+                    url={urls.accept}
-                    {buttonAccept}
+                    getFormData={this.getFormData}
-                </span>
+                    handleSuccess={this.showNotification(getLangText('accepted'), edition.request_action, edition.owner)}
-                <span>
+                    isInline={true}
-                    <div id="request_deny" onClick={this.handleRequest} className='btn btn-danger btn-delete btn-sm ascribe-margin-1px'>{getLangText('REJECT')}</div>
+                    className='inline pull-right'>
-                </span>
+                    <button
-            </span>
+                        type="submit"
-        );
+                        className='btn btn-default btn-sm ascribe-margin-1px'>
-        if (this.state.submitted){
+                        {getLangText('ACCEPT')}
-            buttons = (
+                    </button>
-                <span>
+                </Form>
-                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
-                </span>
             );
         }
+    },
+
+    getButtonForm() {
+        let edition = this.props.editions[0];
+
+        let urls = this.getUrls();
+        let acceptButtonForm = this.getAcceptButtonForm(urls);
+
         return (
-            <Alert bsStyle='warning'>
+            <div>
-                <div style={{textAlign: 'center'}}>
+                <Form
-                <div>{ edition.owner } {getLangText('requests you')} { edition.request_action } {getLangText('this edition%s', '.')}&nbsp;&nbsp;</div>
+                    url={urls.deny}
-                {buttons}
+                    isInline={true}
-                </div>
+                    getFormData={this.getFormData}
-            </Alert>
+                    handleSuccess={this.showNotification(getLangText('denied'), edition.request_action, edition.owner)}
+                    className='inline pull-right'>
+                    <button
+                        type="submit"
+                        className='btn btn-danger btn-delete btn-sm ascribe-margin-1px'>
+                            {getLangText('REJECT')}
+                    </button>
+                </Form>
+                {acceptButtonForm}
+            </div>
+        );
+    },
+
+    render() {
+        return (
+            <ActionPanel
+                content={this.getContent()}
+                buttons={this.getButtonForm()}/>
         );
     }
 });

js/components/ascribe_forms/form_share_email.js

@@ -2,14 +2,14 @@
 
 import React from 'react';
 
-
-
 import Form from './form';
 import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
+
 import Button from 'react-bootstrap/lib/Button';
 
 import AppConstants from '../../constants/application_constants';
+
 import { getLangText } from '../../utils/lang_utils.js';
 
 
@@ -20,7 +20,6 @@ let ShareForm = React.createClass({
         message: React.PropTypes.string,
         editions: React.PropTypes.array,
         currentUser: React.PropTypes.object,
-        onRequestHide: React.PropTypes.func,
         handleSuccess: React.PropTypes.func
     },
 
@@ -41,11 +40,9 @@ let ShareForm = React.createClass({
                         <p className="pull-right">
                             <Button
                                 className="btn btn-default btn-sm ascribe-margin-1px"
-                                type="submit">SHARE</Button>
+                                type="submit">
-                            <Button
+                                SHARE
-                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                            </Button>
-                                style={{marginLeft: '0'}}
-                                onClick={this.props.onRequestHide}>CLOSE</Button>
                         </p>
                     </div>}
                 spinner={

js/components/ascribe_forms/form_signup.js

@@ -12,10 +12,9 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 
 import Form from './form';
 import Property from './property';
-import FormPropertyHeader from './form_property_header';
 import InputCheckbox from './input_checkbox';
 
-import apiUrls from '../../constants/api_urls';
+import ApiUrls from '../../constants/api_urls';
 
 
 let SignupForm = React.createClass({
@@ -56,10 +55,6 @@ let SignupForm = React.createClass({
         }
     },
 
-    getFormData() {
-        return this.getQuery();
-    },
-
     handleSuccess(response){
         if (response.user) {
             let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
@@ -80,8 +75,8 @@ let SignupForm = React.createClass({
             <Form
                 className="ascribe-form-bordered"
                 ref='form'
-                url={apiUrls.users_signup}
+                url={ApiUrls.users_signup}
-                getFormData={this.getFormData}
+                getFormData={this.getQuery}
                 handleSuccess={this.handleSuccess}
                 buttons={
                     <button type="submit" className="btn ascribe-btn ascribe-btn-login">
@@ -92,9 +87,9 @@ let SignupForm = React.createClass({
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </span>
                     }>
-                <FormPropertyHeader>
+                <div className="ascribe-form-header">
                     <h3>{this.props.headerMessage}</h3>
-                </FormPropertyHeader>
+                </div>
                 <Property
                     name='email'
                     label={getLangText('Email')}>

js/components/ascribe_forms/form_submit_to_prize.js

@@ -19,10 +19,7 @@ import requests from '../../utils/requests';
 let PieceSubmitToPrizeForm = React.createClass({
     propTypes: {
         piece: React.PropTypes.object,
-        handleSuccess: React.PropTypes.func,
+        handleSuccess: React.PropTypes.func
-
-        // this is set by ModalWrapper automatically
-        onRequestHide: React.PropTypes.func
     },
 
     render() {
@@ -36,7 +33,9 @@ let PieceSubmitToPrizeForm = React.createClass({
                         <p className="pull-right">
                             <button
                                 className="btn btn-default btn-sm ascribe-margin-1px"
-                                type="submit">{getLangText('SUBMIT TO PRIZE')}</button>
+                                type="submit">
+                                {getLangText('SUBMIT TO PRIZE')}
+                            </button>
                         </p>
                     </div>}
                 spinner={
@@ -80,7 +79,6 @@ let PieceSubmitToPrizeForm = React.createClass({
                     <p>{getLangText('Are you sure you want to submit to the prize?')}</p>
                     <p>{getLangText('This is an irrevocable action%s', '.')}</p>
                 </Alert>
-                
             </Form>
         );
     }

js/components/ascribe_forms/form_transfer.js

@@ -21,7 +21,6 @@ let TransferForm = React.createClass({
         message: React.PropTypes.string,
         editions: React.PropTypes.array,
         currentUser: React.PropTypes.object,
-        onRequestHide: React.PropTypes.func,
         handleSuccess: React.PropTypes.func
     },
 
@@ -42,11 +41,9 @@ let TransferForm = React.createClass({
                         <p className="pull-right">
                             <Button
                                 className="btn btn-default btn-sm ascribe-margin-1px"
-                                type="submit">{getLangText('TRANSFER')}</Button>
+                                type="submit">
-                            <Button
+                                {getLangText('TRANSFER')}
-                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                            </Button>
-                                style={{marginLeft: '0'}}
-                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
                         </p>
                     </div>}
                 spinner={

js/components/ascribe_forms/form_unconsign.js

@@ -18,7 +18,6 @@ let UnConsignForm = React.createClass({
         id: React.PropTypes.object,
         message: React.PropTypes.string,
         editions: React.PropTypes.array,
-        onRequestHide: React.PropTypes.func,
         handleSuccess: React.PropTypes.func
     },
 
@@ -39,11 +38,9 @@ let UnConsignForm = React.createClass({
                         <p className="pull-right">
                             <Button
                                 className="btn btn-default btn-sm ascribe-margin-1px"
-                                type="submit">{getLangText('UNCONSIGN')}</Button>
+                                type="submit">
-                            <Button
+                                {getLangText('UNCONSIGN')}
-                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                            </Button>
-                                style={{marginLeft: '0'}}
-                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
                         </p>
                     </div>}
                 spinner={

js/components/ascribe_forms/form_unconsign_request.js

@@ -3,7 +3,6 @@
 import React from 'react';
 
 import Button from 'react-bootstrap/lib/Button';
-import Alert from 'react-bootstrap/lib/Alert';
 
 import Form from './form';
 import Property from './property';
@@ -19,7 +18,6 @@ let UnConsignRequestForm = React.createClass({
         url: React.PropTypes.string,
         id: React.PropTypes.object,
         message: React.PropTypes.string,
-        onRequestHide: React.PropTypes.func,
         handleSuccess: React.PropTypes.func
     },
 
@@ -40,11 +38,9 @@ let UnConsignRequestForm = React.createClass({
                         <p className="pull-right">
                             <Button
                                 className="btn btn-default btn-sm ascribe-margin-1px"
-                                type="submit">{getLangText('REQUEST UNCONSIGN')}</Button>
+                                type="submit">
-                            <Button
+                                {getLangText('REQUEST UNCONSIGN')}
-                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                            </Button>
-                                style={{marginLeft: '0'}}
-                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
                         </p>
                     </div>}
                 spinner={

js/components/ascribe_forms/input_date.js

@@ -7,7 +7,8 @@ import DatePicker from 'react-datepicker/dist/react-datepicker';
 let InputDate = React.createClass({
     propTypes: {
         submitted: React.PropTypes.bool,
-        placeholderText: React.PropTypes.string
+        placeholderText: React.PropTypes.string,
+        onChange: React.PropTypes.func
     },
 
     getInitialState() {

js/components/ascribe_forms/input_textarea_toggable.js

@@ -5,7 +5,6 @@ import React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 
 let InputTextAreaToggable = React.createClass({
-
     propTypes: {
         editable: React.PropTypes.bool.isRequired,
         rows: React.PropTypes.number.isRequired,

js/components/ascribe_forms/property_collapsible.js

@@ -3,11 +3,9 @@
 import React from 'react';
 import ReactAddons from 'react/addons';
 
-import CollapsibleMixin from 'react-bootstrap/lib/CollapsibleMixin';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
-
+import Panel from 'react-bootstrap/lib/Panel';
-import classNames from 'classnames';
 
 
 let PropertyCollapsile = React.createClass({
@@ -17,22 +15,12 @@ let PropertyCollapsile = React.createClass({
         tooltip: React.PropTypes.string
     },
 
-    mixins: [CollapsibleMixin],
-
     getInitialState() {
         return {
             show: false
         };
     },
 
-    getCollapsibleDOMNode(){
-        return React.findDOMNode(this.refs.panel);
-    },
-
-    getCollapsibleDimensionValue(){
-        return React.findDOMNode(this.refs.panel).scrollHeight;
-    },
-
     handleFocus() {
         this.refs.checkboxCollapsible.getDOMNode().checked = !this.refs.checkboxCollapsible.getDOMNode().checked;
         this.setState({
@@ -85,11 +73,14 @@ let PropertyCollapsile = React.createClass({
                         <span className="checkbox"> {this.props.checkboxLabel}</span>
                     </div>
                 </OverlayTrigger>
-                <div
+                <Panel
-                    className={classNames(this.getCollapsibleClassSet()) + ' ascribe-settings-property'}
+                    collapsible
-                    ref="panel">
+                    expanded={this.state.show}
+                    className="bs-custom-panel">
+                    <div className="ascribe-settings-property">
                         {this.renderChildren()}
-                </div>
+                    </div>
+                </Panel>
             </div>
         );
     }

js/components/ascribe_modal/modal_password_request_reset.js

@@ -7,9 +7,13 @@ import PasswordResetRequestForm from '../ascribe_forms/form_password_reset_reque
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
 let PasswordResetRequestModal = React.createClass({
+    propTypes: {
+        button: React.PropTypes.element
+    },
+
     handleResetSuccess(){
         let notificationText = getLangText('Request successfully sent, check your email');
         let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
@@ -18,10 +22,9 @@ let PasswordResetRequestModal = React.createClass({
     render() {
         return (
             <ModalWrapper
-                button={this.props.button}
+                trigger={this.props.button}
                 title={getLangText('Reset your password')}
-                handleSuccess={this.handleResetSuccess}
+                handleSuccess={this.handleResetSuccess}>
-                tooltip={getLangText('Reset your password')}>
                 <PasswordResetRequestForm />
             </ModalWrapper>
         );

js/components/ascribe_modal/modal_wrapper.js

@@ -4,92 +4,74 @@ 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({
     propTypes: {
-        title: React.PropTypes.string.isRequired,
+        trigger: React.PropTypes.element.isRequired,
-        onRequestHide: React.PropTypes.func,
+        title: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element,
+            React.PropTypes.string
+        ]).isRequired,
         handleSuccess: React.PropTypes.func.isRequired,
-        button: React.PropTypes.object.isRequired,
+        children: React.PropTypes.oneOfType([
-        children: React.PropTypes.object,
+            React.PropTypes.arrayOf(React.PropTypes.element),
-        tooltip: React.PropTypes.string
+            React.PropTypes.element
+        ])
     },
 
-    getModalTrigger() {
+    getInitialState() {
-        return (
+        return {
-            <ModalTrigger modal={
+            showModal: false
-                <ModalBody
+        };
-                    title={this.props.title}
-                    handleSuccess={this.props.handleSuccess}>
-                    {this.props.children}
-                </ModalBody>
-            }>
-            {this.props.button}
-            </ModalTrigger>
-        );
     },
 
-    render() {
+    show() {
-        if(this.props.tooltip) {
+        this.setState({
-            return (
+            showModal: true
-                <OverlayTrigger
+        });
-                    delay={500}
-                    placement="left"
-                    overlay={<Tooltip>{this.props.tooltip}</Tooltip>}>
-                    {this.getModalTrigger()}
-                </OverlayTrigger>
-            );
-        } else {
-             return (
-                <span>
-                    {/* This needs to be some kind of inline-block */}
-                    {this.getModalTrigger()}
-                </span>
-            );
-        }
-    }
-});
-
-
-let ModalBody = React.createClass({
-    propTypes: {
-        onRequestHide: React.PropTypes.func,
-        handleSuccess: React.PropTypes.func,
-        children: React.PropTypes.object,
-        title: React.PropTypes.string.isRequired
     },
 
-    mixins: [ModalMixin],
+    hide() {
+        this.setState({
+            showModal: false
+        });
+    },
 
     handleSuccess(response){
         this.props.handleSuccess(response);
-        this.props.onRequestHide();
+        this.hide();
     },
 
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
             return ReactAddons.addons.cloneWithProps(child, {
-                onRequestHide: this.props.onRequestHide,
                 handleSuccess: this.handleSuccess
             });
         });
     },
 
     render() {
+        // this adds the onClick method show of modal_wrapper to the trigger component
+        // which is in most cases a button.
+        let trigger = React.cloneElement(this.props.trigger, {onClick: this.show});
+
         return (
-            <Modal {...this.props} title={this.props.title}>
+            <span>
-                <div className="modal-body">
+                {trigger}
-                {this.renderChildren()}
+                <Modal show={this.state.showModal} onHide={this.hide}>
-                </div>
+                    <Modal.Header closeButton>
-            </Modal>
+                        <Modal.Title>
+                            {this.props.title}
+                        </Modal.Title>
+                    </Modal.Header>
+                    <div className="modal-body">
+                        {this.renderChildren()}
+                    </div>
+                </Modal>
+            </span>
         );
     }
 });
 
-
 export default ModalWrapper;

js/components/ascribe_panel/action_panel.js

@@ -1,12 +1,15 @@
 'use strict';
 
 import React from 'react';
-
+import classnames from 'classnames';
 
 let ActionPanel = React.createClass({
     propTypes: {
         title: React.PropTypes.string,
-        content: React.PropTypes.string,
+        content: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.element
+        ]),
         buttons: React.PropTypes.element,
         onClick: React.PropTypes.func,
         ignoreFocus: React.PropTypes.bool
@@ -37,33 +40,17 @@ let ActionPanel = React.createClass({
         });
     },
 
-    getClassName() {
-        if(this.state.isFocused) {
-            return 'is-focused';
-        } else {
-            return '';
-        }
-    },
-
     render() {
-
         return (
-            <div className={'ascribe-panel-wrapper ' + this.getClassName()}>
+            <div className={classnames('ascribe-panel-wrapper', {'is-focused': this.state.isFocused})}>
-                <div className='row'>
+                <div className="ascribe-panel-table">
-                    <div className='col-xs-7 col-md-8'>
+                    <div className="ascribe-panel-content">
-                        <div className='ascribe-panel-content-wrapper'>
+                        {this.props.content}
-                            <div className='ascribe-panel-title'>
-                                {this.props.title}
-                            </div>
-                            <div className="ascribe-panel-content">
-                                {this.props.content}
-                            </div>
-                        </div>
                     </div>
-                    <div className='col-xs-5 col-md-4'>
+                </div>
-                        <div className='ascribe-panel-buttons'>
+                <div className="ascribe-panel-table">
-                            {this.props.buttons}
+                    <div className="ascribe-panel-content">
-                        </div>
+                        {this.props.buttons}
                     </div>
                 </div>
             </div>

js/components/coa_verify_container.js

@@ -10,7 +10,7 @@ import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
 import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable';
 
-import apiUrls from '../constants/api_urls';
+import ApiUrls from '../constants/api_urls';
 import { getLangText } from '../utils/lang_utils';
 
 
@@ -59,7 +59,7 @@ let CoaVerifyForm = React.createClass({
         return (
             <div>
                 <Form
-                    url={apiUrls.coa_verify}
+                    url={ApiUrls.coa_verify}
                     handleSuccess={this.handleSuccess}
                     buttons={
                         <button

js/components/login_modal_handler.js

@@ -1,43 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-import Button from 'react-bootstrap/lib/Button';
-import Modal from 'react-bootstrap/lib/Modal';
-import OverlayMixin from 'react-bootstrap/lib/OverlayMixin';
-import { getLangText } from '../utils/lang_utils.js';
-
-let LoginModalHandler = React.createClass({
-    mixins: [OverlayMixin],
-
-    getInitialState() {
-        return {
-            isModalOpen: true
-        };
-    },
-
-    handleToggle() {
-        this.setState({
-            isModalOpen: !this.state.isModalOpen
-        });
-    },
-
-    render() {
-        if(!this.state.isModalOpen || !(this.props.query.login === '')) {
-            return <span/>;
-        }
-
-        return (
-            <Modal title='Modal heading' onRequestHide={this.handleToggle}>
-                <div className='modal-body'>
-                    This modal is controlled by our custom trigger component.
-                </div>
-                <div className='modal-footer'>
-                    <Button onClick={this.handleToggle}>{getLangText('Close')}</Button>
-                </div>
-            </Modal>
-        );
-    }
-});
-
-export default LoginModalHandler;

js/components/password_reset_container.js

@@ -5,8 +5,7 @@ import Router from 'react-router';
 
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
-import FormPropertyHeader from './ascribe_forms/form_property_header';
+import ApiUrls from '../constants/api_urls';
-import apiUrls from '../constants/api_urls';
 
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
@@ -15,12 +14,15 @@ import { getLangText } from '../utils/lang_utils';
 
 let PasswordResetContainer = React.createClass({
     mixins: [Router.Navigation],
+
     getInitialState() {
         return {isRequested: false};
     },
-    handleRequestSuccess(email){
+
+    handleRequestSuccess(email) {
         this.setState({isRequested: email});
     },
+
     render() {
         if (this.props.query.email && this.props.query.token) {
             return (
@@ -57,17 +59,22 @@ let PasswordResetContainer = React.createClass({
 });
 
 let PasswordRequestResetForm = React.createClass({
+    propTypes: {
+        handleRequestSuccess: React.PropTypes.func
+    },
+
     handleSuccess() {
         let notificationText = getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.');
         let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
         GlobalNotificationActions.appendGlobalNotification(notification);
         this.props.handleRequestSuccess(this.refs.form.refs.email.state.value);
     },
+
     render() {
         return (
             <Form
                 ref="form"
-                url={apiUrls.users_password_reset_request}
+                url={ApiUrls.users_password_reset_request}
                 handleSuccess={this.handleSuccess}
                 buttons={
                     <button
@@ -80,15 +87,15 @@ let PasswordRequestResetForm = React.createClass({
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </span>
                     }>
-                <FormPropertyHeader>
+                <div className="ascribe-form-header">
                     <h3>{getLangText('Reset your password')}</h3>
-                </FormPropertyHeader>
+                </div>
                 <Property
                     name='email'
                     label={getLangText('Email')}>
                     <input
                         type="email"
-                        placeholder={getLangText("Enter your email and we'll send a link")}
+                        placeholder={getLangText('Enter your email and we\'ll send a link')}
                         name="email"
                         required/>
                 </Property>
@@ -99,24 +106,31 @@ let PasswordRequestResetForm = React.createClass({
 });
 
 let PasswordResetForm = React.createClass({
+    propTypes: {
+        email: React.PropTypes.string,
+        token: React.PropTypes.string
+    },
+
     mixins: [Router.Navigation],
 
-    getFormData(){
+    getFormData() {
         return {
             email: this.props.email,
             token: this.props.token
         };
     },
+
     handleSuccess() {
         this.transitionTo('pieces');
         let notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
+
     render() {
         return (
             <Form
                 ref="form"
-                url={apiUrls.users_password_reset}
+                url={ApiUrls.users_password_reset}
                 handleSuccess={this.handleSuccess}
                 getFormData={this.getFormData}
                 buttons={
@@ -130,9 +144,9 @@ let PasswordResetForm = React.createClass({
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </span>
                     }>
-                <FormPropertyHeader>
+                <div className="ascribe-form-header">
                     <h3>{getLangText('Reset the password for')} {this.props.email}</h3>
-                </FormPropertyHeader>
+                </div>
                 <Property
                     name='password'
                     label={getLangText('Password')}>

js/components/react_flow_type/react_flow_type.js

@@ -1,92 +0,0 @@
-'use strict';
-/**
- * This component is essentially a port of https://github.com/simplefocus/FlowType.JS
- * to Reactjs in order to not being forced to use jQuery
- *
- * Author: Tim Daubenschütz
- *
- * Thanks to the guys at Simple Focus http://simplefocus.com/
- */
-
-import React from 'react';
-import ReactAddons from 'react/addons';
-
-let FlowType = React.createClass({
-    propTypes: {
-
-        // standard FlowTypes.JS options
-        maximum: React.PropTypes.number,
-        minimum: React.PropTypes.number,
-        maxFont: React.PropTypes.number,
-        minFont: React.PropTypes.number,
-        fontRatio: React.PropTypes.number,
-
-        // react specific options
-        children: React.PropTypes.element.isRequired // only supporting one child element at once right now
-    },
-
-    getDefaultProps() {
-        return {
-            maximum: 9999,
-            minimum: 1,
-            maxFont: 9999,
-            minFont: 1,
-            fontRatio: 35
-        };
-    },
-
-    getInitialState() {
-        return {
-            // 32 because that's the default font display size
-            // doesn't really matter though
-            fontSize: 0
-        };
-    },
-
-    componentDidMount() {
-        // Make changes upon resize, calculate changes and rerender
-        this.handleResize();
-        window.addEventListener('resize', this.handleResize);
-    },
-
-    componentWillUnmount() {
-        // stop listening to window once the component was unmounted
-        window.removeEventListener('resize', this.handleResize);
-    },
-
-    handleResize() {
-        let elemWidth = this.refs.flowTypeElement.getDOMNode().offsetWidth;
-        let width = elemWidth > this.props.maximum ? this.props.maximum : elemWidth < this.props.minimum ? this.props.minimum : elemWidth;
-        let fontBase = width / this.props.fontRatio;
-        let fontSize = fontBase > this.props.maxFont ? this.props.maxFont : fontBase < this.props.minFont ? this.props.minFont : fontBase;
-
-        this.setState({ fontSize });
-    },
-
-    // The child the user passes to this component needs to have it's
-    // style.fontSize property to be updated
-    renderChildren() {
-        return ReactAddons.Children.map(this.props.children, (child) => {
-            return ReactAddons.addons.cloneWithProps(child, {
-                ref: 'flowTypeFontElement',
-                
-            });
-        });
-    },
-
-    render() {
-        return (
-            <div
-                ref="flowTypeElement"
-                style={{
-                    width: '100%',
-                    height: '100%',
-                    fontSize: this.state.fontSize
-                }}>
-                {this.props.children}
-            </div>
-        );
-    }
-});
-
-export default FlowType;

js/components/register_piece.js

@@ -23,7 +23,6 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
 import Property from './ascribe_forms/property';
 import PropertyCollapsible from './ascribe_forms/property_collapsible';
 import RegisterPieceForm from './ascribe_forms/form_register_piece';
-//import FormPropertyHeader from './ascribe_forms/form_property_header';
 
 import LoginContainer from './login_container';
 import SlidesContainer from './ascribe_slides_container/slides_container';
@@ -40,7 +39,9 @@ let RegisterPiece = React.createClass( {
         submitMessage: React.PropTypes.string,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element])
+            React.PropTypes.element,
+            React.PropTypes.string
+        ])
     },
 
     mixins: [Router.Navigation],

js/components/settings_container.js

@@ -24,10 +24,10 @@ import InputCheckbox from './ascribe_forms/input_checkbox';
 
 import ActionPanel from './ascribe_panel/action_panel';
 
-import apiUrls from '../constants/api_urls';
+import ApiUrls from '../constants/api_urls';
 import AppConstants from '../constants/application_constants';
-import { getLangText } from '../utils/lang_utils';
 
+import { getLangText } from '../utils/lang_utils';
 import { getCookie } from '../utils/fetch_api_utils';
 
 let SettingsContainer = React.createClass({
@@ -90,7 +90,7 @@ let AccountSettings = React.createClass({
         if (this.state.currentUser.username) {
             content = (
                 <Form
-                    url={apiUrls.users_username}
+                    url={ApiUrls.users_username}
                     handleSuccess={this.handleSuccess}>
                     <Property
                         name='username'
@@ -116,7 +116,7 @@ let AccountSettings = React.createClass({
             );
             profile = (
                 <Form
-                    url={apiUrls.users_profile}
+                    url={ApiUrls.users_profile}
                     handleSuccess={this.handleSuccess}
                     getFormData={this.getFormDataProfile}>
                     <Property
@@ -266,14 +266,14 @@ let FileUploader = React.createClass({
                             fileClass: 'contract'
                         }}
                         createBlobRoutine={{
-                            url: apiUrls.ownership_loans_contract
+                            url: ApiUrls.ownership_loans_contract
                         }}
                         validation={{
                             itemLimit: 100000,
                             sizeLimit: '10000000'
                         }}
                         session={{
-                            endpoint: apiUrls.ownership_loans_contract,
+                            endpoint: ApiUrls.ownership_loans_contract,
                             customHeaders: {
                                 'X-CSRFToken': getCookie(AppConstants.csrftoken)
                             },
@@ -349,16 +349,26 @@ let APISettings = React.createClass({
                     <ActionPanel
                         name={app.name}
                         key={i}
-                        title={app.name}
+                        content={
-                        content={'Bearer ' + app.bearer_token.token}
+                            <div>
+                                <div className='ascribe-panel-title'>
+                                    {app.name}
+                                </div>
+                                <div className="ascribe-panel-subtitle">
+                                    {'Bearer ' + app.bearer_token.token}
+                                </div>
+                            </div>
+                        }
                         buttons={
                             <div className="pull-right">
-                                <button
+                                <div className="pull-right">
-                                    className="pull-right btn btn-default btn-sm"
+                                    <button
-                                    onClick={this.handleTokenRefresh}
+                                        className="pull-right btn btn-default btn-sm"
-                                    data-id={app.name}>
+                                        onClick={this.handleTokenRefresh}
-                                    {getLangText('REFRESH')}
+                                        data-id={app.name}>
-                                </button>
+                                        {getLangText('REFRESH')}
+                                    </button>
+                                </div>
                             </div>
                         }/>
                     );
@@ -366,15 +376,15 @@ let APISettings = React.createClass({
         }
         return content;
     },
-    render() {
     
+    render() {
         return (
             <CollapsibleParagraph
                 title={getLangText('API Integration')}
                 show={true}
                 defaultExpanded={this.props.defaultExpanded}>
                 <Form
-                    url={apiUrls.applications}
+                    url={ApiUrls.applications}
                     handleSuccess={this.handleCreateSuccess}>
                     <Property
                         name='name'

js/components/whitelabel/prize/components/ascribe_buttons/submit_to_prize_button.js

@@ -39,7 +39,7 @@ let SubmitToPrizeButton = React.createClass({
     render() {
         return (
             <ModalWrapper
-                button={this.getSubmitButton()}
+                trigger={this.getSubmitButton()}
                 handleSuccess={this.props.handleSuccess}
                 title={getLangText('Submit to prize')}>
                 <PieceSubmitToPrizeForm

js/components/whitelabel/prize/components/landing.js

@@ -46,7 +46,7 @@ let Landing = React.createClass({
                         <p>
                             This is the submission page for Sluice_screens ↄc Prize 2015.
                         </p>
-                        <ButtonGroup className="enter" bsSize="large" vertical block>
+                        <ButtonGroup className="enter" bsSize="large" vertical>
                             <ButtonLink to="signup">
                                 Sign up to submit
                             </ButtonLink>

js/components/whitelabel/prize/components/settings_container.js

@@ -14,7 +14,6 @@ import CollapsibleParagraph from '../../../ascribe_collapsible/collapsible_parag
 
 import Form from '../../../ascribe_forms/form';
 import Property from '../../../ascribe_forms/property';
-import FormPropertyHeader from '../../../ascribe_forms/form_property_header';
 
 import ActionPanel from '../../../ascribe_panel/action_panel';
 
@@ -22,7 +21,7 @@ import GlobalNotificationModel from '../../../../models/global_notification_mode
 import GlobalNotificationActions from '../../../../actions/global_notification_actions';
 
 import AppConstants from '../../../../constants/application_constants';
-import apiUrls from '../../../../constants/api_urls';
+import ApiUrls from '../../../../constants/api_urls';
 
 import { getLangText } from '../../../../utils/lang_utils';
 
@@ -170,8 +169,16 @@ let PrizeJurySettings = React.createClass({
                 <ActionPanel
                     name={member.email}
                     key={i}
-                    title={member.email}
+                    content={
-                    content={member.status}
+                        <div>
+                            <div className='ascribe-panel-title'>
+                                {member.email}
+                            </div>
+                            <div className="ascribe-panel-subtitle">
+                                {member.status}
+                            </div>
+                        </div>
+                    }
                     buttons={
                         <div className="pull-right">
                             <button
@@ -197,17 +204,23 @@ let PrizeJurySettings = React.createClass({
                 <ActionPanel
                     name={member.email}
                     key={i}
-                    title={member.email}
+                    content={
-                    content={member.status}
+                        <div>
-                    buttons={
+                            <div className='ascribe-panel-title'>
-                        <div className="pull-right">
+                                {member.email}
-                            <button
+                            </div>
-                                className="btn btn-default btn-sm ascribe-btn-gray"
+                            <div className="ascribe-panel-subtitle">
-                                onClick={this.handleRevoke}
+                                {member.status}
-                                data-id={member.email}>
+                            </div>
-                                {getLangText('REVOKE')}
-                            </button>
                         </div>
+                    }
+                    buttons={
+                        <button
+                            className="btn btn-default btn-sm ascribe-btn-gray"
+                            onClick={this.handleRevoke}
+                            data-id={member.email}>
+                            {getLangText('REVOKE')}
+                        </button>
                     }/>
                 );
 
@@ -219,17 +232,23 @@ let PrizeJurySettings = React.createClass({
                 <ActionPanel
                     name={member.email}
                     key={i}
-                    title={member.email}
+                    content={
-                    content={member.status}
+                        <div>
-                    buttons={
+                            <div className='ascribe-panel-title'>
-                        <div className="pull-right">
+                                {member.email}
-                            <button
+                            </div>
-                                className="btn btn-default btn-sm"
+                            <div className="ascribe-panel-subtitle">
-                                onClick={this.handleActivate}
+                                {member.status}
-                                data-id={member.email}>
+                            </div>
-                                {getLangText('ACTIVATE')}
-                            </button>
                         </div>
+                    }
+                    buttons={
+                        <button
+                            className="btn btn-default btn-sm"
+                            onClick={this.handleActivate}
+                            data-id={member.email}>
+                            {getLangText('ACTIVATE')}
+                        </button>
                     }/>
                 );
 
@@ -270,13 +289,13 @@ let PrizeJurySettings = React.createClass({
         return (
             <div>
                 <Form
-                    url={apiUrls.jurys}
+                    url={ApiUrls.jurys}
                     handleSuccess={this.handleCreateSuccess}
                     ref='form'
                     buttonSubmitText='INVITE'>
-                    <FormPropertyHeader>
+                    <div className="ascribe-form-header">
                         <h4 style={{margin: '30px 0px 10px 10px'}}>Jury Members</h4>
-                    </FormPropertyHeader>
+                    </div>
                     <Property
                         name='email'
                         label={getLangText('New jury member')}>

js/constants/api_urls.js

@@ -5,7 +5,7 @@ import getPrizeApiUrls from '../components/whitelabel/prize/constants/api_urls';
 import { update } from '../utils/general_utils';
 
 
-let apiUrls = {
+let ApiUrls = {
     'applications': AppConstants.apiEndpoint + 'applications/',
     'application_token_refresh': AppConstants.apiEndpoint + 'applications/refresh_token/',
     'blob_digitalworks': AppConstants.apiEndpoint + 'blob/digitalworks/',
@@ -63,7 +63,7 @@ export function updateApiUrls(type, subdomain) {
     if (type === 'prize') {
         newUrls = getPrizeApiUrls(subdomain);
     }
-    update(apiUrls, newUrls);
+    update(ApiUrls, newUrls);
 }
 
-export default apiUrls;
+export default ApiUrls;

js/fetchers/user_fetcher.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import requests from '../utils/requests';
-import apiUrls from '../constants/api_urls';
+import ApiUrls from '../constants/api_urls';
 
 let UserFetcher = {
     /**
@@ -13,7 +13,7 @@ let UserFetcher = {
     },
 
     logout() {
-        return requests.get(apiUrls.users_logout);
+        return requests.get(ApiUrls.users_logout);
     }
 };
 

js/mixins/alert_mixin.js

@@ -1,21 +0,0 @@
-'use strict';
-
-import React from 'react';
-import AlertDismissable from '../components/ascribe_forms/alert';
-
-let AlertMixin = {
-    setAlerts(errors){
-        let alerts = errors.map((error) => {
-            return <AlertDismissable error={error} key={error}/>;
-        });
-
-        this.setState({alerts: alerts});
-    },
-    
-    clearAlerts(){
-        this.setState({alerts: null});
-    }
-
-};
-
-export default AlertMixin;

js/mixins/form_mixin.js

@@ -1,108 +0,0 @@
-'use strict';
-
-import requests from '../utils/requests';
-import React from 'react';
-
-import AlertDismissable from '../components/ascribe_forms/alert';
-import { getLangText } from '../utils/lang_utils.js';
-
-export const FormMixin = {
-    propTypes: {
-        editions: React.PropTypes.array,
-        currentUser: React.PropTypes.object
-    },
-
-    getInitialState() {
-        return {
-            submitted: false,
-            errors: []
-        };
-    },
-
-    submit(e) {
-        if (e) {
-            e.preventDefault();
-        }
-        this.setState({submitted: true});
-        this.clearErrors();
-        let action = (this.httpVerb && this.httpVerb()) || 'post';
-        this[action](e);
-    },
-
-    post(e){
-        requests
-            .post(this.url(e), { body: this.getFormData() })
-            .then(this.handleSuccess)
-            .catch(this.handleError);
-    },
-
-    delete(e){
-        requests
-            .delete(this.url(e))
-            .then(this.handleSuccess)
-            .catch(this.handleError);
-    },
-    
-    clearErrors(){
-        for (var ref in this.refs){
-            if ('clearAlerts' in this.refs[ref]){
-                this.refs[ref].clearAlerts();
-            }
-
-        }
-        this.setState({errors: []});
-    },
-    handleSuccess(response){
-        if ('handleSuccess' in this.props){
-            this.props.handleSuccess(response);
-        }
-
-    },
-    handleError(err){
-        if (err.json) {
-            for (var input in err.json.errors){
-                if (this.refs && this.refs[input] && this.refs[input].state) {
-                    this.refs[input].setAlerts( err.json.errors[input]);
-                } else {
-                    this.setState({errors: this.state.errors.concat(err.json.errors[input])});
-                }
-            }
-        }
-        else {
-            // TODO translate?
-            this.setState({errors: ['Something went wrong, please try again later']});
-        }
-        this.setState({submitted: false});
-    },
-
-    getBitcoinIds(){
-        return this.props.editions.map(function(edition){
-            return edition.bitcoin_id;
-        });
-    },
-    
-    getTitlesString(){
-        return this.props.editions.map(function(edition){
-            return '- \"' + edition.title + ', ' + getLangText('edition') + ' ' + edition.edition_number + '\"\n';
-        });
-    },
-
-    render(){
-        let alert = null;
-        if (this.state.errors.length > 0){
-            alert = this.state.errors.map((error) => {
-                return <AlertDismissable error={error} key={error}/>;
-            });
-        }
-        
-        return (
-            <div>
-                {alert}
-                {this.renderForm()}
-            </div>
-        );
-    }
-};
-
-export default FormMixin;
-

js/mixins/modal_mixin.js

@@ -1,12 +0,0 @@
-'use strict';
-
-let ModalMixin = {
-    onRequestHide(e){
-        if (e) {
-            e.preventDefault();
-        }
-        this.props.onRequestHide();
-    }
-};
-
-export default ModalMixin;

js/utils/form_utils.js

@@ -0,0 +1,51 @@
+'use strict';
+
+import { getLangText } from './lang_utils';
+
+/**
+ * Generates a message for submitting a form
+ * @param  {string} aclName    Enum name of a acl
+ * @param  {string} entities   Already computed name of entities
+ * @param  {string} senderName Name of the sender
+ * @return {string}            Completed message
+ */
+export function getAclFormMessage(aclName, entities, senderName) {
+    let message = '';
+
+    message += getLangText('Hi');
+    message += ',\n\n';
+
+    if(aclName === 'acl_transfer') {
+        message += getLangText('I transfer ownership of');
+    } else if(aclName === 'acl_consign') {
+        message += getLangText('I consign');
+    } else if(aclName === 'acl_unconsign') {
+        message += getLangText('I un-consign');
+    } else if(aclName === 'acl_loan') {
+        message += getLangText('I loan');
+    } else if(aclName === 'acl_share') {
+        message += getLangText('I share');
+    } else {
+        throw new Error('Your specified aclName did not match a an acl class.');
+    }
+
+    message += ':\n';
+    message += entities;
+
+    if(aclName === 'acl_transfer' || aclName === 'acl_loan' || aclName === 'acl_consign') {
+        message += getLangText('to you');
+    } else if(aclName === 'acl_unconsign') {
+        message += getLangText('from you');
+    } else if(aclName === 'acl_share') {
+        message += getLangText('with you');
+    } else {
+        throw new Error('Your specified aclName did not match a an acl class.');
+    }
+
+    message += '\n\n';
+    message += getLangText('Truly yours,');
+    message += '\n';
+    message += senderName;
+
+    return message;
+}

package.json

@@ -71,7 +71,7 @@
     "q": "^1.4.1",
     "raven-js": "^1.1.19",
     "react": "^0.13.2",
-    "react-bootstrap": "~0.22.6",
+    "react-bootstrap": "^0.24.3",
     "react-datepicker": "~0.8.0",
     "react-progressbar": "^1.1.0",
     "react-router": "^0.13.3",

sass/ascribe_edition.scss

@@ -16,33 +16,35 @@
     margin-top: 20px;
 }
 .ascribe-edition-collapsible-wrapper > div > span {
-  font-size: 1.2em;
+    font-size: 1.2em;
-  margin-right: .5em;
+    margin-right: .5em;
 }
 .ascribe-edition-collapsible-wrapper > div > span:nth-child(2) {
-  font-size: 0.9em;
+    font-size: 0.9em;
 }
 
-.ascribe-edition-collapible-content {
+.ascribe-edition-collapsible-content {
-  width:100%;
+    width:100%;
+    background: none;
+    border: none;
 }
 
-.coa-file-wrapper{
+.coa-file-wrapper {
-  display: table;
+    display: table;
-  height: 200px;
+    height: 200px;
-  overflow: hidden;
+    overflow: hidden;
-  margin: 0 auto;
+    margin: 0 auto;
-  width: 100%;
+    width: 100%;
-  padding: 1em;
+    padding: 1em;
 }
 
 .coa-file {
-  display: table-cell;
+    display: table-cell;
-  vertical-align: middle;
+    vertical-align: middle;
-  border: 1px solid #CCC;
+    border: 1px solid #CCC;
-  background-color: #F8F8F8;
+    background-color: #F8F8F8;
 }
 
 .ascribe-button-list {
-  margin-top: 1em;
+    margin-top: 1em;
 }

sass/ascribe_panel.scss

@@ -1,18 +1,94 @@
 .ascribe-panel-wrapper {
     border: 1px solid #DDD;
-    padding: 1.4em;
+    min-height: 5em;
-    margin: 1em 0 1em 0;
+    height: 5em;
+
+    margin-top: 1em;
+
+    > div {
+        height: 100%;
+        float: left;
+
+        &:first-child {
+            width: 60%;
+        }
+
+        &:nth-child(2) {
+            width: 40%;
+        }
+    }
 }
 
-.ascribe-panel-title {
+.ascribe-panel-table {
-    margin-bottom: 0.5em;
+    display:table;
+
+    > .ascribe-panel-content {
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    @media(max-width:767px) {
+        &:first-child {
+            > div {
+                padding-left: 1em;
+            }
+            
+        }
+
+        &:nth-child(2) {
+            > div {
+                padding-right: 1em;
+
+                > button {
+                    float:right;
+                }
+            }
+        }
+
+    }
+
+    @media(min-width:768px) {
+        &:first-child {
+            > div {
+                padding-left: 2em;
+            }
+            
+        }
+
+        &:nth-child(2) {
+            > div {
+                padding-right: 2em;
+
+                > button {
+                    float:right;
+                }
+            }
+        }
+    }
 }
 
-.ascribe-panel-content {
+@media(max-width:767px) {
-    font-size: 0.9em;
+    .ascribe-panel-title {
-    color: rgba(0,0,0,0.5);
+        font-size: .9em;
+    }
+
+    .ascribe-panel-subtitle {
+        font-size: .7em;
+        color: rgba(0,0,0,0.5);
+    }
+
 }
 
-.ascribe-panel-buttons {
+@media(min-width:768px) {
-    margin-top: 0.5em;
+    .ascribe-panel-title {
+        font-size: 1.1em;
+    }
+
+    .ascribe-panel-subtitle {
+        font-size: .9em;
+        color: rgba(0,0,0,0.5);
+    }
 }
+
+
+

sass/ascribe_theme.scss

@@ -3,3 +3,13 @@
 .pager li a {
     color: white;
 }
+
+.panel-default {
+    border: none;
+    box-shadow: none;
+    margin-bottom: 0;
+}
+
+.panel-body {
+    padding:0;
+}