Get ChangePasswordForm working
This commit is contained in:
parent
e972cfc191
commit
da44a769d6
2 changed files with 87 additions and 2 deletions
|
@ -32,9 +32,11 @@ export function changePassword(oldPassword, newPassword, confirmation) {
|
||||||
new_password: newPassword,
|
new_password: newPassword,
|
||||||
new_password_confirmation: confirmation,
|
new_password_confirmation: confirmation,
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
|
if (response.data.error) throw response.data.error; // This endpoint returns HTTP 200 even on failure
|
||||||
dispatch({ type: CHANGE_PASSWORD_SUCCESS, response });
|
dispatch({ type: CHANGE_PASSWORD_SUCCESS, response });
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
dispatch({ type: CHANGE_PASSWORD_FAIL, error });
|
dispatch({ type: CHANGE_PASSWORD_FAIL, error, skipAlert: true });
|
||||||
|
throw error;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@ import {
|
||||||
FieldsGroup,
|
FieldsGroup,
|
||||||
TextInput,
|
TextInput,
|
||||||
} from 'soapbox/features/forms';
|
} from 'soapbox/features/forms';
|
||||||
import { changeEmail } from 'soapbox/actions/security';
|
import { changeEmail, changePassword } from 'soapbox/actions/security';
|
||||||
import { showAlert } from 'soapbox/actions/alerts';
|
import { showAlert } from 'soapbox/actions/alerts';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
|
@ -18,6 +18,8 @@ const messages = defineMessages({
|
||||||
submit: { id: 'security.submit', defaultMessage: 'Save changes' },
|
submit: { id: 'security.submit', defaultMessage: 'Save changes' },
|
||||||
updateEmailSuccess: { id: 'security.update_email.success', defaultMessage: 'Email successfully updated.' },
|
updateEmailSuccess: { id: 'security.update_email.success', defaultMessage: 'Email successfully updated.' },
|
||||||
updateEmailFail: { id: 'security.update_email.fail', defaultMessage: 'Update email failed.' },
|
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
|
export default @injectIntl
|
||||||
|
@ -29,6 +31,7 @@ class SecurityForm extends ImmutablePureComponent {
|
||||||
return (
|
return (
|
||||||
<Column icon='lock' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
<Column icon='lock' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
||||||
<ChangeEmailForm />
|
<ChangeEmailForm />
|
||||||
|
<ChangePasswordForm />
|
||||||
</Column>
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue