diff --git a/app/soapbox/actions/security.js b/app/soapbox/actions/security.js index 504cfc8f0..3779a58a8 100644 --- a/app/soapbox/actions/security.js +++ b/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; }); }; } diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js index 51064852e..77cd7224c 100644 --- a/app/soapbox/features/security/index.js +++ b/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 ( + ); } @@ -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 ( + + + + + + + + + {intl.formatMessage(messages.submit)} + + + + + + ); + } + +}