From 74e3472ebd64102d19cca73e78b2d20a87bddf9f Mon Sep 17 00:00:00 2001
From: sualko <klaus@jsxc.org>
Date: Tue, 26 Jan 2021 10:29:13 +0100
Subject: [PATCH] feat: show room url with qr code in edit dialog

---
 package.json                  |  1 +
 ts/Manager/App.scss           | 34 ++++++++++++++++++++++++++++++++++
 ts/Manager/EditRoomDialog.tsx | 12 ++++++++++++
 yarn.lock                     | 14 ++++++++++++++
 4 files changed, 61 insertions(+)

diff --git a/package.json b/package.json
index 8e8523a..bdfec72 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
 		"dotenv": "^8.2.0",
 		"execa": "^4.0.0",
 		"libxmljs": "^0.19.7",
+		"qrcode.react": "^1.0.1",
 		"react-copy-to-clipboard": "^5.0.2",
 		"simple-git": "^2.20.1"
 	},
diff --git a/ts/Manager/App.scss b/ts/Manager/App.scss
index cd8859e..f519810 100644
--- a/ts/Manager/App.scss
+++ b/ts/Manager/App.scss
@@ -250,3 +250,37 @@ pre {
     white-space: normal;
   }
 }
+
+.bbb-input-container {
+  display: flex;
+}
+
+.bbb-qrcode-container {
+  display: block;
+  height: 34px;
+  width: 34px;
+  margin: 3px;
+  position: relative;
+  cursor: zoom-in;
+
+  canvas {
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  input[type="checkbox"] {
+    display: none;
+
+    &:checked + canvas {
+      max-width: none;
+      max-height: none;
+      box-shadow: 0 0 10px;
+      box-shadow: 0 0 5px var(--color-box-shadow);
+      cursor: zoom-out;
+      border: 5px solid #fff;
+    }
+  }
+}
\ No newline at end of file
diff --git a/ts/Manager/EditRoomDialog.tsx b/ts/Manager/EditRoomDialog.tsx
index a089440..307069e 100644
--- a/ts/Manager/EditRoomDialog.tsx
+++ b/ts/Manager/EditRoomDialog.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import QRCode from 'qrcode.react';
 import { Access, Room, Permission, RoomShare, api, Restriction } from '../Common/Api';
 import Dialog from './Dialog';
 import ShareWith from './ShareWith';
@@ -97,6 +98,17 @@ const EditRoomDialog: React.FC<Props> = ({ room, restriction, updateProperty, op
 
 	return (
 		<Dialog open={open} onClose={() => setOpen(false)} title={t('bbb', 'Edit "{room}"', { room: room.name })}>
+			<div className="bbb-form-element">
+				<h3>{t('bbb', 'Raum URL')}</h3>
+				<div className="bbb-input-container">
+					<CopyToClipboard text={api.getRoomUrl(room)}><input type="text" readOnly={true} className="icon-clippy" value={api.getRoomUrl(room)} /></CopyToClipboard>
+					<label className="bbb-qrcode-container">
+						<input type="checkbox" />
+						<QRCode value={api.getRoomUrl(room)} level="M" imageSettings={{src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGnSURBVFiF7de9TxRBHMbxzxG5BonRBOGsVRJfIvGFPwFKX0tjJGqsrfwvCC0YtbJSQyT4J0hB1BhtjZFCI4FoqTRCsbO43g24e+5Q3ZNsZm9+z8zzvZns7Rw9/a0jeIx1bNZ8rYe5WzuFt7CSILj9WsFwHtooADzA7XD/DG/CgDrUwHlcDZ/ncLfdtBoCn9cUGtN8yPiWd/QVikOhfZcQ4G1oD8cA8u2oa9ljyufe3vq+HYx7ph7Avv8YO4Rx2b4uy35oKqubFWhiBl+wiJf4imn0V52smxWYxc22vn7cwwHcqjJZ1RUYi4QXNYUzKQEm/1FvYCIlwEAJz/6UAB9KeN6nBFjAp13qH2VPRjKADdkr9Uek9h3XgicZwGk8wcFI7VConUoFMIZXOLGL5ySWVHgUywI08RSDJbyDwdusE+AGjpb0wjFcrxPgSoXwXJerAnScVgo63gXAaKSv49RVBFgL7dnIwN9dAMR0LrSreUfxbfgCd3BJdix/7Q/pBn5WDPuF++G+gQu4WMjq0Ii9+WPyWeFU3K4WHsm2o+7gNTwMX7SnbW0BScCZl0uGVe8AAAAASUVORK5CYII=', excavate: true, height: 32, width: 32}} />
+					</label>
+				</div>
+			</div>
+
 			{inputElement(t('bbb', 'Name'), 'name')}
 			{inputElement(t('bbb', 'Welcome'), 'welcome')}
 			{inputElement(t('bbb', 'Participant limit'), 'maxParticipants', 'number')}
diff --git a/yarn.lock b/yarn.lock
index aaec91c..b6a8e13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6564,6 +6564,20 @@ q@^1.5.1:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
+qrcode.react@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.1.tgz#2834bb50e5e275ffe5af6906eff15391fe9e38a5"
+  integrity sha512-8d3Tackk8IRLXTo67Y+c1rpaiXjoz/Dd2HpcMdW//62/x8J1Nbho14Kh8x974t9prsLHN6XqVgcnRiBGFptQmg==
+  dependencies:
+    loose-envify "^1.4.0"
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"