From d4f827bf65fb466169ef9ddbe35c5ccc0d436559 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Mon, 2 Oct 2023 15:49:08 +0000
Subject: [PATCH 01/13] feat: add port forward page

- add port forward entry in sidemenu and router
- add port forward page
- add port forward table list
- add create/edit port forward drawer
- add fa icons
- add related translations
---
 public/i18n/en/translation.json               |  44 ++-
 src/components/standalone/SideMenu.vue        |   4 +
 .../CreateOrEditPortForwardDrawer.vue         | 341 ++++++++++++++++++
 .../firewall/DeletePortForwardModal.vue       |  61 ++++
 .../standalone/firewall/PortForwardTable.vue  | 166 +++++++++
 src/lib/fontawesome.ts                        |   4 +
 src/router/index.ts                           |   5 +
 src/views/standalone/firewall/PortForward.vue | 230 ++++++++++++
 8 files changed, 854 insertions(+), 1 deletion(-)
 create mode 100644 src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
 create mode 100644 src/components/standalone/firewall/DeletePortForwardModal.vue
 create mode 100644 src/components/standalone/firewall/PortForwardTable.vue
 create mode 100644 src/views/standalone/firewall/PortForward.vue

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 4eef096b5..32b8256f0 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -54,7 +54,13 @@
     "cannot_retrieve_wan_list": "Cannot retrieve WAN list",
     "cannot_retrieve_wan_traffic": "Cannot retrieve WAN traffic",
     "register_unit_error": "Cannot register unit",
-    "cancel_registration_error": "Cannot cancel registration"
+    "cancel_registration_error": "Cannot cancel registration",
+    "cannot_delete_port_forward": "Cannot delete port forward",
+    "cannot_create_port_forward": "Cannot create port forward",
+    "cannot_edit_port_forward": "Cannot edit port forward",
+    "cannot_duplicate_port_forward": "Cannot duplicate port forward",
+    "cannot_enable_port_forward": "Cannot enable port forward",
+    "cannot_disable_port_forward": "Cannot disable port forward"
   },
   "ne_text_input": {
     "show_password": "Show password",
@@ -452,6 +458,42 @@
       "enable_logging": "Enable logging on this zone",
       "delete_zone": "Delete \"{0}\"?"
     },
+    "port_forward": {
+      "title": "Port forward",
+      "description": "Nunc quam dui, hendrerit id euismod nec, cursus nec magna. Fusce porta finibus ipsum sit amet faucibus.",
+      "add_port_forward": "Add port forward",
+      "name": "Name",
+      "source_port": "Source port",
+      "destination_port": "Destination port",
+      "protocols": "Protocols",
+      "wan_ip": "WAN IP",
+      "restrict_access_to": "Restrict Access to",
+      "status": "Status",
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "filter": "Filter",
+      "enable": "Enable",
+      "disable": "Disable",
+      "duplicate": "Duplicate",
+      "delete_port_forward": "Delete port forward",
+      "delete_port_forward_message": "You are about to delete port forward {name}",
+      "destination": "Destination",
+      "edit_port_forward": "Edit port forward",
+      "source_zone": "Source zone",
+      "destination_address": "Destination address",
+      "destination_zone": "Destination zone",
+      "advanced_settings": "Advanced settings",
+      "add_ip_address": "Add IP address",
+      "log": "Log",
+      "hairpin_nat": "Hairpin NAT",
+      "hairpin_nat_zones": "Hairpin NAT enabled on following zones",
+      "choose_zone": "Choose zone",
+      "choose_protocol": "Choose protocol",
+      "any_zone": "Any zone",
+      "any": "Any",
+      "destination_address_tooltip": "Nunc quam dui, hendrerit id euismod nec, cursus nec magna.",
+      "restrict_access_to_tooltip": "Nunc quam dui, hendrerit id euismod nec, cursus nec magna."
+    },
     "firewall": {
       "title": "Firewall"
     },
diff --git a/src/components/standalone/SideMenu.vue b/src/components/standalone/SideMenu.vue
index 50fc18916..9cac3c929 100644
--- a/src/components/standalone/SideMenu.vue
+++ b/src/components/standalone/SideMenu.vue
@@ -64,6 +64,10 @@ const navigation: Ref<any> = ref([
     to: 'firewall',
     icon: 'block-brick-fire',
     children: [
+      {
+        name: t('standalone.port_forward.title'),
+        to: 'firewall/port-forward'
+      },
       {
         name: t('standalone.zones_and_policies.title'),
         to: 'firewall/zones-and-policies'
diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
new file mode 100644
index 000000000..f61744c6a
--- /dev/null
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -0,0 +1,341 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import {
+  NeSideDrawer,
+  NeToggle,
+  NeTextInput,
+  NeCombobox,
+  NeButton,
+  NeSkeleton,
+  NeInlineNotification,
+  NeTooltip,
+  type NeComboboxOption,
+  getAxiosErrorMessage
+} from '@nethserver/vue-tailwind-lib'
+import { toRefs, ref, onMounted } from 'vue'
+import type {
+  CreateEditPortForwardPayload,
+  PortForward
+} from '@/views/standalone/firewall/PortForward.vue'
+import { watchEffect } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { ZoneType, useFirewallStore } from '@/stores/standalone/useFirewallStore'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  isShown: boolean
+  initialItem: PortForward | null
+}>()
+const { isShown } = toRefs(props)
+
+const emit = defineEmits(['close', 'add-edit-port-forward'])
+
+const firewallConfig = useFirewallStore()
+
+const showAdvancedSettings = ref(false)
+const loading = ref(true)
+const isSubmittingRequest = ref(false)
+const error = ref({
+  notificationTitle: '',
+  notificationDescription: ''
+})
+
+// Options
+const supportedProtocols = ref<NeComboboxOption[]>([])
+const supportedReflectionZones = ref<NeComboboxOption[]>([])
+const wanInterfaces = ref<NeComboboxOption[]>([])
+const supportedDestinationZones = computed<NeComboboxOption[]>(() => {
+  if (firewallConfig.loading) return []
+  else {
+    return [
+      ...firewallConfig.zones
+        .filter((zone) => zone.type() != ZoneType.WAN)
+        .map((zone) => ({
+          id: zone.name,
+          label: zone.name.toUpperCase()
+        })),
+      { id: 'any', label: t('standalone.port_forward.any_zone') }
+    ]
+  }
+})
+
+// Form fields
+const id = ref('')
+const name = ref('')
+const sourcePort = ref('')
+const destinationIP = ref('')
+const destinationPort = ref('')
+const wan = ref('')
+const enabled = ref(false)
+const restrict = ref<string[]>([])
+const protocols = ref<NeComboboxOption[]>([])
+const log = ref(false)
+const reflection = ref(false)
+const reflectionZones = ref<NeComboboxOption[]>([])
+const destinationZone = ref('')
+
+function resetForm() {
+  id.value = props.initialItem?.id ?? ''
+  name.value = props.initialItem?.name ?? ''
+  sourcePort.value = props.initialItem?.source_port ?? ''
+  destinationIP.value = props.initialItem?.dest_ip ?? ''
+  destinationPort.value = props.initialItem?.destination_port ?? ''
+  wan.value = props.initialItem?.wan ?? 'any'
+  enabled.value = props.initialItem?.enabled ?? false
+  restrict.value = props.initialItem?.restrict ?? []
+  protocols.value =
+    props.initialItem?.protocol.map((proto: string) => ({
+      id: proto,
+      label: proto.toUpperCase()
+    })) ?? []
+  log.value = props.initialItem?.log ?? false
+  reflection.value = props.initialItem?.reflection ?? false
+  reflectionZones.value =
+    props.initialItem?.reflection_zone.map((reflectionZone) => ({
+      id: reflectionZone,
+      label: reflectionZone.toUpperCase()
+    })) ?? []
+  destinationZone.value = props.initialItem?.dest ?? 'any'
+}
+
+const { t } = useI18n()
+
+async function fetchOptions() {
+  try {
+    loading.value = true
+    supportedProtocols.value = (
+      await ubusCall('ns.redirects', 'list-protocols')
+    ).data.protocols.map((proto: string) => ({
+      id: proto,
+      label: proto.toUpperCase()
+    }))
+    supportedReflectionZones.value = (await ubusCall('ns.redirects', 'list-zones')).data.zones.map(
+      (zone: string) => ({
+        id: zone,
+        label: zone.toUpperCase()
+      })
+    )
+    wanInterfaces.value = [
+      ...(await ubusCall('ns.redirects', 'list-wans')).data.wans.map(
+        (iface: { device: string; ipaddr: string }) => ({
+          id: iface.ipaddr,
+          label: iface.ipaddr
+        })
+      ),
+      { id: 'any', label: t('standalone.port_forward.any') }
+    ]
+    loading.value = false
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.generic_error')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  }
+}
+
+watchEffect(() => {
+  resetForm()
+})
+
+function close() {
+  resetForm()
+  emit('close')
+}
+
+onMounted(() => {
+  fetchOptions()
+  firewallConfig.fetch()
+})
+
+function deleteRestrictedIP(restrictedIP: string) {
+  restrict.value = restrict.value.filter((elem) => elem !== restrictedIP)
+}
+
+function addRestrictedIP() {
+  restrict.value.push('')
+}
+
+function validate(): boolean {
+  //TODO: implement validation
+  return true
+}
+
+async function performRequest() {
+  const isEditing = id.value != ''
+
+  try {
+    isSubmittingRequest.value = true
+    const requestType = isEditing ? 'edit-redirect' : 'add-redirect'
+
+    if (validate()) {
+      const payload: CreateEditPortForwardPayload = {
+        dest_ip: destinationIP.value,
+        proto: protocols.value.map((protoObj) => protoObj.id),
+        src_dport: sourcePort.value,
+        dest_port: destinationPort.value,
+        name: name.value,
+        src_dip: wan.value === 'any' ? '' : wan.value,
+        enabled: enabled.value ? '1' : '0',
+        log: log.value ? '1' : '0',
+        reflection: reflection.value ? '1' : '0',
+        restrict: restrict.value,
+        dest: destinationZone.value === 'any' ? '' : destinationZone.value,
+        reflection_zone: reflectionZones.value.map((reflectionZone) => reflectionZone.id)
+      }
+
+      if (isEditing) payload.id = id.value
+
+      await ubusCall('ns.redirects', requestType, payload)
+      emit('add-edit-port-forward')
+      close()
+    }
+  } catch (err: any) {
+    error.value.notificationTitle = isEditing
+      ? t('standalone.port_forward.cannot_edit_port_forward')
+      : t('standalone.port_forward.cannot_add_port_forward')
+
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  } finally {
+    isSubmittingRequest.value = false
+  }
+}
+</script>
+
+<template>
+  <NeSideDrawer
+    :is-shown="isShown"
+    @close="close()"
+    :closeAriaLabel="t('standalone.shell.close_side_drawer')"
+    :title="
+      id
+        ? t('standalone.port_forward.edit_port_forward')
+        : t('standalone.port_forward.add_port_forward')
+    "
+  >
+    <NeInlineNotification
+      v-if="error.notificationTitle"
+      :title="error.notificationTitle"
+      :description="error.notificationDescription"
+      class="mb-6"
+      kind="error"
+    />
+    <NeSkeleton v-if="loading || firewallConfig.loading" :lines="10" />
+    <div v-else class="flex flex-col gap-y-6">
+      <NeToggle :label="t('standalone.port_forward.status')" v-model="enabled" />
+      <div>
+        <p class="mb-2 text-sm">{{ t('standalone.port_forward.source_zone') }}</p>
+        <p class="text-sm">WAN</p>
+      </div>
+      <NeCombobox
+        :label="t('standalone.port_forward.protocols')"
+        :placeholder="t('standalone.port_forward.choose_protocol')"
+        :multiple="true"
+        :options="supportedProtocols"
+        v-model="protocols"
+      />
+      <NeTextInput :label="t('standalone.port_forward.source_port')" v-model="sourcePort" />
+      <NeTextInput
+        :label="t('standalone.port_forward.destination_address')"
+        v-model="destinationIP"
+      >
+        <template #tooltip
+          ><NeTooltip
+            ><template #content>{{
+              t('standalone.port_forward.destination_address_tooltip')
+            }}</template></NeTooltip
+          ></template
+        >
+      </NeTextInput>
+      <NeCombobox
+        :label="t('standalone.port_forward.destination_zone')"
+        :placeholder="t('standalone.port_forward.choose_zone')"
+        :options="supportedDestinationZones"
+        :selected-label="t('standalone.port_forward.any_zone')"
+        v-model="destinationZone"
+      />
+      <NeTextInput
+        :label="t('standalone.port_forward.destination_port')"
+        v-model="destinationPort"
+      />
+      <div>
+        <NeButton kind="tertiary" @click="showAdvancedSettings = !showAdvancedSettings">
+          {{ t('standalone.port_forward.advanced_settings') }}
+          <template #suffix>
+            <font-awesome-icon
+              :icon="['fas', showAdvancedSettings ? 'angle-up' : 'angle-down']"
+              class="h-4 w-4"
+              aria-hidden="true"
+            />
+          </template>
+        </NeButton>
+      </div>
+      <template v-if="showAdvancedSettings">
+        <NeCombobox
+          :label="t('standalone.port_forward.wan_ip')"
+          :options="wanInterfaces"
+          v-model="wan"
+        />
+
+        <!-- TODO: isolate into separate component -->
+        <div>
+          <div>
+            <p
+              class="mb-2 mr-2 inline-block text-sm font-medium leading-6 text-gray-700 dark:text-gray-200"
+            >
+              {{ t('standalone.port_forward.restrict_access_to') }}
+            </p>
+            <NeTooltip
+              ><template #content>{{
+                t('standalone.port_forward.restrict_access_to_tooltip')
+              }}</template></NeTooltip
+            >
+          </div>
+
+          <div class="space-y-6">
+            <div class="space-y-4">
+              <div v-for="(restrictedIP, i) in restrict" :key="i" class="flex items-center gap-2">
+                <NeTextInput v-model.trim="restrict[i]" class="grow" />
+                <NeButton kind="tertiary" size="md" @click="deleteRestrictedIP(restrictedIP)">
+                  <font-awesome-icon
+                    :icon="['fas', 'trash']"
+                    class="h-4 w-4 py-1"
+                    aria-hidden="true"
+                  />
+                </NeButton>
+              </div>
+              <NeButton size="md" @click="addRestrictedIP">
+                <template #prefix>
+                  <font-awesome-icon :icon="['fas', 'plus']" class="h-4 w-4" aria-hidden="true" />
+                </template>
+                {{ t('standalone.port_forward.add_ip_address') }}
+              </NeButton>
+            </div>
+          </div>
+        </div>
+
+        <NeToggle :label="t('standalone.port_forward.log')" v-model="log" />
+        <NeToggle :label="t('standalone.port_forward.hairpin_nat')" v-model="reflection" />
+        <NeCombobox
+          v-if="reflection"
+          :label="t('standalone.port_forward.hairpin_nat_zones')"
+          :placeholder="t('standalone.port_forward.choose_zone')"
+          :options="supportedReflectionZones"
+          v-model="reflectionZones"
+        />
+      </template>
+      <hr />
+      <div class="flex justify-end">
+        <NeButton kind="tertiary" class="mr-4" @click="close()">{{ t('common.cancel') }}</NeButton>
+        <NeButton
+          kind="primary"
+          @click="performRequest()"
+          :disabled="isSubmittingRequest"
+          :loading="isSubmittingRequest"
+          >{{
+            id
+              ? t('standalone.port_forward.edit_port_forward')
+              : t('standalone.port_forward.add_port_forward')
+          }}</NeButton
+        >
+      </div>
+    </div>
+  </NeSideDrawer>
+</template>
diff --git a/src/components/standalone/firewall/DeletePortForwardModal.vue b/src/components/standalone/firewall/DeletePortForwardModal.vue
new file mode 100644
index 000000000..532d98240
--- /dev/null
+++ b/src/components/standalone/firewall/DeletePortForwardModal.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ubusCall } from '@/lib/standalone/ubus'
+import type { PortForward } from '@/views/standalone/firewall/PortForward.vue'
+import { NeModal, NeInlineNotification, getAxiosErrorMessage } from '@nethserver/vue-tailwind-lib'
+import { ref, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  visible: boolean
+  itemToDelete: PortForward | null
+}>()
+
+const emit = defineEmits(['close', 'port-forward-deleted'])
+
+const { visible, itemToDelete } = toRefs(props)
+const error = ref('')
+const isDeleting = ref(false)
+const { t } = useI18n()
+
+async function deletePortForward() {
+  if (itemToDelete.value) {
+    try {
+      isDeleting.value = true
+      await ubusCall('ns.redirects', 'delete-redirect', {
+        id: itemToDelete.value.id
+      })
+      emit('port-forward-deleted')
+      emit('close')
+    } catch (err: any) {
+      error.value = t(getAxiosErrorMessage(err))
+    } finally {
+      isDeleting.value = false
+    }
+  }
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="visible"
+    kind="warning"
+    :title="t('common.delete')"
+    :primaryLabel="t('standalone.port_forward.delete_port_forward')"
+    :primaryButtonDisabled="isDeleting"
+    :primaryButtonLoading="isDeleting"
+    @primaryClick="deletePortForward()"
+    @close="emit('close')"
+  >
+    {{
+      t('standalone.port_forward.delete_port_forward_message', {
+        name: itemToDelete?.name ?? ''
+      })
+    }}
+    <NeInlineNotification
+      v-if="error"
+      kind="error"
+      :title="t('error.delete_port_forward_error')"
+      :description="error"
+    />
+  </NeModal>
+</template>
diff --git a/src/components/standalone/firewall/PortForwardTable.vue b/src/components/standalone/firewall/PortForwardTable.vue
new file mode 100644
index 000000000..110462458
--- /dev/null
+++ b/src/components/standalone/firewall/PortForwardTable.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { PortForward } from '@/views/standalone/firewall/PortForward.vue'
+import type { PropType } from 'vue'
+import { toRefs } from 'vue'
+import NeTable from '../NeTable.vue'
+import { NeDropdown, NeButton } from '@nethserver/vue-tailwind-lib'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  portForwards: {
+    type: Object as PropType<PortForward[]>,
+    required: true
+  },
+  header: {
+    type: String,
+    required: true
+  }
+})
+
+const { portForwards, header } = toRefs(props)
+
+const emit = defineEmits([
+  'port-forward-duplicate',
+  'port-forward-toggle-enable',
+  'port-forward-delete',
+  'port-forward-edit'
+])
+
+const tableHeaders = [
+  {
+    label: t('standalone.port_forward.name'),
+    key: 'name'
+  },
+  {
+    label: t('standalone.port_forward.source_port'),
+    key: 'source_port'
+  },
+  {
+    label: t('standalone.port_forward.destination_port'),
+    key: 'destination_port'
+  },
+  {
+    label: t('standalone.port_forward.protocols'),
+    key: 'protocols'
+  },
+  {
+    label: t('standalone.port_forward.wan_ip'),
+    key: 'wan'
+  },
+  {
+    label: t('standalone.port_forward.restrict_access_to'),
+    key: 'restrict'
+  },
+  {
+    label: t('standalone.port_forward.status'),
+    key: 'enabled'
+  },
+  {
+    label: '',
+    key: 'menu'
+  }
+]
+
+function getDropdownItems(item: PortForward) {
+  return [
+    {
+      id: 'enable_disable',
+      label: item.enabled
+        ? t('standalone.port_forward.disable')
+        : t('standalone.port_forward.enable'),
+      iconStyle: 'fas',
+      icon: item.enabled ? 'circle-xmark' : 'circle-check',
+      action: () => {
+        emit('port-forward-toggle-enable', item)
+      }
+    },
+    {
+      id: 'duplicate',
+      label: t('standalone.port_forward.duplicate'),
+      iconStyle: 'fas',
+      icon: 'clone',
+      action: () => {
+        emit('port-forward-duplicate', item)
+      }
+    },
+    {
+      id: 'delete',
+      label: t('common.delete'),
+      iconStyle: 'fas',
+      icon: 'trash',
+      danger: true,
+      action: () => {
+        emit('port-forward-delete', item)
+      }
+    }
+  ]
+}
+</script>
+
+<template>
+  <div>
+    <p
+      class="z-0 -my-1 table max-w-md rounded-se-md rounded-ss-md bg-indigo-300 p-2 text-sm dark:bg-indigo-800"
+    >
+      {{ t('standalone.port_forward.destination') }}: <strong>{{ header }}</strong>
+    </p>
+    <NeTable :data="portForwards" :headers="tableHeaders" class="z-10">
+      <template #source_port="{ item }: { item: PortForward }">
+        {{ item.source_port }} {{ item.source_port_name ? `(${item.source_port_name})` : '' }}
+      </template>
+      <template #protocols="{ item }: { item: PortForward }">
+        {{ item.protocol.map((prot) => prot.toUpperCase()).join(', ') }}
+      </template>
+      <template #restrict="{ item }: { item: PortForward }">
+        {{ item.restrict.length > 0 ? item.restrict.join(', ') : '-' }}
+      </template>
+      <template #enabled="{ item }: { item: PortForward }">
+        <div class="flex flex-row items-center">
+          <font-awesome-icon
+            :icon="['fas', item.enabled ? 'circle-check' : 'circle-xmark']"
+            class="mr-2 h-5 w-5"
+            aria-hidden="true"
+          />
+          <p>
+            {{
+              item.enabled
+                ? t('standalone.port_forward.enabled')
+                : t('standalone.port_forward.disabled')
+            }}
+          </p>
+        </div>
+      </template>
+      <template #menu="{ item }: { item: PortForward }">
+        <div class="align-center flex justify-end">
+          <NeButton kind="tertiary" @click="emit('port-forward-edit', item)">
+            <template #prefix>
+              <font-awesome-icon
+                :icon="['fas', 'pen-to-square']"
+                class="h-4 w-4"
+                aria-hidden="true"
+              />
+            </template>
+            {{ t('common.edit') }}
+          </NeButton>
+          <NeDropdown
+            class="item-dropdown"
+            :items="getDropdownItems(item)"
+            :align-to-right="true"
+          />
+        </div>
+      </template>
+    </NeTable>
+  </div>
+</template>
+
+<style scoped>
+.item-dropdown {
+  position: static;
+}
+
+.item-dropdown:deep(div[role='menu']) {
+  right: 10px;
+}
+</style>
diff --git a/src/lib/fontawesome.ts b/src/lib/fontawesome.ts
index a1f0d2673..c52994211 100644
--- a/src/lib/fontawesome.ts
+++ b/src/lib/fontawesome.ts
@@ -61,6 +61,8 @@ import { faShield as fasShield } from '@fortawesome/free-solid-svg-icons'
 import { faCircleInfo as fasCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { faEmptySet } from '@nethesis/nethesis-solid-svg-icons'
 import { faClone as faClone } from '@fortawesome/free-solid-svg-icons'
+import { faAngleUp as faAngleUp } from '@fortawesome/free-solid-svg-icons'
+import { faAngleDown as faAngleDown } from '@fortawesome/free-solid-svg-icons'
 
 export async function loadFontAwesome(app: any) {
   app.component('FontAwesomeIcon', FontAwesomeIcon)
@@ -123,4 +125,6 @@ export async function loadFontAwesome(app: any) {
   library.add(faArrowRight)
   library.add(faEmptySet)
   library.add(faClone)
+  library.add(faAngleUp)
+  library.add(faAngleDown)
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 7e46c528e..34a027774 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -54,6 +54,11 @@ const standaloneRoutes = [
     path: 'firewall/zones-and-policies',
     name: 'ZonesAndPolicies',
     component: () => import('../views/standalone/firewall/ZonesAndPolicies.vue')
+  },
+  {
+    path: 'firewall/port-forward',
+    name: 'PortForward',
+    component: () => import('../views/standalone/firewall/PortForward.vue')
   }
 ]
 
diff --git a/src/views/standalone/firewall/PortForward.vue b/src/views/standalone/firewall/PortForward.vue
new file mode 100644
index 000000000..52ba15f07
--- /dev/null
+++ b/src/views/standalone/firewall/PortForward.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import {
+  NeTitle,
+  getAxiosErrorMessage,
+  NeButton,
+  NeTextInput,
+  NeSkeleton,
+  NeInlineNotification
+} from '@nethserver/vue-tailwind-lib'
+import PortForwardTable from '@/components/standalone/firewall/PortForwardTable.vue'
+import { onMounted, ref } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { useUciPendingChangesStore } from '@/stores/standalone/uciPendingChanges'
+import CreateOrEditPortForwardDrawer from '@/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue'
+import DeletePortForwardModal from '@/components/standalone/firewall/DeletePortForwardModal.vue'
+import { computed } from 'vue'
+
+const { t } = useI18n()
+
+export type PortForward = {
+  dest_ip: string
+  protocol: string[]
+  source_port: string
+  source_port_name: string
+  destination_port: string
+  name: string
+  wan: string
+  enabled: boolean
+  id: string
+  restrict: string[]
+  log: boolean
+  reflection: boolean
+  reflection_zone: string[]
+  dest: string
+}
+
+export type CreateEditPortForwardPayload = {
+  dest_ip: string
+  proto: string[]
+  src_dport: string
+  dest_port: string
+  name: string
+  src_dip: string
+  enabled: '0' | '1'
+  id?: string
+  restrict: string[]
+  log: '0' | '1'
+  reflection: '0' | '1'
+  reflection_zone: string[]
+  dest: string
+}
+
+const uciChangesStore = useUciPendingChangesStore()
+
+const loading = ref(false)
+const error = ref({
+  notificationTitle: '',
+  notificationDescription: ''
+})
+const portForwards = ref<Record<string, PortForward[]>>({})
+const filter = ref('')
+const showCreateEditDrawer = ref(false)
+const showDeleteModal = ref(false)
+const selectedItem = ref<PortForward | null>(null)
+
+const filteredPortForwards = computed<Record<string, PortForward[]>>(() => {
+  return filter.value == ''
+    ? portForwards.value
+    : Object.fromEntries(
+        Object.entries(portForwards.value)
+          .map(([k, v]) => [
+            k,
+            v.filter(
+              (el) =>
+                el.name.includes(filter.value) ||
+                el.source_port.includes(filter.value) ||
+                el.destination_port.includes(filter.value) ||
+                el.protocol.filter((prot) => prot.includes(filter.value)).length > 0 ||
+                el.wan.includes(filter.value) ||
+                el.restrict.filter((rs) => rs.includes(filter.value)).length > 0
+            )
+          ])
+          .filter(([, v]) => v.length > 0)
+      )
+})
+
+function cleanError() {
+  error.value = {
+    notificationTitle: '',
+    notificationDescription: ''
+  }
+}
+
+async function fetchPortForwards() {
+  try {
+    cleanError()
+    loading.value = true
+    const response = await ubusCall('ns.redirects', 'list-redirects')
+    portForwards.value = response.data.redirects
+    loading.value = false
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.generic_error')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  }
+}
+
+async function reloadPortForwards() {
+  await uciChangesStore.getChanges()
+  await fetchPortForwards()
+}
+
+async function toggleEnableRedirect(item: PortForward) {
+  try {
+    cleanError()
+    await ubusCall('ns.redirects', item.enabled ? 'disable-redirect' : 'enable-redirect', {
+      id: item.id
+    })
+    await reloadPortForwards()
+  } catch (err: any) {
+    error.value.notificationTitle = t(
+      item.enabled ? 'error.cannot_disable_port_forward' : 'error.cannot_enable_port_forward'
+    )
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  }
+}
+
+async function duplicateRedirect(item: PortForward) {
+  try {
+    cleanError()
+    let payload: CreateEditPortForwardPayload = {
+      dest_ip: item.dest_ip,
+      proto: item.protocol,
+      src_dport: item.source_port,
+      src_dip: item.wan,
+      dest_port: item.destination_port,
+      name: item.name,
+      enabled: item.enabled ? '1' : '0',
+      log: item.log ? '1' : '0',
+      restrict: item.restrict,
+      reflection: item.reflection ? '1' : '0',
+      reflection_zone: item.reflection_zone,
+      dest: item.dest
+    }
+    await ubusCall('ns.redirects', 'add-redirect', payload)
+    await reloadPortForwards()
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_duplicate_port_forward')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+  }
+}
+
+function openCreateEditDrawer(itemToEdit: PortForward | null) {
+  selectedItem.value = itemToEdit
+  showCreateEditDrawer.value = true
+}
+
+function closeCreateEditDrawer() {
+  selectedItem.value = null
+  showCreateEditDrawer.value = false
+}
+
+function openDeleteModal(itemToEdit: PortForward) {
+  selectedItem.value = itemToEdit
+  showDeleteModal.value = true
+}
+
+function closeDeleteModal() {
+  selectedItem.value = null
+  showDeleteModal.value = false
+}
+
+onMounted(() => {
+  fetchPortForwards()
+})
+</script>
+
+<template>
+  <NeTitle>{{ t('standalone.port_forward.title') }}</NeTitle>
+  <div class="flex flex-col gap-y-6">
+    <div class="flex flex-row items-center justify-between">
+      <p class="max-w-2xl text-sm font-normal text-gray-500 dark:text-gray-400">
+        {{ t('standalone.port_forward.description') }}
+      </p>
+      <div>
+        <NeButton kind="secondary" @click="openCreateEditDrawer(null)">
+          <template #prefix>
+            <font-awesome-icon :icon="['fas', 'circle-plus']" class="h-4 w-4" aria-hidden="true" />
+          </template>
+          {{ t('standalone.port_forward.add_port_forward') }}
+        </NeButton>
+      </div>
+    </div>
+    <NeTextInput
+      class="max-w-xs"
+      :placeholder="t('standalone.port_forward.filter')"
+      v-model="filter"
+    />
+    <NeInlineNotification
+      kind="error"
+      :title="error.notificationTitle"
+      :description="error.notificationDescription"
+      v-if="error.notificationDescription"
+    />
+    <NeSkeleton v-if="loading" :lines="10" />
+    <PortForwardTable
+      v-else
+      v-for="(portForward, key) in filteredPortForwards"
+      :key="key"
+      :port-forwards="portForward"
+      :header="key"
+      @port-forward-delete="openDeleteModal"
+      @port-forward-duplicate="duplicateRedirect"
+      @port-forward-edit="openCreateEditDrawer"
+      @port-forward-toggle-enable="toggleEnableRedirect"
+    />
+  </div>
+  <CreateOrEditPortForwardDrawer
+    :is-shown="showCreateEditDrawer"
+    :initial-item="selectedItem"
+    @close="closeCreateEditDrawer()"
+    @add-edit-port-forward="reloadPortForwards()"
+  />
+  <DeletePortForwardModal
+    :visible="showDeleteModal"
+    @close="closeDeleteModal()"
+    @port-forward-deleted="reloadPortForwards()"
+    :item-to-delete="selectedItem"
+  />
+</template>

From 74d387ad4d06df53566f4716018860773fa12a9f Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Tue, 3 Oct 2023 09:49:03 +0000
Subject: [PATCH 02/13] feat: add validation for create/edit port forward

- add new validation functions
- add related translations
- add validation for fields in the create/edit port forward drawer form
- fix port forward table display for multiple items
---
 public/i18n/en/translation.json               |  2 +
 .../CreateOrEditPortForwardDrawer.vue         | 97 +++++++++++++++++--
 .../standalone/firewall/PortForwardTable.vue  | 11 ++-
 src/lib/validation.ts                         | 20 +++-
 4 files changed, 119 insertions(+), 11 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 32b8256f0..e164a8b06 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -19,6 +19,7 @@
     "http_404": "Resource not found",
     "http_500": "Server error",
     "required": "Required",
+    "required_option": "Select at least one option",
     "validation_failed": "Validation failed",
     "invalid_hostname": "Invalid hostname",
     "hostname_is_too_long": "Hostname has too many characters",
@@ -34,6 +35,7 @@
     "invalid_ip_v6_address": "Invalid IPv6 address",
     "invalid_cidr_v4_address": "Enter a valid IPv4 address with CIDR notation",
     "invalid_cidr_v6_address": "Enter a valid IPv6 address with CIDR notation",
+    "invalid_port": "Enter an integer number between 0 and 65535",
     "invalid_uci_name": "Only letters, numbers and underscore (_) are allowed",
     "cannot_apply_configuration_changes": "Cannot apply configuration changes",
     "cannot_revert_configuration_changes": "Cannot revert configuration changes",
diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index f61744c6a..694ddaa4c 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -21,6 +21,14 @@ import { watchEffect } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
 import { ZoneType, useFirewallStore } from '@/stores/standalone/useFirewallStore'
 import { computed } from 'vue'
+import {
+  MessageBag,
+  validateIpAddress,
+  validateRequired,
+  validatePort,
+  validateRequiredOption,
+  type validationOutput
+} from '@/lib/validation'
 
 const props = defineProps<{
   isShown: boolean
@@ -39,6 +47,8 @@ const error = ref({
   notificationTitle: '',
   notificationDescription: ''
 })
+const validationErrorBag = ref(new MessageBag())
+const restrictIPValidationErrors = ref<string[]>([])
 
 // Options
 const supportedProtocols = ref<NeComboboxOption[]>([])
@@ -75,6 +85,8 @@ const reflectionZones = ref<NeComboboxOption[]>([])
 const destinationZone = ref('')
 
 function resetForm() {
+  validationErrorBag.value.clear()
+
   id.value = props.initialItem?.id ?? ''
   name.value = props.initialItem?.name ?? ''
   sourcePort.value = props.initialItem?.source_port ?? ''
@@ -82,7 +94,7 @@ function resetForm() {
   destinationPort.value = props.initialItem?.destination_port ?? ''
   wan.value = props.initialItem?.wan ?? 'any'
   enabled.value = props.initialItem?.enabled ?? false
-  restrict.value = props.initialItem?.restrict ?? []
+  restrict.value = props.initialItem?.restrict.map((x) => x) ?? []
   protocols.value =
     props.initialItem?.protocol.map((proto: string) => ({
       id: proto,
@@ -153,9 +165,59 @@ function addRestrictedIP() {
   restrict.value.push('')
 }
 
+function runValidators(validators: validationOutput[], label: string): boolean {
+  for (let validator of validators) {
+    if (!validator.valid) {
+      validationErrorBag.value.set(label, [t(validator.errMessage as string)])
+    }
+  }
+
+  return validators.every((validator) => validator.valid)
+}
+
 function validate(): boolean {
-  //TODO: implement validation
-  return true
+  validationErrorBag.value.clear()
+
+  restrictIPValidationErrors.value = []
+  restrict.value.forEach(() => {
+    restrictIPValidationErrors.value.push('')
+  })
+
+  let validRestrict = true
+  for (let [index, restrictValue] of restrict.value.entries()) {
+    for (let validator of [validateRequired(restrictValue), validateIpAddress(restrictValue)]) {
+      if (!validator.valid) {
+        restrictIPValidationErrors.value[index] = t(validator.errMessage as string)
+        validRestrict = false
+        break
+      }
+    }
+  }
+
+  if (!validRestrict) {
+    showAdvancedSettings.value = true
+  }
+
+  let validators: [validationOutput[], string][] = [
+    [[validateRequired(name.value)], 'name'],
+    [[validateRequired(sourcePort.value), validatePort(sourcePort.value)], 'sourcePort'],
+    [[validateRequiredOption(protocols.value)], 'protocols'],
+    [
+      [validateRequired(destinationIP.value), validateIpAddress(destinationIP.value)],
+      'destinationIP'
+    ],
+    [
+      [validateRequired(destinationPort.value), validatePort(destinationPort.value)],
+      'destinationPort'
+    ],
+    [reflection.value ? [validateRequiredOption(reflectionZones.value)] : [], 'reflectionZones']
+  ]
+
+  return (
+    validators
+      .map(([validator, label]) => runValidators(validator, label))
+      .every((result) => result) && validRestrict
+  )
 }
 
 async function performRequest() {
@@ -189,8 +251,8 @@ async function performRequest() {
     }
   } catch (err: any) {
     error.value.notificationTitle = isEditing
-      ? t('standalone.port_forward.cannot_edit_port_forward')
-      : t('standalone.port_forward.cannot_add_port_forward')
+      ? t('error.cannot_edit_port_forward')
+      : t('error.cannot_create_port_forward')
 
     error.value.notificationDescription = t(getAxiosErrorMessage(err))
   } finally {
@@ -220,6 +282,11 @@ async function performRequest() {
     <NeSkeleton v-if="loading || firewallConfig.loading" :lines="10" />
     <div v-else class="flex flex-col gap-y-6">
       <NeToggle :label="t('standalone.port_forward.status')" v-model="enabled" />
+      <NeTextInput
+        :label="t('standalone.port_forward.name')"
+        v-model="name"
+        :invalid-message="validationErrorBag.getFirstFor('name')"
+      />
       <div>
         <p class="mb-2 text-sm">{{ t('standalone.port_forward.source_zone') }}</p>
         <p class="text-sm">WAN</p>
@@ -230,11 +297,18 @@ async function performRequest() {
         :multiple="true"
         :options="supportedProtocols"
         v-model="protocols"
+        :invalid-message="validationErrorBag.getFirstFor('protocols')"
+      />
+      <NeTextInput
+        :label="t('standalone.port_forward.source_port')"
+        v-model="sourcePort"
+        :invalid-message="validationErrorBag.getFirstFor('sourcePort')"
+        type="number"
       />
-      <NeTextInput :label="t('standalone.port_forward.source_port')" v-model="sourcePort" />
       <NeTextInput
         :label="t('standalone.port_forward.destination_address')"
         v-model="destinationIP"
+        :invalid-message="validationErrorBag.getFirstFor('destinationIP')"
       >
         <template #tooltip
           ><NeTooltip
@@ -254,6 +328,8 @@ async function performRequest() {
       <NeTextInput
         :label="t('standalone.port_forward.destination_port')"
         v-model="destinationPort"
+        :invalid-message="validationErrorBag.getFirstFor('destinationPort')"
+        type="number"
       />
       <div>
         <NeButton kind="tertiary" @click="showAdvancedSettings = !showAdvancedSettings">
@@ -291,8 +367,12 @@ async function performRequest() {
 
           <div class="space-y-6">
             <div class="space-y-4">
-              <div v-for="(restrictedIP, i) in restrict" :key="i" class="flex items-center gap-2">
-                <NeTextInput v-model.trim="restrict[i]" class="grow" />
+              <div v-for="(restrictedIP, i) in restrict" :key="i" class="flex items-start gap-2">
+                <NeTextInput
+                  v-model.trim="restrict[i]"
+                  class="grow"
+                  :invalid-message="restrictIPValidationErrors[i]"
+                />
                 <NeButton kind="tertiary" size="md" @click="deleteRestrictedIP(restrictedIP)">
                   <font-awesome-icon
                     :icon="['fas', 'trash']"
@@ -319,6 +399,7 @@ async function performRequest() {
           :placeholder="t('standalone.port_forward.choose_zone')"
           :options="supportedReflectionZones"
           v-model="reflectionZones"
+          :invalid-message="validationErrorBag.getFirstFor('reflectionZones')"
         />
       </template>
       <hr />
diff --git a/src/components/standalone/firewall/PortForwardTable.vue b/src/components/standalone/firewall/PortForwardTable.vue
index 110462458..9634dfb4f 100644
--- a/src/components/standalone/firewall/PortForwardTable.vue
+++ b/src/components/standalone/firewall/PortForwardTable.vue
@@ -111,10 +111,17 @@ function getDropdownItems(item: PortForward) {
         {{ item.source_port }} {{ item.source_port_name ? `(${item.source_port_name})` : '' }}
       </template>
       <template #protocols="{ item }: { item: PortForward }">
-        {{ item.protocol.map((prot) => prot.toUpperCase()).join(', ') }}
+        <p v-for="(prot, idx) in item.protocol.slice(0, 2)" :key="prot">
+          {{ prot.toUpperCase() }}{{ item.protocol.length > 2 && idx == 1 ? '...' : '' }}
+        </p>
       </template>
       <template #restrict="{ item }: { item: PortForward }">
-        {{ item.restrict.length > 0 ? item.restrict.join(', ') : '-' }}
+        <template v-if="item.restrict.length > 0">
+          <p v-for="(restrictIP, idx) in item.restrict.slice(0, 2)" :key="restrictIP">
+            {{ restrictIP }}{{ item.restrict.length > 2 && idx == 1 ? '...' : '' }}
+          </p>
+        </template>
+        <p v-else>-</p>
       </template>
       <template #enabled="{ item }: { item: PortForward }">
         <div class="flex flex-row items-center">
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index e5d88868c..129e036fe 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -1,7 +1,9 @@
 //  Copyright (C) 2023 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-interface validationOutput {
+import type { NeComboboxOption } from '@nethserver/vue-tailwind-lib'
+
+export interface validationOutput {
   valid: Boolean
   errMessage?: String
   i18Params?: Object
@@ -198,6 +200,22 @@ export const validateVlanId = (value: String): validationOutput => {
   return { valid: true }
 }
 
+export const validatePort = (value: String): validationOutput => {
+  const port = Number(value)
+
+  if (isNaN(port) || !Number.isInteger(port) || port < 0 || port > 65535) {
+    return { valid: false, errMessage: 'error.invalid_port' }
+  }
+  return { valid: true }
+}
+
+export const validateRequiredOption = (value: NeComboboxOption[]): validationOutput => {
+  if (value.length == 0) {
+    return { valid: false, errMessage: 'error.required_option' }
+  }
+  return { valid: true }
+}
+
 /**
  * Extends Map class to provide a name-array for errors
  */

From b239b274338d604b17bf54d09a63bfd82ac0b80e Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Tue, 3 Oct 2023 11:36:02 +0000
Subject: [PATCH 03/13] chore: refactor NeMultiTextInput into component

- create a standalone NeMultiTextInput component
- use NeMultiTextInput in pages which used it
---
 .../standalone/NeMultiTextInput.vue           | 83 +++++++++++++++++++
 .../CreateOrEditPortForwardDrawer.vue         | 56 ++++---------
 .../system_settings/TimeSynchronization.vue   | 53 +++---------
 3 files changed, 108 insertions(+), 84 deletions(-)
 create mode 100644 src/components/standalone/NeMultiTextInput.vue

diff --git a/src/components/standalone/NeMultiTextInput.vue b/src/components/standalone/NeMultiTextInput.vue
new file mode 100644
index 000000000..e9775751d
--- /dev/null
+++ b/src/components/standalone/NeMultiTextInput.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { ref } from 'vue'
+import { NeButton, NeTextInput } from '@nethserver/vue-tailwind-lib'
+import { watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: string[]
+  addItemLabel: string
+  invalidMessages?: string[]
+  title?: string
+  optional?: boolean
+  disableInputs?: boolean
+  disableAddButton?: boolean
+  optionalLabel?: string
+}>()
+
+const emit = defineEmits(['delete-item', 'add-item', 'update:modelValue'])
+
+const items = ref<string[]>([])
+
+function deleteItem(idx: number) {
+  items.value.splice(idx, 1)
+  emit('update:modelValue', items.value)
+  emit('delete-item')
+}
+
+function addItem() {
+  items.value.push('')
+  emit('update:modelValue', items.value)
+  emit('add-item')
+}
+
+function updateModelValue(idx: number, newValue: string) {
+  items.value[idx] = newValue
+  emit('update:modelValue', items.value)
+}
+
+watch(props.modelValue, () => {
+  items.value = [...props.modelValue]
+})
+
+onMounted(() => {
+  items.value = [...props.modelValue]
+})
+</script>
+
+<template>
+  <div>
+    <div v-if="title" class="mb-2 flex items-end justify-between">
+      <div>
+        <span class="mr-2 text-sm font-medium leading-6 text-gray-700 dark:text-gray-200">
+          {{ title }}
+        </span>
+        <slot name="tooltip"></slot>
+      </div>
+      <span v-if="optional" class="ml-2 font-normal">{{ optionalLabel }}</span>
+    </div>
+
+    <div class="space-y-6">
+      <div class="space-y-4">
+        <div v-for="(item, i) in items" :key="i" class="flex items-start gap-2">
+          <NeTextInput
+            :value="items[i]"
+            @input="updateModelValue(i, $event.target.value)"
+            class="grow"
+            :invalid-message="invalidMessages ? invalidMessages[i] : ''"
+            :disabled="disableInputs"
+          />
+          <NeButton kind="tertiary" size="md" @click="deleteItem(i)">
+            <font-awesome-icon :icon="['fas', 'trash']" class="h-4 w-4 py-1" aria-hidden="true" />
+          </NeButton>
+        </div>
+        <NeButton size="md" @click="addItem" :disabled="disableAddButton">
+          <template #prefix>
+            <font-awesome-icon :icon="['fas', 'plus']" class="h-4 w-4" aria-hidden="true" />
+          </template>
+          {{ addItemLabel }}
+        </NeButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index 694ddaa4c..9c6b231a0 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -19,6 +19,7 @@ import type {
 } from '@/views/standalone/firewall/PortForward.vue'
 import { watchEffect } from 'vue'
 import { ubusCall } from '@/lib/standalone/ubus'
+import NeMultiTextInput from '../NeMultiTextInput.vue'
 import { ZoneType, useFirewallStore } from '@/stores/standalone/useFirewallStore'
 import { computed } from 'vue'
 import {
@@ -157,12 +158,8 @@ onMounted(() => {
   firewallConfig.fetch()
 })
 
-function deleteRestrictedIP(restrictedIP: string) {
-  restrict.value = restrict.value.filter((elem) => elem !== restrictedIP)
-}
-
-function addRestrictedIP() {
-  restrict.value.push('')
+function resetRestrictIPValidationErrors() {
+  restrictIPValidationErrors.value = []
 }
 
 function runValidators(validators: validationOutput[], label: string): boolean {
@@ -350,46 +347,23 @@ async function performRequest() {
           v-model="wan"
         />
 
-        <!-- TODO: isolate into separate component -->
-        <div>
-          <div>
-            <p
-              class="mb-2 mr-2 inline-block text-sm font-medium leading-6 text-gray-700 dark:text-gray-200"
-            >
-              {{ t('standalone.port_forward.restrict_access_to') }}
-            </p>
+        <NeMultiTextInput
+          :title="t('standalone.port_forward.restrict_access_to')"
+          :optional="true"
+          :optional-label="t('common.optional')"
+          :add-item-label="t('standalone.port_forward.add_ip_address')"
+          :invalid-messages="restrictIPValidationErrors"
+          v-model="restrict"
+          @delete-item="resetRestrictIPValidationErrors"
+        >
+          <template #tooltip>
             <NeTooltip
               ><template #content>{{
                 t('standalone.port_forward.restrict_access_to_tooltip')
               }}</template></NeTooltip
             >
-          </div>
-
-          <div class="space-y-6">
-            <div class="space-y-4">
-              <div v-for="(restrictedIP, i) in restrict" :key="i" class="flex items-start gap-2">
-                <NeTextInput
-                  v-model.trim="restrict[i]"
-                  class="grow"
-                  :invalid-message="restrictIPValidationErrors[i]"
-                />
-                <NeButton kind="tertiary" size="md" @click="deleteRestrictedIP(restrictedIP)">
-                  <font-awesome-icon
-                    :icon="['fas', 'trash']"
-                    class="h-4 w-4 py-1"
-                    aria-hidden="true"
-                  />
-                </NeButton>
-              </div>
-              <NeButton size="md" @click="addRestrictedIP">
-                <template #prefix>
-                  <font-awesome-icon :icon="['fas', 'plus']" class="h-4 w-4" aria-hidden="true" />
-                </template>
-                {{ t('standalone.port_forward.add_ip_address') }}
-              </NeButton>
-            </div>
-          </div>
-        </div>
+          </template>
+        </NeMultiTextInput>
 
         <NeToggle :label="t('standalone.port_forward.log')" v-model="log" />
         <NeToggle :label="t('standalone.port_forward.hairpin_nat')" v-model="reflection" />
diff --git a/src/components/standalone/system_settings/TimeSynchronization.vue b/src/components/standalone/system_settings/TimeSynchronization.vue
index 339c029ff..fa2c08d45 100644
--- a/src/components/standalone/system_settings/TimeSynchronization.vue
+++ b/src/components/standalone/system_settings/TimeSynchronization.vue
@@ -14,7 +14,6 @@ import {
   NeSkeleton,
   NeCombobox,
   NeInlineNotification,
-  NeTextInput,
   getAxiosErrorMessage
 } from '@nethserver/vue-tailwind-lib'
 import type { NeComboboxOption } from '@nethserver/vue-tailwind-lib'
@@ -22,6 +21,7 @@ import { isEmpty, uniq } from 'lodash'
 import { computed, onMounted, ref, type Ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import FormLayout from '@/components/standalone/FormLayout.vue'
+import NeMultiTextInput from '../NeMultiTextInput.vue'
 
 const { t } = useI18n()
 const uciChangesStore = useUciPendingChangesStore()
@@ -253,15 +253,9 @@ async function save() {
   }
 }
 
-function deleteNtpServer(ntpServerName: string) {
+function resetNtpServerErrors() {
   // reset errors to prevent validation errors mismatch
   error.value.ntpServerCandidate = []
-
-  ntpServerCandidates.value = ntpServerCandidates.value.filter((elem) => elem !== ntpServerName)
-}
-
-function addNtpServer() {
-  ntpServerCandidates.value.push('')
 }
 </script>
 
@@ -321,41 +315,14 @@ function addNtpServer() {
         <div v-if="enableNtpClient">
           <hr class="my-8" />
           <FormLayout :title="t('standalone.system_settings.ntp_server_candidates')">
-            <div class="space-y-6">
-              <div class="space-y-4">
-                <div
-                  v-for="(ntpServer, i) in ntpServerCandidates"
-                  :key="i"
-                  class="flex items-start gap-2"
-                >
-                  <NeTextInput
-                    v-model.trim="ntpServerCandidates[i]"
-                    :invalid-message="error.ntpServerCandidate[i]"
-                    :disabled="loading.save"
-                    class="grow"
-                  />
-                  <NeButton
-                    kind="tertiary"
-                    size="lg"
-                    @click="deleteNtpServer(ntpServer)"
-                    :disabled="loading.save"
-                  >
-                    <font-awesome-icon
-                      :icon="['fas', 'trash']"
-                      class="h-4 w-4 py-1"
-                      aria-hidden="true"
-                    />
-                  </NeButton>
-                </div>
-                <!-- add ntp server -->
-                <NeButton size="lg" @click="addNtpServer" :disabled="loading.save">
-                  <template #prefix>
-                    <font-awesome-icon :icon="['fas', 'plus']" class="h-4 w-4" aria-hidden="true" />
-                  </template>
-                  {{ t('standalone.system_settings.add_ntp_server') }}
-                </NeButton>
-              </div>
-            </div>
+            <NeMultiTextInput
+              :add-item-label="t('standalone.system_settings.add_ntp_server')"
+              :invalid-messages="error.ntpServerCandidate"
+              :disable-inputs="loading.save"
+              :disable-add-button="loading.save"
+              v-model="ntpServerCandidates"
+              @delete-item="resetNtpServerErrors()"
+            />
           </FormLayout>
         </div>
       </Transition>

From 67d02e6cba59c057221a80a33492417cd5e7bba1 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Tue, 3 Oct 2023 11:46:26 +0000
Subject: [PATCH 04/13] chore: refactor defineProps in PortForwardTable

---
 .../standalone/firewall/PortForwardTable.vue      | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/standalone/firewall/PortForwardTable.vue b/src/components/standalone/firewall/PortForwardTable.vue
index 9634dfb4f..541df7a2b 100644
--- a/src/components/standalone/firewall/PortForwardTable.vue
+++ b/src/components/standalone/firewall/PortForwardTable.vue
@@ -1,23 +1,16 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import type { PortForward } from '@/views/standalone/firewall/PortForward.vue'
-import type { PropType } from 'vue'
 import { toRefs } from 'vue'
 import NeTable from '../NeTable.vue'
 import { NeDropdown, NeButton } from '@nethserver/vue-tailwind-lib'
 
 const { t } = useI18n()
 
-const props = defineProps({
-  portForwards: {
-    type: Object as PropType<PortForward[]>,
-    required: true
-  },
-  header: {
-    type: String,
-    required: true
-  }
-})
+const props = defineProps<{
+  portForwards: PortForward[]
+  header: string
+}>()
 
 const { portForwards, header } = toRefs(props)
 

From 6bde3d273145822509a4555b761846461ffe8f84 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Tue, 3 Oct 2023 13:37:21 +0000
Subject: [PATCH 05/13] fix: translations in port forward page

- change title in the delete modal
- use different lorem ipsum text for placeholder
- change primary button label when editing item
- use overflow-hidden on NeTable
---
 public/i18n/en/translation.json                  |  6 +++---
 src/components/standalone/NeTable.vue            |  2 +-
 .../firewall/CreateOrEditPortForwardDrawer.vue   |  6 +-----
 .../firewall/DeletePortForwardModal.vue          |  2 +-
 .../standalone/firewall/PortForwardTable.vue     | 16 +---------------
 5 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index e164a8b06..e901f416e 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -462,7 +462,7 @@
     },
     "port_forward": {
       "title": "Port forward",
-      "description": "Nunc quam dui, hendrerit id euismod nec, cursus nec magna. Fusce porta finibus ipsum sit amet faucibus.",
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
       "add_port_forward": "Add port forward",
       "name": "Name",
       "source_port": "Source port",
@@ -493,8 +493,8 @@
       "choose_protocol": "Choose protocol",
       "any_zone": "Any zone",
       "any": "Any",
-      "destination_address_tooltip": "Nunc quam dui, hendrerit id euismod nec, cursus nec magna.",
-      "restrict_access_to_tooltip": "Nunc quam dui, hendrerit id euismod nec, cursus nec magna."
+      "destination_address_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "restrict_access_to_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
     },
     "firewall": {
       "title": "Firewall"
diff --git a/src/components/standalone/NeTable.vue b/src/components/standalone/NeTable.vue
index 1a5b7bdc9..47f855824 100644
--- a/src/components/standalone/NeTable.vue
+++ b/src/components/standalone/NeTable.vue
@@ -133,7 +133,7 @@ table {
 
 /* Base style CSS. */
 .table-basic {
-  @apply -mx-4 overflow-hidden overflow-x-auto border-y border-gray-300 dark:border-gray-600 sm:mx-0 sm:rounded-lg sm:border-x;
+  @apply -mx-4 overflow-x-auto border-y border-gray-300 dark:border-gray-600 sm:mx-0 sm:rounded-lg sm:border-x;
 }
 
 .table-basic.ghost {
diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index 9c6b231a0..eb684768c 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -384,11 +384,7 @@ async function performRequest() {
           @click="performRequest()"
           :disabled="isSubmittingRequest"
           :loading="isSubmittingRequest"
-          >{{
-            id
-              ? t('standalone.port_forward.edit_port_forward')
-              : t('standalone.port_forward.add_port_forward')
-          }}</NeButton
+          >{{ id ? t('common.save') : t('standalone.port_forward.add_port_forward') }}</NeButton
         >
       </div>
     </div>
diff --git a/src/components/standalone/firewall/DeletePortForwardModal.vue b/src/components/standalone/firewall/DeletePortForwardModal.vue
index 532d98240..6a5e458ac 100644
--- a/src/components/standalone/firewall/DeletePortForwardModal.vue
+++ b/src/components/standalone/firewall/DeletePortForwardModal.vue
@@ -39,7 +39,7 @@ async function deletePortForward() {
   <NeModal
     :visible="visible"
     kind="warning"
-    :title="t('common.delete')"
+    :title="t('standalone.port_forward.delete_port_forward')"
     :primaryLabel="t('standalone.port_forward.delete_port_forward')"
     :primaryButtonDisabled="isDeleting"
     :primaryButtonLoading="isDeleting"
diff --git a/src/components/standalone/firewall/PortForwardTable.vue b/src/components/standalone/firewall/PortForwardTable.vue
index 541df7a2b..a9b38e2f9 100644
--- a/src/components/standalone/firewall/PortForwardTable.vue
+++ b/src/components/standalone/firewall/PortForwardTable.vue
@@ -144,23 +144,9 @@ function getDropdownItems(item: PortForward) {
             </template>
             {{ t('common.edit') }}
           </NeButton>
-          <NeDropdown
-            class="item-dropdown"
-            :items="getDropdownItems(item)"
-            :align-to-right="true"
-          />
+          <NeDropdown :items="getDropdownItems(item)" :align-to-right="true" />
         </div>
       </template>
     </NeTable>
   </div>
 </template>
-
-<style scoped>
-.item-dropdown {
-  position: static;
-}
-
-.item-dropdown:deep(div[role='menu']) {
-  right: 10px;
-}
-</style>

From 454dcfe7067d6708e6fe54849d8485d82a4d3671 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Tue, 3 Oct 2023 13:55:32 +0000
Subject: [PATCH 06/13] fix: change colors of disabled items

---
 .../standalone/firewall/PortForwardTable.vue  | 44 ++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/components/standalone/firewall/PortForwardTable.vue b/src/components/standalone/firewall/PortForwardTable.vue
index a9b38e2f9..53cf42d64 100644
--- a/src/components/standalone/firewall/PortForwardTable.vue
+++ b/src/components/standalone/firewall/PortForwardTable.vue
@@ -90,6 +90,10 @@ function getDropdownItems(item: PortForward) {
     }
   ]
 }
+
+function getCellClasses(item: PortForward) {
+  return !item.enabled ? ['text-gray-300', 'dark:text-gray-700'] : []
+}
 </script>
 
 <template>
@@ -100,24 +104,54 @@ function getDropdownItems(item: PortForward) {
       {{ t('standalone.port_forward.destination') }}: <strong>{{ header }}</strong>
     </p>
     <NeTable :data="portForwards" :headers="tableHeaders" class="z-10">
+      <template #name="{ item }: { item: PortForward }">
+        <p :class="[...getCellClasses(item)]">{{ item.name }}</p>
+      </template>
       <template #source_port="{ item }: { item: PortForward }">
-        {{ item.source_port }} {{ item.source_port_name ? `(${item.source_port_name})` : '' }}
+        <p :class="[...getCellClasses(item)]">
+          {{ item.source_port }} {{ item.source_port_name ? `(${item.source_port_name})` : '' }}
+        </p>
+      </template>
+      <template #destination_port="{ item }: { item: PortForward }">
+        <p :class="[...getCellClasses(item)]">
+          {{ item.destination_port }}
+        </p>
       </template>
       <template #protocols="{ item }: { item: PortForward }">
-        <p v-for="(prot, idx) in item.protocol.slice(0, 2)" :key="prot">
+        <p
+          v-for="(prot, idx) in item.protocol.slice(0, 2)"
+          :key="prot"
+          :class="[...getCellClasses(item)]"
+        >
           {{ prot.toUpperCase() }}{{ item.protocol.length > 2 && idx == 1 ? '...' : '' }}
         </p>
       </template>
+      <template #wan="{ item }: { item: PortForward }">
+        <p :class="[...getCellClasses(item)]">
+          {{ item.wan === 'any' ? t('standalone.port_forward.any') : item.wan }}
+        </p>
+      </template>
       <template #restrict="{ item }: { item: PortForward }">
         <template v-if="item.restrict.length > 0">
-          <p v-for="(restrictIP, idx) in item.restrict.slice(0, 2)" :key="restrictIP">
+          <p
+            v-for="(restrictIP, idx) in item.restrict.slice(0, 2)"
+            :key="restrictIP"
+            :class="[...getCellClasses(item)]"
+          >
             {{ restrictIP }}{{ item.restrict.length > 2 && idx == 1 ? '...' : '' }}
           </p>
         </template>
-        <p v-else>-</p>
+        <p :class="[...getCellClasses(item)]" v-else>-</p>
       </template>
       <template #enabled="{ item }: { item: PortForward }">
-        <div class="flex flex-row items-center">
+        <div
+          :class="[
+            'flex',
+            'flex-row',
+            'items-center',
+            !item.enabled ? 'text-gray-200 dark:text-gray-700' : ''
+          ]"
+        >
           <font-awesome-icon
             :icon="['fas', item.enabled ? 'circle-check' : 'circle-xmark']"
             class="mr-2 h-5 w-5"

From 41c52b3cfbac7fec20a8d34859b02cf573c77870 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Tue, 3 Oct 2023 14:02:26 +0000
Subject: [PATCH 07/13] fix: changes in port forward drawer

- move "any" as first option for wan interfaces and dest zones
- add device name in description for each wan interface
- remove unneeded item
---
 public/i18n/en/translation.json                   |  3 +--
 .../firewall/CreateOrEditPortForwardDrawer.vue    | 15 ++++++---------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index e901f416e..5f08a6815 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -481,7 +481,6 @@
       "delete_port_forward_message": "You are about to delete port forward {name}",
       "destination": "Destination",
       "edit_port_forward": "Edit port forward",
-      "source_zone": "Source zone",
       "destination_address": "Destination address",
       "destination_zone": "Destination zone",
       "advanced_settings": "Advanced settings",
@@ -523,4 +522,4 @@
       "title": "Logs"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index eb684768c..2342e7194 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -59,13 +59,13 @@ const supportedDestinationZones = computed<NeComboboxOption[]>(() => {
   if (firewallConfig.loading) return []
   else {
     return [
+      { id: 'any', label: t('standalone.port_forward.any_zone') },
       ...firewallConfig.zones
         .filter((zone) => zone.type() != ZoneType.WAN)
         .map((zone) => ({
           id: zone.name,
           label: zone.name.toUpperCase()
-        })),
-      { id: 'any', label: t('standalone.port_forward.any_zone') }
+        }))
     ]
   }
 })
@@ -129,13 +129,14 @@ async function fetchOptions() {
       })
     )
     wanInterfaces.value = [
+      { id: 'any', label: t('standalone.port_forward.any') },
       ...(await ubusCall('ns.redirects', 'list-wans')).data.wans.map(
         (iface: { device: string; ipaddr: string }) => ({
           id: iface.ipaddr,
-          label: iface.ipaddr
+          label: iface.ipaddr,
+          description: iface.device
         })
-      ),
-      { id: 'any', label: t('standalone.port_forward.any') }
+      )
     ]
     loading.value = false
   } catch (err: any) {
@@ -284,10 +285,6 @@ async function performRequest() {
         v-model="name"
         :invalid-message="validationErrorBag.getFirstFor('name')"
       />
-      <div>
-        <p class="mb-2 text-sm">{{ t('standalone.port_forward.source_zone') }}</p>
-        <p class="text-sm">WAN</p>
-      </div>
       <NeCombobox
         :label="t('standalone.port_forward.protocols')"
         :placeholder="t('standalone.port_forward.choose_protocol')"

From 556f0f2f3cd3604b96301cb32f30ae0fe8b48999 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Tue, 3 Oct 2023 14:21:19 +0000
Subject: [PATCH 08/13] fix: add card when no port forward is present

---
 public/i18n/en/translation.json               |  7 ++-
 src/views/standalone/firewall/PortForward.vue | 52 +++++++++++++++----
 2 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 5f08a6815..057f388bb 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -493,7 +493,10 @@
       "any_zone": "Any zone",
       "any": "Any",
       "destination_address_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      "restrict_access_to_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+      "restrict_access_to_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "no_port_forward_configured": "No port forward has been configured.",
+      "no_port_forward_found": "No port forward has been found.",
+      "filter_change_suggestion": "Try using a different filter value."
     },
     "firewall": {
       "title": "Firewall"
@@ -522,4 +525,4 @@
       "title": "Logs"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/standalone/firewall/PortForward.vue b/src/views/standalone/firewall/PortForward.vue
index 52ba15f07..4c2afab6e 100644
--- a/src/views/standalone/firewall/PortForward.vue
+++ b/src/views/standalone/firewall/PortForward.vue
@@ -203,17 +203,47 @@ onMounted(() => {
       v-if="error.notificationDescription"
     />
     <NeSkeleton v-if="loading" :lines="10" />
-    <PortForwardTable
-      v-else
-      v-for="(portForward, key) in filteredPortForwards"
-      :key="key"
-      :port-forwards="portForward"
-      :header="key"
-      @port-forward-delete="openDeleteModal"
-      @port-forward-duplicate="duplicateRedirect"
-      @port-forward-edit="openCreateEditDrawer"
-      @port-forward-toggle-enable="toggleEnableRedirect"
-    />
+    <template v-else>
+      <div
+        v-if="Object.keys(portForwards).length == 0"
+        class="flex flex-col items-center justify-center rounded-md p-10 dark:bg-gray-800"
+      >
+        <p class="mb-4 text-sm">
+          <strong>{{ t('standalone.port_forward.no_port_forward_configured') }}</strong>
+        </p>
+        <NeButton kind="primary" @click="openCreateEditDrawer(null)"
+          ><template #prefix>
+            <font-awesome-icon
+              :icon="['fas', 'circle-plus']"
+              class="h-4 w-4"
+              aria-hidden="true"
+            /> </template
+          >{{ t('standalone.port_forward.add_port_forward') }}</NeButton
+        >
+      </div>
+      <div
+        v-else-if="Object.keys(filteredPortForwards).length == 0"
+        class="flex flex-col items-center justify-center rounded-md p-10 dark:bg-gray-800"
+      >
+        <p class="mb-4 text-sm">
+          <strong>{{ t('standalone.port_forward.no_port_forward_found') }}</strong>
+        </p>
+        <p class="text-sm">
+          <strong>{{ t('standalone.port_forward.filter_change_suggestion') }}</strong>
+        </p>
+      </div>
+      <PortForwardTable
+        v-else
+        v-for="(portForward, key) in filteredPortForwards"
+        :key="key"
+        :port-forwards="portForward"
+        :header="key"
+        @port-forward-delete="openDeleteModal"
+        @port-forward-duplicate="duplicateRedirect"
+        @port-forward-edit="openCreateEditDrawer"
+        @port-forward-toggle-enable="toggleEnableRedirect"
+      />
+    </template>
   </div>
   <CreateOrEditPortForwardDrawer
     :is-shown="showCreateEditDrawer"

From 8b22d7567f24276ed462e37e085da0f719acf665 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Tue, 3 Oct 2023 15:39:27 +0000
Subject: [PATCH 09/13] fix: invalid port translation message

---
 public/i18n/en/translation.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index b54bde146..11e187618 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -35,7 +35,7 @@
     "invalid_ip_v6_address": "Invalid IPv6 address",
     "invalid_cidr_v4_address": "Enter a valid IPv4 address with CIDR notation",
     "invalid_cidr_v6_address": "Enter a valid IPv6 address with CIDR notation",
-    "invalid_port": "Enter an integer number between 0 and 65535",
+    "invalid_port": "Enter an integer number between 1 and 65565",
     "invalid_uci_name": "Only letters, numbers and underscore (_) are allowed",
     "cannot_apply_configuration_changes": "Cannot apply configuration changes",
     "cannot_revert_configuration_changes": "Cannot revert configuration changes",

From d6560f007559834ec53edbad9bfd19ecd79732d1 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Tue, 3 Oct 2023 15:55:35 +0000
Subject: [PATCH 10/13] fix: minor changes in ui

- increase margin below title in NeMultiTextInput
- remove commas from translation items
- use different gray gradient for disabled items in PortForwardTable
- change name of duplicate port forwards
---
 public/i18n/en/translation.json                      |  7 ++++---
 src/components/standalone/NeMultiTextInput.vue       |  2 +-
 .../standalone/firewall/PortForwardTable.vue         | 11 ++---------
 src/views/standalone/firewall/PortForward.vue        | 12 ++++++------
 4 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 11e187618..9f46ae00b 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -501,9 +501,10 @@
       "any": "Any",
       "destination_address_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
       "restrict_access_to_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      "no_port_forward_configured": "No port forward has been configured.",
-      "no_port_forward_found": "No port forward has been found.",
-      "filter_change_suggestion": "Try using a different filter value."
+      "no_port_forward_configured": "No port forward has been configured",
+      "no_port_forward_found": "No port forward has been found",
+      "filter_change_suggestion": "Try using a different filter value",
+      "copy": "Copy"
     },
     "firewall": {
       "title": "Firewall"
diff --git a/src/components/standalone/NeMultiTextInput.vue b/src/components/standalone/NeMultiTextInput.vue
index e9775751d..8c95712d1 100644
--- a/src/components/standalone/NeMultiTextInput.vue
+++ b/src/components/standalone/NeMultiTextInput.vue
@@ -47,7 +47,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <div v-if="title" class="mb-2 flex items-end justify-between">
+    <div v-if="title" class="mb-4 flex items-end justify-between">
       <div>
         <span class="mr-2 text-sm font-medium leading-6 text-gray-700 dark:text-gray-200">
           {{ title }}
diff --git a/src/components/standalone/firewall/PortForwardTable.vue b/src/components/standalone/firewall/PortForwardTable.vue
index 53cf42d64..39dc6d343 100644
--- a/src/components/standalone/firewall/PortForwardTable.vue
+++ b/src/components/standalone/firewall/PortForwardTable.vue
@@ -92,7 +92,7 @@ function getDropdownItems(item: PortForward) {
 }
 
 function getCellClasses(item: PortForward) {
-  return !item.enabled ? ['text-gray-300', 'dark:text-gray-700'] : []
+  return !item.enabled ? ['text-gray-400', 'dark:text-gray-700'] : []
 }
 </script>
 
@@ -144,14 +144,7 @@ function getCellClasses(item: PortForward) {
         <p :class="[...getCellClasses(item)]" v-else>-</p>
       </template>
       <template #enabled="{ item }: { item: PortForward }">
-        <div
-          :class="[
-            'flex',
-            'flex-row',
-            'items-center',
-            !item.enabled ? 'text-gray-200 dark:text-gray-700' : ''
-          ]"
-        >
+        <div :class="['flex', 'flex-row', 'items-center', ...getCellClasses(item)]">
           <font-awesome-icon
             :icon="['fas', item.enabled ? 'circle-check' : 'circle-xmark']"
             class="mr-2 h-5 w-5"
diff --git a/src/views/standalone/firewall/PortForward.vue b/src/views/standalone/firewall/PortForward.vue
index 4c2afab6e..dd18de564 100644
--- a/src/views/standalone/firewall/PortForward.vue
+++ b/src/views/standalone/firewall/PortForward.vue
@@ -110,7 +110,7 @@ async function reloadPortForwards() {
   await fetchPortForwards()
 }
 
-async function toggleEnableRedirect(item: PortForward) {
+async function toggleEnablePortForward(item: PortForward) {
   try {
     cleanError()
     await ubusCall('ns.redirects', item.enabled ? 'disable-redirect' : 'enable-redirect', {
@@ -125,7 +125,7 @@ async function toggleEnableRedirect(item: PortForward) {
   }
 }
 
-async function duplicateRedirect(item: PortForward) {
+async function duplicatePortForward(item: PortForward) {
   try {
     cleanError()
     let payload: CreateEditPortForwardPayload = {
@@ -134,7 +134,7 @@ async function duplicateRedirect(item: PortForward) {
       src_dport: item.source_port,
       src_dip: item.wan,
       dest_port: item.destination_port,
-      name: item.name,
+      name: `${item.name} (${t('standalone.port_forward.copy')})`,
       enabled: item.enabled ? '1' : '0',
       log: item.log ? '1' : '0',
       restrict: item.restrict,
@@ -229,7 +229,7 @@ onMounted(() => {
           <strong>{{ t('standalone.port_forward.no_port_forward_found') }}</strong>
         </p>
         <p class="text-sm">
-          <strong>{{ t('standalone.port_forward.filter_change_suggestion') }}</strong>
+          {{ t('standalone.port_forward.filter_change_suggestion') }}
         </p>
       </div>
       <PortForwardTable
@@ -239,9 +239,9 @@ onMounted(() => {
         :port-forwards="portForward"
         :header="key"
         @port-forward-delete="openDeleteModal"
-        @port-forward-duplicate="duplicateRedirect"
+        @port-forward-duplicate="duplicatePortForward"
         @port-forward-edit="openCreateEditDrawer"
-        @port-forward-toggle-enable="toggleEnableRedirect"
+        @port-forward-toggle-enable="toggleEnablePortForward"
       />
     </template>
   </div>

From 82f6c23822f6e5f2bf9dd4a4dca85c6a33484900 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Wed, 4 Oct 2023 14:07:45 +0000
Subject: [PATCH 11/13] fix: translations, max port in port validator

---
 public/i18n/en/translation.json | 12 ++++++------
 src/lib/validation.ts           |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 9f46ae00b..8ce659b71 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -35,7 +35,7 @@
     "invalid_ip_v6_address": "Invalid IPv6 address",
     "invalid_cidr_v4_address": "Enter a valid IPv4 address with CIDR notation",
     "invalid_cidr_v6_address": "Enter a valid IPv6 address with CIDR notation",
-    "invalid_port": "Enter an integer number between 1 and 65565",
+    "invalid_port": "Enter an integer number between 1 and 65535",
     "invalid_uci_name": "Only letters, numbers and underscore (_) are allowed",
     "cannot_apply_configuration_changes": "Cannot apply configuration changes",
     "cannot_revert_configuration_changes": "Cannot revert configuration changes",
@@ -476,7 +476,7 @@
       "destination_port": "Destination port",
       "protocols": "Protocols",
       "wan_ip": "WAN IP",
-      "restrict_access_to": "Restrict Access to",
+      "restrict_access_to": "Restrict access to",
       "status": "Status",
       "enabled": "Enabled",
       "disabled": "Disabled",
@@ -485,7 +485,7 @@
       "disable": "Disable",
       "duplicate": "Duplicate",
       "delete_port_forward": "Delete port forward",
-      "delete_port_forward_message": "You are about to delete port forward {name}",
+      "delete_port_forward_message": "You are about to delete port forward '{name}'",
       "destination": "Destination",
       "edit_port_forward": "Edit port forward",
       "destination_address": "Destination address",
@@ -501,9 +501,9 @@
       "any": "Any",
       "destination_address_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
       "restrict_access_to_tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-      "no_port_forward_configured": "No port forward has been configured",
-      "no_port_forward_found": "No port forward has been found",
-      "filter_change_suggestion": "Try using a different filter value",
+      "no_port_forward_configured": "No port forward configured",
+      "no_port_forward_found": "No port forward found",
+      "filter_change_suggestion": "Try changing filter value",
       "copy": "Copy"
     },
     "firewall": {
diff --git a/src/lib/validation.ts b/src/lib/validation.ts
index ce8f32aac..f0f3b4f23 100644
--- a/src/lib/validation.ts
+++ b/src/lib/validation.ts
@@ -200,7 +200,7 @@ export const validateVlanId = (value: String): validationOutput => {
   return { valid: true }
 }
 
-export function validatePort(value: string, minPort = 1, maxPort = 65565): validationOutput {
+export function validatePort(value: string, minPort = 1, maxPort = 65535): validationOutput {
   const port = Number.parseInt(value)
 
   if (Number.isNaN(port) || port < minPort || port > maxPort) {
@@ -209,7 +209,7 @@ export function validatePort(value: string, minPort = 1, maxPort = 65565): valid
   return { valid: true }
 }
 
-export function validatePortRange(value: string, minRange = 1, maxRange = 65565): validationOutput {
+export function validatePortRange(value: string, minRange = 1, maxRange = 65535): validationOutput {
   let strings: string[]
   if (value.indexOf(',')) {
     strings = value.split(',')

From 1188fd25366a3723c2a3e1ec0fd6ed4f352f8884 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Wed, 4 Oct 2023 14:09:41 +0000
Subject: [PATCH 12/13] fix: change arrow icons in advanced settings

---
 .../standalone/firewall/CreateOrEditPortForwardDrawer.vue     | 2 +-
 src/lib/fontawesome.ts                                        | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index 2342e7194..5d7490efb 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -330,7 +330,7 @@ async function performRequest() {
           {{ t('standalone.port_forward.advanced_settings') }}
           <template #suffix>
             <font-awesome-icon
-              :icon="['fas', showAdvancedSettings ? 'angle-up' : 'angle-down']"
+              :icon="['fas', showAdvancedSettings ? 'chevron-up' : 'chevron-down']"
               class="h-4 w-4"
               aria-hidden="true"
             />
diff --git a/src/lib/fontawesome.ts b/src/lib/fontawesome.ts
index 2ea0a0195..76f8f48e6 100644
--- a/src/lib/fontawesome.ts
+++ b/src/lib/fontawesome.ts
@@ -63,8 +63,6 @@ import { faShield as fasShield } from '@fortawesome/free-solid-svg-icons'
 import { faCircleInfo as fasCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { faEmptySet } from '@nethesis/nethesis-solid-svg-icons'
 import { faClone as faClone } from '@fortawesome/free-solid-svg-icons'
-import { faAngleUp as faAngleUp } from '@fortawesome/free-solid-svg-icons'
-import { faAngleDown as faAngleDown } from '@fortawesome/free-solid-svg-icons'
 
 export async function loadFontAwesome(app: any) {
   app.component('FontAwesomeIcon', FontAwesomeIcon)
@@ -127,8 +125,6 @@ export async function loadFontAwesome(app: any) {
   library.add(faArrowRight)
   library.add(faEmptySet)
   library.add(faClone)
-  library.add(faAngleUp)
-  library.add(faAngleDown)
   library.add(faUserGear)
   library.add(faCircleStop)
 }

From ac565319e1de6db50c3945ab7cea14b16dd0f2a5 Mon Sep 17 00:00:00 2001
From: Kevin Cela <kevin.cela@aidaptsrl.com>
Date: Wed, 4 Oct 2023 14:20:29 +0000
Subject: [PATCH 13/13] fix: use different error messages fetching options

---
 public/i18n/en/translation.json               |  5 +++-
 .../CreateOrEditPortForwardDrawer.vue         | 25 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
index 8ce659b71..565d4a9a3 100644
--- a/public/i18n/en/translation.json
+++ b/public/i18n/en/translation.json
@@ -62,7 +62,10 @@
     "cannot_edit_port_forward": "Cannot edit port forward",
     "cannot_duplicate_port_forward": "Cannot duplicate port forward",
     "cannot_enable_port_forward": "Cannot enable port forward",
-    "cannot_disable_port_forward": "Cannot disable port forward"
+    "cannot_disable_port_forward": "Cannot disable port forward",
+    "cannot_retrieve_protocols": "Cannot retrieve protocols",
+    "cannot_retrieve_zones": "Cannot retrieve zones",
+    "cannot_retrieve_wan_interfaces": "Cannot retrieve WAN interfaces"
   },
   "ne_text_input": {
     "show_password": "Show password",
diff --git a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
index 5d7490efb..dcf19e98c 100644
--- a/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
+++ b/src/components/standalone/firewall/CreateOrEditPortForwardDrawer.vue
@@ -114,20 +114,34 @@ function resetForm() {
 const { t } = useI18n()
 
 async function fetchOptions() {
+  loading.value = true
   try {
-    loading.value = true
     supportedProtocols.value = (
       await ubusCall('ns.redirects', 'list-protocols')
     ).data.protocols.map((proto: string) => ({
       id: proto,
       label: proto.toUpperCase()
     }))
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_retrieve_protocols')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    return
+  }
+
+  try {
     supportedReflectionZones.value = (await ubusCall('ns.redirects', 'list-zones')).data.zones.map(
       (zone: string) => ({
         id: zone,
         label: zone.toUpperCase()
       })
     )
+  } catch (err: any) {
+    error.value.notificationTitle = t('error.cannot_retrieve_zones')
+    error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    return
+  }
+
+  try {
     wanInterfaces.value = [
       { id: 'any', label: t('standalone.port_forward.any') },
       ...(await ubusCall('ns.redirects', 'list-wans')).data.wans.map(
@@ -138,11 +152,12 @@ async function fetchOptions() {
         })
       )
     ]
-    loading.value = false
   } catch (err: any) {
-    error.value.notificationTitle = t('error.generic_error')
+    error.value.notificationTitle = t('error.cannot_retrieve_wan_interfaces')
     error.value.notificationDescription = t(getAxiosErrorMessage(err))
+    return
   }
+  loading.value = false
 }
 
 watchEffect(() => {
@@ -218,7 +233,7 @@ function validate(): boolean {
   )
 }
 
-async function performRequest() {
+async function createOrEditPortForward() {
   const isEditing = id.value != ''
 
   try {
@@ -378,7 +393,7 @@ async function performRequest() {
         <NeButton kind="tertiary" class="mr-4" @click="close()">{{ t('common.cancel') }}</NeButton>
         <NeButton
           kind="primary"
-          @click="performRequest()"
+          @click="createOrEditPortForward()"
           :disabled="isSubmittingRequest"
           :loading="isSubmittingRequest"
           >{{ id ? t('common.save') : t('standalone.port_forward.add_port_forward') }}</NeButton