Merge pull request #1193 from vector-im/SimonBrandner/feat/e2ee-banner

.env.example

@@ -25,3 +25,4 @@ LIVEKIT_SECRET="secret"
 # VITE_THEME_SYSTEM=#21262c
 # VITE_THEME_BACKGROUND=#15191e
 # VITE_THEME_BACKGROUND_85=#15191ed9
+# VITE_THEME_SUBTLE_PRIMARY=#26282D

public/locales/en-GB/app.json

@@ -37,6 +37,7 @@
   "Display name": "Display name",
   "Download debug logs": "Download debug logs",
   "Element Call Home": "Element Call Home",
+  "Element Call is temporarily not encrypted while we test scalability.": "Element Call is temporarily not encrypted while we test scalability.",
   "Exit full screen": "Exit full screen",
   "Expose developer settings in the settings window.": "Expose developer settings in the settings window.",
   "Feedback": "Feedback",

src/Banner.module.css

@@ -0,0 +1,22 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+.banner {
+  flex: 1;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: var(--subtle-primary);
+}

src/Banner.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+import { ReactNode } from "react";
+
+import styles from "./Banner.module.css";
+
+interface Props {
+  children: ReactNode;
+}
+
+export const Banner = ({ children }: Props) => {
+  return <div className={styles.banner}>{children}</div>;
+};

src/E2EEBanner.module.css

@@ -0,0 +1,23 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+.e2eeBanner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  font-size: var(--font-size-caption);
+}

src/E2EEBanner.tsx

@@ -0,0 +1,34 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+import { Trans } from "react-i18next";
+
+import { Banner } from "./Banner";
+import styles from "./E2EEBanner.module.css";
+import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
+
+export const E2EEBanner = () => {
+  return (
+    <Banner>
+      <div className={styles.e2eeBanner}>
+        <LockOffIcon width={24} height={24} />
+        <Trans>
+          Element Call is temporarily not encrypted while we test scalability.
+        </Trans>
+      </div>
+    </Banner>
+  );
+};

src/E2EELock.module.css

@@ -0,0 +1,28 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+.e2eeLock {
+  width: 24px;
+  height: 24px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 8px;
+
+  border-radius: 100%;
+  background-color: var(--subtle-primary);
+}

src/E2EELock.tsx

@@ -0,0 +1,56 @@
+/*
+Copyright 2023 New Vector Ltd
+
+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.
+*/
+
+import { useTranslation } from "react-i18next";
+import { useCallback } from "react";
+import { useObjectRef } from "@react-aria/utils";
+import { useButton } from "@react-aria/button";
+
+import styles from "./E2EELock.module.css";
+import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg";
+import { TooltipTrigger } from "./Tooltip";
+
+export const E2EELock = () => {
+  const { t } = useTranslation();
+  const tooltip = useCallback(
+    () =>
+      t("Element Call is temporarily not encrypted while we test scalability."),
+    [t]
+  );
+
+  return (
+    <TooltipTrigger placement="right" tooltip={tooltip}>
+      <Icon />
+    </TooltipTrigger>
+  );
+};
+
+/**
+ * This component is a bit of hack - for some reason for the TooltipTrigger to
+ * work, it needs to contain a component which uses the useButton hook; please
+ * note that for some reason this also needs to be a separate component and we
+ * cannot just use the useButton hook inside the E2EELock.
+ */
+const Icon = () => {
+  const buttonRef = useObjectRef<HTMLDivElement>();
+  const { buttonProps } = useButton({}, buttonRef);
+
+  return (
+    <div ref={buttonRef} className={styles.e2eeLock} {...buttonProps}>
+      <LockOffIcon />
+    </div>
+  );
+};

src/home/RegisteredView.tsx

@@ -39,6 +39,7 @@ import { Form } from "../form/Form";
 import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
 import { useOptInAnalytics } from "../settings/useSetting";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
+import { E2EEBanner } from "../E2EEBanner";
 
 interface Props {
   client: MatrixClient;
@@ -146,6 +147,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
                 <AnalyticsNotice />
               </Caption>
             )}
+            <E2EEBanner />
             {error && (
               <FieldRow className={styles.fieldRow}>
                 <ErrorMessage error={error} />

src/home/UnauthenticatedView.tsx

@@ -41,6 +41,7 @@ import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { useOptInAnalytics } from "../settings/useSetting";
+import { E2EEBanner } from "../E2EEBanner";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -170,6 +171,7 @@ export const UnauthenticatedView: FC = () => {
                 </Link>
               </Trans>
             </Caption>
+            <E2EEBanner />
             {error && (
               <FieldRow>
                 <ErrorMessage error={error} />

src/icons/LockOff.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00003 14.6665C3.63336 14.6665 3.31947 14.5359 3.05836 14.2748C2.79725 14.0137 2.6667 13.6998 2.6667 13.3332V6.6665C2.6667 6.29984 2.79725 5.98595 3.05836 5.72484C3.19921 5.58399 3.35541 5.48113 3.52697 5.41626L0.888621 2.77791C0.628272 2.51756 0.628272 2.09545 0.888622 1.8351C1.14897 1.57475 1.57108 1.57475 1.83143 1.8351L4.6667 4.67037V4.66267L13.3334 13.3293V13.3332L13.3334 13.337L14.1648 14.1685C14.4251 14.4288 14.4251 14.8509 14.1648 15.1113C13.9044 15.3716 13.4823 15.3716 13.222 15.1113L12.6247 14.514C12.437 14.6157 12.2288 14.6665 12 14.6665H4.00003Z" fill="#808994"/>
+<path d="M13.3334 11.4437V6.6665C13.3334 6.29984 13.2028 5.98595 12.9417 5.72484C12.6806 5.46373 12.3667 5.33317 12 5.33317H11.3334V3.99984C11.3334 3.07762 11.0084 2.2915 10.3584 1.6415C9.70836 0.991504 8.92225 0.666504 8.00003 0.666504C7.07781 0.666504 6.2917 0.991504 5.6417 1.6415C5.25683 2.02637 4.9859 2.45896 4.82892 2.93927L6.00003 4.11038V3.99984C6.00003 3.44428 6.19447 2.97206 6.58336 2.58317C6.97225 2.19428 7.44447 1.99984 8.00003 1.99984C8.55559 1.99984 9.02781 2.19428 9.4167 2.58317C9.80558 2.97206 10 3.44428 10 3.99984V5.33317H7.22282L13.3334 11.4437Z" fill="#808994"/>
+</svg>

src/index.css

@@ -52,6 +52,7 @@ limitations under the License.
   --background: #15191e;
   --background-85: rgba(23, 25, 28, 0.85);
   --bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
+  --subtle-primary: #26282d;
 }
 
 @font-face {

src/initializer.tsx

@@ -133,6 +133,10 @@ export class Initializer {
         "--background-85",
         import.meta.env.VITE_THEME_BACKGROUND_85 as string
       );
+      style.setProperty(
+        "--subtle-primary",
+        import.meta.env.VITE_THEME_SUBTLE_PRIMARY as string
+      );
     }
 
     // Custom fonts

src/room/InCallView.tsx

@@ -84,6 +84,7 @@ import { useMediaDevices } from "../livekit/useMediaDevices";
 import { useFullscreen } from "./useFullscreen";
 import { useLayoutStates } from "../video-grid/Layout";
 import { useSFUConfig } from "../livekit/OpenIDLoader";
+import { E2EELock } from "../E2EELock";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -395,6 +396,7 @@ export function InCallView({
               users={unencryptedEventsFromUsers}
               room={groupCall.room}
             />
+            <E2EELock />
           </LeftNav>
           <RightNav>
             <GridLayoutMenu layout={layout} setLayout={setLayout} />