Display QR code when sharing invite link

Fixes: #2495
Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

src/QrCode.module.css

@@ -0,0 +1,20 @@
+/*
+Copyright 2024 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.
+*/
+
+.qrCode img {
+  max-width: 100%;
+  image-rendering: pixelated;
+}

src/QrCode.tsx

@@ -0,0 +1,54 @@
+/*
+Copyright 2024 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 { FC, useEffect, useState } from "react";
+import { toDataURL } from "qrcode";
+import classNames from "classnames";
+import { t } from "i18next";
+
+import styles from "./QrCode.module.css";
+
+interface Props {
+  data: string;
+  className?: string;
+}
+
+export const QrCode: FC<Props> = ({ data, className }) => {
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isCancelled = false; 
+
+    toDataURL(data, { errorCorrectionLevel: "L" }).then((url) => {
+      if (!isCancelled) {
+        setUrl(url);
+      }
+    }).catch((reason) => {
+      if (!isCancelled) {
+        setUrl(null);
+      }
+    });
+
+    return (): void => { isCancelled = true; };
+  }, [data]);
+
+  return (
+    <div className={classNames(styles.qrCode, className)}>
+        {url && <img src={url} alt={t("qr_code")} />}
+    </div>
+);
+};
+

src/room/InviteModal.module.css

@@ -24,3 +24,12 @@ limitations under the License.
 .button {
   width: 100%;
 }
+
+.qrCode {
+  display: flex;
+  justify-content: center;
+}
+
+.qrCode img {
+  margin-block-end: var(--cpd-space-8x);
+}

src/room/InviteModal.tsx

@@ -29,6 +29,7 @@ import { getAbsoluteRoomUrl } from "../utils/matrix";
 import styles from "./InviteModal.module.css";
 import { Toast } from "../Toast";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { QrCode } from "../QrCode";
 
 interface Props {
   room: Room;
@@ -61,6 +62,7 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
   return (
     <>
       <Modal title={t("invite_modal.title")} open={open} onDismiss={onDismiss}>
+        <QrCode className={styles.qrCode} data={url} />
         <Text className={styles.url} size="sm" weight="semibold">
           {url}
         </Text>