Implement facebook auth client

plugins.default.json

@@ -8,6 +8,7 @@
   ],
   "client": [
     "talk-plugin-auth",
+    "talk-plugin-facebook-auth",
     "talk-plugin-author-menu",
     "talk-plugin-comment-content",
     "talk-plugin-featured-comments",

plugins/talk-plugin-facebook-auth/client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}

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

@@ -0,0 +1,7 @@
+export const loginWithFacebook = () => (dispatch, _, { rest }) => {
+  window.open(
+    `${rest.uri}/auth/facebook`,
+    'Continue with Facebook',
+    'menubar=0,resizable=0,width=500,height=500,top=200,left=500'
+  );
+};

plugins/talk-plugin-facebook-auth/client/components/FacebookButton.css

@@ -0,0 +1,13 @@
+.button {
+  background-color: #4267b2;
+  border-color: #4267b2;
+  color: rgb(255, 255, 255);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+
+.button:hover {
+  background-color: #365899;
+  border-color: #365899;
+}

plugins/talk-plugin-facebook-auth/client/components/FacebookButton.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BareButton } from 'plugin-api/beta/client/components/ui';
+import styles from './FacebookButton.css';
+
+export default ({ onClick, children }) => {
+  return (
+    <BareButton className={styles.button} onClick={onClick}>
+      {children}
+    </BareButton>
+  );
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import FacebookButton from '../containers/FacebookButton';
+import { t } from 'plugin-api/beta/client/services';
+
+export default () => {
+  return (
+    <FacebookButton>{t('talk-plugin-facebook-auth.sign_in')}</FacebookButton>
+  );
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import FacebookButton from '../containers/FacebookButton';
+import { t } from 'plugin-api/beta/client/services';
+
+export default () => {
+  return (
+    <FacebookButton>{t('talk-plugin-facebook-auth.sign_up')}</FacebookButton>
+  );
+};

plugins/talk-plugin-facebook-auth/client/containers/FacebookButton.js

@@ -0,0 +1,9 @@
+import { connect } from 'plugin-api/beta/client/hocs';
+import { bindActionCreators } from 'redux';
+import { loginWithFacebook } from '../actions';
+import FacebookButton from '../components/FacebookButton';
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ onClick: loginWithFacebook }, dispatch);
+
+export default connect(null, mapDispatchToProps)(FacebookButton);

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

@@ -0,0 +1,11 @@
+import SignIn from './components/SignIn';
+import SignUp from './components/SignUp';
+import translations from './translations.yml';
+
+export default {
+  translations,
+  slots: {
+    authExternalSignIn: [SignIn],
+    authExternalSignUp: [SignUp],
+  },
+};

plugins/talk-plugin-facebook-auth/client/translations.yml

@@ -0,0 +1,20 @@
+en:
+  talk-plugin-facebook-auth:
+    sign_in: "Sign in with Facebook"
+    sign_up: "Sign up with Facebook"
+es:
+  talk-plugin-facebook-auth:
+    facebook_sign_in: "Entrar con Facebook"
+    facebook_sign_up: "Registrarse con Facebook"
+fr:
+  talk-plugin-facebook-auth:
+    facebook_sign_in: "Connectez-vous avec Facebook"
+    facebook_sign_up: "Inscrivez-vous avec Facebook"
+zh_CN:
+  talk-plugin-facebook-auth:
+    facebook_sign_in: "使用 Facebook 帐号"
+    facebook_sign_up: "使用 Facebook 帐号"
+zh_TW:
+  talk-plugin-facebook-auth:
+    facebook_sign_in: "使用 Facebook 帳號"
+    facebook_sign_up: "使用 Facebook 帳號"