21
21
<p >{{ $t('message.enabled.vpn') }} <strong >{{ remoteAccessVpn.publicip }}</strong ></p >
22
22
<p >{{ $t('message.enabled.vpn.ip.sec') }} <strong >{{ remoteAccessVpn.presharedkey }}</strong ></p >
23
23
<a-divider />
24
- <a-button ><router-link :to =" { path: '/vpnuser'}" >{{ $t('label.manage.vpn.user') }}</router-link ></a-button >
25
24
<a-button
26
25
style =" margin-left : 10px "
27
26
type =" primary"
30
29
:disabled =" !('deleteRemoteAccessVpn' in $store.getters.apis)" >
31
30
{{ $t('label.disable.vpn') }}
32
31
</a-button >
32
+ <a-button ><router-link :to =" { path: '/vpnuser'}" >{{ $t('label.manage.vpn.user') }}</router-link ></a-button >
33
33
</div >
34
34
35
35
<a-modal
53
53
54
54
</div >
55
55
<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" >
57
61
{{ $t('label.enable.vpn') }}
58
62
</a-button >
59
63
77
81
</a-modal >
78
82
79
83
</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
+
80
140
</template >
81
141
82
142
<script >
@@ -94,6 +154,10 @@ export default {
94
154
remoteAccessVpn: null ,
95
155
enableVpn: false ,
96
156
disableVpn: false ,
157
+ vpnGateway: null ,
158
+ vpnGatewayEnabled: false ,
159
+ createVpnGateway: false ,
160
+ deleteVpnGateway: false ,
97
161
isSubmitted: false
98
162
}
99
163
},
@@ -124,6 +188,23 @@ export default {
124
188
console .log (error)
125
189
this .$notifyError (error)
126
190
})
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
+ }
127
208
},
128
209
handleCreateVpn () {
129
210
if (this .isSubmitted ) return
@@ -211,6 +292,85 @@ export default {
211
292
this .parentToggleLoading ()
212
293
this .isSubmitted = false
213
294
})
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
+ })
214
374
}
215
375
}
216
376
}
0 commit comments