feat: move qrcode scanner into reuseable component (#3567)

Co-authored-by: Tiago Vasconcelos <talvasconcelos@gmail.com>
2025-11-28 17:58:50 +01:00
parent 4da651b74a
commit 6449276003
12 changed files with 111 additions and 65 deletions
@@ -0,0 +1,55 @@
+window.app.component('lnbits-qrcode-scanner', {
+  template: '#lnbits-qrcode-scanner',
+  mixins: [window.windowMixin],
+  watch: {
+    'g.showScanner'(newVal) {
+      if (newVal === true) {
+        if (this.g.hasCamera === false) {
+          Quasar.Notify.create({
+            message: 'No camera found on this device.',
+            type: 'negative'
+          })
+          this.g.showScanner = false
+        }
+      }
+    }
+  },
+  methods: {
+    detect(val) {
+      const rawValue = val[0].rawValue
+      console.log('Detected QR code value:', rawValue)
+      this.$emit('detect', rawValue)
+      this.g.showScanner = false
+    },
+    async onInitQR(promise) {
+      try {
+        await promise
+      } catch (error) {
+        const mapping = {
+          NotAllowedError: 'ERROR: you need to grant camera access permission',
+          NotFoundError: 'ERROR: no camera on this device',
+          NotSupportedError:
+            'ERROR: secure context required (HTTPS, localhost)',
+          NotReadableError: 'ERROR: is the camera already in use?',
+          OverconstrainedError: 'ERROR: installed cameras are not suitable',
+          StreamApiNotSupportedError:
+            'ERROR: Stream API is not supported in this browser',
+          InsecureContextError:
+            'ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'
+        }
+        const valid_error = Object.keys(mapping).filter(key => {
+          return error.name === key
+        })
+        const camera_error = valid_error
+          ? mapping[valid_error]
+          : `ERROR: Camera error (${error.name})`
+        Quasar.Notify.create({
+          message: camera_error,
+          type: 'negative'
+        })
+        this.g.hasCamera = false
+        this.showScanner = false
+      }
+    }
+  }
+})