Add connection QR code and link (#28)

* Add connection link clipboard copy

* Add connection link QR code

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==",

package.json

@@ -50,6 +50,8 @@
     ]
   },
   "dependencies": {
+    "clipboard-copy": "^4.0.1",
+    "qrcode-svg": "^1.1.0",
     "webnative": "0.33.0-alpha-4"
   }
 }

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>