Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react'
- import { withRouter, Link } from 'react-router-dom'
- import { graphql, compose } from 'react-apollo'
- import { withFormik } from 'formik'
- import Yup from 'yup'
- import FormWideError from '../elements/form/FormWideError'
- import TextInput from '../elements/form/TextInput'
- import Button from '../elements/form/Button'
- import { H2 } from '../elements/text/Headings'
- import Wrapper from '../elements/layout/Wrapper'
- import CurrentUser from '../queries/CurrentUser'
- import signinUser from '../mutations/signinUser'
- const handleSubmit = (payload, { props, setSubmitting, setErrors }) => {
- const {email, password} = payload
- props.signinUser({ variables: { email, password } })
- .then((response) => {
- window.localStorage.setItem('graphcoolToken', response.data.signinUser.token)
- props.data.refetch()
- props.history.push('/')
- }, (e) => {
- const errors = e.graphQLErrors.map(error => error.message)
- console.log(errors)
- setSubmitting(false)
- setErrors({ email: ' ', password: ' ', form: errors })
- })
- }
- const LoginForm = ({
- handleSubmit,
- errors,
- touched,
- values,
- handleChange,
- handleBlur,
- isSubmitting
- }) =>
- <Wrapper>
- <H2>Sign In</H2>
- <FormWideError error={errors.form} />
- <form onSubmit={handleSubmit}>
- <TextInput
- id='email'
- type='email'
- label='Email'
- placeholder='you@yourdomain.com'
- error={errors.email && touched.email && errors.email}
- value={values.email}
- onChange={handleChange}
- onBlur={handleBlur}
- />
- <TextInput
- id='password'
- type='password'
- label='Password'
- placeholder=''
- error={errors.password && touched.password && errors.password}
- value={values.password}
- onChange={handleChange}
- onBlur={handleBlur}
- />
- <Button
- primary
- type='submit'
- disabled={
- isSubmitting ||
- !!(errors.email && touched.email) ||
- !!(errors.password && touched.password)
- }
- >
- Sign In
- </Button>
- </form>
- </Wrapper>
- const LoginFormWithGraphQL = compose(
- graphql(signinUser, {name: 'signinUser'}),
- graphql(CurrentUser, { options: { fetchPolicy: 'network-only' } }),
- withFormik({
- validationSchema: Yup.object().shape({
- email: Yup.string()
- .email('Invalid email address')
- .required('Email is required'),
- password: Yup.string()
- .required('Password is required')
- }),
- mapPropsToValues: ({ variables }) => ({
- ...variables
- }),
- handleSubmit: handleSubmit,
- displayName: 'Login'
- })
- )(LoginForm)
- const LoginFormWithRouter = withRouter(LoginFormWithGraphQL)
- class Login extends React.Component {
- componentWillUpdate (nextProps) {
- if (!this.props.data.user && nextProps.data.user) {
- this.props.history.push('/dashboard')
- }
- }
- render () {
- if (this.props.data.loading) {
- return (<div></div>)
- }
- return (
- <div>
- <LoginFormWithRouter variables={{ email: '', password: '' }} />
- <p>Need an account? <Link to="/signup">Create one now</Link></p>
- </div>
- )
- }
- }
- // Set network fetch policy to network only for security reasons
- export default graphql(CurrentUser, { options: { fetchPolicy: 'network-only' } })(withRouter(Login))
Add Comment
Please, Sign In to add comment