maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 13:06:03 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor PasswordResetForm: use Form connector from Final Form

Browse source
This commit is contained in:
Vesa Luusua 2018-04-16 21:20:58 +03:00
parent f786ea2a79
commit 8f09d6aa86
2 changed files with 83 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/containers/PasswordResetForm/PasswordResetForm.example.js
View file

@ -4,6 +4,7 @@ import PasswordResetForm from './PasswordResetForm';
export const Empty = {
component: PasswordResetForm,
props: {
formId: 'PasswordResetFormExample',
onSubmit(values) {
console.log('submit with values:', values);
},

157
src/containers/PasswordResetForm/PasswordResetForm.js
View file

@ -2,105 +2,112 @@ import React from 'react';
import PropTypes from 'prop-types';
import { compose } from 'redux';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import { reduxForm, propTypes as formPropTypes } from 'redux-form';
import { Form as FinalForm } from 'react-final-form';
import classNames from 'classnames';
import { Form, PrimaryButton, TextInputField } from '../../components';
import { Form, PrimaryButton, FieldTextInput } from '../../components';
import * as validators from '../../util/validators';
import css from './PasswordResetForm.css';
const PasswordResetFormComponent = props => {
const {
rootClassName,
className,
form,
handleSubmit,
submitting,
inProgress,
intl,
invalid,
} = props;
const PasswordResetFormComponent = props => (
<FinalForm
{...props}
render={fieldRenderProps => {
const {
rootClassName,
className,
formId,
handleSubmit,
submitting,
inProgress,
intl,
invalid,
} = fieldRenderProps;
// password
const passwordLabel = intl.formatMessage({
id: 'PasswordResetForm.passwordLabel',
});
const passwordPlaceholder = intl.formatMessage({
id: 'PasswordResetForm.passwordPlaceholder',
});
const passwordRequiredMessage = intl.formatMessage({
id: 'PasswordResetForm.passwordRequired',
});
const passwordMinLengthMessage = intl.formatMessage(
{
id: 'PasswordResetForm.passwordTooShort',
},
{
minLength: validators.PASSWORD_MIN_LENGTH,
}
);
const passwordMaxLengthMessage = intl.formatMessage(
{
id: 'PasswordResetForm.passwordTooLong',
},
{
maxLength: validators.PASSWORD_MAX_LENGTH,
}
);
const passwordRequired = validators.requiredStringNoTrim(passwordRequiredMessage);
const passwordMinLength = validators.minLength(
passwordMinLengthMessage,
validators.PASSWORD_MIN_LENGTH
);
const passwordMaxLength = validators.maxLength(
passwordMaxLengthMessage,
validators.PASSWORD_MAX_LENGTH
);
// password
const passwordLabel = intl.formatMessage({
id: 'PasswordResetForm.passwordLabel',
});
const passwordPlaceholder = intl.formatMessage({
id: 'PasswordResetForm.passwordPlaceholder',
});
const passwordRequiredMessage = intl.formatMessage({
id: 'PasswordResetForm.passwordRequired',
});
const passwordMinLengthMessage = intl.formatMessage(
{
id: 'PasswordResetForm.passwordTooShort',
},
{
minLength: validators.PASSWORD_MIN_LENGTH,
}
);
const passwordMaxLengthMessage = intl.formatMessage(
{
id: 'PasswordResetForm.passwordTooLong',
},
{
maxLength: validators.PASSWORD_MAX_LENGTH,
}
);
const passwordRequired = validators.requiredStringNoTrim(passwordRequiredMessage);
const passwordMinLength = validators.minLength(
passwordMinLengthMessage,
validators.PASSWORD_MIN_LENGTH
);
const passwordMaxLength = validators.maxLength(
passwordMaxLengthMessage,
validators.PASSWORD_MAX_LENGTH
);
const classes = classNames(rootClassName || css.root, className);
const classes = classNames(rootClassName || css.root, className);
const submitInProgress = submitting || inProgress;
const submitDisabled = invalid || submitInProgress;
const submitInProgress = submitting || inProgress;
const submitDisabled = invalid || submitInProgress;
return (
<Form className={classes} onSubmit={handleSubmit}>
<TextInputField
className={css.password}
type="password"
name="password"
autoComplete="new-password"
id={`${form}.password`}
label={passwordLabel}
placeholder={passwordPlaceholder}
validate={[passwordRequired, passwordMinLength, passwordMaxLength]}
/>
<PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
<FormattedMessage id="PasswordResetForm.submitButtonText" />
</PrimaryButton>
</Form>
);
};
return (
<Form className={classes} onSubmit={handleSubmit}>
<FieldTextInput
className={css.password}
type="password"
id={formId ? `${formId}.password` : 'password'}
name="password"
autoComplete="new-password"
label={passwordLabel}
placeholder={passwordPlaceholder}
validate={validators.composeValidators(
passwordRequired,
passwordMinLength,
passwordMaxLength
)}
/>
<PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
<FormattedMessage id="PasswordResetForm.submitButtonText" />
</PrimaryButton>
</Form>
);
}}
/>
);
PasswordResetFormComponent.defaultProps = {
rootClassName: null,
className: null,
inProgress: false,
formId: null,
};
const { string, bool } = PropTypes;
PasswordResetFormComponent.propTypes = {
...formPropTypes,
rootClassName: string,
className: string,
inProgress: bool,
intl: intlShape.isRequired,
formId: string,
};
const defaultFormName = 'PasswordResetForm';
const PasswordResetForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(
PasswordResetFormComponent
);
const PasswordResetForm = compose(injectIntl)(PasswordResetFormComponent);
PasswordResetForm.displayName = 'PasswordResetForm';
export default PasswordResetForm;