feat: seamless QR claim — receiver serves redirect page

Ravi Singh · Ravi Singh · commit 2020dce6e1fc · 2026-04-16T14:57:17.000+05:30
QR code now points to http://<receiver-ip>/claim which: 1. Collects tank data locally (same-origin HTTP, no mixed content) 2. Redirects to https://tanksync.smartghar.org/link with tanks encoded in URL 3. Cloud creates site + MQTT credentials 4. Success page shows MQTT config (auto-push or manual instructions) This solves the HTTPS→HTTP mixed content issue that prevented the cloud page from talking to the local receiver.
diff --git a/firmware/receiver-c3/components/web_server/web_server.c b/firmware/receiver-c3/components/web_server/web_server.c
@@ -526,6 +526,62 @@ static void ensure_link_token(void) {
     snprintf(s_link_token, sizeof(s_link_token), "%08" PRIx32, r1);
 }
 
+// Claim page — served by receiver (HTTP, same-origin). Collects tank data
+// locally, then redirects to the cloud with everything URL-encoded.
+// This avoids the HTTPS→HTTP mixed content browser restriction.
+static esp_err_t handle_claim_page(httpd_req_t *req) {
+    ensure_link_token();
+    const char *dev_id = mqtt_manager_device_id();
+    const char *ip = wifi_manager_ip();
+
+    // Build tank data JSON inline
+    char tanks_json[512] = "[]";
+    {
+        cJSON *arr = cJSON_CreateArray();
+        for (int i = 0; i < registry_count(); i++) {
+            tx_info_t info; tx_data_t data;
+            if (!registry_get_info(i, &info) || !info.enabled) continue;
+            registry_get_data(i, &data);
+            cJSON *t = cJSON_CreateObject();
+            cJSON_AddNumberToObject(t, "address", info.address);
+            cJSON_AddStringToObject(t, "name", info.name);
+            cJSON_AddNumberToObject(t, "min_dist", info.min_dist_cm);
+            cJSON_AddNumberToObject(t, "max_dist", info.max_dist_cm);
+            cJSON_AddNumberToObject(t, "capacity", info.capacity_liters);
+            cJSON_AddItemToArray(arr, t);
+        }
+        char *s = cJSON_PrintUnformatted(arr);
+        if (s) { strncpy(tanks_json, s, sizeof(tanks_json)-1); free(s); }
+        cJSON_Delete(arr);
+    }
+
+    httpd_resp_set_type(req, "text/html; charset=utf-8");
+    char *page = malloc(2048);
+    if (!page) return ESP_FAIL;
+    int len = snprintf(page, 2048,
+        "<!DOCTYPE html><html><head><meta charset='utf-8'>"
+        "<meta name='viewport' content='width=device-width,initial-scale=1'>"
+        "<title>TankSync — Linking</title>"
+        "<style>body{background:#0F172A;color:#fff;font-family:sans-serif;"
+        "display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;text-align:center}"
+        ".spinner{width:48px;height:48px;border:4px solid rgba(14,165,233,0.3);"
+        "border-top-color:#0EA5E9;border-radius:50%%;animation:spin 1s linear infinite;margin:0 auto 16px}"
+        "@keyframes spin{to{transform:rotate(360deg)}}</style></head>"
+        "<body><div><div class='spinner'></div>"
+        "<h2>Linking to TankSync Cloud</h2>"
+        "<p style='opacity:0.6'>Redirecting...</p>"
+        "<script>"
+        "var tanks=encodeURIComponent(JSON.stringify(%s));"
+        "var url='%s/link?id=%s&token=%s&ip=%s&tanks='+tanks;"
+        "window.location.href=url;"
+        "</script></div></body></html>",
+        tanks_json, TANKSYNC_CLOUD_URL, dev_id, s_link_token, ip);
+
+    httpd_resp_send(req, page, len);
+    free(page);
+    return ESP_OK;
+}
+
 static esp_err_t handle_api_link(httpd_req_t *req) {
     ensure_link_token();
     const char *dev_id = mqtt_manager_device_id();
@@ -539,7 +595,8 @@ static esp_err_t handle_api_link(httpd_req_t *req) {
 
     // Build the claim URL
     char url[256];
-    snprintf(url, sizeof(url), TANKSYNC_CLOUD_URL "/link?id=%s&token=%s&ip=%s", dev_id, s_link_token, ip);
+    // QR URL points to receiver's /claim page (HTTP, avoids mixed content)
+    snprintf(url, sizeof(url), "http://%s/claim", ip);
     cJSON_AddStringToObject(root, "url", url);
 
     char *json = cJSON_PrintUnformatted(root); cJSON_Delete(root); send_json(req, json); free(json);
@@ -860,6 +917,7 @@ static const httpd_uri_t s_routes[] = {
     URI(HTTP_POST, "/api/ota/upload", handle_ota_upload), URI(HTTP_POST, "/api/ota/upload_tx", handle_ota_upload_tx),
     URI(HTTP_GET, "/api/display", handle_get_display), URI(HTTP_POST, "/api/display", handle_post_display),
     URI(HTTP_GET, "/api/link", handle_api_link),
+    URI(HTTP_GET, "/claim", handle_claim_page),
     // Captive portal detection endpoints
     URI(HTTP_GET, "/hotspot-detect.html", handle_captive_redirect),  // iOS
     URI(HTTP_GET, "/library/test/success.html", handle_captive_redirect), // iOS alternate
@@ -873,7 +931,7 @@ static const httpd_uri_t s_routes[] = {
 esp_err_t web_server_start(void) {
     httpd_config_t cfg = HTTPD_DEFAULT_CONFIG();
     cfg.server_port        = WEB_PORT;
-    cfg.max_uri_handlers   = 38;
+    cfg.max_uri_handlers   = 40;
     cfg.uri_match_fn       = httpd_uri_match_wildcard;
     cfg.max_open_sockets   = 6;          // leave 4+ lwIP sockets for MQTT/DNS/NTP
     cfg.recv_wait_timeout  = 15;         // balance: short enough to free sockets, long enough for TX firmware upload
diff --git a/firmware/receiver/components/web_server/web_server.c b/firmware/receiver/components/web_server/web_server.c
@@ -526,6 +526,62 @@ static void ensure_link_token(void) {
     snprintf(s_link_token, sizeof(s_link_token), "%08" PRIx32, r1);
 }
 
+// Claim page — served by receiver (HTTP, same-origin). Collects tank data
+// locally, then redirects to the cloud with everything URL-encoded.
+// This avoids the HTTPS→HTTP mixed content browser restriction.
+static esp_err_t handle_claim_page(httpd_req_t *req) {
+    ensure_link_token();
+    const char *dev_id = mqtt_manager_device_id();
+    const char *ip = wifi_manager_ip();
+
+    // Build tank data JSON inline
+    char tanks_json[512] = "[]";
+    {
+        cJSON *arr = cJSON_CreateArray();
+        for (int i = 0; i < registry_count(); i++) {
+            tx_info_t info; tx_data_t data;
+            if (!registry_get_info(i, &info) || !info.enabled) continue;
+            registry_get_data(i, &data);
+            cJSON *t = cJSON_CreateObject();
+            cJSON_AddNumberToObject(t, "address", info.address);
+            cJSON_AddStringToObject(t, "name", info.name);
+            cJSON_AddNumberToObject(t, "min_dist", info.min_dist_cm);
+            cJSON_AddNumberToObject(t, "max_dist", info.max_dist_cm);
+            cJSON_AddNumberToObject(t, "capacity", info.capacity_liters);
+            cJSON_AddItemToArray(arr, t);
+        }
+        char *s = cJSON_PrintUnformatted(arr);
+        if (s) { strncpy(tanks_json, s, sizeof(tanks_json)-1); free(s); }
+        cJSON_Delete(arr);
+    }
+
+    httpd_resp_set_type(req, "text/html; charset=utf-8");
+    char *page = malloc(2048);
+    if (!page) return ESP_FAIL;
+    int len = snprintf(page, 2048,
+        "<!DOCTYPE html><html><head><meta charset='utf-8'>"
+        "<meta name='viewport' content='width=device-width,initial-scale=1'>"
+        "<title>TankSync — Linking</title>"
+        "<style>body{background:#0F172A;color:#fff;font-family:sans-serif;"
+        "display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;text-align:center}"
+        ".spinner{width:48px;height:48px;border:4px solid rgba(14,165,233,0.3);"
+        "border-top-color:#0EA5E9;border-radius:50%%;animation:spin 1s linear infinite;margin:0 auto 16px}"
+        "@keyframes spin{to{transform:rotate(360deg)}}</style></head>"
+        "<body><div><div class='spinner'></div>"
+        "<h2>Linking to TankSync Cloud</h2>"
+        "<p style='opacity:0.6'>Redirecting...</p>"
+        "<script>"
+        "var tanks=encodeURIComponent(JSON.stringify(%s));"
+        "var url='%s/link?id=%s&token=%s&ip=%s&tanks='+tanks;"
+        "window.location.href=url;"
+        "</script></div></body></html>",
+        tanks_json, TANKSYNC_CLOUD_URL, dev_id, s_link_token, ip);
+
+    httpd_resp_send(req, page, len);
+    free(page);
+    return ESP_OK;
+}
+
 static esp_err_t handle_api_link(httpd_req_t *req) {
     ensure_link_token();
     const char *dev_id = mqtt_manager_device_id();
@@ -539,7 +595,8 @@ static esp_err_t handle_api_link(httpd_req_t *req) {
 
     // Build the claim URL
     char url[256];
-    snprintf(url, sizeof(url), TANKSYNC_CLOUD_URL "/link?id=%s&token=%s&ip=%s", dev_id, s_link_token, ip);
+    // QR URL points to receiver's /claim page (HTTP, avoids mixed content)
+    snprintf(url, sizeof(url), "http://%s/claim", ip);
     cJSON_AddStringToObject(root, "url", url);
 
     char *json = cJSON_PrintUnformatted(root); cJSON_Delete(root); send_json(req, json); free(json);
@@ -860,6 +917,7 @@ static const httpd_uri_t s_routes[] = {
     URI(HTTP_POST, "/api/ota/upload", handle_ota_upload), URI(HTTP_POST, "/api/ota/upload_tx", handle_ota_upload_tx),
     URI(HTTP_GET, "/api/display", handle_get_display), URI(HTTP_POST, "/api/display", handle_post_display),
     URI(HTTP_GET, "/api/link", handle_api_link),
+    URI(HTTP_GET, "/claim", handle_claim_page),
     // Captive portal detection endpoints
     URI(HTTP_GET, "/hotspot-detect.html", handle_captive_redirect),  // iOS
     URI(HTTP_GET, "/library/test/success.html", handle_captive_redirect), // iOS alternate
@@ -873,7 +931,7 @@ static const httpd_uri_t s_routes[] = {
 esp_err_t web_server_start(void) {
     httpd_config_t cfg = HTTPD_DEFAULT_CONFIG();
     cfg.server_port        = WEB_PORT;
-    cfg.max_uri_handlers   = 38;
+    cfg.max_uri_handlers   = 40;
     cfg.uri_match_fn       = httpd_uri_match_wildcard;
     cfg.max_open_sockets   = 6;          // leave 4+ lwIP sockets for MQTT/DNS/NTP
     cfg.recv_wait_timeout  = 15;         // balance: short enough to free sockets, long enough for TX firmware upload
diff --git a/pwa/client/src/pages/LinkDevice.jsx b/pwa/client/src/pages/LinkDevice.jsx
@@ -21,10 +21,13 @@ export default function LinkDevice() {
   const deviceId = searchParams.get('id');
   const token = searchParams.get('token');
   const receiverIp = searchParams.get('ip');
+  const tanksParam = searchParams.get('tanks');
 
   const [status, setStatus] = useState('linking');
   const [message, setMessage] = useState('');
   const [step, setStep] = useState('');
+  const [mqttCreds, setMqttCreds] = useState(null);
+  const [mqttAutoConfigured, setMqttAutoConfigured] = useState(false);
 
   useEffect(() => {
     if (!deviceId || !token || !receiverIp) setStatus('missing_params');
@@ -43,26 +46,13 @@ export default function LinkDevice() {
 
   const claimDevice = async () => {
     try {
-      // Step 1: Try to verify and discover from receiver (only works if on same LAN + HTTP allowed)
-      setStep('Discovering tanks...');
+      // Tanks come from the receiver's /claim redirect (embedded in URL)
+      setStep('Setting up cloud connection...');
       let tanks = [];
-      let transmitters = [];
-      try {
-        const resp = await fetch(`http://${receiverIp}/api/data`, { signal: AbortSignal.timeout(3000) });
-        const data = await resp.json();
-        tanks = data.tanks || [];
-      } catch {
-        // Mixed content or not on LAN — proceed anyway, server will create empty site
+      if (tanksParam) {
+        try { tanks = JSON.parse(tanksParam); } catch {}
       }
-
-      try {
-        const txResp = await fetch(`http://${receiverIp}/api/transmitters`, { signal: AbortSignal.timeout(3000) });
-        const txData = await txResp.json();
-        transmitters = txData.transmitters || [];
-      } catch {}
-
-      // Step 2: Send to cloud server — token in URL is proof of physical access
-      setStep('Setting up cloud connection...');
+      const transmitters = tanks; // same data, has min_dist/max_dist/capacity
       const result = await api.post('/api/link/claim', {
         device_id: deviceId,
         receiver_ip: receiverIp,
@@ -93,12 +83,34 @@ export default function LinkDevice() {
         }
       }
 
+      // Step 3: Try to push MQTT config to receiver directly
+      let mqttPushed = false;
+      if (result.mqtt && receiverIp) {
+        setStep('Configuring receiver...');
+        try {
+          const pushResp = await fetch(`http://${receiverIp}/api/mqtt`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              host: result.mqtt.mqtt_host,
+              port: result.mqtt.mqtt_port,
+              user: result.mqtt.mqtt_username,
+              pass: result.mqtt.mqtt_password,
+              enabled: true, ha_discovery: false, use_tls: true,
+            }),
+            signal: AbortSignal.timeout(5000),
+          });
+          mqttPushed = pushResp.ok;
+        } catch {} // May fail due to mixed content — handled below
+      }
+
       setStatus('success');
-      const mqttMsg = result.mqtt ? ' MQTT auto-configured.' : '';
+      setMqttCreds(result.mqtt);
+      setMqttAutoConfigured(mqttPushed);
       if (result.already_linked) {
-        setMessage('This device is already linked to your account.' + mqttMsg);
+        setMessage('This device is already linked to your account.');
       } else {
-        setMessage(`Linked successfully! ${result.device_count || 0} tank${result.device_count !== 1 ? 's' : ''} discovered.${mqttMsg}`);
+        setMessage(`Linked successfully! ${result.device_count || 0} tank${result.device_count !== 1 ? 's' : ''} discovered.`);
       }
     } catch (err) {
       setStatus('error');
@@ -140,7 +152,25 @@ export default function LinkDevice() {
           </svg>
         </div>
         <h2 className="text-2xl font-bold text-white mb-2">Device Linked!</h2>
-        <p className="text-slate-400 text-sm mb-8">{message}</p>
+        <p className="text-slate-400 text-sm mb-4">{message}</p>
+
+        {mqttAutoConfigured ? (
+          <div className="bg-success/10 border border-success/30 rounded-xl px-4 py-3 mb-6 text-sm text-success">
+            MQTT auto-configured. Your receiver will connect to the cloud automatically.
+          </div>
+        ) : mqttCreds ? (
+          <div className="bg-warning/10 border border-warning/30 rounded-xl px-4 py-3 mb-4 text-sm text-left">
+            <p className="text-warning font-medium mb-2">Configure MQTT on your receiver:</p>
+            <p className="text-slate-300 text-xs font-mono mb-1">Host: {mqttCreds.mqtt_host}</p>
+            <p className="text-slate-300 text-xs font-mono mb-1">Port: {mqttCreds.mqtt_port}</p>
+            <p className="text-slate-300 text-xs font-mono mb-1">User: {mqttCreds.mqtt_username}</p>
+            <p className="text-slate-300 text-xs font-mono mb-1">Pass: {mqttCreds.mqtt_password}</p>
+            <p className="text-slate-300 text-xs font-mono mb-2">TLS: Enabled</p>
+            <a href={`http://${receiverIp}`} target="_blank" rel="noopener"
+              className="inline-block text-water text-xs underline">Open Receiver Web UI</a>
+          </div>
+        ) : null}
+
         <button onClick={() => window.location.href = '/'}
           className="w-full max-w-xs py-3.5 rounded-xl bg-water text-white font-semibold
             hover:bg-water-dark active:scale-[0.98] transition-all">
