whitelabel subdomains

gulpfile.js

@@ -93,8 +93,7 @@ gulp.task('browser-sync', function() {
     browserSync({
         files: config.filesToWatch,
         proxy: 'http://localhost:4000',
-        port: 3000,
-        browser: "chromium-browser"
+        port: 3000
     });
 });
 

js/actions/whitelabel_actions.js

@@ -0,0 +1,25 @@
+'use strict';
+
+import alt from '../alt';
+import WhitelabelFetcher from '../fetchers/whitelabel_fetcher';
+
+
+class WhitelabelActions {
+    constructor() {
+        this.generateActions(
+            'updateWhitelabel'
+        );
+    }
+
+    fetchWhitelabel() {
+        WhitelabelFetcher.fetch()
+            .then((res) => {
+                this.actions.updateWhitelabel(res.whitelabel);
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    }
+}
+
+export default alt.createActions(WhitelabelActions);

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -8,6 +8,7 @@ promise.polyfill();
 import fetch from 'isomorphic-fetch';
 import AppConstants from '../../constants/application_constants';
 
+import { getCookie } from '../../utils/fetch_api_utils';
 
 import fineUploader from 'fineUploader';
 import FileDragAndDrop from './file_drag_and_drop';
@@ -105,21 +106,22 @@ var ReactS3FineUploader = React.createClass({
                 }
             },
             signature: {
-                endpoint: AppConstants.serverUrl + 's3/signature/'
-                //customHeaders: {
-                //    'Authorization': 'OAuth ' + getCookie('sessionid')
-                //}
+                endpoint: AppConstants.serverUrl + 's3/signature/',
+                customHeaders: {
+                    'X-CSRFToken': getCookie('csrftoken')
+                }
             },
             deleteFile: {
                 enabled: true,
                 method: 'DELETE',
-                endpoint: AppConstants.serverUrl + 's3/delete'
-                //customHeaders: {
-                //    'X-CSRFToken': getCookie('csrftoken')
-                //}
+                endpoint: AppConstants.serverUrl + 's3/delete',
+                customHeaders: {
+                    'X-CSRFToken': getCookie('csrftoken')
+                }
             },
             cors: {
-                expected: true
+                expected: true,
+                sendCredentials: true
             },
             chunking: {
                 enabled: true

js/components/header.js

@@ -6,6 +6,9 @@ import Router from 'react-router';
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
+import WhitelabelActions from '../actions/whitelabel_actions';
+import WhitelabelStore from '../stores/whitelabel_store';
+
 import Alt from '../alt';
 
 import Nav from 'react-bootstrap/lib/Nav';
@@ -17,6 +20,7 @@ import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
 import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
 
 
+import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 
 let Link = Router.Link;
@@ -25,22 +29,47 @@ let Header = React.createClass({
     mixins: [Router.Navigation],
 
     getInitialState() {
-        return UserStore.getState();
+        return mergeOptions(WhitelabelStore.getState(), UserStore.getState());
     },
 
     componentDidMount() {
         UserActions.fetchCurrentUser();
         UserStore.listen(this.onChange);
+        WhitelabelActions.fetchWhitelabel();
+        WhitelabelStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
         UserStore.unlisten(this.onChange);
+        WhitelabelStore.unlisten(this.onChange);
     },
     handleLogout(){
         UserActions.logoutCurrentUser();
         Alt.flush();
         this.transitionTo('login');
     },
+    getLogo(){
+        let logo = (
+            <span>
+                <span>ascribe </span>
+                <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
+            </span>);
+        if (this.state.whitelabel.logo){
+            logo = <img className="img-brand" src={this.state.whitelabel.logo} />;
+        }
+        return logo;
+    },
+
+    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>);
+    },
     onChange(state) {
         this.setState(state);
     },
@@ -64,20 +93,24 @@ let Header = React.createClass({
             account = <NavItemLink to="login">LOGIN</NavItemLink>;
             signup = <NavItemLink to="signup">SIGNUP</NavItemLink>;
         }
-        let brand = (<Link className="navbar-brand" to="pieces" path="/?page=1">
-                        <span>ascribe </span>
-                        <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
-                    </Link>);
-        return (
 
-            <Navbar brand={brand} toggleNavKey={0}>
-                <CollapsibleNav eventKey={0}>
-                    <Nav navbar right>
-                        {account}
-                        {signup}
-                    </Nav>
-                </CollapsibleNav>
-            </Navbar>
+        return (
+            <div>
+                <Navbar
+                    brand={
+                        <Link className="navbar-brand" to="pieces" path="/?page=1">
+                            {this.getLogo()}
+                        </Link>}
+                    toggleNavKey={0}>
+                    <CollapsibleNav eventKey={0}>
+                        <Nav navbar right>
+                            {account}
+                            {signup}
+                        </Nav>
+                    </CollapsibleNav>
+                </Navbar>
+                {this.getPoweredBy()}
+            </div>
         );
     }
 });

js/constants/api_urls.js

@@ -37,7 +37,8 @@ let apiUrls = {
     'users_password_reset_request': AppConstants.apiEndpoint + 'users/request_reset_password/',
     'users_signup': AppConstants.apiEndpoint + 'users/',
     'users_username': AppConstants.apiEndpoint + 'users/username/',
-    'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/'
+    'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/',
+    'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/'
 };
 
 export default apiUrls;

js/fetchers/whitelabel_fetcher.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import requests from '../utils/requests';
+
+let WhitelabelFetcher = {
+    /**
+     * Fetch the custom whitelabel data from the API.
+     */
+    fetch() {
+        return requests.get('whitelabel_settings', {'subdomain': window.location.host.split('.')[0]});
+    }
+};
+
+export default WhitelabelFetcher;

js/stores/whitelabel_store.js

@@ -0,0 +1,18 @@
+'use strict';
+
+import alt from '../alt';
+import WhitelabelActions from '../actions/whitelabel_actions';
+
+
+class WhitelabelStore {
+    constructor() {
+        this.whitelabel = {};
+        this.bindActions(WhitelabelActions);
+    }
+
+    onUpdateWhitelabel(whitelabel) {
+        this.whitelabel = whitelabel;
+    }
+}
+
+export default alt.createStore(WhitelabelStore, 'WhitelabelStore');

sass/main.scss

@@ -60,6 +60,20 @@ body {
     color: $ascribe-color;
 }
 
+.img-brand{
+    height: 25px;
+}
+
+.ascribe-subheader{
+    padding-bottom: 10px;
+    margin-top: -10px;
+    a {
+        cursor: pointer;
+        font-size: 0.8em;
+        color: #222;
+    }
+}
+
 .tooltip-inner{
     max-width: 300px;
     padding: 3px 8px;