adminforth 1.3.20 → 1.3.22

package/auth.ts

@@ -63,7 +63,7 @@ class AdminForthAuth {
     return jwt.sign({...payload, t: type}, secret, { expiresIn });
   }
 
-  async verify(jwtToken: string, mustHaveType: string): Promise<Object> {
+  async verify(jwtToken: string, mustHaveType: string, decodeUser: boolean | undefined = true): Promise<Object> {
     // read ADMINFORH_SECRET from environment if not drop error
     const secret = process.env.ADMINFORTH_SECRET;
     if (!secret) {
@@ -88,13 +88,16 @@ class AdminForthAuth {
       console.error(`Invalid token type during verification: ${t}, must be ${mustHaveType}`);
       return null;
     }
-    const dbUser = await this.adminforth.getUserByPk(pk);
-    if (!dbUser) {
-      console.error(`User with pk ${pk} not found in database`);
-      // will logout user which was deleted
-      return null;
+    if (decodeUser !== false) {
+      const dbUser = await this.adminforth.getUserByPk(pk);
+      if (!dbUser) {
+        console.error(`User with pk ${pk} not found in database`);
+        // will logout user which was deleted
+        return null;
+      }
+      decoded.dbUser = dbUser;
     }
-    decoded.dbUser = dbUser;
+    
     return decoded;
   }
 

package/dist/auth.js

@@ -51,8 +51,8 @@ class AdminForthAuth {
         const expiresIn = process.env.ADMINFORTH_AUTH_EXPIRESIN || '24h';
         return jwt.sign(Object.assign(Object.assign({}, payload), { t: type }), secret, { expiresIn });
     }
-    verify(jwtToken, mustHaveType) {
-        return __awaiter(this, void 0, void 0, function* () {
+    verify(jwtToken_1, mustHaveType_1) {
+        return __awaiter(this, arguments, void 0, function* (jwtToken, mustHaveType, decodeUser = true) {
             // read ADMINFORH_SECRET from environment if not drop error
             const secret = process.env.ADMINFORTH_SECRET;
             if (!secret) {
@@ -80,13 +80,15 @@ class AdminForthAuth {
                 console.error(`Invalid token type during verification: ${t}, must be ${mustHaveType}`);
                 return null;
             }
-            const dbUser = yield this.adminforth.getUserByPk(pk);
-            if (!dbUser) {
-                console.error(`User with pk ${pk} not found in database`);
-                // will logout user which was deleted
-                return null;
+            if (decodeUser !== false) {
+                const dbUser = yield this.adminforth.getUserByPk(pk);
+                if (!dbUser) {
+                    console.error(`User with pk ${pk} not found in database`);
+                    // will logout user which was deleted
+                    return null;
+                }
+                decoded.dbUser = dbUser;
             }
-            decoded.dbUser = dbUser;
             return decoded;
         });
     }

package/dist/modules/codeInjector.js

@@ -195,12 +195,12 @@ class CodeInjector {
             const registerCustomPages = (config) => {
                 if (config.customization.customPages) {
                     config.customization.customPages.forEach((page) => {
-                        var _a, _b, _c, _d;
+                        var _a, _b, _c;
                         routes += `{
             path: '${page.path}',
             name: '${page.path}',
             component: () => import('${((_a = page === null || page === void 0 ? void 0 : page.component) === null || _a === void 0 ? void 0 : _a.file) || page.component}'),
-            meta: { title: '${((_b = page.meta) === null || _b === void 0 ? void 0 : _b.title) || page.path.replace('/', '')}',customLayout:${(_d = (_c = page === null || page === void 0 ? void 0 : page.component) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.customLayout}}
+            meta: ${JSON.stringify(Object.assign(Object.assign({}, (((_b = page === null || page === void 0 ? void 0 : page.component) === null || _b === void 0 ? void 0 : _b.meta) || {})), { title: ((_c = page.meta) === null || _c === void 0 ? void 0 : _c.title) || page.path.replace('/', '') }))}
           },`;
                     });
                 }

package/dist/modules/configValidator.js

@@ -119,6 +119,12 @@ export default class ConfigValidator {
         if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.customization.brandName) === undefined) {
             this.config.customization.brandName = 'AdminForth';
         }
+        if (this.config.customization.loginPageInjections === undefined) {
+            this.config.customization.loginPageInjections = {};
+        }
+        if (this.config.customization.loginPageInjections.underInputs === undefined) {
+            this.config.customization.loginPageInjections.underInputs = [];
+        }
         if (this.config.customization.brandLogo) {
             errors.push(...this.checkCustomFileExists(this.config.customization.brandLogo));
         }
@@ -245,6 +251,7 @@ export default class ConfigValidator {
                         label: `Delete checked`,
                         state: 'danger',
                         icon: 'flowbite:trash-bin-outline',
+                        confirm: 'Are you sure you want to delete selected items?',
                         allowed: (_b) => __awaiter(this, [_b], void 0, function* ({ resource, adminUser, allowedActions }) { return allowedActions.delete; }),
                         action: (_c) => __awaiter(this, [_c], void 0, function* ({ selectedIds, adminUser }) {
                             const connector = this.adminforth.connectors[res.dataSource];
@@ -280,7 +287,7 @@ export default class ConfigValidator {
                             if (error) {
                                 return { error, ok: false };
                             }
-                            return { ok: true };
+                            return { ok: true, successMessage: `${selectedIds.length} item${selectedIds.length > 1 ? 's' : ''} deleted` };
                         })
                     });
                 }

package/dist/modules/restApi.js

@@ -43,7 +43,7 @@ export default class AdminForthRestAPI {
             path: '/login',
             handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, response }) {
                 var _b, _c, _d, _e;
-                const INVALID_MESSAGE = 'Invalid username or password';
+                const INVALID_MESSAGE = 'Invalid Username or Password';
                 const { username, password } = body;
                 let adminUser;
                 let toReturn = { ok: true, allowedLogin: true };
@@ -72,7 +72,7 @@ export default class AdminForthRestAPI {
                     sort: [],
                 })).data) === null || _b === void 0 ? void 0 : _b[0];
                 if (!userRecord) {
-                    return { error: 'User not found' };
+                    return { error: INVALID_MESSAGE };
                 }
                 const passwordHash = userRecord[this.adminforth.config.auth.passwordHashField];
                 const valid = yield AdminForthAuth.verifyPassword(password, passwordHash);
@@ -139,6 +139,7 @@ export default class AdminForthRestAPI {
                     title: (_j = this.adminforth.config.customization) === null || _j === void 0 ? void 0 : _j.title,
                     demoCredentials: this.adminforth.config.auth.demoCredentials,
                     loginPromptHTML: this.adminforth.config.auth.loginPromptHTML,
+                    loginPageInjections: this.adminforth.config.customization.loginPageInjections,
                 };
             }),
         });

package/index.ts

@@ -264,7 +264,7 @@ class AdminForth implements IAdminForth {
     return { ok, error, createdRecord };
   }
 
-  resource(resourceId: string) {
+  resource(resourceId: string): IOperationalResource {
     if (this.statuses.dbDiscover !== 'done') {
       if (this.statuses.dbDiscover === 'running') {
         throw new Error('Database discovery is running. You can\'t use data API while database discovery is not finished.\n'+

package/modules/codeInjector.ts

@@ -10,6 +10,7 @@ import AdminForth from '../index.js';
 import { ADMIN_FORTH_ABSOLUTE_PATH, getComponentNameFromPath, transformObject, deepMerge } from './utils.js';
 import { ICodeInjector } from '../types/AdminForthConfig.js';
 import { StylesGenerator } from './styleGenerator.js';
+import { title } from 'process';
 
 
 let TMP_DIR;
@@ -211,7 +212,12 @@ class CodeInjector implements ICodeInjector {
             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 }}
+            meta: ${
+                JSON.stringify({
+                  ...(page?.component?.meta || {}),
+                  title: page.meta?.title || page.path.replace('/', '')
+                })
+            }
           },`})
         
     }}

package/modules/configValidator.ts

@@ -6,6 +6,7 @@ import {
   AdminForthResourcePages, AllowedActionsEnum,
   type AdminForthComponentDeclarationFull,
   type AfterSaveFunction,
+  AdminForthBulkAction,
 } from "../types/AdminForthConfig.js";
 
 import fs from 'fs';
@@ -127,6 +128,13 @@ export default class ConfigValidator implements IConfigValidator {
     if (this.config?.customization.brandName === undefined) {
       this.config.customization.brandName = 'AdminForth';
     }
+    if (this.config.customization.loginPageInjections === undefined) {
+      this.config.customization.loginPageInjections = {};
+    }
+
+    if (this.config.customization.loginPageInjections.underInputs === undefined) {
+      this.config.customization.loginPageInjections.underInputs = [];
+    }
     if (this.config.customization.brandLogo) {
       errors.push(...this.checkCustomFileExists(this.config.customization.brandLogo));
     }
@@ -253,7 +261,7 @@ export default class ConfigValidator implements IConfigValidator {
 
 
         //check if resource has bulkActions
-        let bulkActions = res?.options?.bulkActions || [];
+        let bulkActions: AdminForthBulkAction[] = res?.options?.bulkActions || [];
 
         if (!Array.isArray(bulkActions)) {
           errors.push(`Resource "${res.resourceId}" bulkActions must be an array`);
@@ -265,6 +273,7 @@ export default class ConfigValidator implements IConfigValidator {
             label: `Delete checked`,
             state: 'danger',
             icon: 'flowbite:trash-bin-outline',
+            confirm: 'Are you sure you want to delete selected items?',
             allowed: async ({ resource, adminUser, allowedActions }) => { return allowedActions.delete },
             action: async ({ selectedIds, adminUser }) => {
               const connector = this.adminforth.connectors[res.dataSource];
@@ -317,7 +326,7 @@ export default class ConfigValidator implements IConfigValidator {
               if (error) {
                 return { error, ok: false };
               }
-              return { ok: true };
+              return { ok: true, successMessage: `${selectedIds.length} item${selectedIds.length > 1 ? 's' : ''} deleted` };
             }
           });
         }

package/modules/restApi.ts

@@ -62,7 +62,7 @@ export default class AdminForthRestAPI {
       path: '/login',
       handler: async ({ body, response }) => {
        
-        const INVALID_MESSAGE = 'Invalid username or password';
+        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};
@@ -95,8 +95,9 @@ export default class AdminForthRestAPI {
           })
         ).data?.[0];
 
+
         if (!userRecord) {
-          return { error: 'User not found' };
+          return { error: INVALID_MESSAGE };
         }
 
         const passwordHash = userRecord[this.adminforth.config.auth.passwordHashField];
@@ -170,6 +171,7 @@ export default class AdminForthRestAPI {
           title: this.adminforth.config.customization?.title,
           demoCredentials: this.adminforth.config.auth.demoCredentials,
           loginPromptHTML: this.adminforth.config.auth.loginPromptHTML,
+          loginPageInjections: this.adminforth.config.customization.loginPageInjections,
         };
       },
     });

package/package.json

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

package/spa/src/App.vue

@@ -297,7 +297,11 @@ async function initRouter() {
 }
 
 async function loadMenu() {
-  await coreStore.fetchMenuAndResource();
+  await initRouter();
+  if (!route.meta.customLayout) {
+    // for custom layouts we don't need to fetch menu
+    await coreStore.fetchMenuAndResource();
+  }
   loginRedirectCheckIsReady.value = true;
 }
 

package/spa/src/components/ResourceForm.vue

@@ -6,16 +6,14 @@
       <form autocomplete="off" @submit.prevent>
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 ">
           <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 block md:table-row-group">
-              <tr>
-                  <th scope="col" class="px-6 py-3 hidden md:table-cell">
-                      Field
-                  </th>
-                  <th scope="col" class="px-6 py-3 w-5/6 hidden md:table-cell">
-                      Value
-                  </th>
-
-                 
-              </tr>
+            <tr>
+              <th scope="col" class="px-6 py-3 hidden md:table-cell">
+                  Field
+              </th>
+              <th scope="col" class="px-6 py-3 w-5/6 hidden md:table-cell">
+                  Value
+              </th>
+            </tr>
           </thead>
           <tbody>
               <tr v-for="column, i in editableColumns" :key="column.name"
@@ -147,7 +145,6 @@
 
 import CustomDatePicker from "@/components/CustomDatePicker.vue";
 import Dropdown from '@/components/Dropdown.vue';
-import { useCoreStore } from '@/stores/core';
 import { callAdminForthApi, getCustomComponent } from '@/utils';
 import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
 import { computedAsync } from '@vueuse/core';

package/spa/src/components/ValueRenderer.vue

@@ -56,8 +56,18 @@ const props = defineProps({
 
 function protectAgainstXSS(value) {
   return sanitizeHtml(value, {
+    allowedTags: [
+      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
+      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
+      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
+      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
+      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
+      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
+      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
+    ],
     allowedAttributes: {
-    'li': [ 'data-list' ],
+      'li': [ 'data-list' ],
+      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
     } 
   });
 }

package/spa/src/composables/useFrontendApi.ts

@@ -9,7 +9,7 @@ export function showWarningTost(message: string) {
 }
 
 export function showErrorTost(message: string, timeout?: number) {
-  window.adminforth.alert({ message, variant: 'danger', timeout: timeout || 'unlimited'});  
+  window.adminforth.alert({ message, variant: 'danger', timeout: timeout || 30});  
   return message;
 }
 

package/spa/src/composables/useStores.ts

@@ -57,7 +57,11 @@ export class FrontendAPI implements FrontendAPIInterface {
 
   confirm(params: ConfirmParams): Promise<void> {
     return new Promise((resolve, reject) => {
-      this.modalStore.setModalContent({ content: params.message, acceptText: params.yes, cancelText: params.no })
+      this.modalStore.setModalContent({ 
+        content: params.message, 
+        acceptText: params.yes || 'Yes',
+        cancelText: params.no || 'Cancel' 
+      })
       this.modalStore.onAcceptFunction = resolve
       this.modalStore.onCancelFunction = reject
       this.modalStore.togleModal()

package/spa/src/stores/core.ts

@@ -71,7 +71,7 @@ export const useCoreStore = defineStore('core', () => {
       window.adminforth.alert({
         message: respData.error,
         variant: 'danger',
-        timeout: 'unlimited'
+        timeout: 30,
       });
       record.value = {};
     } else {

package/spa/src/stores/toast.ts

@@ -1,14 +1,30 @@
-import { ref, computed } from 'vue'
+import { ref, watch, type Ref } from 'vue'
 import { defineStore } from 'pinia'
-import { callAdminForthApi } from '@/utils';
 import { v1 as uuid } from 'uuid';
+import { useRoute } from 'vue-router';
+
+
 
 export const useToastStore = defineStore('toast', () => {
-    const toasts = ref([]);
-    const addToast = (toast) => {
-        toasts.value.push({...toast, id: uuid()});
+    const toasts: Ref<any[]> = ref([]);
+    const route = useRoute();
+
+    watch(route, () => {
+        console.log('route changed 121');
+        // on route change clear all toasts older then 5 seconds
+        const now = +new Date();
+        toasts.value = toasts.value.filter((t) => now - t.createdAt < 5000);
+    });
+
+    const addToast = (toast: { message: string; variant: string }) => {
+        const toastId = uuid();
+        toasts.value.push({
+            ...toast,
+            id: toastId,
+            createdAt: +new Date(),
+        });
     };
-    const removeToast = (toast) => {
+    const removeToast = (toast: { id: string }) => {
         toasts.value = toasts.value.filter((t) => t.id !== toast.id);
     };
     return { toasts, addToast, removeToast };

package/spa/src/views/CreateView.vue

@@ -149,6 +149,10 @@ async function saveRecord() {
         primaryKey: response.newRecordId
       } 
     });
+    window.adminforth.alert({
+      message: 'Record created successfully',
+      variant: 'success'
+    });
   }
 }
 

package/spa/src/views/ListView.vue

@@ -110,7 +110,6 @@
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
-import { useModalStore } from '@/stores/modal';
 import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, getIcon } from '@/utils';
 import { initFlowbite } from 'flowbite';
@@ -180,6 +179,16 @@ async function getList() {
 }
 
 async function startBulkAction(actionId) {
+  const action = coreStore.resource.options.bulkActions.find(a => a.id === actionId);
+  if (action.confirm) {
+    const confirmed = await window.adminforth.confirm({
+      message: action.confirm,
+    });
+    if (!confirmed) {
+      return;
+    }
+  }
+
   const data = await callAdminForthApi({
     path: '/start_bulk_action',
     method: 'POST',
@@ -193,6 +202,14 @@ async function startBulkAction(actionId) {
   if (data?.ok) {
     checkboxes.value = [];
     await getList();
+
+    if (data.successMessage) {
+      window.adminforth.alert({
+        message: data.successMessage,
+        variant: 'success'
+      });
+    }
+
   }
   if (data?.error) {
     showErrorTost(data.error);

package/spa/src/views/LoginView.vue

@@ -56,6 +56,19 @@
                             </button>
                         </div>
 
+                        <div class="flex items-start mb-5 hidden">
+                          <div class="flex items-center h-5">
+                            <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required />
+                          </div>
+                          <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
+                        </div>
+                        
+                        <component 
+                          v-for="c in coreStore?.config?.loginPageInjections?.underInputs || []"
+                          :is="getCustomComponent(c)"
+                          :meta="c.meta"
+                        />
+
                         <div v-if="error" class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
                           <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                             <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
@@ -66,6 +79,7 @@
                           </div>
                         </div>
                         
+                        
 
                         <div v-if="coreStore.config?.loginPromptHTML"
                           class="flex items-center p-4 mb-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400" role="alert"
@@ -101,6 +115,7 @@
 
 <script setup>
 
+import { getCustomComponent } from '@/utils';
 import { onMounted, ref, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';

package/types/AdminForthConfig.ts

@@ -1,4 +1,5 @@
 import type { Express } from 'express';
+import OperationalResource from '../modules/operationalResource.js';
 
 export interface ICodeInjector {
   srcFoldersToSync: Object;
@@ -237,7 +238,7 @@ export interface IAdminForthDataSourceConnectorConstructor {
 }
 
 export interface IAdminForthAuth {
-  verify(jwt : string, mustHaveType: string): Promise<any>;
+  verify(jwt : string, mustHaveType: string, decodeUser?: boolean): Promise<any>;
   issueJWT(payload: Object, type: string): string;
 
   removeCustomCookie({response, name}: {response: any, name: string}): void;
@@ -291,6 +292,11 @@ export interface IAdminForth {
    */
   bundleNow({ hotReload, verbose }: { hotReload: boolean, verbose: boolean }): Promise<void>;
 
+  /**
+   * Resource to get access to operational resources for data api fetching and manipulation.
+   */
+  resource(resourceId: string): IOperationalResource;
+
   /**
    * This method will be automatically called from AdminForth HTTP adapter to serve AdminForth SPA.
    */
@@ -738,13 +744,17 @@ export type AdminForthBulkAction = {
    * Callback which will be called on backend when user clicks on action button.
    * It should return Promise which will be resolved when action is done.
    */
-  action: ({ resource, selectedIds, adminUser }: { resource: AdminForthResource, selectedIds: Array<any>, adminUser: AdminUser }) => Promise<{ ok: boolean, error?: string }>,
+  action: ({ resource, selectedIds, adminUser }: { resource: AdminForthResource, selectedIds: Array<any>, adminUser: AdminUser }) => Promise<{ ok: boolean, error?: string, successMessage?: string }>,
 
   /**
    * Confirmation message which will be displayed to user before action is executed.
    */
   confirm?: string,
 
+  /**
+   * Success message which will be displayed to user after action is executed.
+   */
+  successMessage?: string,
   /**
    * Allowed callback called to check whether action is allowed for user.
    * 1. It called first time when user goes to list view. If callback returns false, action button will be hidden on list view.
@@ -1326,6 +1336,15 @@ export type AdminForthConfig = {
        * Execution is done on admin app load. 
        */
       announcementBadge?: (user: AdminUser) => { text?: string, html?: string, closable?: boolean, title?: string } | null,
+      
+      /**
+       * Custom panel components or array of components which will be displayed in the login form 
+       * right after the inputs. Use it to add custom authorization methods like social login or other custom fields e.g. 'reset' 
+       * password link.
+       */
+      loginPageInjections?: {
+        underInputs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+      }
     }
 
     /**