first pass at dumb god login (#54)

* first pass at SignIn

* style-ish

* more sign in gods

* add Register

* simple LogOut button

.storybook/config.js

@@ -5,6 +5,7 @@ import { configure, addDecorator } from '@storybook/react'
 import initFelaStorybook from './helpers/initFelaStorybook'
 import initFormStorybook from './helpers/initFormStorybook'
 import initMuiStorybook from './helpers/initMuiStorybook'
+import initIntlStorybook from './helpers/initIntlStorybook'
 
 function loadStories() {
   // add any topic stories here!
@@ -15,10 +16,12 @@ function loadStories() {
 const FelaProvider = initFelaStorybook()
 const FormProvider = initFormStorybook()
 const MuiProvider = initMuiStorybook()
+const IntlProvider = initIntlStorybook()
 
 // global decorators applied to all stories
 addDecorator(FelaProvider)
 addDecorator(FormProvider)
 addDecorator(MuiProvider)
+addDecorator(IntlProvider)
 
 configure(loadStories, module);

.storybook/helpers/initIntlStorybook.js

@@ -0,0 +1,12 @@
+/* global document */
+import React from 'react'
+import { IntlProvider } from 'react-intl'
+
+export default () =>
+  story => {
+    return (
+      <IntlProvider locale='en'>
+        {story()}
+      </IntlProvider>
+    );
+  }

agents/components/LogOut.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import FlatButton from 'material-ui/FlatButton'
+import { connect as connectFela } from 'react-fela'
+import { flow } from 'lodash'
+
+import styles from '../styles/LogOut'
+
+function LogOut (props) {
+  const { styles } = props
+  return (
+    <FlatButton
+      className={styles.container}
+      backgroundColor='#ddd'
+    >
+      Log Out
+    </FlatButton>
+  )
+}
+
+export default flow(
+  connectFela(styles)
+)(LogOut)

agents/components/Register.js

@@ -0,0 +1,133 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { connect as connectFela } from 'react-fela'
+import { Field, reduxForm as connectForm } from 'redux-form'
+import { map, flow } from 'lodash'
+import { TextField } from 'redux-form-material-ui'
+import FlatButton from 'material-ui/FlatButton'
+import RaisedButton from 'material-ui/RaisedButton'
+import FontIcon from 'material-ui/FontIcon'
+import { required, email, length, confirmation } from 'redux-form-validators'
+
+import styles from '../styles/Register'
+
+// https://blog.codinghorror.com/the-god-login/
+
+const remoteAuthenticationMethods = [
+  {
+    label: 'Google',
+    icon: 'fa fa-google',
+    backgroundColor: '#ffffff'
+  },
+  {
+    label: 'Facebook',
+    icon: 'fa fa-facebook',
+    backgroundColor: '#3b5998'
+  },
+  {
+    label: 'Twitter',
+    icon: 'fa fa-twitter',
+    backgroundColor: '#00bced'
+  },
+  {
+    label: 'GitHub',
+    icon: 'fa fa-github',
+    backgroundColor: '#6d6d6d'
+  }
+]
+
+function LocalAuthenticationForm (props) {
+  const { styles, handleSubmit } = props
+
+  return (
+    <form onSubmit={handleSubmit} className={styles.form}>
+      <Field
+        name='name'
+        floatingLabelText='Name'
+        fullWidth={true}
+        component={TextField}
+        validate={required()}
+      />
+      <Field
+        name='email'
+        type='email'
+        floatingLabelText='Email'
+        fullWidth={true}
+        component={TextField}
+        validate={email()}
+      />
+      <Field
+        name='password'
+        type='password'
+        floatingLabelText='Password'
+        fullWidth={true}
+        component={TextField}
+        validate={length({ min: 8 })}
+      />
+      <Field
+        name='passwordConfirm'
+        type='password'
+        floatingLabelText='Confirm Password'
+        fullWidth={true}
+        component={TextField}
+        validate={confirmation({ field: 'password', fieldLabel: 'Password' })}
+      />
+      <div className={styles.actions}>
+        <RaisedButton
+          label='Create new account'
+          primary={true}
+          className={styles.registerAction}
+        />
+        <FlatButton
+          label='Sign In'
+          className={styles.signInAction}
+        />
+      </div>
+    </form>
+  )
+}
+
+LocalAuthenticationForm = flow(
+  connectForm({
+    form: 'localAuthenticationForm'
+  })
+)(LocalAuthenticationForm)
+
+function Register (props) {
+  const { styles } = props
+  return (
+    <div className={styles.container}>
+      <p className={styles.intro}>
+        Hey, welcome to Cobuy!
+      </p>
+      <ul className={styles.remotes}>
+        {map(remoteAuthenticationMethods, method => (
+          <li
+            className={styles.remote}
+          >
+            <RaisedButton
+              label={method.label}
+              icon={<FontIcon className={method.icon} />}
+              backgroundColor={method.backgroundColor}
+              hoverColor={method.hoverColor}
+              fullWidth={true}
+            />
+          </li>
+        ))}
+      </ul>
+      <LocalAuthenticationForm
+        styles={styles}
+      />
+    </div>
+  )
+}
+
+Register.propTypes = {
+}
+
+Register.defaultProps = {
+}
+
+export default flow(
+  connectFela(styles)
+)(Register)

agents/components/SignIn.js

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { connect as connectFela } from 'react-fela'
+import { Field, reduxForm as connectForm } from 'redux-form'
+import { map, flow } from 'lodash'
+import { TextField } from 'redux-form-material-ui'
+import FlatButton from 'material-ui/FlatButton'
+import RaisedButton from 'material-ui/RaisedButton'
+import FontIcon from 'material-ui/FontIcon'
+
+import styles from '../styles/SignIn'
+
+// https://blog.codinghorror.com/the-god-login/
+
+const remoteAuthenticationMethods = [
+  {
+    label: 'Google',
+    icon: 'fa fa-google',
+    backgroundColor: '#ffffff'
+  },
+  {
+    label: 'Facebook',
+    icon: 'fa fa-facebook',
+    backgroundColor: '#3b5998'
+  },
+  {
+    label: 'Twitter',
+    icon: 'fa fa-twitter',
+    backgroundColor: '#00bced'
+  },
+  {
+    label: 'GitHub',
+    icon: 'fa fa-github',
+    backgroundColor: '#6d6d6d'
+  }
+]
+
+function LocalAuthenticationForm (props) {
+  const { styles, handleSubmit } = props
+
+  return (
+    <form onSubmit={handleSubmit} className={styles.form}>
+      <Field
+        name='email'
+        floatingLabelText='Email'
+        fullWidth={true}
+        component={TextField}
+      />
+      <Field
+        name='password'
+        type='password'
+        floatingLabelText='Password'
+        fullWidth={true}
+        component={TextField}
+      />
+      <div className={styles.actions}>
+        <RaisedButton
+          label='Sign In'
+          primary={true}
+          className={styles.signInAction}
+        />
+        <FlatButton
+          label='Create new account'
+          className={styles.registerAction}
+        />
+      </div>
+    </form>
+  )
+}
+
+LocalAuthenticationForm = flow(
+  connectForm({
+    form: 'localAuthenticationForm'
+  })
+)(LocalAuthenticationForm)
+
+function SignIn (props) {
+  const { styles } = props
+  return (
+    <div className={styles.container}>
+      <p className={styles.intro}>
+        Sign in with...
+      </p>
+      <ul className={styles.remotes}>
+        {map(remoteAuthenticationMethods, method => (
+          <li
+            className={styles.remote}
+          >
+            <RaisedButton
+              label={method.label}
+              icon={<FontIcon className={method.icon} />}
+              backgroundColor={method.backgroundColor}
+              hoverColor={method.hoverColor}
+              fullWidth={true}
+            />
+          </li>
+        ))}
+      </ul>
+      <LocalAuthenticationForm
+        styles={styles}
+      />
+    </div>
+  )
+}
+
+SignIn.propTypes = {
+}
+
+SignIn.defaultProps = {
+}
+
+export default flow(
+  connectFela(styles)
+)(SignIn)

agents/stories/LogOut.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import LogOut from '../components/LogOut'
+
+storiesOf('agents.LogOut', module)
+  .add('basic', () => (
+    <LogOut />
+  ))

agents/stories/Register.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import Register from '../components/Register'
+
+storiesOf('agents.Register', module)
+  .add('basic', () => (
+    <Register />
+  ))

agents/stories/SignIn.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { linkTo } from '@storybook/addon-links'
+
+import SignIn from '../components/SignIn'
+
+storiesOf('agents.SignIn', module)
+  .add('default', () => (
+    <SignIn />
+  ))

agents/stories/index.js

@@ -2,3 +2,6 @@ require('./Avatar')
 require('./Profile')
 require('./ProfileIcon')
 require('./MemberInvites')
+require('./SignIn')
+require('./Register')
+require('./LogOut')

agents/styles/LogOut.js

@@ -0,0 +1,3 @@
+export default {
+  container: () => ({})
+}

agents/styles/Register.js

@@ -0,0 +1,38 @@
+export default {
+  container: () => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  }),
+  intro: () => ({
+    textAlign: 'center',
+    fontSize: '2rem'
+  }),
+  remotes: () => ({
+    margin: 0,
+    padding: 0,
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  }),
+  remote: () => ({
+    margin: '0.25rem',
+    padding: 0,
+    width: '50%',
+    minWidth: '12rem',
+    listStyleType: 'none'
+  }),
+  form: () => ({
+    width: '50%',
+    minWidth: '3rem',
+    display: 'flex',
+    flexDirection: 'column'
+  }),
+  actions: () => ({
+    display: 'flex',
+    justifyContent: 'center'
+  }),
+  signInAction: () => ({}),
+  registerAction: () => ({}),
+}