From 068acba734f2ee939ca58f22b28b8825cc3170da Mon Sep 17 00:00:00 2001 From: Pearl Dsilva Date: Mon, 18 Aug 2025 15:48:26 -0400 Subject: [PATCH 1/2] 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 8773f07446e6..75a64106ca75 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 98e8bb408c1c..2e76c2ded1f2 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 } From 27408f7f40a278c96ec3b114ab3c60d5a3afa1b5 Mon Sep 17 00:00:00 2001 From: Pearl Dsilva Date: Fri, 10 Oct 2025 10:59:12 -0400 Subject: [PATCH 2/2] retain mandatory field indicator, remove log --- ui/src/utils/util.js | 3 +-- ui/src/views/network/CreateVpc.vue | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/src/utils/util.js b/ui/src/utils/util.js index 75a64106ca75..3c51096ac53e 100644 --- a/ui/src/utils/util.js +++ b/ui/src/utils/util.js @@ -104,10 +104,9 @@ export function toCsv ({ keys = null, data = null, columnDelimiter = ',', lineDe } export function isValidIPv4Cidr (rule, value) { - console.log('here') return new Promise((resolve, reject) => { if (!value) { - reject(new Error('Required input')) + reject(new Error()) return } const cidrRegex = /^(\d{1,3}\.){3}\d{1,3}\/([0-9]|[1-2][0-9]|3[0-2])$/ diff --git a/ui/src/views/network/CreateVpc.vue b/ui/src/views/network/CreateVpc.vue index 2e76c2ded1f2..2218662076e6 100644 --- a/ui/src/views/network/CreateVpc.vue +++ b/ui/src/views/network/CreateVpc.vue @@ -419,7 +419,7 @@ export default { }, updateCidrRule () { if (!this.selectedVpcOfferingHavingRoutedNetworkMode) { - this.rules.cidr = [{ validator: isValidIPv4Cidr }] + this.rules.cidr = [{ required: true, message: this.$t('message.error.required.input') }, { validator: isValidIPv4Cidr }] } else { delete this.rules.cidr }