Merge pull request #666 from devforth/next

Next

Author: SerVitasik

adminforth/documentation/docs/tutorial/03-Customization/02-customFieldRendering.md

@@ -583,6 +583,29 @@ list: '@/renderers/ZeroStylesRichText.vue',
 `ZeroStyleRichText` fits well for tasks like email templates preview fields.
 
 
+### Sensitive data blur
+
+For fields containing sensitive data (like passwords, API keys, tokens, or other confidential values), use the `SensitiveBlurCell` renderer. It blurs the value by default and reveals it on click.
+
+```ts title='./resources/anyResource.ts'
+  columns: [
+    ...
+    {
+      name: 'api_key',
+  //diff-add
+      components: {
+  //diff-add
+        show: '@/renderers/SensitiveBlurCell.vue',
+  //diff-add
+        list: '@/renderers/SensitiveBlurCell.vue',
+  //diff-add
+      },
+    ...
+```
+
+The renderer wraps the standard value output and adds a click-to-reveal blur effect. Clicking again hides the value.
+
+
 ### Custom filter component for square meters
 
 

adminforth/documentation/docs/tutorial/06-Adapters/02-oauth2-adapters.md

@@ -54,4 +54,12 @@ Supports login through Microsoft accounts including Azure AD, Office365, and Out
 pnpm i @adminforth/oauth-adapter-twitch
 ```
 
-Adds support for Twitch authentication, useful for streaming or creator-oriented platforms.
+Adds support for Twitch authentication, useful for streaming or creator-oriented platforms.
+
+## Clerk OAuth Adapter
+
+```bash
+pnpm i @adminforth/clerk-oauth-adapter
+```
+
+Enables sign-in via [Clerk](https://clerk.com/) — a hosted authentication platform with built-in user management, MFA, and social logins.

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',

adminforth/documentation/docs/tutorial/09-Plugins/11-oauth.md

@@ -476,6 +476,49 @@ plugins: [
 ]
 ```
 
+### Clerk Adapter
+
+Install Adapter:
+
+```bash
+pnpm install @adminforth/clerk-oauth-adapter --save
+```
+
+1. Go to the [Clerk Dashboard](https://dashboard.clerk.com) and open your application.
+2. In the left sidebar, go to **Configure** → **Developers** → **OAuth Applications**.
+3. Click **Add OAuth Application** and give it a name.
+4. Copy the **Client Secret** from the OAuth application creation modal.
+5. After copying, Clerk redirects you to the application page, where you can copy the **Client ID** and **Domain**.
+6. Add the credentials to your `.env` file:
+7. In **Redirect URLs**, add `https://your-domain/oauth/callback` and `http://localhost:3500/oauth/callback`. Include `baseUrl` when your AdminForth app uses it, for example `https://your-domain/base/oauth/callback`.
+8. In **Scopes**, check the **openid** checkbox.
+
+```bash
+CLERK_CLIENT_ID=your_clerk_client_id
+CLERK_CLIENT_SECRET=your_clerk_client_secret
+CLERK_DOMAIN=https://your-app.clerk.accounts.dev
+```
+
+Add the adapter to your plugin configuration:
+
+```typescript title="./resources/adminuser.ts"
+import AdminForthAdapterClerkOauth2 from '@adminforth/clerk-oauth-adapter';
+
+// ... existing resource configuration ...
+plugins: [
+  new OAuthPlugin({
+    adapters: [
+      ...
+      new AdminForthAdapterClerkOauth2({
+        clientID: process.env.CLERK_CLIENT_ID as string,
+        clientSecret: process.env.CLERK_CLIENT_SECRET as string,
+        domain: process.env.CLERK_DOMAIN as string,
+      }),
+    ],
+  }),
+]
+```
+
 ### Need custom provider?
 
 Just fork any existing adapter e.g. [Google](https://github.com/devforth/adminforth-oauth-adapter-google) and adjust it to your needs. 

adminforth/index.ts

@@ -499,7 +499,7 @@ class AdminForth implements IAdminForth {
 ║  💡 SOLUTION                                                               
 ║  Install the required package:                                             
 ║                                                                            
-║    ${doesUserHavePnpmLock ? `pnpm add @adminforth/connector-${connectorName}` : `npm install @adminforth/connector-${connectorName}`}                       ║
+║    ${doesUserHavePnpmLock ? `pnpm add @adminforth/connector-${connectorName}` : `npm install @adminforth/connector-${connectorName}`}
 ║                                                                            
 ╚════════════════════════════════════════════════════════════════════════════
       `);

adminforth/spa/src/renderers/SensitiveBlurCell.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="inline-flex items-center gap-1">
+    <div
+      class="overflow-hidden max-w-[200px] max-h-[20px] rounded-default"
+      :title="show ? $t('Click to hide') : $t('Click to show')"
+      @click="toggle"
+    >
+      <span
+        class="cursor-pointer select-none transition-all duration-200 text-lightListTableText dark:text-darkListTableText"
+        :class="{
+          'blur-[7px] hover:blur-[5px] brightness-50 dark:brightness-150': !show,
+        }"
+      >
+        <ValueRenderer :column="column" :record="record" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import ValueRenderer from '@/components/ValueRenderer.vue';
+import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon;
+  record: any;
+  meta: any;
+  resource: AdminForthResourceCommon;
+  adminUser: AdminUser;
+}>();
+
+const show = ref(false);
+
+function toggle(event: MouseEvent) {
+  show.value = !show.value;
+  event.stopPropagation();
+}
+</script>

dev-demo/.gitignore

@@ -3,4 +3,5 @@ node_modules
 .sqlite
 .env
 db
-images/*
+images/*
+testdb/*

dev-demo/Taskfile.yaml

@@ -153,7 +153,7 @@ tasks:
             exit 0
           fi
 
-          CI=true pnpm add adminforth@latest --save-peer
+          CI=true PNPM_CONFIG_MINIMUM_RELEASE_AGE=0 PNPM_CONFIG_DANGEROUSLY_ALLOW_ALL_BUILDS=true pnpm add adminforth@latest --save-prefix='^' --save-peer
 
           git add package.json
           if [ -e pnpm-lock.yaml ]; then
@@ -230,4 +230,22 @@ tasks:
         vars:
           DIR: "{{.PLUGINS_DIR}}"
           REPOS:
-            ref: .PLUGINS
+            ref: .PLUGINS
+
+  update_adminforth_adapters:
+    desc: Update adminforth to latest in adapter repositories, commit, and push
+    cmds:
+      - task: update_adminforth_repos
+        vars:
+          DIR: "{{.ADAPTERS_DIR}}"
+          REPOS:
+            ref: .ADAPTERS
+
+  update_adminforth_connectors:
+    desc: Update adminforth to latest in connector repositories, commit, and push
+    cmds:
+      - task: update_adminforth_repos
+        vars:
+          DIR: "{{.CONNECTORS_DIR}}"
+          REPOS:
+            ref: .CONNECTORS

dev-demo/api.ts

@@ -2,6 +2,11 @@ import { Express, Response } from "express";
 import { Filters, IAdminForth, IAdminUserExpressRequest } from "adminforth";
 import * as z from "zod";
 import TwoFactorsAuthPlugin from "../plugins/adminforth-two-factors-auth/index.js";
+import LevelDBKeyValueAdapter from '../adapters/adminforth-key-value-adapter-leveldb/index.js';
+
+const levelDbAdapter = new LevelDBKeyValueAdapter({
+  dbPath: './testdb',
+});
 
 const DASHBOARD_CAR_SOURCES = [
   { resourceId: 'cars_sl', label: 'SQLite' },
@@ -184,7 +189,32 @@ export function initApi(app: Express, admin: IAdminForth) {
         const { adminUser } = _req;
         const t2fa = admin.getPluginByClassName<TwoFactorsAuthPlugin>('TwoFactorsAuthPlugin');
         const verifyResult = await t2fa.verifyAuto(adminUser);
-        res.json({ message: "2FA call received!" });
+        res.json({ message: "2FA call received!", verifyResult });
+      }
+    )
+  );
+  app.post(`${admin.config.baseUrl}/api/getLevelDbKeys/`,
+    admin.express.authorize(
+      async (_req: IAdminUserExpressRequest, res: Response) => {
+        console.log('Received getLevelDbKeys');
+        const { prefix } = _req.body;
+        const keys = await levelDbAdapter.listByPrefix(prefix, 100);
+        res.json({ keys });
+      }
+    )
+  );
+  app.post(`${admin.config.baseUrl}/api/addLevelDbKey/`,
+    admin.express.authorize(
+      async (_req: IAdminUserExpressRequest, res: Response) => {
+        console.log('Received addLevelDbKey');
+        const {key, value} = _req.body;
+        await levelDbAdapter.set(key, value);
+        // for (let i = 0; i < 100; i++) {
+        //   await levelDbAdapter.set(`clean=true||${new Date().toISOString()}||record_${i}`, `true`);
+        //   console.log(`Added record ${i}`);
+        //   await new Promise((resolve) => setTimeout(resolve, 100));
+        // }
+        res.json({ ok: true });
       }
     )
   );