refactor: enhance two-factor authentication error messages and clean up save interceptors

Author: NoOne7135

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

@@ -343,11 +343,13 @@ registerSaveInterceptor(async ({ action, values, resource }) => {
   const modal = (window as any)?.adminforthTwoFaModal;
   if (modal?.get2FaConfirmationResult) {
     const confirmationResult = await modal.get2FaConfirmationResult(undefined, 'Confirm to save changes');
-    if (!confirmationResult) return { ok: false, error: '2FA cancelled' };
+    if (!confirmationResult) {
+      return { ok: false, error: 'Two-factor authentication 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' };
+  return { ok: false, error: 'Two-factor authentication code is required' };
 });
 </script>
 
@@ -364,7 +366,7 @@ options: {
   }
 }
 ```
-> Note: You can use all injection, not only bottom
+> Note: You can use all injections, not only bottom
 
 Backend (resource hook verification):
 
@@ -374,27 +376,34 @@ hooks: {
   edit: {
     beforeSave: async ({ adminUser, adminforth, extra }) => {
       const t2fa = adminforth.getPluginByClassName('TwoFactorsAuthPlugin');
-      const confirmationResult = extra?.body?.meta?.confirmationResult;
+      if (!t2fa) {
+        return { ok: false, error: 'TwoFactorsAuthPlugin is not configured' };
+      }
 
+      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: false, error: verifyRes?.error || 'Two-factor verification failed' };
       }
       return { ok: true };
     },
   },
   create: {
     beforeSave: async ({ adminUser, adminforth, extra }) => {
       const t2fa = adminforth.getPluginByClassName('TwoFactorsAuthPlugin');
-      const confirmationResult = extra?.body?.meta?.confirmationResult;
+      if (!t2fa) {
+        return { ok: false, error: 'TwoFactorsAuthPlugin is not configured' };
+      }
 
+      const confirmationResult = extra?.body?.meta?.confirmationResult;
       if (!confirmationResult) {
         return { ok: false, error: 'Two-factor authentication confirmation result is missing' };
       }
@@ -405,7 +414,7 @@ hooks: {
         cookies: extra?.cookies,
       });
       if (!verifyRes || 'error' in verifyRes) {
-        return { ok: false, error: verifyRes?.error || '2FA verification failed' };
+        return { ok: false, error: verifyRes?.error || 'Two-factor verification failed' };
       }
       return { ok: true };
     },

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

@@ -98,7 +98,7 @@ class FrontendAPI implements FrontendAPIInterface {
     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 }>{
+  async runSaveInterceptors(params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }): Promise<{ ok: boolean; error?: string | null; extra?: object; }> {
     const list = this.saveInterceptors[params.resourceId] || [];
     const aggregatedExtra: Record<string, any> = {};
     for (const fn of list) {
@@ -227,7 +227,7 @@ export function initFrontedAPI() {
 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),
+    registerSaveInterceptor: (handler: (ctx: { action: 'create'|'edit'; values: any; resource: any; }) => Promise<{ ok: boolean; error?: string | null; extra?: object; }>) => api.registerSaveInterceptor(handler),
     runSaveInterceptors: (params: { action: 'create'|'edit'; values: any; resource: any; resourceId: string; }) => api.runSaveInterceptors(params),
     clearSaveInterceptors: (resourceId?: string) => api.clearSaveInterceptors(resourceId),
     api,

adminforth/spa/src/adminforth.ts

@@ -186,7 +186,7 @@ async function saveRecord() {
     if (interceptorsResult.error) showErrorTost(interceptorsResult.error);
     return;
   }
-  const interceptorConfirmationResult = interceptorsResult?.extra?.confirmationResult;
+  const interceptorConfirmationResult = interceptorsResult.extra?.confirmationResult;
   const response = await callAdminForthApi({
     method: 'POST',
     path: `/create_record`,

adminforth/spa/src/views/CreateView.vue

@@ -176,7 +176,7 @@ async function saveRecord() {
     if (interceptorsResult.error) showErrorTost(interceptorsResult.error);
     return;
   }
-  const interceptorConfirmationResult = interceptorsResult?.extra?.confirmationResult;
+  const interceptorConfirmationResult = interceptorsResult.extra?.confirmationResult;
   const updates: Record<string, any> = {};
   for (const key in record.value) {
     let columnIsUpdated = false;

adminforth/spa/src/views/EditView.vue

@@ -6,15 +6,15 @@ const { registerSaveInterceptor } = useAdminforth()
 registerSaveInterceptor(async ({ action, values, resource }) => {
   console.log('Custom Save Interceptor triggered:', { action, values, resource });
   const modal = window?.adminforthTwoFaModal;
-    if (modal?.get2FaConfirmationResult) {
-      const confirmationResult = await modal.get2FaConfirmationResult(
-        undefined,
-        'Confirm to save changes'
-      );
-      return { ok: true, extra: { confirmationResult } };
-    } else {
-      return { ok: false, error: '2FA code is required' }
-    }
+  if (modal?.get2FaConfirmationResult) {
+    const confirmationResult = await modal.get2FaConfirmationResult(
+      undefined,
+      'Confirm to save changes'
+    );
+    return { ok: true, extra: { confirmationResult } };
+  } else {
+    return { ok: false, error: '2FA code is required' }
+  }
 })
 </script>
 

dev-demo/custom/SaveInterceptor.vue

@@ -327,14 +327,6 @@ export default {
 
 
   *********************************************************************************/
-  hooks: {
-    edit: {
-      beforeSave: async ({ adminUser, adminforth, extra }) => verifyTwoFa({ adminUser, adminforth, extra }),
-    },
-    create: {
-      beforeSave: async ({ adminUser, adminforth, extra }) => verifyTwoFa({ adminUser, adminforth, extra }),
-    },
-  },
   options: {
     listPageSize: 12,
     allowedActions: {
@@ -343,20 +335,6 @@ export default {
       show: true,
       filter: true,
     },
-    pageInjections: {
-      edit: {
-        bottom: [
-          { file: '@@/SaveInterceptor.vue' },
-          { file: '@@/SaveInterceptorExtra.vue' },
-        ],
-      },
-      create: {
-        bottom: [
-          { file: '@@/SaveInterceptor.vue' },
-          { file: '@@/SaveInterceptorExtra.vue' },
-        ],
-      },
-    },
     actions: [
       {
         name: 'Approve Listing',
@@ -408,22 +386,4 @@ export default {
       }
     ],
   },
-} as AdminForthResourceInput;
-
-async function verifyTwoFa({ adminUser, adminforth, extra }: { adminUser: any, adminforth: any, extra: any }) {
-  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 };
-}
+} as AdminForthResourceInput;