From 3cb0f802f620ae1dc430e80f30f74aab84c23c58 Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Wed, 14 Feb 2018 14:59:05 +0200
Subject: [PATCH] feat(component): add signup confirmation form and set
password
---
.../src/components/Admin/AddEditUser.js | 2 +
.../src/components/Admin/Admin.js | 7 --
.../src/components/Admin/AdminPage.js | 1 -
.../components/SignUp/SignUpInvitationForm.js | 57 ++++++++++++
.../components/SignUp/SignUpInvitationPage.js | 20 +++++
.../src/components/SignUp/SignUpStep0.js | 87 +++++++++++++++++++
.../src/components/SignUp/SignUpStep1.js | 51 +++++++++++
.../xpub-faraday/app/config/journal/index.js | 1 +
.../xpub-faraday/app/config/journal/title.js | 6 ++
packages/xpub-faraday/app/routes.js | 2 +
packages/xpub-faraday/config/default.js | 2 +-
packages/xpub-faraday/package.json | 4 +-
12 files changed, 229 insertions(+), 11 deletions(-)
create mode 100644 packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
create mode 100644 packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
create mode 100644 packages/components-faraday/src/components/SignUp/SignUpStep0.js
create mode 100644 packages/components-faraday/src/components/SignUp/SignUpStep1.js
create mode 100644 packages/xpub-faraday/app/config/journal/title.js
diff --git a/packages/components-faraday/src/components/Admin/AddEditUser.js b/packages/components-faraday/src/components/Admin/AddEditUser.js
index f273f5d76..73da41f46 100644
--- a/packages/components-faraday/src/components/Admin/AddEditUser.js
+++ b/packages/components-faraday/src/components/Admin/AddEditUser.js
@@ -76,4 +76,6 @@ const Row = styled.div`
display: flex;
flex-direction: row;
margin: 10px 0;
+ align-items: center;
+ justify-content: space-evenly;
`
diff --git a/packages/components-faraday/src/components/Admin/Admin.js b/packages/components-faraday/src/components/Admin/Admin.js
index 929cda6e2..468550426 100644
--- a/packages/components-faraday/src/components/Admin/Admin.js
+++ b/packages/components-faraday/src/components/Admin/Admin.js
@@ -194,10 +194,3 @@ const Admin = ({
)
export default Admin
-
-const Root = styled.div`
- display: flex;
- flex-direction: column;
- margin: auto;
- max-width: 60em;
-`
diff --git a/packages/components-faraday/src/components/Admin/AdminPage.js b/packages/components-faraday/src/components/Admin/AdminPage.js
index 075f48448..cfc2d61e7 100644
--- a/packages/components-faraday/src/components/Admin/AdminPage.js
+++ b/packages/components-faraday/src/components/Admin/AdminPage.js
@@ -1,5 +1,4 @@
import { get } from 'lodash'
-import { compose } from 'recompose'
import { connect } from 'react-redux'
import { actions } from 'pubsweet-client'
import { ConnectPage } from 'xpub-connect'
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
new file mode 100644
index 000000000..9f4a61f14
--- /dev/null
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import Step0 from './SignUpStep0'
+import Step1 from './SignUpStep1'
+
+const SignUpInvitation = ({
+ journal,
+ email,
+ token,
+ step,
+ nextStep,
+ submitConfirmation,
+}) => (
+ <Root>
+ <Title>Add New Account Details</Title>
+ <Subtitle>
+ Your details have been pre-filled, please review and confirm before set
+ your password.
+ </Subtitle>
+ <Email>{email}</Email>
+ {step === 0 && <Step0 journal={journal} onSubmit={nextStep} />}
+ {step === 1 && <Step1 journal={journal} onSubmit={submitConfirmation} />}
+ </Root>
+)
+
+export default SignUpInvitation
+
+const Root = styled.div`
+ max-width: 500px;
+ min-width: 300px;
+ margin: 0 auto;
+ display: flex;
+ border: 1px solid var(--color-pending);
+ padding: 20px;
+ flex-direction: column;
+`
+
+const Title = styled.div`
+ font-size: 24px;
+ font-weight: bold;
+ text-align: center;
+ margin: 10px auto;
+`
+const Subtitle = styled.div`
+ font-size: 13px;
+ font-weight: normal;
+ text-align: center;
+ margin: 10px auto;
+`
+
+const Email = styled.div`
+ font-size: 16px;
+ font-weight: normal;
+ text-align: center;
+ margin: 10px auto;
+`
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
new file mode 100644
index 000000000..5a4164c17
--- /dev/null
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationPage.js
@@ -0,0 +1,20 @@
+import { withJournal } from 'xpub-journal'
+import { compose, withState, withProps, withHandlers } from 'recompose'
+
+import SignUpInvitation from './SignUpInvitationForm'
+
+export default compose(
+ withJournal,
+ withState('step', 'changeStep', 0),
+ withHandlers({
+ nextStep: ({ changeStep }) => () => changeStep(step => step + 1),
+ prevStep: ({ changeStep }) => () => changeStep(step => step - 1),
+ submitConfirmation: () => values => values,
+ }),
+ withProps(({ location }) => {
+ const params = new URLSearchParams(location.search)
+ const email = params.get('email')
+ const token = params.get('token')
+ return { email, token }
+ }),
+)(SignUpInvitation)
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
new file mode 100644
index 000000000..809423c82
--- /dev/null
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -0,0 +1,87 @@
+import React from 'react'
+import styled from 'styled-components'
+import { reduxForm } from 'redux-form'
+import { required } from 'xpub-validators'
+import { Button, ValidatedField, TextField, Menu } from '@pubsweet/ui'
+
+const Step0 = ({ journal, handleSubmit }) => (
+ <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" />
+ </RowItem>
+ </Row>
+ <Row>
+ <RowItem>
+ <Label> Middle name </Label>
+ <ValidatedField component={TextField} name="middleName" />
+ </RowItem>
+ <RowItem>
+ <Label> Position </Label>
+ <ValidatedField
+ component={TextField}
+ name="position"
+ 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>
+)
+
+export default reduxForm({
+ form: 'signUpInvitation',
+ destroyOnUnmount: false,
+ forceUnregisterOnUnmount: true,
+})(Step0)
+
+const FormContainer = styled.form``
+
+const Row = styled.div`
+ display: flex;
+ flex-direction: row;
+ margin: 20px 0;
+ align-items: center;
+ justify-content: space-evenly;
+`
+
+const RowItem = styled.div`
+ flex: 1;
+ margin-right: 20px;
+`
+
+const Label = styled.div`
+ font-size: 14px;
+ text-transform: uppercase;
+`
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
new file mode 100644
index 000000000..53da9b98e
--- /dev/null
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import styled from 'styled-components'
+import { reduxForm } from 'redux-form'
+import { required } from 'xpub-validators'
+import { Button, ValidatedField, TextField } from '@pubsweet/ui'
+
+const Step1 = ({ journal, handleSubmit }) => (
+ <FormContainer onSubmit={handleSubmit}>
+ <Row>
+ <RowItem>
+ <Label> Password </Label>
+ <ValidatedField
+ component={input => <TextField {...input} type="password" />}
+ name="password"
+ validate={[required]}
+ />
+ </RowItem>
+ </Row>
+ <Row>
+ <Button primary type="submit">
+ CONFIRM
+ </Button>
+ </Row>
+ </FormContainer>
+)
+
+export default reduxForm({
+ form: 'signUpInvitation',
+ destroyOnUnmount: false,
+ forceUnregisterOnUnmount: true,
+})(Step1)
+
+const FormContainer = styled.form``
+
+const Row = styled.div`
+ display: flex;
+ flex-direction: row;
+ margin: 20px 0;
+ align-items: center;
+ justify-content: space-evenly;
+`
+
+const RowItem = styled.div`
+ flex: 1;
+ margin-right: 20px;
+`
+
+const Label = styled.div`
+ font-size: 14px;
+ text-transform: uppercase;
+`
diff --git a/packages/xpub-faraday/app/config/journal/index.js b/packages/xpub-faraday/app/config/journal/index.js
index 874f46128..e36662008 100644
--- a/packages/xpub-faraday/app/config/journal/index.js
+++ b/packages/xpub-faraday/app/config/journal/index.js
@@ -10,3 +10,4 @@ export { default as issueTypes } from './issues-types'
export { default as articleTypes } from './article-types-tbrm'
export { default as articleSections } from './article-sections-tbrm'
export { default as manuscriptTypes } from './manuscript-types'
+export { default as title } from './title'
diff --git a/packages/xpub-faraday/app/config/journal/title.js b/packages/xpub-faraday/app/config/journal/title.js
new file mode 100644
index 000000000..d2829fac0
--- /dev/null
+++ b/packages/xpub-faraday/app/config/journal/title.js
@@ -0,0 +1,6 @@
+export default [
+ {
+ label: 'Prof.',
+ value: 'prof',
+ },
+]
diff --git a/packages/xpub-faraday/app/routes.js b/packages/xpub-faraday/app/routes.js
index c9b780104..099b26401 100644
--- a/packages/xpub-faraday/app/routes.js
+++ b/packages/xpub-faraday/app/routes.js
@@ -18,6 +18,7 @@ import ConfirmationPage from 'pubsweet-components-faraday/src/components/UICompo
import NotFound from 'pubsweet-components-faraday/src/components/UIComponents/NotFound'
import AdminPage from 'pubsweet-components-faraday/src/components/Admin'
import AddEditUser from 'pubsweet-components-faraday/src/components/Admin/AddEditUser'
+import SignUpInvitationPage from 'pubsweet-components-faraday/src/components/SignUp/SignUpInvitationPage'
const Routes = () => (
<App>
@@ -38,6 +39,7 @@ const Routes = () => (
path="/admin/users/edit/:userId"
/>
<PrivateRoute component={LogoutPage} exact path="/logout" />
+ <PrivateRoute component={SignUpInvitationPage} exact path="/invite" />
<PrivateRoute
component={Wizard}
exact
diff --git a/packages/xpub-faraday/config/default.js b/packages/xpub-faraday/config/default.js
index 245f1dbe7..2df19e661 100644
--- a/packages/xpub-faraday/config/default.js
+++ b/packages/xpub-faraday/config/default.js
@@ -63,7 +63,7 @@ module.exports = {
'admin-reset-password': {
url:
process.env.PUBSWEET_ADMIN_PASSWORD_RESET_URL ||
- 'http://localhost:3000/admin/password-reset',
+ 'http://localhost:3000/invite',
},
publicKeys: [
'pubsweet-client',
diff --git a/packages/xpub-faraday/package.json b/packages/xpub-faraday/package.json
index e3b80d41b..985e3c675 100644
--- a/packages/xpub-faraday/package.json
+++ b/packages/xpub-faraday/package.json
@@ -21,6 +21,7 @@
"prop-types": "^15.5.10",
"pubsweet": "^1.1.1",
"pubsweet-client": "^1.1.1",
+ "pubsweet-component-admin": "^0.0.1",
"pubsweet-component-ink-backend": "^0.1.1",
"pubsweet-component-ink-frontend": "^0.2.3",
"pubsweet-component-xpub-app": "^0.0.2",
@@ -29,9 +30,8 @@
"pubsweet-component-xpub-manuscript": "^0.0.2",
"pubsweet-component-xpub-review": "^0.0.2",
"pubsweet-component-xpub-submit": "^0.0.2",
- "pubsweet-server": "1.0.5",
"pubsweet-components-aws-s3": "^0.0.1",
- "pubsweet-component-admin": "^0.0.1",
+ "pubsweet-server": "1.0.5",
"react": "^15.6.1",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
--
GitLab