2016-08-03 13:34:13 +03:00
|
|
|
/*
|
|
|
|
Copyright 2016 OpenMarket Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2016-08-03 13:34:13 +03:00
|
|
|
|
|
|
|
import sdk from '../../../index';
|
2017-07-27 19:19:18 +03:00
|
|
|
import Analytics from '../../../Analytics';
|
2016-08-03 13:34:13 +03:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
2017-03-13 17:10:14 +03:00
|
|
|
import * as Lifecycle from '../../../Lifecycle';
|
2019-03-20 13:54:06 +03:00
|
|
|
import Velocity from 'velocity-animate';
|
2017-05-30 17:09:57 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2016-08-03 13:34:13 +03:00
|
|
|
|
|
|
|
export default class DeactivateAccountDialog extends React.Component {
|
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
|
|
|
|
2016-08-04 12:51:31 +03:00
|
|
|
this._passwordField = null;
|
2016-08-03 13:34:13 +03:00
|
|
|
|
|
|
|
this._onOk = this._onOk.bind(this);
|
|
|
|
this._onCancel = this._onCancel.bind(this);
|
|
|
|
this._onPasswordFieldChange = this._onPasswordFieldChange.bind(this);
|
2018-05-23 18:33:32 +03:00
|
|
|
this._onEraseFieldChange = this._onEraseFieldChange.bind(this);
|
|
|
|
|
2016-08-03 13:34:13 +03:00
|
|
|
this.state = {
|
|
|
|
confirmButtonEnabled: false,
|
|
|
|
busy: false,
|
2018-10-30 01:57:33 +03:00
|
|
|
shouldErase: false,
|
2016-08-03 13:34:13 +03:00
|
|
|
errStr: null,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
_onPasswordFieldChange(ev) {
|
|
|
|
this.setState({
|
|
|
|
confirmButtonEnabled: Boolean(ev.target.value),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-05-23 18:33:32 +03:00
|
|
|
_onEraseFieldChange(ev) {
|
|
|
|
this.setState({
|
|
|
|
shouldErase: ev.target.checked,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-05-23 15:35:42 +03:00
|
|
|
async _onOk() {
|
2016-08-03 13:34:13 +03:00
|
|
|
this.setState({busy: true});
|
2018-05-23 18:33:32 +03:00
|
|
|
|
|
|
|
try {
|
|
|
|
// This assumes that the HS requires password UI auth
|
|
|
|
// for this endpoint. In reality it could be any UI auth.
|
|
|
|
const auth = {
|
2018-05-23 15:35:42 +03:00
|
|
|
type: 'm.login.password',
|
|
|
|
user: MatrixClientPeg.get().credentials.userId,
|
|
|
|
password: this._passwordField.value,
|
2018-05-23 18:33:32 +03:00
|
|
|
};
|
|
|
|
await MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase);
|
2018-05-23 15:35:42 +03:00
|
|
|
} catch (err) {
|
2017-05-30 17:09:57 +03:00
|
|
|
let errStr = _t('Unknown error');
|
2016-08-03 13:34:13 +03:00
|
|
|
// https://matrix.org/jira/browse/SYN-744
|
|
|
|
if (err.httpStatus == 401 || err.httpStatus == 403) {
|
2017-05-30 17:09:57 +03:00
|
|
|
errStr = _t('Incorrect password');
|
2016-08-03 13:34:13 +03:00
|
|
|
Velocity(this._passwordField, "callout.shake", 300);
|
|
|
|
}
|
|
|
|
this.setState({
|
|
|
|
busy: false,
|
|
|
|
errStr: errStr,
|
|
|
|
});
|
2018-05-23 15:35:42 +03:00
|
|
|
return;
|
|
|
|
}
|
2018-05-23 18:33:32 +03:00
|
|
|
|
2018-05-23 15:35:42 +03:00
|
|
|
Analytics.trackEvent('Account', 'Deactivate Account');
|
|
|
|
Lifecycle.onLoggedOut();
|
|
|
|
this.props.onFinished(false);
|
2016-08-03 13:34:13 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
_onCancel() {
|
|
|
|
this.props.onFinished(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-12-18 13:08:51 +03:00
|
|
|
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
2016-08-03 13:34:13 +03:00
|
|
|
const Loader = sdk.getComponent("elements.Spinner");
|
|
|
|
let passwordBoxClass = '';
|
|
|
|
|
|
|
|
let error = null;
|
|
|
|
if (this.state.errStr) {
|
|
|
|
error = <div className="error">
|
2017-10-11 19:56:17 +03:00
|
|
|
{ this.state.errStr }
|
2017-01-20 17:22:27 +03:00
|
|
|
</div>;
|
2016-08-03 13:34:13 +03:00
|
|
|
passwordBoxClass = 'error';
|
|
|
|
}
|
|
|
|
|
2017-06-08 11:44:58 +03:00
|
|
|
const okLabel = this.state.busy ? <Loader /> : _t('Deactivate Account');
|
2016-08-03 13:34:13 +03:00
|
|
|
const okEnabled = this.state.confirmButtonEnabled && !this.state.busy;
|
|
|
|
|
|
|
|
let cancelButton = null;
|
|
|
|
if (!this.state.busy) {
|
|
|
|
cancelButton = <button onClick={this._onCancel} autoFocus={true}>
|
2017-10-11 19:56:17 +03:00
|
|
|
{ _t("Cancel") }
|
2017-01-20 17:22:27 +03:00
|
|
|
</button>;
|
2016-08-03 13:34:13 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2017-12-18 13:08:51 +03:00
|
|
|
<BaseDialog className="mx_DeactivateAccountDialog"
|
|
|
|
onFinished={this.props.onFinished}
|
|
|
|
onEnterPressed={this.onOk}
|
|
|
|
titleClass="danger"
|
2018-05-23 18:33:32 +03:00
|
|
|
title={_t("Deactivate Account")}
|
|
|
|
>
|
2016-08-03 13:34:13 +03:00
|
|
|
<div className="mx_Dialog_content">
|
2018-05-23 18:33:32 +03:00
|
|
|
<p>{ _t(
|
|
|
|
"This will make your account permanently unusable. " +
|
2018-05-24 13:50:45 +03:00
|
|
|
"You will not be able to log in, and no one will be able to re-register the same " +
|
|
|
|
"user ID. " +
|
|
|
|
"This will cause your account to leave all rooms it is participating in, and it " +
|
|
|
|
"will remove your account details from your identity server. " +
|
2018-05-23 18:33:32 +03:00
|
|
|
"<b>This action is irreversible.</b>",
|
|
|
|
{},
|
|
|
|
{ b: (sub) => <b> { sub } </b> },
|
|
|
|
) }</p>
|
|
|
|
|
|
|
|
<p>{ _t(
|
2018-05-24 13:50:45 +03:00
|
|
|
"Deactivating your account <b>does not by default cause us to forget messages you " +
|
|
|
|
"have sent.</b> " +
|
|
|
|
"If you would like us to forget your messages, please tick the box below.",
|
2018-05-23 18:33:32 +03:00
|
|
|
{},
|
|
|
|
{ b: (sub) => <b> { sub } </b> },
|
|
|
|
) }</p>
|
|
|
|
|
|
|
|
<p>{ _t(
|
|
|
|
"Message visibility in Matrix is similar to email. " +
|
2018-05-24 13:50:45 +03:00
|
|
|
"Our forgetting your messages means that messages you have sent will not be shared " +
|
|
|
|
"with any new or unregistered users, but registered users who already have access " +
|
|
|
|
"to these messages will still have access to their copy.",
|
2018-05-23 18:33:32 +03:00
|
|
|
) }</p>
|
|
|
|
|
2018-05-24 13:50:45 +03:00
|
|
|
<div className="mx_DeactivateAccountDialog_input_section">
|
|
|
|
<p>
|
|
|
|
<label htmlFor="mx_DeactivateAccountDialog_erase_account_input">
|
|
|
|
<input
|
|
|
|
id="mx_DeactivateAccountDialog_erase_account_input"
|
|
|
|
type="checkbox"
|
|
|
|
checked={this.state.shouldErase}
|
|
|
|
onChange={this._onEraseFieldChange}
|
|
|
|
/>
|
|
|
|
{ _t(
|
|
|
|
"Please forget all messages I have sent when my account is deactivated " +
|
|
|
|
"(<b>Warning:</b> this will cause future users to see an incomplete view " +
|
|
|
|
"of conversations)",
|
|
|
|
{},
|
|
|
|
{ b: (sub) => <b>{ sub }</b> },
|
|
|
|
) }
|
|
|
|
</label>
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p>{ _t("To continue, please enter your password:") }</p>
|
|
|
|
<input
|
|
|
|
type="password"
|
|
|
|
placeholder={_t("password")}
|
|
|
|
onChange={this._onPasswordFieldChange}
|
|
|
|
ref={(e) => {this._passwordField = e;}}
|
|
|
|
className={passwordBoxClass}
|
|
|
|
/>
|
|
|
|
</div>
|
2018-05-23 18:33:32 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
{ error }
|
2016-08-03 13:34:13 +03:00
|
|
|
</div>
|
|
|
|
<div className="mx_Dialog_buttons">
|
|
|
|
<button
|
|
|
|
className="mx_Dialog_primary danger"
|
|
|
|
onClick={this._onOk}
|
|
|
|
disabled={!okEnabled}
|
|
|
|
>
|
2017-10-11 19:56:17 +03:00
|
|
|
{ okLabel }
|
2016-08-03 13:34:13 +03:00
|
|
|
</button>
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
{ cancelButton }
|
2016-08-03 13:34:13 +03:00
|
|
|
</div>
|
2017-12-18 13:08:51 +03:00
|
|
|
</BaseDialog>
|
2016-08-03 13:34:13 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
DeactivateAccountDialog.propTypes = {
|
2017-12-26 04:03:18 +03:00
|
|
|
onFinished: PropTypes.func.isRequired,
|
2016-08-03 13:34:13 +03:00
|
|
|
};
|