diff --git a/README.md b/README.md index 773fa4d..9a3b88b 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ L'encodage et le rendu du QR code se font **intégralement dans le navigateur** ## Fonctionnalités - Encodage de texte libre ou d'URL en QR code, côté client, via [qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) +- Génération de QR codes de connexion Wi-Fi (SSID, mot de passe, sécurité WPA/WPA2/WPA3/WEP/ouvert, réseau masqué) — scannables directement par l'appareil photo du téléphone - Niveaux de correction d'erreur configurables (L / M / Q / H) - Couleurs de modules et de fond personnalisables - Superposition d'un logo au centre du QR code (force automatiquement la correction d'erreur au niveau H pour rester scannable) diff --git a/app/app.js b/app/app.js index 233416f..f5c78bd 100644 --- a/app/app.js +++ b/app/app.js @@ -1,7 +1,15 @@ (() => { "use strict"; + const modeEl = document.getElementById("qr-mode"); + const modeTextWrap = document.getElementById("mode-text"); + const modeWifiWrap = document.getElementById("mode-wifi"); const textEl = document.getElementById("qr-text"); + const wifiSsidEl = document.getElementById("wifi-ssid"); + const wifiEncryptionEl = document.getElementById("wifi-encryption"); + const wifiPasswordEl = document.getElementById("wifi-password"); + const wifiPasswordField = document.getElementById("wifi-password-field"); + const wifiHiddenEl = document.getElementById("wifi-hidden"); const cellSizeEl = document.getElementById("qr-cell-size"); const correctionEl = document.getElementById("qr-correction"); const fgColorEl = document.getElementById("qr-fg-color"); @@ -40,15 +48,57 @@ render(); }); + function escapeWifiField(value) { + return String(value).replace(/([\\;,":])/g, "\\$1"); + } + + function buildWifiPayload() { + const ssid = wifiSsidEl.value; + const encryption = wifiEncryptionEl.value; + const password = wifiPasswordEl.value; + const hidden = wifiHiddenEl.checked; + + if (!ssid) return ""; + + let payload = `WIFI:T:${encryption};S:${escapeWifiField(ssid)};`; + if (encryption !== "nopass" && password) { + payload += `P:${escapeWifiField(password)};`; + } + payload += `H:${hidden ? "true" : "false"};;`; + return payload; + } + + function updateModeVisibility() { + const isWifi = modeEl.value === "wifi"; + modeTextWrap.style.display = isWifi ? "none" : "block"; + modeWifiWrap.style.display = isWifi ? "block" : "none"; + wifiPasswordField.style.display = wifiEncryptionEl.value === "nopass" ? "none" : "block"; + } + + modeEl.addEventListener("change", () => { + updateModeVisibility(); + render(); + }); + + wifiEncryptionEl.addEventListener("change", updateModeVisibility); + + [wifiSsidEl, wifiEncryptionEl, wifiPasswordEl, wifiHiddenEl].forEach((el) => { + el.addEventListener("input", render); + el.addEventListener("change", render); + }); + function render() { - const text = textEl.value; + const isWifi = modeEl.value === "wifi"; + const text = isWifi ? buildWifiPayload() : textEl.value; statusEl.classList.remove("error"); if (!text) { ctx.clearRect(0, 0, canvas.width, canvas.height); canvas.width = 280; canvas.height = 280; - statusEl.textContent = "Saisissez un texte ou une URL pour générer le QR code."; + statusEl.textContent = isWifi + ? "Renseignez au moins le nom du réseau (SSID) pour générer le QR code." + : "Saisissez un texte ou une URL pour générer le QR code."; return; } @@ -125,5 +175,6 @@ generateBtn.addEventListener("click", render); downloadBtn.addEventListener("click", downloadPng); + updateModeVisibility(); render(); })(); diff --git a/app/index.html b/app/index.html index 2191801..0e123d8 100644 --- a/app/index.html +++ b/app/index.html @@ -9,18 +9,53 @@
Générez des QR codes pour du texte ou des liens, avec logo optionnel.
+Générez des QR codes pour du texte, des liens ou une connexion Wi-Fi, avec logo optionnel.
🔒 100% local — rien n'est envoyé à un serveur