Move initial key backup to background

Since the initial key backup can take several minutes for some users, this moves
the upload step to the background.  The create key backup flow now only marks
all sessions for backup synchronously, with the actual backup happening later.

The key backup panel in Settings gains a new row to show a summary of upload
status.  Users are directed there if they wish to know if the backup is done.

The text in various related dialogs has also been tweaked to fit the new flow.
This commit is contained in:
J. Ryan Stinnett 2019-01-09 05:24:15 -06:00
parent 731f9ee7df
commit 365a7273d8
3 changed files with 28 additions and 20 deletions

View file

@ -161,23 +161,28 @@ export default class KeyBackupPanel extends React.PureComponent {
} else if (this.state.backupInfo) {
let clientBackupStatus;
if (MatrixClientPeg.get().getKeyBackupEnabled()) {
clientBackupStatus = _t("This device is uploading keys to this backup");
clientBackupStatus = _t("This device is using key backup");
} else {
// XXX: display why and how to fix it
clientBackupStatus = _t(
"This device is <b>not</b> uploading keys to this backup", {},
"This device is <b>not</b> using key backup", {},
{b: x => <b>{x}</b>},
);
}
let uploadStatus;
const { sessionsRemaining } = this.state;
if (sessionsRemaining > 0) {
uploadStatus = _t("Backing up %(sessionsRemaining)s keys...", {
sessionsRemaining,
});
if (!MatrixClientPeg.get().getKeyBackupEnabled()) {
// No upload status to show when backup disabled.
uploadStatus = "";
} else if (sessionsRemaining > 0) {
uploadStatus = <div>
{_t("Backing up %(sessionsRemaining)s keys...", { sessionsRemaining })} <br />
</div>;
} else {
uploadStatus = _t("All keys backed up");
uploadStatus = <div>
{_t("All keys backed up")} <br />
</div>;
}
let backupSigStatuses = this.state.backupSigStatus.sigs.map((sig, i) => {
@ -244,7 +249,7 @@ export default class KeyBackupPanel extends React.PureComponent {
{_t("Backup version: ")}{this.state.backupInfo.version}<br />
{_t("Algorithm: ")}{this.state.backupInfo.algorithm}<br />
{clientBackupStatus}<br />
{uploadStatus}<br />
{uploadStatus}
<div>{backupSigStatuses}</div><br />
<br />
<AccessibleButton className="mx_UserSettings_button"