From 8fc400bb013964220b6b1670ffd96600b7ce6cb6 Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Tue, 30 Jun 2015 10:42:58 +0200
Subject: [PATCH] licenses in registration

---
 js/actions/license_actions.js           | 25 ++++++++++
 js/components/ascribe_forms/form.js     | 12 +++--
 js/components/ascribe_forms/property.js | 14 +++++-
 js/components/header.js                 | 19 ++++----
 js/components/register_piece.js         | 64 ++++++++++++++++++++++---
 js/constants/api_urls.js                |  1 +
 js/fetchers/license_fetcher.js          | 14 ++++++
 js/stores/license_store.js              | 18 +++++++
 sass/ascribe_settings.scss              |  6 +++
 9 files changed, 153 insertions(+), 20 deletions(-)
 create mode 100644 js/actions/license_actions.js
 create mode 100644 js/fetchers/license_fetcher.js
 create mode 100644 js/stores/license_store.js

diff --git a/js/actions/license_actions.js b/js/actions/license_actions.js
new file mode 100644
index 00000000..358c158a
--- /dev/null
+++ b/js/actions/license_actions.js
@@ -0,0 +1,25 @@
+'use strict';
+
+import alt from '../alt';
+import LicenseFetcher from '../fetchers/license_fetcher';
+
+
+class LicenseActions {
+    constructor() {
+        this.generateActions(
+            'updateLicenses'
+        );
+    }
+
+    fetchLicense() {
+        LicenseFetcher.fetch()
+            .then((res) => {
+                this.actions.updateLicenses(res.licenses);
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+}
+
+export default alt.createActions(LicenseActions);
diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index 319214c1..e6db5405 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -130,15 +130,17 @@ let Form = React.createClass({
     },
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
-            return ReactAddons.addons.cloneWithProps(child, {
-                handleChange: this.handleChangeChild,
-                ref: child.props.name
-            });
+            if (child) {
+                return ReactAddons.addons.cloneWithProps(child, {
+                    handleChange: this.handleChangeChild,
+                    ref: child.props.name
+                });
+            }
         });
     },
     render() {
         return (
-            <form 
+            <form
                 role="form"
                 className="ascribe-form"
                 onSubmit={this.submit}
diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index f0c445f3..c4238675 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -16,13 +16,14 @@ let Property = React.createClass({
             React.PropTypes.string,
             React.PropTypes.element
         ]),
+        footer: React.PropTypes.element,
         handleChange: React.PropTypes.func
     },
 
     getDefaultProps() {
         return {
             editable: true,
-            hidden: false
+            hidden: false,
         };
     },
 
@@ -55,6 +56,9 @@ let Property = React.createClass({
 
     handleChange(event) {
         this.props.handleChange(event);
+        if ('onChange' in this.props) {
+            this.props.onChange(event);
+        }
         this.setState({value: event.target.value});
     },
     handleFocus() {
@@ -120,6 +124,13 @@ let Property = React.createClass({
                     {this.props.tooltip}
                 </Tooltip>);
         }
+        let footer = null;
+        if (this.props.footer){
+            footer = (
+                <div className="ascribe-property-footer">
+                    {this.props.footer}
+                </div>);
+        }
         return (
             <div
                 className={'ascribe-settings-wrapper ' + this.getClassName()}
@@ -132,6 +143,7 @@ let Property = React.createClass({
                         {this.state.errors}
                         <span>{ this.props.label}</span>
                         {this.renderChildren()}
+                        {footer}
                     </div>
                 </OverlayTrigger>
             </div>
diff --git a/js/components/header.js b/js/components/header.js
index b2e70f81..e4233a06 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -61,14 +61,17 @@ let Header = React.createClass({
     },
 
     getPoweredBy(){
-        return (
-            <div className="row no-margin ascribe-subheader">
-                <a className="pull-right" href="https://www.ascribe.io/" target="_blank">
-                    <span id="powered">powered by </span>
-                    <span>ascribe </span>
-                    <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
-                </a>
-            </div>);
+        if (this.state.whitelabel.logo) {
+            return (
+                <div className="row no-margin ascribe-subheader">
+                    <a className="pull-right" href="https://www.ascribe.io/" target="_blank">
+                        <span id="powered">powered by </span>
+                        <span>ascribe </span>
+                        <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
+                    </a>
+                </div>);
+        }
+        return null;
     },
     onChange(state) {
         this.setState(state);
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 258e3a36..2e68433d 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -7,6 +7,9 @@ import AppConstants from '../constants/application_constants';
 
 import Router from 'react-router';
 
+import LicenseActions from '../actions/license_actions';
+import LicenseStore from '../stores/license_store';
+
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
@@ -19,15 +22,32 @@ import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
 
 import DatePicker from 'react-datepicker/dist/react-datepicker';
 
+import { mergeOptions } from '../utils/general_utils';
 
 let RegisterPiece = React.createClass( {
     mixins: [Router.Navigation],
 
     getInitialState(){
-        return {
-            digitalWorkKey: null,
-            uploadStatus: false
-        };
+        return mergeOptions(
+            LicenseStore.getState(),
+            {
+                digitalWorkKey: null,
+                uploadStatus: false,
+                selectedLicense: 0
+            });
+    },
+
+    componentDidMount() {
+        LicenseActions.fetchLicense();
+        LicenseStore.listen(this.onChange);
+    },
+
+    componentWillUnmount() {
+        LicenseStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
     },
 
     handleSuccess(){
@@ -59,15 +79,46 @@ let RegisterPiece = React.createClass( {
 
     isReadyForFormSubmission(files) {
         files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
-        if(files.length > 0 && files[0].status === 'upload successful') {
+        if (files.length > 0 && files[0].status === 'upload successful') {
             return true;
         } else {
             return false;
         }
     },
+    onLicenseChange(event){
+        console.log(this.state.licenses[event.target.selectedIndex].url);
+        this.setState({selectedLicense: event.target.selectedIndex});
+    },
+    getLicenses() {
+        if (this.state.licenses && this.state.licenses.length > 0) {
+            return (
+                <Property
+                    name='license'
+                    label="Copyright license..."
+                    onChange={this.onLicenseChange}
+                    footer={
+                        <a className="pull-right" href={this.state.licenses[this.state.selectedLicense].url} target="_blank">
+                            Learn more about this license
+                        </a>}>
+                    <select name="license">
+                        {this.state.licenses.map((license, i) => {
+                            return (
+                                <option
+                                    name={i}
+                                    key={i}
+                                    value={ license.code }>
+                                    { license.code.toUpperCase() }: { license.name }
+                                </option>
+                            );
+                        })}
+                    </select>
+                </Property>);
+        }
+        return null;
+    },
 
     render() {
-        let buttons = null;
+        let buttons = <span />;
 
         if (this.state.uploadStatus){
             buttons = (
@@ -132,6 +183,7 @@ let RegisterPiece = React.createClass( {
                                 min={1}
                                 required/>
                         </Property>
+                        {this.getLicenses()}
                         <hr />
                     </Form>
                 </div>
diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js
index df3aac3f..46626f2d 100644
--- a/js/constants/api_urls.js
+++ b/js/constants/api_urls.js
@@ -14,6 +14,7 @@ let apiUrls = {
     'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/',
     'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/',
     'editions_list': AppConstants.apiEndpoint + 'pieces/${piece_id}/editions/',
+    'licenses': AppConstants.apiEndpoint + 'ownership/licenses/',
     'note_notes': AppConstants.apiEndpoint + 'note/notes/',
     'note_edition': AppConstants.apiEndpoint + 'note/edition_notes/',
     'ownership_consigns': AppConstants.apiEndpoint + 'ownership/consigns/',
diff --git a/js/fetchers/license_fetcher.js b/js/fetchers/license_fetcher.js
new file mode 100644
index 00000000..6b0cada0
--- /dev/null
+++ b/js/fetchers/license_fetcher.js
@@ -0,0 +1,14 @@
+'use strict';
+
+import requests from '../utils/requests';
+
+let LicenseFetcher = {
+    /**
+     * Fetch the available licenses from the API (might be bound to the subdomain e.g. cc.ascribe.io).
+     */
+    fetch() {
+        return requests.get('licenses', {'subdomain': window.location.host.split('.')[0]});
+    }
+};
+
+export default LicenseFetcher;
diff --git a/js/stores/license_store.js b/js/stores/license_store.js
new file mode 100644
index 00000000..42a6bfb5
--- /dev/null
+++ b/js/stores/license_store.js
@@ -0,0 +1,18 @@
+'use strict';
+
+import alt from '../alt';
+import LicenseActions from '../actions/license_actions';
+
+
+class LicenseStore {
+    constructor() {
+        this.licenses = {};
+        this.bindActions(LicenseActions);
+    }
+
+    onUpdateLicenses(licenses) {
+        this.licenses = licenses;
+    }
+}
+
+export default alt.createStore(LicenseStore, 'LicenseStore');
diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss
index 8e136338..bbd6dc77 100644
--- a/sass/ascribe_settings.scss
+++ b/sass/ascribe_settings.scss
@@ -127,3 +127,9 @@
         padding: 0;
     }
 }
+
+.ascribe-property-footer{
+    font-size: 0.8em;
+    margin-top: 10px;
+    width: 100%;
+}
\ No newline at end of file