From 169e7b9196ec7ef49dead154d5245e321b86ce0f Mon Sep 17 00:00:00 2001
From: david zynda <david.zynda@partners.basf.com>
Date: Mon, 20 Nov 2023 10:58:49 +0100
Subject: [PATCH 1/5] auto-reload for each camera permission change

---
 src/components/general/QrcodeStrem.vue | 58 ++++++++++++++++
 src/store/index.js                     |  9 ++-
 src/views/SearchView.vue               | 92 ++++++++------------------
 3 files changed, 93 insertions(+), 66 deletions(-)
 create mode 100644 src/components/general/QrcodeStrem.vue

diff --git a/src/components/general/QrcodeStrem.vue b/src/components/general/QrcodeStrem.vue
new file mode 100644
index 000000000..f37995dfc
--- /dev/null
+++ b/src/components/general/QrcodeStrem.vue
@@ -0,0 +1,58 @@
+<template>
+  <qrcode-stream
+    class="qrcode-stream"
+    @init="onInit"
+    @decode="onDecode"
+  ></qrcode-stream>
+</template>
+
+<script>
+import { QrcodeStream } from "vue3-qrcode-reader";
+import store from "@/store/index";
+
+export default {
+  name: "QRcodeStream",
+  components: {
+    QrcodeStream,
+  },
+  data() {
+    return {
+      error: "",
+      decodedString: "",
+    };
+  },
+  methods: {
+    async onInit(promise) {
+      try {
+        await promise;
+      } catch (error) {
+        store.commit("setQrError", error);
+        if (error.name === "NotAllowedError") {
+          this.error = "ERROR: you need to grant camera access permission";
+        } else if (error.name === "NotFoundError") {
+          this.error = "ERROR: no camera on this device";
+        } else if (error.name === "NotSupportedError") {
+          this.error = "ERROR: secure context required (HTTPS, localhost)";
+        } else if (error.name === "NotReadableError") {
+          this.error = "ERROR: is the camera already in use?";
+        } else if (error.name === "OverconstrainedError") {
+          this.error = "ERROR: installed cameras are not suitable";
+        } else if (error.name === "StreamApiNotSupportedError") {
+          this.error = "ERROR: Stream API is not supported in this browser";
+        } else if (error.name === "InsecureContextError") {
+          this.error =
+            "ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.";
+        } else {
+          this.error = `ERROR: Camera error (${error.name})`;
+        }
+      }
+    },
+    onDecode(decodedString) {
+      this.decodedString = decodedString;
+      this.$router.push({
+        path: `/${decodedString}`,
+      });
+    },
+  },
+};
+</script>
diff --git a/src/store/index.js b/src/store/index.js
index 8e4c16ad0..779d8edbc 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -57,7 +57,8 @@ export default createStore({
         ],
         processId: null,
         searchContractId: null,
-        irsState: false
+        irsState: false,
+        qrError: ""
     },
     getters: {
         getClientId(state) {
@@ -78,6 +79,9 @@ export default createStore({
         getIrsState(state) {
             return state.irsState;
         },
+        getQrError(state) {
+            return state.qrError;
+        },
     },
     mutations: {
         setEmail(state, newEmail) {
@@ -112,6 +116,9 @@ export default createStore({
         },
         setProcessId(state, processId) {
             state.processId = processId;
+        },
+        setQrError(state, qrError) {
+            state.qrError = qrError;
         }
     },
     actions: {},
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index 3f204082a..8013ded59 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -20,7 +20,6 @@
   SPDX-License-Identifier: Apache-2.0
 -->
 
-
 <template>
   <div class="home-page-container">
     <div class="left-container" :class="{ hidden: isHidden }">
@@ -45,26 +44,17 @@
         <div class="logotype-container">
           <img :src="LogotypeDPP" alt="DPP logo" />
         </div>
-
-        <v-icon
-          @click="showWelcome"
-          size="large"
-          :class="{ hidden: !isHidden }"
-          class="arrow-icon"
-          icon="mdi-arrow-right"
-        ></v-icon>
-
         <v-container class="search-page">
-          <div v-if="error" class="qr-container">
+          <div v-if="qrError" class="qr-container">
             <div class="text-container">
               <p class="text">Your camera is off.</p>
               <p class="text">Turn it on or type the ID.</p>
-              <p class="error">{{ error }}</p>
+              <p class="error">{{ qrError }}</p>
             </div>
             <SearchInput class="search-input" />
           </div>
           <v-row data-cy="qr-container">
-            <div v-if="!error">
+            <div v-if="!qrError">
               <v-col class="qr-container" cols="12" v-if="QRtoggle">
                 <div class="stream-container">
                   <v-icon
@@ -75,12 +65,7 @@
                     md
                     icon="mdi-close-thick"
                   ></v-icon>
-                  <qrcode-stream
-                    :torch="torch"
-                    class="qrcode-stream"
-                    @init="onInit"
-                    @decode="onDecode"
-                  ></qrcode-stream>
+                  <QrcodeStream v-if="QRtoggle" :key="reloadReader" />
                 </div>
               </v-col>
               <v-col cols="12" v-else class="qr-container">
@@ -107,15 +92,13 @@
   </div>
 </template>
 
-
-
 <script>
-import { QrcodeStream } from "vue3-qrcode-reader";
-import CatenaLogo from "../media/logo.png";
-import QRFrame from "../media/qrFrame.svg";
+import QrcodeStream from "../components/general/QrcodeStrem.vue";
 import BatteryScanning from "../media/battery-img.jpeg";
 import LogotypeDPP from "../media/logotypeDPP.svg";
 import SearchInput from "../components/general/SearchInput.vue";
+import { mapState } from "vuex";
+import store from "@/store/index";
 
 export default {
   name: "QRScannerView",
@@ -127,70 +110,49 @@ export default {
     return {
       isHidden: false,
       QRtoggle: false,
-      error: "",
-      decodedString: "",
+      reloadReader: 0,
     };
   },
+  computed: {
+    ...mapState(["qrError"]),
+  },
   setup() {
     SearchInput;
     return {
       BatteryScanning,
       LogotypeDPP,
-      CatenaLogo,
-      QRFrame,
     };
   },
+  created() {
+    this.checkCameraPermission();
+  },
   methods: {
+    async checkCameraPermission() {
+      try {
+        const permissionStatus = await navigator.permissions.query({
+          name: "camera",
+        });
+        permissionStatus.onchange = () => {
+          this.reloadReader += 1;
+          store.commit("setQrError", "");
+        };
+      } catch (error) {
+        console.error("Error checking camera permission:", error);
+      }
+    },
     hideWelcome() {
       this.isHidden = true;
       this.QRtoggle = true;
     },
-    showWelcome() {
-      this.isHidden = false;
-      this.QRtoggle = false;
-    },
     closeQRScanner() {
       this.QRtoggle = false;
     },
-    openQRScanner() {
-      this.QRtoggle = true;
-    },
-    async onInit(promise) {
-      try {
-        await promise;
-      } catch (error) {
-        if (error.name === "NotAllowedError") {
-          this.error = "ERROR: you need to grant camera access permission";
-        } else if (error.name === "NotFoundError") {
-          this.error = "ERROR: no camera on this device";
-        } else if (error.name === "NotSupportedError") {
-          this.error = "ERROR: secure context required (HTTPS, localhost)";
-        } else if (error.name === "NotReadableError") {
-          this.error = "ERROR: is the camera already in use?";
-        } else if (error.name === "OverconstrainedError") {
-          this.error = "ERROR: installed cameras are not suitable";
-        } else if (error.name === "StreamApiNotSupportedError") {
-          this.error = "ERROR: Stream API is not supported in this browser";
-        } else if (error.name === "InsecureContextError") {
-          this.error =
-            "ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.";
-        } else {
-          this.error = `ERROR: Camera error (${error.name})`;
-        }
-      }
-    },
     openExternalLink() {
       window.open(
         "https://portal.int.demo.catena-x.net/documentation/?path=docs",
         "_blank"
       );
     },
-    onDecode(decodedString) {
-      this.decodedString = decodedString;
-      this.$router.push({
-        path: `/${decodedString}`,
-      });
-    },
   },
 };
 </script>

From ffcc6b75af0e512e667bc7faa6b8859607fbb40d Mon Sep 17 00:00:00 2001
From: david zynda <david.zynda@partners.basf.com>
Date: Mon, 20 Nov 2023 13:11:56 +0100
Subject: [PATCH 2/5] Regex safety for unstandardized qr codes

---
 src/components/general/QrcodeStrem.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/general/QrcodeStrem.vue b/src/components/general/QrcodeStrem.vue
index f37995dfc..271eb0dfe 100644
--- a/src/components/general/QrcodeStrem.vue
+++ b/src/components/general/QrcodeStrem.vue
@@ -50,9 +50,14 @@ export default {
     onDecode(decodedString) {
       this.decodedString = decodedString;
       this.$router.push({
-        path: `/${decodedString}`,
+        path: `/${this.processDecodedString(decodedString)}`,
       });
     },
+    processDecodedString(decodedString) {
+      const match = /CX:.*$/.exec(decodedString);
+      // This regex looks for a match "CX:" and returns it + everything to the right
+      return match ? match[0] : decodedString;
+    },
   },
 };
 </script>

From aa5018610a6e9e10da54372acb5409c8712183e8 Mon Sep 17 00:00:00 2001
From: david zynda <david.zynda@partners.basf.com>
Date: Mon, 20 Nov 2023 14:51:27 +0100
Subject: [PATCH 3/5] responsiveness + prefix for QrcodeStream comp

---
 .../styles/components/general/footer.scss     | 17 ++++++-------
 .../styles/components/landing/searchView.scss | 24 ++++++++++++++++---
 src/components/general/QrcodeStrem.vue        | 22 +++++++++++++++++
 src/views/SearchView.vue                      |  4 ++--
 4 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/src/assets/styles/components/general/footer.scss b/src/assets/styles/components/general/footer.scss
index 36118eed5..c833ca7a6 100644
--- a/src/assets/styles/components/general/footer.scss
+++ b/src/assets/styles/components/general/footer.scss
@@ -20,7 +20,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
 .footer-content {
   position: absolute;
   bottom: 0;
@@ -80,8 +79,10 @@
   }
 }
 
-@media (max-width: 893px) {
+@media (max-width: 1020px) {
   .footer-content {
+    position: relative;
+    margin: 0;
     flex-direction: column;
     align-items: center;
 
@@ -91,12 +92,12 @@
     }
   }
 }
-@media (max-width: 900px) {
-  .footer-content {
-    position: relative;
-    margin:0;
-  }
-}
+// @media (max-width: 900px) {
+//   .footer-content {
+//     position: relative;
+//     margin: 0;
+//   }
+// }
 @media (max-width: 585px) {
   .footer-content {
     flex-direction: column;
diff --git a/src/assets/styles/components/landing/searchView.scss b/src/assets/styles/components/landing/searchView.scss
index 771f3bb55..848aa4d25 100644
--- a/src/assets/styles/components/landing/searchView.scss
+++ b/src/assets/styles/components/landing/searchView.scss
@@ -441,6 +441,26 @@
     .stream-container {
       margin-top: 15px;
       margin-bottom: 30px;
+      width: 300px;
+      height: 300px;
+    }
+  }
+}
+
+@media (max-height: 650px) {
+  .home-page-container {
+    .stream-container {
+      width: 250px;
+      height: 250px;
+    }
+  }
+}
+
+@media (max-height: 590px) {
+  .home-page-container {
+    .stream-container {
+      width: 200px;
+      height: 200px;
     }
   }
 }
@@ -455,10 +475,8 @@
     }
 
     .stream-container {
-      margin-top: 15px;
+      margin-top: 5px;
       margin-bottom: 30px;
-      width: 200px;
-      height: 200px;
     }
     .logotype-container {
       img {
diff --git a/src/components/general/QrcodeStrem.vue b/src/components/general/QrcodeStrem.vue
index 271eb0dfe..d5c835418 100644
--- a/src/components/general/QrcodeStrem.vue
+++ b/src/components/general/QrcodeStrem.vue
@@ -1,3 +1,25 @@
+<!--
+  Catena-X - Product Passport Consumer Frontend
+ 
+  Copyright (c) 2022, 2023 BASF SE, BMW AG, Henkel AG & Co. KGaA
+ 
+  See the NOTICE file(s) distributed with this work for additional
+  information regarding copyright ownership.
+ 
+  This program and the accompanying materials are made available under the
+  terms of the Apache License, Version 2.0 which is available at
+  https://www.apache.org/licenses/LICENSE-2.0.
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  either express or implied. See the
+  License for the specific language govern in permissions and limitations
+  under the License.
+ 
+  SPDX-License-Identifier: Apache-2.0
+-->
+
 <template>
   <qrcode-stream
     class="qrcode-stream"
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index 8013ded59..a81044214 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -83,9 +83,9 @@
         </v-container>
       </div>
       <div class="guide">
-        📖 Want to find out more? Read our Get
+        📖 Want to find out more? Read our
         <a class="advanced-search-link" @click="openExternalLink"
-          >Started Guide</a
+          >Get Started Guide</a
         >
       </div>
     </div>

From 646df83e4820c2071db232ff1e964aefa3ae7b84 Mon Sep 17 00:00:00 2001
From: david zynda <david.zynda@partners.basf.com>
Date: Wed, 22 Nov 2023 16:40:45 +0100
Subject: [PATCH 4/5] front camera toggle

---
 .../styles/components/landing/searchView.scss |  2 +-
 src/components/general/QrcodeStrem.vue        | 11 +++++-
 src/views/SearchView.vue                      | 36 +++++++++++++++++--
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/components/landing/searchView.scss b/src/assets/styles/components/landing/searchView.scss
index 848aa4d25..76c52d4ed 100644
--- a/src/assets/styles/components/landing/searchView.scss
+++ b/src/assets/styles/components/landing/searchView.scss
@@ -167,7 +167,7 @@
     .error {
       font-weight: bold;
       text-align: center;
-      padding: 0 0 70px 0;
+      padding: 0 0 18px 0;
     }
 
     .qr-container {
diff --git a/src/components/general/QrcodeStrem.vue b/src/components/general/QrcodeStrem.vue
index d5c835418..5572b9603 100644
--- a/src/components/general/QrcodeStrem.vue
+++ b/src/components/general/QrcodeStrem.vue
@@ -25,7 +25,10 @@
     class="qrcode-stream"
     @init="onInit"
     @decode="onDecode"
-  ></qrcode-stream>
+    :camera="facingMode"
+  >
+    <div>{{ facingMode }}</div>
+  </qrcode-stream>
 </template>
 
 <script>
@@ -43,6 +46,12 @@ export default {
       decodedString: "",
     };
   },
+  props: {
+    facingMode: {
+      type: String,
+      default: "front",
+    },
+  },
   methods: {
     async onInit(promise) {
       try {
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index a81044214..54fc1d034 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -56,6 +56,13 @@
           <v-row data-cy="qr-container">
             <div v-if="!qrError">
               <v-col class="qr-container" cols="12" v-if="QRtoggle">
+                <v-btn rounded v-if="multipleCameras">
+                  <v-icon
+                    icon="mdi-camera-flip-outline"
+                    @click="toggleCamera"
+                    style="color: #0f71cb"
+                  ></v-icon>
+                </v-btn>
                 <div class="stream-container">
                   <v-icon
                     size="x-large"
@@ -65,7 +72,11 @@
                     md
                     icon="mdi-close-thick"
                   ></v-icon>
-                  <QrcodeStream v-if="QRtoggle" :key="reloadReader" />
+                  <QrcodeStream
+                    :facingMode="facingMode"
+                    v-if="QRtoggle"
+                    :key="reloadReader"
+                  />
                 </div>
               </v-col>
               <v-col cols="12" v-else class="qr-container">
@@ -111,6 +122,9 @@ export default {
       isHidden: false,
       QRtoggle: false,
       reloadReader: 0,
+      facingMode: "front",
+
+      multipleCameras: true,
     };
   },
   computed: {
@@ -123,10 +137,28 @@ export default {
       LogotypeDPP,
     };
   },
-  created() {
+  mounted() {
     this.checkCameraPermission();
+    this.toggleCamera();
   },
   methods: {
+    async toggleCamera() {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoDevices = devices.filter(
+          (device) => device.kind === "videoinput"
+        );
+
+        if (videoDevices.length > 1) {
+          this.facingMode = this.facingMode === "front" ? "rear" : "front";
+        } else {
+          this.multipleCameras = false;
+          this.facingMode = "auto";
+        }
+      } catch (error) {
+        console.error("Error toggling camera:", error);
+      }
+    },
     async checkCameraPermission() {
       try {
         const permissionStatus = await navigator.permissions.query({

From 3b1d29c55c8c6db6b1c70ef69de8d61be9b3895d Mon Sep 17 00:00:00 2001
From: david zynda <david.zynda@partners.basf.com>
Date: Thu, 23 Nov 2023 09:52:15 +0100
Subject: [PATCH 5/5] remove the camera label

---
 src/components/general/QrcodeStrem.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/general/QrcodeStrem.vue b/src/components/general/QrcodeStrem.vue
index 5572b9603..2fab7fec0 100644
--- a/src/components/general/QrcodeStrem.vue
+++ b/src/components/general/QrcodeStrem.vue
@@ -27,7 +27,6 @@
     @decode="onDecode"
     :camera="facingMode"
   >
-    <div>{{ facingMode }}</div>
   </qrcode-stream>
 </template>