adminforth 1.1.13 → 1.1.14

package/plugins/AccessControl/index.ts

@@ -0,0 +1,83 @@
+import { 
+  AdminForthResource, AdminForthClass, BeforeDataSourceRequestFunction,
+  AllowedActionsEnum,
+  BeforeSaveFunction
+} from "../../types/AdminForthConfig.js";
+import AdminForthPlugin from "../base.js";
+import { PluginOptions } from "./types.js";
+
+
+
+export default class AccessControlPlugin extends AdminForthPlugin {
+ 
+  options: PluginOptions;
+  adminforth: AdminForthClass;
+
+  constructor(options: PluginOptions) {
+    super(options, import.meta.url);
+    this.options = options;
+  }
+
+  static defaultError = 'Sorry, you do not have access to this resource.'
+
+
+  modifyResourceConfig(adminforth: AdminForthClass, resourceConfig: AdminForthResource) {
+    super.modifyResourceConfig(adminforth, resourceConfig);
+    this.adminforth = adminforth;
+
+    if (!resourceConfig.hooks) {
+      resourceConfig.hooks = {};
+    }
+
+    const checkAccess = async (adminUser: any, action: AllowedActionsEnum, meta: any) => {
+      const hasAccessOrError = await this.options.hasAccess(adminUser, action, meta);
+      if (hasAccessOrError === true) {
+        return { ok: true };
+      } else {
+        return { ok: false, error: hasAccessOrError || AccessControlPlugin.defaultError };
+      }
+    }
+
+    const bindHookCheck = (action: AllowedActionsEnum, hookName: string) => {
+      if (!resourceConfig.hooks[action]) {
+        resourceConfig.hooks[action] = {};
+      }
+      if (!resourceConfig.hooks[action][hookName]) {
+        resourceConfig.hooks[action][hookName] = [];
+      }
+      if (hookName === 'beforeDatasourceRequest') {
+        (resourceConfig.hooks[action][hookName] as Array<BeforeDataSourceRequestFunction>).unshift(
+          async ({adminUser, query}: {resource: AdminForthResource, adminUser: any, query: any}) => {
+            return checkAccess(adminUser, action, { query });
+          }
+        );
+      } else {
+        (resourceConfig.hooks[action][hookName] as Array<BeforeSaveFunction>).unshift(
+          async ({adminUser, record}: {resource: AdminForthResource, adminUser: any, record: any}) => {
+            return checkAccess(adminUser, action, { record });
+          }
+        );
+      }
+    }
+
+    // List check
+    bindHookCheck(AllowedActionsEnum.list, 'beforeDatasourceRequest');
+
+    // Show check
+    bindHookCheck(AllowedActionsEnum.show, 'beforeDatasourceRequest');
+
+    // Edit check
+    bindHookCheck(AllowedActionsEnum.edit, 'beforeDatasourceRequest');    
+
+    // create check
+    bindHookCheck(AllowedActionsEnum.create, 'beforeSave');
+
+    // edit check
+    bindHookCheck(AllowedActionsEnum.edit, 'beforeSave');
+
+    // delete check
+    bindHookCheck(AllowedActionsEnum.delete, 'beforeSave');
+
+    console.log('resourceConfig', resourceConfig);
+  }
+}

package/plugins/AccessControl/types.ts

@@ -0,0 +1,14 @@
+
+import { AllowedActionsEnum, AdminUser } from '../../types/AdminForthConfig.js';
+
+
+export type PluginOptions = {
+  /**
+   * Called to check if user has access to a page
+   * @param user - The user object
+   * @param page - The page to check access for
+   * @param meta - The meta object containing query for list/show or record for save/edit
+   * @returns true if user has access, false or a string with an error message
+   */
+  hasAccess: (user: AdminUser, page: AllowedActionsEnum, meta: any) => Promise<boolean | string>;
+}

package/plugins/ForeignInlineListPlugin/custom/InlineList.vue

@@ -208,6 +208,17 @@ async function getList() {
     }
   });
 
+  if (data.error) {
+    window.adminforth.alert({
+      message: data.error,
+      variant: 'danger',
+      timeout: 'unlimited',
+    });
+    rows.value = [];
+    totalRows.value = 0;
+    return;
+  }
+
   rows.value = data.data?.map(row => {
     row._primaryKeyValue = row[listResource.value.columns.find(c => c.primaryKey).name];
     return row;

package/plugins/ForeignInlineListPlugin/index.ts

@@ -23,7 +23,8 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
           return { error: `Resource ${this.options.foreignResourceId} not found` };
         }
         // exclude "plugins" key
-        const resourceCopy = { ...resource, plugins: undefined };
+        const resourceCopy = JSON.parse(JSON.stringify({ ...resource, plugins: undefined }));
+        
         if (this.options.modifyTableResourceConfig) {
           this.options.modifyTableResourceConfig(resourceCopy);
         }

package/servers/express.ts

@@ -157,7 +157,7 @@ class ExpressServer implements ExpressHttpServer {
         res.status(401).send('Unauthorized by AdminForth');
         return
       }
-      const adminforthUser = this.adminforth.auth.verify(jwt);
+      const adminforthUser = await this.adminforth.auth.verify(jwt);
       if (!adminforthUser) {
         res.status(401).send('Unauthorized by AdminForth');
       } else {
@@ -201,7 +201,7 @@ class ExpressServer implements ExpressHttpServer {
           this.message = message;
         }
       };
-      const input = { body, query, headers, cookies, response, _raw_express_req: req, _raw_express_res: res};
+      const input = { body, query, headers, cookies, adminUser, response, _raw_express_req: req, _raw_express_res: res};
 
       let output;
       try {

package/spa/src/App.vue

@@ -64,7 +64,6 @@
     aria-label="Sidebar"
   >
     <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800 border-r">
-
       <div class="flex ms-2 md:me-24  m-4  ">
         <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />
         <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
@@ -168,6 +167,7 @@ import { RouterLink, RouterView } from 'vue-router';
 import { initFlowbite } from 'flowbite'
 import './index.scss'
 import { useCoreStore } from '@/stores/core';
+import { useUserStore } from '@/stores/user';
 import {useModalStore} from '@/stores/modal';
 import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
 import AcceptModal from './components/AcceptModal.vue';
@@ -184,6 +184,7 @@ import { FrontendAPI } from '@/composables/useStores'
 const coreStore = useCoreStore();
 const modalStore = useModalStore();
 const toastStore = useToastStore();
+const userStore = useUserStore();
 const frontendApi = new FrontendAPI();
 frontendApi.init();
 const splitAtLast = (str: string, separator: string) => {
@@ -221,8 +222,9 @@ if (opened.value.includes(label)) {
 }
 
 async function logout() {
-  await coreStore.logout();
-  router.push({ name: 'login' });
+  userStore.unauthorize();
+  await userStore.logout();
+  router.push({ name: 'login' })
 }
 
 
@@ -244,6 +246,8 @@ async function loadMenu() {
   });
 }
 
+
+
 watch(route, () => {
   title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
   useHead({

package/spa/src/components/Toast.vue

@@ -46,16 +46,17 @@ const props = defineProps<{
     toast:{message: string;
     variant: string;
     id: string;
-    duration?: number;}
+    timeout?: number|'unlimited';}
 }>();
 function closeToast() {
     emit('close');
 }
 
 onMounted(() => {
-    setTimeout(() => {
-     emit('close');   
-    }, props.toast.duration  || 5000 );
+    if (props.toast.timeout === 'unlimited') return;
+    else { 
+      setTimeout(() => {emit('close');}, props.toast.timeout  || 10000 );
+    }
 });
 
 </script>

package/spa/src/components/ValueRenderer.vue

@@ -41,7 +41,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useCoreStore } from '@/stores/core';
 
 const coreStore = useCoreStore();
-const  route = useRoute();
+const route = useRoute();
 
 
 dayjs.extend(utc);

package/spa/src/composables/useStores.ts

@@ -56,7 +56,8 @@ export class FrontendAPI implements FrontendAPIInterface {
   alert(params: AlertParams): void {
     this.toastStore.addToast({
       message: params.message,
-      variant: params.variant
+      variant: params.variant,
+      timeout: params.timeout  
     })
   }
 

package/spa/src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import ResourceParent from '@/views/ResourceParent.vue'
+import { useUserStore } from '@/stores/user'
 /* IMPORTANT:ADMINFORTH ROUTES IMPORTS */
 
 const router = createRouter({
@@ -9,7 +10,15 @@ const router = createRouter({
       path: '/login',
       name: 'login',
       component: () => import('@/views/LoginView.vue'),
-      meta: { title: 'login' }
+      meta: { title: 'login' },
+      beforeEnter: async (to, from, next) => {
+        const userStore = useUserStore()
+        if (await userStore.checkAuth(true)) {
+          next({ name: 'home' })
+        } else {
+          next()
+        }
+      }
     },
     {
       path: '/resource/:resourceId',
@@ -49,4 +58,7 @@ const router = createRouter({
 })
 
 
+
+
+
 export default router

package/spa/src/stores/core.ts

@@ -8,7 +8,7 @@ export const useCoreStore = defineStore('core', () => {
   const resourceById: Ref<Object> = ref({});
   const menu = ref([]);
   const config = ref({});
-  const record = ref({});
+  const record: Ref<any | null> = ref({});
   const resource: Ref<AdminForthResource | null> = ref(null);
 
   const resourceColumnsWithFilters = computed(() => {
@@ -67,9 +67,17 @@ export const useCoreStore = defineStore('core', () => {
       }
     });
 
-    console.log('📦 record', respData);
-    record.value = respData.data[0];
-    resourceOptions.value = respData.options;
+    if (respData.error) {
+      window.adminforth.alert({
+        message: respData.error,
+        variant: 'danger',
+        timeout: 'unlimited'
+      });
+      record.value = {};
+    } else {
+      record.value = respData.data[0];
+    }
+
   }
 
   async function fetchResourceFull({ resourceId }: { resourceId: string }) {
@@ -103,12 +111,7 @@ export const useCoreStore = defineStore('core', () => {
     config.value = {...config.value, ...res};
   }
 
-  async function logout() {
-    await callAdminForthApi({
-      path: '/logout',
-      method: 'POST',
-    });
-  }
+ 
 
   const username = computed(() => {
     const usernameField = config.value.usernameField;
@@ -134,7 +137,6 @@ export const useCoreStore = defineStore('core', () => {
     fetchResourceFull, 
     resourceColumnsError,
     resourceOptions,
-    logout,
     resource,
     adminUser,
     resourceColumnsWithFilters

package/spa/src/stores/user.ts

@@ -0,0 +1,50 @@
+import {ref} from 'vue';
+import {defineStore} from 'pinia';
+import { callAdminForthApi } from '@/utils';
+
+export const useUserStore = defineStore('user', () => {
+    const isAuthorized = ref(false);
+
+    function authorize() {
+        isAuthorized.value = true;
+    }
+
+    function unauthorize() {
+        isAuthorized.value = false;
+    }
+
+    async function logout() {
+        await callAdminForthApi({
+          path: '/logout',
+          method: 'POST',
+        });
+      }
+
+    async function checkAuth( skipApiCall = false){
+        if(isAuthorized.value) return true;
+        else {
+            if(skipApiCall) return false;
+            const resp = await callAdminForthApi({
+                path: '/check_auth',
+                method: 'POST',
+            });
+            if (resp.status !== 401) {
+                authorize();
+                return true;
+            }
+            else {
+                unauthorize();
+                return false;}
+        }
+        
+    }
+
+    return {
+        isAuthorized,
+        authorize,
+        unauthorize,
+        checkAuth,
+        logout
+    }
+
+});        

package/spa/src/utils.ts

@@ -4,6 +4,7 @@ import type {  CoreConfig } from './spa_types/core';
 import router from "./router";
 import { useRouter } from 'vue-router';
 import { useCoreStore } from './stores/core';
+import { useUserStore } from './stores/user';
 
 export async function callApi({path, method, body=undefined} ) {
   const options = {
@@ -16,14 +17,18 @@ export async function callApi({path, method, body=undefined} ) {
   const fullPath = `${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}${path}`;
   const r = await fetch(fullPath, options);
   if (r.status == 401) {
-    console.log('router', router);
-    router.push({name: 'login'});
+    useUserStore().unauthorize();
+    router.push({ name: 'login' });
     return null;
   }
   return await r.json();
 }
 
-export async function callAdminForthApi({ path, method, body=undefined }) {
+export async function callAdminForthApi({ path, method, body=undefined }: {
+  path: string,
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+  body?: any
+}) {
   try {
     return callApi({path: `/adminapi/v1${path}`, method, body} );
   } catch (e) {

package/spa/src/views/CreateView.vue

@@ -137,6 +137,13 @@ async function saveRecord() {
       record: record.value,
     },
   });
+  if (response.error) {
+    window.adminforth.alert({
+      message: resp.error,
+      variant: 'danger',
+      timeout: 'unlimited',
+    })
+  }
   saving.value = false;
   if (route.query.returnTo) {
     router.push(route.query.returnTo);

package/spa/src/views/EditView.vue

@@ -145,7 +145,7 @@ async function saveRecord() {
     }
   }
 
-  await callAdminForthApi({
+  const resp = await callAdminForthApi({
     method: 'POST',
     path: `/update_record`,
     body: {
@@ -154,6 +154,13 @@ async function saveRecord() {
       record: updates,
     },
   });
+  if (resp.error) {
+    window.adminforth.alert({
+      message: resp.error,
+      variant: 'danger',
+      timeout: 'unlimited',
+    })
+  }
   saving.value = false;
   router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });
 }

package/spa/src/views/ListView.vue

@@ -183,7 +183,16 @@ async function getList() {
       sort: sort.value,
     }
   });
-
+  if (data.error) {
+    window.adminforth.alert({
+      message: data.error,
+      variant: 'danger',
+      timeout: 'unlimited',
+    });
+    rows.value = [];
+    totalRows.value = 0;
+    return;
+  }
   rows.value = data.data?.map(row => {
     row._primaryKeyValue = row[coreStore.resource.columns.find(c => c.primaryKey).name];
     return row;

package/types/AdminForthConfig.ts

@@ -26,12 +26,31 @@ export interface GenericHttpServer {
    */
   endpoint(options: {
     method: string,
+    noAuth?: boolean,
     path: string,
-    handler: Function,
+    handler: (body: any, adminUser: any, query: {[key: string]: string}, headers: {[key: string]: string}, cookies: {[key: string]: string}, response: {
+      setHeader: (key: string, value: string) => void,
+      setStatus: (code: number, message: string) => void,
+    }) => void,
   }): void;
 
 }
 
+export type AdminUser = {
+  /**
+   * primaryKey field value of user in table which is defined by {@link AdminForthConfig.auth.resourceId}
+   * or null if it is user logged in as {@link AdminForthConfig.rootUser}
+   */
+  pk: string | null,
+
+  /**
+   * Username which takend from {@link AdminForthConfig.auth.usernameField} field in user resource {@link AdminForthConfig.auth.resourceId}
+   */
+  username: string,
+  isRoot: boolean,
+  dbUser: any,
+}
+
 export interface ExpressHttpServer extends GenericHttpServer {
 
   /**
@@ -67,7 +86,7 @@ export interface AdminForthClass {
 
   auth: {
 
-    verify(jwt : string): any;
+    verify(jwt : string): Promise<any>;
   }
 
   /**
@@ -75,7 +94,6 @@ export interface AdminForthClass {
    */
   runningHotReload: boolean;
 
-
   /**
    * Connects to databases defined in datasources and fetches described resource columns to find out data types and constraints.
    * You must call this method as soon as possible after AdminForth class is instantiated.
@@ -182,6 +200,7 @@ export enum AdminForthResourcePages {
   edit = 'edit',
   create = 'create',
   filter = 'filter',
+  
 }
 
 
@@ -400,6 +419,32 @@ export type AdminForthResourceColumn = {
     masked?: boolean,
 }
   
+
+/**
+ * Modify query to change how data is fetched from database.
+ * Return ok: false and error: string to stop execution and show error message to user. Return ok: true to continue execution.
+ */
+export type BeforeDataSourceRequestFunction = (params: {resource: AdminForthResource, adminUser: AdminUser, query: any}) => Promise<{ok: boolean, error?: string}>;
+
+/**
+ * Modify response to change how data is returned after fetching from database.
+ * Return ok: false and error: string to stop execution and show error message to user. Return ok: true to continue execution.
+ */
+export type AfterDataSourceResponseFunction = (params: {resource: AdminForthResource, adminUser: AdminUser, response: any}) => Promise<{ok: boolean, error?: string}>;
+
+/**
+ * Modify record to change how data is saved to database.
+ * Return ok: false and error: string to stop execution and show error message to user. Return ok: true to continue execution.
+ */
+export type BeforeSaveFunction = (params:{resource: AdminForthResource, adminUser: AdminUser, record: any}) => Promise<{ok: boolean, error?: string}>;
+
+/**
+ * Modify record to change how data is saved to database.
+ * Return ok: false and error: string to stop execution and show error message to user. Return ok: true to continue execution.
+ */
+export type AfterSaveFunction = (params: {resource: AdminForthResource, adminUser: AdminUser, record: any}) => Promise<{ok: boolean, error?: string}>;
+
+
 /**
  * Resource describes one table or collection in database.
  * AdminForth generates set of pages for 'list', 'show', 'edit', 'create', 'filter' operations for each resource.
@@ -456,24 +501,24 @@ export type AdminForthResource = {
     plugins?: Array<AdminForthPluginType>,
     hooks?: {
       show?: {
-        beforeDatasourceRequest?: Function | Array<Function>,
-        afterDatasourceResponse?: Function | Array<Function>,
+        beforeDatasourceRequest?: BeforeDataSourceRequestFunction | Array<BeforeDataSourceRequestFunction>,
+        afterDatasourceResponse?: AfterDataSourceResponseFunction | Array<AfterDataSourceResponseFunction>,
       },
       list?: {
-        beforeDatasourceRequest?: Function | Array<Function>,
-        afterDatasourceResponse?: Function | Array<Function>,
+        beforeDatasourceRequest?: BeforeDataSourceRequestFunction | Array<BeforeDataSourceRequestFunction>,
+        afterDatasourceResponse?: AfterDataSourceResponseFunction | Array<AfterDataSourceResponseFunction>,
       },
       create?: {
-        beforeSave?: Function | Array<Function>,
-        afterSave?: Function | Array<Function>,
+        beforeSave?: BeforeSaveFunction | Array<BeforeSaveFunction>,
+        afterSave?: AfterSaveFunction | Array<AfterSaveFunction>,
       },
       edit?: {
-        beforeSave?: Function | Array<Function>,
-        afterSave?: Function | Array<Function>,
+        beforeSave?: BeforeSaveFunction | Array<BeforeSaveFunction>,
+        afterSave?: AfterSaveFunction | Array<AfterSaveFunction>,
       },
       delete?: {
-        beforeSave?: Function | Array<Function>,
-        afterSave?: Function | Array<Function>,
+        beforeSave?: BeforeSaveFunction | Array<BeforeSaveFunction>,
+        afterSave?: BeforeSaveFunction | Array<BeforeSaveFunction>,
       },
     },
     options?: {
@@ -770,14 +815,21 @@ export type AdminForthConfig = {
     deleteConfirmation?: boolean,
    
     styles?: Object,
-  }
+}
   
+
+export enum AllowedActionsEnum {
+  show = 'show',
+  list = 'list',
+  edit = 'edit',
+  create = 'create',
+  delete = 'delete',
+  filter = 'filter',
+}
+
+
 export type AllowedActions = {
-    create?: boolean,
-    edit?: boolean,
-    show?: boolean,
-    delete?: boolean,
-    filter?: boolean,
+  [key in AllowedActionsEnum]?: boolean
 }
   
 export type ValidationObject = {
@@ -960,8 +1012,8 @@ export type AdminForthForeignResource = {
     resourceId: string,
     hooks?: {
       dropdownList?: {
-        beforeDatasourceRequest?: Function,
-        afterDatasourceResponse?: Function,
+        beforeDatasourceRequest?: BeforeDataSourceRequestFunction | Array<BeforeDataSourceRequestFunction>,
+        afterDatasourceResponse?: AfterDataSourceResponseFunction | Array<AfterDataSourceResponseFunction>,
       },
     },
   }

package/types/FrontendAPI.ts

@@ -88,7 +88,13 @@ export type AlertParams = {
     /**
      * The variant of the alert
      */
-    variant?: AlertVariant;
+    variant?: AlertVariant | keyof typeof AlertVariant;
+
+    /**
+     * The timeout of the alert
+     */
+    timeout?: number | 'unlimited';
+    
 }
 
 export type FilterParams = {
@@ -107,10 +113,10 @@ export type FilterParams = {
 }
 
 export enum AlertVariant {
-    Danger = 'danger',
-    Success = 'success',
-    Warning = 'warning',
-    Info = 'info'
+    danger = 'danger',
+    success = 'success',
+    warning = 'warning',
+    info = 'info'
   }
 
 export type Operator = 'in' | 'ilike' | 'gte' | 'lte'  ;