adminforth 1.1.74 → 1.1.76

package/dist/spa/src/utils.ts

@@ -16,7 +16,7 @@ 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) {
+  if (r.status == 401 ) {
     useUserStore().unauthorize();
     router.push({ name: 'login' });
     return null;

package/dist/spa/src/views/CreateView.vue

@@ -50,7 +50,7 @@
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :customComponentsPerColumn="createComponentsPerColumn"
+      :source="'create'"
     >
     </ResourceForm>
 
@@ -91,7 +91,6 @@ const route = useRoute();
 const router = useRouter();
 
 const record = ref({});
-let createComponentsPerColumn = {};
 
 const coreStore = useCoreStore();
 
@@ -115,12 +114,6 @@ onMounted(async () => {
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
-  createComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.create) {
-          acc[column.name] = getCustomComponent(column.components.create);
-      }
-      return acc;
-    }, {});
   loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
 });
@@ -143,7 +136,6 @@ async function saveRecord() {
   });
   if (response.error) {
     showErrorTost(response.error);
-    
   }
   saving.value = false;
   if (route.query.returnTo) {

package/dist/spa/src/views/EditView.vue

@@ -46,7 +46,7 @@
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :customComponentsPerColumn="editComponentsPerColumn"
+      :source="'edit'"
     >
     </ResourceForm>
 
@@ -88,7 +88,6 @@ const loading = ref(false);
 const saving = ref(false);
 
 const record = ref({});
-let editComponentsPerColumn = {};
 
 async function onUpdateRecord(newRecord) {
   record.value = newRecord;
@@ -119,13 +118,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
-
-  editComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.edit) {
-          acc[column.name] = getCustomComponent(column.components.edit);
-      }
-      return acc;
-    }, {});
   loading.value = false;
 });
 

package/dist/spa/src/views/ListView.vue

@@ -22,7 +22,7 @@
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
         data-tooltip-placement="bottom"
-        class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <IconBanOutline class="w-5 h-5 "/>
 
@@ -70,7 +70,7 @@
           class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
           v-if="filtersStore.filters.length">
             {{ filtersStore.filters.length }}
-          </span>
+        </span>
       </button>
     </BreadcrumbsWithButtons>
 
@@ -89,6 +89,7 @@
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
       @update:records="getList"
+      :sort="sort"
       :pageSize="pageSize"
       :totalRows="totalRows"
       :checkboxes="checkboxes"
@@ -229,6 +230,15 @@ async function init() {
     resourceId: route.params.resourceId
   });
 
+  if (coreStore.resource.options?.defaultSort) {
+    sort.value = [{
+        field: coreStore.resource.options.defaultSort.columnName,
+        direction: coreStore.resource.options.defaultSort.direction
+    }];
+  } else {
+    sort.value = [];
+  }
+
   await getList();
   columnsMinMax.value = await callAdminForthApi({
     path: '/get_min_max_for_columns',
@@ -250,7 +260,6 @@ onMounted(async () => {
 watch(() => route.params.resourceId, async () => {
   filtersStore.setFilters([]);
   checkboxes.value = [];
-  sort.value = [];
   await init();
 });
 

package/dist/spa/src/views/LoginView.vue

@@ -103,6 +103,8 @@ onMounted(() => {
     coreStore.getPublicConfig()
 });
 
+
+
 async function login() {
     inProgress.value = true;
     const resp = await callAdminForthApi({
@@ -116,7 +118,10 @@ async function login() {
     inProgress.value = false;
     if (resp.error) {
       error.value = resp.error;
-    } else {
+    } else if (resp.redirectTo) {
+      router.push(resp.redirectTo);
+    }
+     else {
       error.value = null;
       user.authorize()
       router.push('/');

package/dist/spa/src/views/ResourceParent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`">
+  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4">
     <RouterView/>
   </div>
 </template>
@@ -11,7 +11,6 @@
 
 
 import { useCoreStore } from '@/stores/core';
-import { onMounted } from 'vue';
 
 const coreStore = useCoreStore()
 

package/dist/spa/src/views/ShowView.vue

@@ -44,10 +44,10 @@
     </div>
     <div 
       v-else
-      class="relative overflow-x-auto shadow-resourse-form-shadow "
+      class="relative overflow-x-auto shadow-resourseFormShadow "
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-        <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field
@@ -59,7 +59,7 @@
         </thead>
         <tbody>
             <tr v-for="column in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
-                class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
+                class="bg-lightForm bg-darkForm odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
               <component
                 v-if="column.components?.showRow"
@@ -75,8 +75,8 @@
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
                   <component
-                    v-if="showComponentsPerColumn[column.name]"
-                    :is="showComponentsPerColumn[column.name]"
+                    v-if="column?.components?.show"
+                    :is="getCustomComponent(column?.components?.show)"
                     :resource="coreStore.resource"
                     :meta="column.components.show.meta"
                     :column="column"
@@ -126,8 +126,7 @@ import {showSuccesTost} from '@/composables/useFrontendApi';
 const item = ref(null);
 const route = useRoute();
 const router = useRouter();
-const loading = ref(false);
-let showComponentsPerColumn = {};
+const loading = ref(true);
 
 console.log(route.params,'showWiev');
 
@@ -145,13 +144,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
-
-  showComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.show) {
-          acc[column.name] = getCustomComponent(column.components.show);
-      }
-      return acc;
-  }, {});
   loading.value = false;
 });
 

package/dist/spa/tailwind.config.js

@@ -9,7 +9,9 @@ export default {
 
   darkMode: 'class',
   plugins: [
-    require('flowbite/plugin'),
+    require('flowbite/plugin')({
+      charts: true,
+    }),
   ],
 }
 

package/index.ts

@@ -20,6 +20,7 @@ import { AdminForthConfig, AdminForthClass, AdminForthComponentDeclaration, Admi
   AllowedActions,
   ActionCheckSource,
   AdminForthDataSourceConnector,
+  BeforeLoginConfirmationFunction
 } from './types/AdminForthConfig.js';
 import path from 'path';
 import AdminForthPlugin from './plugins/base.js';
@@ -159,7 +160,25 @@ class AdminForth implements AdminForthClass {
       this.config.customization = {};
     }
 
+    if (!this.config.customization.customComponentsDir) {
+      this.config.customization.customComponentsDir = './custom';
+    }
 
+    try {
+      // check customComponentsDir exists
+      fs.accessSync(this.config.customization.customComponentsDir, fs.constants.R_OK);
+    } catch (e) {
+      this.config.customization.customComponentsDir = undefined;
+    }
+
+    if (this.config.customization.customPages) {
+      this.config.customization.customPages.forEach((page, i) => {
+        // validate component if it's not plugin injection
+        if (this.codeInjector.allComponentNames.hasOwnProperty(page.component as PropertyKey)) {
+          const validatedPage = this.validateComponent(page.component, errors, true);
+        }
+      });
+    }
     if (!this.config.baseUrl) {
       this.config.baseUrl = '';
     }
@@ -342,35 +361,44 @@ class AdminForth implements AdminForthClass {
         }
 
         // transform all hooks Functions to array of functions
-        if (res.hooks) {
-          for (const value of [res.hooks.show, res.hooks.list]) {
-            if (value) {
-              if (value.beforeDatasourceRequest) {
-                if (!Array.isArray(value.beforeDatasourceRequest)) {
-                  value.beforeDatasourceRequest = [value.beforeDatasourceRequest];
-                }
-              }
-              if (value.afterDatasourceResponse) {
-                if (!Array.isArray(value.afterDatasourceResponse)) {
-                  value.afterDatasourceResponse = [value.afterDatasourceResponse];
-                }
-              }
-            }
+        if (!res.hooks) {
+          res.hooks = {};
+        }
+        for (const hookName of ['show', 'list']) {
+          if (!res.hooks[hookName]) {
+            res.hooks[hookName] = {};
+          }
+          if (!res.hooks[hookName].beforeDatasourceRequest) {
+            res.hooks[hookName].beforeDatasourceRequest = [];
+          }
+          
+          if (!Array.isArray(res.hooks[hookName].beforeDatasourceRequest)) {
+            res.hooks[hookName].beforeDatasourceRequest = [res.hooks[hookName].beforeDatasourceRequest];
+          }
+          
+          if (!res.hooks[hookName].afterDatasourceResponse) {
+            res.hooks[hookName].afterDatasourceResponse = [];
           }
-          for (const value of [res.hooks.create, res.hooks.edit, res.hooks.delete]) {
-            if (value) {
 
-              if (value.beforeSave) {
-                if (!Array.isArray(value.beforeSave)) {
-                  value.beforeSave = [value.beforeSave];
-                }
-              }
-              if (value.afterSave) {
-                if (!Array.isArray(value.afterSave)) {
-                  value.afterSave = [value.afterSave];
-                }
-              }
-            }
+          if (!Array.isArray(res.hooks[hookName].afterDatasourceResponse)) {
+            res.hooks[hookName].afterDatasourceResponse = [res.hooks[hookName].afterDatasourceResponse];
+          }
+        }
+        for (const hookName of ['create', 'edit', 'delete']) {
+          if (!res.hooks[hookName]) {
+            res.hooks[hookName] = {};
+          }
+          if (!res.hooks[hookName].beforeSave) {
+            res.hooks[hookName].beforeSave = [];
+          }
+          if (!Array.isArray(res.hooks[hookName].beforeSave)) {
+            res.hooks[hookName].beforeSave = [res.hooks[hookName].beforeSave];
+          }
+          if (!res.hooks[hookName].afterSave) {
+            res.hooks[hookName].afterSave = [];
+          }
+          if (!Array.isArray(res.hooks[hookName].afterSave)) {
+            res.hooks[hookName].afterSave = [res.hooks[hookName].afterSave];
           }
         }
       });
@@ -474,6 +502,10 @@ class AdminForth implements AdminForthClass {
         column.required = { create: column.required, edit: column.required };
       }
 
+      if (!column.required) {
+        column.required = { create: false, edit: false };
+      }
+
       // same for editingNote
       if (typeof column.editingNote === 'string') {
         column.editingNote = { create: column.editingNote, edit: column.editingNote };
@@ -605,6 +637,7 @@ class AdminForth implements AdminForthClass {
     await connector.createRecord({ resource, record });
     // execute hook if needed
     for (const hook of listify(resource.hooks?.create?.afterSave as AfterSaveFunction[])) {
+      console.log('Hook afterSave', hook);
       const resp = await hook({ resource, record, adminUser });
       if (!resp || (!resp.ok && !resp.error)) {
         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
@@ -622,11 +655,16 @@ class AdminForth implements AdminForthClass {
       method: 'POST',
       path: '/login',
       handler: async ({ body, response }) => {
+       
         const INVALID_MESSAGE = 'Invalid username or password';
         const { username, password } = body;
+        let adminUser: AdminUser;
+        let toReturn: { ok: boolean, redirectTo?: string, allowedLogin:boolean } = { ok: true, allowedLogin:true};
+
         let token;
         if (username === this.config.rootUser.username && password === this.config.rootUser.password) {
           this.auth.setAuthCookie({ response, username, pk: null });
+          adminUser = { isRoot: true, dbUser: null, pk: null, username: this.config.rootUser.username};
         } else {
           // get resource from db
           if (!this.config.auth) {
@@ -661,17 +699,39 @@ class AdminForth implements AdminForthClass {
           }
 
           const passwordHash = userRecord[this.config.auth.passwordHashField];
-          console.log('User record', userRecord, passwordHash)  // why does it has no hash?
           const valid = await AdminForthAuth.verifyPassword(password, passwordHash);
           if (valid) {
-            this.auth.setAuthCookie({ response, username, pk: userRecord[userResource.columns.find((col) => col.primaryKey).name] });
+            adminUser = { 
+              isRoot: false, dbUser: userRecord,
+              pk: userRecord[userResource.columns.find((col) => col.primaryKey).name], 
+              username
+            };
+            const beforeLoginConfirmation = this.config.auth.beforeLoginConfirmation as BeforeLoginConfirmationFunction[];
+            if (beforeLoginConfirmation.length){
+              for (const hook of beforeLoginConfirmation) {
+                const resp = await hook({ userRecord:adminUser});
+                if (resp?.body?.setCookie){
+                  resp?.body?.setCookie.forEach((cookie) => {
+                    this.auth.setCustomCookie({response,payload:cookie})});
+                }
+                if (resp?.body?.redirectTo) {
+                  toReturn = {ok:resp.ok, redirectTo:resp?.body?.redirectTo, allowedLogin:resp?.body?.allowedLogin};
+                  break;
+                }
+              }
+            }
+            if (toReturn.allowedLogin){
+              this.auth.setAuthCookie({ response, username, pk: userRecord[userResource.columns.find((col) => col.primaryKey).name] });
+            } 
           } else {
             return { error: INVALID_MESSAGE };
           }
+          
         }
-        return { ok: true };
-      },
-    });
+        
+        return toReturn;
+    }
+  });
 
     server.endpoint({
       method: 'POST',
@@ -686,7 +746,7 @@ class AdminForth implements AdminForthClass {
         method: 'POST',
         path: '/logout',
         handler: async ({ response }) => {
-          this.auth.removeAuthCookie({ response });
+          this.auth.removeAuthCookie( response );
           return { ok: true };
         },
     })
@@ -763,7 +823,6 @@ class AdminForth implements AdminForthClass {
           }
           newMenu.push(newMenuItem)
         }
-        console.log(userData,'this is the user data')
 
         return {
           user: userData,
@@ -1170,7 +1229,7 @@ class AdminForth implements AdminForthClass {
             } 
 
             if (Object.keys(newValues).length > 0) {
-                await connector.updateRecord({ resource, recordId, record, newValues});
+                await connector.updateRecord({ resource, recordId, newValues});
             }
             
             // execute hook if needed

package/modules/codeInjector.ts

@@ -118,51 +118,62 @@ class CodeInjector implements CodeInjectorType {
         }
         
         if (item.component) {
-          if(Object.keys(item).includes('isStaticRoute')){
-            if(!item.isStaticRoute){
-            routes += `{
-              path: '${item.path}',
-              name: '${item.path}',
-              component: () => import('${item.component}'),
-              meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
-            },\n`} else {
+          if(Object.keys(item).includes('isStaticRoute')) {
+            if(!item.isStaticRoute) {
               routes += `{
                 path: '${item.path}',
                 name: '${item.path}',
-                component: ${getComponentNameFromPath(item.component)},
-                meta: { title: '${item?.meta?.title|| item.path.replace('/', '')}'}
+                component: () => import('${item.component}'),
+                meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
               },\n`
-              const componentName = `${getComponentNameFromPath(item.component)}`;
-              routerComponents += `import ${componentName} from '${item.component}';\n`;
-            }
-          } else{
-            if(item.homepage){
+            } else {
               routes += `{
                 path: '${item.path}',
                 name: '${item.path}',
                 component: ${getComponentNameFromPath(item.component)},
-                meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
+                meta: { title: '${item?.meta?.title|| item.path.replace('/', '')}'}
               },\n`
               const componentName = `${getComponentNameFromPath(item.component)}`;
-              routerComponents += `import ${componentName} from '${item.component}';\n`;}
-              else {
-              routes += `{
-                path: '${item.path}',
-                name: '${item.path}',
-                component: () => import('${item.component}'),
-                meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
-              },\n` 
-              
+              routerComponents += `import ${componentName} from '${item.component}';\n`;
             }
-            
+          } else {
+              if (item.homepage) {
+                routes += `{
+                  path: '${item.path}',
+                  name: '${item.path}',
+                  component: ${getComponentNameFromPath(item.component)},
+                  meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
+                },\n`
+                const componentName = `${getComponentNameFromPath(item.component)}`;
+                routerComponents += `import ${componentName} from '${item.component}';\n`;
+              } else {
+                routes += `{
+                  path: '${item.path}',
+                  name: '${item.path}',
+                  component: () => import('${item.component}'),
+                  meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
+                },\n` 
+                }
           }
-          
         }
         if (item.children) {
           collectAssetsFromMenu(item.children);
         }
       });
     };
+    const registerCustomPages = (config) => {
+      if (config.customization.customPages) {
+        config.customization.customPages.forEach((page) => {
+          routes += `{
+            path: '${page.path}',
+            name: '${page.path}',
+            component: () => import('${page?.component?.file || page.component}'),
+            meta: { title: '${page.meta?.title || page.path.replace('/', '')}',customLayout:${page?.component?.meta?.customLayout }}
+          },`})
+        
+    }}
+
+    registerCustomPages(this.adminforth.config);
     collectAssetsFromMenu(this.adminforth.config.menu);
 
     if (filesUpdated) {

package/modules/utils.ts

@@ -2,7 +2,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs';
 // @ts-ignore-next-line
-import csscolors from 'css-color-names';
+import csscolors from 'css-color-names.json' assert {type:'json'};
 
 
 export function guessLabelFromName(name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.1.74",
+  "version": "1.1.76",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/plugins/AuditLogPlugin/index.ts

@@ -34,9 +34,9 @@ export default class AuditLogPlugin extends AdminForthPlugin {
 
     const newRecord = action == AllowedActionsEnum.delete ? {} : (await connector.getRecordByPrimaryKey(resource, recordId)) || {};
     if (action !== AllowedActionsEnum.delete) {
-        oldRecord = oldRecord ? JSON.parse(JSON.stringify(oldRecord)) : {};
+      oldRecord = oldRecord ? JSON.parse(JSON.stringify(oldRecord)) : {};
     } else {
-        oldRecord = data
+      oldRecord = data
     }
 
     if (action !== AllowedActionsEnum.delete) {
@@ -114,24 +114,8 @@ export default class AuditLogPlugin extends AdminForthPlugin {
         return;
       }
 
-      const defaultHooks = {
-        create: { afterSave: [] },
-        edit: { afterSave: [] },
-        delete: { beforeSave: [] }
-      }
-
-      if ( !resource.hooks ) {
-        resource.hooks = defaultHooks; 
-      } else {
-         resource.hooks = {...defaultHooks, ...resource.hooks}
-      }
-
-      Object.keys(resource.hooks).forEach((hook) => {
-        const hookToUse = hook == AllowedActionsEnum.delete ? 'beforeSave' : 'afterSave';
-        if(!Array.isArray(resource.hooks[hook][hookToUse])){
-          resource.hooks[hook][hookToUse] = [resource.hooks[hook][hookToUse]]
-        }
-        resource.hooks[hook][hookToUse].push(async ({resource, record, adminUser, oldRecord}) => {
+      ['edit', 'create', 'delete'].forEach((hook) => {
+        resource.hooks[hook].afterSave.push(async ({resource, record, adminUser, oldRecord}) => {
           return await this.createLogRecord(resource, hook as AllowedActionsEnum, record, adminUser, oldRecord)
         })
       })