[WIP] Feature/split login strategies

CONTRIBUTING.md

@@ -48,7 +48,7 @@ forked repo, check that it meets these guidelines:
 * Create a separate PR for each small feature or bug fix.
 * [Squash](http://stackoverflow.com/questions/5189560/squash-my-last-x-commits-together-using-git)
   your commits into one for each PR.
-* Run `yarn test` to make sure that your code style is OK and there are no any regression bugs. 
+* Run `yarn test` to make sure that your code style is OK and there are no any regression bugs.
 * When contributing to an opt-in feature, apply the `[feature/...]` tag as a prefix to your PR title
 
 #### Style Guide

docs/how-to-configure-text-editors.md

@@ -53,8 +53,8 @@ yarn add --dev eslint babel-eslint eslint-plugin-react stylelint
 
 ### SublimeText
 
-Install SublimeText packages  
-Easiest with [Package Control](https://packagecontrol.io/) and then "Package Control: Install Package" (Ctrl+Shift+P)  
+Install SublimeText packages
+Easiest with [Package Control](https://packagecontrol.io/) and then "Package Control: Install Package" (Ctrl+Shift+P)
 
 * [Babel](https://packagecontrol.io/packages/Babel)
 * [Sublime-linter](http://www.sublimelinter.com/en/latest/)

docs/recipes/how-to-integrate-react-intl.md

@@ -49,7 +49,7 @@ the [`defineMessages()`](https://github.com/yahoo/react-intl/wiki/API#definemess
 [`<FormattedDate>`](https://github.com/yahoo/react-intl/wiki/Components#formatteddate)
 [`<FormattedTime>`](https://github.com/yahoo/react-intl/wiki/Components#formattedtime)
 [`<FormattedRelative>`](https://github.com/yahoo/react-intl/wiki/Components#formattedrelative)
- 
+
 - For numbers and currencies:
 [`<FormattedNumber>`](https://github.com/yahoo/react-intl/wiki/Components#formattednumber)
 [`<FormattedPlural>`](https://github.com/yahoo/react-intl/wiki/Components#formattedplural)

package.json

@@ -32,6 +32,7 @@
     "normalize.css": "^5.0.0",
     "passport": "^0.3.2",
     "passport-facebook": "^2.1.1",
+    "passport-github2": "^0.1.10",
     "pretty-error": "^2.0.2",
     "query-string": "^4.3.1",
     "react": "^15.4.2",

src/components/LoginForm/Button.css

@@ -0,0 +1,44 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+.button {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 10px 16px;
+  width: 100%;
+  outline: 0;
+  border: 1px solid #373277;
+  border-radius: 0;
+  background: #373277;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  font-size: 18px;
+  line-height: 1.3333333;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: rgba(54, 50, 119, 0.8);
+}
+
+.button:focus {
+  border-color: #0074c2;
+  box-shadow: 0 0 8px rgba(0, 116, 194, 0.6);
+}
+
+.icon {
+  display: inline-block;
+  margin: -2px 12px -2px 0;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  fill: currentColor;
+}

src/components/LoginForm/LoginForm.css

@@ -0,0 +1,43 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+@import '../variables.css';
+@import '../LoginForm/Button.css';
+
+.formGroup {
+  margin-bottom: 15px;
+}
+
+.label {
+  display: inline-block;
+  margin-bottom: 5px;
+  max-width: 100%;
+  font-weight: 700;
+}
+
+.input {
+  display: block;
+  box-sizing: border-box;
+  padding: 10px 16px;
+  width: 100%;
+  height: 46px;
+  outline: 0;
+  border: 1px solid #ccc;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  color: #616161;
+  font-size: 18px;
+  line-height: 1.3333333;
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+
+.input:focus {
+  border-color: #0074c2;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
+}

src/components/LoginForm/LoginForm.js

@@ -0,0 +1,50 @@
+/* eslint-disable css-modules/no-undef-class */
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './LoginForm.css';
+
+function LoginForm() {
+  return (
+    <form method="post">
+      <div className={s.formGroup}>
+        <label className={s.label} htmlFor="usernameOrEmail">
+          Username or email address:
+        </label>
+        <input
+          className={s.input}
+          id="usernameOrEmail"
+          type="text"
+          name="usernameOrEmail"
+          autoFocus
+        />
+      </div>
+      <div className={s.formGroup}>
+        <label className={s.label} htmlFor="password">
+          Password:
+        </label>
+        <input
+          className={s.input}
+          id="password"
+          type="password"
+          name="password"
+        />
+      </div>
+      <div className={s.formGroup}>
+        <button className={s.button} type="submit">
+          Log in
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export default withStyles(s)(LoginForm);

src/components/LoginForm/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "LoginForm",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./LoginForm.js"
+}

src/components/LoginThirdParty/LoginThirdParty.css

@@ -0,0 +1,84 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+@import '../variables.css';
+@import '../LoginForm/Button.css';
+
+.facebook {
+  border-color: #3b5998;
+  background: #3b5998;
+  composes: button;
+}
+
+.facebook:hover {
+  background: #2d4373;
+}
+
+.google {
+  border-color: #dd4b39;
+  background: #dd4b39;
+  composes: button;
+}
+
+.google:hover {
+  background: #c23321;
+}
+
+.twitter {
+  border-color: #55acee;
+  background: #55acee;
+  composes: button;
+}
+
+.twitter:hover {
+  background: #2795e9;
+}
+
+.github {
+  border-color: #497e71;
+  background: #497e71;
+  composes: button;
+}
+
+.github:hover {
+  background: #257461;
+}
+
+.lineThrough {
+  position: relative;
+  z-index: 1;
+  display: block;
+  margin-bottom: 15px;
+  width: 100%;
+  color: #757575;
+  text-align: center;
+  font-size: 80%;
+}
+
+.lineThrough::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+  margin-top: -5px;
+  margin-left: -20px;
+  width: 40px;
+  height: 10px;
+  background-color: #fff;
+  content: '';
+}
+
+.lineThrough::after {
+  position: absolute;
+  top: 49%;
+  z-index: -2;
+  display: block;
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  content: '';
+}

src/components/LoginThirdParty/LoginThirdParty.js

@@ -0,0 +1,74 @@
+/* eslint-disable css-modules/no-unused-class */
+/* eslint-disable css-modules/no-undef-class */
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import fetch from '../../core/fetch';
+import LoginThirdPartyButton from './LoginThirdPartyButton';
+import s from '../LoginThirdParty/LoginThirdParty.css';
+
+async function getAuthData() {
+  const resp = await fetch('/graphql', {
+    method: 'post',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      query: '{auth{loginName,buttonClass,buttonText,routeTo,icon}}',
+    }),
+    credentials: 'include',
+  });
+
+  const { data } = await resp.json();
+  if (!data || !data.auth) throw new Error('can\'t load third party auth data');
+
+  return data;
+}
+
+class LoginThirdParty extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loginThirdParty: [],
+    };
+  }
+
+  componentDidMount() {
+    const stateSetter = this.setState.bind(this);
+    getAuthData().then((data) => {
+      stateSetter({
+        loginThirdParty: data.auth,
+      });
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.loginThirdParty.map(thirdPartyAuth => (
+          <LoginThirdPartyButton
+            className={s.formGroup}
+            linkClassName={s[thirdPartyAuth.buttonClass]}
+            iconClassName={s.icon}
+            thirdPartyAuth={thirdPartyAuth}
+            key={thirdPartyAuth.loginName}
+          />
+        ))}
+
+        { this.state.loginThirdParty.lenght >= 1 ? <strong className={s.lineThrough}>OR</strong> : '' }
+      </div>
+    );
+  }
+}
+
+export default withStyles(s)(LoginThirdParty);

src/components/LoginThirdParty/LoginThirdPartyButton.js

@@ -0,0 +1,50 @@
+/* eslint-disable css-modules/no-unused-class */
+/* eslint-disable css-modules/no-undef-class */
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import React, { PropTypes } from 'react';
+
+function LoginThirdPartyButton({
+  thirdPartyAuth,
+  linkClassName,
+  iconClassName,
+  ...props
+}) {
+  return (
+    <div {...props}>
+      <a className={linkClassName} href={thirdPartyAuth.routeTo}>
+        <svg
+          className={iconClassName}
+          width="30"
+          height="30"
+          viewBox="0 0 30 30"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d={thirdPartyAuth.icon} />
+        </svg>
+        <span>{thirdPartyAuth.buttonText}</span>
+      </a>
+    </div>
+  );
+}
+
+LoginThirdPartyButton.propTypes = {
+  linkClassName: PropTypes.string.isRequired,
+  iconClassName: PropTypes.string.isRequired,
+  thirdPartyAuth: PropTypes.shape({
+    loginName: PropTypes.string,
+    routeTo: PropTypes.string,
+    buttonClass: PropTypes.string,
+    icon: PropTypes.string,
+    buttonText: PropTypes.string,
+  }).isRequired,
+};
+
+export default LoginThirdPartyButton;