From 502e755f846f12cf39689f84d0222a8345075992 Mon Sep 17 00:00:00 2001
From: Katrin Yordanova <katrin.yordanova@crust.tech>
Date: Tue, 19 Sep 2023 11:26:03 +0300
Subject: [PATCH] Add CButtonSubmit and apply it to webapps

---
 .../src/components/Apigw/CFiltersStepper.vue  |  16 ++-
 .../src/components/Apigw/CRouteEditorInfo.vue |  12 +-
 .../src/components/Apigw/CSettingsEditor.vue  |  10 +-
 .../Application/CApplicationEditorInfo.vue    |  11 +-
 .../Application/CApplicationEditorUnify.vue   |  13 +-
 .../Authclient/CAuthclientEditorInfo.vue      |  10 +-
 .../Federation/CFederationEditorInfo.vue      |  10 +-
 .../Permissions/CPermissionList.vue           |  14 +-
 .../components/Queues/CQueueEditorInfo.vue    |  13 +-
 .../src/components/Role/CRoleEditorInfo.vue   |  13 +-
 .../components/Role/CRoleEditorMembers.vue    |  10 +-
 .../CSensitivityLevelEditorInfo.vue           |  13 +-
 .../Settings/Compose/CComposeEditorBasic.vue  |  10 +-
 .../Settings/Compose/CComposeEditorUI.vue     |  10 +-
 .../Settings/Email/CSystemEmailServer.vue     |  29 ++--
 .../Settings/System/CSystemEditorAuth.vue     |  10 +-
 .../System/CSystemEditorAuthBgScreen.vue      |  14 +-
 .../Settings/System/CSystemEditorExternal.vue |  10 +-
 .../components/Settings/UI/CUICustomCSS.vue   |   8 +-
 .../Settings/UI/CUITopbarSettings.vue         |  10 +-
 .../Template/CTemplateEditorContent/Index.vue |  16 ++-
 .../Template/CTemplateEditorInfo.vue          |  13 +-
 .../src/components/User/CUserEditorAvatar.vue |  10 +-
 .../src/components/User/CUserEditorInfo.vue   |  14 +-
 .../components/User/CUserEditorPassword.vue   |  12 +-
 .../src/components/User/CUserEditorRoles.vue  |  10 +-
 .../Workflow/CWorkflowEditorInfo.vue          |  13 +-
 .../src/views/Federation/Nodes/Editor.vue     |  17 +--
 .../admin/src/views/Federation/Nodes/List.vue |  25 ++--
 .../admin/src/views/System/Apigw/Editor.vue   |   2 +
 .../admin/src/views/System/Apigw/Index.vue    |   2 +
 .../src/views/System/Application/Editor.vue   |   3 +
 .../src/views/System/AuthClient/Editor.vue    |   2 +
 .../src/views/System/Connection/Editor.vue    |  35 +++--
 .../admin/src/views/System/Email/Index.vue    |   6 +-
 .../admin/src/views/System/Queue/Editor.vue   |   1 +
 .../admin/src/views/System/Role/Editor.vue    |   1 +
 .../views/System/SensitivityLevel/Editor.vue  |   1 +
 .../admin/src/views/System/Settings/Index.vue |   2 +
 .../src/views/System/Template/Editor.vue      |   1 +
 .../admin/src/views/System/User/Editor.vue    |   4 +
 .../src/components/Admin/EditorToolbar.vue    |  72 +++++++---
 .../src/components/Common/RecordToolbar.vue   |  34 ++---
 .../components/Namespaces/Reminders/Edit.vue  |  26 +++-
 .../components/Namespaces/Reminders/index.vue |  28 +++-
 client/web/compose/src/components/index.js    |   1 +
 client/web/compose/src/mixins/pages.js        |   8 ++
 .../src/themes/corteza-base/custom.scss       |   2 +-
 .../compose/src/views/Admin/Charts/Edit.vue   |  42 +++++-
 .../compose/src/views/Admin/Modules/Edit.vue  |  24 ++++
 .../compose/src/views/Admin/Pages/Builder.vue |  25 +++-
 .../compose/src/views/Admin/Pages/Edit.vue    |  21 +++
 .../web/compose/src/views/Namespace/Edit.vue  |  30 +++++
 .../src/components/Common/EditorToolbar.vue   |  18 ++-
 .../reporter/src/components/EditorToolbar.vue |  31 ++++-
 client/web/reporter/src/mixins/report.js      |   4 +
 client/web/reporter/src/views/Layout.vue      |   2 +-
 .../web/reporter/src/views/Report/Builder.vue |  25 +++-
 client/web/reporter/src/views/Report/Edit.vue |   1 +
 .../src/components/WorkflowEditor.vue         |  41 +++---
 .../src/components/button/CButtonSubmit.vue   | 125 ++++++++++++++++++
 lib/vue/src/components/button/index.ts        |   1 +
 lib/vue/src/components/index.ts               |   4 +
 .../permissions/CPermissionsModal.vue         |  44 +++++-
 locale/en/corteza-webapp-workflow/editor.yaml |   1 +
 65 files changed, 755 insertions(+), 291 deletions(-)
 create mode 100644 lib/vue/src/components/button/CButtonSubmit.vue
 create mode 100644 lib/vue/src/components/button/index.ts

diff --git a/client/web/admin/src/components/Apigw/CFiltersStepper.vue b/client/web/admin/src/components/Apigw/CFiltersStepper.vue
index 4e84419c14..15e0fa5496 100644
--- a/client/web/admin/src/components/Apigw/CFiltersStepper.vue
+++ b/client/web/admin/src/components/Apigw/CFiltersStepper.vue
@@ -53,10 +53,11 @@
           :filters="getSelectedFiltersByStep"
           @addFilter="onAddFilter"
         />
-        <c-submit-button
+        <c-button-submit
+          :disabled="disabled"
           :processing="processing"
           :success="success"
-          :disabled="disabled"
+          :text="$t('admin:general.label.submit')"
           @submit="$emit('submit')"
         />
       </div>
@@ -65,9 +66,10 @@
 </template>
 <script>
 import CFilterModal from 'corteza-webapp-admin/src/components/Apigw/CFilterModal'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import CFiltersTable from 'corteza-webapp-admin/src/components/Apigw/CFiltersTable'
 import CFiltersDropdown from 'corteza-webapp-admin/src/components/Apigw/CFiltersDropdown'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 const mapKindToStep = {
   prefilter: 0,
@@ -78,31 +80,37 @@ const mapKindToStep = {
 export default {
   components: {
     CFilterModal,
-    CSubmitButton,
+    CButtonSubmit,
     CFiltersTable,
     CFiltersDropdown,
   },
+
   props: {
     fetching: {
       type: Boolean,
       value: false,
     },
+
     processing: {
       type: Boolean,
       value: false,
     },
+
     success: {
       type: Boolean,
       value: false,
     },
+
     filters: {
       type: Array,
       required: true,
     },
+
     availableFilters: {
       type: Array,
       required: true,
     },
+
     steps: {
       type: Array,
       required: true,
diff --git a/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue b/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue
index a1cb5b11b5..5407a9bb13 100644
--- a/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue
+++ b/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue
@@ -139,11 +139,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', route)"
       />
 
@@ -161,7 +162,8 @@
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CRouteEditorInfo',
@@ -173,7 +175,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Apigw/CSettingsEditor.vue b/client/web/admin/src/components/Apigw/CSettingsEditor.vue
index f5b3fa50aa..a230b20c20 100644
--- a/client/web/admin/src/components/Apigw/CSettingsEditor.vue
+++ b/client/web/admin/src/components/Apigw/CSettingsEditor.vue
@@ -52,10 +52,11 @@
     </b-form-row>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', settings)"
       />
     </template>
@@ -63,7 +64,8 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CSettingsEditor',
@@ -74,7 +76,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Application/CApplicationEditorInfo.vue b/client/web/admin/src/components/Application/CApplicationEditorInfo.vue
index 8becdf96a2..8ac5d7daf7 100644
--- a/client/web/admin/src/components/Application/CApplicationEditorInfo.vue
+++ b/client/web/admin/src/components/Application/CApplicationEditorInfo.vue
@@ -103,11 +103,11 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', application)"
       />
 
@@ -125,7 +125,8 @@
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CApplicationEditorInfo',
@@ -137,7 +138,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Application/CApplicationEditorUnify.vue b/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
index 354147122e..d27794371b 100644
--- a/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
+++ b/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
@@ -134,12 +134,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        data-test-id="button-submit"
-        class="float-right"
+      <c-button-submit
+        :disabled="disabled"
         :processing="processing"
         :success="success"
-        :disabled="disabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', { unify, unifyAssets })"
       />
     </template>
@@ -148,7 +148,8 @@
 
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CApplicationEditorUnify',
@@ -159,7 +160,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
index 8715984f4a..bbf5d7f661 100644
--- a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
+++ b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
@@ -443,11 +443,12 @@ curl -X POST {{ curlURL }} \
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="saveDisabled"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="submit"
       />
 
@@ -479,13 +480,12 @@ curl -X POST {{ curlURL }} \
 import { NoID } from '@cortezaproject/corteza-js'
 import { handle, components } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import CRolePicker from 'corteza-webapp-admin/src/components/CRolePicker'
 import CSelectUser from 'corteza-webapp-admin/src/components/Authclient/CSelectUser'
 import copy from 'copy-to-clipboard'
 import axios from 'axios'
 
-const { CInputDateTime } = components
+const { CInputDateTime, CButtonSubmit } = components
 
 export default {
   name: 'CAuthclientEditorInfo',
@@ -497,7 +497,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
     CRolePicker,
     CSelectUser,
     CInputDateTime,
diff --git a/client/web/admin/src/components/Federation/CFederationEditorInfo.vue b/client/web/admin/src/components/Federation/CFederationEditorInfo.vue
index 5bac047bcb..8eabfb5c63 100644
--- a/client/web/admin/src/components/Federation/CFederationEditorInfo.vue
+++ b/client/web/admin/src/components/Federation/CFederationEditorInfo.vue
@@ -133,11 +133,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="saveDisabled"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', node)"
       />
 
@@ -154,7 +155,8 @@
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CFederationEditorInfo',
@@ -166,7 +168,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
index 9f0e8602c2..2c8fd4bfd6 100644
--- a/client/web/admin/src/components/Permissions/CPermissionList.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -179,14 +179,13 @@
         v-if="loaded && canGrant"
         #footer
       >
-        <c-submit-button
-          class="float-right"
+        <c-button-submit
           :processing="processing"
           :success="success"
+          :text="$t('ui.save')"
+          class="float-right"
           @submit="onSubmit"
-        >
-          {{ $t('ui.save') }}
-        </c-submit-button>
+        />
       </template>
     </b-card>
 
@@ -262,9 +261,10 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { VueSelect } from 'vue-select'
+import { components } from '@cortezaproject/corteza-vue'
 import _ from 'lodash'
+const { CButtonSubmit } = components
 
 export default {
   i18nOptions: {
@@ -272,7 +272,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
     VueSelect,
   },
 
diff --git a/client/web/admin/src/components/Queues/CQueueEditorInfo.vue b/client/web/admin/src/components/Queues/CQueueEditorInfo.vue
index 231c9ff8eb..e857440198 100644
--- a/client/web/admin/src/components/Queues/CQueueEditorInfo.vue
+++ b/client/web/admin/src/components/Queues/CQueueEditorInfo.vue
@@ -96,11 +96,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', queue)"
       />
 
@@ -117,9 +118,9 @@
 
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CQueueEditorInfo',
@@ -131,7 +132,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Role/CRoleEditorInfo.vue b/client/web/admin/src/components/Role/CRoleEditorInfo.vue
index 4218b5b70a..f9cc4f83b2 100644
--- a/client/web/admin/src/components/Role/CRoleEditorInfo.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorInfo.vue
@@ -158,11 +158,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="submit()"
       />
 
@@ -189,9 +190,9 @@
 
 <script>
 import { system, NoID } from '@cortezaproject/corteza-js'
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CRoleEditorInfo',
@@ -203,7 +204,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
index 8a4e933a1c..f410232309 100644
--- a/client/web/admin/src/components/Role/CRoleEditorMembers.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -55,10 +55,11 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit')"
       />
     </template>
@@ -68,9 +69,8 @@
 <script>
 import { debounce } from 'lodash'
 import { VueSelect } from 'vue-select'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { components } from '@cortezaproject/corteza-vue/'
-const { CInputConfirm } = components
+const { CInputConfirm, CButtonSubmit } = components
 
 export default {
   i18nOptions: {
@@ -79,7 +79,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
     VueSelect,
     CInputConfirm,
   },
diff --git a/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue b/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue
index 218a009ecc..ead7a906a4 100644
--- a/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue
+++ b/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue
@@ -119,11 +119,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', sensitivityLevel)"
       />
 
@@ -139,9 +140,9 @@
 
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CSensitivityLevelEditorInfo',
@@ -153,7 +154,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue b/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue
index 2a7188f484..79afca3ebf 100644
--- a/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue
+++ b/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue
@@ -79,11 +79,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', basic)"
       />
     </template>
@@ -91,7 +92,8 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CComposeEditorBasic',
@@ -102,7 +104,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue b/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue
index 2e4d3d02c0..4a051e4738 100644
--- a/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue
+++ b/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue
@@ -66,11 +66,12 @@
     </b-form>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="onSubmit"
       />
     </template>
@@ -78,7 +79,8 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CComposeEditorUI',
@@ -89,7 +91,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue b/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue
index 325aedf107..61fa6a3df6 100644
--- a/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue
+++ b/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue
@@ -115,22 +115,22 @@
     </template>
 
     <template #footer>
-      <c-submit-button
+      <c-button-submit
         :disabled="disabled"
-        :processing="processing"
-        :success="success"
+        :processing="processingSMTPTest"
+        :success="successSMTPTest"
+        :text="$t('testSmtpConfigs.button')"
         :cypress-i-d="'button-smtp'"
         variant="light"
         class="float-left"
         @submit="smtpConnectionCheck()"
-      >
-        {{ $t('testSmtpConfigs.button') }}
-      </c-submit-button>
+      />
 
-      <c-submit-button
+      <c-button-submit
         :disabled="disabled"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
         class="float-right"
         @submit="submit()"
       />
@@ -140,7 +140,8 @@
 
 <script>
 import Vue from 'vue'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CComposeEditorBasic',
@@ -151,7 +152,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
@@ -165,11 +166,21 @@ export default {
       value: false,
     },
 
+    processingSMTPTest: {
+      type: Boolean,
+      value: false,
+    },
+
     success: {
       type: Boolean,
       value: false,
     },
 
+    successSMTPTest: {
+      type: Boolean,
+      value: false,
+    },
+
     disabled: {
       type: Boolean,
       value: true,
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue b/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue
index e385ede2bd..3c46e6c9f6 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue
@@ -281,11 +281,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', settings)"
       />
     </template>
@@ -293,7 +294,8 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CSystemEditorAuth',
@@ -304,7 +306,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue b/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
index ee37363604..9928ba9f0e 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
@@ -63,10 +63,11 @@
             }"
           />
 
-          <c-submit-button
+          <c-button-submit
             :disabled="!canManage"
             :processing="processing"
             :success="success"
+            :text="$t('admin:general.label.submit')"
             class="float-right mt-2"
             @submit="$emit('submit', settings['auth.ui.styles'])"
           />
@@ -77,13 +78,14 @@
 </template>
 
 <script>
-import { Ace as AceEditor } from 'vue2-brace-editor'
-import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
-
 import 'brace/mode/css'
 import 'brace/theme/chrome'
 
+import { Ace as AceEditor } from 'vue2-brace-editor'
+import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
+
 export default {
   name: 'CSystemEditorAuthBgImage',
 
@@ -95,7 +97,7 @@ export default {
   components: {
     CUploaderWithPreview,
     AceEditor,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue b/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
index ae42d3ebd1..2ba19ff746 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
@@ -83,11 +83,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!dirty || !canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', changes)"
       />
     </template>
@@ -96,11 +97,12 @@
 
 <script>
 import _ from 'lodash'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import OidcExternal from 'corteza-webapp-admin/src/components/Settings/System/Auth/ExternalOIDC'
 import StandardExternal from 'corteza-webapp-admin/src/components/Settings/System/Auth/ExternalStd'
 import SamlExternal from 'corteza-webapp-admin/src/components/Settings/System/Auth/ExternalSAML'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 const idpStandard = [
   'google',
@@ -224,7 +226,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
     OidcExternal,
     StandardExternal,
     SamlExternal,
diff --git a/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue b/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
index ff23c968fd..c2ea3002ab 100644
--- a/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
+++ b/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
@@ -45,10 +45,11 @@
     </b-modal>
 
     <template #footer>
-      <c-submit-button
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
         class="float-right mt-2"
         @submit="onSubmit"
       />
@@ -57,9 +58,8 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { components } from '@cortezaproject/corteza-vue'
-const { CAceEditor } = components
+const { CAceEditor, CButtonSubmit } = components
 
 export default {
   name: 'CUIEditorCustomCSS',
@@ -70,7 +70,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
     CAceEditor,
   },
 
diff --git a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
index d5ae89075f..1997a6383a 100644
--- a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
+++ b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
@@ -200,11 +200,12 @@
     </b-form>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="onSubmit"
       />
     </template>
@@ -212,7 +213,8 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CUITopbarSettings',
@@ -223,7 +225,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue b/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
index 8ef8a4d18c..2a4046ac7a 100644
--- a/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
+++ b/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
@@ -43,11 +43,12 @@
         </template>
 
         <template #footer>
-          <c-submit-button
+          <c-button-submit
             :disabled="!canCreate"
-            class="float-right"
             :processing="processing"
             :success="success"
+            :text="$t('admin:general.label.submit')"
+            class="float-right"
             @submit="$emit('submit', template)"
           />
         </template>
@@ -116,21 +117,22 @@
 </template>
 
 <script>
+import 'brace/mode/json'
+import 'brace/theme/chrome'
+
 import listHelpers from 'corteza-webapp-admin/src/mixins/listHelpers'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import EditorToolbox from './EditorToolbox'
 import EditorTextHtml from './EditorTextHtml'
 import EditorTextPlain from './EditorTextPlain'
 import EditorUnsupported from './EditorUnsupported'
 import { Ace as AceEditor } from 'vue2-brace-editor'
-
-import 'brace/mode/json'
-import 'brace/theme/chrome'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
     AceEditor,
     EditorToolbox,
   },
diff --git a/client/web/admin/src/components/Template/CTemplateEditorInfo.vue b/client/web/admin/src/components/Template/CTemplateEditorInfo.vue
index 973e148cf0..3b603139d0 100644
--- a/client/web/admin/src/components/Template/CTemplateEditorInfo.vue
+++ b/client/web/admin/src/components/Template/CTemplateEditorInfo.vue
@@ -124,11 +124,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', template)"
       />
 
@@ -145,9 +146,9 @@
 
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CTemplateEditorInfo',
@@ -159,7 +160,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/User/CUserEditorAvatar.vue b/client/web/admin/src/components/User/CUserEditorAvatar.vue
index c79999f94a..66fa6653f2 100644
--- a/client/web/admin/src/components/User/CUserEditorAvatar.vue
+++ b/client/web/admin/src/components/User/CUserEditorAvatar.vue
@@ -75,10 +75,11 @@
     </b-form>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', user)"
       />
     </template>
@@ -86,10 +87,9 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
 import { components } from '@cortezaproject/corteza-vue'
-const { CInputColorPicker } = components
+const { CInputColorPicker, CButtonSubmit } = components
 
 export default {
   name: 'CUserEditorAvatar',
@@ -100,7 +100,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
     CUploaderWithPreview,
     CInputColorPicker,
   },
diff --git a/client/web/admin/src/components/User/CUserEditorInfo.vue b/client/web/admin/src/components/User/CUserEditorInfo.vue
index 8d98d3c67e..a1062769d9 100644
--- a/client/web/admin/src/components/User/CUserEditorInfo.vue
+++ b/client/web/admin/src/components/User/CUserEditorInfo.vue
@@ -119,11 +119,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', user)"
       />
 
@@ -179,10 +180,9 @@
 
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
-
+const { CButtonSubmit } = components
 export default {
   name: 'CUserEditorInfo',
 
@@ -193,7 +193,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/User/CUserEditorPassword.vue b/client/web/admin/src/components/User/CUserEditorPassword.vue
index 164d2112c2..7ea5dd2113 100644
--- a/client/web/admin/src/components/User/CUserEditorPassword.vue
+++ b/client/web/admin/src/components/User/CUserEditorPassword.vue
@@ -60,11 +60,12 @@
         {{ $t('removePassword') }}
       </confirmation-toggle>
 
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="!passwordState || !confirmPasswordState"
         :processing="processing"
         :success="success"
-        :disabled="!passwordState || !confirmPasswordState"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="onPasswordSubmit"
       />
 
@@ -80,7 +81,8 @@
 
 <script>
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CUserEditorPassword',
@@ -92,7 +94,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/components/User/CUserEditorRoles.vue b/client/web/admin/src/components/User/CUserEditorRoles.vue
index 03faa499d4..75fd308e83 100644
--- a/client/web/admin/src/components/User/CUserEditorRoles.vue
+++ b/client/web/admin/src/components/User/CUserEditorRoles.vue
@@ -18,10 +18,11 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit')"
       />
     </template>
@@ -29,8 +30,9 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import CRolePicker from 'corteza-webapp-admin/src/components/CRolePicker'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   i18nOptions: {
@@ -39,7 +41,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
     CRolePicker,
   },
 
diff --git a/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue b/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue
index cd3220ab95..cde359388d 100644
--- a/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue
+++ b/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue
@@ -123,11 +123,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', workflow)"
       />
 
@@ -143,10 +144,10 @@
 </template>
 
 <script>
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { NoID } from '@cortezaproject/corteza-js'
+const { CButtonSubmit } = components
 
 export default {
   name: 'CWorkflowEditorInfo',
@@ -158,7 +159,7 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/client/web/admin/src/views/Federation/Nodes/Editor.vue b/client/web/admin/src/views/Federation/Nodes/Editor.vue
index edd73d85b6..28a56f2924 100644
--- a/client/web/admin/src/views/Federation/Nodes/Editor.vue
+++ b/client/web/admin/src/views/Federation/Nodes/Editor.vue
@@ -57,17 +57,13 @@
           placeholder="email@example.com"
         />
         <b-input-group-append>
-          <c-submit-button
-            button-class="px-4"
-            variant="outline-primary"
-            icon-variant="text-primary"
+          <c-button-submit
+            :disabled="!generate.url || !generate.email"
             :processing="generate.processing"
             :success="generate.success"
-            :disabled="!generate.url || !generate.email"
+            :text="$t('generate.sendEmail')"
             @submit="sendEmail()"
-          >
-            {{ $t('generate.sendEmail') }}
-          </c-submit-button>
+          />
         </b-input-group-append>
       </b-input-group>
 
@@ -130,8 +126,9 @@
 import { mapGetters } from 'vuex'
 import editorHelpers from 'corteza-webapp-admin/src/mixins/editorHelpers'
 import CFederationEditorInfo from 'corteza-webapp-admin/src/components/Federation/CFederationEditorInfo'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { cloneDeep, isEqual } from 'lodash'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   i18nOptions: {
@@ -141,7 +138,7 @@ export default {
 
   components: {
     CFederationEditorInfo,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   mixins: [
diff --git a/client/web/admin/src/views/Federation/Nodes/List.vue b/client/web/admin/src/views/Federation/Nodes/List.vue
index 55c25054db..e2163ba619 100644
--- a/client/web/admin/src/views/Federation/Nodes/List.vue
+++ b/client/web/admin/src/views/Federation/Nodes/List.vue
@@ -116,17 +116,13 @@
             placeholder=""
           />
           <b-input-group-append>
-            <c-submit-button
-              button-class="px-4"
-              variant="outline-primary"
-              icon-variant="text-primary"
+            <c-button-submit
               :disabled="!pair.url"
+              :text="$t('pair.confirm')"
               :processing="pair.processing"
               :success="pair.success"
               @submit="pairNode()"
-            >
-              {{ $t('pair.confirm') }}
-            </c-submit-button>
+            />
           </b-input-group-append>
         </b-input-group>
 
@@ -171,16 +167,12 @@
           </h2>
         </div>
 
-        <c-submit-button
-          button-class="px-5 mt-4"
-          variant="outline-primary"
-          icon-variant="text-primary"
+        <c-button-submit
           :processing="pair.processing"
           :success="pair.success"
+          :text="$t('pair.confirm')"
           @submit="confirmPending()"
-        >
-          {{ $t('pair.confirm') }}
-        </c-submit-button>
+        />
       </div>
     </b-modal>
   </b-container>
@@ -190,9 +182,8 @@
 import moment from 'moment'
 import { mapGetters } from 'vuex'
 import listHelpers from 'corteza-webapp-admin/src/mixins/listHelpers'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { components } from '@cortezaproject/corteza-vue'
-const { CResourceList } = components
+const { CResourceList, CButtonSubmit } = components
 
 export default {
   name: 'FederationList',
@@ -203,7 +194,7 @@ export default {
   },
 
   components: {
-    CSubmitButton,
+    CButtonSubmit,
     CResourceList,
   },
 
diff --git a/client/web/admin/src/views/System/Apigw/Editor.vue b/client/web/admin/src/views/System/Apigw/Editor.vue
index aed0dd3ef3..a4863f8ade 100644
--- a/client/web/admin/src/views/System/Apigw/Editor.vue
+++ b/client/web/admin/src/views/System/Apigw/Editor.vue
@@ -93,6 +93,7 @@ export default {
         processing: false,
         success: false,
       },
+
       stepper: {
         fetching: false,
         processing: false,
@@ -171,6 +172,7 @@ export default {
 
     onInfoSubmit (route) {
       this.info.processing = true
+
       if (this.routeID) {
         this.$SystemAPI
           .apigwRouteUpdate(route)
diff --git a/client/web/admin/src/views/System/Apigw/Index.vue b/client/web/admin/src/views/System/Apigw/Index.vue
index 44bd92da2f..f11c8a2921 100644
--- a/client/web/admin/src/views/System/Apigw/Index.vue
+++ b/client/web/admin/src/views/System/Apigw/Index.vue
@@ -11,6 +11,8 @@
     >
       <c-settings-editor
         :settings="apigwSettings"
+        :processing="settings.processing"
+        :success="settings.success"
         class="mb-3"
         @submit="onSettingsSubmit"
       />
diff --git a/client/web/admin/src/views/System/Application/Editor.vue b/client/web/admin/src/views/System/Application/Editor.vue
index add11bfd42..a2c34c78c9 100644
--- a/client/web/admin/src/views/System/Application/Editor.vue
+++ b/client/web/admin/src/views/System/Application/Editor.vue
@@ -94,10 +94,12 @@ export default {
         processing: false,
         success: false,
       },
+
       unify: {
         processing: false,
         success: false,
       },
+
       unifyAssetStateChange: false,
     }
   },
@@ -260,6 +262,7 @@ export default {
 
             this.unifyAssetStateChange = false
 
+            this.animateSuccess('unify')
             this.toastSuccess(this.$t('notification:application.update.success'))
           })
           .catch(this.toastErrorHandler(this.$t('notification:application.update.error')))
diff --git a/client/web/admin/src/views/System/AuthClient/Editor.vue b/client/web/admin/src/views/System/AuthClient/Editor.vue
index 3915c76d65..547c2bd623 100644
--- a/client/web/admin/src/views/System/AuthClient/Editor.vue
+++ b/client/web/admin/src/views/System/AuthClient/Editor.vue
@@ -155,6 +155,7 @@ export default {
             this.authclient = new system.AuthClient(ac)
             this.initialAuthclientState = this.authclient.clone()
 
+            this.animateSuccess('info')
             this.toastSuccess(this.$t('notification:authclient.update.success'))
           })
           .catch(this.toastErrorHandler(this.$t('notification:authclient.update.error')))
@@ -167,6 +168,7 @@ export default {
             this.authclient = new system.AuthClient(ac)
             this.initialAuthclientState = this.authclient.clone()
             const { authClientID } = ac
+
             this.animateSuccess('info')
             this.toastSuccess(this.$t('notification:authclient.create.success'))
 
diff --git a/client/web/admin/src/views/System/Connection/Editor.vue b/client/web/admin/src/views/System/Connection/Editor.vue
index 474de83271..832a502f22 100644
--- a/client/web/admin/src/views/System/Connection/Editor.vue
+++ b/client/web/admin/src/views/System/Connection/Editor.vue
@@ -51,9 +51,11 @@
           {{ connection.deletedAt ? $t('general:label.undelete') : $t('general:label.delete') }}
         </confirmation-toggle>
 
-        <c-submit-button
-          :processing="processing"
+        <c-button-submit
           :disabled="disabled || saveDisabled"
+          :processing="info.processing"
+          :success="info.success"
+          :text="$t('admin:general.label.submit')"
           class="ml-auto"
           @submit="onSubmit"
         />
@@ -65,14 +67,14 @@
 <script>
 import { isEqual } from 'lodash'
 import { system, NoID } from '@cortezaproject/corteza-js'
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
 import editorHelpers from 'corteza-webapp-admin/src/mixins/editorHelpers'
 import CConnectionEditorInfo from 'corteza-webapp-admin/src/components/Connection/CConnectionEditorInfo'
 import CConnectionEditorProperties from 'corteza-webapp-admin/src/components/Connection/CConnectionEditorProperties'
 import CConnectionEditorDal from 'corteza-webapp-admin/src/components/Connection/CConnectionEditorDAL'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { mapGetters } from 'vuex'
+const { CButtonSubmit } = components
 
 export default {
   components: {
@@ -80,7 +82,7 @@ export default {
     CConnectionEditorDal,
     CConnectionEditorProperties,
     ConfirmationToggle,
-    CSubmitButton,
+    CButtonSubmit,
   },
 
   i18nOptions: {
@@ -101,7 +103,11 @@ export default {
 
   data () {
     return {
-      processing: false,
+      info: {
+        processing: false,
+        success: false,
+      },
+
       connection: undefined,
       initialConnectionState: undefined,
 
@@ -123,7 +129,7 @@ export default {
     },
 
     disabled () {
-      return this.processing
+      return this.info.processing
     },
 
     fresh () {
@@ -187,7 +193,7 @@ export default {
     },
 
     async fetchSensitivityLevels () {
-      this.processing = true
+      this.info.processing = true
 
       return this.$SystemAPI.dalSensitivityLevelList()
         .then(({ set = [] }) => {
@@ -195,7 +201,7 @@ export default {
         })
         .catch(this.toastErrorHandler(this.$t('notification:sensitivityLevel.fetch.error')))
         .finally(() => {
-          this.processing = false
+          this.info.processing = false
         })
     },
 
@@ -204,13 +210,14 @@ export default {
       const op = updating ? 'update' : 'create'
       const fn = updating ? 'dalConnectionUpdate' : 'dalConnectionCreate'
 
-      this.processing = true
+      this.info.processing = true
       this.incLoader()
 
       return this.$SystemAPI[fn](this.connection)
         .then(connection => {
           const { connectionID } = connection
 
+          this.animateSuccess('info')
           this.toastSuccess(this.$t(`notification:connection.${op}.success`))
           if (!updating) {
             this.$router.push({ name: `system.connection.edit`, params: { connectionID } })
@@ -221,7 +228,7 @@ export default {
         })
         .catch(this.toastErrorHandler(this.$t(`notification:connection.${op}.error`)))
         .finally(() => {
-          this.processing = false
+          this.info.processing = false
         })
     },
 
@@ -231,11 +238,11 @@ export default {
       const op = deleting ? 'delete' : 'undelete'
       const fn = deleting ? 'dalConnectionDelete' : 'dalConnectionUndelete'
 
-      this.processing = true
+      this.info.processing = true
       this.incLoader()
 
       return this.$SystemAPI[fn](this.connection)
-        .then(connection => {
+        .then(() => {
           this.toastSuccess(this.$t(`notification:connection.${op}.success`))
 
           if (deleting) {
@@ -249,7 +256,7 @@ export default {
         })
         .catch(this.toastErrorHandler(this.$t(`notification:connection.${op}.error`)))
         .finally(() => {
-          this.processing = false
+          this.info.processing = false
         })
     },
 
diff --git a/client/web/admin/src/views/System/Email/Index.vue b/client/web/admin/src/views/System/Email/Index.vue
index f4bdcce17b..f162c79912 100644
--- a/client/web/admin/src/views/System/Email/Index.vue
+++ b/client/web/admin/src/views/System/Email/Index.vue
@@ -9,8 +9,10 @@
     <c-system-email-server
       :key="JSON.stringify(server)"
       v-model="server"
-      :processing="auth.processing"
-      :success="auth.success"
+      :processing="external.processing"
+      :processing-smtp-test="auth.processing"
+      :success="external.success"
+      :success-smtp-tes="auth.success"
       :disabled="!canManage"
       @submit="onEmailServerSubmit($event)"
       @smtpConnectionCheck="onSmtpConnectionCheck($event)"
diff --git a/client/web/admin/src/views/System/Queue/Editor.vue b/client/web/admin/src/views/System/Queue/Editor.vue
index 54bae0d741..82ada35d24 100644
--- a/client/web/admin/src/views/System/Queue/Editor.vue
+++ b/client/web/admin/src/views/System/Queue/Editor.vue
@@ -158,6 +158,7 @@ export default {
 
     onSubmit (queue) {
       this.incLoader()
+
       if (this.queueID) {
         this.$SystemAPI.queuesUpdate(queue)
           .then(queue => {
diff --git a/client/web/admin/src/views/System/Role/Editor.vue b/client/web/admin/src/views/System/Role/Editor.vue
index b079fb4857..455c4c66d2 100644
--- a/client/web/admin/src/views/System/Role/Editor.vue
+++ b/client/web/admin/src/views/System/Role/Editor.vue
@@ -114,6 +114,7 @@ export default {
         processing: false,
         success: false,
       },
+
       members: {
         processing: false,
         success: false,
diff --git a/client/web/admin/src/views/System/SensitivityLevel/Editor.vue b/client/web/admin/src/views/System/SensitivityLevel/Editor.vue
index 56069f59cd..d63a9f0c1e 100644
--- a/client/web/admin/src/views/System/SensitivityLevel/Editor.vue
+++ b/client/web/admin/src/views/System/SensitivityLevel/Editor.vue
@@ -143,6 +143,7 @@ export default {
             this.sensitivityLevel = sensitivityLevel
             this.initialSensitivityLevelState = cloneDeep(sensitivityLevel)
 
+            this.animateSuccess('info')
             this.toastSuccess(this.$t('notification:sensitivityLevel.update.success'))
           })
           .catch(this.toastErrorHandler(this.$t('notification:sensitivityLevel.update.error')))
diff --git a/client/web/admin/src/views/System/Settings/Index.vue b/client/web/admin/src/views/System/Settings/Index.vue
index e6ab69d885..e0360552b6 100644
--- a/client/web/admin/src/views/System/Settings/Index.vue
+++ b/client/web/admin/src/views/System/Settings/Index.vue
@@ -26,6 +26,8 @@
     <c-system-editor-auth-bg-screen
       :settings="getAuthBackground"
       :can-manage="canManage"
+      :processing="authBackground.processing"
+      :success="authBackground.success"
       class="mt-3"
       @onUpload="onBackgroundImageUpload"
       @resetAttachment="onResetBackgroundImage"
diff --git a/client/web/admin/src/views/System/Template/Editor.vue b/client/web/admin/src/views/System/Template/Editor.vue
index 04f95f03e2..d19be9607a 100644
--- a/client/web/admin/src/views/System/Template/Editor.vue
+++ b/client/web/admin/src/views/System/Template/Editor.vue
@@ -213,6 +213,7 @@ export default {
             this.template = new system.Template(template)
             this.initialTemplateState = this.template.clone()
 
+            this.animateSuccess('info')
             this.toastSuccess(this.$t('notification:template.update.success'))
           })
           .catch(this.toastErrorHandler(this.$t('notification:template.update.error')))
diff --git a/client/web/admin/src/views/System/User/Editor.vue b/client/web/admin/src/views/System/User/Editor.vue
index 040e3b2616..ebbb5cf273 100644
--- a/client/web/admin/src/views/System/User/Editor.vue
+++ b/client/web/admin/src/views/System/User/Editor.vue
@@ -155,18 +155,22 @@ export default {
         processing: false,
         success: false,
       },
+
       avatar: {
         processing: false,
         success: false,
       },
+
       password: {
         processing: false,
         success: false,
       },
+
       mfa: {
         processing: false,
         success: false,
       },
+
       roles: {
         processing: false,
         success: false,
diff --git a/client/web/compose/src/components/Admin/EditorToolbar.vue b/client/web/compose/src/components/Admin/EditorToolbar.vue
index ab201f31c5..08ddf4ce43 100644
--- a/client/web/compose/src/components/Admin/EditorToolbar.vue
+++ b/client/web/compose/src/components/Admin/EditorToolbar.vue
@@ -47,55 +47,59 @@
         >
           {{ $t('label.delete') }}
         </c-input-confirm>
-
         <slot name="saveAsCopy" />
-        <b-button
+
+        <c-button-submit
           v-if="!hideClone"
           data-test-id="button-clone"
+          :disabled="disableClone || processingClone"
           :title="cloneTooltip"
-          :disabled="disableClone || processing"
+          :processing="processingClone"
           variant="light"
+          :text="$t('label.saveAsCopy')"
           size="lg"
           class="ml-2"
-          @click="$emit('clone')"
-        >
-          {{ $t('label.saveAsCopy') }}
-        </b-button>
-
-        <b-button
+          @submit="$emit('clone')"
+        />
+        <c-button-submit
           v-if="!hideSave"
           data-test-id="button-save-and-close"
-          :disabled="disableSave || processing"
+          :disabled="disableSave || processingSaveAndClose"
+          :processing="processingSaveAndClose"
           variant="light"
+          :text="$t('label.saveAndClose')"
           size="lg"
           class="ml-2"
-          @click.prevent="$emit('saveAndClose')"
-        >
-          {{ $t('label.saveAndClose') }}
-        </b-button>
-
-        <b-button
+          @submit="$emit('saveAndClose')"
+        />
+        <c-button-submit
           v-if="!hideSave"
           data-test-id="button-save"
-          :disabled="disableSave || processing"
-          variant="primary"
+          :disabled="disableSave || processingSave"
+          :processing="processingSave"
+          :text="$t('label.save')"
           size="lg"
           class="ml-2"
-          @click.prevent="$emit('save')"
-        >
-          {{ $t('label.save') }}
-        </b-button>
+          @submit="$emit('save')"
+        />
       </div>
     </b-row>
   </b-container>
 </template>
 <script>
 
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
+
 export default {
   i18nOptions: {
     namespaces: 'general',
   },
 
+  components: {
+    CButtonSubmit,
+  },
+
   inheritAttrs: true,
 
   props: {
@@ -103,42 +107,66 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    processingSave: {
+      type: Boolean,
+      default: false,
+    },
+
+    processingSaveAndClose: {
+      type: Boolean,
+      default: false,
+    },
+
+    processingClone: {
+      type: Boolean,
+      default: false,
+    },
+
     backLink: {
       type: Object,
       required: false,
       default: undefined,
     },
+
     hideDelete: {
       type: Boolean,
       required: false,
     },
+
     hideSave: {
       type: Boolean,
       required: false,
     },
+
     hideClone: {
       type: Boolean,
       required: false,
     },
+
     disableDelete: {
       type: Boolean,
       required: false,
       default: false,
     },
+
     disableSave: {
       type: Boolean,
       required: false,
       default: false,
     },
+
     disableClone: {
       type: Boolean,
       default: false,
     },
+
     deleteTooltip: {
       type: String,
       required: false,
       default: '',
     },
+
     cloneTooltip: {
       type: String,
       default: '',
diff --git a/client/web/compose/src/components/Common/RecordToolbar.vue b/client/web/compose/src/components/Common/RecordToolbar.vue
index 5aee77f5d1..bb1ab70486 100644
--- a/client/web/compose/src/components/Common/RecordToolbar.vue
+++ b/client/web/compose/src/components/Common/RecordToolbar.vue
@@ -160,29 +160,17 @@
             {{ labels.new || $t('label.addNew') }}
           </b-button>
 
-          <b-button
+          <c-button-submit
             v-if="inEditing && !(hideSubmit || settings.hideSubmit)"
-            data-test-id="button-submit"
-            :disabled="!record || !canSaveRecord || processing"
-            class="d-flex align-items-center justify-content-center ml-2"
-            variant="primary"
+            data-test-id="button-save"
+            :disabled="!record || !canSaveRecord || processingSubmit"
+            :processing="processingSubmit"
+            :text="labels.submit || $t('label.save')"
             size="lg"
             style="min-height: 42px; min-width: 73px;"
-            @click.prevent="$emit('submit')"
-          >
-            <b-spinner
-              v-if="processingSubmit"
-              small
-              type="grow"
-            />
-
-            <span
-              v-else
-              data-test-id="button-save"
-            >
-              {{ labels.submit || $t('label.save') }}
-            </span>
-          </b-button>
+            class="ml-2"
+            @submit="$emit('submit')"
+          />
 
           <slot name="end-actions" />
         </template>
@@ -194,12 +182,18 @@
 <script>
 import { compose, NoID } from '@cortezaproject/corteza-js'
 import { throttle } from 'lodash'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   i18nOptions: {
     namespaces: 'general',
   },
 
+  components: {
+    CButtonSubmit,
+  },
+
   props: {
     module: {
       type: compose.Module,
diff --git a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
index c57234a284..5bf22d5baa 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
@@ -120,13 +120,13 @@
         {{ $t('label.back') }}
       </b-button>
 
-      <b-button
+      <c-button-submit
         data-test-id="button-save"
-        variant="primary"
-        @click="$emit('save', reminder)"
-      >
-        {{ $t('label.save') }}
-      </b-button>
+        :disabled="disableSave"
+        :processing="processingSave"
+        :text="$t('label.save')"
+        @submit="$emit('save', reminder)"
+      />
     </div>
   </div>
 </template>
@@ -136,7 +136,7 @@ import _ from 'lodash'
 import { VueSelect } from 'vue-select'
 import { system } from '@cortezaproject/corteza-js'
 import { components } from '@cortezaproject/corteza-vue'
-const { CInputDateTime } = components
+const { CInputDateTime, CButtonSubmit } = components
 
 export default {
   i18nOptions: {
@@ -146,7 +146,9 @@ export default {
   components: {
     VueSelect,
     CInputDateTime,
+    CButtonSubmit,
   },
+
   props: {
     edit: {
       type: Object,
@@ -159,6 +161,16 @@ export default {
       required: true,
       default: () => [],
     },
+
+    disableSave: {
+      type: Boolean,
+      default: false,
+    },
+
+    processingSave: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data () {
diff --git a/client/web/compose/src/components/Namespaces/Reminders/index.vue b/client/web/compose/src/components/Namespaces/Reminders/index.vue
index 0aa015d9b6..016bdfef3a 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/index.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/index.vue
@@ -13,6 +13,8 @@
       v-else
       :edit="edit"
       :users="users"
+      :disable-save="disableSave"
+      :processing-save="processingSave"
       class="flex-fill"
       @dismiss="onDismiss"
       @back="onCancel()"
@@ -37,6 +39,8 @@ export default {
     return {
       reminders: [],
       edit: null,
+      disableSave: false,
+      processingSave: false,
     }
   },
 
@@ -55,9 +59,8 @@ export default {
   },
 
   beforeDestroy () {
-    this.$root.$off('reminders.pull', this.fetchReminders)
-    this.$root.$off('reminder.updated', this.fetchReminders)
-    this.$root.$off('reminder.create', this.onEdit)
+    this.destroyEvents()
+    this.setDefaultValues()
   },
 
   methods: {
@@ -76,12 +79,18 @@ export default {
     },
 
     onSave (r) {
+      this.disableSave = true
+      this.processingSave = true
       const endpoint = r.reminderID && r.reminderID !== NoID ? 'reminderUpdate' : 'reminderCreate'
+
       this.$SystemAPI[endpoint](r).then(() => {
         return this.fetchReminders()
       }).then(() => {
         this.onCancel()
         this.$Reminder.prefetch()
+      }).finally(() => {
+        this.disableSave = false
+        this.processingSave = false
       })
     },
 
@@ -110,6 +119,19 @@ export default {
         this.reminders = reminders.map(r => new system.Reminder(r))
       })
     },
+
+    setDefaultValues () {
+      this.reminder = []
+      this.edit = null
+      this.disableSave = false
+      this.processingSave = false
+    },
+
+    destroyEvents () {
+      this.$root.$off('reminders.pull', this.fetchReminders)
+      this.$root.$off('reminder.updated', this.fetchReminders)
+      this.$root.$off('reminder.create', this.onEdit)
+    },
   },
 
 }
diff --git a/client/web/compose/src/components/index.js b/client/web/compose/src/components/index.js
index 998e05fa3a..f3cd0ed633 100644
--- a/client/web/compose/src/components/index.js
+++ b/client/web/compose/src/components/index.js
@@ -60,6 +60,7 @@ Vue.component('c-input-confirm', components.CInputConfirm)
 Vue.component('c-input-processing', components.CInputProcessing)
 Vue.component('c-resource-list', components.CResourceList)
 Vue.component('c-input-checkbox', components.CInputCheckbox)
+Vue.component('c-button-submit', components.CButtonSubmit)
 
 // Map things
 Vue.component('l-map', LMap)
diff --git a/client/web/compose/src/mixins/pages.js b/client/web/compose/src/mixins/pages.js
index eeb42b088c..71d91b45e7 100644
--- a/client/web/compose/src/mixins/pages.js
+++ b/client/web/compose/src/mixins/pages.js
@@ -2,6 +2,12 @@ import { NoID } from '@cortezaproject/corteza-js'
 import { fetchID } from 'corteza-webapp-compose/src/lib/block'
 
 export default {
+  data () {
+    return {
+      processingClone: false,
+    }
+  },
+
   methods: {
     countDuplicateTitles (pages, pattern) {
       let substrTitle = this.page.title
@@ -18,6 +24,7 @@ export default {
     },
 
     handleClone () {
+      this.processingClone = true
       const { namespaceID = NoID } = this.namespace
       const pattern = /\([0-9]+\)/
 
@@ -78,6 +85,7 @@ export default {
           this.$router.push({ name: this.$route.name, params: { pageID } })
         })
         .catch(this.toastErrorHandler(this.$t('notification:page.cloneFailed')))
+        .finally(() => { this.processingClone = false })
     },
 
     cloneLayouts (pageID) {
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index 075703862b..6c13055b70 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -78,7 +78,7 @@ th {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   margin-bottom: 0;
-  font-size: .9rem;
+  font-size: 0.9rem;
   border-radius: 0.25rem;
 
   .vs__selected-options {
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index 60304cbe9a..3a8ef11cd8 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -298,6 +298,8 @@
     <portal to="admin-toolbar">
       <editor-toolbar
         :processing="processing"
+        :processing-save="processingSave"
+        :processing-save-and-close="processingSaveAndClose"
         :hide-delete="hideDelete"
         :hide-save="hideSave"
         hide-clone
@@ -373,6 +375,8 @@ export default {
       chart: undefined,
       initialChartState: undefined,
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
 
       editReportIndex: undefined,
       checkboxLabel: {
@@ -614,6 +618,14 @@ export default {
     },
 
     handleSave ({ closeOnSuccess = false } = {}) {
+      this.processing = true
+
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       /**
        * Pass a special tag alongside payload that
        * instructs store layer to add content-language header to the API request
@@ -631,7 +643,17 @@ export default {
           } else {
             this.$router.push({ name: 'admin.charts.edit', params: { chartID: chartID } })
           }
-        }).catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
+        })
+          .catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
+          .finally(() => {
+            this.processing = false
+
+            if (closeOnSuccess) {
+              this.processingSaveAndClose = false
+              return
+            }
+            this.processingSave = false
+          })
       } else {
         this.updateChart(c).then((chart) => {
           this.chart = chartConstructor(chart)
@@ -640,15 +662,29 @@ export default {
           if (closeOnSuccess) {
             this.redirect()
           }
-        }).catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
+        })
+          .catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
+          .finally(() => {
+            this.processing = false
+
+            if (closeOnSuccess) {
+              this.processingSaveAndClose = false
+              return
+            }
+            this.processingSave = false
+          })
       }
     },
 
     handleDelete () {
+      this.processing = true
+
       this.deleteChart(this.chart).then(() => {
         this.toastSuccess(this.$t('notification:chart.deleted'))
         this.$router.push({ name: 'admin.charts' })
-      }).catch(this.toastErrorHandler(this.$t('notification:chart.deleteFailed')))
+      })
+        .catch(this.toastErrorHandler(this.$t('notification:chart.deleteFailed')))
+        .finally(() => { this.processing = false })
     },
 
     redirect () {
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index a16c17f7d4..18d4f91458 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -439,6 +439,8 @@
     <portal to="admin-toolbar">
       <editor-toolbar
         :processing="processing"
+        :processing-save="processingSave"
+        :processing-save-and-close="processingSaveAndClose"
         :hide-delete="hideDelete"
         hide-clone
         :hide-save="hideSave"
@@ -521,6 +523,8 @@ export default {
       initialModuleState: undefined,
       hasRecords: true,
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
 
       federationSettings: {
         modal: false,
@@ -768,6 +772,12 @@ export default {
       const resourceTranslationLanguage = this.currentLanguage
       this.processing = true
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       if (!this.isEdit) {
         // Filter out record fields that reference this not yet created module
         let fields = []
@@ -807,6 +817,12 @@ export default {
         }).catch(this.toastErrorHandler(this.$t('notification:module.saveFailed')))
           .finally(() => {
             this.processing = false
+
+            if (closeOnSuccess) {
+              this.processingSaveAndClose = false
+              return
+            }
+            this.processingSave = false
           })
       } else {
         this.updateModule({ ...this.module, resourceTranslationLanguage }).then(module => {
@@ -820,6 +836,12 @@ export default {
         }).catch(this.toastErrorHandler(this.$t('notification:module.saveFailed')))
           .finally(() => {
             this.processing = false
+
+            if (closeOnSuccess) {
+              this.processingSaveAndClose = false
+              return
+            }
+            this.processingSave = false
           })
       }
     },
@@ -876,6 +898,8 @@ export default {
       this.initialModuleState = undefined
       this.hasRecords = true
       this.processing = false
+      this.processingSaveAndClose = false
+      this.processingSave = false
       this.federationSettings = {}
       this.discoverySettings = {}
       this.abortableRequests = []
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index 02ececd3e1..73196e5032 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -255,8 +255,11 @@
     <portal to="admin-toolbar">
       <editor-toolbar
         :hide-save="!page.canUpdatePage"
-        :processing="processing"
         hide-clone
+        :processing="processing"
+        :processing-save="processingSave"
+        :processing-save-and-close="processingSaveAndClose"
+        :processing-clone="processingClone"
         @save="handleSaveLayout()"
         @delete="handleDeleteLayout()"
         @saveAndClose="handleSaveLayout({ closeOnSuccess: true })"
@@ -361,6 +364,9 @@ export default {
       title: '',
 
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
+      processingClone: false,
 
       processingLayout: false,
 
@@ -798,6 +804,12 @@ export default {
 
       this.processing = true
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       return Promise.all([
         this.findPageByID({ ...this.page, force: true }),
         this.findLayoutByID({ ...this.layout }),
@@ -839,12 +851,19 @@ export default {
         this.setLayout(layout.pageLayoutID, false)
       }).finally(() => {
         this.processing = false
+
+        if (closeOnSuccess) {
+          this.processingSaveAndClose = false
+          return
+        }
+        this.processingSave = false
       }).catch(this.toastErrorHandler(this.$t('notification:page.page-layout.save.failed')))
     },
 
     async handleCloneLayout ({ ref = false }) {
       this.processing = true
       this.processingLayout = true
+      this.processingClone = true
 
       const layout = {
         ...this.layout.clone(),
@@ -894,6 +913,7 @@ export default {
       }).finally(() => {
         this.processing = false
         this.processingLayout = false
+        this.processingClone = false
       }).catch(this.toastErrorHandler(this.$t('notification:page.page-layout.clone.failed')))
     },
 
@@ -1056,6 +1076,9 @@ export default {
     setDefaultValues () {
       this.title = ''
       this.processing = false
+      this.processingSaveAndClose = false
+      this.processingSave = false
+      this.processingClone = false
       this.processingLayout = false
       this.page = undefined
       this.layout = undefined
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index b53f7ba0ac..04b2799d11 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -822,6 +822,9 @@
         :hide-save="hideSave"
         :disable-save="disableSave"
         :processing="processing"
+        :processing-save="processingSave"
+        :processing-save-and-close="processingSaveAndClose"
+        :processing-clone="processingClone"
         @clone="handleClone()"
         @delete="handleDeletePage()"
         @save="handleSave()"
@@ -903,6 +906,9 @@ export default {
   data () {
     return {
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
+      processingClone: false,
 
       page: new compose.Page(),
       initialPageState: new compose.Page(),
@@ -1191,6 +1197,12 @@ export default {
     handleSave ({ closeOnSuccess = false } = {}) {
       this.processing = true
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       /**
        * Pass a special tag alongside payload that
        * instructs store layer to add content-language header to the API request
@@ -1216,6 +1228,12 @@ export default {
           }
         }).finally(() => {
           this.processing = false
+
+          if (closeOnSuccess) {
+            this.processingSaveAndClose = false
+            return
+          }
+          this.processingSave = false
         }).catch(this.toastErrorHandler(this.$t('notification:page.saveFailed')))
     },
 
@@ -1310,6 +1328,9 @@ export default {
 
     setDefaultValues () {
       this.processing = false
+      this.processingSaveAndClose = false
+      this.processingSave = false
+      this.processingClone = false
       this.page = {}
       this.initialPageState = {}
       this.showIconModal = false
diff --git a/client/web/compose/src/views/Namespace/Edit.vue b/client/web/compose/src/views/Namespace/Edit.vue
index 8bc919133b..eb8293c331 100644
--- a/client/web/compose/src/views/Namespace/Edit.vue
+++ b/client/web/compose/src/views/Namespace/Edit.vue
@@ -275,6 +275,8 @@
 
     <editor-toolbar
       :processing="processing"
+      :processing-save="processingSave"
+      :processing-save-and-close="processingSaveAndClose"
       :hide-delete="hideDelete"
       :hide-clone="!isEdit"
       :hide-save="hideSave"
@@ -340,6 +342,8 @@ export default {
   data () {
     return {
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
 
       namespace: undefined,
       initialNamespaceState: undefined,
@@ -541,6 +545,12 @@ export default {
     async handleSave ({ closeOnSuccess = false } = {}) {
       this.processing = true
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       /**
        * Pass a special tag alongside payload that
        * instructs store layer to add content-language header to the API request
@@ -582,6 +592,12 @@ export default {
         } catch (e) {
           this.toastErrorHandler(this.$t('notification:namespace.saveFailed'))(e)
           this.processing = false
+
+          if (closeOnSuccess) {
+            this.processingSaveAndClose = false
+            return
+          }
+          this.processingSave = false
           return
         }
       } else if (this.isClone) {
@@ -605,6 +621,12 @@ export default {
         } catch (e) {
           this.toastErrorHandler(this.$t('notification:namespace.createFailed'))(e)
           this.processing = false
+
+          if (closeOnSuccess) {
+            this.processingSaveAndClose = false
+            return
+          }
+          this.processingSave = false
           return
         }
       }
@@ -617,6 +639,12 @@ export default {
 
       this.processing = false
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = false
+      } else {
+        this.processingSave = false
+      }
+
       if (closeOnSuccess) {
         this.$router.push(this.previousPage || { name: 'namespace.manage' })
       } else if (!this.isEdit || this.isClone) {
@@ -748,6 +776,8 @@ export default {
 
     setDefaultValues () {
       this.processing = false
+      this.processingSaveAndClose = false
+      this.processingSave = false
       this.namespace = undefined
       this.initialNamespaceState = undefined
       this.namespaceAssets = {}
diff --git a/client/web/privacy/src/components/Common/EditorToolbar.vue b/client/web/privacy/src/components/Common/EditorToolbar.vue
index 4b0a3a87d0..9222162495 100644
--- a/client/web/privacy/src/components/Common/EditorToolbar.vue
+++ b/client/web/privacy/src/components/Common/EditorToolbar.vue
@@ -62,17 +62,16 @@
           </b-button>
         </template>
 
-        <b-button
+        <c-button-submit
           v-if="submitShow"
           :data-test-id="buttonLabelCypressId(submitLabel)"
           :disabled="submitDisabled || processing"
-          variant="primary"
+          :processing="processing"
+          :text="submitLabel"
           size="lg"
           class="ml-1"
-          @click="$emit('submit')"
-        >
-          {{ submitLabel }}
-        </b-button>
+          @submit="$emit('submit')"
+        />
 
         <slot />
       </b-col>
@@ -81,7 +80,14 @@
 </template>
 
 <script>
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
+
 export default {
+  components: {
+    CButtonSubmit,
+  },
+
   props: {
     processing: {
       type: Boolean,
diff --git a/client/web/reporter/src/components/EditorToolbar.vue b/client/web/reporter/src/components/EditorToolbar.vue
index 57bbd774e7..379d20fe02 100644
--- a/client/web/reporter/src/components/EditorToolbar.vue
+++ b/client/web/reporter/src/components/EditorToolbar.vue
@@ -45,49 +45,66 @@
         >
           {{ $t('general:label.delete') }}
         </c-input-confirm>
-        <b-button
-          variant="primary"
+
+        <c-button-submit
           data-test-id="button-save"
+          :disabled="saveDisabled || processingSave"
+          :processing="processingSave"
+          :text="$t('general:label.save')"
           size="lg"
-          :disabled="saveDisabled || processing"
-          @click="$emit('save')"
-        >
-          {{ $t('general:label.save') }}
-        </b-button>
+          @submit="$emit('save')"
+        />
       </b-col>
     </b-row>
   </b-container>
 </template>
+
 <script>
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
+  components: {
+    CButtonSubmit,
+  },
+
   props: {
     backLink: {
       type: Object,
       required: false,
       default: () => ({ name: 'root' }),
     },
+
     hideDelete: {
       type: Boolean,
       required: false,
     },
+
     deleteDisabled: {
       type: Boolean,
       required: false,
     },
+
     hideSave: {
       type: Boolean,
       required: false,
     },
+
     saveDisabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+
     processing: {
       type: Boolean,
       required: false,
     },
+
+    processingSave: {
+      type: Boolean,
+      required: false,
+    },
   },
 }
 </script>
diff --git a/client/web/reporter/src/mixins/report.js b/client/web/reporter/src/mixins/report.js
index ed1349e326..18eb281807 100644
--- a/client/web/reporter/src/mixins/report.js
+++ b/client/web/reporter/src/mixins/report.js
@@ -4,6 +4,7 @@ export default {
   data () {
     return {
       processing: false,
+      processingSave: false,
       report: undefined,
     }
   },
@@ -25,6 +26,7 @@ export default {
 
     async handleSave () {
       this.processing = true
+      this.processingSave = true
 
       const { blocks } = this.report
 
@@ -53,6 +55,7 @@ export default {
           .catch(this.toastErrorHandler(this.$t('notification:report.createFailed')))
           .finally(() => {
             this.processing = false
+            this.processingSave = false
           })
       } else {
         return this.$SystemAPI.reportUpdate(report)
@@ -65,6 +68,7 @@ export default {
           .catch(this.toastErrorHandler(this.$t('notification:report.updateFailed')))
           .finally(() => {
             this.processing = false
+            this.processingSave = false
           })
       }
     },
diff --git a/client/web/reporter/src/views/Layout.vue b/client/web/reporter/src/views/Layout.vue
index 09cddec616..2f6077ba87 100644
--- a/client/web/reporter/src/views/Layout.vue
+++ b/client/web/reporter/src/views/Layout.vue
@@ -131,7 +131,7 @@ export default {
       disabledRoutes: [
         'report.list',
         'report.create',
-        'report.edit'
+        'report.edit',
       ],
     }
   },
diff --git a/client/web/reporter/src/views/Report/Builder.vue b/client/web/reporter/src/views/Report/Builder.vue
index 4cf5d8658e..f86234cad7 100644
--- a/client/web/reporter/src/views/Report/Builder.vue
+++ b/client/web/reporter/src/views/Report/Builder.vue
@@ -247,16 +247,13 @@
     <b-modal
       v-model="datasources.showConfigurator"
       :title="$t('builder:datasources.label')"
-      :ok-title="$t('general:label.saveAndClose')"
-      ok-variant="primary"
-      :ok-disabled="datasourceSaveDisabled"
       cancel-variant="link"
       :cancel-disabled="datasources.processing"
       scrollable
       size="xl"
       body-class="py-3"
       no-fade
-      @ok="saveDatasources"
+      @hide="hideDatasourceConfigurator"
     >
       <configurator
         v-if="report"
@@ -286,6 +283,16 @@
           />
         </template>
       </configurator>
+
+      <template #modal-footer>
+        <c-button-submit
+          data-test-id="button-save"
+          :disabled="datasourceSaveDisabled"
+          :processing="datasources.processing"
+          :text="$t('general:label.saveAndClose')"
+          @submit="saveDatasources"
+        />
+      </template>
     </b-modal>
 
     <b-modal
@@ -363,6 +370,7 @@
         :delete-disabled="!canDelete"
         :save-disabled="!canUpdate"
         :processing="processing"
+        :processing-save="processingSave"
         @delete="handleDelete"
         @save="handleReportSave"
       >
@@ -398,6 +406,8 @@ import ScenarioConfigurator from 'corteza-webapp-reporter/src/components/Report/
 import * as displayElementThumbnails from 'corteza-webapp-reporter/src/assets/DisplayElements'
 import VueSelect from 'vue-select'
 import Prefilter from 'corteza-webapp-reporter/src/components/Common/Prefilter'
+import { components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 export default {
   name: 'ReportBuilder',
@@ -412,6 +422,7 @@ export default {
     EditorToolbar,
     VueSelect,
     Prefilter,
+    CButtonSubmit,
   },
 
   mixins: [
@@ -421,6 +432,8 @@ export default {
   data () {
     return {
       processing: false,
+      processingSave: false,
+
       showReport: true,
 
       report: undefined,
@@ -807,9 +820,8 @@ export default {
       this.datasources.showConfigurator = true
     },
 
-    saveDatasources (hideEvent) {
+    saveDatasources () {
       // Prevent closing of modal and manually close it when request is complete
-      hideEvent.preventDefault()
       this.datasources.processing = true
 
       const sources = this.datasources.tempItems
@@ -827,6 +839,7 @@ export default {
       }).catch(this.toastErrorHandler(this.$t('notification:report.datasources.updateFailed')))
         .finally(() => {
           this.datasources.processing = false
+          this.hideDatasourceConfigurator()
         })
     },
 
diff --git a/client/web/reporter/src/views/Report/Edit.vue b/client/web/reporter/src/views/Report/Edit.vue
index f7a3303c88..a3e8065a31 100644
--- a/client/web/reporter/src/views/Report/Edit.vue
+++ b/client/web/reporter/src/views/Report/Edit.vue
@@ -168,6 +168,7 @@
         :delete-disabled="!canDelete"
         :save-disabled="!canSave"
         :processing="processing"
+        :processing-save="processingSave"
         @delete="handleDelete"
         @save="handleSave"
       />
diff --git a/client/web/workflow/src/components/WorkflowEditor.vue b/client/web/workflow/src/components/WorkflowEditor.vue
index e97e670553..c2bfa8e824 100644
--- a/client/web/workflow/src/components/WorkflowEditor.vue
+++ b/client/web/workflow/src/components/WorkflowEditor.vue
@@ -196,26 +196,18 @@
         class="d-flex flex-column flex-shrink position-absolute fixed-bottom m-2"
         style="z-index: 1; width: 20vw;"
       >
-        <b-button
+        <c-button-submit
           v-if="changeDetected"
+          data-test-id="button-save-workflow"
           variant="dark"
-          :disabled="processingSave || !canUpdateWorkflow"
           block
+          :disabled="processingSave || !canUpdateWorkflow"
+          :processing="processingSave"
+          :text="$t('editor:detected-changes') + `${canUpdateWorkflow ? this.$t('editor:click-to-save') : ''}`"
+          :loading-text="$t('editor:saving')"
           class="rounded-0 py-2 px-3"
-          @click="saveWorkflow()"
-        >
-          <span
-            v-if="processingSave"
-            class="saving mx-2"
-          >
-            Saving
-          </span>
-          <span
-            v-else
-          >
-            {{ $t('editor:detected-changes') + `${canUpdateWorkflow ? this.$t('editor:click-to-save') : ''}` }}
-          </span>
-        </b-button>
+          @submit="saveWorkflow()"
+        />
       </div>
 
       <div
@@ -383,15 +375,14 @@
             {{ $t('editor:back') }}
           </b-button>
 
-          <b-button
-            variant="primary"
+          <c-button-submit
             data-test-id="button-save-workflow"
-            class="ml-auto"
             :disabled="canSave"
-            @click="saveWorkflow()"
-          >
-            {{ $t('editor:save') }}
-          </b-button>
+            :processing="processingSave"
+            :text="$t('editor:save')"
+            class="ml-auto"
+            @submit="saveWorkflow()"
+          />
         </div>
       </template>
     </b-modal>
@@ -496,7 +487,8 @@ import VueJsonEditor from 'v-jsoneditor'
 import Import from '../components/Import'
 import Export from '../components/Export'
 import { NoID } from '@cortezaproject/corteza-js'
-import { handle } from '@cortezaproject/corteza-vue'
+import { handle, components } from '@cortezaproject/corteza-vue'
+const { CButtonSubmit } = components
 
 const {
   mxClient,
@@ -544,6 +536,7 @@ export default {
     VueJsonEditor,
     Import,
     Export,
+    CButtonSubmit,
   },
 
   props: {
diff --git a/lib/vue/src/components/button/CButtonSubmit.vue b/lib/vue/src/components/button/CButtonSubmit.vue
new file mode 100644
index 0000000000..96d416f605
--- /dev/null
+++ b/lib/vue/src/components/button/CButtonSubmit.vue
@@ -0,0 +1,125 @@
+<template>
+  <b-button
+    :data-test-id="cypressID"
+    type="submit"
+    :variant="variant"
+    :disabled="disabled || processing || success"
+    :size="size"
+    :block="block"
+    :title="title"
+    :class="buttonClass"
+    @click.prevent="$emit('submit')"
+  >
+    <template v-if="processing">
+      <span
+        v-if="loadingText"
+        data-test-id="button-loading-text"
+        class="loading-text mx-2"
+      >
+        {{ loadingText }}
+      </span>
+      <b-spinner
+        v-else
+        data-test-id="spinner"
+        class="align-middle"
+        small
+      />
+    </template>
+    <template v-else-if="success">
+      <font-awesome-icon
+        data-test-id="icon-success"
+        :icon="['fas', 'check']"
+        :class="iconVariant"
+        class="text-white"
+      />
+    </template>
+    <template v-else>
+      <span
+        data-test-id="button-text"
+      >
+        {{ text }}
+      </span>
+    </template>
+  </b-button>
+</template>
+
+<script>
+export default {
+  name: 'CButtonSubmit',
+
+  i18nOptions: {
+    namespaces: 'admin',
+  },
+
+  props: {
+    processing: {
+      type: Boolean,
+    },
+
+    success: {
+      type: Boolean,
+    },
+
+    disabled: {
+      type: Boolean,
+    },
+
+    title: {
+      type: String,
+      default: '',
+    },
+
+    buttonClass: {
+      type: String,
+      default: '',
+    },
+
+    text: {
+      type: String,
+      default: '',
+    },
+
+    loadingText: {
+      type: String,
+      default: '',
+    },
+
+    size: {
+      type: String,
+      default: 'md',
+    },
+
+    block: {
+      type: Boolean,
+    },
+
+    variant: {
+      type: String,
+      default: 'primary',
+    },
+
+    iconVariant: {
+      type: String,
+      default: 'text-white',
+    },
+
+    cypressID: {
+      type: String,
+      default: 'button-submit',
+    },
+  },
+}
+</script>
+
+<style>
+.submit {
+  min-width: 75px;
+  min-height: 35px;
+}
+
+.loading-text::after {
+  display: inline-block;
+  animation: saving steps(1, end) 1s infinite;
+  content: '';
+}
+</style>
diff --git a/lib/vue/src/components/button/index.ts b/lib/vue/src/components/button/index.ts
new file mode 100644
index 0000000000..a42181ebeb
--- /dev/null
+++ b/lib/vue/src/components/button/index.ts
@@ -0,0 +1 @@
+export { default as CButtonSubmit } from './CButtonSubmit.vue'
\ No newline at end of file
diff --git a/lib/vue/src/components/index.ts b/lib/vue/src/components/index.ts
index 55f757687d..ffcbaf9c2e 100644
--- a/lib/vue/src/components/index.ts
+++ b/lib/vue/src/components/index.ts
@@ -84,4 +84,8 @@ export {
   CProgress,
 } from './progress'
 
+export {
+  CButtonSubmit,
+} from './button'
+
 export { default as C3 } from './c3'
diff --git a/lib/vue/src/components/permissions/CPermissionsModal.vue b/lib/vue/src/components/permissions/CPermissionsModal.vue
index 319f74ef27..b15e5139d1 100644
--- a/lib/vue/src/components/permissions/CPermissionsModal.vue
+++ b/lib/vue/src/components/permissions/CPermissionsModal.vue
@@ -7,15 +7,10 @@
       :title="translatedTitle"
       lazy
       scrollable
-      :ok-disabled="submitDisabled"
-      :ok-title="labels.save"
-      :cancel-title="labels.cancel"
-      cancel-variant="light"
       no-fade
       body-class="d-flex flex-column p-0"
       class="h-100 overflow-hidden"
       @hide="onHide"
-      @ok="onSubmit"
     >
       <b-row
         no-gutters
@@ -165,6 +160,24 @@
           class="d-none d-lg-block pt-4 border-left"
         />
       </b-row>
+
+      <template #modal-footer>
+        <b-button
+          data-test-id="button-cancel"
+          variant="light"
+          @click="onHide"
+        >
+          {{ labels.cancel }}
+        </b-button>
+
+        <c-button-submit
+          data-test-id="button-save"
+          :disabled="submitDisabled"
+          :processing="processing"
+          :button-text="labels.save"
+          @submit="onSubmit"
+        />
+      </template>
     </b-modal>
 
     <b-modal
@@ -219,6 +232,24 @@
           @search="searchUsers"
         />
       </b-form-group>
+      <template #modal-footer>
+        <b-button
+          data-test-id="button-cancel"
+          variant="light"
+          @click="onHide"
+        >
+          {{ labels.cancel }}
+        </b-button>
+
+        <c-button-submit
+          v-if="false"
+          data-test-id="button-save"
+          :disabled="submitDisabled"
+          :processing="processing"
+          :button-text="labels.save"
+          @submit="onSubmit"
+        />
+      </template>
     </b-modal>
   </div>
 </template>
@@ -226,6 +257,7 @@
 import { modalOpenEventName, split } from './def.ts'
 import { VueSelect } from 'vue-select'
 import Rules from './form/Rules.vue'
+import CButtonSubmit from '../button/CButtonSubmit.vue'
 import calculateDropdownPosition from '../../mixins/vue-select-position'
 
 export default {
@@ -236,6 +268,7 @@ export default {
   components: {
     Rules,
     VueSelect,
+    CButtonSubmit,
   },
 
   mixins: [
@@ -399,6 +432,7 @@ export default {
         this.fetchRules(roleID)
       }).finally(() => {
         this.processing = false
+        this.onHide()
       })
     },
 
diff --git a/locale/en/corteza-webapp-workflow/editor.yaml b/locale/en/corteza-webapp-workflow/editor.yaml
index 47c4fa6384..1d9b8c20a9 100644
--- a/locale/en/corteza-webapp-workflow/editor.yaml
+++ b/locale/en/corteza-webapp-workflow/editor.yaml
@@ -24,6 +24,7 @@ reset: Reset
 'required-namespace': Namespace required
 'required-namespace-and-module': Namespace and Module required
 save: Save
+saving: Saving
 spinning: Spinning
 'test-in-progress': "Testing in progress. If your workflow includes Prompt or Delay steps, it may be waiting for them to complete"
 'unsupported-browser': Browser is not supported!