waengine 1.1.2 → 1.7.3

package/src/qr.js

@@ -1,115 +1,435 @@
-import { chromium } from "playwright";
 import qrcode from "qrcode-terminal";
+import { exec } from "child_process";
+import { promisify } from "util";
+import fs from "fs";
+import path from "path";
+import os from "os";
+
+const execAsync = promisify(exec);
 
 let browser = null;
 let page = null;
+let httpServer = null;
+let lastQRTime = 0;
+let qrDisplayCount = 0;
+let isQRDisplayed = false;
+
+// Cross-Platform Browser Detection
+const BROWSERS = {
+    windows: [
+        'msedge.exe',
+        'chrome.exe', 
+        'firefox.exe',
+        'brave.exe',
+        'opera.exe'
+    ],
+    darwin: [
+        '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+        '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+        '/Applications/Firefox.app/Contents/MacOS/firefox',
+        '/Applications/Brave Browser.app/Contents/MacOS/Brave Browser',
+        '/Applications/Safari.app/Contents/MacOS/Safari'
+    ],
+    linux: [
+        'microsoft-edge',
+        'google-chrome',
+        'chromium-browser',
+        'firefox',
+        'brave-browser',
+        'opera'
+    ]
+};
 
 export async function generateQRCode(qrData = null) {
     try {
-        // QR-Code im Terminal anzeigen falls vorhanden
-        if (qrData) {
-            console.log("\n📱 QR-CODE GENERIERT!");
-            console.log("👆 Scanne den QR-Code hier im Terminal:");
-            console.log("─".repeat(50));
+        // QR-Spam Prevention - nur alle 30 Sekunden im Terminal anzeigen
+        const now = Date.now();
+        const timeSinceLastQR = now - lastQRTime;
+        const shouldShowTerminalQR = timeSinceLastQR > 30000 || qrDisplayCount === 0;
+
+        if (qrData && shouldShowTerminalQR) {
+            console.clear(); // Terminal leeren für saubere Anzeige
+            console.log("\n" + "=".repeat(60));
+            console.log("📱 WAEngine QR-CODE - SCAN EINMAL UND FERTIG!");
+            console.log("=".repeat(60));
             
             // QR-Code im Terminal anzeigen
             qrcode.generate(qrData, { small: true });
             
-            console.log("─".repeat(50));
-            console.log("📲 Öffne WhatsApp auf deinem Handy:");
-            console.log("   1. Gehe zu Einstellungen");
-            console.log("   2. Tippe auf 'Verknüpfte Geräte'");
-            console.log("   3. Tippe auf 'Gerät verknüpfen'");
-            console.log("   4. Scanne den QR-Code OBEN im Terminal");
-            console.log("⏳ Warte auf QR-Scan...");
-        }
-
-        // Browser öffnen und den richtigen QR-Code anzeigen
-        if (!browser && qrData) {
-            console.log("🌐 Öffne Browser mit korrektem QR-Code...");
-            browser = await chromium.launch({
-                channel: "msedge",
-                headless: false
-            });
+            console.log("=".repeat(60));
+            console.log("📲 WhatsApp Anleitung:");
+            console.log("   1. Öffne WhatsApp auf deinem Handy");
+            console.log("   2. Gehe zu Einstellungen (⚙️)");
+            console.log("   3. Tippe auf 'Verknüpfte Geräte'");
+            console.log("   4. Tippe auf 'Gerät verknüpfen'");
+            console.log("   5. Scanne den QR-Code OBEN");
+            console.log("=".repeat(60));
+            console.log(`⏳ Warte auf QR-Scan... (${qrDisplayCount + 1}. Versuch)`);
+            console.log("💡 QR-Code wird auch im Browser angezeigt!");
+            console.log("");
+            
+            lastQRTime = now;
+            qrDisplayCount++;
+            isQRDisplayed = true;
+        } else if (qrData && !shouldShowTerminalQR) {
+            // Nur kurze Info ohne QR-Spam
+            console.log(`🔄 QR-Code aktualisiert (${qrDisplayCount + 1}. Mal) - Browser verwenden oder 30s warten`);
+            qrDisplayCount++;
+        }
+
+        // Browser QR immer versuchen (weniger störend)
+        if (qrData) {
+            await openUniversalBrowser(qrData);
+        }
+
+        return { browser, page };
+        
+    } catch (error) {
+        console.error("❌ QR-System Fehler:", error.message);
+        
+        // Fallback nur bei erstem Mal
+        if (qrData && qrDisplayCount === 0) {
+            console.log("📱 Terminal QR-Code verfügbar (siehe oben)");
+            qrDisplayCount++;
+        }
+        
+        return null;
+    }
+}
+
+// QR-Code Status zurücksetzen (für neue Sessions)
+export function resetQRStatus() {
+    lastQRTime = 0;
+    qrDisplayCount = 0;
+    isQRDisplayed = false;
+    console.log("🔄 QR-Status zurückgesetzt");
+}
+
+// QR-Code manuell anzeigen (für Debugging)
+export function forceShowQR(qrData) {
+    lastQRTime = 0; // Reset Timer
+    return generateQRCode(qrData);
+}
+
+async function openUniversalBrowser(qrData) {
+    try {
+        const platform = os.platform();
+        console.log(`🖥️ Erkannte Plattform: ${platform}`);
+        
+        // 1. Versuche Playwright (wenn verfügbar)
+        try {
+            await openWithPlaywright(qrData);
+            return;
+        } catch (playwrightError) {
+            console.log("⚠️ Playwright nicht verfügbar, versuche System-Browser...");
+        }
+        
+        // 2. Versuche HTTP Server + System Browser
+        await openWithSystemBrowser(qrData, platform);
+        
+    } catch (error) {
+        console.log("⚠️ Browser-Öffnung fehlgeschlagen:", error.message);
+        console.log("📱 Verwende Terminal QR-Code (siehe oben)");
+    }
+}
+
+async function openWithPlaywright(qrData) {
+    try {
+        const { chromium } = await import("playwright");
+        
+        // Versuche verschiedene Browser-Channels
+        const channels = ['msedge', 'chrome', 'chromium'];
+        
+        for (const channel of channels) {
+            try {
+                console.log(`🌐 Versuche ${channel}...`);
+                browser = await chromium.launch({
+                    channel,
+                    headless: false,
+                    args: ['--no-sandbox', '--disable-setuid-sandbox']
+                });
+                
+                page = await browser.newPage();
+                const html = await generateQRHTML(qrData);
+                await page.setContent(html);
+                
+                console.log(`✅ ${channel} erfolgreich geöffnet!`);
+                return;
+                
+            } catch (channelError) {
+                console.log(`⚠️ ${channel} nicht verfügbar`);
+                if (browser) {
+                    await browser.close();
+                    browser = null;
+                }
+            }
+        }
+        
+        throw new Error("Kein Playwright-Browser verfügbar");
+        
+    } catch (error) {
+        throw new Error(`Playwright Fehler: ${error.message}`);
+    }
+}
+
+async function openWithSystemBrowser(qrData, platform) {
+    try {
+        // HTTP Server starten
+        const port = await startHTTPServer(qrData);
+        const url = `http://localhost:${port}`;
+        
+        console.log(`🌐 HTTP Server gestartet: ${url}`);
+        
+        // System-Browser öffnen
+        await openSystemBrowser(url, platform);
+        
+    } catch (error) {
+        throw new Error(`System-Browser Fehler: ${error.message}`);
+    }
+}
+
+async function startHTTPServer(qrData) {
+    return new Promise(async (resolve, reject) => {
+        const http = await import('http');
+        const port = 3000 + Math.floor(Math.random() * 1000); // Random Port
+        
+        const html = await generateQRHTML(qrData);
+        
+        httpServer = http.default.createServer((req, res) => {
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(html);
+        });
+        
+        httpServer.listen(port, 'localhost', () => {
+            console.log(`📡 HTTP Server läuft auf Port ${port}`);
+            resolve(port);
+        });
+        
+        httpServer.on('error', (error) => {
+            reject(error);
+        });
+    });
+}
+
+async function openSystemBrowser(url, platform) {
+    try {
+        let command;
+        
+        switch (platform) {
+            case 'win32':
+                // Windows - versuche verschiedene Browser
+                command = `start "" "${url}"`;
+                break;
+                
+            case 'darwin':
+                // macOS - versuche verschiedene Browser
+                command = `open "${url}"`;
+                break;
+                
+            case 'linux':
+                // Linux - versuche verschiedene Browser
+                command = `xdg-open "${url}" || sensible-browser "${url}" || x-www-browser "${url}"`;
+                break;
+                
+            default:
+                throw new Error(`Unbekannte Plattform: ${platform}`);
+        }
+        
+        console.log(`🚀 Öffne Browser: ${command}`);
+        await execAsync(command);
+        console.log("✅ System-Browser geöffnet!");
+        
+    } catch (error) {
+        // Versuche spezifische Browser
+        await trySpecificBrowsers(url, platform);
+    }
+}
+
+async function trySpecificBrowsers(url, platform) {
+    const browsers = BROWSERS[platform === 'win32' ? 'windows' : platform] || [];
+    
+    for (const browserPath of browsers) {
+        try {
+            let command;
+            
+            if (platform === 'win32') {
+                command = `"${browserPath}" "${url}"`;
+            } else {
+                command = `"${browserPath}" "${url}"`;
+            }
             
-            page = await browser.newPage();
+            console.log(`🔍 Versuche: ${browserPath}`);
+            await execAsync(command);
+            console.log(`✅ ${browserPath} erfolgreich geöffnet!`);
+            return;
             
-            // Custom HTML-Seite mit dem richtigen QR-Code erstellen
-            const qrCodeDataURL = await generateQRCodeDataURL(qrData);
-            const html = `
+        } catch (error) {
+            console.log(`⚠️ ${browserPath} nicht verfügbar`);
+        }
+    }
+    
+    throw new Error("Kein Browser gefunden");
+}
+
+async function generateQRHTML(qrData) {
+    // QR-Code als Data URL generieren (async für ES Modules)
+    let qrCodeDataURL;
+    try {
+        const QRCode = await import('qrcode');
+        qrCodeDataURL = await QRCode.toDataURL(qrData, {
+            width: 400,
+            margin: 2,
+            color: {
+                dark: '#000000',
+                light: '#FFFFFF'
+            }
+        });
+    } catch (error) {
+        console.error("❌ QR-Code DataURL Fehler:", error);
+        qrCodeDataURL = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2Y4ZjlmYSIvPjx0ZXh0IHg9IjIwMCIgeT0iMjAwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjAiIGZpbGw9IiM2NjY2NjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkVycm9yPC90ZXh0Pjwvc3ZnPg==';
+    }
+
+    return `
 <!DOCTYPE html>
-<html>
+<html lang="de">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WAEngine - QR Code Scanner</title>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
         body {
-            font-family: Arial, sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            margin: 0;
-            padding: 20px;
+            min-height: 100vh;
             display: flex;
-            flex-direction: column;
             align-items: center;
             justify-content: center;
-            min-height: 100vh;
+            padding: 20px;
             color: white;
         }
+        
         .container {
             background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
+            backdrop-filter: blur(15px);
+            border-radius: 25px;
             padding: 40px;
             text-align: center;
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
             border: 1px solid rgba(255, 255, 255, 0.2);
+            max-width: 500px;
+            width: 100%;
         }
+        
+        .logo {
+            font-size: 3em;
+            margin-bottom: 10px;
+        }
+        
         h1 {
-            margin-bottom: 20px;
-            font-size: 2.5em;
+            margin-bottom: 30px;
+            font-size: 2.2em;
+            font-weight: 600;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
         }
+        
         .qr-container {
             background: white;
-            padding: 20px;
-            border-radius: 15px;
-            margin: 20px 0;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+            padding: 25px;
+            border-radius: 20px;
+            margin: 30px 0;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+            display: inline-block;
         }
+        
         .qr-code {
-            max-width: 300px;
+            width: 300px;
+            height: 300px;
+            max-width: 100%;
             height: auto;
+            border-radius: 10px;
         }
+        
+        .warning {
+            background: rgba(255, 193, 7, 0.2);
+            border: 2px solid #ffc107;
+            border-radius: 15px;
+            padding: 20px;
+            margin: 25px 0;
+            font-weight: 600;
+            font-size: 1.1em;
+        }
+        
         .instructions {
-            font-size: 1.2em;
-            line-height: 1.6;
-            margin-top: 20px;
+            font-size: 1.1em;
+            line-height: 1.8;
+            margin-top: 25px;
         }
+        
         .step {
-            margin: 10px 0;
-            padding: 10px;
+            margin: 12px 0;
+            padding: 15px;
             background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
+            border-radius: 12px;
+            border-left: 4px solid #ffc107;
+            text-align: left;
         }
-        .warning {
-            background: rgba(255, 193, 7, 0.2);
-            border: 2px solid #ffc107;
-            border-radius: 10px;
+        
+        .platform-info {
+            margin-top: 20px;
             padding: 15px;
-            margin: 20px 0;
-            font-weight: bold;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+            font-size: 0.9em;
+            opacity: 0.8;
+        }
+        
+        .refresh-info {
+            margin-top: 20px;
+            font-size: 0.9em;
+            opacity: 0.7;
+        }
+        
+        @media (max-width: 600px) {
+            .container {
+                padding: 25px;
+                margin: 10px;
+            }
+            
+            h1 {
+                font-size: 1.8em;
+            }
+            
+            .qr-code {
+                width: 250px;
+            }
+            
+            .step {
+                padding: 12px;
+                font-size: 1em;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>🚀 WAEngine QR Scanner</h1>
+        <div class="logo">🚀</div>
+        <h1>WAEngine QR Scanner</h1>
+        
         <div class="qr-container">
             <img src="${qrCodeDataURL}" alt="QR Code" class="qr-code" />
         </div>
+        
         <div class="warning">
             ⚠️ Scanne NUR diesen QR-Code!<br>
             Nicht den Standard WhatsApp Web QR-Code!
         </div>
+        
         <div class="instructions">
             <div class="step">📱 1. Öffne WhatsApp auf deinem Handy</div>
             <div class="step">⚙️ 2. Gehe zu Einstellungen</div>
@@ -117,41 +437,82 @@ export async function generateQRCode(qrData = null) {
             <div class="step">📷 4. Tippe auf "Gerät verknüpfen"</div>
             <div class="step">🎯 5. Scanne den QR-Code oben</div>
         </div>
+        
+        <div class="platform-info">
+            🖥️ Plattform: <span id="platform">Wird erkannt...</span><br>
+            🌐 Browser: <span id="browser">Wird erkannt...</span>
+        </div>
+        
+        <div class="refresh-info">
+            🔄 Seite wird alle 45 Sekunden aktualisiert
+        </div>
     </div>
+    
     <script>
-        // Auto-refresh QR code every 30 seconds
+        // Platform Detection
+        const platform = navigator.platform;
+        const userAgent = navigator.userAgent;
+        
+        document.getElementById('platform').textContent = platform;
+        
+        let browserName = 'Unbekannt';
+        if (userAgent.includes('Edg/')) browserName = 'Microsoft Edge';
+        else if (userAgent.includes('Chrome/')) browserName = 'Google Chrome';
+        else if (userAgent.includes('Firefox/')) browserName = 'Mozilla Firefox';
+        else if (userAgent.includes('Safari/')) browserName = 'Safari';
+        else if (userAgent.includes('Opera/')) browserName = 'Opera';
+        
+        document.getElementById('browser').textContent = browserName;
+        
+        // Auto-refresh QR code every 45 seconds
         setTimeout(() => {
+            console.log('🔄 QR-Code wird aktualisiert...');
             location.reload();
-        }, 30000);
+        }, 45000);
+        
+        // Visual feedback
+        let dots = 0;
+        setInterval(() => {
+            dots = (dots + 1) % 4;
+            const loading = '.'.repeat(dots);
+            document.title = \`WAEngine QR Scanner\${loading}\`;
+        }, 500);
+        
+        console.log('🚀 WAEngine QR Scanner geladen');
+        console.log('📱 Scanne den QR-Code mit WhatsApp');
     </script>
 </body>
 </html>`;
-            
-            await page.setContent(html);
-            console.log("✅ Browser mit korrektem QR-Code geöffnet!");
-        }
+}
 
-        return { browser, page };
-        
-    } catch (error) {
-        console.error("❌ Fehler beim QR-Code Browser:", error);
+export async function closeBrowser() {
+    try {
+        // Playwright Browser schließen
+        if (browser) {
+            await browser.close();
+            browser = null;
+            page = null;
+            console.log("🔴 Playwright Browser geschlossen");
+        }
         
-        // Fallback: QR nur im Terminal
-        if (qrData) {
-            console.log("📱 Fallback - QR-Code nur im Terminal:");
-            qrcode.generate(qrData, { small: true });
+        // HTTP Server schließen
+        if (httpServer) {
+            httpServer.close();
+            httpServer = null;
+            console.log("🔴 HTTP Server geschlossen");
         }
         
-        return null;
+    } catch (error) {
+        console.error("❌ Fehler beim Schließen:", error.message);
     }
 }
 
-// Hilfsfunktion um QR-Code als Data URL zu generieren
+// Hilfsfunktion um QR-Code als Data URL zu generieren (async für Playwright)
 async function generateQRCodeDataURL(qrData) {
     try {
         const QRCode = await import('qrcode');
         return await QRCode.toDataURL(qrData, {
-            width: 300,
+            width: 400,
             margin: 2,
             color: {
                 dark: '#000000',
@@ -160,15 +521,6 @@ async function generateQRCodeDataURL(qrData) {
         });
     } catch (error) {
         console.error("❌ Fehler beim QR-Code DataURL:", error);
-        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iI2Y4ZjlmYSIvPjx0ZXh0IHg9IjE1MCIgeT0iMTUwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM2NjY2NjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkVycm9yPC90ZXh0Pjwvc3ZnPg==';
-    }
-}
-
-export async function closeBrowser() {
-    if (browser) {
-        await browser.close();
-        browser = null;
-        page = null;
-        console.log("🔴 Browser geschlossen");
+        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2Y4ZjlmYSIvPjx0ZXh0IHg9IjIwMCIgeT0iMjAwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjAiIGZpbGw9IiM2NjY2NjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkVycm9yPC90ZXh0Pjwvc3ZnPg==';
     }
 }