Add External Slot

plugins/talk-plugin-auth/client/login/components/External.css

@@ -0,0 +1,8 @@
+.external {
+    margin-bottom: 20px;
+}
+
+.separator h1{
+    text-align: center;
+    font-size: 1.2em;
+}

plugins/talk-plugin-auth/client/login/components/External.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import t from 'coral-framework/services/i18n';
+import styles from './External.css';
+import { Slot } from 'plugin-api/beta/client/components';
+import { IfSlotIsNotEmpty } from 'plugin-api/beta/client/components';
+
+const External = slot => (
+  <div>
+    <IfSlotIsNotEmpty slot={slot}>
+      <div className={styles.external}>
+        <Slot fill={slot} />
+      </div>
+      <div className={styles.separator}>
+        <h1>{t('sign_in.or')}</h1>
+      </div>
+    </IfSlotIsNotEmpty>
+  </div>
+);
+
+export default External;

plugins/talk-plugin-auth/client/login/components/SignIn.css

@@ -2,16 +2,7 @@
     margin-bottom: 20px;
 }
 
-.header h1, .separator h1{
-    text-align: center;
-    font-size: 1.2em;
-}
-
-.socialConnections {
-    margin-bottom: 20px;
-}
-
-.separator h1{
+.header h1 {
     text-align: center;
     font-size: 1.2em;
 }

plugins/talk-plugin-auth/client/login/components/SignIn.js

@@ -10,6 +10,7 @@ import styles from './SignIn.css';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 import Recaptcha from 'coral-framework/components/Recaptcha';
+import External from './External';
 
 class SignIn extends React.Component {
   recaptcha = null;
@@ -55,12 +56,7 @@ class SignIn extends React.Component {
         </div>
         {errorMessage && <Alert>{errorMessage}</Alert>}
         <div>
-          <div className={cn(styles.socialConnections, 'social-connections')}>
-            Social
-          </div>
-          <div className={styles.separator}>
-            <h1>{t('sign_in.or')}</h1>
-          </div>
+          <External slot="authExternalSignIn" />
           <form onSubmit={this.handleSubmit}>
             <TextField
               id="email"

plugins/talk-plugin-auth/client/login/components/SignUp.css

@@ -2,16 +2,7 @@
     margin-bottom: 20px;
 }
 
-.header h1, .separator h1{
-    text-align: center;
-    font-size: 1.2em;
-}
-
-.socialConnections {
-    margin-bottom: 20px;
-}
-
-.separator h1{
+.header h1 {
     text-align: center;
     font-size: 1.2em;
 }

plugins/talk-plugin-auth/client/login/components/SignUp.js

@@ -9,6 +9,7 @@ import {
 } from 'plugin-api/beta/client/components/ui';
 import t from 'coral-framework/services/i18n';
 import styles from './SignUp.css';
+import External from './External';
 
 class SignUp extends React.Component {
   handleSignInLink = e => {
@@ -52,10 +53,7 @@ class SignUp extends React.Component {
         {errorMessage && <Alert>{errorMessage}</Alert>}
         {!success && (
           <div>
-            <div className={styles.socialConnections}>Social</div>
-            <div className={styles.separator}>
-              <h1>{t('sign_in.or')}</h1>
-            </div>
+            <External slot="authExternalSignUp" />
             <form onSubmit={this.handleSubmit}>
               <TextField
                 id="email"