Get ChangePasswordForm working

app/soapbox/actions/security.js

@@ -32,9 +32,11 @@ export function changePassword(oldPassword, newPassword, confirmation) {
       new_password: newPassword,
       new_password_confirmation: confirmation,
     }).then(response => {
+      if (response.data.error) throw response.data.error; // This endpoint returns HTTP 200 even on failure
       dispatch({ type: CHANGE_PASSWORD_SUCCESS, response });
     }).catch(error => {
-      dispatch({ type: CHANGE_PASSWORD_FAIL, error });
+      dispatch({ type: CHANGE_PASSWORD_FAIL, error, skipAlert: true });
+      throw error;
     });
   };
 }

app/soapbox/features/security/index.js

@@ -10,7 +10,7 @@ import {
   FieldsGroup,
   TextInput,
 } from 'soapbox/features/forms';
-import { changeEmail } from 'soapbox/actions/security';
+import { changeEmail, changePassword } from 'soapbox/actions/security';
 import { showAlert } from 'soapbox/actions/alerts';
 
 const messages = defineMessages({
@@ -18,6 +18,8 @@ const messages = defineMessages({
   submit: { id: 'security.submit', defaultMessage: 'Save changes' },
   updateEmailSuccess: { id: 'security.update_email.success', defaultMessage: 'Email successfully updated.' },
   updateEmailFail: { id: 'security.update_email.fail', defaultMessage: 'Update email failed.' },
+  updatePasswordSuccess: { id: 'security.update_password.success', defaultMessage: 'Password successfully updated.' },
+  updatePasswordFail: { id: 'security.update_password.fail', defaultMessage: 'Update password failed.' },
 });
 
 export default @injectIntl
@@ -29,6 +31,7 @@ class SecurityForm extends ImmutablePureComponent {
     return (
       <Column icon='lock' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <ChangeEmailForm />
+        <ChangePasswordForm />
       </Column>
     );
   }
@@ -103,3 +106,83 @@ class ChangeEmailForm extends ImmutablePureComponent {
   }
 
 }
+
+@connect()
+@injectIntl
+class ChangePasswordForm extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    oldPassword: '',
+    newPassword: '',
+    confirmation: '',
+    isLoading: false,
+  }
+
+  handleInputChange = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  }
+
+  clearForm = () => {
+    this.setState({ oldPassword: '', newPassword: '', confirmation: '' });
+  }
+
+  handleSubmit = e => {
+    const { oldPassword, newPassword, confirmation } = this.state;
+    const { dispatch, intl } = this.props;
+    this.setState({ isLoading: true });
+    return dispatch(changePassword(oldPassword, newPassword, confirmation)).then(() => {
+      this.clearForm(); // TODO: Maybe redirect user
+      dispatch(showAlert('', intl.formatMessage(messages.updatePasswordSuccess)));
+    }).catch(error => {
+      this.clearForm();
+      dispatch(showAlert('', intl.formatMessage(messages.updatePasswordFail)));
+    }).then(() => {
+      this.setState({ isLoading: false });
+    });
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    return (
+      <SimpleForm onSubmit={this.handleSubmit}>
+        <fieldset disabled={this.state.isLoading}>
+          <FieldsGroup>
+            <SimpleInput
+              type='password'
+              label='Current password'
+              name='oldPassword'
+              onChange={this.handleInputChange}
+              value={this.state.oldPassword}
+            />
+            <SimpleInput
+              type='password'
+              label='New password'
+              name='newPassword'
+              onChange={this.handleInputChange}
+              value={this.state.newPassword}
+            />
+            <SimpleInput
+              type='password'
+              label='New password (again)'
+              name='confirmation'
+              onChange={this.handleInputChange}
+              value={this.state.confirmation}
+            />
+            <div className='actions'>
+              <button name='button' type='submit' className='btn button button-primary'>
+                {intl.formatMessage(messages.submit)}
+              </button>
+            </div>
+          </FieldsGroup>
+        </fieldset>
+      </SimpleForm>
+    );
+  }
+
+}