Merge branch 'develop' of gitlab.coko.foundation:xpub/xpub-faraday into...

Merge branch 'develop' of gitlab.coko.foundation:xpub/xpub-faraday into HIN-1117-email-manuscript-title

packages/components-faraday/package.json

@@ -10,7 +10,7 @@
     "country-list": "^1.1.0",
     "moment": "^2.22.1",
     "prop-types": "^15.5.10",
-    "pubsweet-component-login": "^1.2.0",
+    "pubsweet-component-login": "^1.2.2",
     "react": "^16.4.2",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",

packages/components-faraday/src/components/Login/LoginPage.js

@@ -14,11 +14,12 @@ import {
   Text,
   Label,
   ActionLink,
+  withFetching,
 } from 'pubsweet-component-faraday-ui'
 
 const PasswordField = input => <TextField {...input} type="password" />
 
-const Login = ({ handleSubmit, loginError }) => (
+const Login = ({ handleSubmit, fetchingError }) => (
   <Root onSubmit={handleSubmit}>
     <CustomH2>Login</CustomH2>
     <Row mt={3}>
@@ -53,9 +54,9 @@ const Login = ({ handleSubmit, loginError }) => (
       LOG IN
     </Button>
 
-    {loginError && (
+    {fetchingError && (
       <Row justify="flex-start" mt={1}>
-        <Text error>{loginError}</Text>
+        <Text error>{fetchingError}</Text>
       </Row>
     )}
 
@@ -71,14 +72,10 @@ const Login = ({ handleSubmit, loginError }) => (
 )
 
 const LoginPage = compose(
-  connect(
-    state => ({
-      loginError: state.error,
-    }),
-    {
-      logoutUser,
-    },
-  ),
+  withFetching,
+  connect(null, {
+    logoutUser,
+  }),
   withProps({ passwordReset: true }),
   lifecycle({
     componentDidMount() {
@@ -89,9 +86,9 @@ const LoginPage = compose(
   reduxForm({
     form: 'login',
     enableReinitialize: false,
-    onSubmit: (values, dispatch, { location }) => {
+    onSubmit: (values, dispatch, { location, setError }) => {
       const redirectTo = get(location, 'state.from.pathname', '/dashboard')
-      dispatch(loginUser(values, redirectTo))
+      dispatch(loginUser(values, redirectTo, setError))
     },
   }),
 )(Login)

packages/pubsweet-component-login/CHANGELOG.md

-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-<a name="1.2.0"></a>
-# [1.2.0](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.18...pubsweet-component-login@1.2.0) (2018-11-05)
-
-
-### Features
-
-* GraphQL Login component ([70df3de](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/70df3de))
-* GraphQL Xpub submit component ([ba07060](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/ba07060))
-
-
-
-
-<a name="1.1.18"></a>
-## [1.1.18](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.17...pubsweet-component-login@1.1.18) (2018-10-08)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.17"></a>
-## [1.1.17](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.16...pubsweet-component-login@1.1.17) (2018-09-27)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.16"></a>
-## [1.1.16](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.15...pubsweet-component-login@1.1.16) (2018-09-19)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.15"></a>
-## [1.1.15](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.14...pubsweet-component-login@1.1.15) (2018-09-06)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.14"></a>
-## [1.1.14](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.13...pubsweet-component-login@1.1.14) (2018-09-04)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.13"></a>
-## [1.1.13](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.12...pubsweet-component-login@1.1.13) (2018-08-20)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.12"></a>
-## [1.1.12](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.11...pubsweet-component-login@1.1.12) (2018-08-17)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.11"></a>
-## [1.1.11](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.10...pubsweet-component-login@1.1.11) (2018-08-02)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.10"></a>
-## [1.1.10](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.9...pubsweet-component-login@1.1.10) (2018-07-27)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.9"></a>
-## [1.1.9](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.8...pubsweet-component-login@1.1.9) (2018-07-12)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.8"></a>
-## [1.1.8](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.7...pubsweet-component-login@1.1.8) (2018-07-09)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.7"></a>
-## [1.1.7](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.6...pubsweet-component-login@1.1.7) (2018-07-03)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.6"></a>
-## [1.1.6](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.5...pubsweet-component-login@1.1.6) (2018-07-02)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.5"></a>
-## [1.1.5](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.4...pubsweet-component-login@1.1.5) (2018-06-28)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.4"></a>
-## [1.1.4](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.3...pubsweet-component-login@1.1.4) (2018-06-28)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.3"></a>
-## [1.1.3](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.2...pubsweet-component-login@1.1.3) (2018-06-19)
-
-
-### Bug Fixes
-
-* **pubsweet-ui:** tests are failing ([0e57798](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/0e57798))
-
-
-
-
-<a name="1.1.2"></a>
-## [1.1.2](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.1...pubsweet-component-login@1.1.2) (2018-04-03)
-
-
-
-
-**Note:** Version bump only for package pubsweet-component-login
-
-<a name="1.1.1"></a>
-## [1.1.1](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.1.0...pubsweet-component-login@1.1.1) (2018-03-15)
-
-
-### Bug Fixes
-
-* **login:** add missing recompose dependency ([a3b5a80](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/a3b5a80)), closes [#353](https://gitlab.coko.foundation/pubsweet/pubsweet/issues/353)
-
-
-
-
-<a name="1.1.0"></a>
-# [1.1.0](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.0.1...pubsweet-component-login@1.1.0) (2018-03-05)
-
-
-### Bug Fixes
-
-* **components:** login example ([6dfd66c](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/6dfd66c))
-* **components:** login tests were failing after refactor ([62be047](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/62be047))
-* **components:** signup and login error examples ([3f991ec](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/3f991ec))
-
-
-### Features
-
-* **elife-theme:** add elife theme ([e406e0d](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/e406e0d))
-
-
-
-
-<a name="1.0.1"></a>
-
-## [1.0.1](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@1.0.0...pubsweet-component-login@1.0.1) (2018-02-08)
-
-### Bug Fixes
-
-* **components:** update react-router-redux version to match client ([3d257ef](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/3d257ef))
-
-<a name="1.0.0"></a>
-
-# [1.0.0](https://gitlab.coko.foundation/pubsweet/pubsweet/compare/pubsweet-component-login@0.6.0...pubsweet-component-login@1.0.0) (2018-02-02)
-
-### Features
-
-* **client:** upgrade React to version 16 ([626cf59](https://gitlab.coko.foundation/pubsweet/pubsweet/commit/626cf59)), closes [#65](https://gitlab.coko.foundation/pubsweet/pubsweet/issues/65)
-
-### BREAKING CHANGES
-
-* **client:** Upgrade React to version 16

packages/pubsweet-component-login/Login.jsx

-import React from 'react'
-import PropTypes from 'prop-types'
-import { Field } from 'formik'
-import { isEmpty } from 'lodash'
-import {
-  CenteredColumn,
-  ErrorText,
-  H1,
-  Link,
-  Button,
-  TextField,
-} from '@pubsweet/ui'
-import styled from 'styled-components'
-
-// These enable tests to select components
-const Signup = styled.div``
-const ResetPassword = styled.div``
-
-const UsernameInput = props => <TextField label="Username" {...props.field} />
-const PasswordInput = props => (
-  <TextField label="Password" {...props.field} type="password" />
-)
-
-const Login = ({
-  errors,
-  handleSubmit,
-  signup = true,
-  passwordReset = true,
-}) => (
-  <CenteredColumn small>
-    <H1>Login</H1>
-
-    {!isEmpty(errors) && <ErrorText>{errors}</ErrorText>}
-    <form onSubmit={handleSubmit}>
-      <Field component={UsernameInput} name="username" />
-      <Field component={PasswordInput} name="password" />
-      <Button primary type="submit">
-        Login
-      </Button>
-    </form>
-
-    {signup && (
-      <Signup>
-        <span>Don&apos;t have an account? </span>
-        <Link to="/signup">Sign up</Link>
-      </Signup>
-    )}
-
-    {passwordReset && (
-      <ResetPassword>
-        <span>Forgot your password? </span>
-        <Link to="/password-reset">Reset password</Link>
-      </ResetPassword>
-    )}
-  </CenteredColumn>
-)
-
-Login.propTypes = {
-  error: PropTypes.string,
-  actions: PropTypes.object,
-  location: PropTypes.object,
-  signup: PropTypes.bool,
-  passwordReset: PropTypes.bool,
-}
-
-// used by tests
-export { Login, ErrorText, Signup, ResetPassword }
-
-// used by consumers
-export default Login

packages/pubsweet-component-login/Login.md

-A login form
-
-```js
-const { withFormik } = require('formik')
-
-const LoginForm = withFormik({
-  initialValues: {
-    username: '',
-    password: '',
-  },
-  mapPropsToValues: props => ({
-    username: props.username,
-    password: props.password,
-  }),
-  displayName: 'login',
-  handleSubmit: val => console.log(val),
-})(Login)
-;<LoginForm />
-```
-
-Which can have an error message:
-
-```js
-const { withFormik } = require('formik')
-
-const LoginForm = withFormik({
-  initialValues: {
-    username: '',
-    password: '',
-  },
-  mapPropsToValues: props => ({
-    username: props.username,
-    password: props.password,
-  }),
-  displayName: 'login',
-  handleSubmit: (values, { setErrors }) =>
-    setErrors('Wrong username or password.'),
-})(Login)
-;<LoginForm />
-```

packages/pubsweet-component-login/Login.test.jsx

-import { shallow } from 'enzyme'
-import React from 'react'
-
-import { Login, ErrorText, Signup, ResetPassword } from './Login'
-
-describe('<Login/>', () => {
-  const makeWrapper = (props = {}) => shallow(<Login {...props} />)
-
-  it('renders the login form', () => {
-    expect(makeWrapper()).toMatchSnapshot()
-  })
-
-  it('shows error', () => {
-    const wrapper = makeWrapper({ errors: 'Yikes!' })
-    expect(wrapper.find(ErrorText)).toHaveLength(1)
-  })
-
-  it('can hide sign up link', () => {
-    const wrapper1 = makeWrapper()
-    const wrapper2 = makeWrapper({ signup: false })
-    expect(wrapper1.find(Signup)).toHaveLength(1)
-    expect(wrapper2.find(Signup)).toHaveLength(0)
-  })
-
-  it('can hide password reset link', () => {
-    const wrapper1 = makeWrapper()
-    const wrapper2 = makeWrapper({ passwordReset: false })
-    expect(wrapper1.find(ResetPassword)).toHaveLength(1)
-    expect(wrapper2.find(ResetPassword)).toHaveLength(0)
-  })
-
-  it('triggers submit handler', () => {
-    const handleSubmit = jest.fn()
-    const wrapper = makeWrapper({ handleSubmit })
-    wrapper.find('form').simulate('submit')
-    expect(handleSubmit).toHaveBeenCalled()
-  })
-})

packages/pubsweet-component-login/LoginContainer.js

-import { withFormik } from 'formik'
-import { compose } from 'recompose'
-import { connect } from 'react-redux'
-import { loginUser } from './actions'
-
-import Login from './Login'
-import redirectPath from './redirect'
-
-const handleSubmit = (values, { props: { dispatch, location }, setErrors }) => {
-  dispatch(loginUser(values, redirectPath({ location }), setErrors))
-}
-
-const enhancedFormik = withFormik({
-  initialValues: {
-    username: '',
-    password: '',
-  },
-  mapPropsToValues: props => ({
-    username: props.username,
-    password: props.password,
-  }),
-  displayName: 'login',
-  handleSubmit,
-})(Login)
-
-export default compose(connect(state => state))(enhancedFormik)

packages/pubsweet-component-login/__snapshots__/Login.test.jsx.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Login/> renders the login form 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <Login />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "class",
-    "props": Object {
-      "children": Array [
-        <styled.h1>
-          Login
-        </styled.h1>,
-        false,
-        <form>
-          <C
-            component={[Function]}
-            name="username"
-          />
-          <C
-            component={[Function]}
-            name="password"
-          />
-          <styled.button
-            primary={true}
-            type="submit"
-          >
-            Login
-          </styled.button>
-        </form>,
-        <styled.div>
-          <span>
-            Don't have an account? 
-          </span>
-          <Styled(Link)
-            to="/signup"
-          >
-            Sign up
-          </Styled(Link)>
-        </styled.div>,
-        <styled.div>
-          <span>
-            Forgot your password? 
-          </span>
-          <Styled(Link)
-            to="/password-reset"
-          >
-            Reset password
-          </Styled(Link)>
-        </styled.div>,
-      ],
-      "small": true,
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": "Login",
-        },
-        "ref": null,
-        "rendered": "Login",
-        "type": [Function],
-      },
-      false,
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <C
-              component={[Function]}
-              name="username"
-            />,
-            <C
-              component={[Function]}
-              name="password"
-            />,
-            <styled.button
-              primary={true}
-              type="submit"
-            >
-              Login
-            </styled.button>,
-          ],
-          "onSubmit": undefined,
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "function",
-            "props": Object {
-              "component": [Function],
-              "name": "username",
-            },
-            "ref": null,
-            "rendered": null,
-            "type": [Function],
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "function",
-            "props": Object {
-              "component": [Function],
-              "name": "password",
-            },
-            "ref": null,
-            "rendered": null,
-            "type": [Function],
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "class",
-            "props": Object {
-              "children": "Login",
-              "primary": true,
-              "type": "submit",
-            },
-            "ref": null,
-            "rendered": "Login",
-            "type": [Function],
-          },
-        ],
-        "type": "form",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": Array [
-            <span>
-              Don't have an account? 
-            </span>,
-            <Styled(Link)
-              to="/signup"
-            >
-              Sign up
-            </Styled(Link)>,
-          ],
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Don't have an account? ",
-            },
-            "ref": null,
-            "rendered": "Don't have an account? ",
-            "type": "span",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "class",
-            "props": Object {
-              "children": "Sign up",
-              "to": "/signup",
-            },
-            "ref": null,
-            "rendered": "Sign up",
-            "type": [Function],
-          },
-        ],
-        "type": [Function],
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "class",
-        "props": Object {
-          "children": Array [
-            <span>
-              Forgot your password? 
-            </span>,
-            <Styled(Link)
-              to="/password-reset"
-            >
-              Reset password
-            </Styled(Link)>,
-          ],
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Forgot your password? ",
-            },
-            "ref": null,
-            "rendered": "Forgot your password? ",
-            "type": "span",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "class",
-            "props": Object {
-              "children": "Reset password",
-              "to": "/password-reset",
-            },
-            "ref": null,
-            "rendered": "Reset password",
-            "type": [Function],
-          },
-        ],
-        "type": [Function],
-      },
-    ],
-    "type": [Function],
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "class",
-      "props": Object {
-        "children": Array [
-          <styled.h1>
-            Login
-          </styled.h1>,
-          false,
-          <form>
-            <C
-              component={[Function]}
-              name="username"
-            />
-            <C
-              component={[Function]}
-              name="password"
-            />
-            <styled.button
-              primary={true}
-              type="submit"
-            >
-              Login
-            </styled.button>
-          </form>,
-          <styled.div>
-            <span>
-              Don't have an account? 
-            </span>
-            <Styled(Link)
-              to="/signup"
-            >
-              Sign up
-            </Styled(Link)>
-          </styled.div>,
-          <styled.div>
-            <span>
-              Forgot your password? 
-            </span>
-            <Styled(Link)
-              to="/password-reset"
-            >
-              Reset password
-            </Styled(Link)>
-          </styled.div>,
-        ],
-        "small": true,
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": "Login",
-          },
-          "ref": null,
-          "rendered": "Login",
-          "type": [Function],
-        },
-        false,
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              <C
-                component={[Function]}
-                name="username"
-              />,
-              <C
-                component={[Function]}
-                name="password"
-              />,
-              <styled.button
-                primary={true}
-                type="submit"
-              >
-                Login
-              </styled.button>,
-            ],
-            "onSubmit": undefined,
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "function",
-              "props": Object {
-                "component": [Function],
-                "name": "username",
-              },
-              "ref": null,
-              "rendered": null,
-              "type": [Function],
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "function",
-              "props": Object {
-                "component": [Function],
-                "name": "password",
-              },
-              "ref": null,
-              "rendered": null,
-              "type": [Function],
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "class",
-              "props": Object {
-                "children": "Login",
-                "primary": true,
-                "type": "submit",
-              },
-              "ref": null,
-              "rendered": "Login",
-              "type": [Function],
-            },
-          ],
-          "type": "form",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": Array [
-              <span>
-                Don't have an account? 
-              </span>,
-              <Styled(Link)
-                to="/signup"
-              >
-                Sign up
-              </Styled(Link)>,
-            ],
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "Don't have an account? ",
-              },
-              "ref": null,
-              "rendered": "Don't have an account? ",
-              "type": "span",
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "class",
-              "props": Object {
-                "children": "Sign up",
-                "to": "/signup",
-              },
-              "ref": null,
-              "rendered": "Sign up",
-              "type": [Function],
-            },
-          ],
-          "type": [Function],
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "class",
-          "props": Object {
-            "children": Array [
-              <span>
-                Forgot your password? 
-              </span>,
-              <Styled(Link)
-                to="/password-reset"
-              >
-                Reset password
-              </Styled(Link)>,
-            ],
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "Forgot your password? ",
-              },
-              "ref": null,
-              "rendered": "Forgot your password? ",
-              "type": "span",
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "class",
-              "props": Object {
-                "children": "Reset password",
-                "to": "/password-reset",
-              },
-              "ref": null,
-              "rendered": "Reset password",
-              "type": [Function],
-            },
-          ],
-          "type": [Function],
-        },
-      ],
-      "type": [Function],
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-}
-`;

packages/pubsweet-component-login/actions.js

-import * as api from 'pubsweet-client/src/helpers/api'
-import {
-  LOGIN_REQUEST,
-  LOGIN_SUCCESS,
-  LOGIN_FAILURE,
-  LOGOUT_SUCCESS,
-  LOGOUT_REQUEST,
-} from 'pubsweet-client/src/actions/types'
-
-import { push } from 'react-router-redux'
-
-// TODO: This will break when rendered on a server
-const localStorage = window.localStorage || undefined
-
-// There are three possible states for our login
-// process and we need actions for each of them
-function loginRequest(credentials) {
-  return {
-    type: LOGIN_REQUEST,
-    credentials,
-  }
-}
-
-function loginSuccess(user) {
-  return {
-    type: LOGIN_SUCCESS,
-    token: user.token,
-    user,
-  }
-}
-
-function loginFailure(message) {
-  return {
-    type: LOGIN_FAILURE,
-    error: message,
-  }
-}
-
-// Calls the API to get a token and
-// dispatches actions along the way
-export function loginUser(credentials, redirectTo, setErrors) {
-  return dispatch => {
-    dispatch(loginRequest(credentials))
-    return api.create('/users/authenticate', credentials).then(
-      user => {
-        localStorage.setItem('token', user.token)
-        dispatch(loginSuccess(user))
-        if (redirectTo) dispatch(push(redirectTo))
-      },
-      err => {
-        setErrors(JSON.parse(err.response).message)
-        dispatch(loginFailure(err))
-      },
-    )
-  }
-}
-
-function logoutRequest() {
-  return {
-    type: LOGOUT_REQUEST,
-    isFetching: true,
-    isAuthenticated: true,
-  }
-}
-
-function logoutSuccess() {
-  return {
-    type: LOGOUT_SUCCESS,
-    isFetching: false,
-    isAuthenticated: false,
-  }
-}
-
-// Logs the user out
-// Since we are using JWTs, we just need to remove the token
-// from localStorage.
-export function logoutUser(redirectTo) {
-  return dispatch => {
-    dispatch(logoutRequest())
-    localStorage.removeItem('token')
-    dispatch(logoutSuccess())
-    if (redirectTo) dispatch(push(redirectTo))
-  }
-}

packages/pubsweet-component-login/graphql/LoginContainer.js

-import { compose } from 'recompose'
-import { withFormik } from 'formik'
-import { graphql } from 'react-apollo'
-
-import mutations from './mutations'
-import Login from '../Login'
-import redirectPath from '../redirect'
-
-const localStorage = window.localStorage || undefined
-
-const handleSubmit = (values, { props, setSubmitting, setErrors }) =>
-  props
-    .loginUser({ variables: { input: values } })
-    .then(({ data, errors }) => {
-      if (!errors) {
-        localStorage.setItem('token', data.loginUser.token)
-        props.history.push(redirectPath({ location: props.location }))
-        setSubmitting(true)
-      }
-    })
-    .catch(e => {
-      if (e.graphQLErrors) {
-        setSubmitting(false)
-        setErrors(e.graphQLErrors[0].message)
-      }
-    })
-
-const enhancedFormik = withFormik({
-  initialValues: {
-    username: '',
-    password: '',
-  },
-  mapPropsToValues: props => ({
-    username: props.username,
-    password: props.password,
-  }),
-  displayName: 'login',
-  handleSubmit,
-})(Login)
-
-export default compose(graphql(mutations.LOGIN_USER, { name: 'loginUser' }))(
-  enhancedFormik,
-)

packages/pubsweet-component-login/graphql/LoginContainer.test.jsx

-import React from 'react'
-import { mount } from 'enzyme'
-import { MockedProvider } from 'react-apollo/test-utils'
-import { ThemeProvider } from 'styled-components'
-import { MemoryRouter, Route } from 'react-router-dom'
-
-import wait from 'waait'
-import { LOGIN_USER } from './mutations'
-import LoginContainer from './LoginContainer'
-
-const user1 = {
-  id: 'user1',
-  username: 'admin',
-  password: 'adminadmin',
-  admin: true,
-  teams: [],
-}
-
-const mocks = currentUser => [
-  {
-    request: {
-      query: LOGIN_USER,
-      variables: {
-        input: {
-          username: currentUser.username,
-          password: currentUser.password,
-        },
-      },
-    },
-    result: {
-      data: {
-        loginUser: {
-          user: currentUser,
-          token: 'greatToken',
-        },
-      },
-    },
-  },
-  {
-    request: {
-      query: LOGIN_USER,
-      variables: {
-        input: {
-          username: currentUser.username,
-          password: 'wrongPassword',
-        },
-      },
-    },
-    result: {
-      data: { loginUser: null },
-      errors: [{ message: 'Wrong username or password.' }],
-    },
-  },
-]
-
-let globalLocation
-
-function makeDeepWrapper(currentUser, props = {}) {
-  // A theme is needed because some components use colors
-  // specified in the theme to render themselves (e.g. Link)
-  const theme = {
-    colorPrimary: '#fff',
-    colorSecondary: '#fff',
-  }
-
-  return mount(
-    <ThemeProvider theme={theme}>
-      <MockedProvider addTypename={false} mocks={mocks(currentUser)}>
-        <MemoryRouter initialEntries={['/login']}>
-          <Route
-            {...props}
-            render={p => {
-              globalLocation = p.location
-              return <LoginContainer {...p} />
-            }}
-          />
-        </MemoryRouter>
-      </MockedProvider>
-    </ThemeProvider>,
-  )
-}
-
-describe('LoginContainer', () => {
-  beforeEach(() => {
-    window.localStorage.clear()
-    globalLocation = undefined
-  })
-
-  it('renders the login form', () => {
-    const wrapper = makeDeepWrapper(user1)
-    wrapper.update()
-
-    const fields = wrapper.find('Login')
-    expect(fields).toHaveLength(1)
-  })
-
-  it('submits login information and logs the user in', async () => {
-    const wrapper = makeDeepWrapper(user1)
-    wrapper.update()
-
-    const usernameField = wrapper.find('TextField[label="Username"] input')
-    usernameField.getDOMNode().value = user1.username
-    usernameField.simulate('change')
-    const passwordField = wrapper.find('TextField[label="Password"] input')
-    passwordField.getDOMNode().value = user1.password
-    passwordField.simulate('change')
-
-    wrapper.update()
-    const button = wrapper.find('button')
-    button.simulate('submit')
-
-    wrapper.update()
-    await wait(50)
-
-    expect(window.localStorage.token).toEqual('greatToken')
-    expect(globalLocation.pathname).toEqual('/testRedirect')
-  })
-
-  it('does not log in user with incorrect credentials', async () => {
-    const wrapper = makeDeepWrapper(user1)
-    wrapper.update()
-
-    const usernameField = wrapper.find('TextField[label="Username"] input')
-    usernameField.getDOMNode().value = user1.username
-    usernameField.simulate('change')
-    const passwordField = wrapper.find('TextField[label="Password"] input')
-    passwordField.getDOMNode().value = 'wrongPassword'
-    passwordField.simulate('change')
-
-    wrapper.update()
-    const button = wrapper.find('button')
-
-    button.simulate('submit')
-
-    wrapper.update()
-    await wait(50)
-
-    expect(wrapper.find('Login').text()).toContain(
-      'Wrong username or password.',
-    )
-    expect(window.localStorage.token).toEqual(undefined)
-    expect(globalLocation.pathname).toEqual('/login')
-  })
-})

packages/pubsweet-component-login/graphql/mutations/index.js

-import gql from 'graphql-tag'
-
-const LOGIN_USER = gql`
-  mutation($input: LoginUserInput) {
-    loginUser(input: $input) {
-      token
-    }
-  }
-`
-
-module.exports = {
-  LOGIN_USER,
-}

packages/pubsweet-component-login/index.js

-module.exports = {
-  frontend: {
-    components: [() => require('./LoginContainer')],
-    actions: () => require('./actions'),
-    reducers: () => require('./reducers'),
-  },
-}

packages/pubsweet-component-login/package.json

-{
-  "name": "pubsweet-component-login",
-  "version": "1.2.0",
-  "description": "Basic login component for PubSweet",
-  "main": "index.js",
-  "author": "Collaborative Knowledge Foundation",
-  "license": "MIT",
-  "dependencies": {
-    "@pubsweet/ui": "^8.8.0",
-    "formik": "1.3.0",
-    "prop-types": "^15.5.10",
-    "react-redux": "^5.0.6",
-    "react-router-dom": "^4.2.2",
-    "react-router-redux": "^5.0.0-alpha.9",
-    "recompose": "^0.26.0"
-  },
-  "peerDependencies": {
-    "pubsweet-client": ">=1.0.0",
-    "react": ">=15"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.coko.foundation/pubsweet/pubsweet",
-    "path": "Login"
-  }
-}

packages/pubsweet-component-login/redirect.js

-import { get } from 'lodash'
-import config from 'config'
-
-const allowedRedirect = pathname =>
-  !['/logout', '/login', '/signup'].includes(pathname)
-
-export default ({ location: { state } }) =>
-  state && state.from && allowedRedirect(state.from.pathname)
-    ? state.from.pathname
-    : get(config, 'pubsweet-client.login-redirect', '/')

packages/pubsweet-component-login/reducers.js

-import {
-  LOGIN_REQUEST,
-  LOGIN_SUCCESS,
-  LOGIN_FAILURE,
-  LOGOUT_SUCCESS,
-  LOGOUT_REQUEST,
-} from 'pubsweet-client/src/actions/types'
-
-// TODO: This will break when rendered on a server
-const localStorage = window.localStorage || undefined
-
-export default function userLogin(
-  state = {
-    isFetching: false,
-    isAuthenticated: false,
-    token: localStorage.getItem('token'),
-  },
-  action,
-) {
-  switch (action.type) {
-    case LOGIN_REQUEST:
-      return {
-        ...state,
-        isFetching: true,
-        isAuthenticated: false,
-        username: action.credentials.username,
-      }
-    case LOGIN_SUCCESS:
-      return {
-        ...state,
-        isFetching: false,
-        isAuthenticated: true,
-        user: action.user,
-        token: action.token,
-      }
-    case LOGIN_FAILURE:
-      return {
-        ...state,
-        isFetching: false,
-        isAuthenticated: false,
-        error: action.error,
-      }
-    case LOGOUT_SUCCESS:
-      return {
-        ...state,
-        isFetching: false,
-        isAuthenticated: false,
-      }
-    case LOGOUT_REQUEST:
-      return {
-        ...state,
-        isFetching: false,
-        isAuthenticated: false,
-      }
-    default:
-      return state
-  }
-}

packages/pubsweet-component-login/reducers.test.js

-import {
-  LOGIN_FAILURE,
-  LOGIN_REQUEST,
-  LOGIN_SUCCESS,
-  LOGOUT_REQUEST,
-  LOGOUT_SUCCESS,
-} from 'pubsweet-client/src/actions/types'
-
-jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => undefined)
-
-const reducer = require('./reducers').default
-
-describe('Login reducer', () => {
-  it('returns initial state', () => {
-    const newState = reducer(undefined, {})
-    expect(newState).toEqual({
-      isFetching: false,
-      isAuthenticated: false,
-      token: undefined,
-    })
-  })
-
-  it('stores username on login request', () => {
-    const action = {
-      type: LOGIN_REQUEST,
-      credentials: { username: 'milo minderbinder' },
-    }
-    const newState = reducer(undefined, action)
-    expect(newState).toMatchObject({
-      isFetching: true,
-      username: 'milo minderbinder',
-    })
-  })
-
-  it('stores user and token on login success', () => {
-    const action = {
-      type: LOGIN_SUCCESS,
-      user: { username: 'nurse duckett' },
-      token: 't0k3n',
-    }
-    const newState = reducer(undefined, action)
-    expect(newState).toMatchObject({
-      isAuthenticated: true,
-      user: action.user,
-      token: action.token,
-    })
-  })
-
-  it('stores error on login failure', () => {
-    const action = { type: LOGIN_FAILURE, error: new Error('Flies in eyes') }
-    const newState = reducer({ isAuthenticated: true }, action)
-    expect(newState).toMatchObject({
-      isAuthenticated: false,
-      error: action.error,
-    })
-  })
-
-  it('logs out on request', () => {
-    const action = { type: LOGOUT_REQUEST }
-    const newState = reducer({ isAuthenticated: true }, action)
-    expect(newState).toMatchObject({
-      isAuthenticated: false,
-    })
-  })
-
-  it('logs out on logout success', () => {
-    const action = { type: LOGOUT_SUCCESS }
-    const newState = reducer({ isAuthenticated: true }, action)
-    expect(newState).toMatchObject({
-      isAuthenticated: false,
-    })
-  })
-})

packages/pubsweet-component-login/types.js

-export const LOGIN_REQUEST = 'LOGIN_REQUEST'
-export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
-export const LOGIN_FAILURE = 'LOGIN_FAILURE'
-
-export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'
-export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'
-export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'