Fix redirect URL in process_login.php, update login form submission handling, and enhance QR scanner UI

js/script.js

@@ -45,7 +45,7 @@ document.getElementById('loginForm').addEventListener('submit', function (e) {
 
     if (username === 'admin' && password === 'password') {
         alert('Succesvol ingelogd!');
-        window.location.href = '../qr/qr.html';
+        window.location.href = './qr/qr.html';
     } else {
         alert('Ongeldige inloggegevens.');
     }

php/process_login.php

@@ -35,7 +35,7 @@ try {
         // Start session and store user ID
         session_start();
         $_SESSION['user_id'] = $user_id;
-        header("Location: ../qr/qr.html"); // Redirect to the QR scanner page
+        header("Location: "); // Redirect to the QR scanner page
         exit();
     } else {
         // Redirect back to login page with an error message

qr/qrCodeScanner.js

@@ -1,56 +1,42 @@
-const video = document.createElement("video");
-const canvasElement = document.getElementById("qr-canvas");
-const canvas = canvasElement.getContext("2d");
+const btnScanQR = document.getElementById('btn-scan-qr');
+const qrCanvas = document.getElementById('qr-canvas');
+const qrResult = document.getElementById('qr-result');
+const outputData = document.getElementById('outputData');
 
-const qrResult = document.getElementById("qr-result");
-const outputData = document.getElementById("outputData");
-const btnScanQR = document.getElementById("btn-scan-qr");
+btnScanQR.addEventListener('click', () => {
+    qrCanvas.hidden = false;
+    qrResult.hidden = true;
 
-let scanning = false;
+    const context = qrCanvas.getContext('2d');
+    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
+        .then((stream) => {
+            const video = document.createElement('video');
+            video.srcObject = stream;
+            video.setAttribute('playsinline', true); // Required to work on iOS
+            video.play();
 
-qrcode.callback = res => {
-  if (res) {
-    outputData.innerText = res;
-    scanning = false;
+            const scan = () => {
+                if (video.readyState === video.HAVE_ENOUGH_DATA) {
+                    qrCanvas.height = video.videoHeight;
+                    qrCanvas.width = video.videoWidth;
+                    context.drawImage(video, 0, 0, qrCanvas.width, qrCanvas.height);
 
-    video.srcObject.getTracks().forEach(track => {
-      track.stop();
-    });
-
-    qrResult.hidden = false;
-    canvasElement.hidden = true;
-    btnScanQR.hidden = false;
-  }
-};
-
-btnScanQR.onclick = () => {
-  navigator.mediaDevices
-    .getUserMedia({ video: { facingMode: "environment" } })
-    .then(function(stream) {
-      scanning = true;
-      qrResult.hidden = true;
-      btnScanQR.hidden = true;
-      canvasElement.hidden = false;
-      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
-      video.srcObject = stream;
-      video.play();
-      tick();
-      scan();
-    });
-};
-
-function tick() {
-  canvasElement.height = video.videoHeight;
-  canvasElement.width = video.videoWidth;
-  canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
-
-  scanning && requestAnimationFrame(tick);
-}
-
-function scan() {
-  try {
-    qrcode.decode();
-  } catch (e) {
-    setTimeout(scan, 300);
-  }
-}
+                    try {
+                        const qrCodeData = qrcode.decode();
+                        outputData.innerText = qrCodeData;
+                        qrResult.hidden = false;
+                        qrCanvas.hidden = true;
+                        stream.getTracks().forEach(track => track.stop());
+                    } catch (e) {
+                        requestAnimationFrame(scan);
+                    }
+                } else {
+                    requestAnimationFrame(scan);
+                }
+            };
+            scan();
+        })
+        .catch((err) => {
+            console.error('Error accessing camera:', err);
+        });
+});

qr/styles.css

@@ -29,6 +29,10 @@ html {
   
   #btn-scan-qr {
     cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 75vh; /* Full viewport height for vertical centering */
   }
   
   #btn-scan-qr img {
@@ -36,6 +40,7 @@ html {
     padding: 15px;
     margin: 15px;
     background: white;
+    border-radius: 10px; /* Optional: Add rounded corners */
   }
   
   #qr-result {
@@ -45,4 +50,3 @@ html {
     max-width: 700px;
     background-color: white;
   }
-