Make copy link button include a password

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

src/home/CallList.tsx

@@ -25,6 +25,7 @@ import styles from "./CallList.module.css";
 import { getRoomUrl } from "../matrix-utils";
 import { Body, Caption } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 
 interface CallListProps {
   rooms: GroupCallRoom[];
@@ -35,13 +36,14 @@ export function CallList({ rooms, client, disableFacepile }: CallListProps) {
   return (
     <>
       <div className={styles.callList}>
-        {rooms.map(({ roomAlias, roomName, avatarUrl, participants }) => (
+        {rooms.map(({ room, roomAlias, roomName, avatarUrl, participants }) => (
           <CallTile
             key={roomAlias}
             client={client}
             name={roomName}
             avatarUrl={avatarUrl}
             roomAlias={roomAlias}
+            roomId={room.roomId}
             participants={participants}
             disableFacepile={disableFacepile}
           />
@@ -60,6 +62,7 @@ interface CallTileProps {
   name: string;
   avatarUrl: string;
   roomAlias: string;
+  roomId: string;
   participants: RoomMember[];
   client: MatrixClient;
   disableFacepile?: boolean;
@@ -68,10 +71,13 @@ function CallTile({
   name,
   avatarUrl,
   roomAlias,
+  roomId,
   participants,
   client,
   disableFacepile,
 }: CallTileProps) {
+  const [roomSharedKey] = useRoomSharedKey(roomId);
+
   return (
     <div className={styles.callTile}>
       <Link
@@ -103,7 +109,7 @@ function CallTile({
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={getRoomUrl(roomAlias)}
+        value={getRoomUrl(roomAlias, roomSharedKey)}
       />
     </div>
   );

src/matrix-utils.ts

@@ -32,7 +32,7 @@ import {
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
 import IndexedDBWorker from "./IndexedDBWorker?worker";
-import { getUrlParams } from "./UrlParams";
+import { getUrlParams, PASSWORD_STRING } from "./UrlParams";
 import { loadOlm } from "./olm";
 import { Config } from "./config/Config";
 
@@ -343,13 +343,20 @@ export async function createRoom(
 }
 
 // Returns a URL to that will load Element Call with the given room
-export function getRoomUrl(roomIdOrAlias: string): string {
+export function getRoomUrl(
+  roomIdOrAlias: string,
+  password: string = ""
+): string {
   if (roomIdOrAlias.startsWith("#")) {
     return `${window.location.protocol}//${window.location.host}/${
       roomIdOrAlias.substring(1).split(":")[0]
-    }`;
+    }${password === "" ? "" : PASSWORD_STRING + password}`;
   } else {
-    return `${window.location.protocol}//${window.location.host}/room?roomId=${roomIdOrAlias}`;
+    return `${window.location.protocol}//${
+      window.location.host
+    }/room?roomId=${roomIdOrAlias}${
+      password === "" ? "" : "#" + PASSWORD_STRING + password
+    }`;
   }
 }
 

src/room/InCallView.tsx

@@ -462,9 +462,8 @@ export function InCallView({
       )}
       {inviteModalState.isOpen && (
         <InviteModal
-          roomIdOrAlias={
-            groupCall.room.getCanonicalAlias() ?? groupCall.room.roomId
-          }
+          roomAlias={groupCall.room.getCanonicalAlias() ?? undefined}
+          roomId={groupCall.room.roomId}
           {...inviteModalProps}
         />
       )}

src/room/InviteModal.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 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.
@@ -21,13 +21,16 @@ import { Modal, ModalContent, ModalProps } from "../Modal";
 import { CopyButton } from "../button";
 import { getRoomUrl } from "../matrix-utils";
 import styles from "./InviteModal.module.css";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 
 interface Props extends Omit<ModalProps, "title" | "children"> {
-  roomIdOrAlias: string;
+  roomAlias?: string;
+  roomId: string;
 }
 
-export const InviteModal: FC<Props> = ({ roomIdOrAlias, ...rest }) => {
+export const InviteModal: FC<Props> = ({ roomAlias, roomId, ...rest }) => {
   const { t } = useTranslation();
+  const [roomSharedKey] = useRoomSharedKey(roomId);
 
   return (
     <Modal
@@ -40,7 +43,7 @@ export const InviteModal: FC<Props> = ({ roomIdOrAlias, ...rest }) => {
         <p>{t("Copy and share this call link")}</p>
         <CopyButton
           className={styles.copyButton}
-          value={getRoomUrl(roomIdOrAlias)}
+          value={getRoomUrl(roomAlias ?? roomId, roomSharedKey)}
           data-testid="modal_inviteLink"
         />
       </ModalContent>

src/room/LobbyView.tsx

@@ -26,6 +26,7 @@ import { Body, Link } from "../typography/Typography";
 import { useLocationNavigation } from "../useLocationNavigation";
 import { MatrixInfo, VideoPreview } from "./VideoPreview";
 import { MuteStates } from "./MuteStates";
+import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 
 interface Props {
   matrixInfo: MatrixInfo;
@@ -43,6 +44,7 @@ export const LobbyView: FC<Props> = ({
   hideHeader,
 }) => {
   const { t } = useTranslation();
+  const [roomSharedKey] = useRoomSharedKey(matrixInfo.roomId);
   useLocationNavigation();
 
   const joinCallButtonRef = useRef<HTMLButtonElement>(null);
@@ -80,7 +82,10 @@ export const LobbyView: FC<Props> = ({
             <Body>Or</Body>
             <CopyButton
               variant="secondaryCopy"
-              value={getRoomUrl(matrixInfo.roomAlias ?? matrixInfo.roomId)}
+              value={getRoomUrl(
+                matrixInfo.roomAlias ?? matrixInfo.roomId,
+                roomSharedKey
+              )}
               className={styles.copyButton}
               copiedMessage={t("Call link copied")}
               data-testid="lobby_inviteLink"