diff --git a/packages/component-faraday-ui/src/modals/FormModal.js b/packages/component-faraday-ui/src/modals/FormModal.js
index c8d4ac798720641bdb4a4bff1c528aba143714ac..a9b280c64e42eaf7049db6b12a48aa2f6a8516bb 100644
--- a/packages/component-faraday-ui/src/modals/FormModal.js
+++ b/packages/component-faraday-ui/src/modals/FormModal.js
@@ -1,18 +1,11 @@
import React, { Fragment } from 'react'
import { get } from 'lodash'
+import { Formik } from 'formik'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
+import { H2, Button, TextField, ValidatedFieldFormik } from '@pubsweet/ui'
import { compose, setDisplayName, withHandlers, withProps } from 'recompose'
-import {
- H2,
- Menu,
- Button,
- Spinner,
- Checkbox,
- TextField,
- ValidatedField,
-} from '@pubsweet/ui'
import {
Row,
Text,
@@ -23,166 +16,173 @@ import {
ItemOverrideAlert,
} from 'pubsweet-component-faraday-ui'
-import { Formik } from 'formik'
+import ValidatedMenuField from './ValidatedMenuField'
-const AddUserForm = ({ roles, countries, titles }) => (
- <Fragment>
- <Row alignItems="baseline" mb={1} mt={1}>
- <Item mr={1} vertical>
- <Label required>Email</Label>
- <ValidatedField
- component={TextField}
- name="email"
- validate={[required]}
- />
- </Item>
- <ItemOverrideAlert ml={1} vertical>
- <Label required>Role</Label>
- <ValidatedField
- component={input => (
- <Menu options={roles} {...input} placeholder="Please select" />
- )}
- name="role"
- validate={[required]}
- />
- </ItemOverrideAlert>
- </Row>
+// #region Unused stuff
- <Row mb={2}>
- <Item mr={1} vertical>
- <Label>First Name</Label>
- <ValidatedField component={TextField} name="firstName" />
- </Item>
- <Item ml={1} vertical>
- <Label>Last Name</Label>
- <ValidatedField component={TextField} name="lastName" />
- </Item>
- </Row>
+// const AddUserForm = ({ roles, countries, titles }) => (
+// <Fragment>
+// <Row alignItems="baseline" mb={1} mt={1}>
+// <Item mr={1} vertical>
+// <Label required>Email</Label>
+// <ValidatedField
+// component={TextField}
+// name="email"
+// validate={[required]}
+// />
+// </Item>
+// <ItemOverrideAlert ml={1} vertical>
+// <Label required>Role</Label>
+// <ValidatedField
+// component={input => (
+// <Menu options={roles} {...input} placeholder="Please select" />
+// )}
+// name="role"
+// validate={[required]}
+// />
+// </ItemOverrideAlert>
+// </Row>
- <RowOverrideAlert alignItems="center" mb={2}>
- <ItemOverrideAlert mr={1} vertical>
- <Label>Title</Label>
- <ValidatedField
- component={input => (
- <Menu options={titles} {...input} placeholder="Please select" />
- )}
- name="title"
- />
- </ItemOverrideAlert>
- <ItemOverrideAlert ml={1} vertical>
- <Label>Country</Label>
- <ValidatedField
- component={input => (
- <Menu options={countries} {...input} placeholder="Please select" />
- )}
- name="country"
- />
- </ItemOverrideAlert>
- </RowOverrideAlert>
+// <Row mb={2}>
+// <Item mr={1} vertical>
+// <Label>First Name</Label>
+// <ValidatedField component={TextField} name="firstName" />
+// </Item>
+// <Item ml={1} vertical>
+// <Label>Last Name</Label>
+// <ValidatedField component={TextField} name="lastName" />
+// </Item>
+// </Row>
- <Row mb={3}>
- <Item vertical>
- <Label>Affiliation</Label>
- <ValidatedField component={TextField} name="affiliation" />
- </Item>
- </Row>
- </Fragment>
-)
+// <RowOverrideAlert alignItems="center" mb={2}>
+// <ItemOverrideAlert mr={1} vertical>
+// <Label>Title</Label>
+// <ValidatedField
+// component={input => (
+// <Menu options={titles} {...input} placeholder="Please select" />
+// )}
+// name="title"
+// />
+// </ItemOverrideAlert>
+// <ItemOverrideAlert ml={1} vertical>
+// <Label>Country</Label>
+// <ValidatedField
+// component={input => (
+// <Menu options={countries} {...input} placeholder="Please select" />
+// )}
+// name="country"
+// />
+// </ItemOverrideAlert>
+// </RowOverrideAlert>
-const EditForm = ({ titles, countries }) => (
- <Fragment>
- <Row alignItems="center" mb={2} mt={1}>
- <Item mr={1} vertical>
- <Label>First Name</Label>
- <ValidatedField component={TextField} name="firstName" />
- </Item>
- <Item ml={1} vertical>
- <Label>Last Name</Label>
- <ValidatedField component={TextField} name="lastName" />
- </Item>
- </Row>
+// <Row mb={3}>
+// <Item vertical>
+// <Label>Affiliation</Label>
+// <ValidatedField component={TextField} name="affiliation" />
+// </Item>
+// </Row>
+// </Fragment>
+// )
- <RowOverrideAlert alignItems="center" mb={2}>
- <ItemOverrideAlert mr={1} vertical>
- <Label>Title</Label>
- <ValidatedField
- component={input => (
- <Menu options={titles} {...input} placeholder="Please select" />
- )}
- name="title"
- />
- </ItemOverrideAlert>
- <ItemOverrideAlert ml={1} vertical>
- <Label>Country</Label>
- <ValidatedField
- component={input => (
- <Menu options={countries} {...input} placeholder="Please select" />
- )}
- name="country"
- />
- </ItemOverrideAlert>
- </RowOverrideAlert>
+// const EditForm = ({ titles, countries }) => (
+// <Fragment>
+// <Row alignItems="center" mb={2} mt={1}>
+// <Item mr={1} vertical>
+// <Label>First Name</Label>
+// <ValidatedField component={TextField} name="firstName" />
+// </Item>
+// <Item ml={1} vertical>
+// <Label>Last Name</Label>
+// <ValidatedField component={TextField} name="lastName" />
+// </Item>
+// </Row>
- <Row mb={2}>
- <Item vertical>
- <Label>Affiliation</Label>
- <ValidatedField component={TextField} name="affiliation" />
- </Item>
- </Row>
- <Row>
- <Item>
- <Label>Roles</Label>
- </Item>
- </Row>
- <RowOverrideAlert mb={3} mt={1}>
- <Item>
- <ValidatedField
- component={({ value, onChange }) => (
- <Checkbox
- checked={value}
- label="Editor in Chief"
- onChange={onChange}
- value={value}
- />
- )}
- name="editorInChief"
- />
- </Item>
- <Item>
- <ValidatedField
- component={({ value, onChange }) => (
- <Checkbox
- checked={value}
- label="Admin"
- onChange={onChange}
- value={value}
- />
- )}
- name="admin"
- />
- </Item>
- <Item>
- <ValidatedField
- component={({ value, onChange }) => (
- <Checkbox
- checked={value}
- label="Handling Editor"
- onChange={onChange}
- value={value}
- />
- )}
- name="handlingEditor"
- />
- </Item>
- </RowOverrideAlert>
- </Fragment>
-)
+// <RowOverrideAlert alignItems="center" mb={2}>
+// <ItemOverrideAlert mr={1} vertical>
+// <Label>Title</Label>
+// <ValidatedField
+// component={input => (
+// <Menu options={titles} {...input} placeholder="Please select" />
+// )}
+// name="title"
+// />
+// </ItemOverrideAlert>
+// <ItemOverrideAlert ml={1} vertical>
+// <Label>Country</Label>
+// <ValidatedField
+// component={input => (
+// <Menu options={countries} {...input} placeholder="Please select" />
+// )}
+// name="country"
+// />
+// </ItemOverrideAlert>
+// </RowOverrideAlert>
-const FormikForm = () => (
- <Formik onSubmit={(...props) => console.log(props)}>
- {ceva => console.log(ceva) || <span onClick={ceva.handleSubmit}>gg</span>}
- </Formik>
-)
+// <Row mb={2}>
+// <Item vertical>
+// <Label>Affiliation</Label>
+// <ValidatedField component={TextField} name="affiliation" />
+// </Item>
+// </Row>
+// <Row>
+// <Item>
+// <Label>Roles</Label>
+// </Item>
+// </Row>
+// <RowOverrideAlert mb={3} mt={1}>
+// <Item>
+// <ValidatedField
+// component={({ value, onChange }) => (
+// <Checkbox
+// checked={value}
+// label="Editor in Chief"
+// onChange={onChange}
+// value={value}
+// />
+// )}
+// name="editorInChief"
+// />
+// </Item>
+// <Item>
+// <ValidatedField
+// component={({ value, onChange }) => (
+// <Checkbox
+// checked={value}
+// label="Admin"
+// onChange={onChange}
+// value={value}
+// />
+// )}
+// name="admin"
+// />
+// </Item>
+// <Item>
+// <ValidatedField
+// component={({ value, onChange }) => (
+// <Checkbox
+// checked={value}
+// label="Handling Editor"
+// onChange={onChange}
+// value={value}
+// />
+// )}
+// name="handlingEditor"
+// />
+// </Item>
+// </RowOverrideAlert>
+// </Fragment>
+// )
+
+// #endregion
+
+const parseUser = ({ email, role, ...rest }) => ({
+ email,
+ username: email,
+ admin: role === 'admin',
+ editorInChief: role === 'editorInChief',
+ handlingEditor: role === 'handlingEditor',
+ ...rest,
+})
const FormModal = ({
edit,
@@ -199,30 +199,78 @@ const FormModal = ({
handleSubmit,
confirmText = 'OK',
cancelText = 'Cancel',
+ //
+ addUser,
}) => (
<Root>
<IconButton icon="x" onClick={onClose} right={5} secondary top={5} />
<H2>{title}</H2>
+ <Formik
+ onSubmit={values => {
+ addUser({ variables: { user: parseUser(values) } })
+ }}
+ >
+ {ceva => (
+ <Fragment>
+ <Row alignItems="baseline" mb={1} mt={1}>
+ <Item mr={1} vertical>
+ <Label required>Email</Label>
+ <ValidatedFieldFormik
+ component={TextField}
+ name="email"
+ validate={[required]}
+ />
+ </Item>
+ <ItemOverrideAlert ml={1} vertical>
+ <Label required>Role</Label>
+ <ValidatedMenuField name="role" options={roles} />
+ </ItemOverrideAlert>
+ </Row>
+
+ <Row mb={2}>
+ <Item mr={1} vertical>
+ <Label>First Name</Label>
+ <ValidatedFieldFormik component={TextField} name="firstName" />
+ </Item>
+ <Item ml={1} vertical>
+ <Label>Last Name</Label>
+ <ValidatedFieldFormik component={TextField} name="lastName" />
+ </Item>
+ </Row>
+
+ <RowOverrideAlert alignItems="center" mb={2}>
+ <ItemOverrideAlert mr={1} vertical>
+ <Label>Title</Label>
+ <ValidatedMenuField name="title" options={titles} />
+ </ItemOverrideAlert>
+ <ItemOverrideAlert ml={1} vertical>
+ <Label>Country</Label>
+ <ValidatedMenuField name="country" options={countries} />
+ </ItemOverrideAlert>
+ </RowOverrideAlert>
- <FormikForm />
+ <Row mb={3}>
+ <Item vertical>
+ <Label>Affiliation</Label>
+ <ValidatedFieldFormik component={TextField} name="affiliation" />
+ </Item>
+ </Row>
+
+ <Row>
+ <Button onClick={onClose}>Cancel</Button>
+ <Button onClick={ceva.handleSubmit} primary>
+ Save user
+ </Button>
+ </Row>
+ </Fragment>
+ )}
+ </Formik>
{modalError && (
<Row mb={1}>
<Text error>{modalError}</Text>
</Row>
)}
- <Row>
- {isFetching ? (
- <Spinner size={3} />
- ) : (
- <Fragment>
- <Button onClick={onClose}>{cancelText}</Button>
- <Button onClick={handleSubmit} primary>
- {confirmText}
- </Button>
- </Fragment>
- )}
- </Row>
</Root>
)
diff --git a/packages/component-faraday-ui/src/modals/MyMenu.js b/packages/component-faraday-ui/src/modals/MyMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..9fe37eb41ed0d80cc4c053850f8eecc5560a74cd
--- /dev/null
+++ b/packages/component-faraday-ui/src/modals/MyMenu.js
@@ -0,0 +1,26 @@
+import React, { Fragment } from 'react'
+import { compose, withStateHandlers } from 'recompose'
+
+const MyMenu = ({ open, toggleMenu, field, form }) => (
+ <div onClick={toggleMenu}>
+ Click to open
+ {open && (
+ <Fragment>
+ <span onClick={() => form.setFieldValue(field.name, 1)}>Option 1</span>
+ <span onClick={() => form.setFieldValue(field.name, 2)}>Option 2</span>
+ <span onClick={() => form.setFieldValue(field.name, 3)}>Option 3</span>
+ </Fragment>
+ )}
+ </div>
+)
+
+export default compose(
+ withStateHandlers(
+ { open: false },
+ {
+ toggleMenu: ({ open }) => () => ({
+ open: !open,
+ }),
+ },
+ ),
+)(MyMenu)
diff --git a/packages/component-faraday-ui/src/modals/ValidatedMenuField.js b/packages/component-faraday-ui/src/modals/ValidatedMenuField.js
new file mode 100644
index 0000000000000000000000000000000000000000..b8b4c1efb0d05d1d3708ba8c0f3ca036adabf83a
--- /dev/null
+++ b/packages/component-faraday-ui/src/modals/ValidatedMenuField.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import { Field } from 'formik'
+import { Menu } from '@pubsweet/ui'
+
+const ValidatedMenuField = ({ options, name }) => (
+ <Field name={name}>
+ {({ field, form }) => (
+ <Menu
+ onChange={v => {
+ field.onChange(v)
+ form.setFieldValue(name, v)
+ }}
+ options={options}
+ />
+ )}
+ </Field>
+)
+
+export default ValidatedMenuField
diff --git a/packages/components-faraday/src/components/Admin/AddUser.js b/packages/components-faraday/src/components/Admin/AddUser.js
index 572e42f0755c5f0ae873b190c0d6864b1889139e..1a90ce17c2f887151261d1acd252ec8a141b8cb2 100644
--- a/packages/components-faraday/src/components/Admin/AddUser.js
+++ b/packages/components-faraday/src/components/Admin/AddUser.js
@@ -12,8 +12,9 @@ import {
withCountries,
} from 'pubsweet-component-faraday-ui'
-const AddUser = ({ edit, journal, handleSubmit, ...rest }) => (
+const AddUser = ({ edit, journal, addUser, ...rest }) => (
<OpenModal
+ addUser={addUser}
edit={edit}
formModal
title={edit ? 'Edit User' : 'Add User'}
diff --git a/packages/components-faraday/src/components/Admin/AdminUsers.js b/packages/components-faraday/src/components/Admin/AdminUsers.js
index 9c06664a67d14b3ed6f12138f02011061a540fe4..76664a223eee29a17cfe0645fd4b1a29ec8430d0 100644
--- a/packages/components-faraday/src/components/Admin/AdminUsers.js
+++ b/packages/components-faraday/src/components/Admin/AdminUsers.js
@@ -29,11 +29,13 @@ const GET_USERS = gql`
users {
id
admin
+ email
country
username
lastName
isActive
firstName
+ affiliation
isConfirmed
editorInChief
handlingEditor
@@ -41,6 +43,15 @@ const GET_USERS = gql`
}
`
+const ADD_USER = gql`
+ mutation addUser($user: UserInput) {
+ createUser(input: $user) {
+ id
+ email
+ }
+ }
+`
+
const Users = ({
page,
users,
@@ -56,6 +67,8 @@ const Users = ({
getStatusLabel,
paginatedItems,
toggleUserStatus,
+ //
+ addUser,
...rest
}) => (
<Fragment>
@@ -70,10 +83,10 @@ const Users = ({
Admin Dashboard
</ActionLink>
<AddUser
+ addUser={addUser}
form="add-user"
getUsers={getUsers}
modalKey="addUser"
- onSubmit={onSubmit}
/>
</Item>
@@ -162,6 +175,7 @@ export default compose(
withJournal,
withFetching,
graphql(GET_USERS),
+ graphql(ADD_USER, { name: 'addUser' }),
withProps(({ journal: { roles = {} }, data: { users } }) => ({
roles: Object.keys(roles),
items: users,
diff --git a/packages/xpub-faraday/config/validations.js b/packages/xpub-faraday/config/validations.js
index 6d1ac18d402b9baa6333ed22f7cfbe5d2f566cdf..8afc3c8a092b585a8e5499802e9b33fc993d550e 100644
--- a/packages/xpub-faraday/config/validations.js
+++ b/packages/xpub-faraday/config/validations.js
@@ -156,6 +156,7 @@ module.exports = {
handlingEditor: Joi.boolean(),
agreeTC: Joi.boolean(),
isActive: Joi.boolean(),
+ passwordHash: Joi.string(),
notifications: Joi.object({
email: Joi.object({
system: Joi.boolean().default(true),