Make cross-signing dialog clearer and more context-aware

- Don't show loading spinners while waiting for user action
- When checking if there are other devices we can verify against, only
  look for devices that are actually cross-signed.
- Adjust displayed options depending on whether other devices and/or
  recovery keys exist, and add an option to reset cross-signing keys
  if necessary.
- Various minor clarifying adjustments to UI styling/text

Signed-off-by: Faye Duxovni <fayed@element.io>

src/components/structures/auth/CompleteSecurity.tsx

@@ -20,6 +20,7 @@ import * as sdk from '../../../index';
 import { SetupEncryptionStore, Phase } from '../../../stores/SetupEncryptionStore';
 import SetupEncryptionBody from "./SetupEncryptionBody";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import AccessibleButton from '../../views/elements/AccessibleButton';
 
 interface IProps {
     onFinished: () => void;
@@ -27,6 +28,7 @@ interface IProps {
 
 interface IState {
     phase: Phase;
+    lostKeys: boolean;
 }
 
 @replaceableComponent("structures.auth.CompleteSecurity")
@@ -36,12 +38,17 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
         const store = SetupEncryptionStore.sharedInstance();
         store.on("update", this.onStoreUpdate);
         store.start();
-        this.state = { phase: store.phase };
+        this.state = { phase: store.phase, lostKeys: store.lostKeys() };
     }
 
     private onStoreUpdate = (): void => {
         const store = SetupEncryptionStore.sharedInstance();
-        this.setState({ phase: store.phase });
+        this.setState({ phase: store.phase, lostKeys: store.lostKeys() });
+    };
+
+    private onSkipClick = (): void => {
+        const store = SetupEncryptionStore.sharedInstance();
+        store.skip();
     };
 
     public componentWillUnmount(): void {
@@ -53,15 +60,20 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
     public render() {
         const AuthPage = sdk.getComponent("auth.AuthPage");
         const CompleteSecurityBody = sdk.getComponent("auth.CompleteSecurityBody");
-        const { phase } = this.state;
+        const { phase, lostKeys } = this.state;
         let icon;
         let title;
 
         if (phase === Phase.Loading) {
             return null;
         } else if (phase === Phase.Intro) {
-            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
-            title = _t("Verify this login");
+            if (lostKeys) {
+                icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+                title = _t("Unable to verify this login");
+            } else {
+                icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+                title = _t("Verify this login");
+            }
         } else if (phase === Phase.Done) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified" />;
             title = _t("Session verified");
@@ -71,16 +83,29 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
         } else if (phase === Phase.Busy) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
             title = _t("Verify this login");
+        } else if (phase === Phase.ConfirmReset) {
+            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+            title = _t("Really reset verification keys?");
+        } else if (phase === Phase.Finished) {
+            // SetupEncryptionBody will take care of calling onFinished, we don't need to do anything
         } else {
             throw new Error(`Unknown phase ${phase}`);
         }
 
+        let skipButton;
+        if (phase === Phase.Intro || phase === Phase.ConfirmReset) {
+            skipButton = (
+                <AccessibleButton onClick={this.onSkipClick} className="mx_CompleteSecurity_skip" aria-label={_t("Skip verification for now")} />
+            );
+        }
+
         return (
             <AuthPage>
                 <CompleteSecurityBody>
                     <h2 className="mx_CompleteSecurity_header">
                         { icon }
                         { title }
+                        { skipButton }
                     </h2>
                     <div className="mx_CompleteSecurity_body">
                         <SetupEncryptionBody onFinished={this.props.onFinished} />