feat(ui): add ACL graphical configuration interface (#1815)

easytier-web/frontend-lib/src/components/Config.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { AutoComplete, Button, Checkbox, Dialog, Divider, InputNumber, InputText, Panel, Password, SelectButton, ToggleButton } from 'primevue'
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
-import { Checkbox, InputText, InputNumber, AutoComplete, Panel, Divider, ToggleButton, Button, Password, Dialog } from 'primevue'
 import {
   addRow,
   DEFAULT_NETWORK_CONFIG,
@@ -11,6 +11,7 @@ import {
 } from '../types/network'
 import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import AclManager from './acl/AclManager.vue'
 import UrlListInput from './UrlListInput.vue'
 
 const props = defineProps<{
@@ -488,6 +489,18 @@ watch(() => curNetwork.value, syncNormalizedNetwork, { immediate: true, deep: fa
             </div>
           </Panel>
 
+          <Divider />
+
+          <Panel :header="t('acl.title')" toggleable collapsed>
+            <div v-if="curNetwork.acl" class="flex flex-col gap-y-2">
+              <AclManager v-model="curNetwork.acl" />
+            </div>
+            <div v-else class="flex justify-center p-4">
+              <Button :label="t('acl.enabled')"
+                @click="curNetwork.acl = { acl_v1: { chains: [], group: { declares: [], members: [] } } }" />
+            </div>
+          </Panel>
+
           <div class="flex pt-6 justify-center">
             <Button :label="t('run_network')" icon="pi pi-arrow-right" icon-pos="right" :disabled="configInvalid"
               @click="$emit('runNetwork', curNetwork)" />

easytier-web/frontend-lib/src/components/acl/AclChainEditor.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { Button, Column, DataTable, Divider, InputText, Select, SelectButton, ToggleButton } from 'primevue'
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { AclAction, AclChain, AclChainType, AclProtocol, AclRule } from '../../types/network'
+import AclRuleDialog from './AclRuleDialog.vue'
+
+const props = defineProps<{
+  groupNames?: string[]
+}>()
+
+const chain = defineModel<AclChain>({ required: true })
+
+const { t } = useI18n()
+
+watch(() => chain.value.rules, (newRules) => {
+  if (!newRules) return
+  const isSorted = newRules.every((rule, i) => i === 0 || (rule.priority || 0) <= (newRules[i - 1].priority || 0))
+  if (!isSorted) {
+    chain.value.rules.sort((a, b) => (b.priority || 0) - (a.priority || 0))
+  }
+}, { deep: true, immediate: true })
+
+const actionOptions = [
+  { label: () => t('acl.allow'), value: AclAction.Allow },
+  { label: () => t('acl.drop'), value: AclAction.Drop },
+]
+
+const chainTypeOptions = [
+  { label: () => t('acl.inbound'), value: AclChainType.Inbound },
+  { label: () => t('acl.outbound'), value: AclChainType.Outbound },
+  { label: () => t('acl.forward'), value: AclChainType.Forward },
+]
+
+const editingRule = ref<AclRule | null>(null)
+const editingRuleIndex = ref(-1)
+const showRuleDialog = ref(false)
+
+function getProtocolLabel(proto: AclProtocol) {
+  switch (proto) {
+    case AclProtocol.Any: return t('acl.any')
+    case AclProtocol.TCP: return 'TCP'
+    case AclProtocol.UDP: return 'UDP'
+    case AclProtocol.ICMP: return 'ICMP'
+    case AclProtocol.ICMPv6: return 'ICMPv6'
+    default: return t('event.Unknown')
+  }
+}
+
+function getActionLabel(action: AclAction) {
+  switch (action) {
+    case AclAction.Allow: return t('acl.allow')
+    case AclAction.Drop: return t('acl.drop')
+    default: return t('event.Unknown')
+  }
+}
+
+function addRule() {
+  editingRuleIndex.value = -1
+  editingRule.value = {
+    name: '',
+    description: '',
+    priority: chain.value.rules.length,
+    enabled: true,
+    protocol: AclProtocol.Any,
+    ports: [],
+    source_ips: [],
+    destination_ips: [],
+    source_ports: [],
+    action: AclAction.Allow,
+    rate_limit: 0,
+    burst_limit: 0,
+    stateful: false,
+    source_groups: [],
+    destination_groups: [],
+  }
+  showRuleDialog.value = true
+}
+
+function editRule(index: number) {
+  editingRuleIndex.value = index
+  editingRule.value = JSON.parse(JSON.stringify(chain.value.rules[index]))
+  showRuleDialog.value = true
+}
+
+function deleteRule(index: number) {
+  chain.value.rules.splice(index, 1)
+}
+
+function saveRule(rule: AclRule) {
+  if (editingRuleIndex.value === -1) {
+    chain.value.rules.push(rule)
+  } else {
+    chain.value.rules[editingRuleIndex.value] = rule
+  }
+  chain.value.rules.sort((a, b) => (b.priority || 0) - (a.priority || 0))
+}
+
+function onRowReorder(event: any) {
+  chain.value.rules = event.value
+  // Update priorities based on new order (higher priority at top)
+  chain.value.rules.forEach((rule, index) => {
+    rule.priority = chain.value.rules.length - index - 1
+  })
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <!-- Chain Metadata Section -->
+    <div
+      class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-900 dark:border-gray-700">
+      <div class="flex flex-col gap-2">
+        <label class="font-bold text-sm">{{ t('acl.chain.name') }}</label>
+        <InputText v-model="chain.name" size="small" />
+      </div>
+      <div class="flex flex-col gap-2">
+        <label class="font-bold text-sm">{{ t('acl.rule.description') }}</label>
+        <InputText v-model="chain.description" size="small" />
+      </div>
+
+      <div class="flex items-center gap-6 col-span-full border-t pt-2 mt-2 dark:border-gray-700">
+        <div class="flex items-center gap-2">
+          <label class="font-bold text-sm">{{ t('acl.rule.enabled') }}</label>
+          <ToggleButton v-model="chain.enabled" on-icon="pi pi-check" off-icon="pi pi-times"
+            :on-label="t('web.common.enable')" :off-label="t('web.common.disable')" class="w-24" />
+        </div>
+        <div class="flex items-center gap-2">
+          <label class="font-bold text-sm">{{ t('acl.chain.type') }}</label>
+          <Select v-model="chain.chain_type" :options="chainTypeOptions" :option-label="opt => opt.label()"
+            option-value="value" size="small" class="w-40" />
+        </div>
+        <div class="flex items-center gap-2 ml-auto">
+          <label class="font-bold text-sm">{{ t('acl.default_action') }}</label>
+          <SelectButton v-model="chain.default_action" :options="actionOptions" :option-label="opt => opt.label()"
+            option-value="value" :allow-empty="false" />
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-row items-center gap-4 justify-between">
+      <h4 class="text-md font-bold">{{ t('acl.rules') }}</h4>
+      <Button icon="pi pi-plus" :label="t('acl.add_rule')" severity="success" size="small" @click="addRule" />
+    </div>
+
+    <DataTable :value="chain.rules" @row-reorder="onRowReorder" responsiveLayout="scroll">
+      <Column rowReorder headerStyle="width: 3rem" />
+      <Column field="enabled" :header="t('acl.rule.enabled')">
+        <template #body="{ data }">
+          <i class="pi" :class="data.enabled ? 'pi-check-circle text-green-500' : 'pi-times-circle text-red-500'"></i>
+        </template>
+      </Column>
+      <Column field="name" :header="t('acl.rule.name')" />
+      <Column :header="t('acl.match')">
+        <template #body="{ data }">
+          <div class="flex flex-col gap-2 py-1">
+            <div class="flex items-center gap-2">
+              <span
+                class="px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded-md text-[10px] font-bold uppercase tracking-wider">
+                {{ getProtocolLabel(data.protocol) }}
+              </span>
+            </div>
+
+            <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3">
+              <div class="flex items-center gap-1.5 min-w-0">
+                <span class="text-[10px] font-bold text-gray-400 uppercase w-7">Src</span>
+                <div class="flex flex-wrap gap-1 items-center overflow-hidden">
+                  <span v-for="ip in data.source_ips" :key="ip"
+                    class="font-mono text-xs bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded">{{ ip }}</span>
+                  <span v-for="grp in data.source_groups" :key="grp"
+                    class="text-xs font-bold text-purple-600 dark:text-purple-400">@{{ grp }}</span>
+                  <span v-if="data.source_ports.length" class="text-xs text-blue-600 dark:text-blue-400 font-mono">:{{
+                    data.source_ports.join(',') }}</span>
+                  <span v-if="!data.source_ips.length && !data.source_groups.length" class="text-gray-400">*</span>
+                </div>
+              </div>
+
+              <i class="pi pi-arrow-right hidden sm:block text-gray-300 text-xs"></i>
+              <Divider layout="horizontal" class="sm:hidden my-1" />
+
+              <div class="flex items-center gap-1.5 min-w-0">
+                <span class="text-[10px] font-bold text-gray-400 uppercase w-7">Dst</span>
+                <div class="flex flex-wrap gap-1 items-center overflow-hidden">
+                  <span v-for="ip in data.destination_ips" :key="ip"
+                    class="font-mono text-xs bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded">{{ ip }}</span>
+                  <span v-for="grp in data.destination_groups" :key="grp"
+                    class="text-xs font-bold text-purple-600 dark:text-purple-400">@{{ grp }}</span>
+                  <span v-if="data.ports.length" class="text-xs text-blue-600 dark:text-blue-400 font-mono">:{{
+                    data.ports.join(',') }}</span>
+                  <span v-if="!data.destination_ips.length && !data.destination_groups.length"
+                    class="text-gray-400">*</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </Column>
+      <Column field="action" :header="t('acl.rule.action')">
+        <template #body="{ data }">
+          <span :class="data.action === AclAction.Allow ? 'text-green-600' : 'text-red-600 font-bold'">
+            {{ getActionLabel(data.action) }}
+          </span>
+        </template>
+      </Column>
+      <Column :header="t('web.common.edit')">
+        <template #body="{ index }">
+          <div class="flex gap-2">
+            <Button icon="pi pi-pencil" text rounded @click="editRule(index)" />
+            <Button icon="pi pi-trash" severity="danger" text rounded @click="deleteRule(index)" />
+          </div>
+        </template>
+      </Column>
+    </DataTable>
+
+    <AclRuleDialog v-if="showRuleDialog && editingRule" v-model:visible="showRuleDialog" v-model:rule="editingRule"
+      :group-names="props.groupNames" @save="saveRule" />
+  </div>
+</template>

easytier-web/frontend-lib/src/components/acl/AclGroupEditor.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { Button, Column, DataTable, Dialog, InputText, MultiSelect, Password } from 'primevue';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { GroupIdentity, GroupInfo } from '../../types/network';
+
+const props = defineProps<{
+  groupNames?: string[]
+}>()
+
+const group = defineModel<GroupInfo>({ required: true })
+const emit = defineEmits(['rename-group'])
+
+const { t } = useI18n()
+
+const editingGroup = ref<GroupIdentity | null>(null)
+const editingGroupIndex = ref(-1)
+const showGroupDialog = ref(false)
+const oldGroupName = ref('')
+
+function addGroup() {
+  editingGroupIndex.value = -1
+  editingGroup.value = {
+    group_name: '',
+    group_secret: '',
+  }
+  oldGroupName.value = ''
+  showGroupDialog.value = true
+}
+
+function editGroup(index: number) {
+  editingGroupIndex.value = index
+  editingGroup.value = JSON.parse(JSON.stringify(group.value.declares[index]))
+  oldGroupName.value = editingGroup.value?.group_name || ''
+  showGroupDialog.value = true
+}
+
+function deleteGroup(index: number) {
+  group.value.declares.splice(index, 1)
+}
+
+function saveGroup() {
+  if (!editingGroup.value) return
+  const newName = editingGroup.value.group_name
+
+  if (editingGroupIndex.value === -1) {
+    group.value.declares.push(editingGroup.value)
+  } else {
+    if (oldGroupName.value && oldGroupName.value !== newName) {
+      // Sync in members
+      group.value.members = group.value.members.map(m => m === oldGroupName.value ? newName : m)
+      // Notify parent to sync in rules
+      emit('rename-group', { oldName: oldGroupName.value, newName })
+    }
+    group.value.declares[editingGroupIndex.value] = editingGroup.value
+  }
+  showGroupDialog.value = false
+}
+
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div class="flex flex-col gap-2">
+      <div class="flex justify-between items-center">
+        <div class="flex flex-col">
+          <label class="font-bold text-lg">{{ t('acl.group.declares') }}</label>
+          <small class="text-gray-500">{{ t('acl.group.help') }}</small>
+        </div>
+        <Button icon="pi pi-plus" :label="t('web.common.add')" severity="success" @click="addGroup" />
+      </div>
+
+      <DataTable :value="group.declares" responsiveLayout="scroll">
+        <Column field="group_name" :header="t('acl.group.name')" />
+        <Column field="group_secret" :header="t('acl.group.secret')">
+          <template #body="{ data }">
+            <Password v-model="data.group_secret" :feedback="false" toggleMask readonly plain class="w-full" />
+          </template>
+        </Column>
+        <Column :header="t('web.common.edit')" headerStyle="width: 8rem">
+          <template #body="{ index }">
+            <div class="flex gap-2">
+              <Button icon="pi pi-pencil" text rounded @click="editGroup(index)" />
+              <Button icon="pi pi-trash" severity="danger" text rounded @click="deleteGroup(index)" />
+            </div>
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <label class="font-bold text-lg">{{ t('acl.group.members') }}</label>
+      <MultiSelect v-model="group.members" :options="props.groupNames" multiple fluid filter
+        :placeholder="t('acl.group.members')" />
+    </div>
+
+    <!-- Group Identity Dialog -->
+    <Dialog v-model:visible="showGroupDialog" modal :header="t('acl.groups')" :style="{ width: '400px' }">
+      <div v-if="editingGroup" class="flex flex-col gap-4 pt-2">
+        <div class="flex flex-col gap-2">
+          <label class="font-bold">{{ t('acl.group.name') }}</label>
+          <InputText v-model="editingGroup.group_name" fluid />
+        </div>
+        <div class="flex flex-col gap-2">
+          <label class="font-bold">{{ t('acl.group.secret') }}</label>
+          <Password v-model="editingGroup.group_secret" :feedback="false" toggleMask fluid />
+        </div>
+      </div>
+      <template #footer>
+        <Button :label="t('web.common.cancel')" icon="pi pi-times" @click="showGroupDialog = false" text />
+        <Button :label="t('web.common.save')" icon="pi pi-save" @click="saveGroup" />
+      </template>
+    </Dialog>
+  </div>
+</template>

easytier-web/frontend-lib/src/components/acl/AclManager.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { Button, Menu, Tab, TabList, TabPanel, TabPanels, Tabs } from 'primevue'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Acl, AclAction, AclChainType } from '../../types/network'
+import AclChainEditor from './AclChainEditor.vue'
+import AclGroupEditor from './AclGroupEditor.vue'
+
+const acl = defineModel<Acl>({ required: true })
+
+const { t } = useI18n()
+
+const activeTab = ref(0)
+const menu = ref()
+
+const addMenuModel = ref([
+  { label: () => t('acl.inbound'), command: () => addChain(AclChainType.Inbound) },
+  { label: () => t('acl.outbound'), command: () => addChain(AclChainType.Outbound) },
+  { label: () => t('acl.forward'), command: () => addChain(AclChainType.Forward) },
+])
+
+function addChain(type: AclChainType) {
+  if (!acl.value.acl_v1) {
+    acl.value.acl_v1 = { chains: [], group: { declares: [], members: [] } }
+  }
+
+  let defaultName = ''
+  switch (type) {
+    case AclChainType.Inbound: defaultName = 'Inbound'; break;
+    case AclChainType.Outbound: defaultName = 'Outbound'; break;
+    case AclChainType.Forward: defaultName = 'Forward'; break;
+  }
+
+  acl.value.acl_v1.chains.push({
+    name: defaultName,
+    chain_type: type,
+    description: '',
+    enabled: true,
+    rules: [],
+    default_action: AclAction.Allow
+  })
+
+  activeTab.value = acl.value.acl_v1.chains.length - 1
+}
+
+function removeChain(index: number) {
+  if (confirm(t('acl.delete_chain_confirm'))) {
+    acl.value.acl_v1?.chains.splice(index, 1)
+    if (activeTab.value >= (acl.value.acl_v1?.chains.length || 0)) {
+      activeTab.value = Math.max(0, (acl.value.acl_v1?.chains.length || 0))
+    }
+  }
+}
+
+function handleRenameGroup({ oldName, newName }: { oldName: string, newName: string }) {
+  if (!acl.value.acl_v1) return
+  acl.value.acl_v1.chains.forEach(chain => {
+    chain.rules.forEach(rule => {
+      rule.source_groups = rule.source_groups.map(g => g === oldName ? newName : g)
+      rule.destination_groups = rule.destination_groups.map(g => g === oldName ? newName : g)
+    })
+  })
+}
+
+const groupNames = computed(() => {
+  return acl.value.acl_v1?.group?.declares.map(g => g.group_name) || []
+})
+
+const tabs = computed(() => {
+  const chains = acl.value.acl_v1?.chains || []
+  const result: { type: string, label: string, index: number }[] = []
+
+  if (chains.length === 0) {
+    result.push({ type: 'empty', label: t('acl.chains'), index: 0 })
+  }
+  else {
+    chains.forEach((c, index) => {
+      result.push({
+        type: 'chain',
+        label: c.name || `Chain ${index}`,
+        index
+      })
+    })
+  }
+
+  result.push({ type: 'groups', label: t('acl.groups'), index: result.length })
+  return result
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <Tabs v-model:value="activeTab">
+      <div class="flex items-center border-b border-surface-200 dark:border-surface-700">
+        <TabList class="flex-grow min-w-0 overflow-x-auto" style="border-bottom: none;">
+          <Tab v-for="tab in tabs" :key="tab.type + tab.index" :value="tab.index">
+            <div class="flex items-center gap-2 whitespace-nowrap">
+              {{ tab.label }}
+              <Button v-if="tab.type === 'chain'" icon="pi pi-times" severity="danger" text rounded size="small"
+                class="w-6 h-6 p-0" @click.stop="removeChain(tab.index)" />
+            </div>
+          </Tab>
+        </TabList>
+        <div
+          class="flex-shrink-0 flex items-center px-2 bg-white dark:bg-gray-900 border-l border-surface-100 dark:border-surface-800">
+          <Button icon="pi pi-plus" text rounded size="small" class="w-8 h-8 p-0"
+            @click="(event) => menu.toggle(event)" />
+          <Menu ref="menu" :model="addMenuModel" :popup="true" />
+        </div>
+      </div>
+      <TabPanels>
+        <TabPanel v-for="tab in tabs" :key="'panel' + tab.type + tab.index" :value="tab.index">
+          <!-- Empty State within TabPanel -->
+          <div v-if="tab.type === 'empty'"
+            class="py-8 flex flex-col items-center justify-center border-2 border-dashed border-surface-200 rounded-lg bg-surface-50 dark:bg-surface-900 dark:border-surface-700">
+            <i class="pi pi-shield text-5xl mb-4 text-primary" />
+            <div class="text-xl font-bold mb-2">{{ t('acl.chains') }}</div>
+            <p class="text-surface-500 mb-8 text-center max-w-sm px-4">{{ t('acl.help') }}</p>
+            <div class="flex flex-wrap gap-3 justify-center">
+              <Button :label="t('acl.inbound')" icon="pi pi-arrow-down-left" @click="addChain(AclChainType.Inbound)" />
+              <Button :label="t('acl.outbound')" icon="pi pi-arrow-up-right" @click="addChain(AclChainType.Outbound)" />
+              <Button :label="t('acl.forward')" icon="pi pi-directions" @click="addChain(AclChainType.Forward)" />
+            </div>
+          </div>
+
+          <!-- Rule Chains -->
+          <div v-if="tab.type === 'chain' && acl.acl_v1 && acl.acl_v1.chains[tab.index]" class="py-4">
+            <AclChainEditor v-model="acl.acl_v1.chains[tab.index]" :group-names="groupNames" />
+          </div>
+
+          <!-- Group Management -->
+          <div v-if="tab.type === 'groups'" class="py-4">
+            <template v-if="acl.acl_v1">
+              <AclGroupEditor v-if="acl.acl_v1.group" v-model="acl.acl_v1.group" :group-names="groupNames"
+                @rename-group="handleRenameGroup" />
+              <div v-else class="flex justify-center p-4">
+                <Button :label="t('web.common.add') + ' ' + t('acl.groups')"
+                  @click="acl.acl_v1.group = { declares: [], members: [] }" />
+              </div>
+            </template>
+            <div v-else class="flex justify-center p-4">
+              <Button :label="t('acl.enabled')"
+                @click="acl.acl_v1 = { chains: [], group: { declares: [], members: [] } }" />
+            </div>
+          </div>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </div>
+</template>

easytier-web/frontend-lib/src/components/acl/AclRuleDialog.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { AutoComplete, Button, Checkbox, Dialog, InputNumber, InputText, MultiSelect, Panel, SelectButton, ToggleButton } from 'primevue';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { AclAction, AclProtocol, AclRule } from '../../types/network';
+
+const props = defineProps<{
+  visible: boolean
+  groupNames?: string[]
+}>()
+
+const emit = defineEmits(['update:visible', 'save'])
+
+const rule = defineModel<AclRule>('rule', { required: true })
+
+const { t } = useI18n()
+
+const protocolOptions = [
+  { label: () => t('acl.any'), value: AclProtocol.Any },
+  { label: 'TCP', value: AclProtocol.TCP },
+  { label: 'UDP', value: AclProtocol.UDP },
+  { label: 'ICMP', value: AclProtocol.ICMP },
+  { label: 'ICMPv6', value: AclProtocol.ICMPv6 },
+]
+
+const actionOptions = [
+  { label: () => t('acl.allow'), value: AclAction.Allow },
+  { label: () => t('acl.drop'), value: AclAction.Drop },
+]
+
+const showPorts = computed(() => {
+  return rule.value.protocol === AclProtocol.TCP || rule.value.protocol === AclProtocol.UDP || rule.value.protocol === AclProtocol.Any
+})
+
+function close() {
+  emit('update:visible', false)
+}
+
+function save() {
+  emit('save', rule.value)
+  close()
+}
+
+// Suggestions for IP/Port AutoComplete
+const genericSuggestions = ref<string[]>([])
+</script>
+
+<template>
+  <Dialog :visible="visible" @update:visible="emit('update:visible', $event)" modal :header="t('acl.edit_rule')"
+    :style="{ width: '90vw', maxWidth: '600px' }">
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-row gap-4 items-center">
+        <div class="flex flex-col gap-2 grow">
+          <label class="font-bold">{{ t('acl.rule.name') }}</label>
+          <InputText v-model="rule.name" fluid />
+        </div>
+        <div class="flex flex-col gap-2">
+          <label class="font-bold">{{ t('acl.rule.enabled') }}</label>
+          <ToggleButton v-model="rule.enabled" on-icon="pi pi-check" off-icon="pi pi-times"
+            :on-label="t('web.common.enable')" :off-label="t('web.common.disable')" class="w-24" />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label class="font-bold">{{ t('acl.rule.description') }}</label>
+        <InputText v-model="rule.description" fluid />
+      </div>
+
+      <div class="flex flex-row gap-4 flex-wrap">
+        <div class="flex flex-col gap-2 grow">
+          <label class="font-bold">{{ t('acl.rule.action') }}</label>
+          <SelectButton v-model="rule.action" :options="actionOptions" :option-label="opt => opt.label()"
+            option-value="value" :allow-empty="false" />
+        </div>
+        <div class="flex flex-col gap-2 grow">
+          <label class="font-bold">{{ t('acl.rule.protocol') }}</label>
+          <SelectButton v-model="rule.protocol" :options="protocolOptions"
+            :option-label="opt => typeof opt.label === 'function' ? opt.label() : opt.label" option-value="value"
+            :allow-empty="false" />
+        </div>
+      </div>
+
+      <Panel :header="t('acl.rules')" toggleable>
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-col gap-2">
+            <label class="font-bold">{{ t('acl.rule.src_ips') }}</label>
+            <AutoComplete v-model="rule.source_ips" multiple fluid :suggestions="genericSuggestions"
+              @complete="genericSuggestions = [$event.query]"
+              :placeholder="t('chips_placeholder', ['10.126.126.0/24'])" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <label class="font-bold">{{ t('acl.rule.dst_ips') }}</label>
+            <AutoComplete v-model="rule.destination_ips" multiple fluid :suggestions="genericSuggestions"
+              @complete="genericSuggestions = [$event.query]"
+              :placeholder="t('chips_placeholder', ['10.126.126.2/32'])" />
+          </div>
+
+          <div v-if="showPorts" class="flex flex-row gap-4 flex-wrap">
+            <div class="flex flex-col gap-2 grow">
+              <label class="font-bold">{{ t('acl.rule.src_ports') }}</label>
+              <AutoComplete v-model="rule.source_ports" multiple fluid :suggestions="genericSuggestions"
+                @complete="genericSuggestions = [$event.query]" placeholder="e.g. 80, 1000-2000" />
+            </div>
+            <div class="flex flex-col gap-2 grow">
+              <label class="font-bold">{{ t('acl.rule.dst_ports') }}</label>
+              <AutoComplete v-model="rule.ports" multiple fluid :suggestions="genericSuggestions"
+                @complete="genericSuggestions = [$event.query]" placeholder="e.g. 80, 1000-2000" />
+            </div>
+          </div>
+        </div>
+      </Panel>
+
+      <Panel :header="t('advanced_settings')" toggleable collapsed>
+        <div class="flex flex-col gap-4">
+          <div class="flex items-center gap-2">
+            <Checkbox v-model="rule.stateful" :binary="true" inputId="rule-stateful" />
+            <label for="rule-stateful" class="font-bold">{{ t('acl.rule.stateful') }}</label>
+          </div>
+
+          <div class="flex flex-row gap-4 flex-wrap">
+            <div class="flex flex-col gap-2 grow">
+              <label class="font-bold">{{ t('acl.rule.rate_limit') }}</label>
+              <InputNumber v-model="rule.rate_limit" :min="0" placeholder="0 = no limit" fluid />
+            </div>
+            <div class="flex flex-col gap-2 grow">
+              <label class="font-bold">{{ t('acl.rule.burst_limit') }}</label>
+              <InputNumber v-model="rule.burst_limit" :min="0" placeholder="0 = no limit" fluid />
+            </div>
+          </div>
+
+          <div class="flex flex-col gap-2">
+            <label class="font-bold">{{ t('acl.rule.src_groups') }}</label>
+            <MultiSelect v-model="rule.source_groups" :options="props.groupNames" multiple fluid filter
+              :placeholder="t('acl.rule.src_groups')" />
+          </div>
+          <div class="flex flex-col gap-2">
+            <label class="font-bold">{{ t('acl.rule.dst_groups') }}</label>
+            <MultiSelect v-model="rule.destination_groups" :options="props.groupNames" multiple fluid filter
+              :placeholder="t('acl.rule.dst_groups')" />
+          </div>
+        </div>
+      </Panel>
+    </div>
+
+    <template #footer>
+      <Button :label="t('web.common.cancel')" icon="pi pi-times" @click="close" text />
+      <Button :label="t('web.common.save')" icon="pi pi-save" @click="save" />
+    </template>
+  </Dialog>
+</template>