Merge branch 'develop' of https://gitlab.coko.foundation/xpub/xpub-faraday into develop

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

+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;
+`

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

+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)

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

 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

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'
 
+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;
-`

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

 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);
-`

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

+export { default as ReviewerSignUp } from './ReviewerSignUp'
+export { default as SignUpInvitationPage } from './SignUpInvitationPage'

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>