added qr code to copyDialog

Co-authored-by: timvisee <tim@visee.me>

.eslintignore

@@ -4,4 +4,5 @@ firefox
 coverage
 android/app/build
 app/locale.js
-app/capabilities.js
+app/capabilities.js
+app/qrcode.js

README.md

@@ -119,4 +119,6 @@ The android implementation is contained in the `android` directory, and can be v
 
 [Mozilla Public License Version 2.0](LICENSE)
 
+[qrcode.js](https://github.com/kazuhikoarase/qrcode-generator) licensed under MIT
+
 ---

app/ui/copyDialog.js

@@ -1,5 +1,6 @@
 const html = require('choo/html');
 const { copyToClipboard } = require('../utils');
+const qr = require('./qr');
 
 module.exports = function(name, url) {
   const dialog = function(state, emit, close) {
@@ -16,13 +17,23 @@ module.exports = function(name, url) {
           ${state.translate('copyLinkDescription')} <br />
           ${name}
         </p>
-        <input
+        <div class="flex flex-row items-center justify-center w-full">
-          type="text"
+          <input
-          id="share-url"
+            type="text"
-          class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
+            id="share-url"
-          value="${url}"
+            class="block w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
-          readonly="true"
+            value="${url}"
-        />
+            readonly="true"
+          />
+          <button
+            id="qr-btn"
+            class="w-16 m-1 p-1"
+            onclick="${toggleQR}"
+            title="QR code"
+          >
+            ${qr(url)}
+          </button>
+        </div>
         <button
           class="btn rounded-lg w-full flex-shrink-0 focus:outline"
           onclick="${copy}"
@@ -40,6 +51,19 @@ module.exports = function(name, url) {
       </send-copy-dialog>
     `;
 
+    function toggleQR(event) {
+      event.stopPropagation();
+      const shareUrl = document.getElementById('share-url');
+      const qrBtn = document.getElementById('qr-btn');
+      if (shareUrl.classList.contains('hidden')) {
+        shareUrl.classList.replace('hidden', 'block');
+        qrBtn.classList.replace('w-48', 'w-16');
+      } else {
+        shareUrl.classList.replace('block', 'hidden');
+        qrBtn.classList.replace('w-16', 'w-48');
+      }
+    }
+
     function copy(event) {
       event.stopPropagation();
       copyToClipboard(url);

app/ui/qr.js

@@ -0,0 +1,10 @@
+const raw = require('choo/html/raw');
+const qrcode = require('../qrcode');
+
+module.exports = function(url) {
+  const gen = qrcode(5, 'L');
+  gen.addData(url);
+  gen.make();
+  const qr = gen.createSvgTag({ scalable: true });
+  return raw(qr);
+};