diff --git a/README.md b/README.md index 8753e76..47c33a7 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,8 @@ Dieses Projekt basiert auf dem Code von https://qr.alster.space/. Er wurde um ve - Anpassbare Größen und Farben - Verschiedene Fehlerkorrektur-Level - Download-Funktion +- Teilen-Funktion (Link mit aktuellen Einstellungen kopieren) +- Hinweis bei WiFi: Passwort im Link im Klartext - Responsive Design - WiFi QR-Code Unterstützung mit eigener UI - Dynamische Klartext-Anzeige @@ -90,6 +92,8 @@ http://localhost:8080/?ssid=MeinWLAN&password=MeinPasswort123 http://localhost:8080/?ssid=OffenesWLAN ``` +**Achtung:** Das WLAN-Passwort ist im Link im Klartext sichtbar! + ## WiFi QR-Code Format Die App generiert automatisch QR-Codes im Standard-WiFi-Format: @@ -127,6 +131,12 @@ Das Smartphone erkennt automatisch, dass es sich um WiFi-Daten handelt und biete - WiFi-Passwort ohne SSID wird als Fehler angezeigt - Leere Eingaben werden entsprechend behandelt +### Teilen-Funktion + +Mit dem Button "Teilen" kann ein Link mit allen aktuellen Einstellungen (inkl. WiFi-Daten) in die Zwischenablage kopiert werden. Dieser Link kann weitergegeben werden und öffnet die App direkt mit den gewählten Einstellungen. + +**Achtung:** Wenn ein WLAN-Passwort eingegeben ist, wird dieses im Link im Klartext übertragen! + ## Sicherheit & Content Security Policy (CSP) Die Anwendung ist gegen XSS-Angriffe abgesichert: diff --git a/index.html b/index.html index 0a9cd95..a6b02ae 100644 --- a/index.html +++ b/index.html @@ -363,10 +363,14 @@
- Generated QR Code + Generated QR Code
- +
+ + +
+
diff --git a/main.js b/main.js index e86a12e..d62ced1 100644 --- a/main.js +++ b/main.js @@ -16,6 +16,8 @@ document.addEventListener('DOMContentLoaded', function() { const infoPanel = document.getElementById('info-panel'); const infoClose = document.getElementById('info-close'); const titleElement = document.getElementById('title'); + const shareBtn = document.getElementById('share'); + const shareHint = document.getElementById('share-hint'); // Title Easter egg let titleClickCount = 0; @@ -292,4 +294,49 @@ document.addEventListener('DOMContentLoaded', function() { // Update clear button visibility toggleClearButton(); } + + function updateShareHint() { + const wifiPassword = wifiPasswordInput.value.trim(); + if (wifiPassword) { + shareHint.style.display = 'block'; + } else { + shareHint.style.display = 'none'; + } + } + + wifiPasswordInput.addEventListener('input', updateShareHint); + wifiSsidInput.addEventListener('input', updateShareHint); + textInput.addEventListener('input', updateShareHint); + // Initial anzeigen, falls Passwort schon gesetzt + updateShareHint(); + + shareBtn.addEventListener('click', function() { + const params = new URLSearchParams(); + const text = textInput.value.trim(); + const wifiSsid = wifiSsidInput.value.trim(); + const wifiPassword = wifiPasswordInput.value.trim(); + const size = sizeSelect.value; + const errorCorrection = errorCorrectionSelect.value; + const fgColor = foregroundColor.value; + const bgColor = backgroundColor.value; + + // Entscheide, was kodiert werden soll + if (wifiSsid) params.set('ssid', wifiSsid); + if (wifiPassword) params.set('password', wifiPassword); + if (!wifiSsid && !wifiPassword && text) params.set('text', text); + if (size !== '256') params.set('size', size); + if (errorCorrection !== 'M') params.set('errorCorrection', errorCorrection); + if (fgColor !== '#000000') params.set('foreground', fgColor); + if (bgColor !== '#ffffff') params.set('background', bgColor); + + const url = window.location.origin + window.location.pathname + '?' + params.toString(); + // In Zwischenablage kopieren + navigator.clipboard.writeText(url).then(() => { + const original = shareBtn.textContent; + shareBtn.textContent = 'Link kopiert!'; + setTimeout(() => { shareBtn.textContent = original; }, 2000); + }, () => { + alert('Konnte Link nicht kopieren.'); + }); + }); }); \ No newline at end of file