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.

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -21,7 +21,7 @@ import { scorePassword } from '../../../../utils/PasswordScorer';
 
 import FileSaver from 'file-saver';
 
-import { _t, _td } from '../../../../languageHandler';
+import { _t } from '../../../../languageHandler';
 
 const PHASE_PASSPHRASE = 0;
 const PHASE_PASSPHRASE_CONFIRM = 1;
@@ -102,7 +102,7 @@ export default React.createClass({
             info = await MatrixClientPeg.get().createKeyBackupVersion(
                 this._keyBackupInfo,
             );
-            await MatrixClientPeg.get().backupAllGroupSessions(info.version);
+            await MatrixClientPeg.get().scheduleAllGroupSessionsForBackup();
             this.setState({
                 phase: PHASE_DONE,
             });
@@ -408,7 +408,6 @@ export default React.createClass({
     _renderBusyPhase: function(text) {
         const Spinner = sdk.getComponent('views.elements.Spinner');
         return <div>
-            <p>{_t(text)}</p>
             <Spinner />
         </div>;
     },
@@ -416,8 +415,10 @@ export default React.createClass({
     _renderPhaseDone: function() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return <div>
-            <p>{_t("Backup created")}</p>
+            <p>{_t(
-            <p>{_t("Your encryption keys are now being backed up to your Homeserver.")}</p>
+                "Your encryption keys are now being backed up in the background " +
+                "to your Homeserver. The initial backup could take several minutes. " +
+                "You can view key backup upload progress in Settings.")}</p>
             <DialogButtons primaryButton={_t('Close')}
                 onPrimaryButtonClick={this._onDone}
                 hasCancel={false}
@@ -454,7 +455,9 @@ export default React.createClass({
             case PHASE_KEEPITSAFE:
                 return _t('Keep it safe');
             case PHASE_BACKINGUP:
-                return _t('Backing up...');
+                return _t('Starting backup...');
+            case PHASE_DONE:
+                return _t('Backup Started');
             default:
                 return _t("Create Key Backup");
         }
@@ -491,7 +494,7 @@ export default React.createClass({
                     content = this._renderPhaseKeepItSafe();
                     break;
                 case PHASE_BACKINGUP:
-                    content = this._renderBusyPhase(_td("Backing up..."));
+                    content = this._renderBusyPhase();
                     break;
                 case PHASE_DONE:
                     content = this._renderPhaseDone();

src/components/views/settings/KeyBackupPanel.js

@@ -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) {
+            if (!MatrixClientPeg.get().getKeyBackupEnabled()) {
-                uploadStatus = _t("Backing up %(sessionsRemaining)s keys...", {
+                // No upload status to show when backup disabled.
-                    sessionsRemaining,
+                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"

src/i18n/strings/en_EN.json

@@ -352,8 +352,8 @@
     "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": "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",
     "Delete backup": "Delete backup",
     "Unable to load key backup status": "Unable to load key backup status",
-    "This device is uploading keys to this backup": "This device is uploading keys to this backup",
+    "This device is using key backup": "This device is using key backup",
-    "This device is <b>not</b> uploading keys to this backup": "This device is <b>not</b> uploading keys to this backup",
+    "This device is <b>not</b> using key backup": "This device is <b>not</b> using key backup",
     "Backing up %(sessionsRemaining)s keys...": "Backing up %(sessionsRemaining)s keys...",
     "All keys backed up": "All keys backed up",
     "Backup has a <validity>valid</validity> signature from this device": "Backup has a <validity>valid</validity> signature from this device",
@@ -1388,15 +1388,15 @@
     "<b>Print it</b> and store it somewhere safe": "<b>Print it</b> and store it somewhere safe",
     "<b>Save it</b> on a USB key or backup drive": "<b>Save it</b> on a USB key or backup drive",
     "<b>Copy it</b> to your personal cloud storage": "<b>Copy it</b> to your personal cloud storage",
-    "Backup created": "Backup created",
+    "Your encryption keys are now being backed up in the background to your Homeserver. The initial backup could take several minutes. You can view key backup upload progress in Settings.": "Your encryption keys are now being backed up in the background to your Homeserver. The initial backup could take several minutes. You can view key backup upload progress in Settings.",
-    "Your encryption keys are now being backed up to your Homeserver.": "Your encryption keys are now being backed up to your Homeserver.",
     "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.",
     "Set up Secure Message Recovery": "Set up Secure Message Recovery",
     "Create a Recovery Passphrase": "Create a Recovery Passphrase",
     "Confirm Recovery Passphrase": "Confirm Recovery Passphrase",
     "Recovery Key": "Recovery Key",
     "Keep it safe": "Keep it safe",
-    "Backing up...": "Backing up...",
+    "Starting backup...": "Starting backup...",
+    "Backup Started": "Backup Started",
     "Create Key Backup": "Create Key Backup",
     "Unable to create key backup": "Unable to create key backup",
     "Retry": "Retry",