Working mutation on AuthSignUp

react/components/AuthFormContainer/index.js

@@ -14,16 +14,14 @@ const Container = styled.form`
   margin: 0 auto;
 `;
 
-const AuthInput = styled(Input)`
-  margin: 1.5em 0;
-`;
+const AuthInput = styled(Input).attrs({
+  px: 5,
+  my: 25,
+})``;
 
-const Button = styled(GenericButton).attrs({ f: 2, type: 'submit' })`
-  margin: 0 auto;
-  padding-left: 2em;
-  padding-right: 2em;
-  color: ${x => x.theme.colors.gray.base};
-`;
+const Button = styled(GenericButton).attrs({
+  f: 3, type: 'submit', px: 7, mt: 20,
+})``;
 
 const ButtonContainer = styled.div`
   display: flex;
@@ -40,9 +38,8 @@ const ButtonCTA = styled.div`
   margin-top: 1em;
   text-align: center;
   font-family: ${x => x.theme.fonts.sans};
-  font-weight: bold;
   color: ${x => x.theme.colors.gray.base};
-  ${preset(fontSize, { f: 1 })}
+  font-size: ${x => x.theme.fontSizes[1]};
 
   a {
     text-decoration: underline;
@@ -68,17 +65,17 @@ const Mark = styled.div`
   }
 `;
 
-const Headline = styled(Text).attrs({ f: 6 })`
+const Headline = styled(Text).attrs({ f: 7 })`
   margin: 2em 0;
   text-align: center;
-  font-weight: bold;
 `;
 
 const Message = styled.div`
   display: flex;
-  padding-bottom: 2em;
   align-items: center;
   justify-content: center;
+  margin: 2em 0 1em;
+  font-weight: bold;
   font-family: ${x => x.theme.fonts.sans};
   ${preset(fontSize, { f: 1 })}
   color: ${x => (x.isError ? x.theme.colors.state.alert : 'inherit')};

react/components/AuthJoinForm/index.js

@@ -1,27 +1,189 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { graphql } from 'react-apollo';
+import axios from 'axios';
 
+import { Checkbox, Label } from 'react/components/UI/GenericInput';
 import AuthFormContainer from 'react/components/AuthFormContainer';
+import registrationMutation from 'react/components/AuthJoinForm/mutations/index';
+
+const { REDIRECT_TO } = require('sharify').data;
 
 class AuthJoinForm extends Component {
-  static propTypes = {}
+  static propTypes = {
+    register: PropTypes.func.isRequired,
+  }
+
+  state = {
+    mode: 'empty',
+    email: '',
+    first_name: '',
+    last_name: '',
+    password: '',
+    password_confirmation: '',
+    accept_terms: false,
+    receive_newsletter: false,
+    error: '',
+    buttonCopy: 'Join',
+  }
+
+  handleInput = fieldName => ({ target: { value: fieldValue } }) => {
+    this.setState({
+      [fieldName]: fieldValue,
+    });
+  }
+
+  handleCheckbox = fieldName => ({ target: { checked } }) => {
+    const mergedValues = { ...this.state, [fieldName]: checked };
+    const { accept_terms } = mergedValues;
+    this.setState({
+      mode: accept_terms ? 'submit' : 'resting',
+      [fieldName]: checked,
+    });
+  }
+
+  handleEmail = this.handleInput('email')
+  handleFirstName = this.handleInput('first_name')
+  handleLastName = this.handleInput('last_name')
+  handlePassword = this.handleInput('password')
+  handlePasswordConfirm = this.handleInput('password_confirmation')
+  handleAcceptTerms = this.handleCheckbox('accept_terms')
+  handleNewsletter = this.handleCheckbox('receive_newsletter')
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    const {
+      register,
+    } = this.props;
+
+    const {
+      mode,
+      email,
+      first_name,
+      last_name,
+      password,
+      password_confirmation,
+      accept_terms,
+      receive_newsletter,
+    } = this.state;
+
+    if (mode !== 'submit') return false;
+
+    this.setState({
+      mode: 'submitting',
+      buttonCopy: 'Registering...',
+    });
+
+    return register({
+      variables: {
+        email,
+        first_name,
+        last_name,
+        password,
+        accept_terms,
+        password_confirmation,
+        receive_newsletter,
+      },
+    })
+      .then(() =>
+        this.setState({
+          mode: 'submitted',
+          buttonCopy: 'Logging in...',
+        }))
+      .then(() => axios.post('/me/sign_in', { email, password }).then(() =>
+        this.setState({
+          mode: 'submitted',
+          buttonCopy: 'Redirecting...',
+        })))
+      .then(() => {
+        setTimeout(() => { window.location = REDIRECT_TO; }, 200);
+      })
+      .catch((err) => {
+        this.setState({
+          mode: 'submit',
+          buttonCopy: 'Join',
+          error: err.message.replace('GraphQL error:', ''),
+        });
+      });
+  }
 
   render() {
+    const {
+      mode,
+      email,
+      first_name,
+      last_name,
+      password,
+      password_confirmation,
+      accept_terms,
+      receive_newsletter,
+      error,
+      buttonCopy,
+    } = this.state;
+
     return (
-      <AuthFormContainer onDone={() => {}}>
+      <AuthFormContainer onDone={this.handleSubmit}>
         <AuthFormContainer.Headline>
           Are.na is a platform for thinking together.
         </AuthFormContainer.Headline>
-        <AuthFormContainer.Input placeholder="Email" tabIndex={0} />
-        <AuthFormContainer.Input placeholder="First name" />
-        <AuthFormContainer.Input placeholder="Last name" />
-        <AuthFormContainer.Input placeholder="Password" type="password" />
-        <AuthFormContainer.Input placeholder="Confirm password" type="password" />
-        <AuthFormContainer.Button>Join</AuthFormContainer.Button>
+        <AuthFormContainer.Input
+          placeholder="Email"
+          tabIndex={0}
+          onChange={this.handleEmail}
+          value={email}
+        />
+        <AuthFormContainer.Input
+          placeholder="First name"
+          onChange={this.handleFirstName}
+          value={first_name}
+        />
+        <AuthFormContainer.Input
+          placeholder="Last name"
+          onChange={this.handleLastName}
+          value={last_name}
+        />
+        <AuthFormContainer.Input
+          placeholder="Password"
+          type="password"
+          onChange={this.handlePassword}
+          value={password}
+        />
+        <AuthFormContainer.Input
+          placeholder="Confirm password"
+          type="password"
+          onChange={this.handlePasswordConfirm}
+          value={password_confirmation}
+        />
+        <Label>
+          <Checkbox
+            type="checkbox"
+            checked={accept_terms}
+            onChange={this.handleAcceptTerms}
+          />
+          Accept Are.na <a href="/terms" target="_blank">Terms</a> and <a href="/privacy" target="_blank">Privacy</a> conditions
+        </Label>
+        <Label>
+          <Checkbox
+            type="checkbox"
+            checked={receive_newsletter}
+            onChange={this.handleNewsletter}
+          />
+          Receive our monthly newsletter?
+        </Label>
+        <AuthFormContainer.Message isError={error.length > 0}>
+          {error}
+        </AuthFormContainer.Message>
+        <AuthFormContainer.Button
+          disabled={mode !== 'submit'}
+        >
+          {buttonCopy}
+        </AuthFormContainer.Button>
         <AuthFormContainer.ButtonCTA>Already a member? <Link to="/log_in">Log in</Link></AuthFormContainer.ButtonCTA>
       </AuthFormContainer>
     );
   }
 }
 
-export default AuthJoinForm;
+export default graphql(registrationMutation, { name: 'register' })(AuthJoinForm);

react/components/AuthJoinForm/mutations/index.js

@@ -0,0 +1,25 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  mutation registrationMutation(
+    $first_name: String!,
+    $last_name: String!,
+    $email: String!,
+    $password: String!,
+    $password_confirmation: String!,
+    $receive_newsletter: Boolean
+  ){
+    registration(input: {
+      first_name: $first_name,
+      last_name: $last_name,
+      email: $email,
+      password: $password,
+      password_confirmation: $password_confirmation,
+      receive_newsletter: $receive_newsletter
+    }) {
+      me {
+        id
+      }
+    }
+  }
+`;

react/components/AuthLoginForm/index.js

@@ -2,11 +2,15 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import { fontSize } from 'styled-system';
 import { Link } from 'react-router-dom';
+import { isEmail } from 'validator';
+import { pick } from 'underscore';
+import axios from 'axios';
 
 import { preset } from 'react/styles/functions';
-
 import AuthFormContainer from 'react/components/AuthFormContainer';
 
+const { REDIRECT_TO } = require('sharify').data;
+
 const PasswordInputContainer = styled.div`
   position: relative;
 
@@ -25,21 +29,83 @@ const PasswordInputContainer = styled.div`
 class AuthLoginForm extends Component {
   static propTypes = {}
 
+  state = {
+    mode: 'empty',
+    email: '',
+    password: '',
+    error: '',
+    buttonCopy: 'Log in',
+  }
+
+  handleInput = fieldName => ({ target: { value: fieldValue } }) => {
+    const mergedValues = Object.assign({}, this.state, { [fieldName]: fieldValue });
+    const canSubmit = isEmail(mergedValues.email) && mergedValues.password.length > 6;
+
+    this.setState({
+      mode: canSubmit ? 'submit' : 'resting',
+      [fieldName]: fieldValue,
+    });
+  }
+
+  handleEmail = this.handleInput('email')
+  handlePassword = this.handleInput('password')
+
   handleSubmit = (e) => {
     e.preventDefault();
-    console.log('submitting', e);
+
+    const authentication = pick(this.state, 'email', 'password');
+    const component = this;
+
+    this.setState({ buttonCopy: 'Logging in...', mode: 'submitting' });
+
+    axios.post('/me/sign_in', authentication).then(() => {
+      component.setState({
+        mode: 'submitted',
+        buttonCopy: 'Redirecting...',
+      });
+    }).then(() => {
+      setTimeout(() => { window.location = REDIRECT_TO; }, 200);
+    }).catch((err) => {
+      component.setState({
+        mode: 'resting',
+        error: err,
+      });
+    });
   }
 
   render() {
+    const {
+      mode, email, password, error, buttonCopy,
+    } = this.state;
+
     return (
       <AuthFormContainer onDone={this.handleSubmit}>
-        <AuthFormContainer.Input placeholder="Email" tabIndex={0} />
+        <AuthFormContainer.Input
+          placeholder="Email"
+          tabIndex={0}
+          onChange={this.handleEmail}
+          value={email}
+        />
         <PasswordInputContainer>
-          <AuthFormContainer.Input placeholder="Password" type="password" />
+          <AuthFormContainer.Input
+            placeholder="Password"
+            type="password"
+            onChange={this.handlePassword}
+            value={password}
+          />
           <Link to="/forgot">Forgot?</Link>
         </PasswordInputContainer>
-        <AuthFormContainer.Button>Log in</AuthFormContainer.Button>
-        <AuthFormContainer.ButtonCTA>Not a member? <Link to="/sign_up">Join</Link></AuthFormContainer.ButtonCTA>
+        <AuthFormContainer.Message isError={error.length > 0}>
+          {error}
+        </AuthFormContainer.Message>
+        <AuthFormContainer.Button
+          disabled={mode !== 'submit'}
+        >
+          {buttonCopy}
+        </AuthFormContainer.Button>
+        <AuthFormContainer.ButtonCTA>
+          Not a member? <Link to="/sign_up">Join</Link>
+        </AuthFormContainer.ButtonCTA>
       </AuthFormContainer>
     );
   }