From 533c9fbdc16b3dde2e57e2807c185956dc786269 Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Thu, 15 Feb 2018 14:38:59 +0200
Subject: [PATCH] refactor(signup): complete signup flow
---
.../src/components/Admin/AddEditUser.js | 26 +++++++++++---
.../src/components/Admin/AddUserForm.js | 35 +++++++++++++++----
.../src/components/Admin/EditUserForm.js | 33 +++++++++--------
.../components/SignUp/SignUpInvitationForm.js | 17 +++++++--
.../components/SignUp/SignUpInvitationPage.js | 24 ++++++++++---
.../src/components/SignUp/SignUpStep0.js | 23 ++++--------
.../xpub-faraday/app/config/journal/title.js | 26 +++++++++++++-
7 files changed, 136 insertions(+), 48 deletions(-)
diff --git a/packages/components-faraday/src/components/Admin/AddEditUser.js b/packages/components-faraday/src/components/Admin/AddEditUser.js
index f06c8c9da..4e03338dc 100644
--- a/packages/components-faraday/src/components/Admin/AddEditUser.js
+++ b/packages/components-faraday/src/components/Admin/AddEditUser.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
import { reduxForm, SubmissionError } from 'redux-form'
import styled from 'styled-components'
import { actions } from 'pubsweet-client'
-import { create } from 'pubsweet-client/src/helpers/api'
+import { create, update } from 'pubsweet-client/src/helpers/api'
import { withJournal } from 'xpub-journal'
import { ConnectPage } from 'xpub-connect'
import { selectUser } from 'xpub-selectors'
@@ -26,20 +26,38 @@ const onSubmit = (values, dispatch, { isEdit, history }) => {
if (err) {
const errorMessage = get(JSON.parse(err), 'error')
throw new SubmissionError({
- role: errorMessage || 'Something went wrong',
+ email: errorMessage || 'Something went wrong',
})
}
})
}
+
+ return update(`/users/${values.id}`, values)
+ .then(() => {
+ history.push('/admin/users')
+ })
+ .catch(error => {
+ const err = get(error, 'response')
+ if (err) {
+ const errorMessage = get(JSON.parse(err), 'error')
+ throw new SubmissionError({
+ roles: errorMessage || 'Something went wrong',
+ })
+ }
+ })
}
const AddEditUser = ({ handleSubmit, journal, isEdit, user }) => (
<Root>
<FormContainer onSubmit={handleSubmit}>
{isEdit ? (
- <EditUserForm roles={getRoleOptions(journal)} user={user} />
+ <EditUserForm
+ journal={journal}
+ roles={getRoleOptions(journal)}
+ user={user}
+ />
) : (
- <AddUserForm roles={getRoleOptions(journal)} />
+ <AddUserForm journal={journal} roles={getRoleOptions(journal)} />
)}
<Row>
<Button primary type="submit">
diff --git a/packages/components-faraday/src/components/Admin/AddUserForm.js b/packages/components-faraday/src/components/Admin/AddUserForm.js
index fc043cc51..3edc3f9e5 100644
--- a/packages/components-faraday/src/components/Admin/AddUserForm.js
+++ b/packages/components-faraday/src/components/Admin/AddUserForm.js
@@ -4,24 +4,24 @@ import { ValidatedField, TextField, Menu } from '@pubsweet/ui'
import { required } from 'xpub-validators'
-const AddUserForm = ({ roles }) => {
- const roleOptions = roles.filter(r => r.value === 'editorInChief')
+const AddUserForm = ({ roles, journal }) => {
+ const roleOptions = roles.filter(r =>
+ ['editorInChief', 'author', 'admin'].includes(r.value),
+ )
return (
<div>
<h3>Add user</h3>
<Row>
<RowItem>
- <Label> Email</Label>
+ <Label> Email*</Label>
<ValidatedField
component={TextField}
name="email"
validate={[required]}
/>
</RowItem>
- </Row>
- <Row>
<RowItem>
- <Label> Role</Label>
+ <Label> Role*</Label>
<ValidatedField
component={input => <Menu {...input} options={roleOptions} />}
name="role"
@@ -29,6 +29,29 @@ const AddUserForm = ({ roles }) => {
/>
</RowItem>
</Row>
+ <Row>
+ <RowItem>
+ <Label> First name </Label>
+ <ValidatedField component={TextField} name="firstName" />
+ </RowItem>
+ <RowItem>
+ <Label> Last name </Label>
+ <ValidatedField component={TextField} name="lastName" />
+ </RowItem>
+ </Row>
+ <Row>
+ <RowItem>
+ <Label> Affiliation </Label>
+ <ValidatedField component={TextField} name="affiliation" />
+ </RowItem>
+ <RowItem>
+ <Label> Title </Label>
+ <ValidatedField
+ component={input => <Menu {...input} options={journal.title} />}
+ name="title"
+ />
+ </RowItem>
+ </Row>
</div>
)
}
diff --git a/packages/components-faraday/src/components/Admin/EditUserForm.js b/packages/components-faraday/src/components/Admin/EditUserForm.js
index 9020fbf3d..d6608c363 100644
--- a/packages/components-faraday/src/components/Admin/EditUserForm.js
+++ b/packages/components-faraday/src/components/Admin/EditUserForm.js
@@ -1,12 +1,12 @@
import React from 'react'
import styled from 'styled-components'
-import { ValidatedField, TextField, Menu } from '@pubsweet/ui'
+import { ValidatedField, TextField, Menu, CheckboxGroup } from '@pubsweet/ui'
import { required } from 'xpub-validators'
-const EditUserForm = ({ roles, user }) => {
+const EditUserForm = ({ roles, journal, user }) => {
const roleOptions = roles.filter(r =>
- ['editorInChief', 'author'].includes(r.value),
+ ['editorInChief', 'author', 'admin'].includes(r.value),
)
return (
<div>
@@ -14,7 +14,7 @@ const EditUserForm = ({ roles, user }) => {
<h5>{user.email}</h5>
<Row>
<RowItem>
- <Label> First name </Label>
+ <Label> First name* </Label>
<ValidatedField
component={TextField}
name="firstName"
@@ -22,11 +22,7 @@ const EditUserForm = ({ roles, user }) => {
/>
</RowItem>
<RowItem>
- <Label> Middle name </Label>
- <ValidatedField component={TextField} name="middleName" />
- </RowItem>
- <RowItem>
- <Label> Last name </Label>
+ <Label> Last name* </Label>
<ValidatedField
component={TextField}
name="lastName"
@@ -36,7 +32,7 @@ const EditUserForm = ({ roles, user }) => {
</Row>
<Row>
<RowItem>
- <Label> Affiliation </Label>
+ <Label> Affiliation* </Label>
<ValidatedField
component={TextField}
name="affiliation"
@@ -44,14 +40,21 @@ const EditUserForm = ({ roles, user }) => {
/>
</RowItem>
<RowItem>
- <Label> Title </Label>
- <ValidatedField component={TextField} name="title" />
+ <Label> Title* </Label>
+ <ValidatedField
+ component={input => <Menu {...input} options={journal.title} />}
+ name="title"
+ />
</RowItem>
+ </Row>
+ <Row>
<RowItem>
- <Label> Role</Label>
+ <Label> Roles*</Label>
<ValidatedField
- component={input => <Menu {...input} options={roleOptions} />}
- name="role"
+ component={input => (
+ <CheckboxGroup {...input} options={roleOptions} />
+ )}
+ name="roles"
/>
</RowItem>
</Row>
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
index 9f4a61f14..f37aa43b3 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
@@ -11,6 +11,7 @@ const SignUpInvitation = ({
step,
nextStep,
submitConfirmation,
+ initialValues,
}) => (
<Root>
<Title>Add New Account Details</Title>
@@ -19,8 +20,20 @@ const SignUpInvitation = ({
your password.
</Subtitle>
<Email>{email}</Email>
- {step === 0 && <Step0 journal={journal} onSubmit={nextStep} />}
- {step === 1 && <Step1 journal={journal} onSubmit={submitConfirmation} />}
+ {step === 0 && (
+ <Step0
+ initialValues={initialValues}
+ journal={journal}
+ onSubmit={nextStep}
+ />
+ )}
+ {step === 1 && (
+ <Step1
+ initialValues={initialValues}
+ journal={journal}
+ onSubmit={submitConfirmation}
+ />
+ )}
</Root>
)
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
index 314d2899c..31be2fafe 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
@@ -1,9 +1,15 @@
import { get } from 'lodash'
+import request, { create } from 'pubsweet-client/src/helpers/api'
import { withJournal } from 'xpub-journal'
import { login } from 'pubsweet-component-xpub-authentication/src/redux/login'
import { SubmissionError } from 'redux-form'
-import { create } from 'pubsweet-client/src/helpers/api'
-import { compose, withState, withProps, withHandlers } from 'recompose'
+import {
+ compose,
+ withState,
+ withProps,
+ withHandlers,
+ lifecycle,
+} from 'recompose'
import SignUpInvitation from './SignUpInvitationForm'
@@ -22,7 +28,7 @@ const loginUser = (dispatch, values, history) =>
}
})
-const confirmUser = (email, token) => (values, dispatch, { history }) => {
+const confirmUser = (email, token, history) => (values, dispatch) => {
const request = { ...values, email, token }
if (values) {
return create('/users/invite/password/reset', request)
@@ -55,6 +61,16 @@ export default compose(
withHandlers({
nextStep: ({ changeStep }) => () => changeStep(step => step + 1),
prevStep: ({ changeStep }) => () => changeStep(step => step - 1),
- submitConfirmation: ({ email, token }) => confirmUser(email, token),
+ submitConfirmation: ({ email, token, history }) =>
+ confirmUser(email, token, history),
+ }),
+ lifecycle({
+ componentDidMount() {
+ const { email, token } = this.props
+ const encodedUri = `?email=${encodeURIComponent(email)}&token=${token}`
+ request(`/users/invite${encodedUri}`).then(res => {
+ this.setState({ initialValues: res })
+ })
+ },
}),
)(SignUpInvitation)
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
index 809423c82..87209f9f1 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -4,11 +4,11 @@ import { reduxForm } from 'redux-form'
import { required } from 'xpub-validators'
import { Button, ValidatedField, TextField, Menu } from '@pubsweet/ui'
-const Step0 = ({ journal, handleSubmit }) => (
+const Step0 = ({ journal, handleSubmit, initialValues }) => (
<FormContainer onSubmit={handleSubmit}>
<Row>
<RowItem>
- <Label> First name </Label>
+ <Label> First name* </Label>
<ValidatedField
component={TextField}
name="firstName"
@@ -16,27 +16,17 @@ const Step0 = ({ journal, handleSubmit }) => (
/>
</RowItem>
<RowItem>
- <Label> Affiliation </Label>
- <ValidatedField component={TextField} name="affiliation" />
- </RowItem>
- </Row>
- <Row>
- <RowItem>
- <Label> Middle name </Label>
- <ValidatedField component={TextField} name="middleName" />
- </RowItem>
- <RowItem>
- <Label> Position </Label>
+ <Label> Affiliation* </Label>
<ValidatedField
component={TextField}
- name="position"
+ name="affiliation"
validate={[required]}
/>
</RowItem>
</Row>
<Row>
<RowItem>
- <Label> Last name </Label>
+ <Label> Last name* </Label>
<ValidatedField
component={TextField}
name="lastName"
@@ -44,7 +34,7 @@ const Step0 = ({ journal, handleSubmit }) => (
/>
</RowItem>
<RowItem>
- <Label> Title </Label>
+ <Label> Title* </Label>
<ValidatedField
component={input => <Menu {...input} options={journal.title} />}
name="title"
@@ -63,6 +53,7 @@ const Step0 = ({ journal, handleSubmit }) => (
export default reduxForm({
form: 'signUpInvitation',
destroyOnUnmount: false,
+ enableReinitialize: true,
forceUnregisterOnUnmount: true,
})(Step0)
diff --git a/packages/xpub-faraday/app/config/journal/title.js b/packages/xpub-faraday/app/config/journal/title.js
index d2829fac0..32f7b2459 100644
--- a/packages/xpub-faraday/app/config/journal/title.js
+++ b/packages/xpub-faraday/app/config/journal/title.js
@@ -1,6 +1,30 @@
export default [
{
- label: 'Prof.',
+ label: 'Mr',
+ value: 'mr',
+ },
+ {
+ label: 'Mrs',
+ value: 'mrs',
+ },
+ {
+ label: 'Miss',
+ value: 'miss',
+ },
+ {
+ label: 'Ms',
+ value: 'ms',
+ },
+ {
+ label: 'Dr',
+ value: 'dr',
+ },
+ {
+ label: 'Professor',
value: 'prof',
},
+ {
+ label: 'Other',
+ value: 'other',
+ },
]
--
GitLab