feat(add error messages in case password rules are not fulfilled): add error...

feat(add error messages in case password rules are not fulfilled): add error messages in case passwo

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

@@ -7,29 +7,27 @@ import { th } from '@pubsweet/ui-toolkit'
 import { Row, Item, Label, IconButton } from 'pubsweet-component-faraday-ui'
 import styled, { css } from 'styled-components'
 import { get } from 'lodash'
+import { withProps, compose } from 'recompose'
+import {
+  minLength,
+  atLeastOneDigit,
+  atLeastOneUppercase,
+  atLeastOneLowerrcase,
+  atLeastOnePunctuation,
+} from '../../components-faraday/src/components/utils'
 
 const PasswordField = input => <TextField {...input} type="password" />
 
-const minLength = (value, min) => !!(value && value.length > min)
-const atLeastOneUppercase = value => {
-  const uppercaseRegex = new RegExp(/([A-Z])+/)
-  return uppercaseRegex.test(value)
-}
-const atLeastOneLowerrcase = value => {
-  const lowercaseRegex = new RegExp(/([a-z])+/)
-  return lowercaseRegex.test(value)
-}
-const atLeastOneDigit = value => {
-  const digitRegex = new RegExp(/([0-9])+/)
-  return digitRegex.test(value)
-}
-const atLeastOnePunctuation = value => {
-  const punctuationRegex = new RegExp(/([,'!@#$%^&*(){}[\]<>?/\\|.:;_-])+/)
-  return punctuationRegex.test(value)
-}
 const PasswordConfirmation = ({
-  formValues: { password = '' },
+  minLength,
   formErrors = {},
+  atLeastOneDigit,
+  submitting = false,
+  atLeastOneUppercase,
+  submitFailed = false,
+  atLeastOneLowerrcase,
+  formSubmitErrors = {},
+  atLeastOnePunctuation,
 }) => (
   <Fragment>
     <Row mb={2}>
@@ -59,22 +57,31 @@ const PasswordConfirmation = ({
           <RulesTitle>The password must contain: </RulesTitle>
         </div>
         <Rules>
-          <Rule
-            error={get(formErrors, 'minLength', false)}
-            fulfilled={minLength(password, 6)}
-          >
+          <Rule error={submitFailed && !minLength} fulfilled={minLength}>
             at least 6 characters
           </Rule>
-          <Rule fulfilled={atLeastOneUppercase(password)}>
+          <Rule
+            error={submitFailed && !atLeastOneUppercase}
+            fulfilled={atLeastOneUppercase}
+          >
             at least 1 uppercase character (A-Z)
           </Rule>
-          <Rule fulfilled={atLeastOneLowerrcase(password)}>
+          <Rule
+            error={submitFailed && !atLeastOneLowerrcase}
+            fulfilled={atLeastOneLowerrcase}
+          >
             at least 1 lowercase character (a-z)
           </Rule>
-          <Rule fulfilled={atLeastOneDigit(password)}>
+          <Rule
+            error={submitFailed && !atLeastOneDigit}
+            fulfilled={atLeastOneDigit}
+          >
             at least 1 digit (0-9)
           </Rule>
-          <Rule fulfilled={atLeastOnePunctuation(password)}>
+          <Rule
+            error={submitFailed && !atLeastOnePunctuation}
+            fulfilled={atLeastOnePunctuation}
+          >
             at least 1 special character (punctuation)
           </Rule>
         </Rules>
@@ -83,15 +90,25 @@ const PasswordConfirmation = ({
   </Fragment>
 )
 
-export default connect(state => ({
-  formValues: getFormValues('signUpInvitation')(state),
-  formErrors: getFormSyncErrors('signUpInvitation')(state),
-}))(PasswordConfirmation)
+export default compose(
+  connect(state => ({
+    formValues: getFormValues('signUpInvitation')(state),
+    formErrors: getFormSyncErrors('signUpInvitation')(state),
+    submitFailed: get(state, 'form.signUpInvitation.submitFailed', false),
+  })),
+  withProps(({ formValues: { password = '' } }) => ({
+    minLength: minLength(password, 6),
+    atLeastOneUppercase: atLeastOneUppercase(password),
+    atLeastOneLowerrcase: atLeastOneLowerrcase(password),
+    atLeastOneDigit: atLeastOneDigit(password),
+    atLeastOnePunctuation: atLeastOnePunctuation(password),
+  })),
+)(PasswordConfirmation)
 
 const RulesTitle = styled.p`
   margin: 0px;
-  width: 152px;
-  height: 20px;
+  width: calc(${th('gridUnit')} * 19);
+  height: calc(${th('gridUnit')} * 2);
   background-color: var(--slate-grey);
   font-family: 'Myriad Pro';
   font-size: 13px;

packages/components-faraday/src/components/utils.js

@@ -101,21 +101,45 @@ export const redirectToError = redirectFn => err => {
     errorText || 'Something went wrong. Please try again.',
   )
 }
+export const minLength = (value, min) => !!(value && value.length >= min)
+export const atLeastOneUppercase = value => {
+  const uppercaseRegex = new RegExp(/([A-Z])+/)
+  return uppercaseRegex.test(value)
+}
+export const atLeastOneLowerrcase = value => {
+  const lowercaseRegex = new RegExp(/([a-z])+/)
+  return lowercaseRegex.test(value)
+}
+export const atLeastOneDigit = value => {
+  const digitRegex = new RegExp(/([0-9])+/)
+  return digitRegex.test(value)
+}
+export const atLeastOnePunctuation = value => {
+  const punctuationRegex = new RegExp(/([,'!@#$%^&*=(){}[\]<>?/\\|.:;_-])+/)
+  return punctuationRegex.test(value)
+}
 
 export const passwordValidator = values => {
-  const errors = {
-    minLength: false,
-  }
-  const minLength = (value, min) => !!(value && value.length > min)
-  if (minLength(values.password, 6) === false) {
-    errors.minLength = true
+  const errors = {}
+  const { password, confirmPassword } = values
+
+  if (
+    !(
+      minLength(password, 6) &&
+      atLeastOneUppercase(password) &&
+      atLeastOneLowerrcase(password) &&
+      atLeastOnePunctuation(password) &&
+      atLeastOneDigit(password)
+    )
+  ) {
+    errors.password = 'Password criteria not met'
   }
-  if (!values.password) {
+  if (!password) {
     errors.password = 'Required'
   }
-  if (!values.confirmPassword) {
+  if (!confirmPassword) {
     errors.confirmPassword = 'Required'
-  } else if (values.confirmPassword !== values.password) {
+  } else if (confirmPassword !== password) {
     errors.confirmPassword = "Passwords don't match."
   }