licenses in registration

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);

js/components/ascribe_forms/form.js

@@ -130,10 +130,12 @@ let Form = React.createClass({
     },
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
+            if (child) {
                 return ReactAddons.addons.cloneWithProps(child, {
                     handleChange: this.handleChangeChild,
                     ref: child.props.name
                 });
+            }
         });
     },
     render() {

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>

js/components/header.js

@@ -61,6 +61,7 @@ let Header = React.createClass({
     },
 
     getPoweredBy(){
+        if (this.state.whitelabel.logo) {
             return (
                 <div className="row no-margin ascribe-subheader">
                     <a className="pull-right" href="https://www.ascribe.io/" target="_blank">
@@ -69,6 +70,8 @@ let Header = React.createClass({
                         <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
                     </a>
                 </div>);
+        }
+        return null;
     },
     onChange(state) {
         this.setState(state);

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 {
+        return mergeOptions(
+            LicenseStore.getState(),
+            {
                 digitalWorkKey: null,
-            uploadStatus: false
-        };
+                uploadStatus: false,
+                selectedLicense: 0
+            });
+    },
+
+    componentDidMount() {
+        LicenseActions.fetchLicense();
+        LicenseStore.listen(this.onChange);
+    },
+
+    componentWillUnmount() {
+        LicenseStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
     },
 
     handleSuccess(){
@@ -65,9 +85,40 @@ let RegisterPiece = React.createClass( {
             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>

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/',

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;

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');

sass/ascribe_settings.scss

@@ -127,3 +127,9 @@
         padding: 0;
     }
 }
+
+.ascribe-property-footer{
+    font-size: 0.8em;
+    margin-top: 10px;
+    width: 100%;
+}