|
|
@@ -6661,7 +6661,6 @@
|
|
|
<button type="button" onclick="switchNATRuleTab('general')" id="nat-tab-btn-general" class="nat-rule-tab-btn bg-[#182638] text-white border-t-2 border-sky-400 px-3.5 py-1.5 text-xs font-medium transition-colors">General</button>
|
|
|
<button type="button" onclick="switchNATRuleTab('advanced')" id="nat-tab-btn-advanced" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Advanced</button>
|
|
|
<button type="button" onclick="switchNATRuleTab('extra')" id="nat-tab-btn-extra" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Extra</button>
|
|
|
- <button type="button" onclick="switchNATRuleTab('action')" id="nat-tab-btn-action" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Action</button>
|
|
|
<button type="button" onclick="switchNATRuleTab('statistics')" id="nat-tab-btn-statistics" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Statistics</button>
|
|
|
</div>
|
|
|
|
|
|
@@ -6669,7 +6668,7 @@
|
|
|
<div class="flex-1 flex min-h-0 overflow-hidden">
|
|
|
|
|
|
<!-- Form Content Container (Scrollable) -->
|
|
|
- <form id="nat-rule-form" onsubmit="event.preventDefault(); applyNATRule(true);" class="flex-1 overflow-y-auto px-4 py-3 min-w-0 space-y-1">
|
|
|
+ <form id="nat-rule-form" novalidate onsubmit="event.preventDefault(); applyNATRule(true);" class="flex-1 overflow-y-auto px-4 py-3 min-w-0 space-y-1">
|
|
|
<input type="hidden" id="nat-modal-id">
|
|
|
<label class="block text-xs text-slate-300">IP family<select id="nat-modal-family" class="bg-slate-800 rounded p-2 ml-2"><option value="4">IPv4</option><option value="6">IPv6</option></select></label>
|
|
|
|
|
|
@@ -6695,13 +6694,99 @@
|
|
|
<div class="flex items-center text-xs py-1">
|
|
|
<label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Chain</label>
|
|
|
<div class="flex-1">
|
|
|
- <input id="nat-modal-chain" onchange="handleNATChainChange()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer" list="nat-chain-options" maxlength="16" required><datalist id="nat-chain-options">
|
|
|
+ <input id="nat-modal-chain" oninput="handleNATChainChange()" onchange="handleNATChainChange()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer" list="nat-chain-options" maxlength="16" required><datalist id="nat-chain-options">
|
|
|
<option value="srcnat" selected>srcnat</option>
|
|
|
<option value="dstnat">dstnat</option>
|
|
|
</datalist>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- Action -->
|
|
|
+ <div class="flex items-center text-xs py-1">
|
|
|
+ <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Action</label>
|
|
|
+ <div class="flex-1">
|
|
|
+ <select id="nat-modal-action" onchange="toggleNATActionFields()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
|
|
|
+ <option value="accept">accept</option>
|
|
|
+ <option value="add-dst-to-address-list">add dst to address list</option>
|
|
|
+ <option value="add-src-to-address-list">add src to address list</option>
|
|
|
+ <option value="dst-nat">dst-nat</option>
|
|
|
+
|
|
|
+ <option value="jump">jump</option>
|
|
|
+ <option value="log">log</option>
|
|
|
+ <option value="masquerade" selected>masquerade</option>
|
|
|
+ <option value="netmap">netmap</option>
|
|
|
+ <option value="passthrough">passthrough</option>
|
|
|
+ <option value="redirect">redirect</option>
|
|
|
+ <option value="return">return</option>
|
|
|
+
|
|
|
+
|
|
|
+ <option value="src-nat">src-nat</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- To Addresses (Shown for src-nat, dst-nat, netmap, same, socksify, endpoint-independent-nat) -->
|
|
|
+ <div id="nat-row-toaddr" class="hidden flex items-center text-xs py-1">
|
|
|
+ <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none" for="nat-modal-toaddr">To IP / address</label>
|
|
|
+ <div class="flex-1">
|
|
|
+ <input type="text" id="nat-modal-toaddr" placeholder="192.168.10.50 or WAN IP" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- To Ports (Shown for src-nat, dst-nat, redirect, masquerade, netmap, socksify, endpoint-independent-nat) -->
|
|
|
+ <div id="nat-row-toport" class="hidden flex items-center text-xs py-1">
|
|
|
+ <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none" for="nat-modal-toport">To port (optional)</label>
|
|
|
+ <div class="flex-1">
|
|
|
+ <input type="text" id="nat-modal-toport" placeholder="80 or 8080 or 1024-65535" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Jump Target (Shown when action === jump) -->
|
|
|
+ <div id="nat-action-jump-box" class="hidden flex items-center text-xs py-1">
|
|
|
+ <label class="w-36 sm:w-44 text-right pr-3.5 text-sky-300 shrink-0 select-none">Jump Target</label>
|
|
|
+ <div class="flex-1">
|
|
|
+ <input type="text" id="nat-modal-jumptarget" placeholder="chain name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Address List & Timeout (Shown when action starts with add-) -->
|
|
|
+ <div id="nat-action-addrlist-box" class="hidden space-y-1">
|
|
|
+ <div class="flex items-center text-xs py-1">
|
|
|
+ <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Address List</label>
|
|
|
+ <div class="flex-1">
|
|
|
+ <input type="text" id="nat-modal-action-addrlist" list="fw-addrlist-datalist" placeholder="list name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center text-xs py-1">
|
|
|
+ <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Timeout</label>
|
|
|
+ <div class="flex-1">
|
|
|
+ <input type="text" id="nat-modal-action-timeout" placeholder="none or 1d 00:00:00" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <hr class="border-[#213042] my-2">
|
|
|
+
|
|
|
+ <!-- Log -->
|
|
|
+ <div class="flex items-center text-xs py-1">
|
|
|
+ <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log</label>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <input type="checkbox" id="nat-modal-log" onchange="toggleNATLogPrefix()" class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Log Prefix -->
|
|
|
+ <div class="flex items-center text-xs py-1" id="nat-row-logprefix">
|
|
|
+ <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log Prefix</label>
|
|
|
+ <div class="flex-1 flex items-center gap-1.5 min-w-0">
|
|
|
+ <button type="button" onclick="toggleNATField('logprefix', true)" id="nat-plus-logprefix" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
|
|
|
+ <div id="nat-field-logprefix" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
|
|
|
+ <input type="text" id="nat-val-logprefix" placeholder="e.g. NAT_LOG: " class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
|
|
|
+ <button type="button" onclick="toggleNATField('logprefix', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- Src. Address -->
|
|
|
<div class="flex items-center text-xs py-1" id="nat-row-src">
|
|
|
<label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address</label>
|
|
|
@@ -7260,95 +7345,6 @@
|
|
|
|
|
|
</div>
|
|
|
|
|
|
- <!-- TAB PANE: ACTION (Screenshot 3) -->
|
|
|
- <div id="nat-pane-action" class="nat-rule-pane hidden space-y-2">
|
|
|
- <!-- Action -->
|
|
|
- <div class="flex items-center text-xs py-1">
|
|
|
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Action</label>
|
|
|
- <div class="flex-1">
|
|
|
- <select id="nat-modal-action" onchange="toggleNATActionFields()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
|
|
|
- <option value="accept">accept</option>
|
|
|
- <option value="add-dst-to-address-list">add dst to address list</option>
|
|
|
- <option value="add-src-to-address-list">add src to address list</option>
|
|
|
- <option value="dst-nat">dst-nat</option>
|
|
|
-
|
|
|
- <option value="jump">jump</option>
|
|
|
- <option value="log">log</option>
|
|
|
- <option value="masquerade" selected>masquerade</option>
|
|
|
- <option value="netmap">netmap</option>
|
|
|
- <option value="passthrough">passthrough</option>
|
|
|
- <option value="redirect">redirect</option>
|
|
|
- <option value="return">return</option>
|
|
|
-
|
|
|
-
|
|
|
- <option value="src-nat">src-nat</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- To Addresses (Shown for src-nat, dst-nat, netmap, same, socksify, endpoint-independent-nat) -->
|
|
|
- <div id="nat-row-toaddr" class="hidden flex items-center text-xs py-1">
|
|
|
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">To Addresses</label>
|
|
|
- <div class="flex-1">
|
|
|
- <input type="text" id="nat-modal-toaddr" placeholder="192.168.10.50 or WAN IP" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- To Ports (Shown for src-nat, dst-nat, redirect, masquerade, netmap, socksify, endpoint-independent-nat) -->
|
|
|
- <div id="nat-row-toport" class="hidden flex items-center text-xs py-1">
|
|
|
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">To Ports</label>
|
|
|
- <div class="flex-1">
|
|
|
- <input type="text" id="nat-modal-toport" placeholder="80 or 8080 or 1024-65535" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Jump Target (Shown when action === jump) -->
|
|
|
- <div id="nat-action-jump-box" class="hidden flex items-center text-xs py-1">
|
|
|
- <label class="w-36 sm:w-44 text-right pr-3.5 text-sky-300 shrink-0 select-none">Jump Target</label>
|
|
|
- <div class="flex-1">
|
|
|
- <input type="text" id="nat-modal-jumptarget" placeholder="chain name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Address List & Timeout (Shown when action starts with add-) -->
|
|
|
- <div id="nat-action-addrlist-box" class="hidden space-y-1">
|
|
|
- <div class="flex items-center text-xs py-1">
|
|
|
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Address List</label>
|
|
|
- <div class="flex-1">
|
|
|
- <input type="text" id="nat-modal-action-addrlist" list="fw-addrlist-datalist" placeholder="list name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex items-center text-xs py-1">
|
|
|
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Timeout</label>
|
|
|
- <div class="flex-1">
|
|
|
- <input type="text" id="nat-modal-action-timeout" placeholder="none or 1d 00:00:00" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <hr class="border-[#213042] my-2">
|
|
|
-
|
|
|
- <!-- Log -->
|
|
|
- <div class="flex items-center text-xs py-1">
|
|
|
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log</label>
|
|
|
- <div class="flex items-center">
|
|
|
- <input type="checkbox" id="nat-modal-log" onchange="toggleNATLogPrefix()" class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Log Prefix -->
|
|
|
- <div class="flex items-center text-xs py-1" id="nat-row-logprefix">
|
|
|
- <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log Prefix</label>
|
|
|
- <div class="flex-1 flex items-center gap-1.5 min-w-0">
|
|
|
- <button type="button" onclick="toggleNATField('logprefix', true)" id="nat-plus-logprefix" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
|
|
|
- <div id="nat-field-logprefix" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
|
|
|
- <input type="text" id="nat-val-logprefix" placeholder="e.g. NAT_LOG: " class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
|
|
|
- <button type="button" onclick="toggleNATField('logprefix', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
<!-- TAB PANE: STATISTICS (Screenshot 4) -->
|
|
|
<div id="nat-pane-statistics" class="nat-rule-pane hidden space-y-2 py-1">
|
|
|
<!-- Bytes -->
|