Replace CDN QR script with locally generated tunnel invoice QR codes

Author: blackcoffeexbt

nixos/admin-app/app.py

@@ -2,6 +2,7 @@
 """LNbitsBox Admin Dashboard — system monitoring and service management"""
 
 import json
+import io
 import os
 import shlex
 import sys
@@ -1453,6 +1454,33 @@ def api_tunnel_stop():
         return jsonify({"status": "error", "message": str(e)}), 500
 
 
+@app.route("/box/api/qrcode", methods=["POST"])
+@login_required
+def api_qrcode():
+    payload = request.get_json(silent=True) or {}
+    text = str(payload.get("text", "")).strip()
+    if not text:
+        return _json_error("QR payload is required", 400)
+    if len(text) > 4096:
+        return _json_error("QR payload is too large", 400)
+
+    try:
+        import qrcode
+
+        qr = qrcode.QRCode(box_size=8, border=2)
+        qr.add_data(text)
+        qr.make(fit=True)
+        image = qr.make_image(fill_color="black", back_color="white")
+        image_bytes = io.BytesIO()
+        image.save(image_bytes, format="PNG")
+        image_bytes.seek(0)
+        response = send_file(image_bytes, mimetype="image/png")
+        response.headers["Cache-Control"] = "no-store"
+        return response
+    except Exception as e:
+        return _json_error(str(e), 500)
+
+
 # ── OTA Update Endpoints ─────────────────────────────────────────
 
 def get_current_version():

nixos/admin-app/static/js/dashboard-tunnel.js

@@ -252,19 +252,50 @@
         }
     };
 
+    D.renderTunnelInvoiceQr = async function (bolt11) {
+        const qrEl = D.el('tunnel-invoice-qr');
+        if (!qrEl) return;
+        qrEl.replaceChildren();
+        if (!bolt11) return;
+
+        try {
+            const resp = await fetch('/box/api/qrcode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ text: bolt11 }),
+            });
+            if (!resp.ok) {
+                throw new Error('QR render failed');
+            }
+            const blob = await resp.blob();
+            const imageUrl = URL.createObjectURL(blob);
+            const image = document.createElement('img');
+            image.src = imageUrl;
+            image.alt = 'Tunnel invoice QR code';
+            image.width = 220;
+            image.height = 220;
+            image.className = 'block';
+            image.addEventListener('load', function () {
+                URL.revokeObjectURL(imageUrl);
+            }, { once: true });
+            qrEl.appendChild(image);
+        } catch (error) {
+            const message = document.createElement('p');
+            message.className = 'text-red-400 font-mono text-xs text-center p-4';
+            message.textContent = 'Failed to render QR code.';
+            qrEl.appendChild(message);
+        }
+    };
+
     D.openTunnelInvoiceModal = function (bolt11) {
         const modal = D.el('tunnel-invoice-modal');
         const textarea = D.el('tunnel-invoice-text');
         const status = D.el('tunnel-invoice-status');
-        const qrEl = D.el('tunnel-invoice-qr');
-        if (!modal || !textarea || !status || !qrEl) return;
+        if (!modal || !textarea || !status) return;
         modal.classList.remove('hidden');
         textarea.value = bolt11 || '';
         status.textContent = 'Waiting for payment...';
-        qrEl.innerHTML = '';
-        if (bolt11 && typeof QRCode !== 'undefined') {
-            D.state.tunnelInvoiceQr = new QRCode(qrEl, { text: bolt11, width: 220, height: 220, correctLevel: QRCode.CorrectLevel.M });
-        }
+        D.renderTunnelInvoiceQr(bolt11);
     };
 
     D.closeTunnelInvoiceModal = function () {

nixos/admin-app/templates/dashboard.html

@@ -2,7 +2,6 @@
 
 {% block head %}
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
 {% endblock %}
 
 {% block content %}

nixos/admin-app/templates/overview.html

@@ -21,7 +21,6 @@
 {% endblock %}
 
 {% block page_scripts %}
-<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
 <script src="{{ url_for('static', filename='js/dashboard-core.js') }}"></script>
 <script id="initial-tunnel-status" type="application/json">{{ initial_tunnel_status|tojson }}</script>
 <script src="{{ url_for('static', filename='js/dashboard-services.js') }}"></script>

nixos/admin-app/templates/remote_access.html

@@ -12,7 +12,6 @@
 {% endblock %}
 
 {% block page_scripts %}
-<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
 <script src="{{ url_for('static', filename='js/dashboard-core.js') }}"></script>
 <script id="initial-tunnel-status" type="application/json">{{ initial_tunnel_status|tojson }}</script>
 <script src="{{ url_for('static', filename='js/dashboard-services.js') }}"></script>

nixos/admin-package.nix

@@ -5,7 +5,9 @@ let
     flask
     ps."flask-wtf"  # CSRF protection
     mnemonic
+    pillow
     psutil
+    qrcode
     requests
   ]);
 in