Merge pull request #547 from devforth/update-docs-fot-the-2fa

docs: update docs for the 2fa plugin

Author: yaroslav8765

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

@@ -283,7 +283,7 @@ But if you websocket doesn't work in you application, or you wan't to perform ve
 
 You might want to to allow to call some custom critical/money related actions with additional 2FA approval. This eliminates risks caused by user cookies theft by some virous/doorway software after login.
 
-To do it, first, create frontend custom component which wraps and intercepts click event to menu item, and in click handler do a call to `window.adminforthTwoFaModal.getCode(cb?)` frontend API exposed by this plugin. This is awaitable call wich shows 2FA popup and asks user to authenticate with 2nd factor (if passkey is enabled it will be suggested first, with ability to fallback to TOTP)
+To do it, first, create frontend custom component which wraps and intercepts click event to menu item, and in click handler do a call to `get2FaConfirmationResult` frontend API exposed by this plugin. This is awaitable call wich shows 2FA popup and asks user to authenticate with 2nd factor (if passkey is enabled it will be suggested first, with ability to fallback to TOTP)
 
 ```ts title='/custom/RequireTwoFaGate.vue'
 <template>
@@ -293,6 +293,9 @@ To do it, first, create frontend custom component which wraps and intercepts cli
 </template>
 
 <script setup lang="ts">
+  import { useTwoFactorsAuth } from '@/custom/plugins/TwoFactorsAuthPlugin/use2faApi.ts';
+
+  const { get2FaConfirmationResult } = useTwoFactorsAuth();
   const emit = defineEmits<{ (e: 'callAction', payload?: any): void }>();
   const props = defineProps<{ disabled?: boolean; meta?: Record<string, any> }>();
 
@@ -301,8 +304,7 @@ To do it, first, create frontend custom component which wraps and intercepts cli
       return;
     }
 
-    const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();  // this will ask user to enter code
-
+    const verificationResult = await get2FaConfirmationResult(); // this will ask user to enter code
     emit('callAction', { verificationResult }); // then we pass this verification result to action (from fronted to backend)
   }
 </script>
@@ -387,20 +389,19 @@ Frontend (Save Interceptor component injected via pageInjections):
 ```vue title='/custom/SaveInterceptor.vue'
 <script setup>
 import { useAdminforth } from '@/adminforth';
+import { useTwoFactorsAuth } from '@/custom/plugins/TwoFactorsAuthPlugin/use2faApi.ts';
 
+const { get2FaConfirmationResult } = useTwoFactorsAuth();
 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('Confirm to save changes');
-    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 } };
+  const confirmationResult = await get2FaConfirmationResult('Confirm to save changes');
+  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 } };
   else {
     throw new Error('No Two-Factor Authentication modal found, please ensure you have latest version of @adminforth/two-factors-auth installed and instantiated on resource');
   }
@@ -493,9 +494,12 @@ Imagine you have some button which does some API call
 
 <script setup lang="ts">
 import { callApi } from '@/utils';
+import { useTwoFactorsAuth } from '@/custom/plugins/TwoFactorsAuthPlugin/use2faApi.ts';
+
+const { get2FaConfirmationResult } = useTwoFactorsAuth();
 
 async function callAdminAPI() {
-  const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();
+  const verificationResult = await get2FaConfirmationResult();
 
   const res = await callApi({
     path: '/myCriticalAction',
@@ -534,12 +538,14 @@ You might want to protect this call with a second factor also. To do it, we need
 <script setup lang="ts">
 import { callApi } from '@/utils';
 import { useAdminforth } from '@/adminforth';
+import { useTwoFactorsAuth } from '@/custom/plugins/TwoFactorsAuthPlugin/use2faApi.ts';
 
+const { get2FaConfirmationResult } = useTwoFactorsAuth();
 const { alert } = useAdminforth();
 
 async function callAdminAPI() {
   // diff-add
-  const verificationResult = await window.adminforthTwoFaModal.get2FaConfirmationResult();
+  const verificationResult = await get2FaConfirmationResult();
 
   const res = await callApi({
     path: '/myCriticalAction',

dev-demo/custom/SystemTest.vue

@@ -41,8 +41,7 @@ const { alert } = useAdminforth();
 import adminforth  from '@/adminforth';
 import { useTwoFactorsAuth } from '@/custom/plugins/TwoFactorsAuthPlugin/use2faApi.ts';
 
-const twoFactorsAuth = useTwoFactorsAuth();
-
+  const { get2FaConfirmationResult } = useTwoFactorsAuth();
 const valueStart = ref()
 
 watch(valueStart, (newVal) => {
@@ -105,7 +104,7 @@ async function get2FaConfirmationResultWindow() {
 }
 
 async function get2FaConfirmationResultTwoFactorsAuth() {
-  const verificationResult = await twoFactorsAuth.get2FaConfirmationResult();  // this will ask user to enter code
+  const verificationResult = await get2FaConfirmationResult();  // this will ask user to enter code
   console.log('2FA verification result (twoFactorsAuth):', verificationResult);
 }
 </script>