Remove sensible data from frontend config #1

mozaik.js

@@ -1,10 +1,15 @@
 var express = require('express');
 var app     = express();
+var _       = require('lodash');
 var hub     = require('./src/core/hub');
 var config  = require('./config');
 
 app.use(express.static(__dirname + '/build'));
 
+app.get('/config', function (req, res) {
+    res.send(_.omit(config, 'api'));
+});
+
 var server = app.listen(config.port, function () {
     console.log('MOZAÏK listening at http://%s:%s', config.host, config.port);
 });

src/App.jsx

@@ -1,11 +1,12 @@
-var React  = require('react');
-var Mozaik = require('./core/components/Mozaik.jsx');
+var React         = require('react');
+var Mozaik        = require('./core/components/Mozaik.jsx');
+var ConfigActions = require('./core/actions/ConfigActions');
 
 require('./ext/collected');
 
-var config = require('./../config');
-
 React.render(
-    <Mozaik config={config} />,
+    <Mozaik />,
     document.getElementById('hotboard')
-);
+);
+
+ConfigActions.loadConfig();

src/core/actions/ConfigActions.js

@@ -0,0 +1,7 @@
+var Reflux = require('reflux');
+
+var ConfigActions = Reflux.createActions([
+    'loadConfig'
+]);
+
+module.exports = ConfigActions;

src/core/actions/DashboardActions.js

@@ -1,10 +1,20 @@
 var Reflux = require('reflux');
 
-var HotBoardActions = Reflux.createActions([
+var DashboardActions = Reflux.createActions([
     'setDashboards',
     'previousDashboard',
     'nextDashboard',
     'startRotation'
 ]);
 
-module.exports = HotBoardActions;
+DashboardActions.setDashboards.shouldEmit = function (dashboards) {
+    // starts dashboard rotation if there is more
+    // than one dashboard configured
+    if (dashboards.length > 1) {
+        DashboardActions.startRotation();
+    }
+
+    return true;
+};
+
+module.exports = DashboardActions;

src/core/components/Dashboard.jsx

@@ -14,10 +14,10 @@ var Dashboard = React.createClass({
     },
 
     componentWillMount() {
-        this.listenTo(DashboardStore, this.onStoreUpdate);
+        this.listenTo(DashboardStore, this.onDashboardStoreUpdate);
     },
 
-    onStoreUpdate(index) {
+    onDashboardStoreUpdate(index) {
         this.setState({
             isCurrent: index === this.props.dashboard.index
         });

src/core/components/Mozaik.jsx

@@ -1,25 +1,42 @@
 var React            = require('react');
+var Reflux           = require('reflux');
 var _                = require('lodash');
 var Dashboard        = require('./Dashboard.jsx');
 var Timer            = require('./Timer.jsx');
 var DashboardActions = require('./../actions/DashboardActions');
+var ConfigStore      = require('./../stores/ConfigStore');
 
 var Mozaik = React.createClass({
-    componentWillMount() {
-        DashboardActions.setDashboards(this.props.config.dashboards);
-        if (this.props.config.dashboards.length > 1) {
-            DashboardActions.startRotation();
+    mixins: [Reflux.ListenerMixin],
+
+    getInitialState() {
+        return {
+            config: null
         }
     },
 
+    componentWillMount() {
+        this.listenTo(ConfigStore, this.onConfigStoreUpdate);
+    },
+
+    onConfigStoreUpdate(config) {
+        this.setState({
+            config: config
+        });
+    },
+
     render() {
-        var dashboardNodes = _.map(this.props.config.dashboards, (dashboard, index) => {
-            return (<Dashboard key={index} dashboard={dashboard} />);
+        if (this.state.config === null) {
+            return null;
+        }
+
+        var dashboardNodes = _.map(this.state.config.dashboards, (dashboard, index) => {
+            return <Dashboard key={index} dashboard={dashboard} />;
         });
 
         var timerNode = null;
-        if (this.props.config.dashboards.length > 1) {
-            timerNode = (<Timer />);
+        if (this.state.config.dashboards.length > 1) {
+            timerNode = <Timer />;
         }
 
         return (

src/core/stores/ConfigStore.js

@@ -0,0 +1,22 @@
+var Reflux           = require('reflux');
+var ConfigActions    = require('./../actions/ConfigActions');
+var DashboardActions = require('./../actions/DashboardActions');
+var request          = require('superagent');
+
+var ConfigStore = Reflux.createStore({
+    listenables: ConfigActions,
+
+    loadConfig() {
+        request.get('/config')
+            .end((err, res) => {
+                var config = res.body;
+
+                this.trigger(res.body);
+
+                DashboardActions.setDashboards(config.dashboards);
+            })
+        ;
+    }
+});
+
+module.exports = ConfigStore;