UI: Submit the form when press CTRL + ENTER (#4766)

* fixes: submit the form when press enter

* add Enter submit for component missing

* add ctrl+enter event key for submitting form

* add directive.js check keyup event

* fix build test failure

* using directive in main.js

* fix warning show in the test unit

* fix multiple submits

* fix travis run test failures

* fix filter button style

* fix the problem of ctrl+enter keyup on firefox browser

* removed computed function not using

* remove space errror

* add ref for ctrl+enter submit

* resolve conflit and fix build

* add missing directive

* add missing directive & ref button

* fixes errors

* fixes errors

* add preventDefault()

* fix ctrl keypress not support on firefox

ui/src/components/view/DedicateModal.vue

@@ -18,16 +18,20 @@
 <template>
   <a-modal
     v-model="dedicatedDomainModal"
+    v-ctrl-enter="handleDedicateForm"
     :title="label"
+    :closable="true"
     :maskClosable="false"
-    :okText="$t('label.ok')"
+    :footer="null"
-    :cancelText="$t('label.cancel')"
+    @cancel="closeModal">
-    @cancel="closeModal"
-    @ok="handleDedicateForm">
     <DedicateDomain
       @domainChange="id => domainId = id"
       @accountChange="id => dedicatedAccount = id"
       :error="domainError" />
+    <div :span="24" class="action-button">
+      <a-button @click="closeModal">{{ this.$t('label.cancel') }}</a-button>
+      <a-button type="primary" @click="handleDedicateForm">{{ this.$t('label.ok') }}</a-button>
+    </div>
   </a-modal>
 </template>
 
@@ -63,7 +67,8 @@ export default {
       dedicatedDomainModal: false,
       domainId: null,
       dedicatedAccount: null,
-      domainError: false
+      domainError: false,
+      isSubmitted: false
     }
   },
   watch: {
@@ -100,11 +105,13 @@ export default {
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           errorMessage: this.$t('error.dedicate.zone.failed'),
           errorMethod: () => {
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.dedicating.zone'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -112,11 +119,13 @@ export default {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.dedicatedDomainModal = false
+        this.isSubmitted = false
       })
     },
     dedicatePod () {
@@ -138,11 +147,13 @@ export default {
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           errorMessage: this.$t('error.dedicate.pod.failed'),
           errorMethod: () => {
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.dedicating.pod'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -150,11 +161,13 @@ export default {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.dedicatedDomainModal = false
+        this.isSubmitted = false
       })
     },
     dedicateCluster () {
@@ -176,11 +189,13 @@ export default {
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           errorMessage: this.$t('error.dedicate.cluster.failed'),
           errorMethod: () => {
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.dedicating.cluster'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -188,11 +203,13 @@ export default {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.dedicatedDomainModal = false
+        this.isSubmitted = false
       })
     },
     dedicateHost () {
@@ -214,11 +231,13 @@ export default {
             this.fetchParentData()
             this.dedicatedDomainId = this.domainId
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           errorMessage: this.$t('error.dedicate.host.failed'),
           errorMethod: () => {
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.dedicating.host'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -226,14 +245,20 @@ export default {
             this.parentFetchData()
             this.fetchParentData()
             this.dedicatedDomainModal = false
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.dedicatedDomainModal = false
+        this.isSubmitted = false
       })
     },
     handleDedicateForm () {
+      if (this.isSubmitted) {
+        return
+      }
+      this.isSubmitted = true
       if (this.$route.meta.name === 'zone') {
         this.dedicateZone()
       }

ui/src/components/view/FormView.vue

@@ -21,10 +21,7 @@
     :visible="showForm"
     :closable="true"
     :confirmLoading="currentAction.loading"
-    :okText="$t('label.ok')"
-    :cancelText="$t('label.cancel')"
     style="top: 20px;"
-    @ok="handleSubmit"
     @cancel="close"
     centered
   >

ui/src/components/view/ResourceLimitTab.vue

@@ -21,6 +21,7 @@
       :form="form"
       @submit="handleSubmit"
       layout="vertical"
+      v-ctrl-enter="handleSubmit"
     >
       <a-form-item
         v-for="(item, index) in dataResource"
@@ -115,6 +116,8 @@ export default {
     handleSubmit (e) {
       e.preventDefault()
 
+      if (this.formLoading) return
+
       this.form.validateFields((err, values) => {
         if (err) {
           return

ui/src/main.js

@@ -28,6 +28,7 @@ import './permission' // permission control
 import './utils/filter' // global filter
 import { pollJobPlugin, notifierPlugin, toLocaleDatePlugin, configUtilPlugin, apiMetaUtilPlugin } from './utils/plugins'
 import { VueAxios } from './utils/request'
+import './utils/directives'
 
 Vue.config.productionTip = false
 Vue.use(VueAxios, router)

ui/src/style/vars.less

@@ -241,8 +241,17 @@ a {
   }
 }
 
+.action-button {
+  text-align: right;
+  padding-top: 15px;
+
+  button {
+    margin-right: 5px;
+  }
+}
+
 @media only screen and (max-width: 576px) {
   .ant-pagination-options {
     display: inline-block;
   }
-} 
+} 

ui/src/utils/directives.js

@@ -0,0 +1,47 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import Vue from 'vue'
+
+const ENTER_KEY_CODE = 13
+let lastFocusElm = null
+
+Vue.directive('ctrlEnter', {
+  bind: (el, binding, vnode) => {
+    el.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.keyCode === ENTER_KEY_CODE) {
+        e.preventDefault()
+        lastFocusElm = e.target
+        vnode.context.$refs.submit.$el.focus()
+      }
+    })
+
+    el.addEventListener('keyup', (e) => {
+      if (!e.ctrlKey || e.keyCode !== ENTER_KEY_CODE) {
+        e.preventDefault()
+        return
+      }
+
+      e.preventDefault()
+      if (typeof binding.value === 'function') {
+        if (lastFocusElm) lastFocusElm.focus()
+        const argument = binding.arg || e
+        binding.value(argument)
+      }
+    })
+  }
+})

ui/src/views/AutogenView.vue

@@ -124,15 +124,14 @@
         :visible="showAction"
         :closable="true"
         :maskClosable="false"
-        :okText="$t('label.ok')"
+        :footer="null"
-        :cancelText="$t('label.cancel')"
         style="top: 20px;"
         :width="modalWidth"
-        @ok="handleSubmit"
-        @cancel="closeAction"
         :ok-button-props="getOkProps()"
         :cancel-button-props="getCancelProps()"
         :confirmLoading="actionLoading"
+        @cancel="closeAction"
+        v-ctrl-enter="handleSubmit"
         centered
       >
         <span slot="title">
@@ -322,6 +321,11 @@
                   :placeholder="field.description" />
               </span>
             </a-form-item>
+
+            <div :span="24" class="action-button">
+              <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+              <a-button type="primary" @click="handleSubmit" ref="submit">{{ $t('label.ok') }}</a-button>
+            </div>
           </a-form>
         </a-spin>
         <br />
@@ -764,7 +768,7 @@ export default {
 
       params.page = this.page
       params.pagesize = this.pageSize
-      this.searchParams = params
+
       api(this.apiName, params).then(json => {
         var responseName
         var objectName
@@ -852,6 +856,7 @@ export default {
         }
       }).finally(f => {
         this.loading = false
+        this.searchParams = params
       })
     },
     closeAction () {
@@ -1077,6 +1082,7 @@ export default {
       this.message = {}
     },
     handleSubmit (e) {
+      if (this.actionLoading) return
       this.promises = []
       if (!this.dataView && this.currentAction.groupAction && this.selectedRowKeys.length > 0) {
         if (this.selectedRowKeys.length > 0) {

ui/src/views/auth/Login.vue

@@ -22,6 +22,7 @@
     ref="formLogin"
     :form="form"
     @submit="handleSubmit"
+    v-ctrl-enter="handleSubmit"
   >
     <a-tabs
       :activeKey="customActiveKey"
@@ -103,6 +104,7 @@
         class="login-button"
         :loading="state.loginBtn"
         :disabled="state.loginBtn"
+        ref="submit"
       >{{ $t('label.login') }}</a-button>
     </a-form-item>
     <translation-menu/>
@@ -169,6 +171,7 @@ export default {
         customActiveKey,
         Login
       } = this
+      if (state.loginBtn) return
 
       state.loginBtn = true
 

ui/src/views/compute/AssignInstance.vue

@@ -17,7 +17,7 @@
 
 <template>
   <div>
-    <div class="form">
+    <div class="form" v-ctrl-enter="submitData">
 
       <div v-if="loading" class="loading">
         <a-icon type="loading" style="color: #1890ff;"></a-icon>
@@ -81,7 +81,7 @@
         <a-button @click="closeAction">
           {{ $t('label.cancel') }}
         </a-button>
-        <a-button type="primary" @click="submitData">
+        <a-button type="primary" @click="submitData" ref="submit">
           {{ $t('label.submit') }}
         </a-button>
       </div>
@@ -205,6 +205,8 @@ export default {
       this.$emit('close-action')
     },
     submitData () {
+      if (this.loading) return
+
       let variableKey = ''
       let variableValue = ''
 

ui/src/views/compute/AttachIso.vue

@@ -15,11 +15,12 @@
 // specific language governing permissions and limitations
 // under the License.
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
-        layout="vertical">
+        layout="vertical"
+        @submit="handleSubmit">
         <a-form-item :label="$t('label.iso.name')">
           <a-select
             :loading="loading"
@@ -39,7 +40,7 @@
       </a-form>
       <div :span="24" class="action-button">
         <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit" ref="submit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
@@ -110,6 +111,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -159,11 +161,4 @@ export default {
 .form {
   margin: 10px 0;
 }
-
-.action-button {
-  text-align: right;
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/compute/ChangeAffinity.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <a-form class="form">
+  <a-form class="form" v-ctrl-enter="handleSubmit">
 
     <p v-html="$t('message.select.affinity.groups')" />
 
@@ -49,7 +49,7 @@
 
     <div :span="24" class="action-button">
       <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-      <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+      <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
     </div>
 
   </a-form>
@@ -143,6 +143,7 @@ export default {
       this.$emit('close-action')
     },
     handleSubmit () {
+      if (this.loading) return
       this.loading = true
       api('updateVMAffinityGroup', {
         id: this.resource.id,
@@ -170,12 +171,4 @@ export default {
     width: 45vw;
   }
 }
-
-.action-button {
-  text-align: right;
-  margin-top: 10px;
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/compute/CreateKubernetesCluster.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -233,7 +233,7 @@
         </div>
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -423,6 +423,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -491,12 +492,4 @@ export default {
       width: 550px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/compute/CreateSSHKeyPair.vue

@@ -20,6 +20,7 @@
     <a-spin :spinning="loading" v-if="!isSubmitted">
       <p v-html="$t('message.desc.create.ssh.key.pair')"></p>
       <a-form
+        v-ctrl-enter="handleSubmit"
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
@@ -61,7 +62,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -144,6 +145,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -215,12 +217,4 @@ export default {
       width: 450px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/compute/CreateSnapshotWizard.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -56,7 +56,7 @@
         </a-form-item>
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -107,6 +107,7 @@ export default {
     handleSubmit (e) {
       e.preventDefault()
 
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) return
 
@@ -174,10 +175,4 @@ export default {
     width: 450px;
   }
 }
-.action-button {
-  text-align: right;
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/compute/DeployVM.vue

@@ -21,6 +21,7 @@
       <a-col :md="24" :lg="17">
         <a-card :bordered="true" :title="this.$t('label.newinstance')">
           <a-form
+            v-ctrl-enter="handleSubmit"
             :form="form"
             @submit="handleSubmit"
             layout="vertical"
@@ -613,7 +614,7 @@
               <a-button @click="() => this.$router.back()" :disabled="loading.deploy">
                 {{ this.$t('label.cancel') }}
               </a-button>
-              <a-dropdown-button style="margin-left: 10px" type="primary" @click="handleSubmit" :loading="loading.deploy">
+              <a-dropdown-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
                 <a-icon type="rocket" />
                 {{ this.$t('label.launch.vm') }}
                 <a-icon slot="icon" type="down" />
@@ -1434,6 +1435,7 @@ export default {
     handleSubmit (e) {
       console.log('wizard submit')
       e.preventDefault()
+      if (this.loading.deploy) return
       this.form.validateFields(async (err, values) => {
         if (err) {
           if (err.licensesaccepted) {

ui/src/views/compute/DestroyVM.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-alert type="warning" v-html="resource.backupofferingid ? $t('message.action.destroy.instance.with.backups') : $t('message.action.destroy.instance')" /><br/>
     <a-spin :spinning="loading">
       <a-form
@@ -45,7 +45,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -98,6 +98,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -157,12 +158,4 @@ export default {
       width: 450px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/compute/EditVM.vue

@@ -21,6 +21,7 @@
       class="form-layout"
       layout="vertical"
       :form="form"
+      v-ctrl-enter="handleSubmit"
       @submit="handleSubmit">
       <a-form-item>
         <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
@@ -73,7 +74,7 @@
 
       <div :span="24" class="action-button">
         <a-button :loading="loading" @click="onCloseAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-form>
   </a-spin>

ui/src/views/compute/InstanceTab.vue

@@ -144,54 +144,71 @@
       :visible="showAddNetworkModal"
       :title="$t('label.network.addvm')"
       :maskClosable="false"
-      :okText="$t('label.ok')"
+      :closable="true"
-      :cancelText="$t('label.cancel')"
+      :footer="null"
       @cancel="closeModals"
-      @ok="submitAddNetwork">
+      v-ctrl-enter="submitAddNetwork">
       {{ $t('message.network.addvm.desc') }}
-      <div class="modal-form">
+      <a-form @submit="submitAddNetwork">
-        <p class="modal-form__label">{{ $t('label.network') }}:</p>
+        <div class="modal-form">
-        <a-select :defaultValue="addNetworkData.network" @change="e => addNetworkData.network = e" autoFocus>
+          <p class="modal-form__label">{{ $t('label.network') }}:</p>
-          <a-select-option
+          <a-select
-            v-for="network in addNetworkData.allNetworks"
+            :defaultValue="addNetworkData.network"
-            :key="network.id"
+            @change="e => addNetworkData.network = e"
-            :value="network.id">
+            autoFocus>
-            {{ network.name }}
+            <a-select-option
-          </a-select-option>
+              v-for="network in addNetworkData.allNetworks"
-        </a-select>
+              :key="network.id"
-        <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
+              :value="network.id">
-        <a-input v-model="addNetworkData.ip"></a-input>
+              {{ network.name }}
-      </div>
+            </a-select-option>
+          </a-select>
+          <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
+          <a-input v-model="addNetworkData.ip"></a-input>
+        </div>
+
+        <div :span="24" class="action-button">
+          <a-button @click="closeModals">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="submitAddNetwork">{{ $t('label.ok') }}</a-button>
+        </div>
+      </a-form>
     </a-modal>
 
     <a-modal
       :visible="showUpdateIpModal"
       :title="$t('label.change.ipaddress')"
       :maskClosable="false"
-      :okText="$t('label.ok')"
+      :closable="true"
-      :cancelText="$t('label.cancel')"
+      :footer="null"
       @cancel="closeModals"
-      @ok="submitUpdateIP"
+      v-ctrl-enter="submitUpdateIP"
     >
       {{ $t('message.network.updateip') }}
 
-      <div class="modal-form">
+      <a-form @submit="submitUpdateIP">
-        <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
+        <div class="modal-form">
-        <a-select
+          <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
-          showSearch
+          <a-select
-          v-if="editNicResource.type==='Shared'"
+            showSearch
-          v-model="editIpAddressValue"
+            v-if="editNicResource.type==='Shared'"
-          :loading="listIps.loading"
+            v-model="editIpAddressValue"
-          :autoFocus="editNicResource.type==='Shared'">
+            :loading="listIps.loading"
-          <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
+            :autoFocus="editNicResource.type==='Shared'">
-            {{ ip.ipaddress }}
+            <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
-          </a-select-option>
+              {{ ip.ipaddress }}
-        </a-select>
+            </a-select-option>
-        <a-input
+          </a-select>
-          v-else
+          <a-input
-          v-model="editIpAddressValue"
+            v-else
-          :autoFocus="editNicResource.type!=='Shared'"></a-input>
+            v-model="editIpAddressValue"
-      </div>
+            :autoFocus="editNicResource.type!=='Shared'"></a-input>
+        </div>
+
+        <div :span="24" class="action-button">
+          <a-button @click="closeModals">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="submitUpdateIP">{{ $t('label.ok') }}</a-button>
+        </div>
+      </a-form>
     </a-modal>
 
     <a-modal
@@ -201,6 +218,8 @@
       :footer="null"
       :closable="false"
       class="wide-modal"
+      @cancel="closeModals"
+      v-ctrl-enter="submitSecondaryIP"
     >
       <p>
         {{ $t('message.network.secondaryip') }}
@@ -212,7 +231,8 @@
           showSearch
           v-if="editNicResource.type==='Shared'"
           v-model="newSecondaryIp"
-          :loading="listIps.loading">
+          :loading="listIps.loading"
+          :autoFocus="editNicResource.type==='Shared'">
           <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
             {{ ip.ipaddress }}
           </a-select-option>
@@ -220,11 +240,12 @@
         <a-input
           v-else
           :placeholder="$t('label.new.secondaryip.description')"
-          v-model="newSecondaryIp"></a-input>
+          v-model="newSecondaryIp"
+          :autoFocus="editNicResource.type!=='Shared'"></a-input>
       </div>
 
       <div style="margin-top: 10px; display: flex; justify-content:flex-end;">
-        <a-button @click="submitSecondaryIP" type="primary" style="margin-right: 10px;">{{ $t('label.add.secondary.ip') }}</a-button>
+        <a-button @click="submitSecondaryIP" ref="submit" type="primary" style="margin-right: 10px;">{{ $t('label.add.secondary.ip') }}</a-button>
         <a-button @click="closeModals">{{ $t('label.close') }}</a-button>
       </div>
 
@@ -462,6 +483,7 @@ export default {
       this.fetchSecondaryIPs(record.nic.id)
     },
     submitAddNetwork () {
+      if (this.loadingNic) return
       const params = {}
       params.virtualmachineid = this.vm.id
       params.networkid = this.addNetworkData.network
@@ -525,6 +547,7 @@ export default {
       })
     },
     submitUpdateIP () {
+      if (this.loadingNic) return
       this.loadingNic = true
       this.showUpdateIpModal = false
       api('updateVmNicIp', {
@@ -588,6 +611,7 @@ export default {
         })
     },
     submitSecondaryIP () {
+      if (this.loadingNic) return
       this.loadingNic = true
 
       const params = {}

ui/src/views/compute/KubernetesServiceTab.vue

@@ -398,13 +398,4 @@ export default {
     margin-top: 20px;
     overflow-y: auto;
   }
-
-  .action-button {
-    margin-top: 10px;
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/compute/MigrateWizard.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form">
+  <div class="form" v-ctrl-enter="submitForm">
     <a-input-search
       :placeholder="$t('label.search')"
       v-model="searchQuery"
@@ -85,7 +85,7 @@
     </a-pagination>
 
     <div style="margin-top: 20px; display: flex; justify-content:flex-end;">
-      <a-button type="primary" :disabled="!selectedHost.id" @click="submitForm">
+      <a-button type="primary" ref="submit" :disabled="!selectedHost.id" @click="submitForm">
         {{ $t('label.ok') }}
       </a-button>
     </div>
@@ -177,6 +177,7 @@ export default {
       })
     },
     submitForm () {
+      if (this.loading) return
       this.loading = true
       var isUserVm = true
       if (this.$route.meta.name !== 'vm') {

ui/src/views/compute/ScaleKubernetesCluster.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-alert type="warning">
         <span slot="message" v-html="$t('message.kubernetes.cluster.scale')" />
@@ -63,7 +63,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -160,6 +160,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -208,11 +209,4 @@ export default {
     }
   }
 
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/compute/ScaleVM.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <a-form class="form">
+  <a-form class="form" v-ctrl-enter="handleSubmit">
     <p v-html="getMessage()"></p>
 
     <div v-if="loading" class="loading">
@@ -48,7 +48,7 @@
 
     <div :span="24" class="action-button">
       <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-      <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+      <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
     </div>
   </a-form>
 </template>
@@ -151,6 +151,7 @@ export default {
       this.$emit('close-action')
     },
     handleSubmit () {
+      if (this.loading) return
       this.loading = true
 
       if ('cpuspeed' in this.selectedOffering && this.selectedOffering.iscustomized) {
@@ -191,13 +192,4 @@ export default {
     width: 50vw;
   }
 }
-
-.action-button {
-  margin-top: 10px;
-  text-align: right;
-
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/compute/StartVirtualMachine.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-alert type="warning">
         <span slot="message" v-html="$t('message.action.start.instance')" />
@@ -91,7 +91,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -206,6 +206,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -256,12 +257,4 @@ export default {
       width: 450px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/compute/UpgradeKubernetesCluster.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-alert type="warning">
         <span slot="message" v-html="$t('message.kubernetes.cluster.upgrade')" />
@@ -49,7 +49,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -139,6 +139,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -184,12 +185,4 @@ export default {
       width: 450px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/compute/backup/FormSchedule.vue

@@ -21,7 +21,7 @@
       <label>
         {{ $t('label.header.backup.schedule') }}
       </label>
-      <div class="form">
+      <div class="form" v-ctrl-enter="handleSubmit">
         <a-form
           :form="form"
           layout="vertical"
@@ -138,6 +138,7 @@
             </a-button>
             <a-button
               :loading="actionLoading"
+              ref="submit"
               type="primary"
               @click="handleSubmit">
               {{ this.$t('label.ok') }}
@@ -244,6 +245,7 @@ export default {
       }
     },
     handleSubmit (e) {
+      if (this.actionLoading) return
       this.form.validateFields((error, values) => {
         if (error) {
           return
@@ -316,13 +318,4 @@ export default {
 .form {
   margin: 10px 0;
 }
-
-.action-button {
-  margin-top: 20px;
-  text-align: right;
-
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/compute/wizard/NetworkSelection.vue

@@ -74,7 +74,6 @@
       :closable="true"
       :maskClosable="false"
       :footer="null"
-      :cancelText="$t('label.cancel')"
       @cancel="showCreateForm = false"
       centered
       width="auto">

ui/src/views/dashboard/OnboardingDashboard.vue

@@ -39,7 +39,6 @@
       :closable="true"
       :maskClosable="false"
       :footer="null"
-      :cancelText="$t('label.cancel')"
       @cancel="closeAction"
       centered
       width="auto">
@@ -54,7 +53,6 @@
       :closable="true"
       :maskClosable="false"
       :footer="null"
-      :cancelText="$t('label.cancel')"
       @cancel="closeAction"
       centered
       width="auto">

ui/src/views/iam/AddAccount.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
         <a-form-item>
@@ -150,7 +150,7 @@
         </div>
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -278,6 +278,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -354,10 +355,4 @@ export default {
       width: 450px;
     }
   }
-  .action-button {
-    text-align: right;
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/iam/AddLdapAccount.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="ldap-account-layout">
+  <div class="ldap-account-layout" v-ctrl-enter="handleSubmit">
     <a-row :gutter="0">
       <a-col :md="24" :lg="16">
         <a-card :bordered="false">
@@ -131,9 +131,9 @@
               </a-form-item>
             </div>
 
-            <div class="card-footer">
+            <div class="action-button">
               <a-button @click="handleClose">{{ $t('label.close') }}</a-button>
-              <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.add') }}</a-button>
+              <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.add') }}</a-button>
             </div>
           </a-form>
         </a-card>
@@ -338,6 +338,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -468,14 +469,6 @@ export default {
   }
 }
 
-.card-footer {
-  text-align: right;
-
-  button + button {
-    margin-left: 8px;
-  }
-}
-
 /deep/ .light-row {
   background-color: #fff;
 }

ui/src/views/iam/AddUser.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
         <a-form-item>
@@ -137,7 +137,7 @@
         </div>
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -251,6 +251,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -350,10 +351,4 @@ export default {
     width: 450px;
   }
 }
-.action-button {
-  text-align: right;
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/iam/ChangeUserPassword.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -58,7 +58,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -114,6 +114,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -155,12 +156,4 @@ export default {
       width: 450px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/iam/ConfigureSamlSsoAuth.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-form :form="form" @submit="handleSubmit" layout="vertical" :loading="loading">
       <a-form-item :label="$t('label.samlenable')">
         <a-switch
@@ -38,9 +38,9 @@
           </a-select-option>
         </a-select>
       </a-form-item>
-      <div class="card-footer">
+      <div class="action-button">
         <a-button @click="handleClose">{{ $t('label.close') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
@@ -92,10 +92,12 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
         }
+        this.loading = true
         api('authorizeSamlSso', {
           enable: values.samlEnable,
           userid: this.resource.id,
@@ -129,11 +131,4 @@ export default {
     width: 40vw;
   }
 }
-.card-footer {
-  text-align: right;
-
-  button + button {
-    margin-left: 8px;
-  }
-}
 </style>

ui/src/views/iam/CreateRole.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -87,7 +87,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -133,6 +133,7 @@ export default {
   methods: {
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -200,12 +201,4 @@ export default {
       width: 550px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/iam/DomainActionForm.vue

@@ -18,16 +18,15 @@
 <template>
   <div>
     <a-modal
+      centered
       :visible="showAction"
       :closable="true"
       :maskClosable="false"
-      :okText="$t('label.ok')"
-      :cancelText="$t('label.cancel')"
-      style="top: 20px;"
-      @ok="handleSubmit"
-      @cancel="parentCloseAction"
       :confirmLoading="action.loading"
-      centered
+      :footer="null"
+      @cancel="parentCloseAction"
+      style="top: 20px;"
+      v-ctrl-enter="handleSubmit"
     >
       <span slot="title">
         {{ $t(action.label) }}
@@ -123,6 +122,11 @@
                 :autoFocus="fieldIndex === firstIndex" />
             </span>
           </a-form-item>
+
+          <div :span="24" class="action-button">
+            <a-button @click="parentCloseAction">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" ref="submit" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
         </a-form>
       </a-spin>
     </a-modal>
@@ -172,6 +176,7 @@ export default {
   methods: {
     handleSubmit (e) {
       e.preventDefault()
+      if (this.action.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return

ui/src/views/iam/EditUser.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
         <a-form-item>
@@ -71,7 +71,7 @@
         </a-form-item>
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -155,6 +155,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -203,10 +204,4 @@ export default {
     width: 450px;
   }
 }
-.action-button {
-  text-align: right;
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/iam/ImportRole.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -86,7 +86,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -139,6 +139,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -294,12 +295,4 @@ export default {
       width: 550px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/image/AddKubernetesSupportedVersion.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -120,7 +120,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -184,6 +184,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -234,12 +235,4 @@ export default {
       width: 550px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/image/IsoZones.vue

@@ -88,11 +88,10 @@
       :visible="showCopyActionForm"
       :closable="true"
       :maskClosable="false"
-      :okText="$t('label.ok')"
+      :footer="null"
-      :cancelText="$t('label.cancel')"
-      @ok="handleCopyIsoSubmit"
-      @cancel="onCloseCopyForm"
       :confirmLoading="copyLoading"
+      @cancel="onCloseCopyForm"
+      v-ctrl-enter="handleCopyIsoSubmit"
       centered>
       <a-spin :spinning="copyLoading">
         <a-form
@@ -124,6 +123,11 @@
               </a-select-option>
             </a-select>
           </a-form-item>
+
+          <div :span="24" class="action-button">
+            <a-button @click="onCloseCopyForm">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" ref="submit" @click="handleCopyIsoSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
         </a-form>
       </a-spin>
     </a-modal>
@@ -398,6 +402,7 @@ export default {
     },
     handleCopyIsoSubmit (e) {
       e.preventDefault()
+      if (this.copyLoading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return

ui/src/views/image/RegisterOrUploadIso.vue

@@ -24,6 +24,7 @@
     </span>
     <a-spin :spinning="loading" v-else>
       <a-form
+        v-ctrl-enter="handleSubmit"
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
@@ -150,7 +151,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -298,6 +299,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -378,12 +380,4 @@ export default {
       width: 550px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/image/RegisterOrUploadTemplate.vue

@@ -24,6 +24,7 @@
     </span>
     <a-spin :spinning="loading" v-else>
       <a-form
+        v-ctrl-enter="handleSubmit"
         :form="form"
         @submit="handleSubmit"
         layout="vertical">
@@ -345,7 +346,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -783,6 +784,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err || this.zoneError !== '') {
           return
@@ -910,12 +912,4 @@ export default {
       width: 550px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/image/TemplateZones.vue

@@ -78,11 +78,10 @@
       :visible="showCopyActionForm"
       :closable="true"
       :maskClosable="false"
-      :okText="$t('label.ok')"
+      :footer="null"
-      :cancelText="$t('label.cancel')"
-      @ok="handleCopyTemplateSubmit"
-      @cancel="onCloseModal"
       :confirmLoading="copyLoading"
+      @cancel="onCloseModal"
+      v-ctrl-enter="handleCopyTemplateSubmit"
       centered>
       <a-spin :spinning="copyLoading">
         <a-form
@@ -114,6 +113,11 @@
               </a-select-option>
             </a-select>
           </a-form-item>
+
+          <div :span="24" class="action-button">
+            <a-button @click="onCloseModal">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" ref="submit" @click="handleCopyTemplateSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
         </a-form>
       </a-spin>
     </a-modal>
@@ -123,8 +127,8 @@
       :visible="showDeleteTemplate"
       :closable="true"
       :maskClosable="false"
-      :okText="$t('label.ok')"
+      :footer="null"
-      :cancelText="$t('label.cancel')"
+      v-ctrl-enter="deleteTemplate"
       :width="showTable ? modalWidth : '30vw'"
       @ok="selectedItems.length > 0 ? deleteTemplates() : deleteTemplate(currentRecord)"
       @cancel="onCloseModal"
@@ -152,8 +156,12 @@
       </a-table>
       <a-spin :spinning="deleteLoading">
         <a-form-item :label="$t('label.isforced')" style="margin-bottom: 0;">
-          <a-switch v-model="forcedDelete"></a-switch>
+          <a-switch v-model="forcedDelete" autoFocus></a-switch>
         </a-form-item>
+        <div :span="24" class="action-button">
+          <a-button @click="onCloseModal">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="deleteTemplate">{{ $t('label.ok') }}</a-button>
+        </div>
       </a-spin>
     </a-modal>
     <bulk-action-progress
@@ -466,6 +474,7 @@ export default {
     },
     handleCopyTemplateSubmit (e) {
       e.preventDefault()
+      if (this.copyLoading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return

ui/src/views/image/UpdateKubernetesSupportedVersion.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -44,7 +44,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -112,6 +112,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -149,12 +150,4 @@ export default {
       width: 450px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/image/UpdateTemplateIsoPermissions.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form">
+  <div class="form" v-ctrl-enter="submitData">
     <div v-if="loading" class="loading">
       <a-icon type="loading"></a-icon>
     </div>
@@ -87,13 +87,10 @@
         </div>
       </template>
     </template>
-    <div class="actions">
+
-      <a-button @click="closeModal">
+    <div :span="24" class="action-button">
-        {{ $t('label.cancel') }}
+      <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
-      </a-button>
+      <a-button type="primary" ref="submit" @click="submitData">{{ $t('label.ok') }}</a-button>
-      <a-button type="primary" @click="submitData">
-        {{ $t('label.ok') }}
-      </a-button>
     </div>
   </div>
 </template>
@@ -230,6 +227,7 @@ export default {
       this.$parent.$parent.close()
     },
     submitData () {
+      if (this.loading) return
       let variableKey = ''
       let variableValue = ''
       if (this.selectedShareWith === this.$t('label.account')) {
@@ -292,16 +290,6 @@ export default {
     }
 
   }
-  .actions {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 20px;
-    button {
-      &:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
-  }
 
   .required {
     margin-right: 2px;

ui/src/views/infra/AddPrimaryStorage.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form :form="form" layout="vertical">
         <a-form-item>
@@ -221,11 +221,12 @@
             <a-select-option v-for="tag in storageTags" :key="tag.name">{{ tag.name }}</a-select-option>
           </a-select>
         </a-form-item>
+
+        <div :span="24" class="action-button">
+          <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+        </div>
       </a-form>
-      <div class="actions">
-        <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
-        <a-button type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
-      </div>
     </a-spin>
   </div>
 </template>
@@ -515,6 +516,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -652,14 +654,4 @@ export default {
     width: 500px;
   }
 }
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-  button {
-    &:not(:last-child) {
-      margin-right: 10px;
-    }
-  }
-}
 </style>

ui/src/views/infra/AddSecondaryStorage.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form :form="form" layout="vertical">
         <a-form-item :label="$t('label.name')">
@@ -149,9 +149,9 @@
             />
           </a-form-item>
         </div>
-        <div class="actions">
+        <div :span="24" class="action-button">
           <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
-          <a-button type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          <a-button type="primary" ref="submit" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -226,6 +226,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -298,15 +299,4 @@ export default {
     width: 35vw;
   }
 }
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-  button {
-    &:not(:last-child) {
-      margin-right: 10px;
-    }
-  }
-}
 </style>

ui/src/views/infra/ClusterAdd.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="loading">
-    <div class="form">
+    <div class="form" v-ctrl-enter="handleSubmitForm">
       <div class="form__item">
         <div class="form__label"><span class="required">* </span>{{ $t('label.zonenamelabel') }}</div>
         <a-select v-model="zoneId" @change="fetchPods" autoFocus>
@@ -96,9 +96,9 @@
 
       <a-divider></a-divider>
 
-      <div class="actions">
+      <div :span="24" class="action-button">
         <a-button @click="() => this.$parent.$parent.close()">{{ $t('label.cancel') }}</a-button>
-        <a-button @click="handleSubmitForm" type="primary">{{ $t('label.ok') }}</a-button>
+        <a-button @click="handleSubmitForm" ref="submit" type="primary">{{ $t('label.ok') }}</a-button>
       </div>
 
     </div>
@@ -202,6 +202,7 @@ export default {
       this.showDedicated = !this.showDedicated
     },
     handleSubmitForm () {
+      if (this.loading) return
       if (!this.clustername) {
         this.$refs.requiredCluster.classList.add('required-label--visible')
         return
@@ -362,17 +363,6 @@ export default {
     }
   }
 
-  .actions {
-    display: flex;
-    justify-content: flex-end;
-
-    button {
-      &:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
-  }
-
   .required {
     color: #ff0000;
 

ui/src/views/infra/HostAdd.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="loading">
-    <div class="form">
+    <div class="form" v-ctrl-enter="handleSubmitForm">
 
       <div class="form__item">
         <div class="form__label"><span class="required">* </span>{{ $t('label.zonenamelabel') }}</div>
@@ -114,9 +114,9 @@
 
       <a-divider></a-divider>
 
-      <div class="actions">
+      <div :span="24" class="action-button">
         <a-button @click="() => this.$parent.$parent.close()">{{ $t('label.cancel') }}</a-button>
-        <a-button @click="handleSubmitForm" type="primary">{{ $t('label.ok') }}</a-button>
+        <a-button @click="handleSubmitForm" ref="submit" type="primary">{{ $t('label.ok') }}</a-button>
       </div>
 
     </div>
@@ -248,6 +248,7 @@ export default {
       this.showDedicated = !this.showDedicated
     },
     handleSubmitForm () {
+      if (this.loading) return
       const requiredFields = document.querySelectorAll('.required-field')
 
       requiredFields.forEach(field => {
@@ -364,15 +365,6 @@ export default {
       }
     }
   }
-  .actions {
-    display: flex;
-    justify-content: flex-end;
-    button {
-      &:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
-  }
 
   .required {
     color: #ff0000;

ui/src/views/infra/InfraSummary.vue

@@ -43,8 +43,8 @@
             :visible="sslFormVisible"
             :footer="null"
             :maskClosable="false"
-            :cancelText="$t('label.cancel')"
+            @cancel="sslModalClose"
-            @cancel="sslModalClose">
+            v-ctrl-enter="handleSslFormSubmit">
             <p>
               {{ $t('message.update.ssl') }}
             </p>
@@ -136,7 +136,7 @@
                 <a-button @click="this.sslModalClose" class="close-button">
                   {{ $t('label.cancel' ) }}
                 </a-button>
-                <a-button type="primary" htmlType="submit" :loading="sslFormSubmitting">
+                <a-button type="primary" ref="submit" :loading="sslFormSubmitting">
                   {{ $t('label.submit' ) }}
                 </a-button>
               </a-form-item>
@@ -262,6 +262,7 @@ export default {
     },
 
     handleSslFormSubmit () {
+      if (this.sslFormSubmitting) return
       this.sslFormSubmitting = true
 
       this.form.validateFields(errors => {

ui/src/views/infra/MigrateData.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form :form="form" @submit="handleSubmit" layout="vertical">
         <a-form-item
@@ -78,7 +78,7 @@
         </a-form-item>
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -114,6 +114,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -198,12 +199,4 @@ export default {
     width: 40vw;
   }
 }
-
-.action-button {
-  text-align: right;
-
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/infra/PodAdd.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="loading">
-    <a-form :form="form" layout="vertical" class="form">
+    <a-form v-ctrl-enter="handleSubmit" :form="form" layout="vertical" class="form">
 
       <a-form-item class="form__item" :label="$t('label.zone')">
         <a-select
@@ -100,9 +100,9 @@
 
       <a-divider></a-divider>
 
-      <div class="actions">
+      <div :span="24" class="action-button">
         <a-button @click="() => this.$parent.$parent.close()">{{ $t('label.cancel') }}</a-button>
-        <a-button @click="handleSubmit" type="primary">{{ $t('label.ok') }}</a-button>
+        <a-button @click="handleSubmit" ref="submit" type="primary">{{ $t('label.ok') }}</a-button>
       </div>
 
     </a-form>
@@ -174,6 +174,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) return
 
@@ -267,18 +268,6 @@ export default {
 
   }
 
-  .actions {
-    display: flex;
-    justify-content: flex-end;
-
-    button {
-      &:not(:last-child) {
-        margin-right: 10px;
-      }
-    }
-
-  }
-
   .required {
     color: #ff0000;
 

ui/src/views/infra/network/DedicatedVLANTab.vue

@@ -63,7 +63,9 @@
       v-model="modal"
       :title="$t('label.dedicate.vlan.vni.range')"
       :maskClosable="false"
-      @ok="handleSubmit">
+      :footer="null"
+      @cancel="modal = false"
+      v-ctrl-enter="handleSubmit">
       <a-spin :spinning="formLoading">
         <a-form
           :form="form"
@@ -125,6 +127,11 @@
               </a-select-option>
             </a-select>
           </a-form-item>
+
+          <div :span="24" class="action-button">
+            <a-button @click="modal = false">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" ref="submit" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
         </a-form>
       </a-spin>
     </a-modal>
@@ -323,6 +330,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.formLoading) return
       this.form.validateFields(errors => {
         if (errors) return
 

ui/src/views/infra/network/EditTrafficLabel.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
         <a-form-item>
@@ -76,7 +76,7 @@
         </a-form-item>
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -144,6 +144,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -187,11 +188,4 @@ export default {
     width: 450px;
   }
 }
-.action-button {
-  text-align: right;
-
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/infra/network/IpRangesTabGuest.vue

@@ -63,8 +63,7 @@
       :closable="true"
       :maskClosable="false"
       :footer="null"
-      :cancelText="$t('label.cancel')"
+      @cancel="showCreateForm = false"
-      @cancel="closeAction"
       centered
       width="auto">
       <CreateNetwork :resource="{ zoneid: resource.zoneid }" @close-action="closeAction"/>

ui/src/views/infra/network/IpRangesTabManagement.vue

@@ -70,7 +70,9 @@
       v-model="addIpRangeModal"
       :title="$t('label.add.ip.range')"
       :maskClosable="false"
-      @ok="handleAddIpRange">
+      :footer="null"
+      @cancel="addIpRangeModal = false"
+      v-ctrl-enter="handleAddIpRange">
       <a-form
         :form="form"
         @submit="handleAddIpRange"
@@ -115,6 +117,11 @@
         <a-form-item :label="$t('label.system.vms')" class="form__item">
           <a-checkbox v-decorator="['vms']"></a-checkbox>
         </a-form-item>
+
+        <div :span="24" class="action-button">
+          <a-button @click="addIpRangeModal = false">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="handleAddIpRange">{{ $t('label.ok') }}</a-button>
+        </div>
       </a-form>
     </a-modal>
 
@@ -285,6 +292,7 @@ export default {
       })
     },
     handleAddIpRange (e) {
+      if (this.componentLoading) return
       this.form.validateFields((error, values) => {
         if (error) return
 

ui/src/views/infra/network/IpRangesTabPublic.vue

@@ -85,7 +85,8 @@
       v-model="accountModal"
       v-if="selectedItem"
       :maskClosable="false"
-      @ok="accountModal = false">
+      :footer="null"
+      @cancel="accountModal = false">
       <div>
         <div style="margin-bottom: 10px;">
           <div class="list__label">{{ $t('label.account') }}</div>
@@ -100,6 +101,10 @@
           <div>{{ selectedItem.forsystemvms }}</div>
         </div>
       </div>
+
+      <div :span="24" class="action-button">
+        <a-button @click="accountModal = false">{{ $t('label.close') }}</a-button>
+      </div>
     </a-modal>
 
     <a-modal
@@ -107,7 +112,9 @@
       :maskClosable="false"
       v-model="addAccountModal"
       :title="$t('label.add.account')"
-      @ok="handleAddAccount">
+      :footer="null"
+      @cancel="addAccountModal = false"
+      v-ctrl-enter="handleAddAccount">
       <a-spin :spinning="domainsLoading">
         <div style="margin-bottom: 10px;">
           <div class="list__label">{{ $t('label.account') }}:</div>
@@ -123,6 +130,11 @@
             </a-select-option>
           </a-select>
         </div>
+
+        <div :span="24" class="action-button">
+          <a-button @click="addAccountModal = false">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="handleAddAccount">{{ $t('label.ok') }}</a-button>
+        </div>
       </a-spin>
     </a-modal>
 
@@ -130,7 +142,9 @@
       v-model="addIpRangeModal"
       :title="$t('label.add.ip.range')"
       :maskClosable="false"
-      @ok="handleAddIpRange">
+      :footer="null"
+      @cancel="addIpRangeModal = false"
+      v-ctrl-enter="handleAddIpRange">
       <a-form
         :form="form"
         @submit="handleAddIpRange"
@@ -197,6 +211,11 @@
             </a-form-item>
           </a-spin>
         </div>
+
+        <div :span="24" class="action-button">
+          <a-button @click="addIpRangeModal = false">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="handleAddIpRange">{{ $t('label.ok') }}</a-button>
+        </div>
       </a-form>
     </a-modal>
 
@@ -357,6 +376,7 @@ export default {
       })
     },
     handleAddAccount () {
+      if (this.domainsLoading) return
       this.domainsLoading = true
 
       if (this.addIpRangeModal === true) {
@@ -421,6 +441,7 @@ export default {
       })
     },
     handleAddIpRange (e) {
+      if (this.componentLoading) return
       this.form.validateFields((error, values) => {
         if (error) return
 

ui/src/views/infra/network/IpRangesTabStorage.vue

@@ -66,8 +66,11 @@
     <a-modal
       v-model="addIpRangeModal"
       :title="$t('label.add.ip.range')"
+      :closable="true"
       :maskClosable="false"
-      @ok="handleAddIpRange">
+      :footer="null"
+      @cancel="addIpRangeModal = false"
+      v-ctrl-enter="handleAddIpRange">
       <a-form
         :form="form"
         @submit="handleAddIpRange"
@@ -109,6 +112,11 @@
             v-decorator="['endip', { rules: [{ required: true, message: `${$t('label.required')}` }] }]">
           </a-input>
         </a-form-item>
+
+        <div :span="24" class="action-button">
+          <a-button @click="addIpRangeModal = false">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="handleAddIpRange">{{ $t('label.ok') }}</a-button>
+        </div>
       </a-form>
     </a-modal>
 
@@ -266,6 +274,7 @@ export default {
       })
     },
     handleAddIpRange (e) {
+      if (this.componentLoading) return
       this.form.validateFields((error, values) => {
         if (error) return
 

ui/src/views/infra/network/ServiceProvidersTab.vue

@@ -47,7 +47,6 @@
           :visible="showFormAction"
           :closable="true"
           :maskClosable="false"
-          :cancelText="$t('label.cancel')"
           style="top: 20px;"
           @cancel="onCloseAction"
           :confirmLoading="actionLoading"
@@ -64,12 +63,11 @@
         :title="$t(currentAction.label)"
         :visible="showFormAction"
         :confirmLoading="actionLoading"
+        :closable="true"
         :maskClosable="false"
-        :okText="$t('label.ok')"
-        :cancelText="$t('label.cancel')"
-        style="top: 20px;"
-        @ok="handleSubmit"
         @cancel="onCloseAction"
+        v-ctrl-enter="handleSubmit"
+        style="top: 20px;"
         centered
       >
         <a-form
@@ -134,6 +132,11 @@
                 :placeholder="field.description" />
             </span>
           </a-form-item>
+
+          <div :span="24" class="action-button">
+            <a-button @click="onCloseAction">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" ref="submit" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
         </a-form>
       </a-modal>
     </div>
@@ -1156,11 +1159,11 @@ export default {
       this.nsp = nsp
     },
     async handleSubmit () {
+      if (this.actionLoading) return
       if (this.currentAction.confirm) {
         await this.executeConfirmAction()
         return
       }
-
       await this.form.validateFields(async (err, values) => {
         if (err) {
           return

ui/src/views/infra/network/providers/AddF5LoadBalancer.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-form
       :form="form"
       layout="vertical"
@@ -107,7 +107,7 @@
       </a-row>
       <div :span="24" class="action-button">
         <a-button :loading="loading" @click="onCloseAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
@@ -160,6 +160,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields(async (err, values) => {
         if (err) {
           return
@@ -288,16 +289,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="less">
-.form-layout {
-  .action-button {
-    text-align: right;
-    margin-top: 20px;
-
-    button {
-      margin-right: 5px;
-    }
-  }
-}
-</style>

ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-form
       :form="form"
       layout="vertical"
@@ -131,7 +131,7 @@
       </a-row>
       <div :span="24" class="action-button">
         <a-button :loading="loading" @click="onCloseAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
@@ -192,6 +192,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields(async (err, values) => {
         if (err) {
           return
@@ -323,16 +324,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="less">
-.form-layout {
-  .action-button {
-    text-align: right;
-    margin-top: 20px;
-
-    button {
-      margin-right: 5px;
-    }
-  }
-}
-</style>

ui/src/views/infra/network/providers/AddNiciraNvpDevice.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-form
       :form="form"
       layout="vertical"
@@ -87,7 +87,7 @@
       </a-row>
       <div :span="24" class="action-button">
         <a-button :loading="loading" @click="onCloseAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
@@ -129,6 +129,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields(async (err, values) => {
         if (err) {
           return
@@ -200,16 +201,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="less">
-.form-layout {
-  .action-button {
-    text-align: right;
-    margin-top: 20px;
-
-    button {
-      margin-right: 5px;
-    }
-  }
-}
-</style>

ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-form
       :form="form"
       layout="vertical"
@@ -154,7 +154,7 @@
       </a-row>
       <div :span="24" class="action-button">
         <a-button :loading="loading" @click="onCloseAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
@@ -207,6 +207,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields(async (err, values) => {
         if (err) {
           return
@@ -412,16 +413,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="less">
-.form-layout {
-  .action-button {
-    text-align: right;
-    margin-top: 20px;
-
-    button {
-      margin-right: 5px;
-    }
-  }
-}
-</style>

ui/src/views/infra/network/providers/AddSrxFirewall.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-form
       :form="form"
       layout="vertical"
@@ -132,7 +132,7 @@
       </a-row>
       <div :span="24" class="action-button">
         <a-button :loading="loading" @click="onCloseAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
@@ -185,6 +185,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields(async (err, values) => {
         if (err) {
           return
@@ -357,16 +358,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="less">
-.form-layout {
-  .action-button {
-    text-align: right;
-    margin-top: 20px;
-
-    button {
-      margin-right: 5px;
-    }
-  }
-}
-</style>

ui/src/views/infra/routers/RouterHealthCheck.vue

@@ -44,10 +44,9 @@
         :visible="showGetHealthChecksForm"
         :closable="true"
         :maskClosable="false"
-        :okText="$t('label.ok')"
+        :footer="null"
-        :cancelText="$t('label.cancel')"
-        @ok="handleGetHealthChecksSubmit"
         @cancel="onCloseGetHealthChecksForm"
+        v-ctrl-enter="handleGetHealthChecksSubmit"
         centered>
         <a-spin :spinning="loading">
           <a-form
@@ -61,6 +60,11 @@
                 :placeholder="apiParams.performfreshchecks.description"
                 autoFocus/>
             </a-form-item>
+
+            <div :span="24" class="action-button">
+              <a-button @click="onCloseGetHealthChecksForm">{{ $t('label.cancel') }}</a-button>
+              <a-button ref="submit" type="primary" @click="handleGetHealthChecksSubmit">{{ $t('label.ok') }}</a-button>
+            </div>
           </a-form>
         </a-spin>
       </a-modal>
@@ -146,6 +150,7 @@ export default {
     },
     handleGetHealthChecksSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return

ui/src/views/infra/zone/AdvancedGuestTrafficForm.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div>
+  <div v-ctrl-enter="handleSubmit">
     <a-card
       class="ant-form-text"
       style="text-align: justify; margin: 10px 0; padding: 24px;"
@@ -76,7 +76,7 @@
         @click="handleBack">
         {{ $t('label.previous') }}
       </a-button>
-      <a-button class="button-next" type="primary" @click="handleSubmit">
+      <a-button class="button-next" ref="submit" type="primary" @click="handleSubmit">
         {{ $t('label.next') }}
       </a-button>
     </div>

ui/src/views/infra/zone/IpAddressRangeForm.vue

@@ -115,28 +115,31 @@
         </a-form>
       </template>
     </a-table>
-    <div class="form-action">
+    <div class="form-action" v-ctrl-enter="handleSubmit">
       <a-button
         v-if="!isFixError"
         class="button-prev"
         @click="handleBack">
         {{ $t('label.previous') }}
       </a-button>
-      <a-button class="button-next" type="primary" @click="handleSubmit">
+      <a-button class="button-next" ref="submit" type="primary" @click="handleSubmit">
         {{ $t('label.next') }}
       </a-button>
     </div>
     <a-modal
       :visible="showError"
+      :closable="true"
       :maskClosable="false"
       :title="`${$t('label.error')}!`"
-      :okText="$t('label.ok')"
+      @cancel="showError = false"
-      :cancelText="$t('label.cancel')"
+      v-ctrl-enter="showError = false"
-      @ok="() => { showError = false }"
-      @cancel="() => { showError = false }"
       centered
     >
       <span>{{ $t('message.required.add.least.ip') }}</span>
+      <div :span="24" class="action-button">
+        <a-button @click="showError = false">{{ $t('label.cancel') }}</a-button>
+        <a-button type="primary" ref="submit" @click="showError = false">{{ $t('label.ok') }}</a-button>
+      </div>
     </a-modal>
   </div>
 </template>

ui/src/views/infra/zone/StaticInputsForm.vue

@@ -23,6 +23,7 @@
       v-html="$t(description)">
     </a-card>
     <a-form
+      v-ctrl-enter="handleSubmit"
       class="form-content"
       :form="form"
       @submit="handleSubmit">
@@ -103,7 +104,7 @@
         @click="handleBack">
         {{ $t('label.previous') }}
       </a-button>
-      <a-button class="button-next" type="primary" @click="handleSubmit">
+      <a-button class="button-next" ref="submit" type="primary" @click="handleSubmit">
         {{ $t('label.next') }}
       </a-button>
     </div>

ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div>
+  <div v-ctrl-enter="handleSubmit">
     <a-card
       class="ant-form-text"
       style="text-align: justify; margin: 10px 0; padding: 20px;"
@@ -121,6 +121,7 @@
       <a-button
         class="button-next"
         type="primary"
+        ref="submit"
         @click="handleSubmit">
         {{ $t('label.next') }}
       </a-button>
@@ -129,24 +130,26 @@
       :visible="showError"
       :title="`${$t('label.error')}!`"
       :maskClosable="false"
-      :okText="$t('label.ok')"
+      :closable="true"
-      :cancelText="$t('label.cancel')"
+      :footer="null"
-      @ok="() => { showError = false }"
       @cancel="() => { showError = false }"
+      v-ctrl-enter="showError = false"
       centered
     >
       <span>{{ $t('message.required.traffic.type') }}</span>
+      <div :span="24" class="action-button">
+        <a-button @click="showError = false">{{ $t('label.cancel') }}</a-button>
+        <a-button type="primary" ref="submit" @click="showError = false">{{ $t('label.ok') }}</a-button>
+      </div>
     </a-modal>
     <a-modal
       :title="$t('label.edit.traffic.type')"
       :visible="showEditTraffic"
       :closable="true"
       :maskClosable="false"
-      :okText="$t('label.ok')"
-      :cancelText="$t('label.cancel')"
-      @ok="updateTrafficLabel(trafficInEdit)"
-      @cancel="cancelEditTraffic"
       centered
+      :footer="null"
+      v-ctrl-enter:[trafficInEdit]="updateTrafficLabel"
     >
       <a-form :form="form">
         <span class="ant-form-text"> {{ $t('message.edit.traffic.type') }} </span>
@@ -175,6 +178,11 @@
             </a-select>
           </a-form-item>
         </span>
+
+        <div :span="24" class="action-button">
+          <a-button @click="cancelEditTraffic">{{ this.$t('label.cancel') }}</a-button>
+          <a-button type="primary" ref="submit" @click="updateTrafficLabel(trafficInEdit)">{{ this.$t('label.ok') }}</a-button>
+        </div>
       </a-form>
     </a-modal>
   </div>

ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div>
+  <div v-ctrl-enter="handleSubmit">
     <a-card
       class="ant-form-text"
       style="text-align: justify; margin: 10px 0; padding: 24px;"
@@ -331,7 +331,7 @@
         v-if="!isFixError">
         {{ $t('label.previous') }}
       </a-button>
-      <a-button type="primary" @click="handleSubmit" class="button-next">
+      <a-button ref="submit" type="primary" @click="handleSubmit" class="button-next">
         {{ $t('label.next') }}
       </a-button>
     </div>

ui/src/views/infra/zone/ZoneWizardZoneTypeStep.vue

@@ -20,7 +20,8 @@
     <a-form
       class="form-content"
       :form="form"
-      @submit="handleSubmit">
+      @submit="handleSubmit"
+      v-ctrl-enter="handleSubmit">
       <a-form-item>
         <a-radio-group
           v-decorator="['zoneType', {
@@ -71,7 +72,7 @@
       </a-form-item>
     </a-form>
     <div class="form-action">
-      <a-button type="primary" @click="handleSubmit" class="button-next">
+      <a-button ref="submit" type="primary" @click="handleSubmit" class="button-next">
         {{ $t('label.next') }}
       </a-button>
     </div>

ui/src/views/network/AclListRulesTab.vue

@@ -96,7 +96,15 @@
       </draggable>
     </div>
 
-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :maskClosable="false">
+    <a-modal
+      v-if="tagsModalVisible"
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :closable="true"
+      :maskClosable="false"
+      @cancel="tagsModalVisible = false"
+      v-ctrl-enter="handleAddTag">
       <a-spin v-if="tagsLoading"></a-spin>
 
       <div v-else>
@@ -115,7 +123,7 @@
               <a-input v-decorator="['value', { rules: [{ required: true, message: $t('message.specifiy.tag.value')}] }]" />
             </a-form-item>
           </div>
-          <a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
+          <a-button ref="submit" type="primary" @click="handleAddTag">{{ $t('label.add') }}</a-button>
         </a-form>
 
         <a-divider style="margin-top: 0;"></a-divider>
@@ -132,7 +140,15 @@
       </div>
 
     </a-modal>
-    <a-modal :title="ruleModalTitle" :maskClosable="false" v-model="ruleModalVisible" @ok="handleRuleModalForm">
+    <a-modal
+      v-if="ruleModalVisible"
+      :title="ruleModalTitle"
+      :closable="true"
+      :maskClosable="false"
+      :footer="null"
+      v-model="ruleModalVisible"
+      @cancel="ruleModalVisible = false"
+      v-ctrl-enter="handleRuleModalForm">
       <a-form :form="ruleForm" @submit="handleRuleModalForm">
         <a-form-item :label="$t('label.number')">
           <a-input-number autoFocus style="width: 100%" v-decorator="['number']" />
@@ -190,6 +206,11 @@
             :autosize="{ minRows: 2 }"
             :placeholder="$t('label.acl.reason.description')" />
         </a-form-item>
+
+        <div :span="24" class="action-button">
+          <a-button @click="() => { ruleModalVisible = false } ">{{ $t('label.cancel') }}</a-button>
+          <a-button ref="submit" type="primary" @click="handleRuleModalForm">{{ $t('label.ok') }}</a-button>
+        </div>
       </a-form>
     </a-modal>
   </a-spin>
@@ -343,6 +364,7 @@ export default {
       })
     },
     handleAddTag (e) {
+      if (this.tagsLoading) return
       this.tagsLoading = true
 
       e.preventDefault()
@@ -500,6 +522,7 @@ export default {
       })
     },
     handleRuleModalForm (e) {
+      if (this.fetchLoading) return
       if (this.ruleFormMode === 'edit') {
         this.handleEditRule(e)
         return

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="loading">
-    <div class="form-layout">
+    <div class="form-layout" v-ctrl-enter="handleSubmit">
       <div class="form">
         <a-form
           :form="form"
@@ -175,6 +175,7 @@
             </a-button>
             <a-button
               :loading="actionLoading"
+              ref="submit"
               type="primary"
               @click="handleSubmit">
               {{ this.$t('label.ok') }}
@@ -394,6 +395,7 @@ export default {
       })
     },
     handleSubmit (e) {
+      if (this.actionLoading) return
       this.form.validateFields((error, values) => {
         if (error) {
           return
@@ -485,12 +487,4 @@ export default {
   color: rgba(0, 0, 0, 0.85);
   margin-bottom: 12px;
 }
-
-.action-button {
-  text-align: right;
-
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/network/CreateL2NetworkForm.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="loading">
-    <div class="form-layout">
+    <div class="form-layout" v-ctrl-enter="handleSubmit">
       <div class="form">
         <a-form
           :form="form"
@@ -352,6 +352,7 @@ export default {
       this.selectedNetworkOffering = networkOffering
     },
     handleSubmit (e) {
+      if (this.actionLoading) return
       this.form.validateFields((error, values) => {
         if (error) {
           return
@@ -437,12 +438,4 @@ export default {
   color: rgba(0, 0, 0, 0.85);
   margin-bottom: 12px;
 }
-
-.action-button {
-  text-align: right;
-
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/network/CreateNetwork.vue

@@ -126,12 +126,4 @@ export default {
       width: 600px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/network/CreateSharedNetworkForm.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="loading">
-    <div class="form-layout">
+    <div class="form-layout" v-ctrl-enter="handleSubmit">
       <div class="form">
         <a-form
           :form="form"
@@ -665,6 +665,7 @@ export default {
       this.selectedProject = project
     },
     handleSubmit (e) {
+      if (this.actionLoading) return
       this.form.validateFields((error, values) => {
         if (error) {
           return
@@ -816,12 +817,4 @@ export default {
   color: rgba(0, 0, 0, 0.85);
   margin-bottom: 12px;
 }
-
-.action-button {
-  text-align: right;
-
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/network/CreateVlanIpRange.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="loading">
-    <div class="form-layout">
+    <div class="form-layout" v-ctrl-enter="handleSubmit">
       <div class="form">
         <a-form
           :form="form"
@@ -218,6 +218,7 @@ export default {
     handleSubmit (e) {
       e.preventDefault()
 
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -285,12 +286,4 @@ export default {
     width: 450px;
   }
 }
-
-.action-button {
-  text-align: right;
-
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/network/CreateVpc.vue

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -156,6 +156,7 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -204,11 +205,4 @@ export default {
 .form {
   margin: 10px 0;
 }
-
-.action-button {
-  text-align: right;
-  button {
-    margin-right: 5px;
-  }
-}
 </style>

ui/src/views/network/CreateVpnCustomerGateway.vue

@@ -16,7 +16,7 @@
 // under the License.
 <template>
   <div>
-    <a-form class="form-layout" :form="form" layout="vertical">
+    <a-form class="form-layout" :form="form" layout="vertical" v-ctrl-enter="handleSubmit">
       <a-form-item>
         <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
         <a-input
@@ -218,7 +218,7 @@
             },
           ]"/>
       </a-form-item>
-      <div class="actions">
+      <div class="action-button">
         <a-button @click="closeModal">
           {{ $t('label.cancel') }}
         </a-button>
@@ -275,6 +275,7 @@ export default {
         'Group 18': 'modp8192'
       },
       ikeDhGroupInitialValue: 'Group 5(modp1536)',
+      isSubmitted: false,
       ikeversion: 'ike'
     }
   },
@@ -288,10 +289,12 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.isSubmitted) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
         }
+        this.isSubmitted = true
         let ikepolicy = values.ikeEncryption + '-' + values.ikeHash + ';'
         ikepolicy += (values.ikeDh !== this.ikeDhGroupInitialValue) ? values.ikeDh : (values.ikeDh.split('(')[1]).split(')')[0]
         let esppolicy = values.espEncryption + '-' + values.espHash
@@ -319,15 +322,18 @@ export default {
             successMessage: this.$t('message.success.add.vpn.customer.gateway'),
             successMethod: () => {
               this.closeModal()
+              this.isSubmitted = false
             },
             errorMessage: `${this.$t('message.create.vpn.customer.gateway.failed')} ` + response,
             errorMethod: () => {
               this.closeModal()
+              this.isSubmitted = false
             },
             loadingMessage: this.$t('message.add.vpn.customer.gateway.processing'),
             catchMessage: this.$t('error.fetching.async.job.result'),
             catchMethod: () => {
               this.closeModal()
+              this.isSubmitted = false
             }
           })
           this.closeModal()
@@ -335,6 +341,7 @@ export default {
         }).catch(error => {
           console.error(error)
           this.$message.error(this.$t('message.success.add.vpn.customer.gateway'))
+          this.isSubmitted = false
         })
       })
     }
@@ -345,15 +352,4 @@ export default {
 .form-layout {
   width: 500px;
 }
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-  button {
-    &:not(:last-child) {
-      margin-right: 10px;
-    }
-  }
-}
 </style>

ui/src/views/network/EgressRulesTab.vue

@@ -18,7 +18,7 @@
 <template>
   <div>
     <div>
-      <div class="form">
+      <div class="form" v-ctrl-enter="addRule">
         <div class="form__item">
           <div class="form__label">{{ $t('label.sourcecidr') }}</div>
           <a-input v-model="newRule.cidrlist" autoFocus></a-input>
@@ -53,7 +53,7 @@
           <a-input v-model="newRule.icmpcode"></a-input>
         </div>
         <div class="form__item">
-          <a-button :disabled="!('createEgressFirewallRule' in $store.getters.apis)" type="primary" icon="plus" @click="addRule">{{ $t('label.add') }}</a-button>
+          <a-button :disabled="!('createEgressFirewallRule' in $store.getters.apis)" ref="submit" type="primary" icon="plus" @click="addRule">{{ $t('label.add') }}</a-button>
         </div>
       </div>
     </div>
@@ -320,6 +320,7 @@ export default {
       })
     },
     addRule () {
+      if (this.loading) return
       this.loading = true
       api('createEgressFirewallRule', { ...this.newRule }).then(response => {
         this.$pollJob({

ui/src/views/network/FirewallRules.vue

@@ -18,7 +18,7 @@
 <template>
   <div>
     <div>
-      <div class="form">
+      <div class="form" v-ctrl-enter="addRule">
         <div class="form__item">
           <div class="form__label">{{ $t('label.sourcecidr') }}</div>
           <a-input autoFocus v-model="newRule.cidrlist"></a-input>
@@ -113,19 +113,35 @@
       :title="$t('label.edit.tags')"
       v-model="tagsModalVisible"
       :footer="null"
+      :closable="true"
       :afterClose="closeModal"
-      :maskClosable="false">
+      :maskClosable="false"
-      <div class="add-tags">
+      @cancel="tagsModalVisible = false"
-        <div class="add-tags__input">
+      v-ctrl-enter="handleAddTag">
-          <p class="add-tags__label">{{ $t('label.key') }}</p>
+      <a-form :form="newTagsForm" @submit="handleAddTag">
-          <a-input autoFocus v-model="newTag.key"></a-input>
+        <div class="add-tags">
+          <div class="add-tags__input">
+            <p class="add-tags__label">{{ $t('label.key') }}</p>
+            <a-form-item>
+              <a-input
+                autoFocus
+                v-decorator="['key', { rules: [{ required: true, message: this.$t('message.specifiy.tag.key')}] }]" />
+            </a-form-item>
+          </div>
+          <div class="add-tags__input">
+            <p class="add-tags__label">{{ $t('label.value') }}</p>
+            <a-form-item>
+              <a-input v-decorator="['value', { rules: [{ required: true, message: this.$t('message.specifiy.tag.value')}] }]" />
+            </a-form-item>
+          </div>
+          <a-button
+            html-type="submit"
+            type="primary"
+            :disabled="!('createTags' in $store.getters.apis)"
+            @click="handleAddTag"
+            :loading="addTagLoading">{{ $t('label.add') }}</a-button>
         </div>
-        <div class="add-tags__input">
+      </a-form>
-          <p class="add-tags__label">{{ $t('label.value') }}</p>
-          <a-input v-model="newTag.value"></a-input>
-        </div>
-        <a-button type="primary" :disabled="!('createTags' in $store.getters.apis)" @click="() => handleAddTag()" :loading="addTagLoading">{{ $t('label.add') }}</a-button>
-      </div>
 
       <a-divider></a-divider>
 
@@ -205,10 +221,6 @@ export default {
       tagsModalVisible: false,
       selectedRule: null,
       tags: [],
-      newTag: {
-        key: null,
-        value: null
-      },
       totalCount: 0,
       page: 1,
       pageSize: 10,
@@ -237,7 +249,8 @@ export default {
           title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
-      ]
+      ],
+      newTagsForm: this.$form.createForm(this)
     }
   },
   computed: {
@@ -361,6 +374,7 @@ export default {
       })
     },
     addRule () {
+      if (this.loading) return
       this.loading = true
       api('createFirewallRule', { ...this.newRule }).then(response => {
         this.$pollJob({
@@ -410,6 +424,8 @@ export default {
     openTagsModal (id) {
       this.selectedRule = id
       this.tagsModalVisible = true
+      this.newTagsForm.resetFields()
+
       api('listTags', {
         resourceId: id,
         resourceType: 'FirewallRule',
@@ -421,38 +437,48 @@ export default {
         this.closeModal()
       })
     },
-    handleAddTag () {
+    handleAddTag (e) {
+      e.preventDefault()
+      if (this.addTagLoading) return
       this.addTagLoading = true
-      api('createTags', {
+
-        'tags[0].key': this.newTag.key,
+      this.newTagsForm.validateFields((err, values) => {
-        'tags[0].value': this.newTag.value,
+        if (err) {
-        resourceIds: this.selectedRule,
+          this.tagsLoading = false
-        resourceType: 'FirewallRule'
+          return
-      }).then(response => {
+        }
-        this.$pollJob({
+
-          jobId: response.createtagsresponse.jobid,
+        api('createTags', {
-          successMessage: this.$t('message.success.add.tag'),
+          'tags[0].key': values.key,
-          successMethod: () => {
+          'tags[0].value': values.value,
-            this.parentToggleLoading()
+          resourceIds: this.selectedRule,
-            this.openTagsModal(this.selectedRule)
+          resourceType: 'FirewallRule'
-          },
+        }).then(response => {
-          errorMessage: this.$t('message.add.tag.failed'),
+          this.$pollJob({
-          errorMethod: () => {
+            jobId: response.createtagsresponse.jobid,
-            this.parentToggleLoading()
+            successMessage: this.$t('message.success.add.tag'),
-            this.closeModal()
+            successMethod: () => {
-          },
+              this.parentToggleLoading()
-          loadingMessage: this.$t('message.add.tag.processing'),
+              this.openTagsModal(this.selectedRule)
-          catchMessage: this.$t('error.fetching.async.job.result'),
+            },
-          catchMethod: () => {
+            errorMessage: this.$t('message.add.tag.failed'),
-            this.parentFetchData()
+            errorMethod: () => {
-            this.parentToggleLoading()
+              this.parentToggleLoading()
-            this.closeModal()
+              this.closeModal()
-          }
+            },
+            loadingMessage: this.$t('message.add.tag.processing'),
+            catchMessage: this.$t('error.fetching.async.job.result'),
+            catchMethod: () => {
+              this.parentFetchData()
+              this.parentToggleLoading()
+              this.closeModal()
+            }
+          })
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.addTagLoading = false
         })
-      }).catch(error => {
-        this.$notifyError(error)
-      }).finally(() => {
-        this.addTagLoading = false
       })
     },
     handleDeleteTag (tag) {

ui/src/views/network/GuestIpRanges.vue

@@ -73,8 +73,8 @@
       :visible="showCreateForm"
       :title="$t('label.add.ip.range')"
       :maskClosable="false"
+      :closable="true"
       :footer="null"
-      :cancelText="$t('label.cancel')"
       @cancel="() => { showCreateForm = false }"
       centered
       width="auto">

ui/src/views/network/IngressEgressRuleConfigure.vue

@@ -18,7 +18,7 @@
 <template>
   <div>
 
-    <div>
+    <div v-ctrl-enter="handleAddRule">
       <div style="margin-bottom: 20px;">
         <div class="form__label">{{ $t('label.add.by') }}:</div>
         <a-radio-group @change="resetAllRules" v-model="addType">
@@ -127,8 +127,11 @@
       :title="$t('label.edit.tags')"
       v-model="tagsModalVisible"
       :footer="null"
+      :closable="true"
       :afterClose="closeModal"
-      :maskClosable="false">
+      :maskClosable="false"
+      @cancel="tagsModalVisible = false"
+      v-ctrl-enter="handleAddTag">
       <a-spin v-if="tagsLoading"></a-spin>
 
       <div v-else>
@@ -147,7 +150,7 @@
               <a-input v-decorator="['value', { rules: [{ required: true, message: this.$t('message.specifiy.tag.value')}] }]" />
             </a-form-item>
           </div>
-          <a-button type="primary" html-type="submit">{{ $t('label.add') }}</a-button>
+          <a-button type="primary">{{ $t('label.add') }}</a-button>
         </a-form>
 
         <a-divider style="margin-top: 0;"></a-divider>
@@ -247,7 +250,8 @@ export default {
           title: this.$t('label.action'),
           scopedSlots: { customRender: 'actions' }
         }
-      ]
+      ],
+      isSubmitted: false
     }
   },
   watch: {
@@ -274,6 +278,8 @@ export default {
       this.rules = this.tabType === 'ingress' ? this.resource.ingressrule : this.resource.egressrule
     },
     handleAddRule () {
+      if (this.isSubmitted) return
+      this.isSubmitted = true
       this.parentToggleLoading()
       api(this.tabType === 'ingress' ? 'authorizeSecurityGroupIngress' : 'authorizeSecurityGroupEgress', {
         securitygroupid: this.resource.id,
@@ -294,21 +300,25 @@ export default {
           successMessage: this.$t('message.success.add.rule'),
           successMethod: () => {
             this.parentToggleLoading()
+            this.isSubmitted = false
           },
           errorMessage: this.$t('message.add.rule.failed'),
           errorMethod: () => {
             this.parentToggleLoading()
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.add.rule.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
             this.parentFetchData()
             this.parentToggleLoading()
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
         this.$notifyError(error)
         this.parentToggleLoading()
+        this.isSubmitted = false
       })
     },
     handleDeleteRule (rule) {
@@ -390,6 +400,7 @@ export default {
       })
     },
     handleAddTag (e) {
+      if (this.tagsLoading) return
       this.tagsLoading = true
 
       e.preventDefault()

ui/src/views/network/InternalLBAssignVmForm.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
-    <div>
+    <div v-ctrl-enter="handleSubmit">
       <div class="vm-modal__header">
         <span style="min-width: 200px;">{{ $t('label.name') }}</span>
         <span>{{ $t('label.state') }}</span>
@@ -80,7 +80,7 @@
       <a-button @click="closeModal">
         {{ $t('label.cancel') }}
       </a-button>
-      <a-button type="primary" @click="handleSubmit">
+      <a-button type="primary" ref="submit" @click="handleSubmit">
         {{ $t('label.ok') }}
       </a-button>
     </div>
@@ -195,6 +195,9 @@ export default {
       this.$emit('close-action')
     },
     handleSubmit () {
+      if (this.fetchLoading) {
+        return
+      }
       var j = 0
       this.params = {}
       for (var i = 0; i < this.iLb.virtualmachineid.length; i++) {

ui/src/views/network/IpAddressesTab.vue

@@ -112,10 +112,9 @@
       :visible="showAcquireIp"
       :title="$t('label.acquire.new.ip')"
       :closable="true"
-      :okText="$t('label.ok')"
+      :footer="null"
-      :cancelText="$t('label.cancel')"
       @cancel="onCloseModal"
-      @ok="acquireIpAddress"
+      v-ctrl-enter="acquireIpAddress"
       centered
       width="450px">
       <a-spin :spinning="acquireLoading">
@@ -131,6 +130,10 @@
               :key="ip.ipaddress">{{ ip.ipaddress }}</a-select-option>
           </a-select>
         </a-form-item>
+        <div :span="24" class="action-button">
+          <a-button @click="onCloseModal">{{ $t('label.cancel') }}</a-button>
+          <a-button ref="submit" type="primary" @click="acquireIpAddress">{{ $t('label.ok') }}</a-button>
+        </div>
       </a-spin>
     </a-modal>
     <bulk-action-view
@@ -319,6 +322,7 @@ export default {
       this.selectedItems = this.selectedItems.map(v => ({ ...v, status: 'InProgress' }))
     },
     acquireIpAddress () {
+      if (this.acquireLoading) return
       const params = {}
       if (this.$route.path.startsWith('/vpc')) {
         params.vpcid = this.resource.id

ui/src/views/network/LoadBalancing.vue

@@ -17,7 +17,7 @@
 
 <template>
   <div>
-    <div>
+    <div v-ctrl-enter="handleOpenAddVMModal">
       <div class="form">
         <div class="form__item" ref="newRuleName">
           <div class="form__label"><span class="form__required">*</span>{{ $t('label.name') }}</div>
@@ -151,9 +151,12 @@
       :title="$t('label.edit.tags')"
       v-model="tagsModalVisible"
       :footer="null"
+      :closable="true"
       :afterClose="closeModal"
       :maskClosable="false"
-      class="tags-modal">
+      class="tags-modal"
+      @cancel="tagsModalVisible = false"
+      v-ctrl-enter="handleAddTag">
       <span v-show="tagsModalLoading" class="modal-loading">
         <a-icon type="loading"></a-icon>
       </span>
@@ -195,7 +198,10 @@
       :footer="null"
       :afterClose="closeModal"
       :maskClosable="false"
-      :okButtonProps="{ props: {htmlType: 'submit'}}">
+      :closable="true"
+      :okButtonProps="{ props: {htmlType: 'submit'}}"
+      @cancel="stickinessModalVisible = false"
+      v-ctrl-enter="handleSubmitStickinessForm">
 
       <span v-show="stickinessModalLoading" class="modal-loading">
         <a-icon type="loading"></a-icon>
@@ -258,7 +264,11 @@
         <a-form-item :label="$t('label.sticky.expire')" v-show="stickinessPolicyMethod === 'SourceBased'">
           <a-input v-decorator="['expire']" />
         </a-form-item>
-        <a-button type="primary" html-type="submit">{{ $t('label.ok') }}</a-button>
+
+        <div :span="24" class="action-button">
+          <a-button @click="stickinessModalVisible = false">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" @submit="handleSubmitStickinessForm">{{ $t('label.ok') }}</a-button>
+        </div>
       </a-form>
     </a-modal>
 
@@ -267,7 +277,10 @@
       v-model="editRuleModalVisible"
       :afterClose="closeModal"
       :maskClosable="false"
-      @ok="handleSubmitEditForm">
+      :closable="true"
+      :footer="null"
+      @cancel="editRuleModalVisible = false"
+      v-ctrl-enter="handleSubmitEditForm">
       <span v-show="editRuleModalLoading" class="modal-loading">
         <a-icon type="loading"></a-icon>
       </span>
@@ -293,21 +306,24 @@
             <a-select-option value="udp">{{ $t('label.udp') }}</a-select-option>
           </a-select>
         </div>
+        <div :span="24" class="action-button">
+          <a-button @click="() => editRuleModalVisible = false">{{ $t('label.cancel') }}</a-button>
+          <a-button type="primary" @click="handleSubmitEditForm">{{ $t('label.ok') }}</a-button>
+        </div>
       </div>
     </a-modal>
 
     <a-modal
       :title="$t('label.add.vms')"
       :maskClosable="false"
-      :okText="$t('label.ok')"
+      :closable="true"
-      :cancelText="$t('label.cancel')"
       v-model="addVmModalVisible"
       class="vm-modal"
       width="60vw"
-      @ok="handleAddNewRule"
       :okButtonProps="{ props:
         {disabled: newRule.virtualmachineid === [] } }"
       @cancel="closeModal"
+      v-ctrl-enter="handleAddNewRule"
     >
       <div>
         <span
@@ -383,6 +399,11 @@
           </template>
         </a-pagination>
       </div>
+
+      <div :span="24" class="action-button">
+        <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+        <a-button type="primary" @click="handleAddNewRule">{{ $t('label.ok') }}</a-button>
+      </div>
     </a-modal>
 
     <bulk-action-view
@@ -699,6 +720,7 @@ export default {
       })
     },
     handleAddTag (e) {
+      if (this.tagsModalLoading) return
       this.tagsModalLoading = true
 
       e.preventDefault()
@@ -860,6 +882,7 @@ export default {
       })
     },
     handleSubmitStickinessForm (e) {
+      if (this.stickinessModalLoading) return
       this.stickinessModalLoading = true
       e.preventDefault()
       this.stickinessPolicyForm.validateFields((err, values) => {
@@ -936,6 +959,7 @@ export default {
       this.editRuleDetails.protocol = this.selectedRule.protocol
     },
     handleSubmitEditForm () {
+      if (this.editRuleModalLoading) return
       this.loading = true
       this.editRuleModalLoading = true
       api('updateLoadBalancerRule', {
@@ -1068,6 +1092,7 @@ export default {
       })
     },
     handleOpenAddVMModal () {
+      if (this.addVmModalLoading) return
       if (!this.selectedRule) {
         if (!this.newRule.name) {
           this.$refs.newRuleName.classList.add('error')
@@ -1199,6 +1224,7 @@ export default {
       })
     },
     handleAddNewRule () {
+      if (this.loading) return
       this.loading = true
 
       if (this.selectedRule) {

ui/src/views/network/PortForwarding.vue

@@ -18,7 +18,7 @@
 <template>
   <div>
     <div>
-      <div class="form">
+      <div class="form" v-ctrl-enter="openAddVMModal">
         <div class="form__item">
           <div class="form__label">{{ $t('label.privateport') }}</div>
           <a-input-group class="form__item__input-container" compact>
@@ -136,23 +136,33 @@
       :title="$t('label.edit.tags')"
       v-model="tagsModalVisible"
       :footer="null"
+      :closable="true"
       :maskClosable="false"
-      :afterClose="closeModal">
+      :afterClose="closeModal"
+      @cancel="tagsModalVisible = false"
+      v-ctrl-enter="handleAddTag">
       <span v-show="tagsModalLoading" class="tags-modal-loading">
         <a-icon type="loading"></a-icon>
       </span>
 
-      <div class="add-tags">
+      <a-form :form="newTagsForm" class="add-tags" @submit="handleAddTag">
         <div class="add-tags__input">
           <p class="add-tags__label">{{ $t('label.key') }}</p>
-          <a-input autoFocus v-model="newTag.key"></a-input>
+          <a-form-item>
+            <a-input
+              autoFocus
+              v-decorator="['key', { rules: [{ required: true, message: this.$t('message.specifiy.tag.key')}] }]" />
+          </a-form-item>
         </div>
         <div class="add-tags__input">
           <p class="add-tags__label">{{ $t('label.value') }}</p>
-          <a-input v-model="newTag.value"></a-input>
+          <a-form-item>
+            <a-input v-decorator="['value', { rules: [{ required: true, message: this.$t('message.specifiy.tag.value')}] }]" />
+          </a-form-item>
         </div>
-        <a-button type="primary" @click="() => handleAddTag()">{{ $t('label.add') }}</a-button>
+
-      </div>
+        <a-button type="primary" @click="handleAddTag">{{ $t('label.add') }}</a-button>
+      </a-form>
 
       <a-divider></a-divider>
 
@@ -170,22 +180,21 @@
     <a-modal
       :title="$t('label.add.vm')"
       :maskClosable="false"
-      :okText="$t('label.ok')"
+      :closable="true"
-      :cancelText="$t('label.cancel')"
       v-model="addVmModalVisible"
       class="vm-modal"
       width="60vw"
-      @ok="addRule"
       :okButtonProps="{ props:
         {disabled: newRule.virtualmachineid === null } }"
       @cancel="closeModal"
+      v-ctrl-enter="addRule"
     >
       <div>
         <span
           v-if="'vpcid' in resource && !('associatednetworkid' in resource)">
           <strong>{{ $t('label.select.tier') }} </strong>
           <a-select
-            :autoFocu="'vpcid' in resource && !('associatednetworkid' in resource)"
+            :autoFocus="'vpcid' in resource && !('associatednetworkid' in resource)"
             v-model="selectedTier"
             @change="fetchVirtualMachines()"
             :placeholder="$t('label.select.tier')" >
@@ -198,7 +207,7 @@
           </a-select>
         </span>
         <a-input-search
-          :autoFocu="!('vpcid' in resource && !('associatednetworkid' in resource))"
+          :autoFocus="!('vpcid' in resource && !('associatednetworkid' in resource))"
           class="input-search"
           :placeholder="$t('label.search')"
           v-model="searchQuery"
@@ -253,6 +262,10 @@
           </template>
         </a-pagination>
       </div>
+      <div :span="24" class="action-button">
+        <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+        <a-button type="primary" @click="addRule">{{ $t('label.ok') }}</a-button>
+      </div>
     </a-modal>
 
     <bulk-action-view
@@ -322,10 +335,6 @@ export default {
       selectedRule: null,
       selectedTier: null,
       tags: [],
-      newTag: {
-        key: null,
-        value: null
-      },
       tagsModalLoading: false,
       addVmModalVisible: false,
       addVmModalLoading: false,
@@ -404,7 +413,8 @@ export default {
       vmPage: 1,
       vmPageSize: 10,
       vmCount: 0,
-      searchQuery: null
+      searchQuery: null,
+      newTagsForm: this.$form.createForm(this)
     }
   },
   computed: {
@@ -553,6 +563,7 @@ export default {
       })
     },
     addRule () {
+      if (this.loading) return
       this.loading = true
       this.addVmModalVisible = false
       const networkId = ('vpcid' in this.resource && !('associatednetworkid' in this.resource)) ? this.selectedTier : this.resource.associatednetworkid
@@ -596,8 +607,7 @@ export default {
       this.newRule.virtualmachineid = null
     },
     resetTagInputs () {
-      this.newTag.key = null
+      this.newTagsForm.resetFields()
-      this.newTag.value = null
     },
     closeModal () {
       this.selectedRule = null
@@ -628,36 +638,44 @@ export default {
         this.closeModal()
       })
     },
-    handleAddTag () {
+    handleAddTag (e) {
+      if (this.tagsModalLoading) return
       this.tagsModalLoading = true
-      api('createTags', {
+
-        'tags[0].key': this.newTag.key,
+      e.preventDefault()
-        'tags[0].value': this.newTag.value,
+      this.newTagsForm.validateFields((err, values) => {
-        resourceIds: this.selectedRule,
+        if (err) {
-        resourceType: 'PortForwardingRule'
+          this.tagsModalLoading = false
-      }).then(response => {
+          return
-        this.$pollJob({
+        }
-          jobId: response.createtagsresponse.jobid,
+
-          successMessage: this.$t('message.success.add.tag'),
+        api('createTags', {
-          successMethod: () => {
+          'tags[0].key': values.key,
-            this.parentToggleLoading()
+          'tags[0].value': values.value,
-            this.openTagsModal(this.selectedRule)
+          resourceIds: this.selectedRule,
-          },
+          resourceType: 'PortForwardingRule'
-          errorMessage: this.$t('message.add.tag.failed'),
+        }).then(response => {
-          errorMethod: () => {
+          this.$pollJob({
-            this.parentToggleLoading()
+            jobId: response.createtagsresponse.jobid,
-            this.closeModal()
+            successMessage: this.$t('message.success.add.tag'),
-          },
+            successMethod: () => {
-          loadingMessage: this.$t('message.add.tag.processing'),
+              this.parentToggleLoading()
-          catchMessage: this.$t('error.fetching.async.job.result'),
+              this.openTagsModal(this.selectedRule)
-          catchMethod: () => {
+            },
-            this.parentFetchData()
+            errorMessage: this.$t('message.add.tag.failed'),
-            this.parentToggleLoading()
+            errorMethod: () => {
-            this.closeModal()
+              this.parentToggleLoading()
-          }
+              this.closeModal()
+            },
+            loadingMessage: this.$t('message.add.tag.processing'),
+            catchMessage: this.$t('error.fetching.async.job.result'),
+            catchMethod: () => {
+              this.parentFetchData()
+              this.parentToggleLoading()
+              this.closeModal()
+            }
+          })
         })
-      }).catch(error => {
-        this.$notifyError(error)
       })
     },
     handleDeleteTag (tag) {
@@ -693,6 +711,7 @@ export default {
       })
     },
     openAddVMModal () {
+      if (this.addVmModalLoading) return
       this.addVmModalVisible = true
       this.fetchVirtualMachines()
     },

ui/src/views/network/StaticRoutesTab.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="componentLoading">
-    <div class="new-route">
+    <div class="new-route" v-ctrl-enter="handleAdd">
       <a-input v-model="newRoute" icon="plus" :placeholder="$t('label.cidr.destination.network')" autoFocus></a-input>
       <a-button type="primary" :disabled="!('createStaticRoute' in $store.getters.apis)" @click="handleAdd">{{ $t('label.add.route') }}</a-button>
     </div>
@@ -35,7 +35,14 @@
       </div>
     </div>
 
-    <a-modal title="Edit Tags" v-model="tagsModalVisible" :footer="null" :maskClosable="false">
+    <a-modal
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :closable="true"
+      :maskClosable="false"
+      @cancel="tagsModalVisible = false"
+      v-ctrl-enter="handleAddTag">
       <a-spin v-if="tagsLoading"></a-spin>
 
       <div v-else>
@@ -127,6 +134,7 @@ export default {
       })
     },
     handleAdd () {
+      if (this.componentLoading) return
       if (!this.newRoute) return
 
       this.componentLoading = true
@@ -236,6 +244,7 @@ export default {
       })
     },
     handleAddTag (e) {
+      if (this.tagsLoading) return
       this.tagsLoading = true
 
       e.preventDefault()

ui/src/views/network/VpcTab.vue

@@ -72,8 +72,11 @@
         <a-modal
           v-model="modals.networkAcl"
           :title="$t('label.add.acl.list')"
+          :footer="null"
           :maskClosable="false"
-          @ok="handleNetworkAclFormSubmit">
+          :closable="true"
+          @cancel="modals.networkAcl = fetchAclList"
+          v-ctrl-enter="handleNetworkAclFormSubmit">
           <a-form @submit.prevent="handleNetworkAclFormSubmit" :form="networkAclForm">
             <a-form-item :label="$t('label.add.list.name')">
               <a-input
@@ -83,6 +86,11 @@
             <a-form-item :label="$t('label.description')">
               <a-input v-decorator="['description', {rules: [{ required: true, message: `${$t('label.required')}` }]}]"></a-input>
             </a-form-item>
+
+            <div :span="24" class="action-button">
+              <a-button @click="modals.networkAcl = false">{{ $t('label.cancel') }}</a-button>
+              <a-button type="primary" @click="handleNetworkAclFormSubmit">{{ $t('label.ok') }}</a-button>
+            </div>
           </a-form>
         </a-modal>
       </a-tab-pane>
@@ -128,7 +136,10 @@
           v-model="modals.gateway"
           :title="$t('label.add.new.gateway')"
           :maskClosable="false"
-          @ok="handleGatewayFormSubmit">
+          :closable="true"
+          :footer="null"
+          @cancel="modals.gateway = false"
+          v-ctrl-enter="handleGatewayFormSubmit">
           <a-spin :spinning="modals.gatewayLoading">
             <p>{{ $t('message.add.new.gateway.to.vpc') }}</p>
             <a-form @submit.prevent="handleGatewayFormSubmit" :form="gatewayForm">
@@ -180,6 +191,11 @@
                   </a-select-option>
                 </a-select>
               </a-form-item>
+
+              <div :span="24" class="action-button">
+                <a-button @click="modals.gateway = false">{{ $t('label.cancel') }}</a-button>
+                <a-button type="primary" @click="handleGatewayFormSubmit">{{ $t('label.ok') }}</a-button>
+              </div>
             </a-form>
           </a-spin>
         </a-modal>
@@ -253,7 +269,10 @@
           v-model="modals.vpnConnection"
           :title="$t('label.create.vpn.connection')"
           :maskClosable="false"
-          @ok="handleVpnConnectionFormSubmit">
+          :closable="true"
+          :footer="null"
+          @cancel="modals.vpnConnection = false"
+          v-ctrl-enter="handleVpnConnectionFormSubmit">
           <a-spin :spinning="modals.vpnConnectionLoading">
             <a-form @submit.prevent="handleVpnConnectionFormSubmit" :form="vpnConnectionForm">
               <a-form-item :label="$t('label.vpncustomergatewayid')">
@@ -266,6 +285,11 @@
               <a-form-item :label="$t('label.passive')">
                 <a-checkbox v-decorator="['passive']"></a-checkbox>
               </a-form-item>
+
+              <div :span="24" class="action-button">
+                <a-button @click="modals.vpnConnection = false">{{ $t('label.cancel') }}</a-button>
+                <a-button type="primary" htmlType="submit" @click="handleVpnConnectionFormSubmit">{{ $t('label.ok') }}</a-button>
+              </div>
             </a-form>
           </a-spin>
         </a-modal>
@@ -566,6 +590,7 @@ export default {
       }
     },
     handleGatewayFormSubmit () {
+      if (this.modals.gatewayLoading) return
       this.modals.gatewayLoading = true
 
       this.gatewayForm.validateFields(errors => {
@@ -620,6 +645,7 @@ export default {
       })
     },
     handleVpnConnectionFormSubmit () {
+      if (this.fetchLoading) return
       this.fetchLoading = true
       this.modals.vpnConnection = false
 
@@ -663,6 +689,7 @@ export default {
       })
     },
     handleNetworkAclFormSubmit () {
+      if (this.fetchLoading) return
       this.fetchLoading = true
       this.modals.networkAcl = false
 

ui/src/views/network/VpcTiersTab.vue

@@ -158,7 +158,10 @@
       v-model="showCreateNetworkModal"
       :title="$t('label.add.new.tier')"
       :maskClosable="false"
-      @ok="handleAddNetworkSubmit">
+      :closable="true"
+      :footer="null"
+      @cancel="showCreateNetworkModal = false"
+      v-ctrl-enter="handleAddNetworkSubmit">
       <a-spin :spinning="modalLoading">
         <a-form @submit.prevent="handleAddNetworkSubmit" :form="form">
           <a-form-item :label="$t('label.name')">
@@ -213,6 +216,10 @@
           <a-alert v-else-if="this.selectedNetworkAcl.name==='default_deny'" type="warning" show-icon>
             <span slot="message" v-html="$t('message.network.acl.default.deny')" />
           </a-alert>
+          <div :span="24" class="action-button">
+            <a-button @click="showCreateNetworkModal = false">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" @click="handleAddNetworkSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
         </a-form>
       </a-spin>
     </a-modal>
@@ -221,7 +228,10 @@
       v-model="showAddInternalLB"
       :title="$t('label.add.internal.lb')"
       :maskClosable="false"
-      @ok="handleAddInternalLBSubmit">
+      :closable="true"
+      :footer="null"
+      @cancel="showAddInternalLB = false"
+      v-ctrl-enter="handleAddInternalLBSubmit">
       <a-spin :spinning="modalLoading">
         <a-form @submit.prevent="handleAddInternalLBSubmit" :form="form">
           <a-form-item :label="$t('label.name')">
@@ -261,6 +271,11 @@
               </a-select-option>
             </a-select>
           </a-form-item>
+
+          <div :span="24" class="action-button">
+            <a-button @click="showAddInternalLB = false">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" @click="handleAddInternalLBSubmit">{{ $t('label.ok') }}</a-button>
+          </div>
         </a-form>
       </a-spin>
     </a-modal>
@@ -565,11 +580,14 @@ export default {
       this.networkid = id
     },
     handleAddNetworkSubmit () {
+      if (this.modalLoading) return
       this.fetchLoading = true
+      this.modalLoading = true
 
       this.form.validateFields((errors, values) => {
         if (errors) {
           this.fetchLoading = false
+          this.modalLoading = false
           return
         }
 
@@ -602,15 +620,18 @@ export default {
           this.parentFetchData()
           this.fetchData()
           this.fetchLoading = false
+          this.modalLoading = false
         })
       })
     },
     handleAddInternalLBSubmit () {
+      if (this.modalLoading) return
       this.fetchLoading = true
       this.modalLoading = true
       this.form.validateFields((errors, values) => {
         if (errors) {
           this.fetchLoading = false
+          this.modalLoading = false
           return
         }
         api('createLoadBalancer', {
@@ -629,20 +650,24 @@ export default {
             successMessage: this.$t('message.success.create.internallb'),
             successMethod: () => {
               this.fetchData()
+              this.modalLoading = false
             },
             errorMessage: `${this.$t('message.create.internallb.failed')} ` + response,
             errorMethod: () => {
               this.fetchData()
+              this.modalLoading = false
             },
             loadingMessage: this.$t('message.create.internallb.processing'),
             catchMessage: this.$t('error.fetching.async.job.result'),
             catchMethod: () => {
               this.fetchData()
+              this.modalLoading = false
             }
           })
         }).catch(error => {
           console.error(error)
           this.$message.error(this.$t('message.create.internallb.failed'))
+          this.modalLoading = false
         }).finally(() => {
           this.modalLoading = false
           this.fetchLoading = false

ui/src/views/network/VpnDetails.vue

@@ -32,7 +32,10 @@
       :footer="null"
       oncancel="disableVpn = false"
       :title="$t('label.disable.vpn')"
-      :maskClosable="false">
+      :closable="true"
+      :maskClosable="false"
+      @cancel="disableVpn = false"
+      v-ctrl-enter="handleDisableVpn">
       <p>{{ $t('message.disable.vpn') }}</p>
 
       <a-divider></a-divider>
@@ -54,7 +57,10 @@
       :footer="null"
       onCancel="enableVpn = false"
       :title="$t('label.enable.vpn')"
-      :maskClosable="false">
+      :maskClosable="false"
+      :closable="true"
+      @cancel="enableVpn = false"
+      v-ctrl-enter="handleCreateVpn">
       <p>{{ $t('message.enable.vpn') }}</p>
 
       <a-divider></a-divider>
@@ -82,7 +88,8 @@ export default {
     return {
       remoteAccessVpn: null,
       enableVpn: false,
-      disableVpn: false
+      disableVpn: false,
+      isSubmitted: false
     }
   },
   inject: ['parentFetchData', 'parentToggleLoading'],
@@ -112,6 +119,8 @@ export default {
       })
     },
     handleCreateVpn () {
+      if (this.isSubmitted) return
+      this.isSubmitted = true
       this.parentToggleLoading()
       this.enableVpn = false
       api('createRemoteAccessVpn', {
@@ -131,11 +140,13 @@ export default {
             })
             this.fetchData()
             this.parentToggleLoading()
+            this.isSubmitted = false
           },
           errorMessage: this.$t('message.enable.vpn.failed'),
           errorMethod: () => {
             this.fetchData()
             this.parentToggleLoading()
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.enable.vpn.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -143,6 +154,7 @@ export default {
             this.fetchData()
             this.parentFetchData()
             this.parentToggleLoading()
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
@@ -150,9 +162,12 @@ export default {
         this.fetchData()
         this.parentFetchData()
         this.parentToggleLoading()
+        this.isSubmitted = false
       })
     },
     handleDisableVpn () {
+      if (this.isSubmitted) return
+      this.isSubmitted = true
       this.parentToggleLoading()
       this.disableVpn = false
       api('deleteRemoteAccessVpn', {
@@ -165,11 +180,13 @@ export default {
           successMethod: () => {
             this.fetchData()
             this.parentToggleLoading()
+            this.isSubmitted = false
           },
           errorMessage: this.$t('message.disable.vpn.failed'),
           errorMethod: () => {
             this.fetchData()
             this.parentToggleLoading()
+            this.isSubmitted = false
           },
           loadingMessage: this.$t('message.disable.vpn.processing'),
           catchMessage: this.$t('error.fetching.async.job.result'),
@@ -177,6 +194,7 @@ export default {
             this.fetchData()
             this.parentFetchData()
             this.parentToggleLoading()
+            this.isSubmitted = false
           }
         })
       }).catch(error => {
@@ -184,6 +202,7 @@ export default {
         this.fetchData()
         this.parentFetchData()
         this.parentToggleLoading()
+        this.isSubmitted = false
       })
     }
   }

ui/src/views/offering/AddComputeOffering.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -494,8 +494,8 @@
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
@@ -717,10 +717,12 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
         }
+        this.loading = true
         var params = {
           issystem: this.isSystem,
           name: values.name,
@@ -883,12 +885,4 @@ export default {
       width: 700px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/offering/AddDiskOffering.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -465,10 +465,12 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
         }
+        this.loading = true
         var params = {
           isMirrored: false,
           name: values.name,
@@ -568,12 +570,4 @@ export default {
       width: 430px;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/offering/AddNetworkOffering.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -674,10 +674,12 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
         }
+        this.loading = true
         var params = {}
 
         var self = this
@@ -895,12 +897,4 @@ export default {
     height: 250px;
     overflow: auto;
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/offering/AddVpcOffering.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -127,8 +127,8 @@
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
@@ -301,10 +301,12 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
         }
+        this.loading = true
         var params = {}
         params.name = values.name
         params.displaytext = values.displaytext
@@ -410,12 +412,4 @@ export default {
     height: 250px;
     overflow: auto;
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/offering/ImportBackupOffering.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-form
       layout="vertical"
       :form="form"
@@ -72,7 +72,7 @@
       </a-form-item>
       <div :span="24" class="action-button">
         <a-button :loading="loading" @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
       </div>
     </a-form>
   </div>
@@ -139,10 +139,12 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
         }
+        this.loading = true
         const params = {}
         for (const key in values) {
           const input = values[key]
@@ -164,14 +166,17 @@ export default {
               description: values.name,
               successMethod: result => {
                 this.closeAction()
+                this.loading = false
               },
               loadingMessage: `${title} ${this.$t('label.in.progress')} ${this.$t('label.for')} ${params.name}`,
-              catchMessage: this.$t('error.fetching.async.job.result')
+              catchMessage: this.$t('error.fetching.async.job.result'),
+              catchMethod: () => {
+                this.loading = false
+              }
             })
           }
         }).catch(error => {
           this.$notifyError(error)
-        }).finally(f => {
           this.loading = false
         })
       })
@@ -198,14 +203,5 @@ export default {
   @media (min-width: 500px) {
     width: 450px;
   }
-
-  .action-button {
-    text-align: right;
-    margin-top: 20px;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 }
 </style>

ui/src/views/offering/UpdateOfferingAccess.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
+  <div class="form-layout" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -85,7 +85,7 @@
 
         <div :span="24" class="action-button">
           <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
 
       </a-form>
@@ -244,10 +244,12 @@ export default {
     },
     handleSubmit (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
         }
+        this.loading = true
 
         const params = {}
         params.id = this.resource.id
@@ -307,12 +309,4 @@ export default {
       width: 25vw;
     }
   }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/plugins/quota/EditTariffValueWizard.vue

@@ -25,10 +25,9 @@
     :closable="true"
     :maskClosable="false"
     :visible="showAction"
-    :okText="$t('label.ok')"
+    :footer="null"
-    :cancelText="$t('label.cancel')"
-    @ok="submitTariff"
     @cancel="onClose"
+    v-ctrl-enter="submitTariff"
   >
     <a-form
       :form="form"
@@ -56,6 +55,11 @@
             }]
           }]"></a-date-picker>
       </a-form-item>
+
+      <div :span="24" class="action-button">
+        <a-button @click="onClose">{{ $t('label.cancel') }}</a-button>
+        <a-button type="primary" @click="submitTariff">{{ $t('label.ok') }}</a-button>
+      </div>
     </a-form>
   </a-modal>
 </template>
@@ -97,6 +101,7 @@ export default {
     },
     submitTariff (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((error, values) => {
         if (error) return
 

ui/src/views/plugins/quota/EmailTemplateDetails.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <a-spin :spinning="loading || loading">
+  <a-spin :spinning="loading || loading" v-ctrl-enter="handleSubmit">
     <a-row :gutter="12">
       <a-col :md="24" :lg="24">
         <a-form-item :label="$t('label.templatesubject')">
@@ -45,6 +45,7 @@
           :disabled="!('quotaEmailTemplateUpdate' in $store.getters.apis)"
           :loading="loading"
           type="primary"
+          ref="submit"
           @click="handleSubmit">{{ $t('label.apply') }}</a-button>
         <a-button
           style="float: right;"
@@ -100,6 +101,7 @@ export default {
       this.formModel.templatebody = this.resource.templatebody || null
     },
     handleSubmit () {
+      if (this.loading) return
       const params = {}
       params.templatesubject = this.formModel.templatesubject
       params.templatebody = this.formModel.templatebody

ui/src/views/project/AddAccountOrUserToProject.vue

@@ -17,7 +17,10 @@
 <template>
   <div>
     <a-tabs class="form-layout">
-      <a-tab-pane key="1" :tab="$t('label.action.project.add.account')">
+      <a-tab-pane
+        key="1"
+        :tab="$t('label.action.project.add.account')"
+        v-ctrl-enter="addAccountToProject">
         <a-form
           :form="form"
           @submit="addAccountToProject"
@@ -60,11 +63,15 @@
           </a-form-item>
           <div :span="24" class="action-button">
             <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-            <a-button type="primary" @click="addAccountToProject" :loading="loading">{{ $t('label.ok') }}</a-button>
+            <a-button type="primary" ref="submit" @click="addAccountToProject" :loading="loading">{{ $t('label.ok') }}</a-button>
           </div>
         </a-form>
       </a-tab-pane>
-      <a-tab-pane key="2" :tab="$t('label.action.project.add.user')" v-if="apiParams.addUserToProject">
+      <a-tab-pane
+        key="2"
+        :tab="$t('label.action.project.add.user')"
+        v-if="apiParams.addUserToProject"
+        v-ctrl-enter="addUserToProject">
         <a-form
           :form="form"
           @submit="addUserToProject"
@@ -110,7 +117,7 @@
           </a-form-item>
           <div :span="24" class="action-button">
             <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-            <a-button type="primary" @click="addUserToProject" :loading="loading">{{ $t('label.ok') }}</a-button>
+            <a-button type="primary" ref="submit" @click="addUserToProject" :loading="loading">{{ $t('label.ok') }}</a-button>
           </div>
         </a-form>
       </a-tab-pane>
@@ -208,6 +215,7 @@ export default {
     },
     addAccountToProject (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -241,6 +249,7 @@ export default {
     },
     addUserToProject (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -288,11 +297,4 @@ export default {
       width: 450px;
     }
   }
-.action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
 </style>

ui/src/views/project/InvitationTokenTemplate.vue

@@ -16,7 +16,7 @@
 // under the License.
 
 <template>
-  <div class="row-project-invitation">
+  <div class="row-project-invitation" v-ctrl-enter="handleSubmit">
     <a-spin :spinning="loading">
       <a-form
         :form="form"
@@ -39,10 +39,10 @@
             :placeholder="apiParams.token.description"
           />
         </a-form-item>
-        <div class="card-footer">
+
-          <!-- ToDo extract as component -->
+        <div :span="24" class="action-button">
           <a-button @click="() => $emit('close-action')">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
         </div>
       </a-form>
     </a-spin>
@@ -66,7 +66,7 @@ export default {
   methods: {
     handleSubmit (e) {
       e.preventDefault()
-
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -120,12 +120,4 @@ export default {
 .row-project-invitation {
   min-width: 450px;
 }
-
-.card-footer {
-  text-align: right;
-
-  button + button {
-    margin-left: 8px;
-  }
-}
 </style>

ui/src/views/project/iam/ProjectRoleTab.vue

@@ -57,7 +57,10 @@
           v-model="editModalVisible"
           :footer="null"
           :afterClose="closeAction"
-          :maskClosable="false">
+          :maskClosable="false"
+          :closable="true"
+          @cancel="closeAction"
+          v-ctrl-enter="updateProjectRole">
           <a-form
             :form="form"
             @submit="updateProjectRole"
@@ -70,7 +73,7 @@
             </a-form-item>
             <div :span="24" class="action-button">
               <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-              <a-button type="primary" @click="updateProjectRole" :loading="loading">{{ $t('label.ok') }}</a-button>
+              <a-button type="primary" ref="submit" @click="updateProjectRole" :loading="loading">{{ $t('label.ok') }}</a-button>
             </div>
             <span slot="action" slot-scope="text, record">
               <tooltip-button
@@ -95,7 +98,10 @@
           v-model="createModalVisible"
           :footer="null"
           :afterClose="closeAction"
-          :maskClosable="false">
+          :maskClosable="false"
+          :closable="true"
+          @cancel="closeAction"
+          v-ctrl-enter="createProjectRole">
           <a-form
             :form="form"
             @submit="createProjectRole"
@@ -110,7 +116,7 @@
             </a-form-item>
             <div :span="24" class="action-button">
               <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-              <a-button type="primary" @click="createProjectRole" :loading="loading">{{ $t('label.ok') }}</a-button>
+              <a-button type="primary" ref="submit" @click="createProjectRole" :loading="loading">{{ $t('label.ok') }}</a-button>
             </div>
           </a-form>
         </a-modal>
@@ -206,6 +212,7 @@ export default {
     },
     updateProjectRole (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -245,6 +252,7 @@ export default {
     },
     createProjectRole (e) {
       e.preventDefault()
+      if (this.loading) return
       this.form.validateFields((err, values) => {
         if (err) {
           return
@@ -294,11 +302,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.action-button {
-    text-align: right;
-    button {
-      margin-right: 5px;
-    }
-  }
-</style>