Skip to content

Commit ee61c85

Browse files
committed
Fix for QRCode
1 parent bd53cf0 commit ee61c85

3 files changed

Lines changed: 84 additions & 21 deletions

File tree

app/static/js/wallet/rp-scanner.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,4 +71,62 @@ function stopQrScanner() {
7171
if (qrAnimationId) { cancelAnimationFrame(qrAnimationId); qrAnimationId = null; }
7272
if (qrStream) { qrStream.getTracks().forEach(track => track.stop()); qrStream = null; }
7373
console.log("Scanner QR interrotto.");
74+
}
75+
76+
function handleQrFileUpload(event) {
77+
const file = event.target.files[0];
78+
if (!file) return;
79+
80+
const textArea = document.getElementById("extra-info");
81+
const confirmBtn = document.getElementById("confirmLoginRP");
82+
83+
// Crea un lettore di file per trasformare l'immagine in URL Base64
84+
const reader = new FileReader();
85+
reader.onload = function(e) {
86+
const img = new Image();
87+
img.onload = function() {
88+
// Crea un canvas virtuale (in memoria) per estrarre i pixel dell'immagine
89+
const virtualCanvas = document.createElement("canvas");
90+
const ctx = virtualCanvas.getContext("2d");
91+
92+
virtualCanvas.width = img.width;
93+
virtualCanvas.height = img.height;
94+
95+
// Disegna l'immagine caricata sul canvas virtuale
96+
ctx.drawImage(img, 0, 0, img.width, img.height);
97+
98+
// Estrae i dati dei pixel
99+
const imageData = ctx.getImageData(0, 0, img.width, img.height);
100+
101+
// Tenta la decodifica con jsQR
102+
const code = jsQR(imageData.data, imageData.width, imageData.height, {
103+
inversionAttempts: "dontInvert",
104+
});
105+
106+
if (code) {
107+
console.log("QR Code rilevato da file:", code.data);
108+
109+
// Inserisce il valore nella textarea
110+
if (textArea) textArea.value = code.data;
111+
112+
// Attiva il pulsante di conferma
113+
if (confirmBtn) confirmBtn.disabled = false;
114+
115+
// Chiude la modale
116+
const qrModalElement = document.getElementById('qr-scanner-modal');
117+
const qrModal = bootstrap.Modal.getInstance(qrModalElement);
118+
if (qrModal) qrModal.hide();
119+
120+
// Spegne lo scanner se la fotocamera era attiva
121+
stopQrScanner();
122+
} else {
123+
alert("Impossibile trovare un QR Code valido in questa immagine. Riprova con un'immagine più nitida.");
124+
}
125+
126+
// Reset dell'input file per permettere di ricaricare lo stesso file in caso di errore
127+
event.target.value = "";
128+
};
129+
img.src = e.target.result;
130+
};
131+
reader.readAsDataURL(file);
74132
}
Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
1-
<div class="modal fade" tabindex="-1" role="dialog" id="qr-scanner-modal" aria-labelledby="qr-modal-title">
2-
<div class="modal-dialog modal-dialog-centered" role="document">
3-
<div class="modal-content shadow-lg">
4-
<div class="modal-header">
5-
<h5 class="modal-title h4 text-primary" id="qr-modal-title">Scansiona QR Code</h5>
6-
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi modale" onclick="stopQrScanner()">
7-
<svg class="icon icon-danger"><use href="/static/svg/sprites.svg#it-close"></use></svg>
8-
</button>
9-
</div>
10-
<div class="modal-body text-center">
11-
<p class="mb-3">Inquadra il QR Code generato dal Relying Party.</p>
1+
<div class="modal fade" id="qr-scanner-modal" tabindex="-1" role="dialog" aria-labelledby="qrModalTitle" aria-hidden="true">
2+
<div class="modal-dialog modal-dialog-centered" role="document">
3+
<div class="modal-content">
4+
<div class="modal-header">
5+
<h5 class="modal-title" id="qrModalTitle">Inquadra o Carica QR Code</h5>
6+
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Chiudi" onclick="stopQrScanner()"></button>
7+
</div>
8+
<div class="modal-body text-center">
9+
<video id="qr-video" style="display: none;"></video>
10+
<canvas id="qr-canvas" style="width: 100%; max-width: 400px; height: auto; border: 2px solid #0066cc; border-radius: 4px;"></canvas>
1211

13-
<video id="qr-video" autoplay playsinline style="display:none;"></video>
12+
<p class="mt-3 text-muted">Inquadra il QR Code oppure:</p>
1413

15-
<div class="position-relative d-inline-block w-100" style="max-width: 350px;">
16-
<canvas id="qr-canvas" class="rounded w-100" style="border: 3px solid #0066cc; background-color: #000;"></canvas>
17-
</div>
18-
</div>
19-
<div class="modal-footer">
20-
<button class="btn btn-outline-secondary btn-sm" type="button" data-bs-dismiss="modal" onclick="stopQrScanner()">Annulla</button>
14+
<div class="mb-2">
15+
<input type="file" id="qr-file-input" accept="image/*" style="display: none;" onchange="handleQrFileUpload(event)" />
16+
<button type="button" class="btn btn-outline-primary btn-sm" onclick="document.getElementById('qr-file-input').click()">
17+
<svg class="icon icon-sm" aria-hidden="true"><use href="/static/svg/sprites.svg#it-upload"></use></svg>
18+
Carica un'immagine QR
19+
</button>
2120
</div>
2221
</div>
22+
<div class="modal-footer">
23+
<button class="btn btn-secondary btn-sm" type="button" data-bs-dismiss="modal" onclick="stopQrScanner()">Annulla</button>
24+
</div>
2325
</div>
26+
</div>
2427
</div>

app/templates/wallet_home.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,6 @@
2323
<div class="icon-bar">
2424
<img src="{{ url_for('static', filename='images/memory.svg') }}" alt="Memoria" class="memory-icon" {% if not session.get('pin_authenticated') %}style="display:none;"{% endif %}/>
2525
<img src="{{ url_for('static', filename='images/trash-delete-icon.svg') }}" alt="Cestino" class="trash-icon" {% if not wallet_initialized %}style="display:none;"{% endif %}/>
26-
<!-- Popup per importazione QR -->
27-
<img src="/static/images/qr-code-icon.svg" alt="Importa QR" id="qr-icon" onclick="apriQrPopup()" />
28-
<!-- fine Popup per importazione QR -->
2926
</div>
3027
<header>
3128
<div class="it-header-center-wrapper">
@@ -51,6 +48,11 @@
5148
</div>
5249
</a>
5350
</div>
51+
<div class="">
52+
<!-- Popup per importazione QR -->
53+
<img src="/static/images/qr-code-icon.svg" alt="Importa QR" id="qr-icon" onclick="apriQrPopup()" />
54+
<!-- fine Popup per importazione QR -->
55+
</div>
5456
</div>
5557
</div>
5658
</div>

0 commit comments

Comments
 (0)