diff --git a/packages/components-faraday/src/components/SignUp/FormItems.js b/packages/components-faraday/src/components/SignUp/FormItems.js new file mode 100644 index 0000000000000000000000000000000000000000..4b39b74eb60dcbfb7326a17c0cf6ce7e95f0ef2f --- /dev/null +++ b/packages/components-faraday/src/components/SignUp/FormItems.js @@ -0,0 +1,63 @@ +import styled from 'styled-components' +import { th } from '@pubsweet/ui' + +export const RootContainer = styled.div` + background-color: ${th('backgroundColorReverse')}; + border: ${th('borderDefault')}; + display: flex; + flex-direction: column; + margin: 0 auto; + max-width: 550px; + min-width: 300px; + padding: 20px; +` + +export const Title = styled.div` + color: ${th('colorPrimary')}; + font-family: ${th('fontHeading')}; + font-size: ${th('fontSizeHeading5')}; + font-weight: bold; + margin: 10px auto; + text-align: center; +` +export const Subtitle = styled.div` + font-family: ${th('fontReading')}; + font-size: ${th('fontSizeBaseSmall')}; + font-weight: normal; + margin: 10px auto; + text-align: center; +` + +export const Email = styled.div` + font-family: ${th('fontReading')}; + font-size: ${th('fontSizeBase')}; + font-weight: normal; + margin: 10px auto; + text-align: center; +` + +export const FormContainer = styled.form`` + +export const Row = styled.div` + align-items: center; + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin: ${th('gridUnit')} 0; +` + +export const RowItem = styled.div` + flex: 1; + margin-right: ${th('gridUnit')}; +` + +export const Label = styled.div` + font-family: ${th('fontReading')}; + font-size: ${th('fontSizeBaseSmall')}; + text-transform: uppercase; +` +export const Err = styled.div` + color: ${th('colorError')}; + margin-top: calc(${th('gridUnit')}*-1); + text-align: left; +` diff --git a/packages/components-faraday/src/components/SignUp/ReviewerSignUp.js b/packages/components-faraday/src/components/SignUp/ReviewerSignUp.js new file mode 100644 index 0000000000000000000000000000000000000000..dd77411fff81056435500e627d8d68e844a1b69b --- /dev/null +++ b/packages/components-faraday/src/components/SignUp/ReviewerSignUp.js @@ -0,0 +1,60 @@ +import React from 'react' +import { reduxForm } from 'redux-form' +import { compose } from 'recompose' +import { required, minChars } from 'xpub-validators' +import { Button, ValidatedField, TextField } from '@pubsweet/ui' + +import { + Row, + Err, + Title, + Label, + Email, + RowItem, + Subtitle, + RootContainer, + FormContainer, +} from './FormItems' + +const min8Chars = minChars(8) +const ReviewerSignUp = ({ handleSubmit, error }) => ( + <RootContainer> + <Title>Hindawi Invitation</Title> + <Subtitle> + You have been invited to review a manuscript on the Hindawi platform. + Please set a password and proceed to the manuscript. + </Subtitle> + <Email>costel@gigi.com</Email> + <FormContainer onSubmit={handleSubmit}> + <Row> + <RowItem> + <Label> Password </Label> + <ValidatedField + component={input => <TextField {...input} type="password" />} + name="password" + validate={[required, min8Chars]} + /> + </RowItem> + </Row> + {error && ( + <Row> + <RowItem> + <Err>{error}</Err> + </RowItem> + </Row> + )} + <Row> + <Button primary type="submit"> + CONFIRM + </Button> + </Row> + </FormContainer> + </RootContainer> +) + +export default compose( + reduxForm({ + form: 'invite-reviewer', + onSubmit: (values, dispatch) => {}, + }), +)(ReviewerSignUp) diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js index 1e1b35f9f94f18fc61cbfb19ad40bc9570d8865b..eae8daeff0553e71f32e629f826613e832102da6 100644 --- a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js +++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js @@ -1,8 +1,8 @@ import React from 'react' -import styled from 'styled-components' import Step0 from './SignUpStep0' import Step1 from './SignUpStep1' +import { RootContainer, Title, Subtitle, Email, Err } from './FormItems' const SignUpInvitation = ({ journal, @@ -14,7 +14,7 @@ const SignUpInvitation = ({ initialValues, error, }) => ( - <Root> + <RootContainer> <Title>Add New Account Details</Title> <Subtitle> Your details have been pre-filled, please review and confirm before set @@ -38,48 +38,7 @@ const SignUpInvitation = ({ onSubmit={submitConfirmation} /> )} - </Root> + </RootContainer> ) export default SignUpInvitation - -// #region styles -const Root = styled.div` - max-width: 550px; - min-width: 300px; - margin: 0 auto; - display: flex; - border: ${({ theme }) => theme.borderDefault}; - background-color: ${({ theme }) => theme.backgroundColorReverse}; - padding: 20px; - flex-direction: column; -` - -const Title = styled.div` - font-size: ${({ theme }) => theme.fontSizeHeading5}; - font-family: ${({ theme }) => theme.fontHeading}; - color: ${({ theme }) => theme.colorPrimary}; - font-weight: bold; - text-align: center; - margin: 10px auto; -` -const Subtitle = styled.div` - font-size: ${({ theme }) => theme.fontSizeBaseSmall}; - font-family: ${({ theme }) => theme.fontReading}; - font-weight: normal; - text-align: center; - margin: 10px auto; -` - -const Email = styled.div` - font-size: ${({ theme }) => theme.fontSizeBase}; - font-family: ${({ theme }) => theme.fontReading}; - font-weight: normal; - text-align: center; - margin: 10px auto; -` -const Err = styled.div` - color: ${({ theme }) => theme.colorError}; - text-align: center; -` -// #endregion diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js index 2fb7bb2fd62e2331474c866ec81d46dfabc27457..03c8d2812a8e03509d07beab6a7c4989d2d5643d 100644 --- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js +++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js @@ -1,10 +1,11 @@ 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' +import { FormContainer, Row, RowItem, Label } from './FormItems' + const Step0 = ({ journal, handleSubmit, initialValues, error }) => !isUndefined(initialValues) ? ( <FormContainer onSubmit={handleSubmit}> @@ -61,24 +62,3 @@ export default reduxForm({ enableReinitialize: true, 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: ${({ theme }) => theme.fontSizeBaseSmall}; - font-family: ${({ theme }) => theme.fontReading}; - text-transform: uppercase; -` diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js index 260aa47d1854ca5ceb793cceb0d3e2ba43a648e8..706961d985579837b711c13e661756933ffb5956 100644 --- a/packages/components-faraday/src/components/SignUp/SignUpStep1.js +++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js @@ -1,8 +1,9 @@ import React from 'react' -import styled from 'styled-components' import { reduxForm } from 'redux-form' import { required } from 'xpub-validators' -import { Button, ValidatedField, TextField, th } from '@pubsweet/ui' +import { Button, ValidatedField, TextField } from '@pubsweet/ui' + +import { FormContainer, Row, RowItem, Label, Err } from './FormItems' const Step1 = ({ journal, handleSubmit, error }) => ( <FormContainer onSubmit={handleSubmit}> @@ -36,29 +37,3 @@ export default reduxForm({ destroyOnUnmount: false, forceUnregisterOnUnmount: true, })(Step1) - -const FormContainer = styled.form`` - -const Row = styled.div` - display: flex; - flex-direction: row; - margin: ${th('gridUnit')} 0; - align-items: center; - justify-content: space-evenly; -` - -const RowItem = styled.div` - flex: 1; - margin-right: ${th('gridUnit')}; -` - -const Label = styled.div` - font-size: ${th('fontSizeBaseSmall')}; - font-family: ${th('fontReading')}; - text-transform: uppercase; -` -const Err = styled.div` - color: ${th('colorError')}; - text-align: left; - margin-top: calc(${th('gridUnit')}*-1); -` diff --git a/packages/components-faraday/src/components/SignUp/index.js b/packages/components-faraday/src/components/SignUp/index.js new file mode 100644 index 0000000000000000000000000000000000000000..5b2d1d8aa27b7722db809bbf8e64aa4ae73c4ac3 --- /dev/null +++ b/packages/components-faraday/src/components/SignUp/index.js @@ -0,0 +1,2 @@ +export { default as ReviewerSignUp } from './ReviewerSignUp' +export { default as SignUpInvitationPage } from './SignUpInvitationPage' diff --git a/packages/xpub-faraday/app/routes.js b/packages/xpub-faraday/app/routes.js index 154657b9ecc62395bdb0afc613a92add20417613..c17addb48667b42cf6bd1273c13a8cdeef285a2c 100644 --- a/packages/xpub-faraday/app/routes.js +++ b/packages/xpub-faraday/app/routes.js @@ -15,7 +15,10 @@ import { AdminRoute, } 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' +import { + SignUpInvitationPage, + ReviewerSignUp, +} from 'pubsweet-components-faraday/src/components/SignUp' import FaradayApp from './FaradayApp' @@ -57,6 +60,7 @@ const Routes = () => ( path="/projects/:project/versions/:version/submit" /> <Route component={SignUpInvitationPage} exact path="/invite" /> + <Route component={ReviewerSignUp} exact path="/invite-reviewer" /> <Route component={NotFound} /> </Switch> </FaradayApp>