UI: Add validator for CIDR being passed (#11465)

ui/src/utils/util.js

@@ -102,3 +102,24 @@ export function toCsv ({ keys = null, data = null, columnDelimiter = ',', lineDe
 
   return result
 }
+
+export function isValidIPv4Cidr (rule, value) {
+  return new Promise((resolve, reject) => {
+    if (!value) {
+      reject(new Error())
+      return
+    }
+    const cidrRegex = /^(\d{1,3}\.){3}\d{1,3}\/([0-9]|[1-2][0-9]|3[0-2])$/
+    if (!cidrRegex.test(value)) {
+      reject(new Error('Invalid CIDR format'))
+      return
+    }
+    const ip = value.split('/')[0]
+    const octets = ip.split('.').map(Number)
+    if (octets.some(octet => octet < 0 || octet > 255)) {
+      reject(new Error('Invalid CIDR format'))
+      return
+    }
+    resolve()
+  })
+}

ui/src/views/network/CreateVpc.vue

@@ -220,6 +220,7 @@
 import { ref, reactive, toRaw } from 'vue'
 import { getAPI, postAPI } from '@/api'
 import { isAdmin, isAdminOrDomainAdmin } from '@/role'
+import { isValidIPv4Cidr } from '@/utils/util.js'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
 import OwnershipSelection from '@/views/compute/wizard/OwnershipSelection.vue'
@@ -291,6 +292,7 @@ export default {
       this.rules = reactive({
         name: [{ required: true, message: this.$t('message.error.required.input') }],
         zoneid: [{ required: true, message: this.$t('label.required') }],
+        cidr: [{ validator: isValidIPv4Cidr }],
         vpcofferingid: [{ required: true, message: this.$t('label.required') }]
       })
     },
@@ -417,7 +419,7 @@ export default {
     },
     updateCidrRule () {
       if (!this.selectedVpcOfferingHavingRoutedNetworkMode) {
-        this.rules.cidr = [{ required: true, message: this.$t('message.error.required.input') }]
+        this.rules.cidr = [{ required: true, message: this.$t('message.error.required.input') }, { validator: isValidIPv4Cidr }]
       } else {
         delete this.rules.cidr
       }