feat: add CallActionWrapper component and integrate with action menus

Author: NoOne7135

adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md

@@ -205,4 +205,54 @@ plugins: [
         }),
 ],
 ...
-```
+```
+
+## 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' } },
+    },
+  ],
+}
+```

adminforth/modules/configValidator.ts

@@ -375,14 +375,18 @@ 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`);
       }
 
       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) {

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>

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>

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>

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();

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();