From fea5f5f60ac65e7a5cdee60d4668050a14a6945c Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Fri, 16 Mar 2018 11:05:45 +0200
Subject: [PATCH] fix(signup): show password errro
---
.../components/SignUp/SignUpInvitationForm.js | 1 +
.../src/components/SignUp/SignUpStep1.js | 24 ++++++++++++++-----
2 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
index ac7399aa0..6337b777a 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpInvitationForm.js
@@ -32,6 +32,7 @@ const SignUpInvitation = ({
)}
{step === 1 && (
<Step1
+ error={error}
initialValues={initialValues}
journal={journal}
onSubmit={submitConfirmation}
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
index 7109f6c58..260aa47d1 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep1.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js
@@ -2,9 +2,9 @@ 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'
+import { Button, ValidatedField, TextField, th } from '@pubsweet/ui'
-const Step1 = ({ journal, handleSubmit }) => (
+const Step1 = ({ journal, handleSubmit, error }) => (
<FormContainer onSubmit={handleSubmit}>
<Row>
<RowItem>
@@ -16,6 +16,13 @@ const Step1 = ({ journal, handleSubmit }) => (
/>
</RowItem>
</Row>
+ {error && (
+ <Row>
+ <RowItem>
+ <Err>{error}</Err>
+ </RowItem>
+ </Row>
+ )}
<Row>
<Button primary type="submit">
CONFIRM
@@ -35,18 +42,23 @@ const FormContainer = styled.form``
const Row = styled.div`
display: flex;
flex-direction: row;
- margin: 20px 0;
+ margin: ${th('gridUnit')} 0;
align-items: center;
justify-content: space-evenly;
`
const RowItem = styled.div`
flex: 1;
- margin-right: 20px;
+ margin-right: ${th('gridUnit')};
`
const Label = styled.div`
- font-size: ${({ theme }) => theme.fontSizeBaseSmall};
- font-family: ${({ theme }) => theme.fontReading};
+ 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);
+`
--
GitLab