From 78a8534a197bf77955ecda318737233c12e638b8 Mon Sep 17 00:00:00 2001
From: F-Node-Karlsruhe <christian.fries@eecc.de>
Date: Wed, 7 Dec 2022 17:01:00 +0100
Subject: [PATCH 1/4] init scan option on selector

---
 frontend/package-lock.json       | 89 ++++++++++++++++++++++++++++++--
 frontend/package.json            |  1 +
 frontend/src/styles/style.scss   |  5 ++
 frontend/src/views/Entry.vue     | 13 ++++-
 frontend/src/views/ScanModal.vue | 58 +++++++++++++++++++++
 5 files changed, 161 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/views/ScanModal.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 48a101c..35827c6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "vue": "^3.2.41",
         "vue-router": "^4.1.6",
         "vue-toastification": "^2.0.0-rc.5",
+        "vue3-qrcode-reader": "^0.0.1",
         "vuex": "^4.1.0"
       },
       "devDependencies": {
@@ -5169,6 +5170,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callforth": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/callforth/-/callforth-0.3.1.tgz",
+      "integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -5833,7 +5839,6 @@
       "version": "3.26.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.26.0.tgz",
       "integrity": "sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw==",
-      "dev": true,
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -14658,6 +14663,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "dependencies": {
+        "sdp": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -14801,6 +14818,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -16522,6 +16544,17 @@
         "vue": "^3.0.2"
       }
     },
+    "node_modules/vue3-qrcode-reader": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/vue3-qrcode-reader/-/vue3-qrcode-reader-0.0.1.tgz",
+      "integrity": "sha512-rTZRO2WiBrGRT6pYGMkySNMnEwD9sVlzl9kwPxQ4C0n7I4SXVu60eq8ZQHQTMJAbDTTkbuuW/5reSf+TYFJ5pQ==",
+      "dependencies": {
+        "callforth": "^0.3.1",
+        "core-js": "^3.6.5",
+        "vue": "^3.0.0",
+        "webrtc-adapter": "7.7.0"
+      }
+    },
     "node_modules/vuex": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
@@ -17032,6 +17065,19 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/webrtc-adapter": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz",
+      "integrity": "sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==",
+      "dependencies": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -21324,6 +21370,11 @@
         "get-intrinsic": "^1.0.2"
       }
     },
+    "callforth": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/callforth/-/callforth-0.3.1.tgz",
+      "integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -21831,8 +21882,7 @@
     "core-js": {
       "version": "3.26.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.26.0.tgz",
-      "integrity": "sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw==",
-      "dev": true
+      "integrity": "sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw=="
     },
     "core-js-compat": {
       "version": "3.26.0",
@@ -28397,6 +28447,14 @@
         "glob": "^7.1.3"
       }
     },
+    "rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "requires": {
+        "sdp": "^2.6.0"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -28468,6 +28526,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -29816,6 +29879,17 @@
       "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
       "requires": {}
     },
+    "vue3-qrcode-reader": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/vue3-qrcode-reader/-/vue3-qrcode-reader-0.0.1.tgz",
+      "integrity": "sha512-rTZRO2WiBrGRT6pYGMkySNMnEwD9sVlzl9kwPxQ4C0n7I4SXVu60eq8ZQHQTMJAbDTTkbuuW/5reSf+TYFJ5pQ==",
+      "requires": {
+        "callforth": "^0.3.1",
+        "core-js": "^3.6.5",
+        "vue": "^3.0.0",
+        "webrtc-adapter": "7.7.0"
+      }
+    },
     "vuex": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
@@ -30189,6 +30263,15 @@
       "integrity": "sha512-8bWq0Iluiv9lVf9YaqWQ9+liNgXSHICm+rg544yRgGYaR8yXZTVBaHZkINZSB2yZSWo4b0F6MIxqJezVfOEAlg==",
       "dev": true
     },
+    "webrtc-adapter": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz",
+      "integrity": "sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==",
+      "requires": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      }
+    },
     "websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1ec1714..b20bdbe 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,6 +32,7 @@
     "vue": "^3.2.41",
     "vue-router": "^4.1.6",
     "vue-toastification": "^2.0.0-rc.5",
+    "vue3-qrcode-reader": "^0.0.1",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 8d5ca36..29a50e7 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -22,6 +22,11 @@ html, body {margin: 0; height: 100%; overflow: hidden}
     font-size: 0.7rem;
 }
 
+.scanqr {
+    border: 1px solid #ced4da !important;
+    border-right: none !important;
+    color: #212529 !important;
+}
   
 #backbutton {
     position: absolute;
diff --git a/frontend/src/views/Entry.vue b/frontend/src/views/Entry.vue
index 7ca0ede..e023a15 100644
--- a/frontend/src/views/Entry.vue
+++ b/frontend/src/views/Entry.vue
@@ -11,8 +11,10 @@
             <!--By json file-->
             <div class="card mb-3 p-3 shadow">
                 <h5>Credential File</h5>
+                <ScanModal v-if="scan" id="scan-modal-file" request="file"/>
                 <form v-on:submit.prevent="submitFile">
                     <div class="input-group">
+                        <button @click="scan=true" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal-file" class="btn btn-outline-light scanqr">Scan <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>
@@ -24,6 +26,7 @@
                 <h5>Credential Id</h5>
                 <form v-on:submit.prevent="submitId">
                     <div class="input-group">
+                        <button disabled class="btn btn-outline-light scanqr">Scan <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>
@@ -35,6 +38,7 @@
                 <h5>Subject Id</h5>
                 <form v-on:submit.prevent="submitSubject">
                     <div class="input-group">
+                        <button disabled class="btn btn-outline-light scanqr">Scan <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>
@@ -46,16 +50,21 @@
 </template>
 <script>
   import { useToast } from "vue-toastification";
+  import ScanModal from "./ScanModal.vue"
+
+  import 'bootstrap/js/dist/modal'
+
   export default {
   name: 'Entry',
   components: {
-    
+    ScanModal
   },
   data() {
     return {
         toast: useToast(),
         credentialId: '',
-        subjectId: ''
+        subjectId: '',
+        scan: false
     }
   },
   methods: {
diff --git a/frontend/src/views/ScanModal.vue b/frontend/src/views/ScanModal.vue
new file mode 100644
index 0000000..21af614
--- /dev/null
+++ b/frontend/src/views/ScanModal.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="modal fade" :id="id" aria-hidden="true" :aria-labelledby="id" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5 text-primary" id="exampleModalToggleLabel">Scan {{getRequestType()}}</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body text-center">
+                    <qrcode-stream @decode="onDecode"></qrcode-stream>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { QrcodeStream } from 'vue3-qrcode-reader'
+import { useToast } from "vue-toastification";
+
+export default {
+    name: 'ScanModal',
+    props: {
+        id: String,
+        request: String
+    },
+    components: {
+        QrcodeStream
+    },
+    data() {
+        return {
+            toast: useToast()
+        }
+    },
+    methods: {
+        onDecode(decodedString) {
+            try{
+                if (this.request == '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' })
+                }
+            } catch (error) {
+                this.toast.warning(`Error readin the credential/s!\n${error}`);
+            }
+        },
+        getRequestType() {
+            if (this.request == 'file') return 'Credential';
+            if (this.request == 'credentialid') return 'Credential Id'
+            return 'Subject Id'
+        }
+    }
+}
+</script>
\ No newline at end of file

From ae516bc73c75988c1bf6cf6764c2705c40a70c85 Mon Sep 17 00:00:00 2001
From: F-Node-Karlsruhe <christian.fries@eecc.de>
Date: Thu, 8 Dec 2022 12:57:50 +0100
Subject: [PATCH 2/4] fix modal not closing after scan

---
 frontend/src/views/Entry.vue     | 10 ++---
 frontend/src/views/ScanModal.vue | 74 +++++++++++++++++++++++++++-----
 frontend/src/views/Verify.vue    |  4 +-
 3 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/Entry.vue b/frontend/src/views/Entry.vue
index e023a15..c9e74ea 100644
--- a/frontend/src/views/Entry.vue
+++ b/frontend/src/views/Entry.vue
@@ -11,10 +11,9 @@
             <!--By json file-->
             <div class="card mb-3 p-3 shadow">
                 <h5>Credential File</h5>
-                <ScanModal v-if="scan" id="scan-modal-file" request="file"/>
                 <form v-on:submit.prevent="submitFile">
                     <div class="input-group">
-                        <button @click="scan=true" data-bs-toggle="modal" type="button" data-bs-target="#scan-modal-file" 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">Scan <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>
@@ -26,7 +25,7 @@
                 <h5>Credential Id</h5>
                 <form v-on:submit.prevent="submitId">
                     <div class="input-group">
-                        <button disabled 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">Scan <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>
@@ -38,13 +37,14 @@
                 <h5>Subject Id</h5>
                 <form v-on:submit.prevent="submitSubject">
                     <div class="input-group">
-                        <button disabled 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">Scan <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>
                     <div class="form-text">Provide the subject id for which the credentials shall be queried</div>
                 </form>
             </div>
+            <ScanModal :scan="scan"/>
         </div>
     </div>
 </template>
@@ -64,7 +64,7 @@
         toast: useToast(),
         credentialId: '',
         subjectId: '',
-        scan: false
+        scan: ''
     }
   },
   methods: {
diff --git a/frontend/src/views/ScanModal.vue b/frontend/src/views/ScanModal.vue
index 21af614..537f974 100644
--- a/frontend/src/views/ScanModal.vue
+++ b/frontend/src/views/ScanModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="modal fade" :id="id" aria-hidden="true" :aria-labelledby="id" tabindex="-1">
+    <div class="modal fade" id="scan-modal" aria-hidden="true" tabindex="-1">
         <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down">
             <div class="modal-content">
                 <div class="modal-header">
@@ -7,7 +7,12 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body text-center">
-                    <qrcode-stream @decode="onDecode"></qrcode-stream>
+                    <qrcode-stream v-if="scan!=''" @init="onInit" @decode="onDecode">
+                        <div v-if="!cameraReady" class="spinner-border text-primary m-5" role="status">
+                            <span class="visually-hidden">Waiting for camera ...</span>
+                        </div>
+                    </qrcode-stream>
+                    <qrcode-drop-zone @decode="onDecode" class="p-5 mb-3 text-center shadow"><h5>... or drop image here</h5></qrcode-drop-zone>
                 </div>
             </div>
         </div>
@@ -15,42 +20,89 @@
 </template>
 
 <script>
-import { QrcodeStream } from 'vue3-qrcode-reader'
+import { QrcodeStream, QrcodeDropZone } from 'vue3-qrcode-reader'
 import { useToast } from "vue-toastification";
+import { Modal } from 'bootstrap';
 
 export default {
     name: 'ScanModal',
     props: {
-        id: String,
-        request: String
+        scan: String
     },
     components: {
-        QrcodeStream
+        QrcodeStream,
+        QrcodeDropZone
     },
     data() {
         return {
-            toast: useToast()
+            toast: useToast(),
+            cameraReady: false,
+            modal: null
         }
     },
+    mounted() {
+        this.modal = new Modal(document.getElementById('scan-modal'));
+    },
     methods: {
+        async onInit (promise) {
+            try {
+                await promise
+                this.cameraReady = true
+            } catch (error) {
+                if (error.name === 'NotAllowedError') {
+                    this.toast.error("ERROR: you need to grant camera access permission")
+                } else if (error.name === 'NotFoundError') {
+                    this.toast.error("ERROR: no camera on this device")
+                } else if (error.name === 'NotSupportedError') {
+                    this.toast.error("ERROR: secure context required (HTTPS, localhost)")
+                } else if (error.name === 'NotReadableError') {
+                    this.toast.error("ERROR: is the camera already in use?")
+                } else if (error.name === 'OverconstrainedError') {
+                    this.toast.error("ERROR: installed cameras are not suitable")
+                } else if (error.name === 'StreamApiNotSupportedError') {
+                    this.toast.error("ERROR: Stream API is not supported in this browser")
+                } else if (error.name === 'InsecureContextError') {
+                    this.toast.error('ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.')
+                } else {
+                    this.toast.error(`${error}`);
+                }
+            }
+        },
         onDecode(decodedString) {
+            
             try{
-                if (this.request == 'file') {
+
+                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' })
+
+                } else if (this.scan == 'credid') {
+
+                    this.$router.push({ path: '/verify', query: { credentialId: encodeURIComponent(decodedString) } })
+
+                } else {
+
+                    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());
+
             } catch (error) {
-                this.toast.warning(`Error readin the credential/s!\n${error}`);
+                this.toast.warning(`Error reading the credential/s!\n${error}`);
             }
         },
         getRequestType() {
-            if (this.request == 'file') return 'Credential';
-            if (this.request == 'credentialid') return 'Credential Id'
+            if (this.scan == 'file') return 'Credential';
+            if (this.scan == 'credid') return 'Credential Id'
             return 'Subject Id'
         }
     }
diff --git a/frontend/src/views/Verify.vue b/frontend/src/views/Verify.vue
index 3117592..3dda0b4 100644
--- a/frontend/src/views/Verify.vue
+++ b/frontend/src/views/Verify.vue
@@ -123,7 +123,9 @@ export default {
             progress: 0
         }
     },
-    mounted() {   
+    mounted() { 
+        // somehow modal backdrop does not disappear on hide ... 
+        document.getElementsByClassName('modal-backdrop').forEach((el) => el.remove()); 
         this.fetchData()
                 .then(() => {
                     this.verify()

From 5e06f38fc58d0549600ce083c3e5682f020d0a85 Mon Sep 17 00:00:00 2001
From: F-Node-Karlsruhe <christian.fries@eecc.de>
Date: Thu, 8 Dec 2022 13:45:17 +0100
Subject: [PATCH 3/4] fix text-break on id

---
 frontend/src/styles/style.scss |  2 +-
 frontend/src/views/Verify.vue  | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 29a50e7..85f4b7e 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -19,7 +19,7 @@ html, body {margin: 0; height: 100%; overflow: hidden}
 }
 
 .credentialid {
-    font-size: 0.7rem;
+    font-size: 0.6rem;
 }
 
 .scanqr {
diff --git a/frontend/src/views/Verify.vue b/frontend/src/views/Verify.vue
index 3dda0b4..4619123 100644
--- a/frontend/src/views/Verify.vue
+++ b/frontend/src/views/Verify.vue
@@ -24,11 +24,11 @@
                 <QRModal :id="getCredCompId('modal', credential.id)" v-bind:value="getPlainCredential(credential)"/>
                 <div class="card-header p-3">
                     <div class="row justify-content-between align-items-center">
-                        <div class="col-md-6">
+                        <div class="col-8">
                             <h5 class="mb-0 text-primary">{{credential.type[1]}}</h5>
-                            <div class="credentialid mt-1"><a :href="credential.id"><span class="badge border text-bg-light text-muted">{{credential.id}}</span></a></div>
+                            <div class="credentialid mt-1"><a :href="credential.id">{{credential.id}}</a></div>
                         </div>
-                        <div class="col-md-6 text-end">
+                        <div class="col-2 text-end">
                             <i v-if="credential.verified==true" style="font-size: 1.25rem;" class="bi bi-check-circle-fill text-success" role="img" aria-label="Verified"></i>
                             <i v-else-if="credential.verified==false" style="font-size: 1.25rem;" class="bi bi-x-circle-fill text-danger" role="img" aria-label="Unverified"></i>
                             <div v-else class="spinner-border text-secondary" role="status" style="width: 1.25rem; height: 1.25rem;">
@@ -124,8 +124,12 @@ export default {
         }
     },
     mounted() { 
-        // somehow modal backdrop does not disappear on hide ... 
-        document.getElementsByClassName('modal-backdrop').forEach((el) => el.remove()); 
+        try {
+            // somehow modal backdrop does not disappear on hide ... 
+            // ignore on reload
+            document.getElementsByClassName('modal-backdrop').forEach((el) => el.remove()); 
+        } catch(e){console.log('https://github.com/european-epc-competence-center/vc-verifier/issues/19')}
+
         this.fetchData()
                 .then(() => {
                     this.verify()

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 4/4] 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}`);
             }