adminforth 1.3.22 → 1.3.24

package/auth.ts

@@ -30,10 +30,15 @@ class AdminForthAuth {
     response.setHeader('Set-Cookie', `adminforth_jwt=; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; Expires=Thu, 01 Jan 1970 00:00:00 GMT`);
   }
 
-  setAuthCookie({ response, username, pk}: {
-    response: any, username: string, pk: string | null
+  setAuthCookie({ expireInDays, response, username, pk}: {
+    expireInDays?: number,
+    response: any, 
+    username: string, 
+    pk: string | null
   }) {
-    const token = this.issueJWT({ username, pk, }, 'auth');
+    const expiresIn: string = expireInDays ? `${expireInDays}d` : (process.env.ADMINFORTH_AUTH_EXPIRESIN || '24h');
+
+    const token = this.issueJWT({ username, pk}, 'auth', expiresIn);
     response.setHeader('Set-Cookie', `adminforth_jwt=${token}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict`);
   }
 
@@ -47,11 +52,8 @@ class AdminForthAuth {
     const {name,value,expiry,httpOnly} = payload
     response.setHeader('Set-Cookie', `adminforth_${name}=${value}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; Expires=${new Date(Date.now() + expiry).toUTCString() } `);
   }
-
  
-
-
-  issueJWT(payload: Object, type: string) {
+  issueJWT(payload: Object, type: string, expiresIn: string = '24h'): string {
     // read ADMINFORH_SECRET from environment if not drop error
     const secret = process.env.ADMINFORTH_SECRET;
     if (!secret) {
@@ -59,7 +61,6 @@ class AdminForthAuth {
     }
 
     // issue JWT token
-    const expiresIn = process.env.ADMINFORTH_AUTH_EXPIRESIN || '24h';
     return jwt.sign({...payload, t: type}, secret, { expiresIn });
   }
 

package/dist/auth.js

@@ -30,8 +30,9 @@ class AdminForthAuth {
     removeAuthCookie(response) {
         response.setHeader('Set-Cookie', `adminforth_jwt=; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; Expires=Thu, 01 Jan 1970 00:00:00 GMT`);
     }
-    setAuthCookie({ response, username, pk }) {
-        const token = this.issueJWT({ username, pk, }, 'auth');
+    setAuthCookie({ expireInDays, response, username, pk }) {
+        const expiresIn = expireInDays ? `${expireInDays}d` : (process.env.ADMINFORTH_AUTH_EXPIRESIN || '24h');
+        const token = this.issueJWT({ username, pk }, 'auth', expiresIn);
         response.setHeader('Set-Cookie', `adminforth_jwt=${token}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict`);
     }
     removeCustomCookie({ response, name }) {
@@ -41,14 +42,13 @@ class AdminForthAuth {
         const { name, value, expiry, httpOnly } = payload;
         response.setHeader('Set-Cookie', `adminforth_${name}=${value}; Path=${this.adminforth.config.baseUrl || '/'}; HttpOnly; SameSite=Strict; Expires=${new Date(Date.now() + expiry).toUTCString()} `);
     }
-    issueJWT(payload, type) {
+    issueJWT(payload, type, expiresIn = '24h') {
         // read ADMINFORH_SECRET from environment if not drop error
         const secret = process.env.ADMINFORTH_SECRET;
         if (!secret) {
             throw new Error('ADMINFORTH_SECRET environment not set');
         }
         // issue JWT token
-        const expiresIn = process.env.ADMINFORTH_AUTH_EXPIRESIN || '24h';
         return jwt.sign(Object.assign(Object.assign({}, payload), { t: type }), secret, { expiresIn });
     }
     verify(jwtToken_1, mustHaveType_1) {

package/dist/modules/configValidator.js

@@ -28,7 +28,7 @@ export default class ConfigValidator {
         }
         return [];
     }
-    validateComponent(component, errors, ignoreExistsCheck = false) {
+    validateComponent(component, errors) {
         if (!component) {
             return component;
         }
@@ -39,6 +39,12 @@ export default class ConfigValidator {
         else {
             obj = component;
         }
+        let ignoreExistsCheck = false;
+        if (this.adminforth.codeInjector.allComponentNames.hasOwnProperty(component.file)) {
+            // not obvious, but if we are in this if, it means that this is plugin component
+            // if component is plugin component, we don't need to check if it exists in users folder
+            ignoreExistsCheck = true;
+        }
         if (!ignoreExistsCheck) {
             errors.push(...this.checkCustomFileExists(obj.file));
         }
@@ -98,10 +104,7 @@ export default class ConfigValidator {
         }
         if (this.config.customization.customPages) {
             this.config.customization.customPages.forEach((page, i) => {
-                // validate component if it's not plugin injection
-                if (this.adminforth.codeInjector.allComponentNames.hasOwnProperty(page.component)) {
-                    const validatedPage = this.validateComponent(page.component, errors, true);
-                }
+                this.validateComponent(page.component, errors);
             });
         }
         else {
@@ -298,9 +301,14 @@ export default class ConfigValidator {
                 });
                 res.options.bulkActions = bulkActions;
                 // if pageInjection is a string, make array with one element. Also check file exists
-                const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom'];
+                const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems'];
+                const possiblePages = ['list', 'show', 'create', 'edit'];
                 if (res.options.pageInjections) {
                     Object.entries(res.options.pageInjections).map(([key, value]) => {
+                        if (!possiblePages.includes(key)) {
+                            const similar = suggestIfTypo(possiblePages, key);
+                            errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${key}", allowed keys are ${possiblePages.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+                        }
                         Object.entries(value).map(([injection, target]) => {
                             if (possibleInjections.includes(injection)) {
                                 if (!Array.isArray(res.options.pageInjections[key][injection])) {
@@ -312,7 +320,8 @@ export default class ConfigValidator {
                                 });
                             }
                             else {
-                                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')}`);
+                                const similar = suggestIfTypo(possibleInjections, injection);
+                                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')} ${similar ? `Did you mean "${similar}"?` : ''}`);
                             }
                         });
                     });
@@ -417,13 +426,7 @@ export default class ConfigValidator {
             for (const column of resource.columns) {
                 if (column.components) {
                     for (const [key, comp] of Object.entries(column.components)) {
-                        let ignoreExistsCheck = false;
-                        if (this.adminforth.codeInjector.allComponentNames[comp.file]) {
-                            // not obvious, but if we are in this if, it means that this is plugin component
-                            // and there is no sense to check if it exists in users folder
-                            ignoreExistsCheck = true;
-                        }
-                        column.components[key] = this.validateComponent(comp, errors, ignoreExistsCheck);
+                        column.components[key] = this.validateComponent(comp, errors);
                     }
                 }
             }

package/dist/modules/restApi.js

@@ -44,7 +44,7 @@ export default class AdminForthRestAPI {
             handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, response }) {
                 var _b, _c, _d, _e;
                 const INVALID_MESSAGE = 'Invalid Username or Password';
-                const { username, password } = body;
+                const { username, password, rememberMe } = body;
                 let adminUser;
                 let toReturn = { ok: true, allowedLogin: true };
                 // get resource from db
@@ -93,7 +93,13 @@ export default class AdminForthRestAPI {
                         }
                     }
                     if (toReturn.allowedLogin) {
-                        this.adminforth.auth.setAuthCookie({ response, username, pk: userRecord[userResource.columns.find((col) => col.primaryKey).name] });
+                        const expireInDays = rememberMe && this.adminforth.config.auth.rememberMeDays;
+                        this.adminforth.auth.setAuthCookie({
+                            expireInDays,
+                            response,
+                            username,
+                            pk: userRecord[userResource.columns.find((col) => col.primaryKey).name]
+                        });
                     }
                 }
                 else {
@@ -140,6 +146,7 @@ export default class AdminForthRestAPI {
                     demoCredentials: this.adminforth.config.auth.demoCredentials,
                     loginPromptHTML: this.adminforth.config.auth.loginPromptHTML,
                     loginPageInjections: this.adminforth.config.customization.loginPageInjections,
+                    rememberMeDays: this.adminforth.config.auth.rememberMeDays,
                 };
             }),
         });

package/modules/configValidator.ts

@@ -32,7 +32,8 @@ export default class ConfigValidator implements IConfigValidator {
     return [];
   }
 
-  validateComponent(component: AdminForthComponentDeclaration, errors: Array<string>, ignoreExistsCheck: boolean = false): AdminForthComponentDeclaration {
+  validateComponent(component: AdminForthComponentDeclaration, errors: Array<string>): AdminForthComponentDeclaration {
+    
     if (!component) {
       return component;
     }
@@ -42,6 +43,18 @@ export default class ConfigValidator implements IConfigValidator {
     } else {
       obj = component;
     }
+
+    let ignoreExistsCheck = false;
+    if (
+      this.adminforth.codeInjector.allComponentNames.hasOwnProperty(
+        (component as AdminForthComponentDeclarationFull).file)
+    ) {
+      // not obvious, but if we are in this if, it means that this is plugin component
+      // if component is plugin component, we don't need to check if it exists in users folder
+      ignoreExistsCheck = true;
+    }
+    
+
     if (!ignoreExistsCheck) {
       errors.push(...this.checkCustomFileExists(obj.file));
     }
@@ -109,10 +122,7 @@ export default class ConfigValidator implements IConfigValidator {
 
     if (this.config.customization.customPages) {
       this.config.customization.customPages.forEach((page, i) => {
-        // validate component if it's not plugin injection
-        if (this.adminforth.codeInjector.allComponentNames.hasOwnProperty(page.component as PropertyKey)) {
-          const validatedPage = this.validateComponent(page.component, errors, true);
-        }
+        this.validateComponent(page.component, errors);
       });
     } else {
       this.config.customization.customPages = [];
@@ -341,9 +351,16 @@ export default class ConfigValidator implements IConfigValidator {
         res.options.bulkActions = bulkActions;
 
         // if pageInjection is a string, make array with one element. Also check file exists
-        const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom'];
+        const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems'];
+        const possiblePages = ['list', 'show', 'create', 'edit'];
+
         if (res.options.pageInjections) {
           Object.entries(res.options.pageInjections).map(([key, value]) => {
+            if (!possiblePages.includes(key)) {
+              const similar = suggestIfTypo(possiblePages, key);
+              errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${key}", allowed keys are ${possiblePages.join(', ')}. ${similar ? `Did you mean "${similar}"?` : ''}`);
+            }
+
             Object.entries(value).map(([injection, target]) => {
               if (possibleInjections.includes(injection)) {
                 if (!Array.isArray(res.options.pageInjections[key][injection])) {
@@ -354,7 +371,8 @@ export default class ConfigValidator implements IConfigValidator {
                   res.options.pageInjections[key][injection][i] = this.validateComponent(target, errors);
                 });
               } else {
-                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')}`);
+                const similar = suggestIfTypo(possibleInjections, injection);
+                errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')} ${similar ? `Did you mean "${similar}"?` : ''}`);
               }
             });
 
@@ -477,13 +495,8 @@ export default class ConfigValidator implements IConfigValidator {
         if (column.components) {
 
           for (const [key, comp] of Object.entries(column.components as Record<string, AdminForthComponentDeclarationFull>)) {
-            let ignoreExistsCheck = false;
-            if (this.adminforth.codeInjector.allComponentNames[comp.file]) {
-              // not obvious, but if we are in this if, it means that this is plugin component
-              // and there is no sense to check if it exists in users folder
-              ignoreExistsCheck = true;
-            }
-            column.components[key] = this.validateComponent(comp, errors, ignoreExistsCheck);
+            
+            column.components[key] = this.validateComponent(comp, errors);
           }
         }
       }

package/modules/restApi.ts

@@ -63,7 +63,7 @@ export default class AdminForthRestAPI {
       handler: async ({ body, response }) => {
        
         const INVALID_MESSAGE = 'Invalid Username or Password';
-        const { username, password } = body;
+        const { username, password, rememberMe } = body;
         let adminUser: AdminUser;
         let toReturn: { ok: boolean, redirectTo?: string, allowedLogin:boolean } = { ok: true, allowedLogin:true};
 
@@ -120,7 +120,13 @@ export default class AdminForthRestAPI {
             }
           }
           if (toReturn.allowedLogin){
-            this.adminforth.auth.setAuthCookie({ response, username, pk: userRecord[userResource.columns.find((col) => col.primaryKey).name] });
+            const expireInDays = rememberMe && this.adminforth.config.auth.rememberMeDays;
+            this.adminforth.auth.setAuthCookie({ 
+              expireInDays,
+              response, 
+              username, 
+              pk: userRecord[userResource.columns.find((col) => col.primaryKey).name] 
+            });
           } 
         } else {
           return { error: INVALID_MESSAGE };
@@ -172,6 +178,7 @@ export default class AdminForthRestAPI {
           demoCredentials: this.adminforth.config.auth.demoCredentials,
           loginPromptHTML: this.adminforth.config.auth.loginPromptHTML,
           loginPageInjections: this.adminforth.config.customization.loginPageInjections,
+          rememberMeDays: this.adminforth.config.auth.rememberMeDays,
         };
       },
     });

package/package.json

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

package/spa/src/App.vue

@@ -165,7 +165,7 @@
       </div>
     </div>
     <AcceptModal />
-    <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse">
+    <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse z-50">
       <transition-group
         name="fade"
         tag="div"

package/spa/src/components/Toast.vue

@@ -1,7 +1,8 @@
 <template>
     
 
-<div id="toast-default" class="flex  items-center w-full p-4 text-gray-500 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert"
+<div id="toast-default" class="flex  items-center w-full p-4 text-gray-500 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+    role="alert"
     :class="
         {
             'danger': 'bg-red-100',

package/spa/src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import ResourceParent from '@/views/ResourceParent.vue';
-import { useFiltersStore } from '@/stores/filters';
+
 /* IMPORTANT:ADMINFORTH ROUTES IMPORTS */
 
 const router = createRouter({

package/spa/src/stores/core.ts

@@ -47,6 +47,10 @@ export const useCoreStore = defineStore('core', () => {
     if (!resource.value) {
       throw new Error('Columns not fetched yet');
     }
+    const col = resource.value.columns.find((col: AdminForthResourceColumn) => col.primaryKey);
+    if (!col) {
+      throw new Error(`Primary key not found in resource ${resourceId}`);
+    }
 
     const respData = await callAdminForthApi({
       path: '/get_resource_data',
@@ -56,7 +60,7 @@ export const useCoreStore = defineStore('core', () => {
         resourceId: resourceId,
         filters: [
           {
-            field: resource.value.columns.find((col: AdminForthResourceColumn) => col.primaryKey).name,
+            field: col.name,
             operator: 'eq',
             value: primaryKey
           }

package/spa/src/stores/filters.ts

@@ -3,7 +3,14 @@ import { defineStore } from 'pinia';
 
 export const useFiltersStore = defineStore('filters', () => {
     const filters: Ref<any[]> = ref([]);
-    
+    const sort: Ref<any> = ref({});
+
+    const setSort = (s: any) => {
+        sort.value = s;
+    }
+    const getSort = () => {
+        return sort.value;
+    }
     const setFilter = (filter: any) => {
         filters.value.push(filter);
     }
@@ -16,5 +23,5 @@ export const useFiltersStore = defineStore('filters', () => {
     const clearFilters = () => {
         filters.value = [];
     }
-    return {setFilter, getFilters, clearFilters, filters, setFilters}
+    return {setFilter, getFilters, clearFilters, filters, setFilters, setSort, getSort}
 })

package/spa/src/views/ListView.vue

@@ -72,6 +72,33 @@
             {{ filtersStore.filters.length }}
         </span>
       </button>
+
+      <template v-if="coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems">
+        <button id="dropdownMenuIconButton" 
+          data-dropdown-toggle="dropdownDots" 
+          class="flex items-center py-2 px-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary 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"
+        >
+          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
+            <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
+          </svg>
+        </button>
+
+        <!-- Dropdown menu -->
+        <div id="dropdownDots" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
+            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownMenuIconButton">
+              <li v-for="item in coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems" :key="`dropdown-item-${item.label}`">
+                <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+                  <component :is="getCustomComponent(item)" 
+                    :meta="item.meta" 
+                    :resource="coreStore.resource" 
+                    :adminUser="coreStore.adminUser"
+                  />
+                </a>
+              </li>
+            </ul>
+        </div>
+      </template>
+
     </BreadcrumbsWithButtons>
 
     <component 
@@ -138,6 +165,11 @@ const page = ref(1);
 const columnsMinMax = ref({});
 const sort = ref([]);
 
+watch(() => sort, async (to, from) => {
+  // in store sort might be needed for plugins
+  filtersStore.setSort(sort.value);
+}, {deep: true});
+
 const rows = ref(null);
 const totalRows = ref(0);
 const checkboxes = ref([]);
@@ -224,6 +256,9 @@ async function init() {
     resourceId: route.params.resourceId
   });
 
+  initFlowbite();
+
+
   // !!! clear filters should be in same tick with sort assignment so that watch can catch it
   filtersStore.clearFilters();
   if (coreStore.resource.options?.defaultSort) {

package/spa/src/views/LoginView.vue

@@ -56,9 +56,16 @@
                             </button>
                         </div>
 
-                        <div class="flex items-start mb-5 hidden">
+                        <div v-if="coreStore.config.rememberMeDays" 
+                            class="flex items-start mb-5"
+                            :title="`Stay logged in for ${coreStore.config.rememberMeDays} days`"
+                        >
                           <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 />
+                            <input id="remember" 
+                              ref="rememberInput"
+                              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" />
                           </div>
                           <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
                         </div>
@@ -125,6 +132,7 @@ import { useRouter } from 'vue-router';
 
 const passwordInput = ref(null);
 const usernameInput = ref(null);
+const rememberInput = ref(null);
 
 const router = useRouter();
 const inProgress = ref(false);
@@ -166,6 +174,7 @@ async function login() {
     body: {
       username,
       password,
+      rememberMe: rememberInput.value.checked,
     }
   });
   inProgress.value = false;

package/types/AdminForthConfig.ts

@@ -239,11 +239,11 @@ export interface IAdminForthDataSourceConnectorConstructor {
 
 export interface IAdminForthAuth {
   verify(jwt : string, mustHaveType: string, decodeUser?: boolean): Promise<any>;
-  issueJWT(payload: Object, type: string): string;
+  issueJWT(payload: Object, type: string, expiresIn?: string): string;
 
   removeCustomCookie({response, name}: {response: any, name: string}): void;
 
-  setAuthCookie({response, username, pk,}: {response: any, username: string, pk: string}): void;
+  setAuthCookie({expireInDays, response, username, pk,}: {expireInDays?: number, response: any, username: string, pk: string}): void;
   
   removeAuthCookie(response: any): void;
 }
@@ -1043,6 +1043,7 @@ export type AdminForthResource = {
           beforeBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           afterBreadcrumbs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
           bottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+          threeDotsDropdownItems?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
         },
 
         /**
@@ -1178,6 +1179,13 @@ export type AdminForthConfig = {
        * Any prompt to show users on login. Supports HTML.
        */
       loginPromptHTML?: string,
+
+      /**
+       * Remember me days for "Remember Me" checkbox on login page.
+       * If not set or set to null/0/undefined, "Remember Me" checkbox will not be displayed.
+       * If rememberMeDays is set, then users who check "Remember Me" will be staying logged in for this amount of days.
+       */
+      rememberMeDays?: number,
     },
      /**
       * Array of resources which will be displayed in the admin panel.