From 98604e9169ab6c9ff61d83cd42901e9f1e96117a Mon Sep 17 00:00:00 2001
From: Anca Ursachi <anca.ursachi@thinslices.com>
Date: Wed, 28 Nov 2018 15:37:57 +0200
Subject: [PATCH] feat(passwordConfirmation.js): Making the regex for password
field.
---
.../src/PasswordConfirmation.js | 52 +++++++++++++++----
1 file changed, 43 insertions(+), 9 deletions(-)
diff --git a/packages/component-faraday-ui/src/PasswordConfirmation.js b/packages/component-faraday-ui/src/PasswordConfirmation.js
index 3df67b4f8..0606bf9d2 100644
--- a/packages/component-faraday-ui/src/PasswordConfirmation.js
+++ b/packages/component-faraday-ui/src/PasswordConfirmation.js
@@ -1,13 +1,32 @@
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')};
`
--
GitLab