Merge pull request #539 from devforth/check-captcha-in-live-demo

Check captcha in live demo

Author: SerVitasik

adminforth/documentation/docs/tutorial/09-Advanced/01-plugin-development.md

@@ -597,4 +597,150 @@ handler: async (a) => {
   const resp = await this.options.adapter.complete(content, ['.'], this.options.expert?.maxTokens || 50);
   ...
 }
-``` 
+``` 
+## Providing a frontend API
+If a plugin needs to provide an external frontend API so user code or other plugins can interact with it, you can create a .ts file or a global Pinia store (if you want to have some global variables or use plugin modals) and then re-use it in your frontend logic. For example:
+
+1) Create new `./custom/useChatGptApi.ts` and `./custom/customModal` files
+```text
+af-plugin-chatgpt/
+├── custom
+│   └── tsconfig.json
+|   └── completionInput.vue
+//diff-add
+|   └── useChatGptApi.ts
+//diff-add
+|   └── customModal.vue
+├── index.ts
+├── package.json
+├── tsconfig.json
+└── types.ts
+```
+
+2) Write your custom logic:
+
+```ts title="./custom/useChatGptApi.ts"
+import { ref } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import { defineStore } from 'pinia'
+
+export const useChatGptApi = defineStore('chatGptApi', () => {
+  const isCustomModalOpened = ref(false);
+  const customModalData = ref({})
+  
+  function openCustomModal(modalData) {
+    customModalData.value = modalData;
+    isCustomModalOpened.value = true;
+  }
+
+  function closeCustomModal() {
+    isCustomModalOpened.value = false;
+  }
+
+  async function doComplete(pluginInstanceId, record, columnName, textBeforeCursor) {
+    const res = await callAdminForthApi({
+      path: `/plugin/${pluginInstanceId}/doComplete`,
+      method: 'POST',
+      body: {
+        record: { ...record, [columnName]: textBeforeCursor },
+      },
+    });
+
+    return res.completion;
+  }
+
+  return {
+    isCustomModalOpened,
+    customModalData,
+    openCustomModal,
+    closeCustomModal,
+    doComplete
+  }
+```
+
+3) If you want your plugin to have its own modal API, then first of all you'll need to inject this component somewhere so you can open it:
+
+```ts title="./index.ts"
+
+async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
+
+...
+
+  // Global API injection: exposes openCustomModal(...) to open chatGptModal from anywhere
+  (adminforth.config.customization.globalInjections.header).push({
+    file: this.componentPath('customModal.vue'),
+    meta: {
+      pluginInstanceId: this.pluginInstanceId,
+    }
+  });
+
+...
+
+}
+
+```
+
+
+and:
+
+```html title="customModal.vue"
+<template>
+  <!-- Hidden component that registers a global function to open job info modal -->
+  <Modal 
+    ref="dialogRef" 
+    removeFromDomOnClose 
+    class="p-4"
+    :beforeCloseFunction="() => { chatGpt.closeCustomModal(); }"
+  >
+    <div>
+      ***Modal content***
+      {{ chatGpt.customModalData }}
+    </div
+  </Modal>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+  import { Modal } from '@/afcl';
+  import { useChatGptApi } from './useChatGptApi';
+
+  const chatGpt = useChatGptApi();
+  const dialogRef = ref<any>(null);
+
+  const props = defineProps<{
+    meta: {
+      pluginInstanceId: string;
+    }
+  }>();
+
+  watch(() => chatGpt.isCustomModalOpened, (newVal) => {
+    if (newVal) {
+      dialogRef.value?.open?.();
+    } else {
+      dialogRef.value?.close?.();
+    }
+  });
+</script>
+
+
+```
+
+4) Re-use this api in your component:
+
+```html
+  <template>
+    ...
+  </template>
+
+  <script setup>
+    //diff-add
+    import { useChatGptApi } from '@/custom/plugins/ChatGptPlugin/useChatGptApi';
+    ...
+  </script>
+```
+
+### How to get the plugin file path from a custom component
+
+`ChatGptPlugin` is the class name that is defined inside `index.ts`.
+So if we want to access plugin files from a custom component, we should use the path:
+>`@/custom/plugins/*Plugin class name*/*File name*`

adminforth/spa/src/afcl/Select.vue

@@ -287,6 +287,7 @@ onMounted(() => {
   // Add scroll listeners if teleportToBody is true
   if (props.teleportToBody) {
     window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('resize', handleScroll);
   }
 });
 
@@ -349,6 +350,7 @@ onUnmounted(() => {
   // Remove scroll listeners if teleportToBody is true
   if (props.teleportToBody) {
     window.removeEventListener('scroll', handleScroll, true);
+    window.removeEventListener('resize', handleScroll);
   }
   if (searchDebounceHandle) {
     clearTimeout(searchDebounceHandle);

dev-demo/Taskfile.yaml

@@ -52,6 +52,7 @@ vars:
     - "adminforth-completion-adapter-google-gemini"
     - "adminforth-key-value-adapter-redis"
     - "adminforth-key-value-adapter-leveldb"
+    - "adminforth-image-generation-adapter-nano-banana"
 
 
 tasks:

live-demo/app/package.json

@@ -27,6 +27,8 @@
     "@adminforth/image-generation-adapter-openai": "^1.0.7",
     "@adminforth/image-vision-adapter-openai": "^1.0.1",
     "@adminforth/import-export": "^1.4.6",
+    "@adminforth/login-captcha": "^1.1.7",
+    "@adminforth/login-captcha-adapter-cloudflare": "^1.0.16",
     "@adminforth/rich-editor": "^1.6.14",
     "@adminforth/storage-adapter-amazon-s3": "^1.0.11",
     "@adminforth/text-complete": "^1.8.9",

live-demo/app/resources/users.ts

@@ -1,6 +1,8 @@
 import AdminForth, { AdminForthDataTypes, AdminForthResourceColumn } from 'adminforth';
 import ForeignInlineListPlugin from '@adminforth/foreign-inline-list';
 import { randomUUID } from 'crypto';
+import CaptchaAdapterCloudflare from '../../../adapters/adminforth-login-captcha-adapter-cloudflare/index.js';
+import CaptchaPlugin from '../../../plugins/adminforth-login-captcha/index.js';
 
 const blockDemoUsers = async ({ record, adminUser, resource }) => {
   if (adminUser.dbUser && adminUser.dbUser.role !== 'superadmin') {
@@ -26,6 +28,12 @@ export default {
     new ForeignInlineListPlugin({
       foreignResourceId: 'audit_logs',
     }),
+    new CaptchaPlugin({ 
+        captchaAdapter: new CaptchaAdapterCloudflare({
+        siteKey: `${process.env.CLOUDFLARE_SITE_KEY}`, // Replace with your site key
+        secretKey: `${process.env.CLOUDFLARE_SECRET_KEY}`, // Replace with your secret key
+      }),
+    }),
   ],
   columns: [
     {