(cloudstack) 01/01: UI: Add validator for CIDR being passed

[pearl11594]

This is an automated email from the ASF dual-hosted git repository.

pearl11594 pushed a commit to branch add-cidr-check
in repository https://gitbox.apache.org/repos/asf/cloudstack.git

commit 068acba734f2ee939ca58f22b28b8825cc3170da
Author: Pearl Dsilva <pearl1...@gmail.com>
AuthorDate: Mon Aug 18 15:48:26 2025 -0400

    UI: Add validator for CIDR being passed
---
 ui/src/utils/util.js               | 22 ++++++++++++++++++++++
 ui/src/views/network/CreateVpc.vue |  4 +++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/ui/src/utils/util.js b/ui/src/utils/util.js
index 8773f07446e..75a64106ca7 100644
--- a/ui/src/utils/util.js
+++ b/ui/src/utils/util.js
@@ -102,3 +102,25 @@ export function toCsv ({ keys = null, data = null, 
columnDelimiter = ',', lineDe
 
   return result
 }
+
+export function isValidIPv4Cidr (rule, value) {
+  console.log('here')
+  return new Promise((resolve, reject) => {
+    if (!value) {
+      reject(new Error('Required input'))
+      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()
+  })
+}
diff --git a/ui/src/views/network/CreateVpc.vue 
b/ui/src/views/network/CreateVpc.vue
index 98e8bb408c1..2e76c2ded1f 100644
--- a/ui/src/views/network/CreateVpc.vue
+++ b/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 = [{ validator: isValidIPv4Cidr }]
       } else {
         delete this.rules.cidr
       }