Add modal popup for mobile app linking in API tokens page with centered QR code

templates/api_tokens.html

@@ -41,7 +41,7 @@
             <div class="card-header">
                 <h3><i class="fas fa-key"></i> Your API Tokens</h3>
                 <div style="display: flex; gap: 1rem; margin-left: auto;">
-                    <a href="{{ url_for('mobileapp_link') }}" class="btn" style="background: #10b981;"><i class="fas fa-mobile-alt"></i> Link Mobile App</a>
+                    <button onclick="openMobileAppModal()" class="btn" style="background: #10b981;"><i class="fas fa-mobile-alt"></i> Link Mobile App</button>
                     <button onclick="openAddTokenModal()" class="btn"><i class="fas fa-plus"></i> Add Token</button>
                 </div>
             </div>
@@ -156,6 +156,35 @@
         </div>
     </div>
 
+    <!-- Mobile App Modal -->
+    <div id="mobileAppModal" class="modal">
+        <div class="modal-content" style="max-width: 600px;">
+            <div class="modal-header">
+                <h3><i class="fas fa-mobile-alt"></i> Link Mobile App</h3>
+                <span class="close" onclick="closeMobileAppModal()">&times;</span>
+            </div>
+            <div class="modal-body">
+                <div class="text-center mb-6">
+                    <p class="text-gray-600">Scan the QR code below with your VidAI mobile app to link it to your account.</p>
+                </div>
+                <div class="flex justify-center mb-6" id="qrContainer">
+                    <!-- QR code will be loaded here -->
+                </div>
+                <div class="text-center">
+                    <p class="text-sm text-gray-500 mb-4">
+                        This link will expire in 5 minutes for security reasons.
+                    </p>
+                    <div class="bg-gray-50 p-4 rounded-lg" id="manualUrl">
+                        <!-- Manual URL will be loaded here -->
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button onclick="closeMobileAppModal()" class="btn" style="background: #6b7280;">Close</button>
+            </div>
+        </div>
+    </div>
+
     <script>
         function copyToken() {
             const tokenText = document.getElementById('tokenText');
@@ -198,6 +227,32 @@
             window.location.href = '/api_tokens'; // Redirect to avoid POST resubmission
         }
 
+        function openMobileAppModal() {
+            const modal = document.getElementById('mobileAppModal');
+            modal.style.display = 'block';
+            // Fetch QR data
+            fetch('/api/mobileapp_qr')
+                .then(response => response.json())
+                .then(data => {
+                    const qrContainer = document.getElementById('qrContainer');
+                    qrContainer.innerHTML = `<div class="border-2 border-gray-200 p-4 rounded-lg bg-white inline-block">
+                        <img src="/qr/${data.uuid}" alt="QR Code" class="rounded-lg shadow-sm" style="max-width: 256px; max-height: 256px;" />
+                    </div>`;
+                    const manualUrl = document.getElementById('manualUrl');
+                    manualUrl.innerHTML = `<p class="text-xs text-gray-600 mb-2">Manual URL (if QR code doesn't work):</p>
+                        <code class="text-xs bg-white px-2 py-1 rounded border">${data.qr_url}</code>`;
+                })
+                .catch(error => {
+                    console.error('Error loading QR code:', error);
+                    document.getElementById('qrContainer').innerHTML = '<p>Error loading QR code</p>';
+                });
+        }
+
+        function closeMobileAppModal() {
+            const modal = document.getElementById('mobileAppModal');
+            modal.style.display = 'none';
+        }
+
         function copyTokenFromModal() {
             const tokenText = document.getElementById('modalTokenText');
             const copyBtn = document.querySelector('#tokenModal .copy-btn');
@@ -236,6 +291,10 @@
             if (tokenModal && event.target == tokenModal) {
                 closeTokenModal();
             }
+            const mobileAppModal = document.getElementById('mobileAppModal');
+            if (mobileAppModal && event.target == mobileAppModal) {
+                closeMobileAppModal();
+            }
             // Close user dropdown
             const dropdown = document.getElementById('userDropdown');
             const icon = document.querySelector('.user-icon');

vidai/web.py

@@ -1894,6 +1894,35 @@ def mobileapp_link():
                              uuid=link_uuid,
                              active_page='api_tokens')
 
+@app.route('/api/mobileapp_qr')
+@login_required
+def api_mobileapp_qr():
+    """API endpoint to get QR code data for mobile app linking."""
+    user = get_current_user_session()
+
+    # Generate UUID for this linking session
+    import uuid
+    import time
+    link_uuid = str(uuid.uuid4())
+
+    # Store UUID with user info
+    if not hasattr(app, 'mobile_uuids'):
+        app.mobile_uuids = {}
+
+    app.mobile_uuids[link_uuid] = {
+        'user_id': user['id'],
+        'created_at': time.time()
+    }
+
+    # Generate QR code URL
+    host_url = request.host_url.rstrip('/')
+    qr_url = f'{host_url}/mobileapp?uuid={link_uuid}'
+
+    return {
+        'uuid': link_uuid,
+        'qr_url': qr_url
+    }
+
 @app.route('/qr/<uuid>')
 def generate_qr_code(uuid):
     """Generate and serve QR code image for mobile app linking."""