fix(mwan): mimic firewall rules form

Ensure the rule form in MWAN mimics the format and layout of the firewall rules form to provide a consistent user experience
NethServer · Aug 6, 2024 · 6218ff8 · 6218ff8
1 parent a810764
commit 6218ff8
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 24 deletions.
diff --git a/public/i18n/en/translation.json b/public/i18n/en/translation.json
@@ -970,16 +970,14 @@
       "protocol_udp": "UDP",
       "protocol_icmp": "ICMP",
       "protocol_all": "All",
-      "address_options": {
-        "any": "Any",
-        "address": "Address",
-        "object": "Object"
-      },
+      "address_options_address": "Enter one address",
+      "address_options_object": "Select an object",
+      "address_options_any_src": "Any source address",
+      "address_options_any_dst": "Any destination address",
       "source_type": "Source type",
       "destination_type": "Destination type",
       "source_object": "Source object",
       "enter_address": "Enter an address",
-      "select_an_object": "Select an object",
       "destination_object": "Destination object"
     },
     "dns_dhcp": {

diff --git a/src/components/standalone/multi-wan/RuleCreator.vue b/src/components/standalone/multi-wan/RuleCreator.vue
@@ -45,7 +45,8 @@ const {
   sticky,
   validationErrors,
   isValid,
-  addressOptions,
+  srcAddressOptions,
+  dstAddressOptions,
   srcType,
   dstType,
   objectsLoading,
@@ -72,8 +73,8 @@ function cleanForm() {
   destinationPort.value = ''
   validationErrors.value.clear()
   sticky.value = false
-  srcType.value = 'any'
-  dstType.value = 'any'
+  srcType.value = 'address'
+  dstType.value = 'address'
   srcObject.value = ''
   dstObject.value = ''
 }
@@ -190,7 +191,7 @@ function save() {
         v-model="srcType"
         :disabled="saving"
         :label="t('standalone.multi_wan.source_type')"
-        :options="addressOptions"
+        :options="srcAddressOptions"
       />
       <NeTextInput
         v-if="srcType == 'address'"
@@ -204,7 +205,7 @@ function save() {
         v-if="srcType == 'object'"
         v-model="srcObject"
         :disabled="saving"
-        :label="t('standalone.multi_wan.select_an_object')"
+        :label="t('standalone.multi_wan.source_object')"
         :options="srcObjectOptions"
         :placeholder="objectsLoading ? t('common.loading') : t('ne_combobox.choose')"
         :invalid-message="t(validationErrors.getFirstI18nKeyFor('ns_src'))"
@@ -236,7 +237,7 @@ function save() {
         v-model="dstType"
         :disabled="saving"
         :label="t('standalone.multi_wan.destination_type')"
-        :options="addressOptions"
+        :options="dstAddressOptions"
       />
       <NeTextInput
         v-if="dstType == 'address'"
@@ -250,7 +251,7 @@ function save() {
         v-if="dstType == 'object'"
         v-model="dstObject"
         :disabled="saving"
-        :label="t('standalone.multi_wan.select_an_object')"
+        :label="t('standalone.multi_wan.destination_object')"
         :options="dstObjectOptions"
         :placeholder="objectsLoading ? t('common.loading') : t('ne_combobox.choose')"
         :invalid-message="t(validationErrors.getFirstI18nKeyFor('ns_dst'))"

diff --git a/src/components/standalone/multi-wan/RuleEditor.vue b/src/components/standalone/multi-wan/RuleEditor.vue
@@ -41,7 +41,8 @@ const {
   sticky,
   validationErrors,
   isValid,
-  addressOptions,
+  srcAddressOptions,
+  dstAddressOptions,
   srcType,
   dstType,
   objectsLoading,
@@ -134,7 +135,10 @@ function save() {
           error.value = reason
         }
       })
-      .finally(() => (saving.value = false))
+      .finally(() => {
+        saving.value = false
+        cleanForm()
+      })
   }
 }
 </script>
@@ -188,7 +192,7 @@ function save() {
         v-model="srcType"
         :disabled="saving"
         :label="t('standalone.multi_wan.source_type')"
-        :options="addressOptions"
+        :options="srcAddressOptions"
       />
       <NeTextInput
         v-if="srcType == 'address'"
@@ -235,7 +239,7 @@ function save() {
         v-model="dstType"
         :disabled="saving"
         :label="t('standalone.multi_wan.destination_type')"
-        :options="addressOptions"
+        :options="dstAddressOptions"
       />
       <NeTextInput
         v-if="dstType == 'address'"

diff --git a/src/composables/useRuleForm.ts b/src/composables/useRuleForm.ts
@@ -101,14 +101,20 @@ export function useRuleForm(policies: Ref<Policy[]>, rule?: Ref<Rule | undefined
 
   type AddressType = 'any' | 'address' | 'object'
 
-  const addressOptions: { id: AddressType; label: string }[] = [
-    { id: 'any', label: t('standalone.multi_wan.address_options.any') },
-    { id: 'address', label: t('standalone.multi_wan.address_options.address') },
-    { id: 'object', label: t('standalone.multi_wan.address_options.object') }
+  const srcAddressOptions: { id: AddressType; label: string }[] = [
+    { id: 'address', label: t('standalone.multi_wan.address_options_address') },
+    { id: 'any', label: t('standalone.multi_wan.address_options_any_src') },
+    { id: 'object', label: t('standalone.multi_wan.address_options_object') }
   ]
 
-  const srcType = ref<AddressType>('any')
-  const dstType = ref<AddressType>('any')
+  const dstAddressOptions: { id: AddressType; label: string }[] = [
+    { id: 'address', label: t('standalone.multi_wan.address_options_address') },
+    { id: 'any', label: t('standalone.multi_wan.address_options_any_dst') },
+    { id: 'object', label: t('standalone.multi_wan.address_options_object') }
+  ]
+
+  const srcType = ref<AddressType>('address')
+  const dstType = ref<AddressType>('address')
 
   type ObjectResponse = {
     objects: {
@@ -210,7 +216,8 @@ export function useRuleForm(policies: Ref<Policy[]>, rule?: Ref<Rule | undefined
     isValid,
     srcType,
     dstType,
-    addressOptions,
+    srcAddressOptions,
+    dstAddressOptions,
     objectsLoading,
     objectsError,
     srcObject,