From 864067937509781b68afd2b2bf946c7c1ec0efa4 Mon Sep 17 00:00:00 2001
From: F-Node-Karlsruhe <christian.fries@eecc.de>
Date: Thu, 8 Dec 2022 15:20:07 +0100
Subject: [PATCH] stop camera when modal close

---
 frontend/src/views/Entry.vue     |  9 ++++--
 frontend/src/views/ScanModal.vue | 48 +++++++++++++++++++-------------
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/frontend/src/views/Entry.vue b/frontend/src/views/Entry.vue
index c9e74ea..8421bb2 100644
--- a/frontend/src/views/Entry.vue
+++ b/frontend/src/views/Entry.vue
@@ -13,7 +13,7 @@
                 <h5>Credential File</h5>
                 <form v-on:submit.prevent="submitFile">
                     <div class="input-group">
-                        <button @click="scan='file'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr">Scan <i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
+                        <button @click="scan='file'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr"><i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
                         <input multiple v-on:change="onFileChange" id="credentialId" type="file" class="form-control" placeholder="credential.json" aria-label="Credential" aria-describedby="credentialHelp">
                         <button class="btn btn-outline-primary" type="submit">Verify</button>
                     </div>
@@ -25,7 +25,7 @@
                 <h5>Credential Id</h5>
                 <form v-on:submit.prevent="submitId">
                     <div class="input-group">
-                        <button @click="scan='credid'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr">Scan <i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
+                        <button @click="scan='credid'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr"><i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
                         <input v-model="credentialId" id="credentialId" type="text" class="form-control" placeholder="https://registry.org/vc/uuid" aria-label="Credential Id" aria-describedby="credentialIdHelp">
                         <button class="btn btn-outline-primary" type="submit">Verify</button>
                     </div>
@@ -37,7 +37,7 @@
                 <h5>Subject Id</h5>
                 <form v-on:submit.prevent="submitSubject">
                     <div class="input-group">
-                        <button @click="scan='subid'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr">Scan <i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
+                        <button @click="scan='subid'" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal" class="btn btn-outline-light scanqr"><i class="bi-qr-code" role="img" aria-label="QR-Code"></i></button>
                         <input v-model="subjectId" id="credentialId" type="text" class="form-control" placeholder="https://gs1.org/123455" aria-label="Subject Id" aria-describedby="subjectIdHelp">
                         <button class="btn btn-outline-primary" type="submit">Verify</button>
                     </div>
@@ -67,6 +67,9 @@
         scan: ''
     }
   },
+  mounted() {
+    document.getElementById('scan-modal').addEventListener('hidden.bs.modal', () => { this.scan = '' });
+  },
   methods: {
     onFileChange(e) {
         var files = Array.from(e.target.files || e.dataTransfer.files);
diff --git a/frontend/src/views/ScanModal.vue b/frontend/src/views/ScanModal.vue
index 537f974..27de2a3 100644
--- a/frontend/src/views/ScanModal.vue
+++ b/frontend/src/views/ScanModal.vue
@@ -7,7 +7,7 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body text-center">
-                    <qrcode-stream v-if="scan!=''" @init="onInit" @decode="onDecode">
+                    <qrcode-stream v-if="scan!=''" @init="onInit" @decode="onDecode" :camera="camera">
                         <div v-if="!cameraReady" class="spinner-border text-primary m-5" role="status">
                             <span class="visually-hidden">Waiting for camera ...</span>
                         </div>
@@ -37,12 +37,18 @@ export default {
         return {
             toast: useToast(),
             cameraReady: false,
-            modal: null
+            modal: null,
         }
     },
     mounted() {
         this.modal = new Modal(document.getElementById('scan-modal'));
     },
+    computed: {
+        camera() {
+            if(this.scan == '') return ''
+            return 'auto'
+        }
+    },
     methods: {
         async onInit (promise) {
             try {
@@ -69,33 +75,35 @@ export default {
             }
         },
         onDecode(decodedString) {
-            
-            try{
 
-                if (this.scan == 'file') {
-                    const credential = JSON.parse(decodedString);
-                    if (Array.isArray(credential)) {
-                        this.$store.dispatch("addCredentials", credential);
-                    } else {
-                        this.$store.dispatch("addCredential", credential);
-                    }
+            try{
+                if (decodedString.length != 0) {
+                    
+                    if (this.scan == 'file') {
+                        const credential = JSON.parse(decodedString);
+                        if (Array.isArray(credential)) {
+                            this.$store.dispatch("addCredentials", credential);
+                        } else {
+                            this.$store.dispatch("addCredential", credential);
+                        }
 
-                    this.$router.push({ path: '/verify' })
+                        this.$router.push({ path: '/verify' })
 
-                } else if (this.scan == 'credid') {
+                    } else if (this.scan == 'credid') {
 
-                    this.$router.push({ path: '/verify', query: { credentialId: encodeURIComponent(decodedString) } })
+                        this.$router.push({ path: '/verify', query: { credentialId: encodeURIComponent(decodedString) } })
 
-                } else {
+                    } else {
 
-                    this.$router.push({ path: '/verify', query: { subjectId: encodeURIComponent(decodedString) } })
+                        this.$router.push({ path: '/verify', query: { subjectId: encodeURIComponent(decodedString) } })
 
-                }
+                    }
 
-                this.modal.hide()
-                // modal backdrop does not disappear on hide ....
-                document.getElementsByClassName('modal-backdrop').forEach((el) => el.remove());
+                    this.modal.hide()
+                    // modal backdrop does not disappear on hide ....
+                    document.getElementsByClassName('modal-backdrop').forEach((el) => el.remove());
 
+                }
             } catch (error) {
                 this.toast.warning(`Error reading the credential/s!\n${error}`);
             }