Merge branch 'AD-456-ikonotv-branded-page-for-registra' of bitbucket.org:ascribe/onion into AD-456-ikonotv-branded-page-for-registra

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -17,7 +17,7 @@ const CollapsibleParagraph = React.createClass({
 
     getDefaultProps() {
         return {
-            show: false
+            show: true
         };
     },
 

js/components/ascribe_forms/form_contract_agreement.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
 
 import ContractListActions from '../../actions/contract_list_actions';
 import ContractListStore from '../../stores/contract_list_store';
@@ -20,11 +21,13 @@ import { mergeOptions } from '../../utils/general_utils';
 
 
 let ContractAgreementForm = React.createClass({
-     propTypes: {
+    propTypes: {
         handleSuccess: React.PropTypes.func
-     },
+    },
 
-     getInitialState() {
+    mixins: [Router.Navigation, Router.State],
+
+    getInitialState() {
         return mergeOptions(
             ContractListStore.getState(),
             {
@@ -54,7 +57,7 @@ let ContractAgreementForm = React.createClass({
         let notification = 'Contract agreement send';
         notification = new GlobalNotificationModel(notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
-        this.refs.form.reset();
+        this.transitionTo('pieces');
     },
 
     getFormData(){

js/components/ascribe_settings/account_settings.js

@@ -101,7 +101,6 @@ let AccountSettings = React.createClass({
         return (
             <CollapsibleParagraph
                 title={getLangText('Account')}
-                show={true}
                 defaultExpanded={true}>
                 {content}
                 <CopyrightAssociationForm currentUser={this.props.currentUser}/>

js/components/ascribe_settings/api_settings.js

@@ -97,7 +97,6 @@ let APISettings = React.createClass({
         return (
             <CollapsibleParagraph
                 title={getLangText('API Integration')}
-                show={true}
                 defaultExpanded={this.props.defaultExpanded}>
                 <Form
                     url={ApiUrls.applications}

js/components/ascribe_settings/bitcoin_wallet_settings.js

@@ -61,7 +61,6 @@ let BitcoinWalletSettings = React.createClass({
         return (
             <CollapsibleParagraph
                 title={getLangText('Crypto Wallet')}
-                show={true}
                 defaultExpanded={this.props.defaultExpanded}>
                 {content}
             </CollapsibleParagraph>

js/components/ascribe_settings/contract_settings.js

@@ -8,6 +8,12 @@ import CreateContractForm from '../ascribe_forms/form_create_contract';
 import ContractListStore from '../../stores/contract_list_store';
 import ContractListActions from '../../actions/contract_list_actions';
 
+import UserStore from '../../stores/user_store';
+import UserActions from '../../actions/user_actions';
+
+import WhitelabelStore from '../../stores/whitelabel_store';
+import WhitelabelActions from '../../actions/whitelabel_actions';
+
 import ActionPanel from '../ascribe_panel/action_panel';
 import ContractSettingsUpdateButton from './contract_settings_update_button';
 
@@ -17,24 +23,30 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import AclProxy from '../acl_proxy';
 
 import { getLangText } from '../../utils/lang_utils';
+import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils';
 
 
 let ContractSettings = React.createClass({
-    propTypes: {
-        currentUser: React.PropTypes.object,
-        defaultExpanded: React.PropTypes.bool
-    },
-
     getInitialState(){
-        return ContractListStore.getState();
+        return mergeOptions(
+            ContractListStore.getState(),
+            UserStore.getState()
+        );
     },
 
     componentDidMount() {
         ContractListStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        WhitelabelActions.fetchWhitelabel();
+        UserActions.fetchCurrentUser();
         ContractListActions.fetchContractList(true);
     },
 
     componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
         ContractListStore.unlisten(this.onChange);
     },
 
@@ -82,16 +94,13 @@ let ContractSettings = React.createClass({
         }
 
         return (
-            <AclProxy
+            <div className="settings-container">
-                aclName="acl_view_settings_contract"
-                aclObject={this.props.currentUser.acl}>
                 <CollapsibleParagraph
                     title={getLangText('Contracts')}
-                    show={true}
+                    defaultExpanded={true}>
-                    defaultExpanded={false}>
                     <AclProxy
                         aclName="acl_edit_public_contract"
-                        aclObject={this.props.currentUser.acl}>
+                        aclObject={this.state.currentUser.acl}>
                         <div>
                             {createPublicContractForm}
                             {publicContracts.map((contract, i) => {
@@ -99,10 +108,14 @@ let ContractSettings = React.createClass({
                                     <ActionPanel
                                         key={i}
                                         title={contract.name}
-                                        content={contract.name}
+                                        content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
-                                                <ContractSettingsUpdateButton contract={contract}/>
+                                                <AclProxy
+                                                    aclObject={this.state.whitelabel}
+                                                    aclName="acl_update_public_contract">
+                                                    <ContractSettingsUpdateButton contract={contract}/>
+                                                </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
                                                     href={contract.blob.url_safe}
@@ -124,7 +137,7 @@ let ContractSettings = React.createClass({
                     </AclProxy>
                     <AclProxy
                         aclName="acl_edit_private_contract"
-                        aclObject={this.props.currentUser.acl}>
+                        aclObject={this.state.currentUser.acl}>
                         <div>
                             <CreateContractForm
                             isPublic={false}
@@ -137,10 +150,14 @@ let ContractSettings = React.createClass({
                                     <ActionPanel
                                         key={i}
                                         title={contract.name}
-                                        content={contract.name}
+                                        content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
-                                               <ContractSettingsUpdateButton contract={contract} />
+                                               <AclProxy
+                                                    aclObject={this.state.whitelabel}
+                                                    aclName="acl_update_private_contract">
+                                                    <ContractSettingsUpdateButton contract={contract}/>
+                                                </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
                                                     href={contract.blob.url_safe}
@@ -154,14 +171,14 @@ let ContractSettings = React.createClass({
                                                 </button>
                                            </div>
                                        }
-                                       leftColumnWidth="40%"
+                                       leftColumnWidth="60%"
-                                       rightColumnWidth="60%"/>
+                                       rightColumnWidth="40%"/>
                                 );
                             })}
                         </div>
                     </AclProxy>
                 </CollapsibleParagraph>
-            </AclProxy>
+            </div>
         );
     }
 });

js/components/ascribe_settings/settings_container.js

@@ -6,11 +6,17 @@ import Router from 'react-router';
 import UserStore from '../../stores/user_store';
 import UserActions from '../../actions/user_actions';
 
+import WhitelabelStore from '../../stores/whitelabel_store';
+import WhitelabelActions from '../../actions/whitelabel_actions';
+
 import AccountSettings from './account_settings';
 import BitcoinWalletSettings from './bitcoin_wallet_settings';
-import ContractSettings from './contract_settings';
 import APISettings from './api_settings';
 
+import AclProxy from '../acl_proxy';
+
+import { mergeOptions } from '../../utils/general_utils';
+
 
 let SettingsContainer = React.createClass({
     propTypes: {
@@ -22,15 +28,22 @@ let SettingsContainer = React.createClass({
     mixins: [Router.Navigation],
 
     getInitialState() {
-        return UserStore.getState();
+        return mergeOptions(
+            UserStore.getState(),
+            WhitelabelStore.getState()
+        );
     },
 
     componentDidMount() {
         UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        WhitelabelActions.fetchWhitelabel();
         UserActions.fetchCurrentUser();
     },
 
     componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
     },
 
@@ -48,9 +61,16 @@ let SettingsContainer = React.createClass({
                 <div className="settings-container">
                     <AccountSettings currentUser={this.state.currentUser} loadUser={this.loadUser}/>
                     {this.props.children}
-                    <APISettings />
+                    <AclProxy
-                    <BitcoinWalletSettings />
+                        aclObject={this.state.whitelabel}
-                    <ContractSettings currentUser={this.state.currentUser} loadUser={this.loadUser}/>
+                        aclName="acl_view_settings_api">
+                        <APISettings />
+                    </AclProxy>
+                    <AclProxy
+                        aclObject={this.state.whitelabel}
+                        aclName="acl_view_settings_bitcoin">
+                        <BitcoinWalletSettings />
+                    </AclProxy>
                 </div>
             );
         }

js/components/header.js

@@ -3,7 +3,6 @@
 import React from 'react';
 import Router from 'react-router';
 
-
 import Nav from 'react-bootstrap/lib/Nav';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
@@ -12,6 +11,8 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
 import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
 import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
 
+import AclProxy from './acl_proxy';
+
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
@@ -96,7 +97,7 @@ let Header = React.createClass({
         }
     },
 
-    onMenuItemClick(event) {
+    onMenuItemClick() {
         /*
         This is a hack to make the dropdown close after clicking on an item
         The function just need to be defined
@@ -137,6 +138,15 @@ let Header = React.createClass({
                         onClick={this.onMenuItemClick}>
                         {getLangText('Account Settings')}
                     </MenuItemLink>
+                    <AclProxy
+                        aclObject={this.state.currentUser.acl}
+                        aclName="acl_view_settings_contract">
+                        <MenuItemLink
+                            to="contract_settings"
+                            onClick={this.onMenuItemClick}>
+                            {getLangText('Contract Settings')}
+                        </MenuItemLink>
+                    </AclProxy>
                     <MenuItem divider />
                     <MenuItemLink eventKey="3" to="logout">{getLangText('Log out')}</MenuItemLink>
                 </DropdownButton>

js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js

@@ -309,7 +309,6 @@ let PrizePieceRatings = React.createClass({
                 <div>
                     <CollapsibleParagraph
                         title={getLangText('Shortlisting')}
-                        show={true}
                         defaultExpanded={true}>
                         <div className="row no-margin">
                             <span className="ascribe-checkbox-wrapper" style={{marginLeft: '1.5em'}}>
@@ -329,7 +328,6 @@ let PrizePieceRatings = React.createClass({
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Average Rating')}
-                        show={true}
                         defaultExpanded={true}>
                         <div id="list-rating" style={{marginLeft: '1.5em', marginBottom: '1em'}}>
                             <StarRating
@@ -375,7 +373,6 @@ let PrizePieceRatings = React.createClass({
             return (
                 <CollapsibleParagraph
                     title={getLangText('Rating')}
-                    show={true}
                     defaultExpanded={true}>
                         <div style={{marginLeft: '1.5em', marginBottom: '1em'}}>
                         <StarRating
@@ -417,7 +414,6 @@ let PrizePieceDetails = React.createClass({
             return (
                 <CollapsibleParagraph
                     title={getLangText('Prize Details')}
-                    show={true}
                     defaultExpanded={true}>
                     <Form ref='form'>
                         {Object.keys(this.props.piece.extra_data).map((data) => {

js/components/whitelabel/prize/components/prize_settings_container.js

@@ -79,7 +79,6 @@ let PrizeSettings = React.createClass({
         return (
             <CollapsibleParagraph
                 title={'Prize Settings for ' + this.state.prize.name}
-                show={true}
                 defaultExpanded={true}>
                 <Form >
                     <Property
@@ -268,19 +267,16 @@ let PrizeJurySettings = React.createClass({
                 <div>
                     <CollapsibleParagraph
                         title={getLangText('Active Jury Members')}
-                        show={true}
                         defaultExpanded={true}>
                         {this.getMembersActive()}
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Pending Jury Invitations')}
-                        show={true}
                         defaultExpanded={true}>
                         {this.getMembersPending()}
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Deactivated Jury Members')}
-                        show={true}
                         defaultExpanded={false}>
                         {this.getMembersInactive()}
                     </CollapsibleParagraph>

js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js

@@ -64,7 +64,6 @@ let CylandPieceContainer = React.createClass({
                     submitButtonType={CylandSubmitButton}>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}
-                        show={true}
                         defaultExpanded={true}>
                         <CylandAdditionalDataForm
                             piece={this.state.piece}

js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js

@@ -68,7 +68,6 @@ let IkonotvPieceContainer = React.createClass({
         let furtherDetails = (
             <CollapsibleParagraph
                 title={getLangText('Further Details')}
-                show={true}
                 defaultExpanded={true}>
                 <span>{getLangText('This piece has been loaned before we started to collect further details.')}</span>
             </CollapsibleParagraph>
@@ -78,7 +77,6 @@ let IkonotvPieceContainer = React.createClass({
             furtherDetails = (
                 <CollapsibleParagraph
                     title={getLangText('Further Details')}
-                    show={true}
                     defaultExpanded={true}>
                     <IkonotvArtistDetailsForm
                         piece={this.state.piece}

js/components/whitelabel/wallet/wallet_routes.js

@@ -13,7 +13,7 @@ import PieceList from '../../../components/piece_list';
 import PieceContainer from '../../../components/ascribe_detail/piece_container';
 import EditionContainer from '../../../components/ascribe_detail/edition_container';
 import SettingsContainer from '../../../components/ascribe_settings/settings_container';
-import RegisterPiece from '../../../components/register_piece';
+import ContractSettings from '../../../components/ascribe_settings/contract_settings';
 
 import CylandLanding from './components/cyland/cyland_landing';
 import CylandPieceContainer from './components/cyland/ascribe_detail/cyland_piece_container';
@@ -51,6 +51,7 @@ let ROUTES = {
             <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
             <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
             <Route name="settings" path="settings" handler={SettingsContainer} />
+            <Route name="contract_settings" path="contract_settings" handler={ContractSettings} />
         </Route>
     ),
     'cc': (
@@ -83,6 +84,7 @@ let ROUTES = {
             <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
             <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
             <Route name="settings" path="settings" handler={SettingsContainer} />
+            <Route name="contract_settings" path="contract_settings" handler={ContractSettings} />
             <Route name="contract_notifications" path="contract_notifications" handler={IkonotvContractNotifications} />
         </Route>
     )

js/routes.js

@@ -17,6 +17,7 @@ import LogoutContainer from './components/logout_container';
 import SignupContainer from './components/signup_container';
 import PasswordResetContainer from './components/password_reset_container';
 
+import ContractSettings from './components/ascribe_settings/contract_settings';
 import SettingsContainer from './components/ascribe_settings/settings_container';
 import CoaVerifyContainer from './components/coa_verify_container';
 
@@ -42,6 +43,7 @@ const COMMON_ROUTES = (
         <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
         <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
         <Route name="settings" path="settings" handler={SettingsContainer} />
+        <Route name="contract_settings" path="contract_settings" handler={ContractSettings} />
         <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
     </Route>
 );

js/utils/general_utils.js

@@ -204,4 +204,21 @@ export function excludePropFromObject(obj, propList){
         }
     }
     return clonedObj;
+}
+
+/**
+ * Takes a string and breaks it at the supplied index and replaces it
+ * with a (potentially) short string that also has been provided
+ * @param  {string} text        The string to truncate
+ * @param  {number} charIndex   The char number at which the text should be truncated
+ * @param  {String} replacement All text after charIndex will be replaced with this string
+ * @return {string}             The truncated text
+ */
+export function truncateTextAtCharIndex(text, charIndex, replacement = '...') {
+    let truncatedText = '';
+
+    truncatedText = text.slice(0, charIndex);
+    truncatedText += text.length > charIndex ? replacement : '';
+
+    return truncatedText;
 }

sass/ascribe_panel.scss

@@ -24,6 +24,10 @@
     > .ascribe-panel-content {
         display: table-cell;
         vertical-align: middle;
+
+        &:first-child {
+            font-size: .9em;
+        }
     }
 
     @media(max-width:767px) {