2121 <p >{{ $t('message.enabled.vpn') }} <strong >{{ remoteAccessVpn.publicip }}</strong ></p >
2222 <p >{{ $t('message.enabled.vpn.ip.sec') }} <strong >{{ remoteAccessVpn.presharedkey }}</strong ></p >
2323 <a-divider />
24- <a-button ><router-link :to =" { path: '/vpnuser'}" >{{ $t('label.manage.vpn.user') }}</router-link ></a-button >
2524 <a-button
2625 style =" margin-left : 10px "
2726 type =" primary"
3029 :disabled =" !('deleteRemoteAccessVpn' in $store.getters.apis)" >
3130 {{ $t('label.disable.vpn') }}
3231 </a-button >
32+ <a-button ><router-link :to =" { path: '/vpnuser'}" >{{ $t('label.manage.vpn.user') }}</router-link ></a-button >
3333 </div >
3434
3535 <a-modal
5353
5454 </div >
5555 <div v-else >
56- <a-button :disabled =" !('createRemoteAccessVpn' in $store.getters.apis)" type =" primary" @click =" enableVpn = true" >
56+ <a-button
57+ :disabled =" !('createRemoteAccessVpn' in $store.getters.apis)"
58+ type =" primary"
59+ style =" margin-left : 10px "
60+ @click =" enableVpn = true" >
5761 {{ $t('label.enable.vpn') }}
5862 </a-button >
5963
7781 </a-modal >
7882
7983 </div >
84+
85+ <br >
86+ <div v-if =" vpnGateway" >
87+ <div >
88+ <a-button
89+ :disabled =" !('deleteVpnGateway' in $store.getters.apis)"
90+ style =" margin-left : 10px "
91+ danger
92+ type =" primary"
93+ @click =" deleteVpnGateway = true" >
94+ {{ $t('label.delete.vpn.gateway') }}
95+ </a-button >
96+ </div >
97+ <a-modal
98+ :visible =" deleteVpnGateway"
99+ :footer =" null"
100+ :title =" $t('label.enable.vpn')"
101+ :maskClosable =" false"
102+ :closable =" true"
103+ @cancel =" deleteVpnGateway = false" >
104+ <div v-ctrl-enter =" handleDeleteVpnGateway" >
105+ <p >{{ $t('message.delete.vpn.gateway') }}</p >
106+ <div :span =" 24" class =" action-button" >
107+ <a-button @click =" deleteVpnGateway = false" >{{ $t('label.cancel') }}</a-button >
108+ <a-button :loading =" loading" type =" primary" @click =" handleDeleteVpnGateway" ref =" submit" >{{ $t('label.ok') }}</a-button >
109+ </div >
110+ </div >
111+ </a-modal >
112+ </div >
113+ <div v-else-if =" vpnGatewayEnabled" >
114+ <div >
115+ <a-button
116+ :disabled =" !('createVpnGateway' in $store.getters.apis)"
117+ style =" margin-left : 10px "
118+ type =" primary"
119+ @click =" createVpnGateway = true" >
120+ {{ $t('label.add.vpn.gateway') }}
121+ </a-button >
122+ </div >
123+ <a-modal
124+ :visible =" createVpnGateway"
125+ :footer =" null"
126+ :title =" $t('label.add.vpn.gateway')"
127+ :maskClosable =" false"
128+ :closable =" true"
129+ @cancel =" createVpnGateway = false" >
130+ <div v-ctrl-enter =" handleCreateVpnGateway" >
131+ <p >{{ $t('message.add.vpn.gateway') }}</p >
132+ <div :span =" 24" class =" action-button" >
133+ <a-button @click =" createVpnGateway = false" >{{ $t('label.cancel') }}</a-button >
134+ <a-button :loading =" loading" type =" primary" @click =" handleCreateVpnGateway" ref =" submit" >{{ $t('label.ok') }}</a-button >
135+ </div >
136+ </div >
137+ </a-modal >
138+ </div >
139+
80140</template >
81141
82142<script >
@@ -94,6 +154,10 @@ export default {
94154 remoteAccessVpn: null ,
95155 enableVpn: false ,
96156 disableVpn: false ,
157+ vpnGateway: null ,
158+ vpnGatewayEnabled: false ,
159+ createVpnGateway: false ,
160+ deleteVpnGateway: false ,
97161 isSubmitted: false
98162 }
99163 },
@@ -124,6 +188,23 @@ export default {
124188 console .log (error)
125189 this .$notifyError (error)
126190 })
191+ if (this .resource .vpcid ) {
192+ this .vpnGatewayEnabled = true
193+ api (' listVpnGateways' , {
194+ vpcid: this .resource .vpcid ,
195+ listAll: true
196+ }).then (response => {
197+ const vpnGateways = response .listvpngatewaysresponse .vpngateway || []
198+ for (const vpnGateway of vpnGateways) {
199+ if (vpnGateway .publicip === this .resource .ipaddress ) {
200+ this .vpnGateway = vpnGateway
201+ }
202+ }
203+ }).catch (error => {
204+ console .log (error)
205+ this .$notifyError (error)
206+ })
207+ }
127208 },
128209 handleCreateVpn () {
129210 if (this .isSubmitted ) return
@@ -211,6 +292,85 @@ export default {
211292 this .parentToggleLoading ()
212293 this .isSubmitted = false
213294 })
295+ },
296+ handleCreateVpnGateway () {
297+ if (this .isSubmitted ) return
298+ this .isSubmitted = true
299+ this .parentToggleLoading ()
300+ this .createVpnGateway = false
301+ const params = {
302+ vpcid: this .resource .vpcid ,
303+ ipaddressid: this .resource .id
304+ }
305+ api (' createVpnGateway' , params).then (response => {
306+ this .$pollJob ({
307+ jobId: response .createvpngatewayresponse .jobid ,
308+ successMessage: this .$t (' message.success.add.vpn.gateway' ),
309+ successMethod : result => {
310+ this .fetchData ()
311+ this .parentToggleLoading ()
312+ this .isSubmitted = false
313+ },
314+ errorMessage: this .$t (' message.add.vpn.gateway.failed' ),
315+ errorMethod : () => {
316+ this .fetchData ()
317+ this .parentToggleLoading ()
318+ this .isSubmitted = false
319+ },
320+ loadingMessage: this .$t (' message.add.vpn.gateway.processing' ),
321+ catchMessage: this .$t (' error.fetching.async.job.result' ),
322+ catchMethod : () => {
323+ this .fetchData ()
324+ this .parentFetchData ()
325+ this .parentToggleLoading ()
326+ this .isSubmitted = false
327+ }
328+ })
329+ }).catch (error => {
330+ this .$notifyError (error)
331+ this .fetchData ()
332+ this .parentFetchData ()
333+ this .parentToggleLoading ()
334+ this .isSubmitted = false
335+ })
336+ },
337+ handleDeleteVpnGateway () {
338+ if (this .isSubmitted ) return
339+ this .isSubmitted = true
340+ this .parentToggleLoading ()
341+ this .deleteVpnGateway = false
342+ api (' deleteVpnGateway' , {
343+ id: this .vpnGateway .id
344+ }).then (response => {
345+ this .$pollJob ({
346+ jobId: response .deletevpngatewayresponse .jobid ,
347+ successMessage: this .$t (' message.success.delete.vpn.gateway' ),
348+ successMethod : () => {
349+ this .fetchData ()
350+ this .parentToggleLoading ()
351+ this .isSubmitted = false
352+ },
353+ errorMessage: this .$t (' message.delete.vpn.gateway.failed' ),
354+ errorMethod : () => {
355+ this .fetchData ()
356+ this .parentToggleLoading ()
357+ this .isSubmitted = false
358+ },
359+ catchMessage: this .$t (' error.fetching.async.job.result' ),
360+ catchMethod : () => {
361+ this .fetchData ()
362+ this .parentFetchData ()
363+ this .parentToggleLoading ()
364+ this .isSubmitted = false
365+ }
366+ })
367+ }).catch (error => {
368+ this .$notifyError (error)
369+ this .fetchData ()
370+ this .parentFetchData ()
371+ this .parentToggleLoading ()
372+ this .isSubmitted = false
373+ })
214374 }
215375 }
216376}
0 commit comments