imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change text in e2e UX to new copy

Browse source
This commit is contained in:
David Baker 2019-02-12 16:01:38 +00:00
parent e7e322d513
commit 9ec00f8d9b
5 changed files with 215 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/components/views/settings/KeyBackupPanel.js
View file

@ -111,10 +111,10 @@ export default class KeyBackupPanel extends React.PureComponent {
Modal.createTrackedDialog('Delete Backup', '', QuestionDialog, {
title: _t('Delete Backup'),
description: _t(
"Delete your backed up encryption keys from the server? " +
"You will no longer be able to use your recovery key to read encrypted message history",
"Are you sure? You will lose your encrypted messages if your " +
"keys are not backed up properly."
),
button: _t('Delete backup'),
button: _t('Delete Backup'),
danger: true,
onFinished: (proceed) => {
if (!proceed) return;
@ -135,6 +135,10 @@ export default class KeyBackupPanel extends React.PureComponent {
render() {
const Spinner = sdk.getComponent("elements.Spinner");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
const encryptedMessageAreEncrypted = _t(
"Encrypted messages are secured with end-to-end encryption. " +
"Only you and the recipient(s) have the keys to read these messages.",
);
if (this.state.error) {
return (
@ -146,13 +150,35 @@ export default class KeyBackupPanel extends React.PureComponent {
return <Spinner />;
} else if (this.state.backupInfo) {
let clientBackupStatus;
let buttons;
if (MatrixClientPeg.get().getKeyBackupEnabled()) {
clientBackupStatus = _t("This device is using key backup");
clientBackupStatus = <div>
<p>{encryptedMessageAreEncrypted}</p>
<p>{_t("This device is backing up your keys. ✅")}</p>
</div>;
buttons = <p>
<AccessibleButton kind="primary" onClick={this._restoreBackup}>
{ _t("Restore from Backup") }
</AccessibleButton>&nbsp;&nbsp;&nbsp;
<AccessibleButton kind="danger" onClick={this._deleteBackup}>
{ _t("Delete Backup") }
</AccessibleButton>
</p>;
} else {
clientBackupStatus = _t(
"This device is <b>not</b> using key backup. Restore the backup to start using it.", {},
{b: x => <b>{x}</b>},
);
clientBackupStatus = <div>
<p>{encryptedMessageAreEncrypted}</p>
<p>{_t(
"This device is <b>not backing up your keys</b>.", {},
{b: x => <b>{x}</b>},
)}</p>
<p>{_t("Back up your keys before signing out to avoid losing them.")}</p>
</div>;
buttons = <p>
<AccessibleButton kind="primary" onClick={this._restoreBackup}>
{ _t("Use Key Backup") }
</AccessibleButton>
</p>;
}
let uploadStatus;
@ -241,20 +267,20 @@ export default class KeyBackupPanel extends React.PureComponent {
<div>{backupSigStatuses}</div>
<div>{trustedLocally}</div>
</details>
<p>
<AccessibleButton kind="primary" onClick={this._restoreBackup}>
{ _t("Restore backup") }
</AccessibleButton>&nbsp;&nbsp;&nbsp;
<AccessibleButton kind="danger" onClick={this._deleteBackup}>
{ _t("Delete backup") }
</AccessibleButton>
</p>
{buttons}
</div>;
} else {
return <div>
{_t("No backup is present")}<br /><br />
<div>
<p>{_t(
"Your keys are <b>not being backed up from this device</b>.", {},
{b: x => <b>{x}</b>},
)}</p>
<p>{encryptedMessageAreEncrypted}</p>
<p>{_t("Back up your keys before signing out to avoid losing them.")}</p>
</div>
<AccessibleButton kind="primary" onClick={this._startNewBackup}>
{ _t("Start a new backup") }
{ _t("Start using Key Backup") }
</AccessibleButton>
</div>;
}