adminforth 2.8.1 → 2.9.0

package/dist/spa/src/router/index.ts

@@ -62,6 +62,15 @@ const router = createRouter({
         },
       ]
     },
+    {
+      path: '/settings/:page?',
+      name: 'settings',
+      component: () => import('@/views/SettingsView.vue'),
+      meta: { 
+        title: 'Settings', 
+        sidebarAndHeader: 'preferIconOnly',
+      },
+    },
     /* IMPORTANT:ADMINFORTH ROUTES */
     { path: "/:pathMatch(.*)*", component: PageNotFound },
   ]

package/dist/spa/src/spa_types/core.ts

@@ -23,6 +23,10 @@ export type CoreConfig = {
     brandName: string,
     singleTheme?: 'light' | 'dark',
     brandLogo: string,
+    iconOnlySidebar: {
+        logo?: string,
+        enabled?: boolean,
+    },
     title: string,
     datesFormat: string,
     timeFormat: string,
@@ -45,6 +49,7 @@ export type CoreConfig = {
     customHeadItems?: {
         tagName: string;
         attributes: { [key: string]: string | boolean };
+        innerCode?: string;
     }[],
 }
 

package/dist/spa/src/stores/filters.ts

@@ -1,9 +1,11 @@
-import { ref, type Ref } from 'vue';
+import { ref, computed, type Ref } from 'vue';
 import { defineStore } from 'pinia';
+import { useCoreStore } from './core';
 
 export const useFiltersStore = defineStore('filters', () => {
     const filters: Ref<any[]> = ref([]);
     const sort: Ref<any> = ref({});
+    const coreStore = useCoreStore();
 
     const setSort = (s: any) => {
         sort.value = s;
@@ -23,5 +25,30 @@ export const useFiltersStore = defineStore('filters', () => {
     const clearFilters = () => {
         filters.value = [];
     }
-    return {setFilter, getFilters, clearFilters, filters, setFilters, setSort, getSort}
+
+    const shouldFilterBeHidden = (fieldName: string) => {
+        if (coreStore.resource?.columns) {
+            const column = coreStore.resource.columns.find((col: any) => col.name === fieldName);
+            if (column?.showIn?.filter !== true) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    const visibleFiltersCount = computed(() => {
+        return filters.value.filter(f => !shouldFilterBeHidden(f.field)).length;
+    });
+
+    return {
+        setFilter, 
+        getFilters, 
+        clearFilters, 
+        filters, 
+        setFilters, 
+        setSort, 
+        getSort,
+        visibleFiltersCount,
+        shouldFilterBeHidden
+    }
 })

package/dist/spa/src/types/Back.ts

@@ -306,6 +306,10 @@ export interface IAdminForthAuth {
 
   removeCustomCookie({response, name}: {response: any, name: string}): void;
 
+  setCustomCookie({response, payload}: {response: any, payload: {name: string, value: string, expiry: number, httpOnly: boolean}}): void;
+
+  getCustomCookie({cookies, name}: {cookies: {key: string, value: string}[], name: string}): string | null;
+
   setAuthCookie({expireInDays, response, username, pk,}: {expireInDays?: number, response: any, username: string, pk: string}): void;
   
   removeAuthCookie(response: any): void;
@@ -668,6 +672,19 @@ interface AdminForthInputConfigCustomization {
    */
   brandLogo?: string,
 
+
+  /**
+   * Path to your app logo for icon only sidebar
+   * 
+   * Example:
+   * Place file `logo.svg` to `./custom` folder and set this option:
+   * 
+   */
+  iconOnlySidebar?: {
+    logo?: string,
+    enabled?: boolean,
+  },
+
   /**
    * Path to your app favicon
    * 
@@ -798,6 +815,7 @@ interface AdminForthInputConfigCustomization {
   customHeadItems?: {
     tagName: string;
     attributes: Record<string, string | boolean>;
+    innerCode?: string;
   }[];
 
 }
@@ -1036,6 +1054,16 @@ export interface AdminForthInputConfig {
        * If you are using Cloudflare, set this to 'CF-Connecting-IP'. Case-insensitive.
        */
       clientIpHeader?: string,
+
+      /**
+       * Add custom page to the settings page
+       */
+      userMenuSettingsPages: {
+        icon?: string,
+        pageLabel: string,
+        slug?: string,
+        component: string
+      }[],
     },
 
      /**
@@ -1117,6 +1145,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
   customHeadItems?: {
     tagName: string;
     attributes: Record<string, string | boolean>;
+    innerCode?: string;
   }[];
   
 }

package/dist/spa/src/types/Common.ts

@@ -261,7 +261,17 @@ export interface AdminForthComponentDeclarationFull {
    * </script>
    * 
    */
-  meta?: any,
+  meta?: {
+    /**
+     * Controls sidebar and header visibility for custom pages
+     * - 'default': Show both sidebar and header (default behavior)
+     * - 'none': Hide both sidebar and header (full custom layout)
+     * - 'preferIconOnly': Show header but prefer icon-only sidebar
+     */
+    sidebarAndHeader?: 'default' | 'none' | 'preferIconOnly',
+    
+    [key: string]: any,
+  }
 }
 import { type AdminForthActionInput } from './Back.js' 
 export { type AdminForthActionInput } from './Back.js'
@@ -1073,6 +1083,10 @@ export interface AdminForthConfigForFrontend {
   showBrandNameInSidebar: boolean,
   showBrandLogoInSidebar: boolean,
   brandLogo?: string,
+  iconOnlySidebar?: { 
+    logo?: string,
+    enabled?: boolean,
+  },
   singleTheme?: 'light' | 'dark',
   datesFormat: string,
   timeFormat: string,
@@ -1094,7 +1108,14 @@ export interface AdminForthConfigForFrontend {
   customHeadItems?: {
     tagName: string;
     attributes: Record<string, string | boolean>;
-  }[],  
+    innerCode?: string;
+  }[],
+  settingPages?:{
+    icon?: string,
+    pageLabel: string,
+    slug?: string,
+    component: string,
+  }[],
 }
 
 export interface GetBaseConfigResponse {

package/dist/spa/src/types/FrontendAPI.ts

@@ -87,12 +87,19 @@ export interface FrontendAPIInterface {
          * Works only when user located on the list page. If filter already exists, it will be replaced with the new one.
          * Can be used to set filter from charts or other components in pageInjections.
          * 
+         * Filters are automatically marked as hidden (won't count in badge) if:
+         * - Column has showIn.filter: false
+         * 
          * Example:
          * 
          * ```ts
          * import adminforth from '@/adminforth'
          * 
+         * // Regular filter (will show in badge if column.showIn.filter !== false)
          * adminforth.list.setFilter({field: 'name', operator: 'ilike', value: 'john'})
+         * 
+         * // Hidden filter (won't show in badge if column.showIn.filter === false)
+         * adminforth.list.setFilter({field: 'internal_status', operator: 'eq', value: 'active'})
          * ```
          * 
          * Please note that you can set/update filter even for fields which have showIn.filter=false in resource configuration.
@@ -106,6 +113,9 @@ export interface FrontendAPIInterface {
          * DEPRECATED: does the same as setFilter, kept for backward compatibility
          * Update a filter in the list
          * 
+         * Filters visibility in badge is automatically determined by column configuration:
+         * - Hidden if column has showIn.filter: false
+         * 
          * Example:
          * 
          * ```ts

package/dist/spa/src/types/adapters/CaptchaAdapter.ts

@@ -0,0 +1,34 @@
+/**
+ * Interface for Captcha adapters.
+ */
+
+export interface CaptchaAdapter {
+    /**
+     * Returns the script source URL for the captcha widget.
+     */
+    getScriptSrc(): string;
+
+    /**
+     * Returns the site key for the captcha.
+     */
+    getSiteKey(): string;
+
+    /**
+     * Returns the widget ID for the captcha.
+     */
+    getWidgetId(): string;
+
+    /**
+     * Returns the script HTML for the captcha widget.
+     */
+    getRenderWidgetCode(): string;
+
+    /**
+     * Returns the function name to render the captcha widget.
+     */
+    getRenderWidgetFunctionName(): string;
+    /**
+     * Validates the captcha token.
+     */
+    validate(token: string, ip: string): Promise<Record<string, any>>;
+}

package/dist/spa/src/types/adapters/KeyValueAdapter.ts

@@ -0,0 +1,16 @@
+
+/**
+ * Might have implementations like RAM, Redis, Memcached,
+ * 
+ */
+export interface KeyValueAdapter {
+
+  get(key: string): Promise<string | null>;
+  
+  set(key: string, value: string, expiresInSeconds?: number): Promise<void>;
+
+  delete(key: string): Promise<void>;
+
+}
+
+  

package/dist/spa/src/types/adapters/index.ts

@@ -1,6 +1,8 @@
 export type { EmailAdapter } from './EmailAdapter.js';
 export type { CompletionAdapter } from './CompletionAdapter.js';
 export type { ImageGenerationAdapter } from './ImageGenerationAdapter.js';
+export type { KeyValueAdapter } from './KeyValueAdapter.js';
 export type { ImageVisionAdapter } from './ImageVisionAdapter.js';
 export type { OAuth2Adapter } from './OAuth2Adapter.js';
 export type { StorageAdapter } from './StorageAdapter.js';
+export type { CaptchaAdapter } from './CaptchaAdapter.js';

package/dist/spa/src/utils.ts

@@ -30,6 +30,7 @@ export async function callApi({path, method, body=undefined}: {
     const r = await fetch(fullPath, options);
     if (r.status == 401 ) {
       useUserStore().unauthorize();
+      useCoreStore().resetAdminUser();
       await router.push({ name: 'login' });
       return null;
     } 

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

@@ -92,8 +92,8 @@
         {{ $t('Filter') }}
         <span
           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 }}
+          v-if="filtersStore.visibleFiltersCount">
+            {{ filtersStore.visibleFiltersCount }}
         </span>
       </button>
 
@@ -189,7 +189,7 @@ import ResourceListTable from '@/components/ResourceListTable.vue';
 import { useCoreStore } from '@/stores/core';
 import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, currentQuery, getIcon, setQuery } from '@/utils';
-import { computed, onMounted, ref, watch, nextTick, type Ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch, nextTick, type Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi'
 import { getCustomComponent, initThreeDotsDropdown } from '@/utils';
@@ -387,6 +387,13 @@ class SortQuerySerializer {
 
 let listAutorefresher: any = null;
 
+function clearAutoRefresher() {
+  if (listAutorefresher) {
+    clearInterval(listAutorefresher);
+    listAutorefresher = null;
+  }
+}
+
 async function init() {
   
   await coreStore.fetchResourceFull({
@@ -434,10 +441,7 @@ async function init() {
     }
   });
 
-  if (listAutorefresher) {
-    clearInterval(listAutorefresher);
-    listAutorefresher = null;
-  }
+  clearAutoRefresher();
   if (coreStore.resource!.options?.listRowsAutoRefreshSeconds) {
     listAutorefresher = setInterval(async () => {
       await adminforth.list.silentRefresh();
@@ -505,6 +509,10 @@ onMounted(async () => {
   initInProcess = false;
 });
 
+onUnmounted(() => {
+  clearAutoRefresher();
+});
+
 watch([page], async () => {
   setQuery({ page: page.value });
 });

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

@@ -90,6 +90,7 @@
                           v-for="c in coreStore?.config?.loginPageInjections?.underInputs || []"
                           :is="getCustomComponent(c)"
                           :meta="c.meta"
+                          @update:disableLoginButton="setDisableLoginButton($event)"
                         />
 
                         <ErrorMessage :error="error" />
@@ -103,7 +104,7 @@
                           <span class="sr-only">{{ $t('Info') }}</span>
                           <div v-html="loginPromptHTML"></div>
                         </div>
-                        <Button @click="login" :loader="inProgress" :disabled="inProgress" class="w-full">
+                        <Button @click="login" :loader="inProgress" :disabled="inProgress || disableLoginButton" class="w-full">
                           {{ $t('Login to your account') }}
                         </Button>
                     </form>
@@ -117,7 +118,7 @@
 </template>
 
 
-<script setup>
+<script setup lang="ts">
 
 import { getCustomComponent } from '@/utils';
 import { onBeforeMount, onMounted, ref, computed } from 'vue';
@@ -148,6 +149,7 @@ const user = useUserStore();
 const showPw = ref(false);
 
 const error = ref(null);
+const disableLoginButton = ref(false);
 
 const backgroundPosition = computed(() => {
   return coreStore.config?.loginBackgroundPosition || '1/2';
@@ -211,5 +213,8 @@ async function login() {
 
 }
 
+function setDisableLoginButton(value: boolean) {
+  disableLoginButton.value = value;
+}
 
 </script>

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

@@ -0,0 +1,121 @@
+<template>
+  <div class="mt-16 h-full w-full" :class="{ 'hidden': initialTabSet === false }">
+    <div v-if="!coreStore?.config?.settingPages || coreStore?.config?.settingPages.length === 0">
+      <p>No setting pages configured or still loading...</p>
+    </div>
+      <VerticalTabs v-else ref="VerticalTabsRef" v-model:active-tab="activeTab" @update:active-tab="setURL({slug: $event, pageLabel: ''})">
+      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`tab:${settingPageSlotName(c,i)}`" v-slot:['tab:'+c.slug]>
+        <div class="flex items-center justify-center whitespace-nowrap w-full px-4 gap-2" @click="setURL(c)">
+          <component v-if="c.icon" :is="getIcon(c.icon)" class="w-5 h-5 group-hover:text-lightSidebarIconsHover transition duration-75 dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" ></component>
+          {{ c.pageLabel }}
+        </div>
+      </template>
+
+      <template v-for="(c,i) in coreStore?.config?.settingPages" :key="`${settingPageSlotName(c,i)}-content`" v-slot:[c.slug]>
+        <component 
+          :is="getCustomComponent({file: c.component || ''})"
+          :resource="coreStore.resource"
+          :adminUser="coreStore.adminUser"
+        />
+      </template>
+    </VerticalTabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useCoreStore } from '@/stores/core';
+import { getCustomComponent, getIcon } from '@/utils';
+import { Dropdown } from 'flowbite';
+import adminforth from '@/adminforth';
+import { VerticalTabs } from '@/afcl'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const coreStore = useCoreStore();
+const router = useRouter();
+
+const routerIsReady = ref(false);
+const loginRedirectCheckIsReady = ref(false);
+const dropdownUserButton = ref<HTMLElement | null>(null);
+const VerticalTabsRef = ref();
+const activeTab = ref('');
+const initialTabSet = ref(false);
+
+watch(() => route?.params?.page, (val) => {
+  handleURLChange(val as string | null);
+});
+
+async function initRouter() {
+  await router.isReady();
+  routerIsReady.value = true;
+}
+
+watch(dropdownUserButton, (el) => {
+  if (el) {
+    const dd = new Dropdown(
+      document.querySelector('#dropdown-user') as HTMLElement,
+      document.querySelector('[data-dropdown-toggle="dropdown-user"]') as HTMLElement,
+    );
+    adminforth.closeUserMenuDropdown = () => dd.hide();
+  }
+});
+
+onMounted(async () => {
+  if (coreStore.adminUser) {
+    await loadMenu();
+    loginRedirectCheckIsReady.value = true;
+    const routeParamsPage = route?.params?.page;
+    if (!routeParamsPage) {
+      if (coreStore.config?.settingPages?.[0]) {
+        setURL(coreStore.config.settingPages[0]);
+      }
+    } else {
+      handleURLChange(routeParamsPage as string | null);
+    }
+  }
+});
+
+async function loadMenu() {
+  await initRouter();
+  await coreStore.fetchMenuAndResource();
+}
+
+function slugifyString(str: string): string {
+  return str
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-_]/g, '-');
+}
+
+function setURL(item: {
+  pageLabel: string;
+  slug?: string | undefined;
+}) {
+  router.replace({
+    name: 'settings',
+    params: { page: item?.slug }
+  });
+}
+
+function handleURLChange(val: string | null) {
+  let isParamInTabs;
+  for (const c of coreStore?.config?.settingPages || []) {
+    if (c.slug ? c.slug === val : slugifyString(c.pageLabel) === val) {
+      isParamInTabs = true;
+      break;
+    }
+  }
+  if (isParamInTabs) {
+    VerticalTabsRef.value.setActiveTab(val);
+    activeTab.value = val as string;
+    if (!initialTabSet.value) initialTabSet.value = true;
+  } else {
+    if (coreStore.config?.settingPages?.[0]) {
+      setURL(coreStore.config.settingPages[0]);
+    }
+  }
+}
+</script>

package/dist/types/Back.d.ts

@@ -277,6 +277,22 @@ export interface IAdminForthAuth {
         response: any;
         name: string;
     }): void;
+    setCustomCookie({ response, payload }: {
+        response: any;
+        payload: {
+            name: string;
+            value: string;
+            expiry: number;
+            httpOnly: boolean;
+        };
+    }): void;
+    getCustomCookie({ cookies, name }: {
+        cookies: {
+            key: string;
+            value: string;
+        }[];
+        name: string;
+    }): string | null;
     setAuthCookie({ expireInDays, response, username, pk, }: {
         expireInDays?: number;
         response: any;
@@ -643,6 +659,17 @@ interface AdminForthInputConfigCustomization {
      *
      */
     brandLogo?: string;
+    /**
+     * Path to your app logo for icon only sidebar
+     *
+     * Example:
+     * Place file `logo.svg` to `./custom` folder and set this option:
+     *
+     */
+    iconOnlySidebar?: {
+        logo?: string;
+        enabled?: boolean;
+    };
     /**
      * Path to your app favicon
      *
@@ -761,6 +788,7 @@ interface AdminForthInputConfigCustomization {
     customHeadItems?: {
         tagName: string;
         attributes: Record<string, string | boolean>;
+        innerCode?: string;
     }[];
 }
 export interface AdminForthActionInput {
@@ -969,6 +997,15 @@ export interface AdminForthInputConfig {
          * If you are using Cloudflare, set this to 'CF-Connecting-IP'. Case-insensitive.
          */
         clientIpHeader?: string;
+        /**
+         * Add custom page to the settings page
+         */
+        userMenuSettingsPages: {
+            icon?: string;
+            pageLabel: string;
+            slug?: string;
+            component: string;
+        }[];
     };
     /**
      * Array of resources which will be displayed in the admin panel.
@@ -1036,6 +1073,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
     customHeadItems?: {
         tagName: string;
         attributes: Record<string, string | boolean>;
+        innerCode?: string;
     }[];
 }
 export interface AdminForthConfig extends Omit<AdminForthInputConfig, 'customization' | 'resources'> {