Added support for external signins on Admin

client/coral-admin/src/components/External.css

@@ -0,0 +1,16 @@
+.external {
+  margin-bottom: 20px;
+}
+
+.separator h5 {
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.slot > * {
+margin-bottom: 8px;
+
+&:last-child {
+  margin-bottom: 0px;
+}
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './External.css';
+import Slot from 'coral-framework/components/Slot';
+import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
+
+const External = ({ slot }) => (
+  <IfSlotIsNotEmpty slot={slot}>
+    <div>
+      <div className={styles.external}>
+        <Slot fill={slot} className={styles.slot} />
+      </div>
+      <div className={styles.separator}>
+        <h5>Or</h5>
+      </div>
+    </div>
+  </IfSlotIsNotEmpty>
+);
+
+External.propTypes = {
+  slot: PropTypes.string.isRequired,
+};
+
+export default External;

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

@@ -4,6 +4,7 @@ import styles from './SignIn.css';
 import { Button, TextField, Alert } from 'coral-ui';
 import cn from 'classnames';
 import Recaptcha from 'coral-framework/components/Recaptcha';
+import External from './External';
 
 class SignIn extends React.Component {
   recaptcha = null;
@@ -33,48 +34,55 @@ class SignIn extends React.Component {
   render() {
     const { email, password, errorMessage, requireRecaptcha } = this.props;
     return (
-      <form className="talk-admin-login-sign-in" onSubmit={this.handleSubmit}>
-        {errorMessage && <Alert>{errorMessage}</Alert>}
-        <TextField
-          id="email"
-          label="Email Address"
-          value={email}
-          onChange={this.handleEmailChange}
-        />
-        <TextField
-          id="password"
-          label="Password"
-          value={password}
-          onChange={this.handlePasswordChange}
-          type="password"
-        />
-        {requireRecaptcha && (
-          <div className={styles.recaptcha}>
-            <Recaptcha
-              ref={this.handleRecaptchaRef}
-              onVerify={this.props.onRecaptchaVerify}
-            />
-          </div>
-        )}
-        <Button
-          className={cn(styles.signInButton, 'talk-admin-login-sign-in-button')}
-          type="submit"
-          cStyle="black"
-          full
-        >
-          Sign In
-        </Button>
-        <p className={styles.forgotPasswordCTA}>
-          Forgot your password?{' '}
-          <a
-            href="#"
-            className={styles.forgotPasswordLink}
-            onClick={this.handleForgotPasswordLink}
+      <div className="talk-admin-login-sign-in">
+        <External slot="authExternalSignIn" />
+        <form onSubmit={this.handleSubmit}>
+          {errorMessage && <Alert>{errorMessage}</Alert>}
+          <TextField
+            id="email"
+            label="Email Address"
+            value={email}
+            onChange={this.handleEmailChange}
+          />
+          <TextField
+            id="password"
+            label="Password"
+            value={password}
+            onChange={this.handlePasswordChange}
+            type="password"
+          />
+          {requireRecaptcha && (
+            <div className={styles.recaptcha}>
+              <Recaptcha
+                ref={this.handleRecaptchaRef}
+                onVerify={this.props.onRecaptchaVerify}
+              />
+            </div>
+          )}
+          <Button
+            className={cn(
+              styles.signInButton,
+              'talk-admin-login-sign-in-button'
+            )}
+            type="submit"
+            cStyle="black"
+            full
           >
-            Request a new one.
-          </a>
-        </p>
-      </form>
+            Sign In
+          </Button>
+          <p className={styles.forgotPasswordCTA}>
+            {/* TODO: translate */}
+            Forgot your password?{' '}
+            <a
+              href="#"
+              className={styles.forgotPasswordLink}
+              onClick={this.handleForgotPasswordLink}
+            >
+              Request a new one.
+            </a>
+          </p>
+        </form>
+      </div>
     );
   }
 }

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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withSignIn } from 'coral-framework/hocs';
+import { withSignIn, withPopupAuthHandler } from 'coral-framework/hocs';
 import { compose } from 'recompose';
 import SignIn from '../components/SignIn';
 
@@ -55,4 +55,4 @@ SignInContainer.propTypes = {
   requireRecaptcha: PropTypes.bool.isRequired,
 };
 
-export default compose(withSignIn)(SignInContainer);
+export default compose(withSignIn, withPopupAuthHandler)(SignInContainer);

client/coral-framework/services/postMessage.js

@@ -56,10 +56,10 @@ export function createPostMessage(origin, scope = 'client') {
       // Send the message.
       target.postMessage(msg, origin);
     },
-    subscribe: (handler, target = window) => {
+    subscribe(handler, target = window) {
       // If this handler is already attached to the target, detach it.
       if (has(listeners, [target, handler])) {
-        this.unsubscribeFromMessages(handler, target);
+        this.unsubscribe(handler, target);
       }
 
       // Wrap the listener with a origin check.
@@ -71,7 +71,7 @@ export function createPostMessage(origin, scope = 'client') {
       // Attach the listener to the target.
       target.addEventListener('message', listener);
     },
-    unsubscribe: (handler, target = window) => {
+    unsubscribe(handler, target = window) {
       if (!has(listeners, [target, handler])) {
         return;
       }

client/coral-framework/utils/index.js

@@ -273,3 +273,23 @@ export function translateError(error) {
   }
   return error.toString();
 }
+
+/**
+ * handlePopupAuth will optionally open a popup with the requested uri if the
+ * window is not already a popup.
+ *
+ * @param {String} uri the url to open the window? to
+ * @param {String} title the title of the new window? to open
+ * @param {String} features the features to use when opening a window?
+ */
+export function handlePopupAuth(
+  uri,
+  title = 'Login', // TODO: translate
+  features = 'menubar=0,resizable=0,width=500,height=550,top=200,left=500'
+) {
+  if (window.opener) {
+    window.location = uri;
+  } else {
+    window.open(uri, title, features);
+  }
+}

plugin-api/beta/client/utils/index.js

@@ -9,4 +9,5 @@ export {
   getDefinitionName,
   getShallowChanges,
   createDefaultResponseFragments,
+  handlePopupAuth,
 } from 'coral-framework/utils';

plugins/talk-plugin-facebook-auth/client/actions.js

@@ -1,3 +1,5 @@
+import { handlePopupAuth } from 'plugin-api/beta/client/utils';
+
 export const loginWithFacebook = () => (dispatch, _, { rest }) => {
-  window.location = `${rest.uri}/auth/facebook`;
+  handlePopupAuth(`${rest.uri}/auth/facebook`);
 };

plugins/talk-plugin-google-auth/client/actions.js

@@ -1,3 +1,5 @@
+import { handlePopupAuth } from 'plugin-api/beta/client/utils';
+
 export const loginWithGoogle = () => (dispatch, _, { rest }) => {
-  window.location = `${rest.uri}/auth/google`;
+  handlePopupAuth(`${rest.uri}/auth/google`);
 };