Added new pageData action/reducer

client/coral-admin/src/actions/pageData.js

@@ -0,0 +1,7 @@
+export const PAGE_DATA_UPDATED = 'PAGE_DATA_UPDATED';
+
+export const fetchPageData = () => dispatch => {
+  let json = document.getElementById('data');
+  let data = JSON.parse(json.textContent);
+  dispatch({type: PAGE_DATA_UPDATED, data});
+};

client/coral-admin/src/components/AdminLogin.js

@@ -34,7 +34,7 @@ class AdminLogin extends React.Component {
   }
 
   render () {
-    const {errorMessage, loginMaxExceeded} = this.props;
+    const {errorMessage, loginMaxExceeded, recaptchaPublic} = this.props;
     const signInForm = (
       <form onSubmit={this.handleSignIn}>
         {errorMessage && <Alert>{lang.t(`errors.${errorMessage}`)}</Alert>}
@@ -62,7 +62,7 @@ class AdminLogin extends React.Component {
         {
           loginMaxExceeded &&
           <Recaptcha
-            sitekey={process.env.TALK_RECAPTCHA_PUBLIC}
+            sitekey={recaptchaPublic}
             render='explicit'
             theme='dark'
             onloadCallback={this.onRecaptchaLoad}
@@ -106,7 +106,8 @@ AdminLogin.propTypes = {
   loginMaxExceeded: PropTypes.bool.isRequired,
   handleLogin: PropTypes.func.isRequired,
   passwordRequestSuccess: PropTypes.string,
-  loginError: PropTypes.string
+  loginError: PropTypes.string,
+  recaptchaPublic: PropTypes.string
 };
 
 export default AdminLogin;

client/coral-admin/src/containers/LayoutContainer.js

@@ -2,13 +2,16 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import Layout from '../components/ui/Layout';
 import {checkLogin, handleLogin, logout, requestPasswordReset} from '../actions/auth';
+import {fetchPageData} from '../actions/pageData';
 import {FullLoading} from '../components/FullLoading';
 import AdminLogin from '../components/AdminLogin';
 
 class LayoutContainer extends Component {
   componentWillMount () {
-    const {checkLogin} = this.props;
+    const {checkLogin, fetchPageData} = this.props;
+
     checkLogin();
+    fetchPageData();
   }
   render () {
     const {
@@ -19,6 +22,11 @@ class LayoutContainer extends Component {
       loginMaxExceeded,
       passwordRequestSuccess
     } = this.props.auth;
+
+    const {
+      TALK_RECAPTCHA_PUBLIC
+    } = this.props;
+
     const {handleLogout} = this.props;
     if (loadingUser) { return <FullLoading />; }
     if (!isAdmin) {
@@ -27,6 +35,7 @@ class LayoutContainer extends Component {
         handleLogin={this.props.handleLogin}
         requestPasswordReset={this.props.requestPasswordReset}
         passwordRequestSuccess={passwordRequestSuccess}
+        recaptchaPublic={TALK_RECAPTCHA_PUBLIC}
         errorMessage={loginError} />;
     }
     if (isAdmin && loggedIn) { return <Layout handleLogout={handleLogout} {...this.props} />; }
@@ -35,11 +44,13 @@ class LayoutContainer extends Component {
 }
 
 const mapStateToProps = state => ({
-  auth: state.auth.toJS()
+  auth: state.auth.toJS(),
+  TALK_RECAPTCHA_PUBLIC: state.pageData.get('data').get('TALK_RECAPTCHA_PUBLIC', null)
 });
 
 const mapDispatchToProps = dispatch => ({
   checkLogin: () => dispatch(checkLogin()),
+  fetchPageData: () => dispatch(fetchPageData()),
   handleLogin: (username, password, recaptchaResponse) => dispatch(handleLogin(username, password, recaptchaResponse)),
   requestPasswordReset: email => dispatch(requestPasswordReset(email)),
   handleLogout: () => dispatch(logout())

client/coral-admin/src/reducers/index.js

@@ -4,6 +4,7 @@ import settings from './settings';
 import community from './community';
 import moderation from './moderation';
 import install from './install';
+import pageData from './pageData';
 
 export default {
   auth,
@@ -11,5 +12,6 @@ export default {
   settings,
   community,
   moderation,
-  install
+  install,
+  pageData
 };

client/coral-admin/src/reducers/pageData.js

@@ -0,0 +1,16 @@
+import {Map} from 'immutable';
+
+import * as actions from '../actions/pageData';
+
+const initialState = Map({
+  data: Map({})
+});
+
+export default function pageData (state = initialState, action) {
+  switch (action.type) {
+  case actions.PAGE_DATA_UPDATED:
+    return state.set('data', Map(action.data));
+  default:
+    return state;
+  }
+}

routes/admin/index.js

@@ -16,7 +16,11 @@ router.get('/password-reset', (req, res) => {
 });
 
 router.get('*', (req, res) => {
-  res.render('admin', {basePath: '/client/coral-admin'});
+  const data = {
+    TALK_RECAPTCHA_PUBLIC: process.env.TALK_RECAPTCHA_PUBLIC
+  };
+
+  res.render('admin', {basePath: '/client/coral-admin', data});
 });
 
 module.exports = router;

routes/embed/index.js

@@ -7,7 +7,11 @@ router.use('/:embed', (req, res, next) => {
   case 'stream':
     return SettingsService.retrieve()
       .then(({customCssUrl}) => {
-        return res.render('embed/stream', {customCssUrl});
+        const data = {
+          TALK_RECAPTCHA_PUBLIC: process.env.TALK_RECAPTCHA_PUBLIC
+        };
+
+        return res.render('embed/stream', {customCssUrl, data});
       });
   default:
 

views/admin.ejs

@@ -82,6 +82,9 @@
       }
 
     </style>
+    <% if (data != null) { %>
+      <script id="data" type="application/json"><%- JSON.stringify(data) %></script>
+    <% } %>
   </head>
   <body>
     <div id="root"></div>

views/embed/stream.ejs

@@ -8,9 +8,17 @@
     <% if (locals.customCssUrl) { %>
       <link href="<%= customCssUrl %>" rel="stylesheet" type="text/css">
     <% } %>
+    <% if (data != null) { %>
+      <script id="data" type="application/json"><%- JSON.stringify(data) %></script>
+    <% } %>
   </head>
   <body>
+
     <div id="coralStream"></div>
-    <script src="/client/embed/stream/bundle.js"></script>
+    <%# <script src="/client/embed/stream/bundle.js"></script> %>
+    <script type="text/javascript">
+      let json = document.getElementById('data');
+      let myObject = JSON.parse(json.textContent);
+    </script>
   </body>
 </html>

webpack.config.js

@@ -118,9 +118,6 @@ module.exports = {
       'process.env': {
         'VERSION': `"${require('./package.json').version}"`
       }
-    }),
-    new webpack.EnvironmentPlugin({
-      TALK_RECAPTCHA_PUBLIC: JSON.stringify(process.env.TALK_RECAPTCHA_PUBLIC)
     })
   ],
   resolve: {