From e4872bcc31647bce1042895a1c8edf2549b29909 Mon Sep 17 00:00:00 2001
From: Tania Fecheta <tania.fecheta@thinslices.com>
Date: Wed, 28 Nov 2018 18:11:23 +0200
Subject: [PATCH] feat(passwordConfirmation): make the text red in case of
error - wip
---
.../src/PasswordConfirmation.js | 37 ++++++++++++++++---
.../src/components/utils.js | 8 +++-
2 files changed, 38 insertions(+), 7 deletions(-)
diff --git a/packages/component-faraday-ui/src/PasswordConfirmation.js b/packages/component-faraday-ui/src/PasswordConfirmation.js
index 0606bf9d2..f1b441b90 100644
--- a/packages/component-faraday-ui/src/PasswordConfirmation.js
+++ b/packages/component-faraday-ui/src/PasswordConfirmation.js
@@ -1,11 +1,12 @@
import React, { Fragment } from 'react'
import { required } from 'xpub-validators'
import { connect } from 'react-redux'
-import { getFormValues } from 'redux-form'
+import { getFormValues, getFormSyncErrors } from 'redux-form'
import { ValidatedField, TextField } from '@pubsweet/ui'
import { th } from '@pubsweet/ui-toolkit'
import { Row, Item, Label, IconButton } from 'pubsweet-component-faraday-ui'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
+import { get } from 'lodash'
const PasswordField = input => <TextField {...input} type="password" />
@@ -26,7 +27,10 @@ const atLeastOnePunctuation = value => {
const punctuationRegex = new RegExp(/([,'!@#$%^&*(){}[\]<>?/\\|.:;_-])+/)
return punctuationRegex.test(value)
}
-const PasswordConfirmation = ({ formValues: { password = '' } }) => (
+const PasswordConfirmation = ({
+ formValues: { password = '' },
+ formErrors = {},
+}) => (
<Fragment>
<Row mb={2}>
<Item data-test-id="sign-up-password" vertical>
@@ -55,7 +59,12 @@ const PasswordConfirmation = ({ formValues: { password = '' } }) => (
<RulesTitle>The password must contain: </RulesTitle>
</div>
<Rules>
- <Rule fulfilled={minLength(password, 6)}>at least 6 characters</Rule>
+ <Rule
+ error={get(formErrors, 'minLength', false)}
+ fulfilled={minLength(password, 6)}
+ >
+ at least 6 characters
+ </Rule>
<Rule fulfilled={atLeastOneUppercase(password)}>
at least 1 uppercase character (A-Z)
</Rule>
@@ -76,6 +85,7 @@ const PasswordConfirmation = ({ formValues: { password = '' } }) => (
export default connect(state => ({
formValues: getFormValues('signUpInvitation')(state),
+ formErrors: getFormSyncErrors('signUpInvitation')(state),
}))(PasswordConfirmation)
const RulesTitle = styled.p`
@@ -105,8 +115,23 @@ const Rules = styled.div`
letter-spacing: normal;
color: var(--black);
`
+const ruleHelper = props => {
+ const textDecoration = props.fulfilled ? 'line-through' : 'none'
+
+ let textColor = 'inherit'
+ if (props.error) {
+ textColor = 'red'
+ } else if (props.fulfilled) {
+ textColor = 'green'
+ }
+
+ return css`
+ text-decoration: ${textDecoration};
+ color: ${textColor};
+ `
+}
+
const Rule = styled.p`
margin: 0px;
- text-decoration: ${props => (props.fulfilled ? 'line-through' : 'none')};
- color: ${props => (props.fulfilled ? th('colorPrimary') : 'inherit')};
+ ${ruleHelper};
`
diff --git a/packages/components-faraday/src/components/utils.js b/packages/components-faraday/src/components/utils.js
index b6393a018..d03f6c364 100644
--- a/packages/components-faraday/src/components/utils.js
+++ b/packages/components-faraday/src/components/utils.js
@@ -103,7 +103,13 @@ export const redirectToError = redirectFn => err => {
}
export const passwordValidator = values => {
- const errors = {}
+ const errors = {
+ minLength: false,
+ }
+ const minLength = (value, min) => !!(value && value.length > min)
+ if (minLength(values.password, 6) === false) {
+ errors.minLength = true
+ }
if (!values.password) {
errors.password = 'Required'
}
--
GitLab