fix: Add server-side QR code generation for mobile app linking

- Add /qr/<uuid> endpoint to generate QR code images server-side
- Replace client-side JavaScript QR generation with reliable server-side PNG generation
- Add qrcode and Pillow dependencies to requirements.txt
- Remove JavaScript QR code library dependency
- QR codes now display reliably in all browsers

The QR code authentication flow now works properly:
1. User clicks 'Link Mobile App' → Server generates UUID and QR code image
2. QR code displays immediately (no JavaScript dependency)
3. Mobile app scans QR code → Extracts URL with UUID
4. POST to /mobileapp?uuid={uuid} → Receives API token
5. Automatic authentication and app access

Fixes the issue where QR codes weren't displaying due to JavaScript library loading problems.

requirements.txt

@@ -10,3 +10,5 @@ PyMySQL>=1.0.0
 redis>=4.0.0
 websockets>=12.0.0
 cryptography>=42.0.0
+qrcode>=7.0.0
+Pillow>=9.0.0
\ No newline at end of file

templates/mobileapp_link.html

@@ -12,7 +12,9 @@
             </div>
 
             <div class="flex justify-center mb-6">
-                <div id="qrcode" class="border-2 border-gray-200 p-4 rounded-lg bg-white"></div>
+                <div class="border-2 border-gray-200 p-4 rounded-lg bg-white inline-block">
+                    <img src="{{ url_for('generate_qr_code', uuid=uuid) }}" alt="QR Code" class="rounded-lg shadow-sm" style="max-width: 256px; max-height: 256px;" />
+                </div>
             </div>
 
             <div class="text-center">
@@ -34,29 +36,4 @@
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const qrUrl = "{{ qr_url }}";
-
-    // Generate QR code
-    QRCode.toCanvas(document.getElementById('qrcode'), qrUrl, {
-        width: 256,
-        height: 256,
-        color: {
-            dark: '#000000',
-            light: '#FFFFFF'
-        }
-    }, function (error) {
-        if (error) console.error(error);
-        console.log('QR code generated successfully');
-    });
-
-    // Auto-refresh every 30 seconds to show remaining time
-    setInterval(function() {
-        // This could be enhanced to show countdown timer
-        console.log('QR code still active...');
-    }, 30000);
-});
-</script>
 {% endblock %}
\ No newline at end of file

vidai/web.py

@@ -1894,6 +1894,51 @@ def mobileapp_link():
                              uuid=link_uuid,
                              active_page='api_tokens')
 
+@app.route('/qr/<uuid>')
+def generate_qr_code(uuid):
+    """Generate and serve QR code image for mobile app linking."""
+    try:
+        import qrcode
+        from io import BytesIO
+
+        # Check if UUID exists and is valid
+        if not hasattr(app, 'mobile_uuids') or uuid not in app.mobile_uuids:
+            # Return a placeholder image or error
+            return "UUID not found", 404
+
+        # Generate QR code URL
+        host_url = request.host_url.rstrip('/')
+        qr_url = f'{host_url}/mobileapp?uuid={uuid}'
+
+        # Generate QR code
+        qr = qrcode.QRCode(
+            version=1,
+            error_correction=qrcode.constants.ERROR_CORRECT_L,
+            box_size=10,
+            border=4,
+        )
+        qr.add_data(qr_url)
+        qr.make(fit=True)
+
+        # Create image
+        img = qr.make_image(fill_color="black", back_color="white")
+
+        # Convert to bytes
+        img_buffer = BytesIO()
+        img.save(img_buffer, format='PNG')
+        img_buffer.seek(0)
+
+        # Return image
+        from flask import send_file
+        return send_file(img_buffer, mimetype='image/png')
+
+    except ImportError:
+        # qrcode library not available
+        return "QR code generation not available", 500
+    except Exception as e:
+        log_message(f"Error generating QR code: {e}")
+        return "Error generating QR code", 500
+