From 58d729eee568b2fe0e2c49fe588f36027b0b05c2 Mon Sep 17 00:00:00 2001
From: Manoj Kumar <manojkr.itbhu@gmail.com>
Date: Thu, 13 Nov 2025 16:25:04 +0530
Subject: [PATCH 1/2] Support iprange while creating remote access vpn

---
 ui/public/locales/en.json           |   2 +
 ui/src/views/network/VpnDetails.vue | 252 ++++++++++++++++------------
 2 files changed, 145 insertions(+), 109 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 805ea1adae94..7d3a0b2d3a2b 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -1588,6 +1588,8 @@
 "label.migrate.instance.specific.storages": "Migrate volume(s) of the Instance to specific primary storages",
 "label.migrate.systemvm.to": "Migrate System VM to",
 "label.migrate.volume": "Migrate Volume",
+"label.specify.iprange": "Specify IP Range",
+"message.iprange.description": "The range of IP addresses to allocate to VPN clients. The first IP in the range will be taken by the VPN server. (Optional)",
 "message.memory.usage.info.hypervisor.additionals": "The data shown may not reflect the actual memory usage if the Instance does not have the additional hypervisor tools installed",
 "message.memory.usage.info.negative.value": "If the Instance's memory usage cannot be obtained from the hypervisor, the lines for free memory in the raw data graph and memory usage in the percentage graph will be disabled",
 "message.migrate.volume.tooltip": "Volume can be migrated to any suitable storage pool. Admin has to choose the appropriate disk offering to replace, that supports the new storage pool",
diff --git a/ui/src/views/network/VpnDetails.vue b/ui/src/views/network/VpnDetails.vue
index c0cc4c6c2f1b..88aa71b278a1 100644
--- a/ui/src/views/network/VpnDetails.vue
+++ b/ui/src/views/network/VpnDetails.vue
@@ -16,131 +16,153 @@
 // under the License.
 
 <template>
-  <div v-if="remoteAccessVpn">
-    <div>
-      <p>{{ $t('message.enabled.vpn') }} <strong>{{ remoteAccessVpn.publicip }}</strong></p>
-      <p>{{ $t('message.enabled.vpn.ip.sec') }} <strong>{{ remoteAccessVpn.presharedkey }}</strong></p>
-      <a-divider/>
-      <a-button
-        style="margin-left: 10px"
-        type="primary"
-        danger
-        @click="disableVpn = true"
-        :disabled="!('deleteRemoteAccessVpn' in $store.getters.apis)">
-        {{ $t('label.disable.vpn') }}
-      </a-button>
-      <a-button><router-link :to="{ path: '/vpnuser'}">{{ $t('label.manage.vpn.user') }}</router-link></a-button>
-    </div>
+  <div class="vpn-details">
 
-    <a-modal
-      :visible="disableVpn"
-      :footer="null"
-      :title="$t('label.disable.vpn')"
-      :closable="true"
-      :maskClosable="false"
-      @cancel="disableVpn = false">
-      <div v-ctrl-enter="handleDisableVpn">
-        <p>{{ $t('message.disable.vpn') }}</p>
-
-        <a-divider />
-
-        <div class="actions">
-          <a-button @click="() => disableVpn = false">{{ $t('label.cancel') }}</a-button>
-          <a-button type="primary" @click="handleDisableVpn">{{ $t('label.yes') }}</a-button>
-        </div>
+    <div v-if="remoteAccessVpn">
+      <div>
+        <p>{{ $t('message.enabled.vpn') }} <strong>{{ remoteAccessVpn.publicip }}</strong></p>
+        <p>{{ $t('message.enabled.vpn.ip.sec') }} <strong>{{ remoteAccessVpn.presharedkey }}</strong></p>
+        <a-divider/>
+        <a-button
+          style="margin-left: 10px"
+          type="primary"
+          danger
+          @click="disableVpn = true"
+          :disabled="!('deleteRemoteAccessVpn' in $store.getters.apis)">
+          {{ $t('label.disable.vpn') }}
+        </a-button>
+        <a-button><router-link :to="{ path: '/vpnuser'}">{{ $t('label.manage.vpn.user') }}</router-link></a-button>
       </div>
-    </a-modal>
-
-  </div>
-  <div v-else>
-    <a-button
-      :disabled="!('createRemoteAccessVpn' in $store.getters.apis)"
-      type="primary"
-      style="margin-left: 10px"
-      @click="enableVpn = true">
-      {{ $t('label.enable.vpn') }}
-    </a-button>
 
-    <a-modal
-      :visible="enableVpn"
-      :footer="null"
-      :title="$t('label.enable.vpn')"
-      :maskClosable="false"
-      :closable="true"
-      @cancel="enableVpn = false">
-      <div v-ctrl-enter="handleCreateVpn">
-        <p>{{ $t('message.enable.vpn') }}</p>
+      <a-modal
+        :visible="disableVpn"
+        :footer="null"
+        :title="$t('label.disable.vpn')"
+        :closable="true"
+        :maskClosable="false"
+        @cancel="disableVpn = false">
+        <div v-ctrl-enter="handleDisableVpn">
+          <p>{{ $t('message.disable.vpn') }}</p>
 
-        <a-divider />
+          <a-divider />
 
-        <div class="actions">
-          <a-button @click="() => enableVpn = false">{{ $t('label.cancel') }}</a-button>
-          <a-button type="primary" ref="submit" @click="handleCreateVpn">{{ $t('label.yes') }}</a-button>
+          <div class="actions">
+            <a-button @click="() => disableVpn = false">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" @click="handleDisableVpn">{{ $t('label.yes') }}</a-button>
+          </div>
         </div>
-      </div>
-    </a-modal>
-
-  </div>
+      </a-modal>
 
-  <br>
-  <div v-if="vpnGateway">
-    <div>
-      <a-button
-        :disabled="!('deleteVpnGateway' in $store.getters.apis)"
-        style="margin-left: 10px"
-        danger
-        type="primary"
-        @click="deleteVpnGateway = true">
-        {{ $t('label.delete.vpn.gateway') }}
-      </a-button>
     </div>
-    <a-modal
-      :visible="deleteVpnGateway"
-      :footer="null"
-      :title="$t('label.enable.vpn')"
-      :maskClosable="false"
-      :closable="true"
-      @cancel="deleteVpnGateway = false">
-      <div v-ctrl-enter="handleDeleteVpnGateway">
-        <p>{{ $t('message.delete.vpn.gateway') }}</p>
-        <div :span="24" class="action-button">
-          <a-button @click="deleteVpnGateway = false">{{ $t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleDeleteVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-  <div v-else-if="vpnGatewayEnabled">
-    <div>
+    <div v-else>
       <a-button
-        :disabled="!('createVpnGateway' in $store.getters.apis)"
-        style="margin-left: 10px"
+        :disabled="!('createRemoteAccessVpn' in $store.getters.apis)"
         type="primary"
-        @click="createVpnGateway = true">
-        {{ $t('label.add.vpn.gateway') }}
+        style="margin-left: 10px"
+        @click="enableVpn = true">
+        {{ $t('label.enable.vpn') }}
       </a-button>
+
+      <a-modal
+        :visible="enableVpn"
+        :footer="null"
+        :title="$t('label.enable.vpn')"
+        :maskClosable="false"
+        :closable="true"
+        @cancel="enableVpn = false">
+        <div v-ctrl-enter="handleCreateVpn">
+          <p>{{ $t('message.enable.vpn') }}</p>
+
+          <a-form-item>
+            <a-checkbox v-model:checked="specifyIpRange">
+              {{ $t('label.specify.iprange') }}
+            </a-checkbox>
+          </a-form-item>
+          <a-form-item
+            v-if="specifyIpRange"
+            name="iprange"
+            :colon="false"
+            ref="iprange">
+            <template #label>
+              <tooltip-label :title="$t('label.ip.range')" :tooltip="$t('message.iprange.description')"/>
+            </template>
+            <a-input
+              v-model:value="vpnIpRange"
+              :placeholder="'10.1.2.1-10.1.2.8'"
+            />
+          </a-form-item>
+
+          <a-divider />
+
+          <div class="actions">
+            <a-button @click="() => enableVpn = false">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" ref="submit" @click="handleCreateVpn">{{ $t('label.yes') }}</a-button>
+          </div>
+        </div>
+      </a-modal>
+
     </div>
-    <a-modal
-      :visible="createVpnGateway"
-      :footer="null"
-      :title="$t('label.add.vpn.gateway')"
-      :maskClosable="false"
-      :closable="true"
-      @cancel="createVpnGateway = false">
-      <div v-ctrl-enter="handleCreateVpnGateway">
-        <p>{{ $t('message.add.vpn.gateway') }}</p>
-        <div :span="24" class="action-button">
-          <a-button @click="createVpnGateway = false">{{ $t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleCreateVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
+
+    <br/>
+    <div v-if="vpnGateway">
+      <div>
+        <a-button
+          :disabled="!('deleteVpnGateway' in $store.getters.apis)"
+          style="margin-left: 10px"
+          danger
+          type="primary"
+          @click="deleteVpnGateway = true">
+          {{ $t('label.delete.vpn.gateway') }}
+        </a-button>
+      </div>
+      <a-modal
+        :visible="deleteVpnGateway"
+        :footer="null"
+        :title="$t('label.enable.vpn')"
+        :maskClosable="false"
+        :closable="true"
+        @cancel="deleteVpnGateway = false">
+        <div v-ctrl-enter="handleDeleteVpnGateway">
+          <p>{{ $t('message.delete.vpn.gateway') }}</p>
+          <div :span="24" class="action-button">
+            <a-button @click="deleteVpnGateway = false">{{ $t('label.cancel') }}</a-button>
+            <a-button :loading="loading" type="primary" @click="handleDeleteVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
+          </div>
         </div>
+      </a-modal>
+    </div>
+    <div v-else-if="vpnGatewayEnabled">
+      <div>
+        <a-button
+          :disabled="!('createVpnGateway' in $store.getters.apis)"
+          style="margin-left: 10px"
+          type="primary"
+          @click="createVpnGateway = true">
+          {{ $t('label.add.vpn.gateway') }}
+        </a-button>
       </div>
-    </a-modal>
+      <a-modal
+        :visible="createVpnGateway"
+        :footer="null"
+        :title="$t('label.add.vpn.gateway')"
+        :maskClosable="false"
+        :closable="true"
+        @cancel="createVpnGateway = false">
+        <div v-ctrl-enter="handleCreateVpnGateway">
+          <p>{{ $t('message.add.vpn.gateway') }}</p>
+          <div :span="24" class="action-button">
+            <a-button @click="createVpnGateway = false">{{ $t('label.cancel') }}</a-button>
+            <a-button :loading="loading" type="primary" @click="handleCreateVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
   </div>
-
 </template>
 
 <script>
 import { getAPI, postAPI } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   props: {
@@ -149,6 +171,9 @@ export default {
       required: true
     }
   },
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       remoteAccessVpn: null,
@@ -158,7 +183,9 @@ export default {
       vpnGatewayEnabled: false,
       createVpnGateway: false,
       deleteVpnGateway: false,
-      isSubmitted: false
+      isSubmitted: false,
+      specifyIpRange: false,
+      vpnIpRange: ''
     }
   },
   inject: ['parentFetchData', 'parentToggleLoading'],
@@ -211,11 +238,15 @@ export default {
       this.isSubmitted = true
       this.parentToggleLoading()
       this.enableVpn = false
-      postAPI('createRemoteAccessVpn', {
+      const params = {
         publicipid: this.resource.id,
         domainid: this.resource.domainid,
         account: this.resource.account
-      }).then(response => {
+      }
+      if (this.specifyIpRange && this.vpnIpRange?.trim()) {
+        params.iprange = this.vpnIpRange.trim()
+      }
+      postAPI('createRemoteAccessVpn', params).then(response => {
         this.$pollJob({
           jobId: response.createremoteaccessvpnresponse.jobid,
           successMethod: result => {
@@ -387,4 +418,7 @@ export default {
       }
     }
   }
+  .vpn-details {
+    padding: 8px 0;
+  }
 </style>

From d183129e69199caa86b109c9ae8f9ce69fdd9f72 Mon Sep 17 00:00:00 2001
From: Manoj Kumar <manojkr.itbhu@gmail.com>
Date: Fri, 14 Nov 2025 16:15:11 +0530
Subject: [PATCH 2/2] address review comment

---
 ui/public/locales/en.json           | 4 ++--
 ui/src/views/network/VpnDetails.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 7d3a0b2d3a2b..07f11cf8f8c5 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -1588,8 +1588,6 @@
 "label.migrate.instance.specific.storages": "Migrate volume(s) of the Instance to specific primary storages",
 "label.migrate.systemvm.to": "Migrate System VM to",
 "label.migrate.volume": "Migrate Volume",
-"label.specify.iprange": "Specify IP Range",
-"message.iprange.description": "The range of IP addresses to allocate to VPN clients. The first IP in the range will be taken by the VPN server. (Optional)",
 "message.memory.usage.info.hypervisor.additionals": "The data shown may not reflect the actual memory usage if the Instance does not have the additional hypervisor tools installed",
 "message.memory.usage.info.negative.value": "If the Instance's memory usage cannot be obtained from the hypervisor, the lines for free memory in the raw data graph and memory usage in the percentage graph will be disabled",
 "message.migrate.volume.tooltip": "Volume can be migrated to any suitable storage pool. Admin has to choose the appropriate disk offering to replace, that supports the new storage pool",
@@ -2050,6 +2048,7 @@
 "label.release.dedicated.pod": "Release dedicated Pod",
 "label.release.dedicated.zone": "Release dedicated Zone",
 "label.releasing.ip": "Releasing IP",
+"label.remote.access.vpn.specify.iprange": "Specify IP Range of remote VPN",
 "label.remote.instances": "Remote Instances",
 "label.remove": "Remove",
 "label.remove.annotation": "Remove comment",
@@ -3695,6 +3694,7 @@
 "message.releasing.dedicated.host": "Releasing dedicated host...",
 "message.releasing.dedicated.pod": "Releasing dedicated Pod...",
 "message.releasing.dedicated.zone": "Releasing dedicated Zone...",
+"message.remote.access.vpn.iprange.description": "The range of IP addresses to allocate to VPN clients. The first IP in the range will be taken by the VPN server. (Optional)",
 "message.remove.annotation": "Are you sure you want to delete the comment?",
 "message.remove.egress.rule.failed": "Removing egress rule failed",
 "message.remove.egress.rule.processing": "Deleting egress rule...",
diff --git a/ui/src/views/network/VpnDetails.vue b/ui/src/views/network/VpnDetails.vue
index 88aa71b278a1..31ee9d73aecd 100644
--- a/ui/src/views/network/VpnDetails.vue
+++ b/ui/src/views/network/VpnDetails.vue
@@ -75,7 +75,7 @@
 
           <a-form-item>
             <a-checkbox v-model:checked="specifyIpRange">
-              {{ $t('label.specify.iprange') }}
+              {{ $t('label.remote.access.vpn.specify.iprange') }}
             </a-checkbox>
           </a-form-item>
           <a-form-item
@@ -84,7 +84,7 @@
             :colon="false"
             ref="iprange">
             <template #label>
-              <tooltip-label :title="$t('label.ip.range')" :tooltip="$t('message.iprange.description')"/>
+              <tooltip-label :title="$t('label.ip.range')" :tooltip="$t('message.remote.access.vpn.iprange.description')"/>
             </template>
             <a-input
               v-model:value="vpnIpRange"