From e850deef7c5a2ac9d7678194c24439d535d5c03c Mon Sep 17 00:00:00 2001
From: Maksym Pipkun <maxcim1077@gmail.com>
Date: Wed, 20 Aug 2025 11:48:18 +0300
Subject: [PATCH 1/8] chore: bulk action component progress

---
 .../spa/src/components/ThreeDotsMenu.vue      |  2 +-
 adminforth/spa/src/views/ShowView.vue         | 53 +++++++++++++------
 adminforth/types/Back.ts                      |  1 +
 dev-demo/custom/ShadowLoginButton.vue         |  1 +
 dev-demo/resources/users.ts                   | 42 ++++++++++-----
 5 files changed, 69 insertions(+), 30 deletions(-)
 create mode 100644 dev-demo/custom/ShadowLoginButton.vue

diff --git a/adminforth/spa/src/components/ThreeDotsMenu.vue b/adminforth/spa/src/components/ThreeDotsMenu.vue
index caa783fa6..06bf9adc4 100644
--- a/adminforth/spa/src/components/ThreeDotsMenu.vue
+++ b/adminforth/spa/src/components/ThreeDotsMenu.vue
@@ -35,7 +35,7 @@
               </div>
             </a>
           </li>
-          <li v-for="action in bulkActions.filter(a => a.showInThreeDotsDropdown)" :key="action.id">
+          <li v-for="action in bulkActions?.filter(a => a.showInThreeDotsDropdown)" :key="action.id">
             <a href="#" @click.prevent="startBulkAction(action.id)" 
                 class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
                 :class="{
diff --git a/adminforth/spa/src/views/ShowView.vue b/adminforth/spa/src/views/ShowView.vue
index 2cc1b3c1d..001e40fa0 100644
--- a/adminforth/spa/src/views/ShowView.vue
+++ b/adminforth/spa/src/views/ShowView.vue
@@ -10,21 +10,44 @@
       :adminUser="coreStore.adminUser"
     />
     <BreadcrumbsWithButtons>
-      <template v-if="coreStore.resource?.options?.bulkActions">
-        <button 
-          v-for="action in coreStore.resource.options.bulkActions.filter(a => a.showIn?.showButton)" 
-          :key="action.id"
-          @click="startCustomAction(action.id)"
-          :disabled="actionLoadingStates[action.id]"
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-        >
-          <component 
-            v-if="action.icon" 
-            :is="getIcon(action.icon)" 
-            class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
-          />
-          {{ action.name }}
-        </button>
+      <template v-if="coreStore.resource?.options?.actions">
+
+        <template  v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" >
+          <component
+              v-if="action.customComponent"
+              :is="getCustomComponent(action.customComponent)"
+              :meta="action.customComponent.meta"
+              @callAction="startCustomAction(action.id)"
+              :disabled="actionLoadingStates[action.id]"
+            >
+            <button 
+              :key="action.id"
+              class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+            >
+              <component 
+                v-if="action.icon" 
+                :is="getIcon(action.icon)" 
+                class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
+              />
+              {{ action.name }}
+            </button>
+          </component>
+
+          <button 
+            v-else
+            :key="action.id"
+            @click="startCustomAction(action.id)"
+            :disabled="actionLoadingStates[action.id]"
+            class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+          >
+            <component 
+              v-if="action.icon" 
+              :is="getIcon(action.icon)" 
+              class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
+            />
+            {{ action.name }}
+          </button>
+        </template>
       </template>
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
diff --git a/adminforth/types/Back.ts b/adminforth/types/Back.ts
index 51b7a5921..85f401545 100644
--- a/adminforth/types/Back.ts
+++ b/adminforth/types/Back.ts
@@ -819,6 +819,7 @@ export interface AdminForthActionInput {
   }>;
   icon?: string;
   id?: string;
+  customComponent?: AdminForthComponentDeclaration;
 }
 
 export interface AdminForthResourceInput extends Omit<NonNullable<AdminForthResourceInputCommon>, 'columns' | 'hooks' | 'options'> {
diff --git a/dev-demo/custom/ShadowLoginButton.vue b/dev-demo/custom/ShadowLoginButton.vue
new file mode 100644
index 000000000..930be0bb0
--- /dev/null
+++ b/dev-demo/custom/ShadowLoginButton.vue
@@ -0,0 +1 @@
+<span> TEST CUSTOM COMPONENT </span>
\ No newline at end of file
diff --git a/dev-demo/resources/users.ts b/dev-demo/resources/users.ts
index 879b9c1ef..c3364fa31 100644
--- a/dev-demo/resources/users.ts
+++ b/dev-demo/resources/users.ts
@@ -50,7 +50,7 @@ export default {
   dataSource: "maindb",
   table: "users",
   resourceId: "users",
-  label: "Users",
+  label: "Users1",
 
   recordLabel: (r: any) => `👤 ${r.email}`,
   plugins: [
@@ -153,19 +153,33 @@ export default {
     }),
   ],
   options: {
-    allowedActions: {
-      create: async ({
-        adminUser,
-        meta,
-      }: {
-        adminUser: AdminUser;
-        meta: any;
-      }) => {
-        // console.log('create', adminUser, meta);
-        return true;
-      },
-      delete: true,
-    },
+    actions: [
+      {
+        name: 'Auto submit',  // Display name of the action
+        icon: 'flowbite:play-solid',  // Icon to display (using Flowbite icons)
+        
+        // Control who can see/use this action
+        allowed: ({ adminUser, standardAllowedActions }) => {
+          return true;  // Allow everyone
+        },
+        
+        // Handler function when action is triggered
+        action: async ({ recordId, adminUser }) => {
+          console.log("auto submit", recordId, adminUser);
+          return { 
+            ok: true, 
+            successMessage: "Auto submitted" 
+          };
+        },
+
+        // Configure where the action appears
+        showIn: {
+          showButton: true,        // Show as a button
+         // showThreeDotsMenu: true, // Show in the three dots menu
+          list: true,          // Show in the list view
+        }
+      }
+    ],
   },
   columns: [
     {

From c83ee3b423ebf3aa8bdbe6f0bc6d906b7b7213d5 Mon Sep 17 00:00:00 2001
From: Maksym Pipkun <maxcim1077@gmail.com>
Date: Wed, 20 Aug 2025 17:30:00 +0300
Subject: [PATCH 2/8] feat: add CallActionWrapper component and integrate with
 action menus

---
 .../tutorial/07-Plugins/02-TwoFactorsAuth.md  | 52 ++++++++++++++++++-
 adminforth/modules/configValidator.ts         |  6 ++-
 .../spa/src/components/CallActionWrapper.vue  | 16 ++++++
 .../spa/src/components/ResourceListTable.vue  | 35 ++++++++++---
 .../components/ResourceListTableVirtual.vue   | 37 ++++++++++---
 .../spa/src/components/ThreeDotsMenu.vue      | 28 ++++++----
 adminforth/spa/src/views/ShowView.vue         | 30 +++--------
 7 files changed, 157 insertions(+), 47 deletions(-)
 create mode 100644 adminforth/spa/src/components/CallActionWrapper.vue

diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
index 60eaf0829..f648682c2 100644
--- a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
+++ b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
@@ -205,4 +205,54 @@ plugins: [
         }),
 ],
 ...
-```
\ No newline at end of file
+```
+
+## Trigger 2FA from Actions via a Custom Component
+
+Enable a one‑time 2FA prompt before running any AdminForth action by attaching a tiny Vue wrapper via `customComponent`. The plugin exposes a global modal: `window.adminforthTwoFaModal.getCode(cb?)`.
+
+### Minimal Wrapper Component
+
+```ts title='/custom/RequireTwoFaGate.vue'
+<template>
+  <div class="contents" @click.stop.prevent="onClick"><slot /></div>
+</template>
+<script setup lang="ts">
+  import { callAdminForthApi } from '@/utils';
+  const emit = defineEmits<{ (e: 'callAction'): void }>();
+  const props = defineProps<{ disabled?: boolean; meta?: { verifyPath?: string; [k: string]: any } }>();
+
+  async function verify2fa(code: string) {
+  const path = props.meta?.verifyPath ?? '/plugin/twofa/verify';
+  const resp = await callAdminForthApi({ method: 'POST', path, body: { code } });
+    return !!resp?.ok;
+  }
+
+  async function onClick() {
+  if (props.disabled) return;
+  if (!window.adminforthTwoFaModal?.getCode) { emit('callAction'); return; }
+  await window.adminforthTwoFaModal.getCode(verify2fa);
+    emit('callAction');
+  }
+</script>
+```
+
+### Attach to an Action
+
+```ts title='/adminuser.ts'
+options: {
+  actions: [
+    {
+    name: 'Auto submit',
+    icon: 'flowbite:play-solid',
+    allowed: () => true,
+    action: async ({ recordId, adminUser }) => ({ ok: true, successMessage: 'Auto submitted' }),
+    showIn: { showButton: true, showThreeDotsMenu: true, list: true },
+    //diff-add
+    customComponent: '@@/RequireTwoFaGate.vue',
+    // or with runtime config:
+    // customComponent: { name: '@@/RequireTwoFaGate.vue', meta: { verifyPath: '/plugin/twofa/verify' } },
+    },
+  ],
+}
+```
diff --git a/adminforth/modules/configValidator.ts b/adminforth/modules/configValidator.ts
index 0bf8fb68c..6145acc96 100644
--- a/adminforth/modules/configValidator.ts
+++ b/adminforth/modules/configValidator.ts
@@ -375,7 +375,7 @@ export default class ConfigValidator implements IConfigValidator {
       if (!action.name) {
         errors.push(`Resource "${res.resourceId}" has action without name`);
       }
-  
+
       if (!action.action && !action.url) {
         errors.push(`Resource "${res.resourceId}" action "${action.name}" must have action or url`);
       }
@@ -383,6 +383,10 @@ export default class ConfigValidator implements IConfigValidator {
       if (action.action && action.url) {
         errors.push(`Resource "${res.resourceId}" action "${action.name}" cannot have both action and url`);
       }
+
+      if (action.customComponent) {
+        action.customComponent = this.validateComponent(action.customComponent as any, errors);
+      }
   
       // Generate ID if not present
       if (!action.id) {
diff --git a/adminforth/spa/src/components/CallActionWrapper.vue b/adminforth/spa/src/components/CallActionWrapper.vue
new file mode 100644
index 000000000..e5619829f
--- /dev/null
+++ b/adminforth/spa/src/components/CallActionWrapper.vue
@@ -0,0 +1,16 @@
+<template>
+  <div @click="onClick">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ disabled?: boolean }>();
+const emit = defineEmits<{ (e: 'callAction', extra?: any ): void }>();
+
+function onClick() {
+    if (props.disabled) return;
+    const extra = { someData: 'example' };
+    emit('callAction', extra);
+}
+</script>
\ No newline at end of file
diff --git a/adminforth/spa/src/components/ResourceListTable.vue b/adminforth/spa/src/components/ResourceListTable.vue
index 0bde93731..7810949df 100644
--- a/adminforth/spa/src/components/ResourceListTable.vue
+++ b/adminforth/spa/src/components/ResourceListTable.vue
@@ -176,13 +176,36 @@
               </template>
 
               <template v-if="resource.options?.actions">
-                <Tooltip v-for="action in resource.options.actions.filter(a => a.showIn?.list)" :key="action.id">
-                  <button
-                    @click="startCustomAction(action.id, row)"
+                <Tooltip
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  :key="action.id"
+                >
+                  <CallActionWrapper
+                    :disabled="rowActionLoadingStates?.[action.id]"
+                    @callAction="startCustomAction(action.id, row)"
                   >
-                    <component v-if="action.icon" :is="getIcon(action.icon)" class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"></component>
-                  </button>
-                  <template v-slot:tooltip>
+                    <component
+                      :is="action.customComponent ? getCustomComponent(action.customComponent) : 'span'"
+                      :meta="action.customComponent?.meta"
+                      :row="row"
+                      :resource="resource"
+                      :adminUser="adminUser"
+                    >
+                      <button
+                        type="button"
+                        :disabled="rowActionLoadingStates?.[action.id]"
+                        @click.stop.prevent="startCustomAction(action.id, row)"
+                      >
+                        <component
+                          v-if="action.icon"
+                          :is="getIcon(action.icon)"
+                          class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                        />
+                      </button>
+                    </component>
+                  </CallActionWrapper>
+
+                  <template #tooltip>
                     {{ action.name }}
                   </template>
                 </Tooltip>
diff --git a/adminforth/spa/src/components/ResourceListTableVirtual.vue b/adminforth/spa/src/components/ResourceListTableVirtual.vue
index 27c7aa5ec..97e318f98 100644
--- a/adminforth/spa/src/components/ResourceListTableVirtual.vue
+++ b/adminforth/spa/src/components/ResourceListTableVirtual.vue
@@ -185,14 +185,37 @@
                 />
               </template>
 
-              <template v-if="resource.options?.actions">
-                <Tooltip v-for="action in resource.options.actions.filter(a => a.showIn?.list)" :key="action.id">
-                  <button
-                    @click="startCustomAction(action.id, row)"
+                            <template v-if="resource.options?.actions">
+                <Tooltip
+                  v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
+                  :key="action.id"
+                >
+                  <CallActionWrapper
+                    :disabled="rowActionLoadingStates?.[action.id]"
+                    @callAction="startCustomAction(action.id, row)"
                   >
-                    <component v-if="action.icon" :is="getIcon(action.icon)" class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"></component>
-                  </button>
-                  <template v-slot:tooltip>
+                    <component
+                      :is="action.customComponent ? getCustomComponent(action.customComponent) : 'span'"
+                      :meta="action.customComponent?.meta"
+                      :row="row"
+                      :resource="resource"
+                      :adminUser="adminUser"
+                    >
+                      <button
+                        type="button"
+                        :disabled="rowActionLoadingStates?.[action.id]"
+                        @click.stop.prevent="startCustomAction(action.id, row)"
+                      >
+                        <component
+                          v-if="action.icon"
+                          :is="getIcon(action.icon)"
+                          class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"
+                        />
+                      </button>
+                    </component>
+                  </CallActionWrapper>
+
+                  <template #tooltip>
                     {{ action.name }}
                   </template>
                 </Tooltip>
diff --git a/adminforth/spa/src/components/ThreeDotsMenu.vue b/adminforth/spa/src/components/ThreeDotsMenu.vue
index 06bf9adc4..76e0d431a 100644
--- a/adminforth/spa/src/components/ThreeDotsMenu.vue
+++ b/adminforth/spa/src/components/ThreeDotsMenu.vue
@@ -24,16 +24,22 @@
             </a>
           </li>
           <li v-for="action in customActions" :key="action.id">
-            <a href="#" @click.prevent="handleActionClick(action)" class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
-              <div class="flex items-center gap-2">
-                <component 
-                  v-if="action.icon" 
-                  :is="getIcon(action.icon)" 
-                  class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
-                />
-                {{ action.name }}
-              </div>
-            </a>
+            <component
+              :is="(action.customComponent && getCustomComponent(action.customComponent)) || CallActionWrapper"
+              :meta="action.customComponent?.meta"
+              @callAction="handleActionClick(action)"
+            >
+              <a href="#" @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
+                <div class="flex items-center gap-2">
+                  <component 
+                    v-if="action.icon" 
+                    :is="getIcon(action.icon)" 
+                    class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
+                  />
+                  {{ action.name }}
+                </div>
+              </a>
+            </component>
           </li>
           <li v-for="action in bulkActions?.filter(a => a.showInThreeDotsDropdown)" :key="action.id">
             <a href="#" @click.prevent="startBulkAction(action.id)" 
@@ -65,6 +71,8 @@ import { useCoreStore } from '@/stores/core';
 import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
+import CallActionWrapper from '@/components/CallActionWrapper.vue'
+
 
 const route = useRoute();
 const coreStore = useCoreStore();
diff --git a/adminforth/spa/src/views/ShowView.vue b/adminforth/spa/src/views/ShowView.vue
index 001e40fa0..374c13a98 100644
--- a/adminforth/spa/src/views/ShowView.vue
+++ b/adminforth/spa/src/views/ShowView.vue
@@ -12,16 +12,16 @@
     <BreadcrumbsWithButtons>
       <template v-if="coreStore.resource?.options?.actions">
 
-        <template  v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" >
+        <template  v-for="action in coreStore.resource.options.actions.filter(a => a.showIn?.showButton)" :key="action.id">
           <component
-              v-if="action.customComponent"
-              :is="getCustomComponent(action.customComponent)"
-              :meta="action.customComponent.meta"
-              @callAction="startCustomAction(action.id)"
-              :disabled="actionLoadingStates[action.id]"
-            >
+            :is="getCustomComponent(action.customComponent) || CallActionWrapper"
+            :meta="action.customComponent?.meta"
+            @callAction="startCustomAction(action.id)"
+            :disabled="actionLoadingStates[action.id]"
+          >
             <button 
               :key="action.id"
+              :disabled="actionLoadingStates[action.id]"
               class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
             >
               <component 
@@ -32,21 +32,6 @@
               {{ action.name }}
             </button>
           </component>
-
-          <button 
-            v-else
-            :key="action.id"
-            @click="startCustomAction(action.id)"
-            :disabled="actionLoadingStates[action.id]"
-            class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-          >
-            <component 
-              v-if="action.icon" 
-              :is="getIcon(action.icon)" 
-              class="w-4 h-4 me-2 text-lightPrimary dark:text-darkPrimary"
-            />
-            {{ action.name }}
-          </button>
         </template>
       </template>
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
@@ -167,6 +152,7 @@ import adminforth from "@/adminforth";
 import { useI18n } from 'vue-i18n';
 import { getIcon } from '@/utils';
 import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
+import CallActionWrapper from '@/components/CallActionWrapper.vue'
 
 const route = useRoute();
 const router = useRouter();

From e65f705db8b4cc9bcafc19af08fe8c579c0c1c67 Mon Sep 17 00:00:00 2001
From: Maksym Pipkun <maxcim1077@gmail.com>
Date: Thu, 21 Aug 2025 10:25:11 +0300
Subject: [PATCH 3/8] fix: enhance CallActionWrapper to accept extra props and
 update ThreeDotsMenu to handle null bulkActions

---
 adminforth/spa/src/components/CallActionWrapper.vue | 5 ++---
 adminforth/spa/src/components/ThreeDotsMenu.vue     | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/adminforth/spa/src/components/CallActionWrapper.vue b/adminforth/spa/src/components/CallActionWrapper.vue
index e5619829f..058da534a 100644
--- a/adminforth/spa/src/components/CallActionWrapper.vue
+++ b/adminforth/spa/src/components/CallActionWrapper.vue
@@ -5,12 +5,11 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ disabled?: boolean }>();
+const props = defineProps<{ disabled?: boolean, extra?: any }>();
 const emit = defineEmits<{ (e: 'callAction', extra?: any ): void }>();
 
 function onClick() {
     if (props.disabled) return;
-    const extra = { someData: 'example' };
-    emit('callAction', extra);
+    emit('callAction', props.extra);
 }
 </script>
\ No newline at end of file
diff --git a/adminforth/spa/src/components/ThreeDotsMenu.vue b/adminforth/spa/src/components/ThreeDotsMenu.vue
index 76e0d431a..0de10e866 100644
--- a/adminforth/spa/src/components/ThreeDotsMenu.vue
+++ b/adminforth/spa/src/components/ThreeDotsMenu.vue
@@ -41,7 +41,7 @@
               </a>
             </component>
           </li>
-          <li v-for="action in bulkActions?.filter(a => a.showInThreeDotsDropdown)" :key="action.id">
+          <li v-for="action in (bulkActions ?? []).filter(a => a.showInThreeDotsDropdown)" :key="action.id">
             <a href="#" @click.prevent="startBulkAction(action.id)" 
                 class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
                 :class="{

From a5defafb175430f77f384ae1007b9dc689d3c475 Mon Sep 17 00:00:00 2001
From: Ivan Borshchov <ivan@devforth.io>
Date: Thu, 21 Aug 2025 13:04:34 +0300
Subject: [PATCH 4/8] Update 02-TwoFactorsAuth.md

---
 .../tutorial/07-Plugins/02-TwoFactorsAuth.md  | 121 ++++++++++++++----
 1 file changed, 97 insertions(+), 24 deletions(-)

diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
index f648682c2..869a7bbac 100644
--- a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
+++ b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
@@ -207,52 +207,125 @@ plugins: [
 ...
 ```
 
-## Trigger 2FA from Actions via a Custom Component
+## Request 2FA on custom Actions
 
-Enable a one‑time 2FA prompt before running any AdminForth action by attaching a tiny Vue wrapper via `customComponent`. The plugin exposes a global modal: `window.adminforthTwoFaModal.getCode(cb?)`.
+You might want to to allow to call some custom critical/money related actions with additional 2FA approval. This eliminates risk that user cookies might be stolen by some virous/doorway software after login.
 
-### Minimal Wrapper Component
+To do it you first need to create custom component which will call `window.adminforthTwoFaModal.getCode(cb?)` frontend API exposed by this plugin. This is awaitable call wich shows 2FA popup and asks user to enter a code.
 
 ```ts title='/custom/RequireTwoFaGate.vue'
 <template>
-  <div class="contents" @click.stop.prevent="onClick"><slot /></div>
+  <div class="contents" @click.stop.prevent="onClick">
+    <slot />  <!-- render action defgault contend - button/icon -->
+  </div>
 </template>
+
 <script setup lang="ts">
   import { callAdminForthApi } from '@/utils';
   const emit = defineEmits<{ (e: 'callAction'): void }>();
   const props = defineProps<{ disabled?: boolean; meta?: { verifyPath?: string; [k: string]: any } }>();
 
-  async function verify2fa(code: string) {
-  const path = props.meta?.verifyPath ?? '/plugin/twofa/verify';
-  const resp = await callAdminForthApi({ method: 'POST', path, body: { code } });
-    return !!resp?.ok;
-  }
-
   async function onClick() {
-  if (props.disabled) return;
-  if (!window.adminforthTwoFaModal?.getCode) { emit('callAction'); return; }
-  await window.adminforthTwoFaModal.getCode(verify2fa);
-    emit('callAction');
+    if (props.disabled) {
+      return;
+    }
+    const code = await window.adminforthTwoFaModal.getCode();  // this will ask user to enter code
+    emit('callAction', { code }); // then we pass this code to action (from fronted to backend)
   }
 </script>
 ```
 
-### Attach to an Action
+Now we need to read code entered on fronted on backend and verify that is is valid and not expired, on backend action handler:
 
 ```ts title='/adminuser.ts'
 options: {
   actions: [
     {
-    name: 'Auto submit',
-    icon: 'flowbite:play-solid',
-    allowed: () => true,
-    action: async ({ recordId, adminUser }) => ({ ok: true, successMessage: 'Auto submitted' }),
-    showIn: { showButton: true, showThreeDotsMenu: true, list: true },
-    //diff-add
-    customComponent: '@@/RequireTwoFaGate.vue',
-    // or with runtime config:
-    // customComponent: { name: '@@/RequireTwoFaGate.vue', meta: { verifyPath: '/plugin/twofa/verify' } },
+      name: 'Auto submit',
+      icon: 'flowbite:play-solid',
+      allowed: () => true,
+      action: async ({ recordId, adminUser, payload, adminforth }) => { 
+          const { code } = payload;
+          const totpIsValid = adminforth.getPluginByClassName<>('T2FAPlug').verify(code);
+          if (!totpIsValid) {
+             return { ok: false, error: 'TOTP code is invalid' }
+          }
+          // we will also register fact of ussage of this critical action using audit log Plugin
+          getPluginBYClassName<auditlog>.logCustomAction()...
+          .... your critical action logic ....
+          return { ok: true, successMessage: 'Auto submitted' }
+      },
+      showIn: { showButton: true, showThreeDotsMenu: true, list: true },
+      //diff-add
+      customComponent: '@@/RequireTwoFaGate.vue',
     },
   ],
 }
 ```
+
+## Request 2FA from custom components
+
+Imagine you have some button which does some API call
+
+```ts
+<Button @click="callApi">Call critical api</Button>
+
+
+<script>
+
+async function callAPI() {
+   const res = await callAdminForthAPI('/myCriticalAction', { param: 1 })
+}
+</scrip>
+```
+
+On backend you have simple express api
+
+```
+
+app.post(
+  adminforth.authorize(
+    () => {
+    req.body.param
+       ... some custom action
+    }
+))
+```
+
+You might want to protect this call with a TOTP code. To do it, we need to make this change
+
+```ts
+<Button @click="callApi">Call critical api</Button>
+
+
+<script>
+
+function callAPI() {
+   // diff-remove
+   const res = callAdminForthAPI('/myCriticalAction', { param: 1 })
+//diff-add
+   const code = await window.adminforthTwoFaModal.getCode(async (code) => {
+//diff-add
+        const res = await callAdminForthAPI('/myCriticalAction', { param: 1, code })
+//diff-add
+        return !res.totpError
+   });  // this will ask user to enter code
+}
+</scrip>
+```
+
+And oin API call we need to verify it:
+
+
+```
+
+app.post(
+  adminforth.authorize(
+    () => {
+//diff-add
+ getPBCNM
+.. log some critical action
+       ... some custom action
+    }
+))
+```

From c95b1b6005767b24eb19f7515a6f6d41005de3ca Mon Sep 17 00:00:00 2001
From: Maksym Pipkun <maxcim1077@gmail.com>
Date: Mon, 25 Aug 2025 17:20:50 +0300
Subject: [PATCH 5/8] feat: enhance call action handling to support additional
 payloads across components

---
 .../tutorial/07-Plugins/02-TwoFactorsAuth.md  | 225 +++++++++++++-----
 adminforth/modules/codeInjector.ts            |  13 +
 adminforth/modules/restApi.ts                 |   4 +-
 .../spa/src/components/ResourceListTable.vue  |  11 +-
 .../components/ResourceListTableVirtual.vue   |   3 +-
 .../spa/src/components/ThreeDotsMenu.vue      |   7 +-
 adminforth/spa/src/views/ShowView.vue         |   7 +-
 7 files changed, 200 insertions(+), 70 deletions(-)

diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
index 869a7bbac..f3dd718c0 100644
--- a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
+++ b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
@@ -221,18 +221,16 @@ To do it you first need to create custom component which will call `window.admin
 </template>
 
 <script setup lang="ts">
-  import { callAdminForthApi } from '@/utils';
-  const emit = defineEmits<{ (e: 'callAction'): void }>();
-  const props = defineProps<{ disabled?: boolean; meta?: { verifyPath?: string; [k: string]: any } }>();
+  const emit = defineEmits<{ (e: 'callAction', payload?: any): void }>();
+  const props = defineProps<{ disabled?: boolean; meta?: Record<string, any> }>();
 
   async function onClick() {
-    if (props.disabled) {
-      return;
-    }
+    if (props.disabled) return;
+  
     const code = await window.adminforthTwoFaModal.getCode();  // this will ask user to enter code
     emit('callAction', { code }); // then we pass this code to action (from fronted to backend)
   }
-</script>
+  </script>
 ```
 
 Now we need to read code entered on fronted on backend and verify that is is valid and not expired, on backend action handler:
@@ -244,16 +242,50 @@ options: {
       name: 'Auto submit',
       icon: 'flowbite:play-solid',
       allowed: () => true,
-      action: async ({ recordId, adminUser, payload, adminforth }) => { 
-          const { code } = payload;
-          const totpIsValid = adminforth.getPluginByClassName<>('T2FAPlug').verify(code);
-          if (!totpIsValid) {
-             return { ok: false, error: 'TOTP code is invalid' }
-          }
-          // we will also register fact of ussage of this critical action using audit log Plugin
-          getPluginBYClassName<auditlog>.logCustomAction()...
-          .... your critical action logic ....
-          return { ok: true, successMessage: 'Auto submitted' }
+      action: async ({ recordId, adminUser, adminforth, extra }) => {
+        //diff-add
+        const code = extra?.code
+        //diff-add
+        if (!code) {
+          //diff-add
+          return { ok: false, error: 'No TOTP code provided' };
+        //diff-add
+        }
+        //diff-add
+        const t2fa = adminforth.getPluginByClassName<TwoFactorsAuthPlugin>('TwoFactorsAuthPlugin');
+        //diff-add
+        const result = await t2fa.verify(code, { adminUser });
+
+        //diff-add
+        if (!result?.ok) {
+          //diff-add
+          return { ok: false, error: result?.error ?? 'TOTP code is invalid' };
+          //diff-add
+        }
+        //diff-add
+        await adminforth
+        //diff-add
+          .getPluginByClassName<AuditLogPlugin>('AuditLogPlugin')
+          //diff-add
+          .logCustomAction({
+            //diff-add
+            resourceId: 'aparts',
+            //diff-add
+            recordId: null,
+            //diff-add
+            actionId: 'visitedDashboard',
+            //diff-add
+            oldData: null,
+            //diff-add
+            data: { dashboard: 'main' },
+            //diff-add
+            user: adminUser,
+            //diff-add
+          });
+
+          //your critical action logic 
+      
+        return { ok: true, successMessage: 'Auto submitted' };
       },
       showIn: { showButton: true, showThreeDotsMenu: true, list: true },
       //diff-add
@@ -268,64 +300,149 @@ options: {
 Imagine you have some button which does some API call
 
 ```ts
-<Button @click="callApi">Call critical api</Button>
+<template>
+  <Button @click="callAdminAPI">Call critical API</Button>
+</template>
+  
 
+<script setup lang="ts">
+import { callApi } from '@/utils';
+import adminforth from '@/adminforth';
 
-<script>
+async function callAdminAPI() {
+  const code = await window.adminforthTwoFaModal.getCode();
 
-async function callAPI() {
-   const res = await callAdminForthAPI('/myCriticalAction', { param: 1 })
+  const res = await callApi({
+    path: '/myCriticalAction',
+    method: 'POST',
+    body: { param: 1 },
+  });
 }
-</scrip>
+</script>
 ```
 
 On backend you have simple express api
 
-```
+```ts
+app.post(`${ADMIN_BASE_URL}/myCriticalAction`,
+  admin.express.authorize(
+    async (req: any, res: any) => {
+
+      // ... your critical logic ...
 
-app.post(
-  adminforth.authorize(
-    () => {
-    req.body.param
-       ... some custom action
+      return res.json({ ok: true, successMessage: 'Action executed' });
     }
-))
+  )
+);
 ```
 
 You might want to protect this call with a TOTP code. To do it, we need to make this change
 
 ```ts
-<Button @click="callApi">Call critical api</Button>
-
-
-<script>
+<template>
+  <Button @click="callAdminAPI">Call critical API</Button>
+</template>
+  
 
-function callAPI() {
-   // diff-remove
-   const res = callAdminForthAPI('/myCriticalAction', { param: 1 })
-//diff-add
-   const code = await window.adminforthTwoFaModal.getCode(async (code) => {
-//diff-add
-        const res = await callAdminForthAPI('/myCriticalAction', { param: 1, code })
-//diff-add
-        return !res.totpError
-   });  // this will ask user to enter code
+<script setup lang="ts">
+import { callApi } from '@/utils';
+import adminforth from '@/adminforth';
+
+async function callAdminAPI() {
+  const code = await window.adminforthTwoFaModal.getCode();
+
+  // diff-remove
+  const res = await callApi({
+  // diff-remove
+    path: '/myCriticalAction',
+  // diff-remove
+    method: 'POST',
+  // diff-remove
+    body: { param: 1 },
+  // diff-remove
+  });
+
+  // diff-add
+  const res = await callApi({
+  // diff-add
+    path: '/myCriticalAction',
+  // diff-add
+    method: 'POST',
+  // diff-add
+    body: { param: 1, code: String(code) },
+  // diff-add
+  });
+
+  // diff-add
+  if (!res?.ok) {
+  // diff-add
+    adminforth.alert({ message: res.error, variant: 'danger' });
+  // diff-add
+  }
 }
-</scrip>
+</script>
+
 ```
 
 And oin API call we need to verify it:
 
 
-```
-
-app.post(
-  adminforth.authorize(
-    () => {
-//diff-add
- getPBCNM
-.. log some critical action
-       ... some custom action
+```ts
+app.post(`${ADMIN_BASE_URL}/myCriticalAction`,
+  admin.express.authorize(
+    async (req: any, res: any) => {
+
+      // diff-remove
+      // ... your critical logic ...
+
+      // diff-remove
+      return res.json({ ok: true, successMessage: 'Action executed' });
+
+      // diff-add
+      const { adminUser } = req;
+      // diff-add
+      const { param, code } = req.body ?? {};
+      // diff-add
+      const token = String(code ?? '').replace(/\D/g, '');
+      // diff-add
+      if (token.length !== 6) {
+      // diff-add
+        return res.status(401).json({ ok: false, error: 'TOTP must be 6 digits' });
+      // diff-add
+      }
+      // diff-add
+      const t2fa = admin.getPluginByClassName<TwoFactorsAuthPlugin>('TwoFactorsAuthPlugin');
+      // diff-add
+      const verifyRes = await t2fa.verify(token, { adminUser });
+      // diff-add
+      if (!('ok' in verifyRes)) {
+      // diff-add
+        return res.status(400).json({ ok: false, error: verifyRes.error || 'Wrong or expired OTP code' });
+      // diff-add
+      }
+      // diff-add
+      await admin.getPluginByClassName<AuditLogPlugin>('AuditLogPlugin').logCustomAction({
+      // diff-add
+        resourceId: 'aparts',
+      // diff-add
+        recordId: null,
+      // diff-add
+        actionId: 'myCriticalAction',
+      // diff-add
+        oldData: null,
+      // diff-add
+        data: { param },
+      // diff-add
+        user: adminUser,
+      // diff-add
+      });
+
+      // diff-add
+      // ... your critical logic ...
+
+      // diff-add
+      return res.json({ ok: true, successMessage: 'Action executed' });
     }
-))
+  )
+);
 ```
diff --git a/adminforth/modules/codeInjector.ts b/adminforth/modules/codeInjector.ts
index f6912be25..b13241b68 100644
--- a/adminforth/modules/codeInjector.ts
+++ b/adminforth/modules/codeInjector.ts
@@ -452,6 +452,19 @@ class CodeInjector implements ICodeInjector {
           });
         }
       });
+      resource.options.actions.forEach((action) => {
+        const cc = action.customComponent;
+        if (!cc) return;
+      
+        const file = cc.file;
+        if (!file) {
+          throw new Error('customComponent.file is missing for action: ' + JSON.stringify({ id: action.id, name: action.name }));
+        }
+        if (!customResourceComponents.includes(file)) {
+          console.log('Found injection', file);
+          customResourceComponents.push(file);
+        }
+      });
       
       (Object.values(resource.options?.pageInjections || {})).forEach((injection) => {
         Object.values(injection).forEach((filePathes: {file: string}[]) => {
diff --git a/adminforth/modules/restApi.ts b/adminforth/modules/restApi.ts
index a2cd62872..7206fc9c9 100644
--- a/adminforth/modules/restApi.ts
+++ b/adminforth/modules/restApi.ts
@@ -1423,7 +1423,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
       method: 'POST',
       path: '/start_custom_action',
       handler: async ({ body, adminUser, tr }) => {
-        const { resourceId, actionId, recordId } = body;
+        const { resourceId, actionId, recordId, extra } = body;
         const resource = this.adminforth.config.resources.find((res) => res.resourceId == resourceId);
         if (!resource) {
           return { error: await tr(`Resource {resourceId} not found`, 'errors', { resourceId }) };
@@ -1454,7 +1454,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
             redirectUrl: action.url
           }
         }
-        const response = await action.action({ recordId, adminUser, resource, tr, adminforth: this.adminforth });
+        const response = await action.action({ recordId, adminUser, resource, tr, adminforth: this.adminforth, extra });
         
         return {
           actionId,
diff --git a/adminforth/spa/src/components/ResourceListTable.vue b/adminforth/spa/src/components/ResourceListTable.vue
index 7810949df..f39c3a172 100644
--- a/adminforth/spa/src/components/ResourceListTable.vue
+++ b/adminforth/spa/src/components/ResourceListTable.vue
@@ -180,21 +180,18 @@
                   v-for="action in resource.options.actions.filter(a => a.showIn?.list)"
                   :key="action.id"
                 >
-                  <CallActionWrapper
-                    :disabled="rowActionLoadingStates?.[action.id]"
-                    @callAction="startCustomAction(action.id, row)"
-                  >
                     <component
-                      :is="action.customComponent ? getCustomComponent(action.customComponent) : 'span'"
+                      :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
                       :meta="action.customComponent?.meta"
                       :row="row"
                       :resource="resource"
                       :adminUser="adminUser"
+                      @callAction="(payload? : Object) => startCustomAction(action.id, payload ?? row)"
                     >
                       <button
                         type="button"
                         :disabled="rowActionLoadingStates?.[action.id]"
-                        @click.stop.prevent="startCustomAction(action.id, row)"
+                        @click.stop.prevent
                       >
                         <component
                           v-if="action.icon"
@@ -203,7 +200,6 @@
                         />
                       </button>
                     </component>
-                  </CallActionWrapper>
 
                   <template #tooltip>
                     {{ action.name }}
@@ -211,6 +207,7 @@
                 </Tooltip>
               </template>
             </div>
+            
           </td>
         </tr>
       </tbody>
diff --git a/adminforth/spa/src/components/ResourceListTableVirtual.vue b/adminforth/spa/src/components/ResourceListTableVirtual.vue
index 97e318f98..b04d744bd 100644
--- a/adminforth/spa/src/components/ResourceListTableVirtual.vue
+++ b/adminforth/spa/src/components/ResourceListTableVirtual.vue
@@ -200,11 +200,12 @@
                       :row="row"
                       :resource="resource"
                       :adminUser="adminUser"
+                      @callAction="(payload? : Object) => startCustomAction(action.id, payload ?? row)"
                     >
                       <button
                         type="button"
                         :disabled="rowActionLoadingStates?.[action.id]"
-                        @click.stop.prevent="startCustomAction(action.id, row)"
+                        @click.stop.prevent
                       >
                         <component
                           v-if="action.icon"
diff --git a/adminforth/spa/src/components/ThreeDotsMenu.vue b/adminforth/spa/src/components/ThreeDotsMenu.vue
index 0de10e866..0a1a8cdaf 100644
--- a/adminforth/spa/src/components/ThreeDotsMenu.vue
+++ b/adminforth/spa/src/components/ThreeDotsMenu.vue
@@ -27,7 +27,7 @@
             <component
               :is="(action.customComponent && getCustomComponent(action.customComponent)) || CallActionWrapper"
               :meta="action.customComponent?.meta"
-              @callAction="handleActionClick(action)"
+              @callAction="(payload? : Object) => handleActionClick(action, payload)"
             >
               <a href="#" @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
                 <div class="flex items-center gap-2">
@@ -87,7 +87,7 @@ const props = defineProps({
 
 const emit = defineEmits(['startBulkAction']);
 
-async function handleActionClick(action) {
+async function handleActionClick(action: any, payload: any) {
   adminforth.list.closeThreeDotsDropdown();
   
   const actionId = action.id;
@@ -97,7 +97,8 @@ async function handleActionClick(action) {
     body: {
       resourceId: route.params.resourceId,
       actionId: actionId,
-      recordId: route.params.primaryKey
+      recordId: route.params.primaryKey,
+      extra: payload || {},
     }
   });
 
diff --git a/adminforth/spa/src/views/ShowView.vue b/adminforth/spa/src/views/ShowView.vue
index 374c13a98..7ab40fa72 100644
--- a/adminforth/spa/src/views/ShowView.vue
+++ b/adminforth/spa/src/views/ShowView.vue
@@ -16,7 +16,7 @@
           <component
             :is="getCustomComponent(action.customComponent) || CallActionWrapper"
             :meta="action.customComponent?.meta"
-            @callAction="startCustomAction(action.id)"
+            @callAction="(payload?) => startCustomAction(action.id, payload)"
             :disabled="actionLoadingStates[action.id]"
           >
             <button 
@@ -244,7 +244,7 @@ async function deleteRecord(row) {
     
 }
 
-async function startCustomAction(actionId) {  
+async function startCustomAction(actionId, extra) {  
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({
@@ -253,7 +253,8 @@ async function startCustomAction(actionId) {
     body: {
       resourceId: route.params.resourceId,
       actionId: actionId,
-      recordId: route.params.primaryKey
+      recordId: route.params.primaryKey,
+      extra: extra,
     }
   });
   

From b9a4d3232080a5509c9ab68dc6da325154b5901a Mon Sep 17 00:00:00 2001
From: Maksym Pipkun <maxcim1077@gmail.com>
Date: Tue, 26 Aug 2025 10:28:17 +0300
Subject: [PATCH 6/8] docs: add customComponent for actions with example

---
 .../tutorial/03-Customization/09-Actions.md   | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/adminforth/documentation/docs/tutorial/03-Customization/09-Actions.md b/adminforth/documentation/docs/tutorial/03-Customization/09-Actions.md
index c9ac16cf0..74d5d6c0f 100644
--- a/adminforth/documentation/docs/tutorial/03-Customization/09-Actions.md
+++ b/adminforth/documentation/docs/tutorial/03-Customization/09-Actions.md
@@ -263,4 +263,63 @@ bulkActions: [
     },
   }
 ],
+```
+
+## Custom Component
+
+If you want to style an action's button/icon without changing its behavior, attach a custom UI wrapper via `customComponent`. 
+The file points to your SFC in the custom folder (alias `@@/`), and `meta` lets you pass lightweight styling options (e.g., border color, radius).
+
+```ts title="./resources/apartments.ts"
+{
+  resourceId: 'aparts',
+  options: {
+    actions: [
+      {
+        name: 'Auto submit',
+        icon: 'flowbite:play-solid',
+        // UI wrapper for the built-in action button
+        //diff-add
+        customComponent: {
+          //diff-add
+          file: '@@/ActionBorder.vue',        // SFC path in your custom folder
+          //diff-add
+          meta: { color: '#94a3b8', radius: 10 } // free-form styling params
+          //diff-add
+        },
+        showIn: { list: true, showButton: true, showThreeDotsMenu: true },
+        action: async ({ recordId, adminUser }) => {
+          return { ok: true, successMessage: 'Auto submitted' };
+        }
+      }
+    ]
+  }
+}
+```
+
+Use this minimal wrapper component to add a border/rounding around the default action UI while keeping the action logic intact. 
+Keep the `<slot />` (that's where AdminForth renders the default button) and emit `callAction` to trigger the handler when the wrapper is clicked.
+
+```ts title="./custom/ActionBorder.vue"
+<template>
+  <!-- Keep the slot: AdminForth renders the default action button/icon here -->
+  <!-- Emit `callAction` to trigger the action when the wrapper is clicked -->
+  <div :style="styleObj" @click="emit('callAction')">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ meta?: { color?: string; radius?: number; padding?: number } }>();
+const emit = defineEmits<{ (e: 'callAction', payload?: unknown): void }>();
+
+const styleObj = computed(() => ({
+  display: 'inline-block',
+  border: `1px solid ${props.meta?.color ?? '#e5e7eb'}`,
+  borderRadius: (props.meta?.radius ?? 8) + 'px',
+  padding: (props.meta?.padding ?? 2) + 'px',
+}));
+</script>
 ```
\ No newline at end of file

From 41eea768aa702cd5824b7073d1791a716cd1ad1a Mon Sep 17 00:00:00 2001
From: Maksym Pipkun <maxcim1077@gmail.com>
Date: Tue, 26 Aug 2025 10:33:30 +0300
Subject: [PATCH 7/8] fix: update customComponent file handling to support
 string type

---
 adminforth/modules/codeInjector.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adminforth/modules/codeInjector.ts b/adminforth/modules/codeInjector.ts
index b13241b68..e6ba32993 100644
--- a/adminforth/modules/codeInjector.ts
+++ b/adminforth/modules/codeInjector.ts
@@ -456,7 +456,7 @@ class CodeInjector implements ICodeInjector {
         const cc = action.customComponent;
         if (!cc) return;
       
-        const file = cc.file;
+        const file = (typeof cc === 'string') ? cc : cc.file;
         if (!file) {
           throw new Error('customComponent.file is missing for action: ' + JSON.stringify({ id: action.id, name: action.name }));
         }

From 28d3d048a19ab966536e92fb182e0a0edbe3f43d Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Thu, 16 Oct 2025 14:00:37 +0300
Subject: [PATCH 8/8] docs: remove already existing docs in next branch

---
 .../tutorial/07-Plugins/02-TwoFactorsAuth.md  | 240 ------------------
 1 file changed, 240 deletions(-)

diff --git a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
index f3dd718c0..e4473fb6f 100644
--- a/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
+++ b/adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md
@@ -206,243 +206,3 @@ plugins: [
 ],
 ...
 ```
-
-## Request 2FA on custom Actions
-
-You might want to to allow to call some custom critical/money related actions with additional 2FA approval. This eliminates risk that user cookies might be stolen by some virous/doorway software after login.
-
-To do it you first need to create custom component which will call `window.adminforthTwoFaModal.getCode(cb?)` frontend API exposed by this plugin. This is awaitable call wich shows 2FA popup and asks user to enter a code.
-
-```ts title='/custom/RequireTwoFaGate.vue'
-<template>
-  <div class="contents" @click.stop.prevent="onClick">
-    <slot />  <!-- render action defgault contend - button/icon -->
-  </div>
-</template>
-
-<script setup lang="ts">
-  const emit = defineEmits<{ (e: 'callAction', payload?: any): void }>();
-  const props = defineProps<{ disabled?: boolean; meta?: Record<string, any> }>();
-
-  async function onClick() {
-    if (props.disabled) return;
-  
-    const code = await window.adminforthTwoFaModal.getCode();  // this will ask user to enter code
-    emit('callAction', { code }); // then we pass this code to action (from fronted to backend)
-  }
-  </script>
-```
-
-Now we need to read code entered on fronted on backend and verify that is is valid and not expired, on backend action handler:
-
-```ts title='/adminuser.ts'
-options: {
-  actions: [
-    {
-      name: 'Auto submit',
-      icon: 'flowbite:play-solid',
-      allowed: () => true,
-      action: async ({ recordId, adminUser, adminforth, extra }) => {
-        //diff-add
-        const code = extra?.code
-        //diff-add
-        if (!code) {
-          //diff-add
-          return { ok: false, error: 'No TOTP code provided' };
-        //diff-add
-        }
-        //diff-add
-        const t2fa = adminforth.getPluginByClassName<TwoFactorsAuthPlugin>('TwoFactorsAuthPlugin');
-        //diff-add
-        const result = await t2fa.verify(code, { adminUser });
-
-        //diff-add
-        if (!result?.ok) {
-          //diff-add
-          return { ok: false, error: result?.error ?? 'TOTP code is invalid' };
-          //diff-add
-        }
-        //diff-add
-        await adminforth
-        //diff-add
-          .getPluginByClassName<AuditLogPlugin>('AuditLogPlugin')
-          //diff-add
-          .logCustomAction({
-            //diff-add
-            resourceId: 'aparts',
-            //diff-add
-            recordId: null,
-            //diff-add
-            actionId: 'visitedDashboard',
-            //diff-add
-            oldData: null,
-            //diff-add
-            data: { dashboard: 'main' },
-            //diff-add
-            user: adminUser,
-            //diff-add
-          });
-
-          //your critical action logic 
-      
-        return { ok: true, successMessage: 'Auto submitted' };
-      },
-      showIn: { showButton: true, showThreeDotsMenu: true, list: true },
-      //diff-add
-      customComponent: '@@/RequireTwoFaGate.vue',
-    },
-  ],
-}
-```
-
-## Request 2FA from custom components
-
-Imagine you have some button which does some API call
-
-```ts
-<template>
-  <Button @click="callAdminAPI">Call critical API</Button>
-</template>
-  
-
-<script setup lang="ts">
-import { callApi } from '@/utils';
-import adminforth from '@/adminforth';
-
-async function callAdminAPI() {
-  const code = await window.adminforthTwoFaModal.getCode();
-
-  const res = await callApi({
-    path: '/myCriticalAction',
-    method: 'POST',
-    body: { param: 1 },
-  });
-}
-</script>
-```
-
-On backend you have simple express api
-
-```ts
-app.post(`${ADMIN_BASE_URL}/myCriticalAction`,
-  admin.express.authorize(
-    async (req: any, res: any) => {
-
-      // ... your critical logic ...
-
-      return res.json({ ok: true, successMessage: 'Action executed' });
-    }
-  )
-);
-```
-
-You might want to protect this call with a TOTP code. To do it, we need to make this change
-
-```ts
-<template>
-  <Button @click="callAdminAPI">Call critical API</Button>
-</template>
-  
-
-<script setup lang="ts">
-import { callApi } from '@/utils';
-import adminforth from '@/adminforth';
-
-async function callAdminAPI() {
-  const code = await window.adminforthTwoFaModal.getCode();
-
-  // diff-remove
-  const res = await callApi({
-  // diff-remove
-    path: '/myCriticalAction',
-  // diff-remove
-    method: 'POST',
-  // diff-remove
-    body: { param: 1 },
-  // diff-remove
-  });
-
-  // diff-add
-  const res = await callApi({
-  // diff-add
-    path: '/myCriticalAction',
-  // diff-add
-    method: 'POST',
-  // diff-add
-    body: { param: 1, code: String(code) },
-  // diff-add
-  });
-
-  // diff-add
-  if (!res?.ok) {
-  // diff-add
-    adminforth.alert({ message: res.error, variant: 'danger' });
-  // diff-add
-  }
-}
-</script>
-
-```
-
-And oin API call we need to verify it:
-
-
-```ts
-app.post(`${ADMIN_BASE_URL}/myCriticalAction`,
-  admin.express.authorize(
-    async (req: any, res: any) => {
-
-      // diff-remove
-      // ... your critical logic ...
-
-      // diff-remove
-      return res.json({ ok: true, successMessage: 'Action executed' });
-
-      // diff-add
-      const { adminUser } = req;
-      // diff-add
-      const { param, code } = req.body ?? {};
-      // diff-add
-      const token = String(code ?? '').replace(/\D/g, '');
-      // diff-add
-      if (token.length !== 6) {
-      // diff-add
-        return res.status(401).json({ ok: false, error: 'TOTP must be 6 digits' });
-      // diff-add
-      }
-      // diff-add
-      const t2fa = admin.getPluginByClassName<TwoFactorsAuthPlugin>('TwoFactorsAuthPlugin');
-      // diff-add
-      const verifyRes = await t2fa.verify(token, { adminUser });
-      // diff-add
-      if (!('ok' in verifyRes)) {
-      // diff-add
-        return res.status(400).json({ ok: false, error: verifyRes.error || 'Wrong or expired OTP code' });
-      // diff-add
-      }
-      // diff-add
-      await admin.getPluginByClassName<AuditLogPlugin>('AuditLogPlugin').logCustomAction({
-      // diff-add
-        resourceId: 'aparts',
-      // diff-add
-        recordId: null,
-      // diff-add
-        actionId: 'myCriticalAction',
-      // diff-add
-        oldData: null,
-      // diff-add
-        data: { param },
-      // diff-add
-        user: adminUser,
-      // diff-add
-      });
-
-      // diff-add
-      // ... your critical logic ...
-
-      // diff-add
-      return res.json({ ok: true, successMessage: 'Action executed' });
-    }
-  )
-);
-```