Restore key backup in Complete Security dialog

Fixes https://github.com/vector-im/riot-web/issues/11889

src/components/structures/auth/CompleteSecurity.js

@@ -22,8 +22,9 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { accessSecretStorage } from '../../../CrossSigningManager';
 
 const PHASE_INTRO = 0;
-const PHASE_DONE = 1;
-const PHASE_CONFIRM_SKIP = 2;
+const PHASE_BUSY = 1;
+const PHASE_DONE = 2;
+const PHASE_CONFIRM_SKIP = 3;
 
 export default class CompleteSecurity extends React.Component {
     static propTypes = {
@@ -39,6 +40,7 @@ export default class CompleteSecurity extends React.Component {
             // the presence of it insidicating that we're in 'verify mode'.
             // Because of the latter, it lives in the state.
             verificationRequest: null,
+            backupInfo: null,
         };
         MatrixClientPeg.get().on("crypto.verification.request", this.onVerificationRequest);
     }
@@ -53,10 +55,16 @@ export default class CompleteSecurity extends React.Component {
     }
 
     onStartClick = async () => {
+        this.setState({
+            phase: PHASE_BUSY,
+        });
         const cli = MatrixClientPeg.get();
+        const backupInfo = await cli.getKeyBackupVersion();
+        this.setState({backupInfo});
         try {
             await accessSecretStorage(async () => {
                 await cli.checkOwnCrossSigningTrust();
+                if (backupInfo) await cli.restoreKeyBackupWithSecretStorage(backupInfo);
             });
 
             if (cli.getCrossSigningId()) {
@@ -66,6 +74,9 @@ export default class CompleteSecurity extends React.Component {
             }
         } catch (e) {
             // this will throw if the user hits cancel, so ignore
+            this.setState({
+                phase: PHASE_INTRO,
+            });
         }
     }
 
@@ -155,13 +166,21 @@ export default class CompleteSecurity extends React.Component {
         } else if (phase === PHASE_DONE) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified"></span>;
             title = _t("Session verified");
+            let message;
+            if (this.state.backupInfo) {
+                message = <p>{_t(
+                    "Your new session is now verified. It has access to your " +
+                    "encrypted messages, and other users will see it as trusted.",
+                )}</p>;
+            } else {
+                message = <p>{_t(
+                    "Your new session is now verified. Other users will see it as trusted.",
+                )}</p>;
+            }
             body = (
                 <div>
                     <div className="mx_CompleteSecurity_heroIcon mx_E2EIcon_verified"></div>
-                    <p>{_t(
-                        "Your new session is now verified. It has access to your " +
-                        "encrypted messages, and other users will see it as trusted.",
-                    )}</p>
+                    {message}
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton
                             kind="primary"
@@ -198,6 +217,11 @@ export default class CompleteSecurity extends React.Component {
                     </div>
                 </div>
             );
+        } else if (phase === PHASE_BUSY) {
+            const Spinner = sdk.getComponent('views.elements.Spinner');
+            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning"></span>;
+            title = '';
+            body = <Spinner />;
         } else {
             throw new Error(`Unknown phase ${phase}`);
         }

src/i18n/strings/en_EN.json

@@ -1894,6 +1894,7 @@
     "Done": "Done",
     "Without completing security on this device, it won’t have access to encrypted messages.": "Without completing security on this device, it won’t have access to encrypted messages.",
     "Go Back": "Go Back",
+    "Restoring": "Restoring",
     "Failed to send email": "Failed to send email",
     "The email address linked to your account must be entered.": "The email address linked to your account must be entered.",
     "A new password must be entered.": "A new password must be entered.",