Qr code download link proposal

app/controller.js

@@ -8,6 +8,7 @@ import copyDialog from './ui/copyDialog';
 import shareDialog from './ui/shareDialog';
 import signupDialog from './ui/signupDialog';
 import surveyDialog from './ui/surveyDialog';
+import qrDialog from './ui/qrDialog';
 
 export default function(state, emitter) {
   let lastRender = 0;
@@ -306,6 +307,11 @@ export default function(state, emitter) {
     render();
   });
 
+  emitter.on('displayQRCode', url => {
+    state.modal = qrDialog(url);
+    render();
+  });
+
   setInterval(() => {
     // poll for updates of the upload list
     if (!state.modal && state.route === '/') {

app/ui/archiveTile.js

@@ -248,6 +248,7 @@ module.exports = function(state, emit, archive) {
     copyToClipboard(archive.url);
     const text = event.target.lastChild;
     text.textContent = state.translate('copiedUrl');
+    emit('displayQRCode', archive.url);
     setTimeout(
       () => (text.textContent = state.translate('copyLinkButton')),
       1000

app/ui/copyDialog.js

@@ -44,7 +44,7 @@ module.exports = function(name, url) {
       event.stopPropagation();
       copyToClipboard(url);
       event.target.textContent = state.translate('copiedUrl');
-      setTimeout(close, 1000);
+      emit('displayQRCode', url);
     }
   };
   dialog.type = 'copy';

app/ui/qrDialog.js

@@ -0,0 +1,37 @@
+const html = require('choo/html');
+const QRious = require('qrious');
+
+module.exports = function(url) {
+  const qr = new QRious({
+    value: url,
+    size: 300
+  });
+
+  const dialog = function(state, emit, close) {
+    return html`
+      <main class="main">
+        <section class="flex flex-col p-4 max-w-xs m-auto">
+          <div>
+            <img class="max-w-100" src="${qr.toDataURL('image/jpeg')}" />
+          </div>
+
+          <h1 class="font-bold my-4">
+            ${state.translate('copiedUrl')}
+          </h1>
+
+          <p>${state.translate('qrDialogMessage')}</p>
+
+          <button
+            class="btn rounded-lg w-full flex-no-shrink focus:outline mt-4"
+            onclick="${close}"
+            title="${state.translate('okButton')}"
+          >
+            ${state.translate('okButton')}
+          </button>
+        </section>
+      </main>
+    `;
+  };
+
+  return dialog;
+};

package.json

@@ -155,6 +155,7 @@
     "mkdirp": "^0.5.1",
     "mozlog": "^2.2.0",
     "node-fetch": "^2.6.0",
+    "qrious": "^4.0.2",
     "redis": "^2.8.0",
     "selenium-standalone": "^6.15.6",
     "ua-parser-js": "^0.7.20"

public/locales/en-US/send.ftl

@@ -13,6 +13,7 @@ timespanHours = { $num ->
        *[other] { $num } hours
     }
 copiedUrl = Copied!
+qrDialogMessage = For your convenience, here's a QR code containing that same link
 unlockInputPlaceholder = Password
 unlockButtonLabel = Unlock
 downloadButtonLabel = Download