refactor(component): handle error on user signup

packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js

@@ -12,6 +12,7 @@ const SignUpInvitation = ({
   nextStep,
   submitConfirmation,
   initialValues,
+  error,
 }) => (
   <Root>
     <Title>Add New Account Details</Title>
@@ -20,6 +21,7 @@ const SignUpInvitation = ({
       your password.
     </Subtitle>
     <Email>{email}</Email>
+    {error && <Err>Token expired or Something went wrong.</Err>}
     {step === 0 && (
       <Step0
         initialValues={initialValues}
@@ -68,3 +70,7 @@ const Email = styled.div`
   text-align: center;
   margin: 10px auto;
 `
+const Err = styled.div`
+  color: red;
+  text-align: center;
+`

packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js

@@ -68,9 +68,13 @@ export default compose(
     componentDidMount() {
       const { email, token } = this.props
       const encodedUri = `?email=${encodeURIComponent(email)}&token=${token}`
-      request(`/users/invite${encodedUri}`).then(res => {
-        this.setState({ initialValues: res })
-      })
+      request(`/users/invite${encodedUri}`)
+        .then(res => {
+          this.setState({ initialValues: res })
+        })
+        .catch(err => {
+          this.setState({ error: err.response })
+        })
     },
   }),
 )(SignUpInvitation)

packages/components-faraday/src/components/SignUp/SignUpStep0.js

 import React from 'react'
 import styled from 'styled-components'
 import { reduxForm } from 'redux-form'
+import { isUndefined } from 'lodash'
 import { required } from 'xpub-validators'
 import { Button, ValidatedField, TextField, Menu } from '@pubsweet/ui'
 
-const Step0 = ({ journal, handleSubmit, initialValues }) => (
-  <FormContainer onSubmit={handleSubmit}>
-    <Row>
-      <RowItem>
-        <Label> First name* </Label>
-        <ValidatedField
-          component={TextField}
-          name="firstName"
-          validate={[required]}
-        />
-      </RowItem>
-      <RowItem>
-        <Label> Affiliation* </Label>
-        <ValidatedField
-          component={TextField}
-          name="affiliation"
-          validate={[required]}
-        />
-      </RowItem>
-    </Row>
-    <Row>
-      <RowItem>
-        <Label> Last name* </Label>
-        <ValidatedField
-          component={TextField}
-          name="lastName"
-          validate={[required]}
-        />
-      </RowItem>
-      <RowItem>
-        <Label> Title* </Label>
-        <ValidatedField
-          component={input => <Menu {...input} options={journal.title} />}
-          name="title"
-          validate={[required]}
-        />
-      </RowItem>
-    </Row>
-    <Row>
-      <Button primary type="submit">
-        CONFIRM & PROCEED TO SET PASSWORD
-      </Button>
-    </Row>
-  </FormContainer>
-)
+const Step0 = ({ journal, handleSubmit, initialValues }) =>
+  !isUndefined(initialValues) ? (
+    <FormContainer onSubmit={handleSubmit}>
+      <Row>
+        <RowItem>
+          <Label> First name* </Label>
+          <ValidatedField
+            component={TextField}
+            name="firstName"
+            validate={[required]}
+          />
+        </RowItem>
+        <RowItem>
+          <Label> Affiliation* </Label>
+          <ValidatedField
+            component={TextField}
+            name="affiliation"
+            validate={[required]}
+          />
+        </RowItem>
+      </Row>
+      <Row>
+        <RowItem>
+          <Label> Last name* </Label>
+          <ValidatedField
+            component={TextField}
+            name="lastName"
+            validate={[required]}
+          />
+        </RowItem>
+        <RowItem>
+          <Label> Title* </Label>
+          <ValidatedField
+            component={input => <Menu {...input} options={journal.title} />}
+            name="title"
+            validate={[required]}
+          />
+        </RowItem>
+      </Row>
+      <Row>
+        <Button primary type="submit">
+          CONFIRM & PROCEED TO SET PASSWORD
+        </Button>
+      </Row>
+    </FormContainer>
+  ) : (
+    <div>Loading...</div>
+  )
 
 export default reduxForm({
   form: 'signUpInvitation',

packages/xpub-faraday/config/default.js

@@ -25,7 +25,7 @@ module.exports = {
   'pubsweet-client': {
     API_ENDPOINT: '/api',
     'login-redirect': '/',
-    'redux-log': true,
+    'redux-log': false,
     theme: process.env.PUBSWEET_THEME,
   },
   'mail-transport': {