add oauth flows, profile, logout page, and index page

imports/ui/components/Authenticated/Authenticated.js

@@ -8,7 +8,7 @@ const Authenticated = ({ loggingIn, authenticated, component, ...rest }) => (
       if (loggingIn) return <div />;
       return authenticated ?
       (React.createElement(component, { ...props, loggingIn, authenticated })) :
-      (<Redirect to="/login" />);
+      (<Redirect to="/logout" />);
     }}
   />
 );

imports/ui/components/DocumentEditor/DocumentEditor.js

@@ -86,7 +86,7 @@ class DocumentEditor extends React.Component {
 }
 
 DocumentEditor.defaultProps = {
-  doc: PropTypes.object,
+  doc: { title: '', body: '' },
 };
 
 DocumentEditor.propTypes = {

imports/ui/components/Navigation/Navigation.js

@@ -7,7 +7,7 @@ import AuthenticatedNavigation from '../AuthenticatedNavigation/AuthenticatedNav
 
 import './Navigation.scss';
 
-const Navigation = ({ authenticated, name }) => (
+const Navigation = props => (
   <Navbar>
     <Navbar.Header>
       <Navbar.Brand>
@@ -16,18 +16,17 @@ const Navigation = ({ authenticated, name }) => (
       <Navbar.Toggle />
     </Navbar.Header>
     <Navbar.Collapse>
-      {!authenticated ? <PublicNavigation /> : <AuthenticatedNavigation name={name} />}
+      {!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
     </Navbar.Collapse>
   </Navbar>
 );
 
 Navigation.defaultProps = {
-  name: PropTypes.string,
+  name: '',
 };
 
 Navigation.propTypes = {
   authenticated: PropTypes.bool.isRequired,
-  name: PropTypes.string,
 };
 
 export default Navigation;

imports/ui/components/OAuthLoginButton/OAuthLoginButton.js

@@ -5,58 +5,54 @@ import { Bert } from 'meteor/themeteorchef:bert';
 
 import './OAuthLoginButton.scss';
 
-const handleLogin = (service, options, callback) => {
-  const defaultOptions = {
+const handleLogin = (service, callback) => {
+  const options = {
     facebook: {
       requestPermissions: ['email'],
-      loginStyle: 'redirect',
+      loginStyle: 'popup',
+    },
+    github: {
+      requestPermissions: ['user:email'],
+      loginStyle: 'popup',
     },
     google: {
       requestPermissions: ['email'],
       requestOfflineToken: true,
-      loginStyle: 'redirect',
-    },
-    github: {
-      requestPermissions: ['user:email'],
-      loginStyle: 'redirect',
+      loginStyle: 'popup',
     },
   }[service];
 
-  const defaultCallback = (error) => {
-    if (error) Bert.alert(error.reason, 'danger');
-  };
-
   return {
     facebook: Meteor.loginWithFacebook,
-    google: Meteor.loginWithGoogle,
     github: Meteor.loginWithGithub,
-  }[service](options || defaultOptions, callback || defaultCallback);
+    google: Meteor.loginWithGoogle,
+  }[service](options, callback);
 };
 
 const serviceLabel = {
   facebook: <span><i className="fa fa-facebook" /> Log In with Facebook</span>,
-  google: <span><i className="fa fa-google" /> Log In with Google</span>,
   github: <span><i className="fa fa-github" /> Log In with GitHub</span>,
+  google: <span><i className="fa fa-google" /> Log In with Google</span>,
 };
 
-const OAuthLoginButton = ({ service, options, callback }) => (
+const OAuthLoginButton = ({ service, callback }) => (
   <button
     className={`OAuthLoginButton OAuthLoginButton-${service}`}
     type="button"
-    onClick={() => handleLogin(service, options, callback)}
+    onClick={() => handleLogin(service, callback)}
   >
     {serviceLabel[service]}
   </button>
 );
 
 OAuthLoginButton.defaultProps = {
-  options: PropTypes.object,
-  callback: PropTypes.func,
+  callback: (error) => {
+    if (error) Bert.alert(error.message, 'danger');
+  },
 };
 
 OAuthLoginButton.propTypes = {
   service: PropTypes.string.isRequired,
-  options: PropTypes.object,
   callback: PropTypes.func,
 };
 

imports/ui/components/OAuthLoginButtons/OAuthLoginButtons.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Meteor } from 'meteor/meteor';
+import { createContainer } from 'meteor/react-meteor-data';
+import { ReactiveVar } from 'meteor/reactive-var';
+import OAuthLoginButton from '../OAuthLoginButton/OAuthLoginButton';
+
+import './OAuthLoginButtons.scss';
+
+const OAuthLoginButtons = ({ services, emailMessage }) => (services.length ? (
+  <div className={`OAuthLoginButtons ${emailMessage ? 'WithEmailMessage' : ''}`}>
+    {services.map(service => <OAuthLoginButton key={service} service={service} />)}
+    {emailMessage ? <p className="EmailMessage" style={{ marginLeft: `-${emailMessage.offset}px` }}>
+      {emailMessage.text}
+    </p> : ''}
+  </div>
+) : <div />);
+
+OAuthLoginButtons.propTypes = {
+  services: PropTypes.array.isRequired,
+  emailMessage: PropTypes.object.isRequired,
+};
+
+const verificationComplete = new ReactiveVar(false);
+const verifiedServices = new ReactiveVar([]);
+
+export default createContainer(({ services }) => {
+  if (!verificationComplete.get()) {
+    Meteor.call('oauth.verifyConfiguration', services, (error, response) => {
+      if (error) {
+        console.warn(error);
+      } else {
+        verifiedServices.set(response);
+        verificationComplete.set(true);
+      }
+    });
+  }
+
+  return {
+    services: verifiedServices.get(),
+  };
+}, OAuthLoginButtons);

imports/ui/components/OAuthLoginButtons/OAuthLoginButtons.scss

@@ -0,0 +1,20 @@
+@import '../../stylesheets/colors';
+
+.OAuthLoginButtons {
+  margin-bottom: 25px;
+
+  &.WithEmailMessage {
+    position: relative;
+    border-bottom: 1px solid $gray-lighter;
+    padding-bottom: 30px;
+
+    .EmailMessage {
+      display: inline-block;
+      background: #fff;
+      padding: 0 10px;
+      position: absolute;
+      bottom: -19px;
+      left: 50%;
+    }
+  }
+}