feat(passwordConfirmation.js): Making the regex for password field.

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 { ValidatedField, TextField } from '@pubsweet/ui'
 import { th } from '@pubsweet/ui-toolkit'
-import { Row, Item, Label } from 'pubsweet-component-faraday-ui'
+import { Row, Item, Label, IconButton } from 'pubsweet-component-faraday-ui'
 import styled from 'styled-components'
 
 const PasswordField = input => <TextField {...input} type="password" />
 
-const PasswordConfirmation = () => (
+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 = '' } }) => (
   <Fragment>
     <Row mb={2}>
       <Item data-test-id="sign-up-password" vertical>
@@ -31,20 +50,33 @@ const PasswordConfirmation = () => (
     </Row>
     <Row mb={2}>
       <Item vertical>
-        <RulesTitle>The password must contain: </RulesTitle>
+        <div style={{ display: 'flex' }}>
+          <IconButton icon="info" iconSize={2} primary />
+          <RulesTitle>The password must contain: </RulesTitle>
+        </div>
         <Rules>
-          <Rule> at least 6 characters</Rule>
-          <Rule>at least 1 uppercase character (A-Z) </Rule>
-          <Rule>at least 1 lowercase character (a-z) </Rule>
-          <Rule>at least 1 digit (0-9)</Rule>
-          <Rule>at least 1 special character (punctuation) </Rule>
+          <Rule fulfilled={minLength(password, 6)}>at least 6 characters</Rule>
+          <Rule fulfilled={atLeastOneUppercase(password)}>
+            at least 1 uppercase character (A-Z)
+          </Rule>
+          <Rule fulfilled={atLeastOneLowerrcase(password)}>
+            at least 1 lowercase character (a-z)
+          </Rule>
+          <Rule fulfilled={atLeastOneDigit(password)}>
+            at least 1 digit (0-9)
+          </Rule>
+          <Rule fulfilled={atLeastOnePunctuation(password)}>
+            at least 1 special character (punctuation)
+          </Rule>
         </Rules>
       </Item>
     </Row>
   </Fragment>
 )
 
-export default PasswordConfirmation
+export default connect(state => ({
+  formValues: getFormValues('signUpInvitation')(state),
+}))(PasswordConfirmation)
 
 const RulesTitle = styled.p`
   margin: 0px;
@@ -75,4 +107,6 @@ const Rules = styled.div`
 `
 const Rule = styled.p`
   margin: 0px;
+  text-decoration: ${props => (props.fulfilled ? 'line-through' : 'none')};
+  color: ${props => (props.fulfilled ? th('colorPrimary') : 'inherit')};
 `