KeyBackupPanel fixes

* Separate out the emoji from the translateable string
 * Put back the delete button if you're not using the backup,
   otherwise you're stuck unable to use key backup at all if you
   lost your recovery secret and the device you set it up on.
This commit is contained in:
David Baker 2019-02-12 18:06:36 +00:00
parent 6c1ed57b70
commit 2c5da21adb
2 changed files with 16 additions and 18 deletions

View file

@ -149,22 +149,15 @@ export default class KeyBackupPanel extends React.PureComponent {
} else if (this.state.loading) {
return <Spinner />;
} else if (this.state.backupInfo) {
const EmojiText = sdk.getComponent('elements.EmojiText');
let clientBackupStatus;
let buttons;
let restoreButtonCaption = _t("Restore from Backup");
if (MatrixClientPeg.get().getKeyBackupEnabled()) {
clientBackupStatus = <div>
<p>{encryptedMessageAreEncrypted}</p>
<p>{_t("This device is backing up your keys. ")}</p>
<p>{_t("This device is backing up your keys. ")}<EmojiText></EmojiText></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 = <div>
<p>{encryptedMessageAreEncrypted}</p>
@ -174,11 +167,7 @@ export default class KeyBackupPanel extends React.PureComponent {
)}</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>;
restoreButtonCaption = _t("Use key backup");
}
let uploadStatus;
@ -267,7 +256,14 @@ export default class KeyBackupPanel extends React.PureComponent {
<div>{backupSigStatuses}</div>
<div>{trustedLocally}</div>
</details>
{buttons}
<p>
<AccessibleButton kind="primary" onClick={this._restoreBackup}>
{restoreButtonCaption}
</AccessibleButton>&nbsp;&nbsp;&nbsp;
<AccessibleButton kind="danger" onClick={this._deleteBackup}>
{ _t("Delete Backup") }
</AccessibleButton>
</p>
</div>;
} else {
return <div>