u-fit/frontend/components/signup.js

import { Formik, Form } from 'formik'
import * as Yup from 'yup'
import { Mutation } from 'react-apollo'
import { adopt } from 'react-adopt'

import { TextInput } from '../lib/forms'
import { USER_SIGNUP, CURRENT_USER } from '../lib/graphql'

const SignupAdoption = adopt({
  mutation: ({ render }) => (
    <Mutation
      mutation={USER_SIGNUP}
      refetchQueries={[{ query: CURRENT_USER }]}
    >{(signup, { data, error, loading }) => render({ signup, data, error, loading, render })}
    </Mutation>
  ),
  form: ({ mutation, render }) => (
    <Formik
      initialValues={{
        name: 'Tomi',
        email: 'tomi@cvetic.ch',
        password: '1234',
        passwordAgain: '1234'
      }}
      validationSchema={Yup.object({
        name: Yup.string()
          .required('Required')
          .max(40, 'Must be 40 characters or less'),
        email: Yup.string()
          .email('Invalid email address')
          .required('Required'),
        password: Yup.string()
          .min(4, 'Must have at least 8 characters'),
        passwordAgain: Yup.string()
          .oneOf([Yup.ref('password'), null], 'Passwords must match')
      })}
      onSubmit={async values => {
        try {
          const user = await mutation({ variables: values })
          console.log(user)
        } catch (error) {
          console.log(error)
        }
      }}
    >
      {render}
    </Formik>
  )
})

const SignupForm = props => (
  <SignupAdoption>
    {({ form, mutation }) => (
      <Form>
        <TextInput
          label='Name'
          name='name'
          type='text'
          placeholder='Name'
        />
        <TextInput
          label='Email'
          name='email'
          type='email'
          placeholder='Email Address'
        />
        <TextInput
          label='Password'
          name='password'
          type='password'
          placeholder='1234'
        />
        <TextInput
          label='Repeat password'
          name='passwordAgain'
          type='password'
          placeholder='1234'
        />
        <button type='submit'>Sign Up!</button>

        <style jsx>
          {`
            select, input {
              color: rgba(0,0,127,1);
            }

            .error {
              font-size: 12px;
              color: rgba(127,0,0,1);
              width: 400px;
              margin-top: 0.25rem;
            }

            .error:before {
              content: "❌ ";
              font-size: 10px;
            }

            label {
              color: red;
              margin-top: 1rem;
            }
          `}
        </style>
      </Form>
    )}
  </SignupAdoption>
)

export default SignupForm