wifi hotspot improvements

html/wifi.html

@@ -194,23 +194,104 @@ function get_internet(){
         } else {
           console.log("Will try to connect to "+SSID+" with password "+PASS);
           console.log("Start PHP script:");
-          
+
+          // Close modal
+          var myModal = bootstrap.Modal.getInstance(document.getElementById('myModal'));
+          if (myModal) {
+            myModal.hide();
+          }
+
           $.ajax({
                 url: 'launcher.php?type=wifi_connect&SSID='+SSID+'&pass='+PASS,
-                dataType: 'text', // Specify that you expect a JSON response
-                method: 'GET', // Use GET or POST depending on your needs
+                dataType: 'json', // Changed to JSON
+                method: 'GET',
                 success: function(response) {
                             console.log(response);
-                         
+
+                            // Show connection status message
+                            showConnectionStatus(response);
                         },
                         error: function(xhr, status, error) {
                             console.error('AJAX request failed:', status, error);
+                            alert('Error: Could not start connection process');
                         }
                 });
-                
+
         }
             }
 
+  function showConnectionStatus(response) {
+    // Get user language (default to French)
+    const lang = localStorage.getItem('language') || 'fr';
+    const instructions = response.instructions[lang] || response.instructions['fr'];
+
+    // Create overlay with instructions
+    const overlay = document.createElement('div');
+    overlay.id = 'connection-status-overlay';
+    overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.9);
+      z-index: 9999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+    `;
+
+    overlay.innerHTML = `
+      <div style="max-width: 600px; padding: 40px; text-align: center;">
+        <div class="spinner-border text-primary mb-4" role="status" style="width: 4rem; height: 4rem;">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+
+        <h2 class="mb-4">${instructions.title}</h2>
+
+        <div class="alert alert-info text-start" role="alert">
+          <ol class="mb-0" style="padding-left: 20px;">
+            <li class="mb-2"><strong>${instructions.step1}</strong></li>
+            <li class="mb-2">${instructions.step2}</li>
+            <li class="mb-2">${instructions.step3}</li>
+            <li class="mb-2">${instructions.step4}</li>
+          </ol>
+        </div>
+
+        <div class="alert alert-warning text-start" role="alert">
+          <strong>⚠️ Important:</strong> ${instructions.warning}
+        </div>
+
+        <div class="mt-4">
+          <p class="text-muted">
+            ${lang === 'fr' ? 'Reconnexion à' : 'Reconnecting to'}:
+            <strong class="text-white">${response.ssid}</strong>
+          </p>
+          <p class="text-muted">
+            ${lang === 'fr' ? 'Nom du capteur' : 'Sensor name'}:
+            <strong class="text-white">${response.deviceName}</strong>
+          </p>
+        </div>
+
+        <div class="mt-4">
+          <small class="text-muted">
+            ${lang === 'fr' ? 'Cette fenêtre va se fermer automatiquement...' : 'This window will close automatically...'}
+          </small>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(overlay);
+
+    // Auto-close after 30 seconds (gives time to read)
+    setTimeout(() => {
+      if (document.getElementById('connection-status-overlay')) {
+        document.getElementById('connection-status-overlay').remove();
+      }
+    }, 30000);
+  }
+
   function wifi_scan(){
         console.log("Scanning Wifi");
                 $.ajax({