feat: Add WiFi QR code generation with dedicated UI fields and dynamic text display

2025-06-23 09:33:18 +02:00
parent 590d37d1b0
commit 5dd4146902
2 changed files with 147 additions and 47 deletions
--- a/README.md
+++ b/README.md
@@ -2,6 +2,18 @@

 Ein einfacher QR-Code-Generator, der vollständig im Browser läuft. Keine Daten werden an externe Server gesendet.

+## Features
+
+- ✅ Vollständig clientseitig (keine Server-Kommunikation)
+- ✅ URL-Parameter für alle Einstellungen
+- ✅ Anpassbare Größen und Farben
+- ✅ Verschiedene Fehlerkorrektur-Level
+- ✅ Download-Funktion
+- ✅ Responsive Design
+- ✅ **WiFi QR-Code Unterstützung mit eigener UI**
+- ✅ **Dynamische Klartext-Anzeige**
+- ✅ **Automatische QR-Code-Generierung**
+
 ## Docker Setup

 ### Mit Docker Compose (empfohlen)
@@ -32,11 +44,29 @@ docker rm qr-generator

 Nach dem Start ist die Anwendung unter `http://localhost:8080` erreichbar.

+### Normale QR-Codes
+
+Geben Sie einfach Text oder URLs in das erste Eingabefeld ein. Der QR-Code wird automatisch generiert.
+
+### WiFi QR-Codes
+
+Die App bietet spezielle Eingabefelder für WiFi-Daten:
+
+1. **WiFi SSID:** Geben Sie den Namen Ihres WLAN-Netzwerks ein
+2. **WiFi Password:** Geben Sie das WLAN-Passwort ein
+3. **Automatische Generierung:** Der QR-Code wird im korrekten WiFi-Format erstellt
+4. **Klartext-Anzeige:** Das Textfeld zeigt den generierten WiFi-Code an
+
+**Verschlüsselung:** Fest eingestellt auf WPA/WPA2  
+**Hidden Network:** Standardmäßig auf false (nicht versteckt)
+
 ### URL-Parameter

 Die Anwendung unterstützt folgende URL-Parameter:

 - `text` - Text oder URL für den QR-Code
+- `ssid` - WiFi SSID
+- `password` - WiFi Passwort
 - `size` - Größe (128, 256, 512, 1024)
 - `errorCorrection` - Fehlerkorrektur (L, M, Q, H)
 - `foreground` - Vordergrundfarbe (Hex-Code)
@@ -44,64 +74,52 @@ Die Anwendung unterstützt folgende URL-Parameter:

 ### Beispiele

+**Normale QR-Codes:**
 ```
 http://localhost:8080/?text=Hello%20World
 http://localhost:8080/?text=Test&size=512&errorCorrection=H
 http://localhost:8080/?text=Colored&foreground=%23ff0000&background=%23ffff00
 ```

-## WiFi QR-Codes erstellen
-
-Die App unterstützt das Erstellen von WiFi QR-Codes, die automatisch von Smartphones erkannt werden.
-
-### Format:
+**WiFi QR-Codes:**
 ```
-WIFI:S:<SSID>;T:<Verschlüsselung>;P:<Passwort>;H:<Versteckt>;;
+http://localhost:8080/?ssid=MeinWLAN&password=MeinPasswort123
+http://localhost:8080/?ssid=OffenesWLAN
 ```

-### Parameter:
- **S** = SSID (Netzwerkname)
- **T** = Typ der Verschlüsselung (WPA, WEP, nopass)
- **P** = Passwort
- **H** = Versteckt (true/false) - optional
+## WiFi QR-Code Format

-### Beispiele:
+Die App generiert automatisch QR-Codes im Standard-WiFi-Format:

-**WPA/WPA2 Netzwerk:**
+### WPA/WPA2 Netzwerk:
 ```
-WIFI:S:MeinWLAN;T:WPA;P:MeinPasswort123;;
+WIFI:S:<SSID>;T:WPA;P:<Passwort>;;
 ```

-**WEP Netzwerk:**
+### Offenes Netzwerk (ohne Passwort):
 ```
-WIFI:S:MeinWLAN;T:WEP;P:1234567890;;
-```
-
-**Offenes Netzwerk (ohne Passwort):**
-```
-WIFI:S:MeinWLAN;T:nopass;;
-```
-
-**Verstecktes Netzwerk:**
-```
-WIFI:S:MeinWLAN;T:WPA;P:MeinPasswort123;H:true;;
+WIFI:S:<SSID>;T:nopass;;
 ```

 ### Verwendung:
-1. Kopieren Sie einen der obigen Texte
-2. Ersetzen Sie die Werte durch Ihre eigenen WiFi-Daten
-3. Fügen Sie den Text in das Eingabefeld ein
-4. Der QR-Code wird automatisch generiert
-5. Scannen Sie ihn mit einem Smartphone
+1. Füllen Sie die WiFi-Felder aus
+2. Der QR-Code wird automatisch generiert
+3. Das Textfeld zeigt den generierten Code an
+4. Scannen Sie ihn mit einem Smartphone

 Das Smartphone erkennt automatisch, dass es sich um WiFi-Daten handelt und bietet an, sich mit dem Netzwerk zu verbinden!

-## Features
+## Besondere Funktionen

- ✅ Vollständig clientseitig (keine Server-Kommunikation)
- ✅ URL-Parameter für alle Einstellungen
- ✅ Anpassbare Größen und Farben
- ✅ Verschiedene Fehlerkorrektur-Level
- ✅ Download-Funktion
- ✅ Responsive Design
- ✅ WiFi QR-Code Unterstützung 
+### Dynamische Klartext-Anzeige
+- Das Textfeld zeigt immer den aktuellen Inhalt des QR-Codes an
+- Bei WiFi-Eingaben wird automatisch das korrekte Format angezeigt
+- Bei normaler Texteingabe bleibt der eingegebene Text sichtbar
+
+### Synchronisierte Felder
+- Beim Leeren des Textfeldes werden auch die WiFi-Felder geleert
+- Alle Felder werden synchron verwaltet
+
+### Intelligente Validierung
+- WiFi-Passwort ohne SSID wird als Fehler angezeigt
+- Leere Eingaben werden entsprechend behandelt