Merge pull request #2 from plotly/authentication

Authentication

circle.yml

@@ -0,0 +1,17 @@
+machine:
+    python:
+        version: 2.7.11
+    node:
+        version: 6.9.2
+
+dependencies:
+    pre:
+        - pip install -r tests/requirements.txt
+        - npm install
+        - npm run build-prod
+
+
+test:
+    override:
+        - python -m unittest discover -s tests
+        - npm run test

package.json

@@ -25,14 +25,14 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "clean-webpack-plugin": "^0.1.9",
+    "cookie": "^0.3.1",
     "dependency-graph": "^0.5.0",
     "es6-promise": "^4.1.0",
-    "immutable": "^3.8.1",
     "json-loader": "^0.5.4",
+    "query-string": "^4.3.2",
+    "radium": "^0.18.2",
     "ramda": "^0.23.0",
     "react": "^15.4.2",
-    "react-dnd": "^2.1.4",
-    "react-dnd-html5-backend": "^2.1.2",
     "react-dom": "^15.0.1",
     "react-redux": "^4.4.5",
     "redux": "^3.4.0",
@@ -52,5 +52,5 @@
     "redux-logger": "^2.8.0",
     "serv": "^0.2.4",
     "webpack-dev-server": "^1.14.1"
-    }
+  }
 }

src/TreeContainer.react.js → src/APIController.react.js

@@ -1,6 +1,6 @@
 /* global window: true */
 import {connect} from 'react-redux'
-import {contains, isEmpty, isNil} from 'ramda'
+import {any, contains, equals, isEmpty, isNil} from 'ramda'
 import React, {Component, PropTypes} from 'react';
 import renderTree from './renderTree';
 import {
@@ -10,9 +10,9 @@ import {
     loadStateFromRoute,
     setLayout
 } from './actions/index';
-import {getLayout, getDependencies, getRoutes} from './actions/api';
+import {getDependencies, getLayout, getRoutes} from './actions/api';
 import {APP_STATES} from './reducers/constants';
-
+import AccessDenied from './AccessDenied.react';
 
 /**
  * Fire off API calls for initialization
@@ -42,6 +42,7 @@ class UnconnectedContainer extends Component {
             paths,
             routesRequest
         } = props;
+
         if (isEmpty(layoutRequest)) {
             dispatch(getLayout());
         } else if (layoutRequest.status === 200) {
@@ -83,22 +84,44 @@ class UnconnectedContainer extends Component {
     render () {
         const {
             appLifecycle,
+            configRequest,
             dependenciesRequest,
+            lastUpdateComponentRequest,
             layoutRequest,
             layout,
+            routesRequest
         } = this.props;
-        if (layoutRequest.status &&
+
+        // Auth protected routes
+        if (any(equals(true),
+                [dependenciesRequest, lastUpdateComponentRequest,
+                 layoutRequest, routesRequest].map(
+            request => (request.status && request.status === 403))
+        )) {
+            return (<AccessDenied configRequest={configRequest}/>);
+        }
+
+
+        else if (layoutRequest.status &&
             !contains(layoutRequest.status, [200, 'loading'])
         ) {
             return (<div>{'Error loading layout'}</div>);
-        } else if (
+        }
+
+
+        else if (
             dependenciesRequest.status &&
             !contains(dependenciesRequest.status, [200, 'loading'])
         ) {
             return (<div>{'Error loading dependencies'}</div>);
-        } else if (appLifecycle === APP_STATES('HYDRATED')) {
+        }
+
+
+        else if (appLifecycle === APP_STATES('HYDRATED')) {
             return renderTree(layout, dependenciesRequest.content);
-        } else {
+        }
+
+        else {
             return (<div>{'Loading...'}</div>);
         }
     }
@@ -109,8 +132,10 @@ UnconnectedContainer.propTypes = {
         APP_STATES('HYDRATED')
     ]),
     dispatch: PropTypes.function,
+    configRequest: PropTypes.object,
     dependenciesRequest: PropTypes.object,
     routesRequest: PropTypes.object,
+    lastUpdateComponentRequest: PropTypes.objec,
     layoutRequest: PropTypes.object,
     layout: PropTypes.object,
     paths: PropTypes.object,
@@ -121,8 +146,10 @@ const Container = connect(
     // map state to props
     state => ({
         appLifecycle: state.appLifecycle,
-        layoutRequest: state.layoutRequest,
+        configRequest: state.configRequest,
         dependenciesRequest: state.dependenciesRequest,
+        lastUpdateComponentRequest: state.lastUpdateComponentRequest,
+        layoutRequest: state.layoutRequest,
         routesRequest: state.routesRequest,
         layout: state.layout,
         graphs: state.graphs,

src/AccessDenied.react.js

@@ -0,0 +1,45 @@
+/* global window:true, document:true */
+import React, {PropTypes} from 'react';
+import {merge} from 'ramda';
+import * as styles from './styles/styles.js';
+import * as constants from './constants/constants.js';
+
+function AccessDenied(props) {
+    const {configRequest} = props;
+    const fid = configRequest.content.fid;
+    const owner_username = fid.split(':')[0];
+    return (
+        <div style={merge(styles.base.html, styles.base.container)}>
+
+            <div style={styles.base.h2}>
+                {"Access Denied"}
+            </div>
+
+            <div style={styles.base.h4}>
+                {"Uh oh! You don't have access to this Dash app."}
+            </div>
+
+            <div>
+                {`This app is owned by ${owner_username}. `}
+                {`Reach out to ${owner_username} to grant you access
+                  to this app and then try refreshing the app.`}
+            </div>
+
+            <br/>
+
+            <a style={styles.base.a} onClick={() => {
+                document.cookie = (
+                    `${constants.OAUTH_COOKIE_NAME}=; `+
+                    'expires=Thu, 01 Jan 1970 00:00:01 GMT;'
+                );
+                window.location.reload(true);
+            }}>
+                {'Log out of session'}
+            </a>
+        </div>
+    )
+}
+AccessDenied.propTypes = {
+    configRequest: PropTypes.object
+}
+export default AccessDenied;

src/AppContainer.react.js

@@ -1,16 +1,19 @@
 import {connect} from 'react-redux';
 import React from 'react';
-import TreeContainer from './TreeContainer.react';
-import Loading from './components/core/Loading.react';
+import Authentication from './Authentication.react';
+import APIController from './APIController.react';
+import DocumentTitle from './components/core/DocumentTitle.react';
 import Toolbar from './components/core/Toolbar.react';
 
 function UnconnectedAppContainer() {
     return (
-        <div>
-            <Toolbar/>
-            <TreeContainer/>
-            <Loading/>
-        </div>
+        <Authentication>
+            <div>
+                <Toolbar/>
+                <APIController/>
+                <DocumentTitle/>
+            </div>
+        </Authentication>
     );
 }