wifi hotspot improvements

html/launcher.php

@@ -817,22 +817,50 @@ if ($type == "wifi_connect") {
     $SSID=$_GET['SSID'];
     $PASS=$_GET['pass'];
 
-    echo "will try to connect to </br>";
-    echo "SSID: " . $SSID;
-    echo "</br>";
-    echo "Password: " . $PASS;
-    echo "</br>";
-    echo "</br>";
+    // Get device name from database for instructions
+    try {
+        $db = new PDO("sqlite:$database_path");
+        $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+        $stmt = $db->prepare("SELECT value FROM config_table WHERE key = 'deviceName'");
+        $stmt->execute();
+        $result = $stmt->fetch(PDO::FETCH_ASSOC);
+        $deviceName = $result ? $result['value'] : 'NebuleAir';
+        $db = null;
+    } catch (PDOException $e) {
+        $deviceName = 'NebuleAir';
+    }
 
-    echo "You will be disconnected. If connection is successfull you can find the device on your local network.";
-    
+    // Launch connection script in background
     $script_path = '/var/www/nebuleair_pro_4g/connexion.sh';
     $log_file = '/var/www/nebuleair_pro_4g/logs/app.log';
     shell_exec("$script_path $SSID $PASS >> $log_file 2>&1 &");
 
-    #$output = shell_exec('sudo nmcli connection down Hotspot');
-    #$output2 = shell_exec('sudo nmcli device wifi connect "AirLab" password "123plouf"');
-
+    // Return JSON response with instructions
+    header('Content-Type: application/json');
+    echo json_encode([
+        'success' => true,
+        'ssid' => $SSID,
+        'deviceName' => $deviceName,
+        'message' => 'Connection attempt started',
+        'instructions' => [
+            'fr' => [
+                'title' => 'Connexion en cours...',
+                'step1' => "Le capteur tente de se connecter au réseau « $SSID »",
+                'step2' => "Vous allez être déconnecté du hotspot dans quelques secondes",
+                'step3' => "Reconnectez-vous au WiFi « $SSID » sur votre appareil",
+                'step4' => "Accédez au capteur via http://$deviceName.local ou cherchez son IP dans votre routeur",
+                'warning' => "Si la connexion échoue, le capteur recréera automatiquement le hotspot"
+            ],
+            'en' => [
+                'title' => 'Connection in progress...',
+                'step1' => "The sensor is attempting to connect to network « $SSID »",
+                'step2' => "You will be disconnected from the hotspot in a few seconds",
+                'step3' => "Reconnect your device to WiFi « $SSID »",
+                'step4' => "Access the sensor via http://$deviceName.local or find its IP in your router",
+                'warning' => "If connection fails, the sensor will automatically recreate the hotspot"
+            ]
+        ]
+    ]);
 }
 
 

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({