Merge pull request #1305 from vector-im/SimonBrandner/feat/e2ee-flag

public/locales/en-GB/app.json

@@ -38,6 +38,7 @@
   "Download debug logs": "Download debug logs",
   "Element Call Home": "Element Call Home",
   "Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call is temporarily not end-to-end encrypted while we test scalability.",
+  "Enable end-to-end encryption (password protected calls)": "Enable end-to-end encryption (password protected calls)",
   "Exit full screen": "Exit full screen",
   "Expose developer settings in the settings window.": "Expose developer settings in the settings window.",
   "Feedback": "Feedback",

src/room/LobbyView.tsx

@@ -27,6 +27,7 @@ import { useLocationNavigation } from "../useLocationNavigation";
 import { MatrixInfo, VideoPreview } from "./VideoPreview";
 import { E2EEConfig, UserChoices } from "../livekit/useLiveKit";
 import { InputField } from "../input/Input";
+import { useEnableE2EE } from "../settings/useSetting";
 
 interface Props {
   matrixInfo: MatrixInfo;
@@ -40,6 +41,8 @@ export function LobbyView(props: Props) {
   const { t } = useTranslation();
   useLocationNavigation();
 
+  const [enableE2EE] = useEnableE2EE();
+
   const joinCallButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     if (joinCallButtonRef.current) {
@@ -80,6 +83,7 @@ export function LobbyView(props: Props) {
             matrixInfo={props.matrixInfo}
             onUserChoicesChanged={setUserChoices}
           />
+          {enableE2EE && (
             <InputField
               className={styles.passwordField}
               label={t("Password (if none E2EE, is disabled)")}
@@ -87,6 +91,7 @@ export function LobbyView(props: Props) {
               onChange={onE2EESharedKeyChanged}
               value={e2eeSharedKey}
             />
+          )}
           <Trans>
             <Button
               ref={joinCallButtonRef}

src/settings/SettingsModal.tsx

@@ -34,6 +34,7 @@ import {
   useOptInAnalytics,
   useDeveloperSettingsTab,
   useShowConnectionStats,
+  useEnableE2EE,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
@@ -68,6 +69,7 @@ export const SettingsModal = (props: Props) => {
     useDeveloperSettingsTab();
   const [showConnectionStats, setShowConnectionStats] =
     useShowConnectionStats();
+  const [enableE2EE, setEnableE2EE] = useEnableE2EE();
 
   const downloadDebugLog = useDownloadDebugLog();
 
@@ -249,6 +251,18 @@ export const SettingsModal = (props: Props) => {
             }
           />
         </FieldRow>
+        <FieldRow>
+          <InputField
+            id="enableE2EE"
+            name="end-to-end-encryption"
+            label={t("Enable end-to-end encryption (password protected calls)")}
+            type="checkbox"
+            checked={enableE2EE}
+            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              setEnableE2EE(e.target.checked)
+            }
+          />
+        </FieldRow>
         <FieldRow>
           <Button onPress={downloadDebugLog}>{t("Download debug logs")}</Button>
         </FieldRow>

src/settings/useSetting.ts

@@ -104,6 +104,9 @@ export const useDeveloperSettingsTab = () =>
 export const useShowConnectionStats = () =>
   useSetting("show-connection-stats", false);
 
+export const useEnableE2EE = () =>
+  useSetting("enable-end-to-end-encryption", false);
+
 export const useDefaultDevices = () =>
   useSetting("defaultDevices", {
     audioinput: "",