diff --git a/src/containers/PasswordChangeForm/PasswordChangeForm.js b/src/containers/PasswordChangeForm/PasswordChangeForm.js
index 83e76089..55711e92 100644
--- a/src/containers/PasswordChangeForm/PasswordChangeForm.js
+++ b/src/containers/PasswordChangeForm/PasswordChangeForm.js
@@ -2,13 +2,13 @@ import React, { Component } 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 { propTypes } from '../../util/types';
import * as validators from '../../util/validators';
import { ensureCurrentUser } from '../../util/data';
import { isChangePasswordWrongPassword } from '../../util/errors';
-import { Form, PrimaryButton, TextInputField } from '../../components';
+import { Form, PrimaryButton, FieldTextInput } from '../../components';
import css from './PasswordChangeForm.css';
@@ -23,158 +23,173 @@ class PasswordChangeFormComponent extends Component {
window.clearTimeout(this.resetTimeoutId);
}
render() {
- const {
- rootClassName,
- className,
- changePasswordError,
- currentUser,
- form,
- handleSubmit,
- submitting,
- inProgress,
- intl,
- invalid,
- pristine,
- ready,
- reset,
- } = this.props;
-
- const user = ensureCurrentUser(currentUser);
-
- if (!user.id) {
- return null;
- }
-
- // New password
- const newPasswordLabel = intl.formatMessage({
- id: 'PasswordChangeForm.newPasswordLabel',
- });
- const newPasswordPlaceholder = intl.formatMessage({
- id: 'PasswordChangeForm.newPasswordPlaceholder',
- });
- const newPasswordRequiredMessage = intl.formatMessage({
- id: 'PasswordChangeForm.newPasswordRequired',
- });
- const newPasswordRequired = validators.requiredStringNoTrim(newPasswordRequiredMessage);
-
- const passwordMinLengthMessage = intl.formatMessage(
- {
- id: 'PasswordChangeForm.passwordTooShort',
- },
- {
- minLength: validators.PASSWORD_MIN_LENGTH,
- }
- );
- const passwordMaxLengthMessage = intl.formatMessage(
- {
- id: 'PasswordChangeForm.passwordTooLong',
- },
- {
- maxLength: validators.PASSWORD_MAX_LENGTH,
- }
- );
-
- const passwordMinLength = validators.minLength(
- passwordMinLengthMessage,
- validators.PASSWORD_MIN_LENGTH
- );
- const passwordMaxLength = validators.maxLength(
- passwordMaxLengthMessage,
- validators.PASSWORD_MAX_LENGTH
- );
-
- // password
- const passwordLabel = intl.formatMessage({
- id: 'PasswordChangeForm.passwordLabel',
- });
- const passwordPlaceholder = intl.formatMessage({
- id: 'PasswordChangeForm.passwordPlaceholder',
- });
- const passwordRequiredMessage = intl.formatMessage({
- id: 'PasswordChangeForm.passwordRequired',
- });
-
- const passwordRequired = validators.requiredStringNoTrim(passwordRequiredMessage);
-
- const passwordFailedMessage = intl.formatMessage({
- id: 'PasswordChangeForm.passwordFailed',
- });
- const passwordErrorText = isChangePasswordWrongPassword(changePasswordError)
- ? passwordFailedMessage
- : null;
-
- const confirmClasses = classNames(css.confirmChangesSection, {
- [css.confirmChangesSectionVisible]: !pristine,
- });
-
- const genericFailure =
- changePasswordError && !passwordErrorText ? (
-
-