diff --git a/packages/component-faraday-ui/src/PasswordConfirmation.js b/packages/component-faraday-ui/src/PasswordConfirmation.js index 9bd7fcbd7e568cdd39353bf32831f2952dcd39bb..a6aa981d222e97d319560e57ab3ebebdba5286ef 100644 --- a/packages/component-faraday-ui/src/PasswordConfirmation.js +++ b/packages/component-faraday-ui/src/PasswordConfirmation.js @@ -1,4 +1,5 @@ import React, { Fragment } from 'react' +import PropTypes from 'prop-types' import { required } from 'xpub-validators' import { connect } from 'react-redux' import { getFormValues } from 'redux-form' @@ -24,7 +25,7 @@ const PasswordConfirmation = ({ minLength, atLeastOneDigit, atLeastOneUppercase, - submitFailed = false, + submitFailed, atLeastOneLowerrcase, atLeastOnePunctuation, }) => ( @@ -93,6 +94,34 @@ const PasswordConfirmation = ({ </Row> </Fragment> ) +PasswordConfirmation.propTypes = { + /** Name of the redux form. */ + formName: PropTypes.string, + /** Label name for password input */ + formLabel: PropTypes.string, + /** If the password requirements are not fulfilled it will return true. */ + submitFailed: PropTypes.bool, + /** If the password's length is greater or equal than the minimum value, it will return true. */ + minLength: PropTypes.func, + /** If the password has at least one digit it will return true. */ + atLeastOneDigit: PropTypes.func, + /** If the password has at least one uppercase it will return true. */ + atLeastOneUppercase: PropTypes.func, + /** If the password has at least one lowercase it will return true. */ + atLeastOneLowerrcase: PropTypes.func, + /** If the password has at least one punctuation it will return true. */ + atLeastOnePunctuation: PropTypes.func, +} +PasswordConfirmation.defaultProps = { + formName: undefined, + formLabel: undefined, + submitFailed: false, + minLength: undefined, + atLeastOneDigit: undefined, + atLeastOneUppercase: undefined, + atLeastOneLowerrcase: undefined, + atLeastOnePunctuation: undefined, +} export default compose( connect((state, props) => ({ diff --git a/packages/component-faraday-ui/src/PasswordConfirmation.md b/packages/component-faraday-ui/src/PasswordConfirmation.md index ddfe53a6c6fa3868f3d0f0da84b81d001157b275..88bb5be4644f8a39c54c551884790fd33b0fd182 100644 --- a/packages/component-faraday-ui/src/PasswordConfirmation.md +++ b/packages/component-faraday-ui/src/PasswordConfirmation.md @@ -1,5 +1,16 @@ ```js -<div> -<PasswordConfirmation/> -</div> -``` \ No newline at end of file +const React = require('react') +const reduxForm = require('redux-form').reduxForm; + +const PasswordField = () => ( + <PasswordConfirmation formLabel="Password" formName="signUpInvitation" /> +) + +const Form = reduxForm({ + form: 'signUpInvitation', + destroyOnUnmount: false, + forceUnregisterOnUnmount: true, +})(PasswordField); + +<Form /> +``` diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep1.js b/packages/components-faraday/src/components/SignUp/SignUpStep1.js index ffbc29dfa647bcaeaa763130b23bed0fb21ad1dc..a8b701635cfaca53f28369343a3ef3738b95a365 100644 --- a/packages/components-faraday/src/components/SignUp/SignUpStep1.js +++ b/packages/components-faraday/src/components/SignUp/SignUpStep1.js @@ -10,7 +10,8 @@ import { PasswordConfirmation, } from 'pubsweet-component-faraday-ui' -import { passwordValidator, emailValidator } from '../utils' +import { emailValidator } from '../utils' +import { passwordValidator } from '../../../../component-faraday-ui/src/Utils' const EmailField = input => <TextField {...input} type="email" />