Ajout de la génération de QR codes Wi-Fi

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)

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();
 })();

app/index.html

@@ -9,18 +9,53 @@
 <body>
   <header>
     <h1>QR Code <span>Generator</span></h1>
-    <p>Générez des QR codes pour du texte ou des liens, avec logo optionnel.</p>
+    <p>Générez des QR codes pour du texte, des liens ou une connexion Wi-Fi, avec logo optionnel.</p>
     <span class="badge">🔒 100% local — rien n'est envoyé à un serveur</span>
   </header>
 
   <main>
     <section class="panel">
       <h2>Contenu</h2>
+
       <div class="field">
+        <label for="qr-mode">Type de contenu</label>
+        <select id="qr-mode">
+          <option value="text" selected>Texte / URL</option>
+          <option value="wifi">Wi-Fi</option>
+        </select>
+      </div>
+
+      <div class="field" id="mode-text">
         <label for="qr-text">Texte ou URL à encoder</label>
         <textarea id="qr-text" placeholder="https://example.com">https://example.com</textarea>
       </div>
 
+      <div id="mode-wifi" style="display:none;">
+        <div class="grid">
+          <div class="field">
+            <label for="wifi-ssid">Nom du réseau (SSID)</label>
+            <input type="text" id="wifi-ssid" placeholder="MonReseauWifi" />
+          </div>
+          <div class="field">
+            <label for="wifi-encryption">Sécurité</label>
+            <select id="wifi-encryption">
+              <option value="WPA" selected>WPA/WPA2/WPA3</option>
+              <option value="WEP">WEP</option>
+              <option value="nopass">Aucune (réseau ouvert)</option>
+            </select>
+          </div>
+        </div>
+        <div class="field" id="wifi-password-field">
+          <label for="wifi-password">Mot de passe</label>
+          <input type="text" id="wifi-password" placeholder="••••••••" />
+        </div>
+        <div class="checkbox-row field">
+          <input type="checkbox" id="wifi-hidden" />
+          <label for="wifi-hidden" style="margin:0;">Réseau masqué (SSID caché)</label>
+        </div>
+        <p class="hint">Scanné avec l'appareil photo du téléphone, ce QR code connecte directement l'appareil au réseau Wi-Fi, sans saisir le mot de passe.</p>
+      </div>
+
       <div class="grid">
         <div class="field">
           <label for="qr-cell-size">Taille des modules (px)</label>