fix: route peer allocation through selected network

crates/nx9-wg-api/src/routes/app_client_js.js

@@ -630,7 +630,7 @@
                 <label class="form-label">Network</label>
                 <select id="peer-network" class="form-select">
                   <option value="">Auto-allocate next IP</option>
-                  ${networksData.map(n => `<option value="${n.name}">${escapeHtml(n.name)} (${n.cidr})</option>`).join('')}
+                  ${networksData.map(n => n && n.id ? `<option value="${n.id}">${escapeHtml(n.name)} (${n.cidr})</option>` : '').join('')}
                 </select>
               </div>
             </div>
@@ -668,13 +668,17 @@
     }
   };
 
+  function isNetworkUuid(value) {
+    return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(String(value || ''));
+  }
+
   window.submitCreatePeer = async function() {
     const errBox = document.getElementById('peer-modal-error');
     if (errBox) errBox.style.display = 'none';
 
     const name = document.getElementById('peer-name')?.value?.trim();
     const ifaceId = document.getElementById('peer-iface')?.value;
-    const network = document.getElementById('peer-network')?.value;
+    const rawNetworkValue = (document.getElementById('peer-network')?.value || '').trim();
     const mtu = parseInt(document.getElementById('rec-mtu-val')?.textContent || '1420', 10);
 
     if (!name || !ifaceId) {
@@ -685,6 +689,22 @@
       return;
     }
 
+    // Resolve the selector back to the Network API object and send only its UUID.
+    // Display text is name + CIDR; the request field must never be the name or CIDR.
+    let networkId = null;
+    if (rawNetworkValue) {
+      const selectedNetwork = networksData.find(n => n && String(n.id) === rawNetworkValue);
+      const resolvedId = selectedNetwork ? String(selectedNetwork.id) : rawNetworkValue;
+      if (!isNetworkUuid(resolvedId)) {
+        if (errBox) {
+          errBox.style.display = 'block';
+          errBox.textContent = '❌ Selected Network is missing a valid UUID. Refresh the page and try again.';
+        }
+        return;
+      }
+      networkId = resolvedId;
+    }
+
     const payload = {
       name,
       peer_type: 'road_warrior',
@@ -693,7 +713,7 @@
       persistent_keepalive: 25,
       dns: '1.1.1.1, 1.0.0.1',
       allowed_ips: '0.0.0.0/0, ::/0',
-      network: network || null
+      network_id: networkId
     };
 
     const res = await api(`/interfaces/${ifaceId}/peers`, {
@@ -1547,15 +1567,17 @@
 
   // ── NAT & Masquerade ────────────────────────────────────────────────────────
   async function renderNatPage(container) {
-    const [settings, ifaces] = await Promise.all([
+    const [settings, ifaces, networks] = await Promise.all([
       api('/system/settings'),
-      api('/interfaces')
+      api('/interfaces'),
+      api('/networks')
     ]);
 
     const settingList = Array.isArray(settings) ? settings : [];
     const natSetting = settingList.find(s => s.key === 'enable_nat');
     const isNatEnabled = natSetting ? (natSetting.value === 'true' || natSetting.value === '1') : true;
     const ifaceList = Array.isArray(ifaces) ? ifaces : [];
+    const networkList = Array.isArray(networks) ? networks.filter(n => n && n.enabled !== false) : [];
 
     container.innerHTML = `
       <div class="page-header">
@@ -1587,7 +1609,8 @@
           <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;">
             The following subnets are dynamically deduplicated and translated to the host WAN IP:
           </div>
-          ${ifaceList.map(i => `<div style="font-size: 13px; padding: 4px 0;"><span class="key-code">${i.address_v4}</span> (${i.name})</div>`).join('')}
+          ${ifaceList.map(i => `<div style="font-size: 13px; padding: 4px 0;"><span class="key-code">${i.address_v4}</span> (${escapeHtml(i.name)})</div>`).join('')}
+          ${networkList.map(n => `<div style="font-size: 13px; padding: 4px 0;"><span class="key-code">${n.cidr}</span> (${escapeHtml(n.name)})</div>`).join('')}
         </div>
       </div>
     `;