Merge pull request #4474 from matrix-org/t3chguy/complete_security_cherry-pick

Update login security copy and design to match Figma [to release]

res/css/_components.scss

@@ -94,7 +94,6 @@
 @import "./views/elements/_AccessibleButton.scss";
 @import "./views/elements/_AddressSelector.scss";
 @import "./views/elements/_AddressTile.scss";
-@import "./views/elements/_ButtonPlaceholder.scss";
 @import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";

res/css/structures/auth/_CompleteSecurity.scss

@@ -26,6 +26,50 @@ limitations under the License.
     position: relative;
 }
 
+.mx_CompleteSecurity_clients {
+    width: max-content;
+    margin: 36px auto 0;
+
+    .mx_CompleteSecurity_clients_desktop, .mx_CompleteSecurity_clients_mobile {
+        position: relative;
+        width: 160px;
+        text-align: center;
+        padding-top: 64px;
+        display: inline-block;
+
+        &::before {
+            content: '';
+            position: absolute;
+            height: 48px;
+            width: 48px;
+            left: 56px;
+            top: 0;
+            background-color: $muted-fg-color;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+        }
+    }
+
+    .mx_CompleteSecurity_clients_desktop {
+        margin-right: 56px;
+    }
+
+    .mx_CompleteSecurity_clients_desktop::before {
+        mask-image: url('$(res)/img/feather-customised/monitor.svg');
+    }
+
+    .mx_CompleteSecurity_clients_mobile::before {
+        mask-image: url('$(res)/img/feather-customised/smartphone.svg');
+    }
+
+    p {
+        margin-top: 16px;
+        font-size: $font-12px;
+        color: $muted-fg-color;
+        text-align: center;
+    }
+}
+
 .mx_CompleteSecurity_heroIcon {
     width: 128px;
     height: 128px;

res/css/views/elements/_ButtonPlaceholder.scss

@@ -1,24 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_ButtonPlaceholder {
-    font-size: $font-14px;
-    font-weight: 600;
-    padding: 7px 18px;
-    display: inline-block;
-    text-align: center;
-    color: $authpage-secondary-color;
-}

res/img/feather-customised/monitor.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V15C22 16.1046 21.1046 17 20 17H4C2.89543 17 2 16.1046 2 15V5Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 21H16" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 17V21" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

res/img/feather-customised/smartphone.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C5 2.89543 5.89543 2 7 2H17C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V4Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="18" r="1" fill="#2E2F32"/>
+</svg>

src/components/structures/auth/CompleteSecurity.js

@@ -60,7 +60,7 @@ export default class CompleteSecurity extends React.Component {
 
         if (phase === PHASE_INTRO) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
-            title = _t("Verify this session");
+            title = _t("Verify this login");
         } else if (phase === PHASE_DONE) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified" />;
             title = _t("Session verified");
@@ -69,7 +69,7 @@ export default class CompleteSecurity extends React.Component {
             title = _t("Are you sure?");
         } else if (phase === PHASE_BUSY) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
-            title = _t("Verify this session");
+            title = _t("Verify this login");
         } else {
             throw new Error(`Unknown phase ${phase}`);
         }

src/components/structures/auth/SetupEncryptionBody.js

@@ -108,31 +108,35 @@ export default class SetupEncryptionBody extends React.Component {
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
             />;
         } else if (phase === PHASE_INTRO) {
-            const ButtonPlaceholder = sdk.getComponent("elements.ButtonPlaceholder");
             return (
                 <div>
                     <p>{_t(
-                        "Use an existing session to verify this one, " +
+                        "Confirm your identity by verifying this login from one of your other sessions, " +
                         "granting it access to encrypted messages.",
                     )}</p>
                     <p>{_t(
-                        "If you can’t access one, <button>use your recovery key or recovery passphrase.</button>",
+                        "This requires the latest Riot on your other devices:",
-                    {}, {
+                    )}</p>
-                        button: sub => <AccessibleButton element="span"
+
-                            className="mx_linkButton"
+                    <div className="mx_CompleteSecurity_clients">
-                            onClick={this._onUsePassphraseClick}
+                        <div className="mx_CompleteSecurity_clients_desktop">
-                        >
+                            <div>Riot Web</div>
-                            {sub}
+                            <div>Riot Desktop</div>
-                        </AccessibleButton>,
+                        </div>
-                    })}</p>
+                        <div className="mx_CompleteSecurity_clients_mobile">
+                            <div>Riot iOS</div>
+                            <div>Riot X for Android</div>
+                        </div>
+                        <p>{_t("or another cross-signing capable Matrix client")}</p>
+                    </div>
+
                     <div className="mx_CompleteSecurity_actionRow">
-                        <AccessibleButton
+                        <AccessibleButton kind="link" onClick={this.onSkipClick}>
-                            kind="danger"
+                            {_t("Use Recovery Passphrase or Key")}
-                            onClick={this.onSkipClick}
+                        </AccessibleButton>
-                        >
+                        <AccessibleButton kind="danger" onClick={this.onSkipClick}>
                             {_t("Skip")}
                         </AccessibleButton>
-                        <ButtonPlaceholder>{_t("Use your other device to continue…")}</ButtonPlaceholder>
                     </div>
                 </div>
             );
@@ -150,7 +154,7 @@ export default class SetupEncryptionBody extends React.Component {
             }
             return (
                 <div>
-                    <div className="mx_CompleteSecurity_heroIcon mx_E2EIcon_verified"></div>
+                    <div className="mx_CompleteSecurity_heroIcon mx_E2EIcon_verified" />
                     {message}
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton

src/components/views/elements/ButtonPlaceholder.js

@@ -1,19 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-export default function ButtonPlaceholder(props) {
-    return <div class="mx_ButtonPlaceholder">{props.children}</div>;
-}

src/i18n/strings/en_EN.json

@@ -2063,6 +2063,7 @@
     "Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s",
     "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",
+    "Verify this login": "Verify this login",
     "Session verified": "Session verified",
     "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.",
@@ -2116,9 +2117,10 @@
     "You can now close this window or <a>log in</a> to your new account.": "You can now close this window or <a>log in</a> to your new account.",
     "Registration Successful": "Registration Successful",
     "Create your account": "Create your account",
-    "Use an existing session to verify this one, granting it access to encrypted messages.": "Use an existing session to verify this one, granting it access to encrypted messages.",
+    "Confirm your identity by verifying this login from one of your other sessions, granting it access to encrypted messages.": "Confirm your identity by verifying this login from one of your other sessions, granting it access to encrypted messages.",
-    "If you can’t access one, <button>use your recovery key or recovery passphrase.</button>": "If you can’t access one, <button>use your recovery key or recovery passphrase.</button>",
+    "This requires the latest Riot on your other devices:": "This requires the latest Riot on your other devices:",
-    "Use your other device to continue…": "Use your other device to continue…",
+    "or another cross-signing capable Matrix client": "or another cross-signing capable Matrix client",
+    "Use Recovery Passphrase or Key": "Use Recovery Passphrase or Key",
     "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.",
     "Without completing security on this session, it won’t have access to encrypted messages.": "Without completing security on this session, it won’t have access to encrypted messages.",