Merge pull request #4278 from matrix-org/t3chguy/e2e_copy

Update cross-signing verification copy and fix i18n

src/components/views/right_panel/EncryptionInfo.js

@@ -28,7 +28,7 @@ export const PendingActionSpinner = ({text}) => {
     </div>;
 };
 
-const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStartVerification}) => {
+const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStartVerification, isRoomEncrypted}) => {
     let content;
     if (waitingForOtherParty || waitingForNetwork) {
         let text;
@@ -49,13 +49,27 @@ const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStar
         );
     }
 
-    return <React.Fragment>
+    let description;
-        <div className="mx_UserInfo_container">
+    if (isRoomEncrypted) {
-            <h3>{_t("Encryption")}</h3>
+        description = (
             <div>
                 <p>{_t("Messages in this room are end-to-end encrypted.")}</p>
                 <p>{_t("Your messages are secured and only you and the recipient have the unique keys to unlock them.")}</p>
             </div>
+        );
+    } else {
+        description = (
+            <div>
+                <p>{_t("Messages in this room are not end-to-end encrypted.")}</p>
+                <p>{_t("In encrypted rooms, your messages are secured and only you and the recipient have the unique keys to unlock them.")}</p>
+            </div>
+        );
+    }
+
+    return <React.Fragment>
+        <div className="mx_UserInfo_container">
+            <h3>{_t("Encryption")}</h3>
+            { description }
         </div>
         <div className="mx_UserInfo_container">
             <h3>{_t("Verify User")}</h3>

src/components/views/right_panel/EncryptionPanel.js

@@ -30,7 +30,8 @@ import {_t} from "../../../languageHandler";
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
-const EncryptionPanel = ({verificationRequest, verificationRequestPromise, member, onClose, layout}) => {
+const EncryptionPanel = (props) => {
+    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted} = props;
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
     // before we have a request
@@ -98,6 +99,7 @@ const EncryptionPanel = ({verificationRequest, verificationRequestPromise, membe
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
         return <EncryptionInfo
+            isRoomEncrypted={isRoomEncrypted}
             onStartVerification={onStartVerification}
             member={member}
             waitingForOtherParty={requested && initiatedByMe}
@@ -105,6 +107,7 @@ const EncryptionPanel = ({verificationRequest, verificationRequestPromise, membe
     } else {
         return (
             <VerificationPanel
+                isRoomEncrypted={isRoomEncrypted}
                 layout={layout}
                 onClose={onClose}
                 member={member}

src/components/views/right_panel/UserInfo.js

@@ -1297,8 +1297,7 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
     const userVerified = userTrust.isCrossSigningVerified();
     const isMe = member.userId === cli.getUserId();
     const canVerify = SettingsStore.isFeatureEnabled("feature_cross_signing") &&
-                        homeserverSupportsCrossSigning &&
+                        homeserverSupportsCrossSigning && !userVerified && !isMe;
-                        isRoomEncrypted && !userVerified && !isMe;
 
     const setUpdating = (updating) => {
         setPendingUpdateCount(count => count + (updating ? 1 : -1));
@@ -1320,20 +1319,15 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
         );
     }
 
-    let devicesSection;
-    if (isRoomEncrypted) {
-        devicesSection = <DevicesSection
-            loading={devices === undefined}
-            devices={devices}
-            userId={member.userId} />;
-    }
-
     const securitySection = (
         <div className="mx_UserInfo_container">
             <h3>{ _t("Security") }</h3>
             <p>{ text }</p>
             { verifyButton }
-            { devicesSection }
+            <DevicesSection
+                loading={devices === undefined}
+                devices={devices}
+                userId={member.userId} />
         </div>
     );
 
@@ -1496,7 +1490,7 @@ const UserInfo = ({user, groupId, roomId, onClose, phase=RIGHT_PANEL_PHASES.Room
         case RIGHT_PANEL_PHASES.EncryptionPanel:
             classes.push("mx_UserInfo_smallAvatar");
             content = (
-                <EncryptionPanel {...props} member={member} onClose={onClose} />
+                <EncryptionPanel {...props} member={member} onClose={onClose} isRoomEncrypted={isRoomEncrypted} />
             );
             break;
     }

src/components/views/right_panel/VerificationPanel.js

@@ -48,6 +48,7 @@ export default class VerificationPanel extends React.PureComponent {
             PHASE_DONE,
         ]).isRequired,
         onClose: PropTypes.func.isRequired,
+        isRoomEncrypted: PropTypes.bool,
     };
 
     constructor(props) {
@@ -174,15 +175,22 @@ export default class VerificationPanel extends React.PureComponent {
     renderVerifiedPhase() {
         const {member} = this.props;
 
+        let text;
+        if (this.props.isRoomEncrypted) {
+            text = _t("Verify all users in a room to ensure it's secure.");
+        } else {
+            text = _t("In encrypted rooms, verify all users to ensure it’s secure.");
+        }
+
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
-                <h3>Verified</h3>
+                <h3>{_t("Verified")}</h3>
                 <p>{_t("You've successfully verified %(displayName)s!", {
                     displayName: member.displayName || member.name || member.userId,
                 })}</p>
                 <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
-                <p>Verify all users in a room to ensure it's secure.</p>
+                <p>{ text }</p>
 
                 <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
                     {_t("Got it")}
@@ -209,7 +217,7 @@ export default class VerificationPanel extends React.PureComponent {
 
         return (
             <div className="mx_UserInfo_container">
-                <h3>Verification cancelled</h3>
+                <h3>{_t("Verification cancelled")}</h3>
                 <p>{ text }</p>
 
                 <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
@@ -231,7 +239,7 @@ export default class VerificationPanel extends React.PureComponent {
                 if (this.state.sasEvent) {
                     const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
                     return <div className="mx_UserInfo_container">
-                        <h3>Compare emoji</h3>
+                        <h3>{_t("Compare emoji")}</h3>
                         <VerificationShowSas
                             displayName={displayName}
                             sas={this.state.sasEvent.sas}

src/i18n/strings/en_EN.json

@@ -1199,6 +1199,8 @@
     "Start Verification": "Start Verification",
     "Messages in this room are end-to-end encrypted.": "Messages in this room are end-to-end encrypted.",
     "Your messages are secured and only you and the recipient have the unique keys to unlock them.": "Your messages are secured and only you and the recipient have the unique keys to unlock them.",
+    "Messages in this room are not end-to-end encrypted.": "Messages in this room are not end-to-end encrypted.",
+    "In encrypted rooms, your messages are secured and only you and the recipient have the unique keys to unlock them.": "In encrypted rooms, your messages are secured and only you and the recipient have the unique keys to unlock them.",
     "Verify User": "Verify User",
     "For extra security, verify this user by checking a one-time code on both of your devices.": "For extra security, verify this user by checking a one-time code on both of your devices.",
     "Your messages are not secure": "Your messages are not secure",
@@ -1225,7 +1227,6 @@
     "Failed to remove user from community": "Failed to remove user from community",
     "<strong>%(role)s</strong> in %(roomName)s": "<strong>%(role)s</strong> in %(roomName)s",
     "This client does not support end-to-end encryption.": "This client does not support end-to-end encryption.",
-    "Messages in this room are not end-to-end encrypted.": "Messages in this room are not end-to-end encrypted.",
     "Security": "Security",
     "The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.": "The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.",
     "Verify by scanning": "Verify by scanning",
@@ -1233,11 +1234,16 @@
     "Verify by emoji": "Verify by emoji",
     "If you can't scan the code above, verify by comparing unique emoji.": "If you can't scan the code above, verify by comparing unique emoji.",
     "Verify by comparing unique emoji.": "Verify by comparing unique emoji.",
+    "Verify all users in a room to ensure it's secure.": "Verify all users in a room to ensure it's secure.",
+    "In encrypted rooms, verify all users to ensure it’s secure.": "In encrypted rooms, verify all users to ensure it’s secure.",
+    "Verified": "Verified",
     "You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!",
     "Got it": "Got it",
     "Verification timed out. Start verification again from their profile.": "Verification timed out. Start verification again from their profile.",
     "%(displayName)s cancelled verification. Start verification again from their profile.": "%(displayName)s cancelled verification. Start verification again from their profile.",
     "You cancelled verification. Start verification again from their profile.": "You cancelled verification. Start verification again from their profile.",
+    "Verification cancelled": "Verification cancelled",
+    "Compare emoji": "Compare emoji",
     "Sunday": "Sunday",
     "Monday": "Monday",
     "Tuesday": "Tuesday",