From 3080e9668ae7b087880f6fb22a673a9f142791fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mai=20G=C3=A1bor?= <remaigabor@gmail.com>
Date: Sat, 3 Aug 2024 14:30:06 +0200
Subject: [PATCH] add qrcode to join dialog

---
 package.json                          |  1 +
 src/views/landingpage/LandingPage.tsx | 24 +++++++++++++++---------
 yarn.lock                             | 18 ++++++++++++++++++
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 66d9b782..3c561c8e 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
 		"react-dom": "^18.2.0",
 		"react-flip-toolkit": "^7.1.0",
 		"react-intl": "^6.5.1",
+		"react-qrcode-logo": "^3.0.0",
 		"react-redux": "^8.1.3",
 		"react-router-dom": "^6.18.0",
 		"redux-logger": "^3.0.6",
diff --git a/src/views/landingpage/LandingPage.tsx b/src/views/landingpage/LandingPage.tsx
index 50859e38..4b663efc 100644
--- a/src/views/landingpage/LandingPage.tsx
+++ b/src/views/landingpage/LandingPage.tsx
@@ -1,12 +1,13 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button } from '@mui/material';
+import { Button, Container } from '@mui/material';
 import randomString from 'random-string';
 import TextInputField from '../../components/textinputfield/TextInputField';
 import { joinLabel, roomNameLabel } from '../../components/translated/translatedComponents';
 import GenericDialog from '../../components/genericdialog/GenericDialog';
 import StyledBackground from '../../components/StyledBackground';
 import PrecallTitle from '../../components/precalltitle/PrecallTitle';
+import { QRCode } from 'react-qrcode-logo';
 
 const LandingPage = (): JSX.Element => {
 	const navigate = useNavigate();
@@ -18,14 +19,18 @@ const LandingPage = (): JSX.Element => {
 			<GenericDialog
 				title={ <PrecallTitle /> }
 				content={
-					<TextInputField
-						label={roomNameLabel()}
-						value={roomId}
-						setValue={setRoomId}
-						onEnter={onClicked}
-						randomizeOnBlank
-						autoFocus
-					/>
+					<Container style={{ textAlign: 'center' }}>
+						<QRCode value={`${window.location.protocol}//${window.location.hostname }/${roomId}`} />
+						<TextInputField
+							label={roomNameLabel()}
+							value={roomId}
+							setValue={setRoomId}
+							onEnter={onClicked}
+							randomizeOnBlank
+							autoFocus
+						/>
+					</Container>
+
 				}
 				actions={
 					<Button
@@ -38,6 +43,7 @@ const LandingPage = (): JSX.Element => {
 					</Button>
 				}
 			/>
+			
 		</StyledBackground>
 	);
 };
diff --git a/yarn.lock b/yarn.lock
index 76a46b4b..e228bf95 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3146,6 +3146,11 @@ lodash.isboolean@^3.0.3:
   resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
   integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.isinteger@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
@@ -3598,6 +3603,11 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+qrcode-generator@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz#63f771224854759329a99048806a53ed278740e7"
+  integrity sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==
+
 qs@^6.11.2:
   version "6.11.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
@@ -3701,6 +3711,14 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-qrcode-logo@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-qrcode-logo/-/react-qrcode-logo-3.0.0.tgz#71cb43ddef9b338cc151800968276ca210086d11"
+  integrity sha512-2+vZ3GNBdUpYxIKyt6SFZsDGXa0xniyUQ0wPI4O0hJTzRjttPIx1pPnH9IWQmp/4nDMoN47IBhi3Breu1KudYw==
+  dependencies:
+    lodash.isequal "^4.5.0"
+    qrcode-generator "^1.4.4"
+
 react-redux@^8.1.3:
   version "8.1.3"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.3.tgz#4fdc0462d0acb59af29a13c27ffef6f49ab4df46"