feat: implement save interceptors for create/edit operations with 2FA verification

Author: NoOne7135

adminforth/commands/createCustomComponent/main.js

@@ -188,9 +188,6 @@ async function handleCrudPageInjectionCreation(config, resources) {
   const injectionPosition = await select({
     message: 'Where exactly do you want to inject the component?',
     choices: [
-      ...(crudType === 'create' || crudType === 'edit'
-        ? [{ name: '💾 Save button on create/edit page', value: 'saveButton' }, new Separator()]
-        : []),
       { name: '⬆️ Before Breadcrumbs', value: 'beforeBreadcrumbs' },
       { name: '➡️ Before Action Buttons', value: 'beforeActionButtons' },
       { name: '⬇️ After Breadcrumbs', value: 'afterBreadcrumbs' },

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -513,78 +513,6 @@ beforeActionButtons: [
 
 ## List table custom
 
-## Create/Edit custom Save button
-
-You can replace the default Save button on the create and edit pages with your own Vue component.
-
-Supported locations:
-- `pageInjections.create.saveButton`
-- `pageInjections.edit.saveButton`
-
-Example configuration:
-
-```ts title="/resources/apartments.ts"
-{
-  resourceId: 'aparts',
-  ...
-  options: {
-    pageInjections: {
-      create: {
-        // String shorthand
-        saveButton: '@@/SaveBordered.vue',
-      },
-      edit: {
-        // Object form (lets you pass meta later, if needed)
-        saveButton: { file: '@@/SaveBordered.vue' },
-      }
-    }
-  }
-}
-```
-
-Minimal example of a custom save button component:
-
-```vue title="/custom/SaveBordered.vue"
-<template>
-  <button
-    class="px-4 py-2 border border-blue-500 text-blue-600 rounded hover:bg-blue-50 disabled:opacity-50"
-    :disabled="props.disabled || props.saving || !props.isValid"
-    @click="props.saveRecord()"
-  >
-    <span v-if="props.saving">{{$t('Saving…')}}</span>
-    <span v-else>{{$t('Save')}}</span>
-  </button>
-  
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  record: any
-  resource: any
-  adminUser: any
-  meta: any
-  saving: boolean
-  validating: boolean
-  isValid: boolean
-  disabled: boolean
-  saveRecord: () => Promise<void>
-}>();
-</script>
-```
-
-Notes:
-- Your component fully replaces the default Save button in the page header.
-- The `saveRecord()` prop triggers the standard AdminForth save flow. Call it on click.
-- `saving`, `validating`, `isValid`, and `disabled` reflect the current form state.
-- If no `saveButton` is provided, the default button is shown.
-
-Scaffolding via CLI: you can generate a ready-to-wire component and auto-update the resource config using the interactive command:
-
-```bash
-adminforth component
-# Choose: CRUD page injections → (create|edit) → Save button
-```
-
 ## Global Injections
 
 You have opportunity to inject custom components to the global layout. For example, you can add a custom items into user menu

adminforth/documentation/docs/tutorial/06-CLICommands.md

@@ -353,21 +353,6 @@ Generated example:
 custom/OrderShowBottomExportButton.vue
 ```
 
-Special position for create/edit:
-- `saveButton` — replaces the default Save button at the top bar.
-
-Example usage via interactive flow:
-```bash
-adminforth component
-# → CRUD Page Injections
-# → (create | edit)
-# → Save button
-```
-
-Your generated component will receive props documented in Page Injections → Create/Edit custom Save button. At minimum, call `props.saveRecord()` on click and respect `props.saving`, `props.isValid`, and `props.disabled`.
-
----
-
 #### 🔐 Login Page Injections (`login`)
 
 Places a component before or after the login form.

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

@@ -328,41 +328,44 @@ options: {
 
 ### Request 2FA for create/edit (secure save gating)
 
-To protect create and edit operations, collect the result of the 2FA modal on the frontend and send it along with the save payload. The server must verify it before writing changes.
+To protect create and edit operations, use a Save Interceptor injected on the page to gate the save with 2FA, and forward the result to the backend for verification. This avoids wrapping the Save button and works with the default UI.
 
-Frontend (custom Save button example):
+Frontend (Save Interceptor component injected via pageInjections):
 
-```vue
-<template>
-  <button :disabled="disabled || saving || !isValid" @click="onClick">Save</button>
-  <!-- The plugin injects TwoFAModal globally, exposing window.adminforthTwoFaModal -->
-</template>
+```vue title='/custom/SaveInterceptor.vue'
+<script setup>
+import { useAdminforth } from '@/adminforth';
 
-<script setup lang="ts">
-const props = defineProps<{
-  disabled: boolean;
-  saving: boolean;
-  isValid: boolean;
-  // saveRecord accepts optional meta with confirmationResult
-  saveRecord: (opts?: { confirmationResult?: any }) => Promise<void>;
-  meta?: any;
-}>();
-
-async function onClick() {
-  if (props.disabled || props.saving || !props.isValid) return;
+const { registerSaveInterceptor } = useAdminforth();
+
+registerSaveInterceptor(async ({ action, values, resource }) => {
+  // action is 'create' or 'edit'
   const modal = (window as any)?.adminforthTwoFaModal;
   if (modal?.get2FaConfirmationResult) {
-    const confirmationResult = await modal.get2FaConfirmationResult(undefined, props.meta?.twoFaTitle || 'Confirm to save changes');
-    await props.saveRecord({ confirmationResult });
-  } else {
-    const code = window.prompt('Enter your 2FA code to proceed');
-    if (!code) return;
-    await props.saveRecord({ confirmationResult: { mode: 'totp', result: code } });
+    const confirmationResult = await modal.get2FaConfirmationResult(undefined, 'Confirm to save changes');
+    if (!confirmationResult) return { ok: false, error: '2FA cancelled' };
+    // Pass data to backend; the view will forward extra.confirmationResult to meta.confirmationResult
+    return { ok: true, extra: { confirmationResult } };
   }
-}
+  return { ok: false, error: '2FA code is required' };
+});
 </script>
+
+<template></template>
 ```
 
+Resource injection (edit/create):
+
+```ts
+options: {
+  pageInjections: {
+    edit: { bottom: [{ file: '@@/SaveInterceptor.vue' }] },
+    create: { bottom: [{ file: '@@/SaveInterceptor.vue' }] },
+  }
+}
+```
+> Note: You can use all injection, not only bottom
+
 Backend (resource hook verification):
 
 ```ts
@@ -372,17 +375,37 @@ hooks: {
     beforeSave: async ({ adminUser, adminforth, extra }) => {
       const t2fa = adminforth.getPluginByClassName('TwoFactorsAuthPlugin');
       const confirmationResult = extra?.body?.meta?.confirmationResult;
+
+      if (!confirmationResult) {
+        return { ok: false, error: 'Two-factor authentication confirmation result is missing' };
+      }
+      const verifyRes = await t2fa.verify(confirmationResult, {
+        adminUser,
+        userPk: adminUser.pk,
+        cookies: extra?.cookies,
+      });
+      if (!verifyRes || 'error' in verifyRes) {
+        return { ok: false, error: verifyRes?.error || '2FA verification failed' };
+      }
+      return { ok: true };
+    },
+  },
+  create: {
+    beforeSave: async ({ adminUser, adminforth, extra }) => {
+      const t2fa = adminforth.getPluginByClassName('TwoFactorsAuthPlugin');
+      const confirmationResult = extra?.body?.meta?.confirmationResult;
+
       if (!confirmationResult) {
         return { ok: false, error: 'Two-factor authentication confirmation result is missing' };
       }
-      const cookies = extra?.cookies;
+
       const verifyRes = await t2fa.verify(confirmationResult, {
         adminUser,
         userPk: adminUser.pk,
-        cookies,
+        cookies: extra?.cookies,
       });
-      if (!('ok' in verifyRes) || verifyRes.ok !== true) {
-        return { ok: false, error: verifyRes?.error || 'Two-factor authentication failed' };
+      if (!verifyRes || 'error' in verifyRes) {
+        return { ok: false, error: verifyRes?.error || '2FA verification failed' };
       }
       return { ok: true };
     },
@@ -391,7 +414,7 @@ hooks: {
 ```
 
 This approach ensures 2FA cannot be bypassed by calling the API directly:
-- The client collects verification via the modal and forwards it under `meta.confirmationResult`.
+- The client collects verification via the Save Interceptor and forwards it under `meta.confirmationResult`.
 - The server validates it in `beforeSave` with access to `extra.cookies` and the `adminUser`.
 
 ### Request 2FA from custom components

adminforth/modules/configValidator.ts

@@ -878,8 +878,8 @@ export default class ConfigValidator implements IConfigValidator {
       const allowedInjectionsByPage: Record<string, string[]> = {
         list: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'beforeActionButtons', 'bottom', 'threeDotsDropdownItems', 'customActionIcons', 'tableBodyStart', 'tableRowReplace'],
         show: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems'],
-        edit: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'saveButton'],
-        create: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'saveButton'],
+        edit: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems'],
+        create: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems'],
       };
 
       if (options.pageInjections) {

adminforth/spa/src/adminforth.ts

@@ -19,6 +19,7 @@ class FrontendAPI implements FrontendAPIInterface {
   public modalStore:any
   public filtersStore:any  
   public coreStore:any
+  private saveInterceptors: Record<string, Array<(ctx: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>>> = {};
 
   public list: {
     refresh(): Promise<{ error? : string }>;
@@ -84,6 +85,49 @@ class FrontendAPI implements FrontendAPIInterface {
     }
   }
 
+  registerSaveInterceptor(
+    handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>,
+  ): void {
+    const rid = router.currentRoute.value?.params?.resourceId as string;
+    if (!rid) {
+      return;
+    }
+    if (!this.saveInterceptors[rid]) {
+      this.saveInterceptors[rid] = [];
+    }
+    this.saveInterceptors[rid].push(handler);
+  }
+
+  async runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: any }>{
+    const list = this.saveInterceptors[params.resourceId] || [];
+    const aggregatedExtra: Record<string, any> = {};
+    for (const fn of list) {
+      try {
+        const res = await fn(params);
+        if (typeof res !== 'object' || typeof res.ok !== 'boolean') {
+          return { ok: false, error: 'Invalid interceptor return value' };
+        }
+        if (!res.ok) { 
+          return { ok: false, error: res.error ?? 'Interceptor failed' };
+        }
+        if (res.extra) {
+          Object.assign(aggregatedExtra, res.extra);
+        }
+      } catch (e: any) {
+        return { ok: false, error: e?.message || String(e) };
+      }
+    }
+    return { ok: true, extra: aggregatedExtra };
+  }
+
+  clearSaveInterceptors(resourceId?: string): void {
+    if (resourceId) {
+      delete this.saveInterceptors[resourceId];
+    } else {
+      this.saveInterceptors = {};
+    }
+  }
+
   confirm(params: ConfirmParams): Promise<boolean> {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
@@ -180,5 +224,15 @@ export function initFrontedAPI() {
   api.filtersStore = useFiltersStore();
 }
 
+export function useAdminforth() {
+  const api = frontendAPI as FrontendAPI;
+  return {
+    registerSaveInterceptor: (handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => Promise<{ ok: boolean; error?: string | null; }>, resourceId?: string) => api.registerSaveInterceptor(handler, resourceId),
+    runSaveInterceptors: (params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => api.runSaveInterceptors(params),
+    clearSaveInterceptors: (resourceId?: string) => api.clearSaveInterceptors(resourceId),
+    api,
+  };
+}
+
 
 export default frontendAPI;