From 6c4b572c7e1d4df1a9fdd32de8c12035e1b139d0 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Mar 2020 17:47:56 +0000
Subject: [PATCH 1/2] Wait for verification request on login

Basically just changes to the designed screen to wait for an incoming
verification request in order to verify the device & cross-sign it.

Fixes https://github.com/vector-im/riot-web/issues/11215
Fixes https://github.com/vector-im/riot-web/issues/11217
---
 .../structures/auth/_CompleteSecurity.scss    |  4 ++++
 .../structures/auth/CompleteSecurity.js       | 20 +++++++++++--------
 src/i18n/strings/en_EN.json                   |  4 +++-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss
index 2bf51d9574..601492d43c 100644
--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/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;
diff --git a/src/components/structures/auth/CompleteSecurity.js b/src/components/structures/auth/CompleteSecurity.js
index 2e95f668a6..2516abbb74 100644
--- a/src/components/structures/auth/CompleteSecurity.js
+++ b/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,23 @@ 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 +172,6 @@ export default class CompleteSecurity extends React.Component {
                         >
                             {_t("Skip")}
                         </AccessibleButton>
-                        <AccessibleButton
-                            kind="primary"
-                            onClick={this.onStartClick}
-                        >
-                            {_t("Start")}
-                        </AccessibleButton>
                     </div>
                 </div>
             );
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5f3ead1490..183acea3e6 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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.",

From 6c8bfe3293b2732b380ccda118180cb826426785 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Mar 2020 17:58:37 +0000
Subject: [PATCH 2/2] Lint

---
 src/components/structures/auth/CompleteSecurity.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/auth/CompleteSecurity.js b/src/components/structures/auth/CompleteSecurity.js
index 2516abbb74..e8a5e3db49 100644
--- a/src/components/structures/auth/CompleteSecurity.js
+++ b/src/components/structures/auth/CompleteSecurity.js
@@ -155,13 +155,17 @@ export default class CompleteSecurity extends React.Component {
             body = (
                 <div>
                     <p>{_t(
-                        "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.",
                     )}</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}>
+                        button: sub => <AccessibleButton element="span"
+                            className="mx_linkButton"
+                            onClick={this._onUsePassphraseClick}
+                        >
                             {sub}
                         </AccessibleButton>,
                     })}</p>