feat: add custom Save button injection for create/edit pages and update documentation

Author: NoOne7135

adminforth/commands/createCustomComponent/main.js

@@ -188,6 +188,9 @@ 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', value: 'saveButton' }, new Separator()]
+        : []),
       { name: '⬆️ Before Breadcrumbs', value: 'beforeBreadcrumbs' },
       { name: '➡️ Before Action Buttons', value: 'beforeActionButtons' },
       { name: '⬇️ After Breadcrumbs', value: 'afterBreadcrumbs' },
@@ -207,13 +210,15 @@ async function handleCrudPageInjectionCreation(config, resources) {
     },
   });
 
-  const isThin = await select({
-    message: 'Will this component be thin enough to fit on the same page with list (so list will still shrink)?',
-    choices: [
-      { name: 'Yes', value: true },
-      { name: 'No', value: false },
-    ],
-  });
+  const isThin = crudType === 'list'
+    ? await select({
+        message: 'Will this component be thin enough to fit on the same page with list (so list will still shrink)?',
+        choices: [
+          { name: 'Yes', value: true },
+          { name: 'No', value: false },
+        ],
+      })
+    : false;
   const formattedAdditionalName = additionalName
     ? additionalName[0].toUpperCase() + additionalName.slice(1)
     : '';

adminforth/commands/createCustomComponent/templates/customCrud/saveButton.vue.hbs

@@ -0,0 +1,28 @@
+<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">Saving…</span>
+    <span v-else>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>
+
+<style scoped>
+</style>

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

@@ -440,6 +440,78 @@ 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,6 +353,19 @@ 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`)

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

@@ -227,7 +227,7 @@ To do it, first, create frontend custom component which wraps and intercepts cli
   async function onClick() {
     if (props.disabled) return;
 
-    const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();  // this will ask user to enter code
+  const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();  // this will ask user to enter code
     emit('callAction', { verificationResult }); // then we pass this verification result to action (from fronted to backend)
   }
 </script>
@@ -303,6 +303,74 @@ 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.
+
+Frontend (custom Save button example):
+
+```vue
+<template>
+  <button :disabled="disabled || saving || !isValid" @click="onClick">Save</button>
+  <!-- The plugin injects TwoFAModal globally, exposing window.adminforthTwoFaModal -->
+</template>
+
+<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 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 } });
+  }
+}
+</script>
+```
+
+Backend (resource hook verification):
+
+```ts
+// Inside resource config
+hooks: {
+  edit: {
+    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,
+      });
+      if (!('ok' in verifyRes) || verifyRes.ok !== true) {
+        return { ok: false, error: verifyRes?.error || 'Two-factor authentication failed' };
+      }
+      return { ok: true };
+    },
+  },
+}
+```
+
+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 server validates it in `beforeSave` with access to `extra.cookies` and the `adminUser`.
+
 ## Request 2FA from custom components
 
 Imagine you have some button which does some API call
@@ -360,7 +428,7 @@ import adminforth from '@/adminforth';
 
 async function callAdminAPI() {
   // diff-add
-  const verificationResult = await window.adminforthTwoFaModal.getCode();
+  const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();
 
   const res = await callApi({
     path: '/myCriticalAction',

adminforth/modules/configValidator.ts

@@ -860,22 +860,32 @@ export default class ConfigValidator implements IConfigValidator {
       });
 
       // if pageInjection is a string, make array with one element. Also check file exists
+      // Validate page-specific allowed injection keys
       const possiblePages = ['list', 'show', 'create', 'edit'];
+      const allowedInjectionsByPage: Record<string, string[]> = {
+        list: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'customActionIcons', 'tableBodyStart'],
+        show: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems'],
+        edit: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'saveButton'],
+        create: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'saveButton'],
+      };
 
       if (options.pageInjections) {
 
-        Object.entries(options.pageInjections).map(([key, value]) => {
-          if (!possiblePages.includes(key)) {
-            const similar = suggestIfTypo(possiblePages, key);
-            errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${key}", allowed keys are ${possiblePages.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+        Object.entries(options.pageInjections).map(([pageKey, value]) => {
+          if (!possiblePages.includes(pageKey)) {
+            const similar = suggestIfTypo(possiblePages, pageKey);
+            errors.push(`Resource "${res.resourceId}" has invalid pageInjection page "${pageKey}", allowed pages are ${possiblePages.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+            return;
           }
 
-          Object.entries(value).map(([injection, target]) => {
-            if (ConfigValidator.PAGE_INJECTION_KEYS.includes(injection)) {
-              options.pageInjections[key][injection] = this.validateAndListifyInjectionNew(options.pageInjections[key], injection, errors);
+          const allowedForThisPage = allowedInjectionsByPage[pageKey];
+
+          Object.entries(value).map(([injection, _target]) => {
+            if (allowedForThisPage.includes(injection)) {
+              this.validateAndListifyInjection(options.pageInjections[pageKey], injection, errors);
             } else {
-              const similar = suggestIfTypo(ConfigValidator.PAGE_INJECTION_KEYS, injection);
-              errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${ConfigValidator.PAGE_INJECTION_KEYS.join(', ')} ${similar ? `Did you mean "${similar}"?` : ''}`);
+              const similar = suggestIfTypo(allowedForThisPage, injection);
+              errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}" for page "${pageKey}", supported keys are ${allowedForThisPage.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
             }
           });
 

adminforth/spa/src/components/ThreeDotsMenu.vue

@@ -82,6 +82,9 @@ import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
+import { ref, type ComponentPublicInstance } from 'vue';
+import type { AdminForthBulkActionCommon, AdminForthComponentDeclarationFull } from '@/types/Common';
+import type { AdminForthActionInput } from '@/types/Back';
 
 
 const route = useRoute();

adminforth/spa/src/views/CreateView.vue

@@ -18,8 +18,25 @@
         {{ $t('Cancel') }}
       </button>
 
+      <!-- Custom Save Button injection -->
+      <component
+        v-if="createSaveButtonInjection"
+        :is="getCustomComponent(createSaveButtonInjection)"
+        :meta="createSaveButtonInjection.meta"
+        :record="record"
+        :resource="coreStore.resource"
+        :adminUser="coreStore.adminUser"
+        :saving="saving"
+        :validating="validating"
+        :isValid="isValid"
+        :disabled="saving || (validating && !isValid)"
+        :saveRecord="saveRecord"
+      />
+      
+      <!-- Default Save Button fallback -->
       <button  
-        @click="saveRecord"
+        v-else
+        @click="() => saveRecord()"
         class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-lightCreateViewSaveButtonText focus:outline-none bg-lightCreateViewButtonBackground rounded border border-lightCreateViewButtonBorder hover:bg-lightCreateViewButtonBackgroundHover hover:text-lightCreateViewSaveButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightCreateViewButtonFocusRing dark:focus:ring-darkCreateViewButtonFocusRing dark:bg-darkCreateViewButtonBackground dark:text-darkCreateViewSaveButtonText dark:border-darkCreateViewButtonBorder dark:hover:text-darkCreateViewSaveButtonTextHover dark:hover:bg-darkCreateViewButtonBackgroundHover disabled:opacity-50 gap-1"
         :disabled="saving || (validating && !isValid)"
       > 
@@ -105,6 +122,13 @@ const coreStore = useCoreStore();
 
 const { t } = useI18n();
 
+const createSaveButtonInjection = computed<AdminForthComponentDeclarationFull | null>(() => {
+  const raw: any = coreStore.resourceOptions?.pageInjections?.create?.saveButton as any;
+  if (!raw) return null;
+  const item = Array.isArray(raw) ? raw[0] : raw;
+  return item as AdminForthComponentDeclarationFull;
+});
+
 const initialValues = ref({});
 
 const readonlyColumns = ref([]);
@@ -153,7 +177,7 @@ onMounted(async () => {
   initThreeDotsDropdown();
 });
 
-async function saveRecord() {
+async function saveRecord(opts?: { confirmationResult?: any }) {
   if (!isValid.value) {
     validating.value = true;
     return;
@@ -167,6 +191,9 @@ async function saveRecord() {
     body: {
       resourceId: route.params.resourceId,
       record: record.value,
+      meta: {
+        ...(opts?.confirmationResult ? { confirmationResult: opts.confirmationResult } : {}),
+      },
     },
   });
   if (response?.error && response?.error !== 'Operation aborted by hook') {