Return an object on Talk.render to control the embed

client/coral-embed-stream/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {render} from 'react-dom';
 import {ApolloProvider} from 'react-apollo';
 
-import {checkLogin} from 'coral-framework/actions/auth';
+import {checkLogin, handleAuthToken, logout} from 'coral-framework/actions/auth';
 import './graphql';
 import {addExternalConfig} from 'coral-embed-stream/src/actions/config';
 import {getStore, injectReducers, addListener} from 'coral-framework/services/store';
@@ -43,6 +43,17 @@ if (!window.opener) {
     pym.onMessage('config', (config) => {
       init(JSON.parse(config));
     });
+
+    pym.onMessage('login', (token) => {
+      if (token) {
+        store.dispatch(handleAuthToken(token));
+      }
+      store.dispatch(checkLogin());
+    });
+
+    pym.onMessage('logout', () => {
+      store.dispatch(logout());
+    });
   } else {
     init();
   }

client/coral-embed/src/index.js

@@ -5,8 +5,6 @@ import {buildUrl} from 'coral-framework/utils';
 import queryString from 'query-string';
 import EventEmitter from 'eventemitter2';
 
-const eventEmitter = new EventEmitter({wildcard: true});
-
 // TODO: Styles should live in a separate file
 const snackbarStyles = {
   position: 'fixed',
@@ -50,7 +48,7 @@ function buildStreamIframeUrl(talkBaseUrl, query) {
 
 // Set up postMessage listeners/handlers on the pymParent
 // e.g. to resize the iframe, and navigate the host page
-function configurePymParent(pymParent, opts) {
+function configurePymParent(pymParent, eventEmitter, opts) {
   let notificationOffset = 200;
   let cachedHeight;
   const snackbar = document.createElement('div');
@@ -203,6 +201,23 @@ function configurePymParent(pymParent, opts) {
  * @param {String} [opts.asset_url] - Asset URL
  * @param {String} [opts.asset_id] - Asset ID
  * @param {String} [opts.auth_token] - (optional) A jwt representing the session
+ * @return {Object}
+ *
+ * Example:
+ * ```
+ *   const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts);
+ *
+ *   // trigger a login with optional token.
+ *   embed.login(token);
+ *
+ *   // trigger a logout.
+ *   embed.logout();
+ *
+ *   // listen to events (in this case all events).
+ *   embed.on('**', function(value) {
+ *     console.log(this.event, value);
+ *   });
+ * ```
  */
 Talk.render = function(el, opts) {
   if (!el) {
@@ -256,14 +271,31 @@ Talk.render = function(el, opts) {
     }
   }
 
+  const pymParent = new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, query), {
+    title: opts.title,
+    id: `${el.id}_iframe`,
+    name: `${el.id}_iframe`
+  });
+
+  const eventEmitter = new EventEmitter({wildcard: true});
+
   configurePymParent(
-    new pym.Parent(el.id, buildStreamIframeUrl(opts.talk, query), {
-      title: opts.title,
-      id: `${el.id}_iframe`,
-      name: `${el.id}_iframe`
-    }),
+    pymParent,
+    eventEmitter,
     opts
   );
+
+  return {
+    on(eventName, callback) {
+      eventEmitter.on(eventName, callback);
+    },
+    login(token) {
+      pymParent.sendMessage('login', token);
+    },
+    logout() {
+      pymParent.sendMessage('logout');
+    }
+  };
 };
 
 export default Coral;

client/coral-framework/actions/auth.js

@@ -276,9 +276,7 @@ export const fetchForgotPassword = (email) => (dispatch, getState) => {
 
 export const logout = () => (dispatch) => {
   return coralApi('/auth', {method: 'DELETE'}).then(() => {
-    if (!bowser.safari && !bowser.ios) {
-      Storage.removeItem('token');
-    }
+    Storage.removeItem('token');
 
     // Reset the websocket.
     resetWebsocket();
@@ -306,9 +304,7 @@ export const checkLogin = () => (dispatch) => {
   coralApi('/auth')
     .then((result) => {
       if (!result.user) {
-        if (!bowser.safari && !bowser.ios) {
-          Storage.removeItem('token');
-        }
+        Storage.removeItem('token');
         throw new Error('Not logged in');
       }
 
@@ -325,6 +321,11 @@ export const checkLogin = () => (dispatch) => {
     })
     .catch((error) => {
       console.error(error);
+      if (error.status && error.status === 401) {
+
+        // Unauthorized.
+        Storage.removeItem('token');
+      }
       const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
       dispatch(checkLoginFailure(errorMessage));
     });

client/coral-framework/helpers/request.js

@@ -67,6 +67,7 @@ const handleResp = (res) => {
       }
 
       error.message = message;
+      error.status = res.status;
       throw error;
     });
   } else if (res.status === 204) {

views/article.ejs

@@ -26,7 +26,7 @@
     <p><a href="admin">Admin</a> - <a href="assets">All Assets</a></p>
     <div id='coralStreamEmbed'></div>
     <script src="embed.js" async onload="
-      Coral.Talk.render(document.getElementById('coralStreamEmbed'), {
+      window.TalkEmbed = Coral.Talk.render(document.getElementById('coralStreamEmbed'), {
         talk: '<%= BASE_URL %>',
         asset_url: '<%= asset_url ? asset_url : '' %>',
         asset_id: '<%= asset_id ? asset_id : '' %>',