Merge pull request #4222 from matrix-org/dbkr/wait_for_verify

Wait for verification request on login

res/css/structures/auth/_CompleteSecurity.scss

@@ -37,6 +37,10 @@ limitations under the License.
     font-size: 15px;
 }
 
+.mx_CompleteSecurity_waiting {
+    color: $notice-secondary-color;
+}
+
 .mx_CompleteSecurity_actionRow {
     display: flex;
     justify-content: flex-end;

src/components/structures/auth/CompleteSecurity.js

@@ -54,7 +54,7 @@ export default class CompleteSecurity extends React.Component {
         }
     }
 
-    onStartClick = async () => {
+    _onUsePassphraseClick = async () => {
         this.setState({
             phase: PHASE_BUSY,
         });
@@ -148,13 +148,27 @@ export default class CompleteSecurity extends React.Component {
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
             />;
         } else if (phase === PHASE_INTRO) {
+            const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
+
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning"></span>;
             title = _t("Complete security");
             body = (
                 <div>
                     <p>{_t(
-                        "Verify this session to grant it access to encrypted messages.",
+                        "Open an existing session & use it to verify this one, " +
+                        "granting it access to encrypted messages.",
                     )}</p>
+                    <p className="mx_CompleteSecurity_waiting"><InlineSpinner />{_t("Waiting…")}</p>
+                    <p>{_t(
+                        "If you can’t access one, <button>use your recovery key or passphrase.</button>",
+                    {}, {
+                        button: sub => <AccessibleButton element="span"
+                            className="mx_linkButton"
+                            onClick={this._onUsePassphraseClick}
+                        >
+                            {sub}
+                        </AccessibleButton>,
+                    })}</p>
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton
                             kind="danger"
@@ -162,12 +176,6 @@ export default class CompleteSecurity extends React.Component {
                         >
                             {_t("Skip")}
                         </AccessibleButton>
-                        <AccessibleButton
-                            kind="primary"
-                            onClick={this.onStartClick}
-                        >
-                            {_t("Start")}
-                        </AccessibleButton>
                     </div>
                 </div>
             );

src/i18n/strings/en_EN.json

@@ -1973,7 +1973,9 @@
     "Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other",
     "Could not load user profile": "Could not load user profile",
     "Complete security": "Complete security",
-    "Verify this session to grant it access to encrypted messages.": "Verify this session to grant it access to encrypted messages.",
+    "Open an existing session & use it to verify this one, granting it access to encrypted messages.": "Open an existing session & use it to verify this one, granting it access to encrypted messages.",
+    "Waiting…": "Waiting…",
+    "If you can’t access one, <button>use your recovery key or passphrase.</button>": "If you can’t access one, <button>use your recovery key or passphrase.</button>",
     "Session verified": "Session verified",
     "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.",
     "Your new session is now verified. Other users will see it as trusted.": "Your new session is now verified. Other users will see it as trusted.",