Implement unencrypted warning slate in rooms

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -41,6 +41,7 @@ export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
 interface IProps {
     roomId: string;
     onFinished: (success: boolean) => void;
+    initialTabId?: string;
 }
 
 @replaceableComponent("views.dialogs.RoomSettingsDialog")
@@ -126,7 +127,10 @@ export default class RoomSettingsDialog extends React.Component<IProps> {
                 title={_t("Room Settings - %(roomName)s", {roomName})}
             >
                 <div className='mx_SettingsDialog_content'>
-                    <TabbedView tabs={this.getTabs()} />
+                    <TabbedView
+                        tabs={this.getTabs()}
+                        initialTabId={this.props.initialTabId}
+                    />
                 </div>
             </BaseDialog>
         );

src/components/views/messages/EventTileBubble.tsx

@@ -14,13 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {forwardRef, ReactNode} from "react";
+import React, {forwardRef, ReactNode, ReactChildren} from "react";
 import classNames from "classnames";
 
 interface IProps {
     className: string;
     title: string;
     subtitle?: ReactNode;
+    children?: ReactChildren;
 }
 
 const EventTileBubble = forwardRef<HTMLDivElement, IProps>(({ className, title, subtitle, children }, ref) => {

src/components/views/rooms/NewRoomIntro.tsx

@@ -33,6 +33,9 @@ import {showSpaceInvite} from "../../../utils/space";
 
 import { privateShouldBeEncrypted } from "../../../createRoom";
 
+import EventTileBubble from "../messages/EventTileBubble";
+import { ROOM_SECURITY_TAB } from "../dialogs/RoomSettingsDialog";
+
 function hasExpectedEncryptionSettings(room): boolean {
     const isEncrypted: boolean = room._client.isRoomEncrypted(room.roomId);
     const isPublic: boolean = room.getJoinRule() === "public";
@@ -174,20 +177,30 @@ const NewRoomIntro = () => {
         </React.Fragment>;
     }
 
+    function openRoomSettings(event) {
+        event.preventDefault();
+        dis.dispatch({
+            action: "open_room_settings",
+            initial_tab_id: ROOM_SECURITY_TAB,
+        });
+    }
+
+    const sub2 = _t("Your private messages are normally encrypted, but this room isn't." +
+    "Usually this is because the room was created with a device or method that doesn't support " +
+    "encryption, like email invites. <a>Enable encryption in settings.</a>", {},
+    { a: sub => <a onClick={openRoomSettings} href="#">{sub}</a> });
+
     return <div className="mx_NewRoomIntro">
+
+        { !hasExpectedEncryptionSettings(room) && (
+            <EventTileBubble
+                className="mx_cryptoEvent mx_cryptoEvent_icon_warning"
+                title={_t("This room isn't end to end encrypted")}
+                subtitle={sub2}
+            />
+        )}
+
         { body }
-
-        { !hasExpectedEncryptionSettings(room) && <p className="mx_NewRoomIntro_message" role="alert">
-            {_t("Messages in this room are not end-to-end encrypted. " +
-                    "Messages sent in an unencrypted room can be seen by the server and third parties. " +
-                    "<a>Learn more about encryption.</a>", {},
-            {
-                a: sub => <a href="https://element.io/help#encryption"
-                    rel="noreferrer noopener" target="_blank"
-                >{sub}</a>,
-            })}
-
-        </p>}
     </div>;
 };
 

src/i18n/strings/en_EN.json

@@ -1509,7 +1509,8 @@
     "Invite to just this room": "Invite to just this room",
     "Add a photo, so people can easily spot your room.": "Add a photo, so people can easily spot your room.",
     "This is the start of <roomName/>.": "This is the start of <roomName/>.",
-    "Messages in this room are not end-to-end encrypted. Messages sent in an unencrypted room can be seen by the server and third parties. <a>Learn more about encryption.</a>": "Messages in this room are not end-to-end encrypted. Messages sent in an unencrypted room can be seen by the server and third parties. <a>Learn more about encryption.</a>",
+    "Your private messages are normally encrypted, but this room isn't.Usually this is because the room was created with a device or method that doesn't support encryption, like email invites. <a>Enable encryption in settings.</a>": "Your private messages are normally encrypted, but this room isn't.Usually this is because the room was created with a device or method that doesn't support encryption, like email invites. <a>Enable encryption in settings.</a>",
+    "This room isn't end to end encrypted": "This room isn't end to end encrypted",
     "Unpin": "Unpin",
     "View message": "View message",
     "%(duration)ss": "%(duration)ss",

src/stores/RoomViewStore.tsx

@@ -167,6 +167,7 @@ class RoomViewStore extends Store<ActionPayload> {
                 const RoomSettingsDialog = sdk.getComponent("dialogs.RoomSettingsDialog");
                 Modal.createTrackedDialog('Room settings', '', RoomSettingsDialog, {
                     roomId: payload.room_id || this.state.roomId,
+                    initialTabId: payload.initial_tab_id,
                 }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
                 break;
             }