Fix Add IPSec Tunnel modal opening and ID alignment

internal/web/static/app.js

@@ -1842,6 +1842,28 @@ function updateIpsecEspProposalFromPFS(val) {
   }
 }
 
+function updateIpsecIkeProposalFromDH(dh) {
+  const el = document.getElementById('ipsec-modal-ikeprop');
+  if (el) {
+    el.value = `aes256-sha256-${dh},aes128-sha256-${dh},default`;
+  }
+}
+
+function safeSetVal(id, val) {
+  const el = document.getElementById(id);
+  if (el) el.value = val;
+}
+
+function safeSetChecked(id, val) {
+  const el = document.getElementById(id);
+  if (el) el.checked = !!val;
+}
+
+function safeGetVal(id, def = '') {
+  const el = document.getElementById(id);
+  return el ? el.value : def;
+}
+
 async function loadIPSec(populateInputs = true) {
   try {
     const res = await fetch(`${API_BASE}/vpn/ipsec/tunnels`);
@@ -1952,26 +1974,36 @@ async function loadIPSec(populateInputs = true) {
 }
 
 function openAddIPSecModal() {
-  document.getElementById('ipsec-modal-title').innerText = 'Configure IPSec Site-to-Site Tunnel';
+  const modal = document.getElementById('ipsec-modal');
+  if (!modal) return;
+
+  const title = document.getElementById('ipsec-modal-title');
+  if (title) title.innerText = 'Configure IPSec Site-to-Site Tunnel';
   
   // Phase 1 Fields
-  document.getElementById('ipsec-modal-name').value = `tunnel-${(state.ipsecTunnels || []).length + 1}`;
-  document.getElementById('ipsec-modal-name').readOnly = false;
-  document.getElementById('ipsec-modal-ikeversion').value = 'ikev2';
-  document.getElementById('ipsec-modal-remotegw').value = '';
-  document.getElementById('ipsec-modal-psk').value = '';
-  document.getElementById('ipsec-modal-ikeprop').value = 'aes256-sha256-modp2048,aes128-sha256-modp2048,default';
-  document.getElementById('ipsec-modal-ikekeylife').value = '86400';
-  document.getElementById('ipsec-modal-localid').value = '';
-  document.getElementById('ipsec-modal-remoteid').value = '';
-  document.getElementById('ipsec-modal-dpd').value = 'on-demand';
+  safeSetVal('ipsec-modal-name', `tunnel-${(state.ipsecTunnels || []).length + 1}`);
+  const nameEl = document.getElementById('ipsec-modal-name');
+  if (nameEl) nameEl.readOnly = false;
+  safeSetVal('ipsec-modal-ikeversion', 'ikev2');
+  safeSetVal('ipsec-modal-ikever', 'ikev2');
+  safeSetVal('ipsec-modal-remotegw', '');
+  safeSetVal('ipsec-modal-localaddrs', '');
+  safeSetVal('ipsec-modal-comments', '');
+  safeSetVal('ipsec-modal-psk', '');
+  safeSetVal('ipsec-modal-ikeprop', 'aes256-sha256-modp2048,aes128-sha256-modp2048,default');
+  safeSetVal('ipsec-modal-dhgroup', 'modp2048');
+  safeSetVal('ipsec-modal-ikekeylife', '86400');
+  safeSetVal('ipsec-modal-localid', '');
+  safeSetVal('ipsec-modal-remoteid', '');
+  safeSetVal('ipsec-modal-dpd', 'on-demand');
 
   // Phase 2 Fields
-  document.getElementById('ipsec-modal-p2name').value = `tunnel-${(state.ipsecTunnels || []).length + 1}_p2`;
-  document.getElementById('ipsec-modal-espprop').value = 'aes256-sha256-modp2048,aes128-sha256-modp2048,default';
-  document.getElementById('ipsec-modal-pfsgroup').value = 'modp2048';
-  document.getElementById('ipsec-modal-autostart').checked = true;
-  document.getElementById('ipsec-modal-disabled').checked = false;
+  safeSetVal('ipsec-modal-p2name', `tunnel-${(state.ipsecTunnels || []).length + 1}_p2`);
+  safeSetVal('ipsec-modal-espkeylife', '28800');
+  safeSetVal('ipsec-modal-espprop', 'aes256-sha256-modp2048,aes128-sha256-modp2048,default');
+  safeSetVal('ipsec-modal-pfsgroup', 'modp2048');
+  safeSetChecked('ipsec-modal-autostart', true);
+  safeSetChecked('ipsec-modal-disabled', false);
 
   // Clear & Populate default dynamic subnets
   const localContainer = document.getElementById('ipsec-modal-local-subnets-container');
@@ -1986,33 +2018,42 @@ function openAddIPSecModal() {
   }
 
   switchIpsecModalTab('p1');
-  document.getElementById('ipsec-modal').classList.remove('hidden');
+  modal.classList.remove('hidden');
 }
 
 function openEditIPSecModal(name) {
+  const modal = document.getElementById('ipsec-modal');
+  if (!modal) return;
+
   const conn = (state.ipsecTunnels || []).find(c => c.name === name);
   if (!conn) return;
 
-  document.getElementById('ipsec-modal-title').innerText = `Edit IPSec Tunnel: ${name}`;
+  const title = document.getElementById('ipsec-modal-title');
+  if (title) title.innerText = `Edit IPSec Tunnel: ${name}`;
   
   // Phase 1 Fields
-  document.getElementById('ipsec-modal-name').value = conn.name;
-  document.getElementById('ipsec-modal-name').readOnly = true;
-  document.getElementById('ipsec-modal-ikeversion').value = conn.ike_version || 'ikev2';
-  document.getElementById('ipsec-modal-remotegw').value = conn.remote_addrs || '';
-  document.getElementById('ipsec-modal-psk').value = conn.preshared_key || '';
-  document.getElementById('ipsec-modal-ikeprop').value = conn.ike_proposals || 'aes256-sha256-modp2048,default';
-  document.getElementById('ipsec-modal-ikekeylife').value = conn.ike_keylife || 86400;
-  document.getElementById('ipsec-modal-localid').value = conn.local_id || '';
-  document.getElementById('ipsec-modal-remoteid').value = conn.remote_id || '';
-  document.getElementById('ipsec-modal-dpd').value = conn.dpd || 'on-demand';
+  safeSetVal('ipsec-modal-name', conn.name);
+  const nameEl = document.getElementById('ipsec-modal-name');
+  if (nameEl) nameEl.readOnly = true;
+  safeSetVal('ipsec-modal-ikeversion', conn.ike_version || 'ikev2');
+  safeSetVal('ipsec-modal-ikever', conn.ike_version || 'ikev2');
+  safeSetVal('ipsec-modal-remotegw', conn.remote_addrs || '');
+  safeSetVal('ipsec-modal-localaddrs', conn.local_addrs || '');
+  safeSetVal('ipsec-modal-comments', conn.comment || '');
+  safeSetVal('ipsec-modal-psk', conn.preshared_key || '');
+  safeSetVal('ipsec-modal-ikeprop', conn.ike_proposals || 'aes256-sha256-modp2048,default');
+  safeSetVal('ipsec-modal-ikekeylife', conn.ike_keylife || 86400);
+  safeSetVal('ipsec-modal-localid', conn.local_id || '');
+  safeSetVal('ipsec-modal-remoteid', conn.remote_id || '');
+  safeSetVal('ipsec-modal-dpd', conn.dpd || 'on-demand');
 
   // Phase 2 Fields
-  document.getElementById('ipsec-modal-p2name').value = conn.phase2_name || `${conn.name}_p2`;
-  document.getElementById('ipsec-modal-espprop').value = conn.esp_proposals || 'aes256-sha256-modp2048,default';
-  document.getElementById('ipsec-modal-pfsgroup').value = conn.pfs_group || 'modp2048';
-  document.getElementById('ipsec-modal-autostart').checked = conn.auto_start ?? true;
-  document.getElementById('ipsec-modal-disabled').checked = !!conn.disabled;
+  safeSetVal('ipsec-modal-p2name', conn.phase2_name || `${conn.name}_p2`);
+  safeSetVal('ipsec-modal-espkeylife', conn.esp_keylife || 28800);
+  safeSetVal('ipsec-modal-espprop', conn.esp_proposals || 'aes256-sha256-modp2048,default');
+  safeSetVal('ipsec-modal-pfsgroup', conn.pfs_group || 'modp2048');
+  safeSetChecked('ipsec-modal-autostart', conn.auto_start ?? true);
+  safeSetChecked('ipsec-modal-disabled', !!conn.disabled);
 
   // Populate dynamic subnets
   const localContainer = document.getElementById('ipsec-modal-local-subnets-container');
@@ -2031,30 +2072,38 @@ function openEditIPSecModal(name) {
   }
 
   switchIpsecModalTab('p1');
-  document.getElementById('ipsec-modal').classList.remove('hidden');
+  modal.classList.remove('hidden');
 }
 
 function closeAddIPSecModal() {
-  document.getElementById('ipsec-modal').classList.add('hidden');
+  const modal = document.getElementById('ipsec-modal');
+  if (modal) modal.classList.add('hidden');
 }
 
 async function submitSaveIPSec(e) {
-  e.preventDefault();
-  const name = document.getElementById('ipsec-modal-name').value.trim();
-  const ikeVersion = document.getElementById('ipsec-modal-ikeversion').value;
-  const remotegw = document.getElementById('ipsec-modal-remotegw').value.trim();
-  const psk = document.getElementById('ipsec-modal-psk').value;
-  const ikeProposals = document.getElementById('ipsec-modal-ikeprop').value.trim();
-  const ikeKeylife = parseInt(document.getElementById('ipsec-modal-ikekeylife').value, 10) || 86400;
-  const localId = document.getElementById('ipsec-modal-localid').value.trim();
-  const remoteId = document.getElementById('ipsec-modal-remoteid').value.trim();
-  const dpd = document.getElementById('ipsec-modal-dpd').value;
-
-  const phase2Name = document.getElementById('ipsec-modal-p2name').value.trim() || `${name}_p2`;
-  const espProposals = document.getElementById('ipsec-modal-espprop').value.trim();
-  const pfsGroup = document.getElementById('ipsec-modal-pfsgroup').value;
-  const autostart = document.getElementById('ipsec-modal-autostart').checked;
-  const disabled = document.getElementById('ipsec-modal-disabled').checked;
+  if (e) e.preventDefault();
+  const name = safeGetVal('ipsec-modal-name').trim();
+  if (!name) {
+    showToast('Error', 'Tunnel name is required', 'error');
+    return;
+  }
+  const ikeVersion = safeGetVal('ipsec-modal-ikeversion') || safeGetVal('ipsec-modal-ikever', 'ikev2');
+  const remotegw = safeGetVal('ipsec-modal-remotegw').trim();
+  const localAddrs = safeGetVal('ipsec-modal-localaddrs').trim() || '%any';
+  const comments = safeGetVal('ipsec-modal-comments').trim();
+  const psk = safeGetVal('ipsec-modal-psk');
+  const ikeProposals = safeGetVal('ipsec-modal-ikeprop', 'aes256-sha256-modp2048,default').trim();
+  const ikeKeylife = parseInt(safeGetVal('ipsec-modal-ikekeylife', '86400'), 10) || 86400;
+  const localId = safeGetVal('ipsec-modal-localid').trim();
+  const remoteId = safeGetVal('ipsec-modal-remoteid').trim();
+  const dpd = safeGetVal('ipsec-modal-dpd', 'on-demand');
+
+  const phase2Name = safeGetVal('ipsec-modal-p2name').trim() || `${name}_p2`;
+  const espProposals = safeGetVal('ipsec-modal-espprop', 'aes256-sha256-modp2048,default').trim();
+  const espKeylife = parseInt(safeGetVal('ipsec-modal-espkeylife', '28800'), 10) || 28800;
+  const pfsGroup = safeGetVal('ipsec-modal-pfsgroup', 'modp2048');
+  const autostart = document.getElementById('ipsec-modal-autostart')?.checked ?? true;
+  const disabled = document.getElementById('ipsec-modal-disabled')?.checked ?? false;
 
   // Scrape dynamic local and remote subnets
   const localInputs = document.querySelectorAll('#ipsec-modal-local-subnets-container input');
@@ -2077,8 +2126,9 @@ async function submitSaveIPSec(e) {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         name,
+        comment: comments,
         ike_version: ikeVersion,
-        local_addrs: '%any',
+        local_addrs: localAddrs,
         remote_addrs: remotegw,
         preshared_key: psk,
         ike_proposals: ikeProposals,
@@ -2088,6 +2138,7 @@ async function submitSaveIPSec(e) {
         dpd: dpd,
         phase2_name: phase2Name,
         esp_proposals: espProposals,
+        esp_keylife: espKeylife,
         pfs_group: pfsGroup,
         pfs: pfsGroup !== 'none',
         local_subnets: localSubnets,

internal/web/static/index.html

@@ -3697,7 +3697,7 @@
             <div class="grid grid-cols-3 gap-3">
               <div>
                 <label class="block font-semibold text-slate-300 mb-1">IKE Version</label>
-                <select id="ipsec-modal-ikever" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
+                <select id="ipsec-modal-ikeversion" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
                   <option value="ikev2" selected>IKEv2 (Recommended)</option>
                   <option value="ikev1">IKEv1</option>
                 </select>