feat(passwordConfirmation): make the text red in case of error - wip

packages/component-faraday-ui/src/PasswordConfirmation.js

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

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'
   }