diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js index 983770136..dd291a095 100644 --- a/app/soapbox/features/security/index.js +++ b/app/soapbox/features/security/index.js @@ -46,9 +46,12 @@ const messages = defineMessages({ passwordHeader: { id: 'security.headers.update_password', defaultMessage: 'Change Password' }, tokenHeader: { id: 'security.headers.tokens', defaultMessage: 'Sessions' }, deactivateHeader: { id: 'security.headers.deactivate', defaultMessage: 'Deactivate Account' }, - deactivateText: { id: 'security.text.deactivate', defaultMessage: 'Deactivate your account. \n This action will hide your profile and your posts on this server. \n \ - However, your account will not be deleted and your data will not be purged. \n In addition, any of your data that was distributed to other servers will remain on those \ - servers.' }, + deactivateText: { id: 'security.text.deactivate', defaultMessage: 'To deactivate your account, you must first enter your account password, then click Deactivate Account. \ + \n Account deactivation will hide your profile and your posts on this server. \n However, your account will not be deleted and your data will not be purged. \ + \n In addition, any of your data that was previously distributed to other servers will remain on those servers.' }, + deactivateSubmit: { id: 'security.submit.deactivate', defaultMessage: 'Deactivate Account' }, + deactivateAccountSuccess: { id: 'security.deactivate_account.success', defaultMessage: 'Account successfully deactivated.' }, + deactivateAccountFail: { id: 'security.deactivate_account.fail', defaultMessage: 'Account deactivation failed.' }, }); export default @injectIntl @@ -67,6 +70,7 @@ class SecurityForm extends ImmutablePureComponent { + ); } @@ -282,3 +286,67 @@ class AuthTokenList extends ImmutablePureComponent { } } + +@connect(mapStateToProps) +@injectIntl +class DeactivateAccount extends ImmutablePureComponent { + + static propTypes = { + dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + state = { + password: '', + isLoading: false, + } + + handleInputChange = e => { + this.setState({ [e.target.name]: e.target.value }); + } + + handleSubmit = e => { + const { password } = this.state; + const { dispatch, intl } = this.props; + this.setState({ isLoading: true }); + return dispatch(deactivateAccount(password)).then(() => { + //this.setState({ email: '', password: '' }); // TODO: Maybe redirect user + dispatch(showAlert('', intl.formatMessage(messages.deactivateAccountSuccess))); + }).catch(error => { + this.setState({ password: '' }); + dispatch(showAlert('', intl.formatMessage(messages.deactivateAccountFail))); + }).then(() => { + this.setState({ isLoading: false }); + }); + } + + render() { + const { intl } = this.props; + + return ( + +

{intl.formatMessage(messages.deactivateHeader)}

+

+ {intl.formatMessage(messages.deactivateText)} +

+
+ + +
+ +
+
+
+
+ ); + } + +}