From 55ab32c8cd621c9681ec4c878869fc1e2d1f9a02 Mon Sep 17 00:00:00 2001
From: "enrique.andujar" <enrique.andujar@estudiantat.upc.edu>
Date: Wed, 22 Apr 2026 18:37:16 +0200
Subject: [PATCH 1/2] switched library

---
 hardware/templates/hardware_admin.html        |  3 +-
 .../include/hardware_user_email.html          | 45 +++++--------------
 2 files changed, 13 insertions(+), 35 deletions(-)

diff --git a/hardware/templates/hardware_admin.html b/hardware/templates/hardware_admin.html
index 4ec49897b..dc7066910 100644
--- a/hardware/templates/hardware_admin.html
+++ b/hardware/templates/hardware_admin.html
@@ -4,8 +4,7 @@
     <link rel="stylesheet" href="{% static 'css/hw.css' %}">
     <script > window.CSRF_TOKEN = "{{ csrf_token }}"</script>
     <script src="{% static 'lib/typeahead.jquery.min.js' %}"></script>
-    <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
-    <script type="text/javascript" src="{% static 'js/scanner_old.js' %}"></script>
+    {% include 'include/import_qr_scanner.html' %}
     <script type="text/javascript" src="{% static 'js/hw.js' %}"></script>
     <script type="text/javascript" src="{% static 'js/hw_admin.js' %}"></script>
 
diff --git a/hardware/templates/include/hardware_user_email.html b/hardware/templates/include/hardware_user_email.html
index 6d0716411..6664a6ea8 100644
--- a/hardware/templates/include/hardware_user_email.html
+++ b/hardware/templates/include/hardware_user_email.html
@@ -3,48 +3,27 @@
 <div class='hw-centered' id="form-container-id">
     <label>Hacker:</label>
     <input id="qr-result" class="typeahead" style="color: #0f0f0f" name="email" type="text"/><i id='{{ id }}-qr' class='fa-solid fa-qrcode fa-2x qr-btn'></i>
-	  <div id="popup-scan" style="display: none;">
-      <label class="control-label" for="qr-camara-select" > Select Camera</label>
-      <select id="qr-camara-select" class="form-control">
-        <option value="null">---</option>
-      </select>
-      <video id="qr-video" style="margin-top: 10px; border-radius: 5px"></video>
-      <button id="qr-close-button" class="btn btn-block btn-info">Close</button>
-    </div>
+    <video id="qr-video" style="margin-top: 10px; border-radius: 5px; display: none; width: 100%"></video>
 
-    <script>
+    <script nonce="{{ request.csp_nonce }}">
       document.addEventListener("DOMContentLoaded", ()=>{
-            if (!document.getElementById('qr-result')) return
-            function stop() {
-              $('#popup-scan').hide();
-              $('#veil').hide();
-              scanner.stop()
-            }
-            $(document).on('keyup', function(e) {
-              if (e.key === "Escape") stop()
-            });
-            const div = document.createElement('div')
-            div.style = 'display: none;'
-            div.className = 'veil'
-            div.id = 'veil'
-            div.onclick = stop
-
-            document.body.appendChild(div)
+            if (!document.getElementById('qr-result')) return;
 
-            let scanner = new Scanner('qr-video', 'qr-camara-select', (content) => {
+            let scanner = new Scanner('qr-video', (content) => {
+              const qrContent = content?.data ?? content?.toString?.() ?? content;
               let input = $('#qr-result')
-              stop()
+              scanner.hide()
               input.val('')
-              input.focus().typeahead('val',content.toString()).focus();
+              input.focus().typeahead('val', qrContent).focus();
+            }, {
+              popup: true,
+              popup_title: 'QR scanner',
             })
+
             let qrButton = document.getElementById("{{ id }}-qr");
             qrButton.onclick = function () {
-              $('#popup-scan').show();
-              $('#veil').show();
-              scanner.start()
+              scanner.show()
             }
-            let closeButton = document.getElementById("qr-close-button");
-            closeButton.onclick = stop
         })
     </script>
 {#	<script type="module">#}

From 7f7b311441c428c6b620266d880016c1b7ae7ca3 Mon Sep 17 00:00:00 2001
From: "enrique.andujar" <enrique.andujar@estudiantat.upc.edu>
Date: Wed, 22 Apr 2026 19:20:19 +0200
Subject: [PATCH 2/2] moved QR init outside

---
 hardware/static/js/hw_admin.js                | 54 ++++++++++++++++--
 .../include/hardware_user_email.html          | 56 -------------------
 2 files changed, 48 insertions(+), 62 deletions(-)

diff --git a/hardware/static/js/hw_admin.js b/hardware/static/js/hw_admin.js
index e79da81d8..2f21626db 100644
--- a/hardware/static/js/hw_admin.js
+++ b/hardware/static/js/hw_admin.js
@@ -6,9 +6,10 @@ let hw_admin = ((hw)=>{
     }
     let obj = {}
     let cams = []
+    obj.qrScanner = null
 
     obj.initTypeaheads = ()=>{
-        if($("#qr-result"))
+        if($("#qr-result").length)
             $("#qr-result").typeahead({
                 hint:true,
                 highlight:true,
@@ -33,6 +34,49 @@ let hw_admin = ((hw)=>{
                 }
             });
     }
+
+    obj.destroyQrScanner = ()=>{
+        if (obj.qrScanner) {
+            try {
+                obj.qrScanner.hide()
+            } catch (e) {
+                try {
+                    obj.qrScanner.stop()
+                } catch (err) {
+                    console.warn(err)
+                }
+            }
+            obj.qrScanner = null
+        }
+        $('#veil').remove()
+    }
+
+    obj.initQrScanner = ()=>{
+        let inputElem = document.getElementById('qr-result')
+        let videoElem = document.getElementById('qr-video')
+        let qrButton = document.querySelector('.qr-btn')
+
+        if (!inputElem || !videoElem || !qrButton) return
+        if (inputElem.dataset.qrScannerInitialized === 'true') return
+
+        inputElem.dataset.qrScannerInitialized = 'true'
+        obj.destroyQrScanner()
+
+        obj.qrScanner = new Scanner('qr-video', (content) => {
+            let qrContent = content && content.data ? content.data : content.toString()
+            let input = $('#qr-result')
+            obj.qrScanner.hide()
+            input.val('')
+            input.focus().typeahead('val', qrContent).focus()
+        }, {
+            popup: true,
+            popup_title: 'QR scanner',
+        })
+
+        qrButton.onclick = function () {
+            obj.qrScanner.show()
+        }
+    }
     //-Updates the content
     //-Shows a toast if there's a message
     obj.processResponse = (data)=>{
@@ -42,16 +86,13 @@ let hw_admin = ((hw)=>{
         }
 
         if(data.content){
+            obj.destroyQrScanner()
             $('#hw-container').fadeTo(200, 0, ()=>{
                 $('#hw-container').html(data.content)
                 obj.initListeners()
                 obj.initTypeaheads()
+                obj.initQrScanner()
                 $('#hw-container').fadeTo(200, 1)
-
-                window.document.dispatchEvent(new Event("DOMContentLoaded", {
-                  bubbles: true,
-                  cancelable: true
-                }));
             })
         }
     }
@@ -124,4 +165,5 @@ let hw_admin = ((hw)=>{
 document.addEventListener("DOMContentLoaded", ()=>{
     hw_admin.initListeners()
     hw_admin.initTypeaheads()
+    hw_admin.initQrScanner()
 })
diff --git a/hardware/templates/include/hardware_user_email.html b/hardware/templates/include/hardware_user_email.html
index 6664a6ea8..14fd82010 100644
--- a/hardware/templates/include/hardware_user_email.html
+++ b/hardware/templates/include/hardware_user_email.html
@@ -4,62 +4,6 @@
     <label>Hacker:</label>
     <input id="qr-result" class="typeahead" style="color: #0f0f0f" name="email" type="text"/><i id='{{ id }}-qr' class='fa-solid fa-qrcode fa-2x qr-btn'></i>
     <video id="qr-video" style="margin-top: 10px; border-radius: 5px; display: none; width: 100%"></video>
-
-    <script nonce="{{ request.csp_nonce }}">
-      document.addEventListener("DOMContentLoaded", ()=>{
-            if (!document.getElementById('qr-result')) return;
-
-            let scanner = new Scanner('qr-video', (content) => {
-              const qrContent = content?.data ?? content?.toString?.() ?? content;
-              let input = $('#qr-result')
-              scanner.hide()
-              input.val('')
-              input.focus().typeahead('val', qrContent).focus();
-            }, {
-              popup: true,
-              popup_title: 'QR scanner',
-            })
-
-            let qrButton = document.getElementById("{{ id }}-qr");
-            qrButton.onclick = function () {
-              scanner.show()
-            }
-        })
-    </script>
-{#	<script type="module">#}
-{#        import QrScanner from '/static/lib/qr-scanner.min.js';#}
-{#        QrScanner.WORKER_PATH = '/static/lib/qr-scanner-worker.min.js';#}
-{#        // Video stream#}
-{#        const video = document.getElementById('qr-video');#}
-{#        // Result elements and set function#}
-{#        const camQrResult = document.getElementById('qr-result');#}
-{#        function setResult(result) {#}
-{#            camQrResult.focus();#}
-{#            camQrResult.value = result;#}
-{#            hideQR();#}
-{#            $(".typeahead").typeahead('val', '')#}
-{#            $(".typeahead").focus().typeahead('val',result.toString()).focus();#}
-{#        }#}
-{#        // Scan#}
-{#        const scanner = new QrScanner(video, result => setResult(result));#}
-{#        $("#{{ id }}-qr").click(function () {#}
-{#            let veil = document.createElement("div");#}
-{#            document.body.appendChild(veil);#}
-{#            veil.classList.add('veil');#}
-{#            veil.id = 'veil';#}
-{#            $("#popup-scan").show();#}
-{#            document.getElementById("veil").addEventListener("click", function(){#}
-{#                hideQR();#}
-{#            });#}
-{#          scanner.start();#}
-{#        });#}
-{#        function hideQR() {#}
-{#            $("#popup-scan").hide();#}
-{#            var el = document.getElementById("veil");#}
-{#            el.parentNode.removeChild(el);#}
-{#            scanner.stop();#}
-{#        }#}
-{#    </script>#}
     <div class='hw-centered'>
     {% if item_id %}
     	<button id="hw-user-send-noreq" data-item-id="{{item_id}}" class="btn btn-success">Send</button>