Updated app flow to use external members data

no issue

- Wraps the react rendering initialisation in a function which is accessed by theme to render the members UI as needed
- Uses site logo and logged in member email for rendering

ghost/portal/src/App.js

@@ -2,10 +2,10 @@ import React from 'react';
 import './App.css';
 import ParentContainer from './components/ParentContainer';
 
-function App() {
+function App(props) {
   return (
     <div className="App">
-      <ParentContainer name="MembersJS" />
+      <ParentContainer name="MembersJS" data={props.data} />
     </div>
   );
 }

ghost/portal/src/components/ParentContainer.js

@@ -1,5 +1,4 @@
 import TriggerComponent from './TriggerComponent';
-import FrameComponent from './FrameComponent';
 import PopupMenuComponent from './PopupMenuComponent';
 const React = require("react");
 const PropTypes = require("prop-types");
@@ -16,16 +15,31 @@ export default class ParentContainer extends React.Component {
         };
     }
 
+    componentDidMount() {
+        console.log("Loaded Members Data", this.props.data);
+    }
+
     onTriggerToggle() {
+        let showPopup = !this.state.showPopup;
         this.setState({
-            showPopup: !this.state.showPopup
+            showPopup
+        }, () => {
+            setTimeout(() => {
+                if (showPopup) {
+                    // Trigger member signout method
+                    const querySelector = document.querySelectorAll('iframe')[0] && document.querySelectorAll('iframe')[0].contentWindow.document.body.querySelectorAll('[data-members-signout]')
+                    if (querySelector) {
+                        window.handleMembersSignout && window.handleMembersSignout(querySelector);
+                    }
+                }
+            }, 500 )
         });
     }
 
     renderPopupMenu() {
         if (this.state.showPopup) {
             return (
-                <PopupMenuComponent name={this.props.name} />
+                <PopupMenuComponent name={this.props.name} data={this.props.data} />
             );
         }
         return null;
@@ -33,7 +47,7 @@ export default class ParentContainer extends React.Component {
 
     renderTriggerComponent() {
         return (
-            <TriggerComponent name={this.props.name} onToggle= {(e) => this.onTriggerToggle()} isPopupOpen={this.state.showPopup} />
+            <TriggerComponent name={this.props.name} onToggle= {(e) => this.onTriggerToggle()} isPopupOpen={this.state.showPopup} data={this.props.data} />
         )
     }
 

ghost/portal/src/components/PopupMenuComponent.js

@@ -21,6 +21,7 @@ export default class PopupMenuComponent extends React.Component {
             height: 'calc(100% - 120px)',
             borderRadius: '8px',
             overflow: 'hidden',
+            backgroundColor: 'white'
         };
 
         const launcherStyle = {
@@ -43,6 +44,7 @@ export default class PopupMenuComponent extends React.Component {
             paddingBottom: '15px',
             textAlign: 'left'
         };
+        const memberEmail = (this.props.data && this.props.data.email) || "";
         return (
             <FrameComponent style={hoverStyle}>
                 <div style={launcherStyle}>
@@ -52,10 +54,10 @@ export default class PopupMenuComponent extends React.Component {
                                 SIGNED IN AS
                             </div>
                             <div style={{paddingLeft: '12px',paddingRight: '12px', paddingBottom: '9px'}}>
-                                rish@ghost.org
+                                {memberEmail}
                             </div>
                             <div style={{paddingLeft: '12px',paddingRight: '12px', paddingTop: '12px', borderTop: '1px solid black', cursor: 'pointer'}}>
-                                <div> Logout </div>
+                                <div data-members-signout> Logout </div>
                             </div>
                         </div>
                     </div>

ghost/portal/src/components/TriggerComponent.js

@@ -1,4 +1,3 @@
-import logo from '../logo.svg';
 import FrameComponent from './FrameComponent';
 import closeIcon from '../images/close.png';
 const React = require("react");
@@ -17,15 +16,19 @@ export default class TriggerComponent extends React.Component {
     renderTriggerIcon() {
         if (this.props.isPopupOpen) {
             return (
-                <img src={closeIcon} alt="logo" style={{ width: '45px', userSelect: 'none' }} />
+                <img src={closeIcon} alt="logo" style={{ height: '30px', userSelect: 'none' }} />
             )
         }
+
+        const siteLogo = (this.props.data && this.props.data.logo) || "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1280px-React-icon.svg.png";
+
         return (
-            <img src={logo} className="App-logo" alt="logo" style={{ width: '60px', userSelect: 'none' }} />
+            <img src={siteLogo} className="App-logo" alt="logo" style={{ height: '30px', userSelect: 'none' }} />
         )
     }
 
     render() {
+        const backgroundColor = this.props.isPopupOpen ? "#ada1a1" : "rgb(245, 228, 228)";
         const hoverStyle = {
             zIndex: '2147483000',
             position: 'fixed',
@@ -35,7 +38,7 @@ export default class TriggerComponent extends React.Component {
             height: '60px',
             boxShadow: 'rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px',
             borderRadius: '50%',
-            backgroundColor: '#e53935',
+            backgroundColor: backgroundColor,
             animation: '250ms ease 0s 1 normal none running animation-bhegco',
             transition: 'opacity 0.3s ease 0s',
         };
@@ -68,9 +71,10 @@ export default class TriggerComponent extends React.Component {
             transform: 'rotate(0deg) scale(1)',
             transition: 'transform 0.16s linear 0s, opacity 0.08s linear 0s',
         };
+
         return (
             <FrameComponent style={hoverStyle} title="membersjs-trigger">
-                <div style={launcherStyle} onClick={(e) => this.onToggle(e)}>
+                <div style={launcherStyle} onClick={(e) => this.onToggle(e)} id="membersjs-trigger-component">
                     <div style={buttonStyle}>
                         {this.renderTriggerIcon()}
                     </div>

ghost/portal/src/index.js

@@ -4,12 +4,19 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+function initMembersJS(data) {
+  ReactDOM.render(
+    <React.StrictMode>
+      <App data={data} />
+    </React.StrictMode>,
+    document.getElementById('root')
+  );
+}
+
+window.GhostMembers = {
+  initMembersJS: initMembersJS
+}
+
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.