From 2adcca9e555bd4776718f055fcf40fcf49b08806 Mon Sep 17 00:00:00 2001
From: Brian Ginsburg <7957636+bgins@users.noreply.github.com>
Date: Fri, 5 Aug 2022 10:56:34 -0700
Subject: [PATCH] Add connection QR code and link (#28)

* Add connection link clipboard copy

* Add connection link QR code
---
 package-lock.json                             | 39 +++++++++++++++++++
 package.json                                  |  2 +
 .../auth/backup/BackupDevice.svelte           | 27 +++++++++----
 3 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9061dd8..9fd58ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "svelte-elemetary-template",
       "version": "0.1.0",
       "dependencies": {
+        "clipboard-copy": "^4.0.1",
+        "qrcode-svg": "^1.1.0",
         "webnative": "0.33.0-alpha-4"
       },
       "devDependencies": {
@@ -1294,6 +1296,25 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/clipboard-copy": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-4.0.1.tgz",
+      "integrity": "sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -3610,6 +3631,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode-svg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode-svg/-/qrcode-svg-1.1.0.tgz",
+      "integrity": "sha512-XyQCIXux1zEIA3NPb0AeR8UMYvXZzWEhgdBgBjH9gO7M48H9uoHzviNz8pXw3UzrAcxRRRn9gxHewAVK7bn9qw==",
+      "bin": {
+        "qrcode-svg": "bin/qrcode-svg.js"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
@@ -5728,6 +5757,11 @@
         }
       }
     },
+    "clipboard-copy": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-4.0.1.tgz",
+      "integrity": "sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng=="
+    },
     "cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -7366,6 +7400,11 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "qrcode-svg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode-svg/-/qrcode-svg-1.1.0.tgz",
+      "integrity": "sha512-XyQCIXux1zEIA3NPb0AeR8UMYvXZzWEhgdBgBjH9gO7M48H9uoHzviNz8pXw3UzrAcxRRRn9gxHewAVK7bn9qw=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
diff --git a/package.json b/package.json
index 01f722d..515eff8 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,8 @@
     ]
   },
   "dependencies": {
+    "clipboard-copy": "^4.0.1",
+    "qrcode-svg": "^1.1.0",
     "webnative": "0.33.0-alpha-4"
   }
 }
diff --git a/src/components/auth/backup/BackupDevice.svelte b/src/components/auth/backup/BackupDevice.svelte
index 9ee2723..33e4ec8 100644
--- a/src/components/auth/backup/BackupDevice.svelte
+++ b/src/components/auth/backup/BackupDevice.svelte
@@ -1,11 +1,26 @@
 <script lang="ts">
+  import clipboardCopy from 'clipboard-copy'
+  import QRCode from 'qrcode-svg'
   import { createEventDispatcher } from 'svelte'
 
+  import { sessionStore, theme } from '../../../stores'
   import type { BackupView } from '$lib/views'
   import ClipboardIcon from '$components/icons/ClipboardIcon.svelte'
 
   const dispatch = createEventDispatcher()
 
+  const origin = window.location.origin
+  const connectionLink = `${origin}/link?username=${$sessionStore.username}`
+  const qrcode = new QRCode({
+    content: connectionLink,
+    color: $theme === 'light' ? '#334155' : '#E2E8F0',
+    background: '#ffffff00'
+  }).svg()
+
+  const copyLink = async () => {
+    await clipboardCopy(connectionLink)
+  }
+
   const navigate = (view: BackupView) => {
     dispatch('navigate', { view })
   }
@@ -15,16 +30,12 @@
 <div class="modal">
   <div class="modal-box w-80 relative text-center">
     <div>
-      <h3 class="mb-7 text-xl font-serif">Connect a backup device</h3>
-
-      <!-- GIANT QR CODE GOES HERE -->
-      QR Codes
-
-      <p class="mt-8 mb-4">
+      <h3 class="pb-1 text-xl font-serif">Connect a backup device</h3>
+      {@html qrcode}
+      <p class="font-extralight pt-1 mb-8">
         Scan this code on the new device, or share the connection link.
       </p>
-
-      <button class="btn btn-primary btn-outline" href="/backup">
+      <button class="btn btn-primary btn-outline" on:click={copyLink}>
         <ClipboardIcon />
         <span class="ml-2">Copy connection link</span>
       </button>