Improve loading of passwords

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/e2ee/sharedKeyManagement.ts

@@ -14,20 +14,56 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 
 import { useEnableE2EE } from "../settings/useSetting";
 import { useLocalStorage } from "../useLocalStorage";
+import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
 
 export const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
   `room-shared-key-${roomId}`;
 
-export const useRoomSharedKey = (
+export const useInternalRoomSharedKey = (
   roomId: string
 ): [string | null, ((value: string) => void) | null] => {
   const key = useMemo(() => getRoomSharedKeyLocalStorageKey(roomId), [roomId]);
   const [e2eeEnabled] = useEnableE2EE();
   const [roomSharedKey, setRoomSharedKey] = useLocalStorage(key);
 
+  console.log("LOG useRoomSharedKey return:", key, roomSharedKey);
   return e2eeEnabled ? [roomSharedKey, setRoomSharedKey] : [null, null];
 };
+
+export const useRoomSharedKey = (roomId: string): string | null => {
+  return useInternalRoomSharedKey(roomId)[0];
+};
+
+export const useManageRoomSharedKey = (roomId: string): string | null => {
+  const { password } = useUrlParams();
+  const [e2eeSharedKey, setE2EESharedKey] = useInternalRoomSharedKey(roomId);
+
+  useEffect(() => {
+    if (!password) return;
+    if (password === "") return;
+    if (password === e2eeSharedKey) return;
+
+    setE2EESharedKey?.(password);
+  }, [password, e2eeSharedKey, setE2EESharedKey]);
+
+  useEffect(() => {
+    const hash = location.hash;
+
+    if (!hash.includes("?")) return;
+    if (!hash.includes(PASSWORD_STRING)) return;
+    if (password !== e2eeSharedKey) return;
+
+    const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
+    const hashEnd = passwordStart.split("&")[1];
+
+    location.replace((hashStart ?? "") + (hashEnd ?? ""));
+  }, [password, e2eeSharedKey]);
+
+  return e2eeSharedKey;
+};
+
+};

src/home/CallList.tsx

@@ -73,7 +73,7 @@ function CallTile({
   client,
   disableFacepile,
 }: CallTileProps) {
-  const [roomSharedKey] = useRoomSharedKey(roomId);
+  const roomSharedKey = useRoomSharedKey(roomId);
 
   return (
     <div className={styles.callTile}>

src/room/GroupCallView.tsx

@@ -38,8 +38,10 @@ import { ActiveCall } from "./InCallView";
 import { Config } from "../config/Config";
 import { MuteStates, useMuteStates } from "./MuteStates";
 import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
-import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
-import { PASSWORD_STRING, useUrlParams } from "../UrlParams";
+import {
+  useManageRoomSharedKey,
+  useRoomSharedKey,
+} from "../e2ee/sharedKeyManagement";
 import { useEnableE2EE } from "../settings/useSetting";
 
 declare global {
@@ -75,7 +77,7 @@ export function GroupCallView({
     otelGroupCallMembership,
   } = useGroupCall(groupCall, client);
 
-  const { password } = useUrlParams();
+  const e2eeSharedKey = useManageRoomSharedKey(groupCall.room.roomId);
 
   const { t } = useTranslation();
 
@@ -246,27 +248,6 @@ export function GroupCallView({
   }, [groupCall, state, leave]);
 
   const [e2eeEnabled] = useEnableE2EE();
-  const [e2eeSharedKey, setE2EESharedKey] = useRoomSharedKey(
-    groupCall.room.roomId
-  );
-
-  useEffect(() => {
-    if (!password || password === "" || password === e2eeSharedKey) return;
-
-    setE2EESharedKey?.(password);
-  }, [password, e2eeSharedKey, setE2EESharedKey]);
-
-  useEffect(() => {
-    const hash = location.hash;
-    if (!hash.includes("?")) return;
-
-    const [hashStart, passwordStart] = hash.split(PASSWORD_STRING);
-    const [password, hashEnd] = passwordStart ? passwordStart.split("&") : [];
-
-    if (password !== e2eeSharedKey) return;
-
-    location.replace((hashStart ?? "") + (hashEnd ?? ""));
-  }, [password, e2eeSharedKey]);
 
   const e2eeConfig = useMemo(
     () => (e2eeSharedKey ? { sharedKey: e2eeSharedKey } : undefined),
@@ -279,7 +260,7 @@ export function GroupCallView({
     groupCall.enter();
   }, [groupCall]);
 
-  if (!password && !e2eeSharedKey && e2eeEnabled) {
+  if (e2eeEnabled && isRoomE2EE && !e2eeSharedKey) {
     return (
       <ErrorView
         error={

src/room/InviteModal.tsx

@@ -29,7 +29,7 @@ interface Props extends Omit<ModalProps, "title" | "children"> {
 
 export const InviteModal: FC<Props> = ({ roomId, ...rest }) => {
   const { t } = useTranslation();
-  const [roomSharedKey] = useRoomSharedKey(roomId);
+  const roomSharedKey = useRoomSharedKey(roomId);
 
   return (
     <Modal

src/room/LobbyView.tsx

@@ -44,7 +44,7 @@ export const LobbyView: FC<Props> = ({
   hideHeader,
 }) => {
   const { t } = useTranslation();
-  const [roomSharedKey] = useRoomSharedKey(matrixInfo.roomId);
+  const roomSharedKey = useRoomSharedKey(matrixInfo.roomId);
   useLocationNavigation();
 
   const joinCallButtonRef = useRef<HTMLButtonElement>(null);