feat: implement scoped localStorage keys using lsKey function for brand customization

Author: yaroslav8765

adminforth/modules/codeInjector.ts

@@ -404,6 +404,7 @@ class CodeInjector implements ICodeInjector {
 
     const env = {
       VITE_ADMINFORTH_PUBLIC_PATH: this.adminforth.config.baseUrl,
+      VITE_ADMINFORTH_BRAND_SLUG: this.adminforth.config.customization.brandNameSlug,
       FORCE_COLOR: '1',
       ...process.env,
       ...envOverrides,
@@ -1538,6 +1539,7 @@ class CodeInjector implements ICodeInjector {
       }
       const env = {
         VITE_ADMINFORTH_PUBLIC_PATH: this.adminforth.config.baseUrl,
+        VITE_ADMINFORTH_BRAND_SLUG: this.adminforth.config.customization.brandNameSlug,
         FORCE_COLOR: '1',
         ...process.env,
       }; 

adminforth/servers/startingPages.ts

@@ -29,14 +29,16 @@ const tokenVars = (colors: Record<string, string>, theme: 0 | 1) =>
 
 function renderPage(adminforth: IAdminForth, title: string, body: string) {
   const { colors, fontFamily } = new StylesGenerator(adminforth.config.customization.styles).mergeStyles();
+  // same key as lsKey('theme') in the SPA
+  const themeLsKey = `af_${adminforth.config.customization.brandNameSlug}_theme`;
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${title}</title>
   <script>
-    document.documentElement.classList.toggle('dark', (${JSON.stringify(adminforth.config.customization.singleTheme ?? null)} ?? localStorage.getItem('af__theme')) === 'dark');
+    document.documentElement.classList.toggle('dark', (${JSON.stringify(adminforth.config.customization.singleTheme ?? null)} ?? localStorage.getItem(${JSON.stringify(themeLsKey)})) === 'dark');
   </script>
   <style>
     :root { ${tokenVars(colors, 0)} color-scheme: light; }

adminforth/spa/src/App.vue

@@ -184,7 +184,7 @@ import AcceptModal from './components/AcceptModal.vue';
 import Sidebar from './components/Sidebar.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { createHead } from 'unhead'
-import { getCustomComponent, handleNotAuthorized } from '@/utils';
+import { getCustomComponent, handleNotAuthorized, lsKey } from '@/utils';
 import ToastStack from './components/ToastStack.vue';
 import adminforth, { initFrontedAPI, useAdminforth } from '@/adminforth';
 import UserMenuSettingsButton from './components/UserMenuSettingsButton.vue';
@@ -214,7 +214,7 @@ adminforth.closeUserMenuDropdown = () => {
 const routerIsReady = ref(false);
 const loginRedirectCheckIsReady = ref(false);
 
-const isSidebarIconOnly = ref(localStorage.getItem('afIconOnlySidebar') === 'true');
+const isSidebarIconOnly = ref(localStorage.getItem(lsKey('iconOnlySidebar')) === 'true');
 
 const loggedIn = computed(() => !!coreStore?.adminUser);
 
@@ -370,14 +370,14 @@ onUnmounted(() => {
 })
 
 onBeforeMount(()=>{
-  theme.value = window.localStorage.getItem('af__theme') || 'light';
+  theme.value = window.localStorage.getItem(lsKey('theme')) || 'light';
   document.documentElement.classList.toggle('dark', theme.value === 'dark');
 })
 
 watch(() => coreStore.config?.singleTheme, (singleTheme) => {
   if (singleTheme) {
     theme.value = singleTheme;
-    window.localStorage.setItem('af__theme', singleTheme);
+    window.localStorage.setItem(lsKey('theme'), singleTheme);
     document.documentElement.classList.toggle('dark', theme.value === 'dark');
   }
 }, { immediate: true })

adminforth/spa/src/components/ResourceListTable.vue

@@ -364,12 +364,13 @@
         {{ $t('Rows per page') }} 
       </span> 
       <Select 
-        v-model="pageSizeInternal" 
+        :modelValue="pageSize"
+        @update:modelValue="selectPageSize"
         :options="pageSizeOptionsComputed" 
         :searchDisabled="true" 
         :disableTogleOfSelectedItem="true"  
         :style="{ width: selectDynamicWidth }"
-        :placeholder="pageSizeInternal?.toString()"        
+        :placeholder="pageSize.toString()"
         class="text-sm min-w-20 af-page-size-button" 
         classesForInput="
         af-page-size-btn h-7 min-h-0 py-1 pl-2.5 pr-7 text-left text-sm font-medium transition-all 
@@ -394,7 +395,7 @@ import { getCustomComponent, formatComponent } from '@/utils';
 import { useCoreStore } from '@/stores/core';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
-import { getIcon } from '@/utils';
+import { getIcon, lsKey } from '@/utils';
 import {
   IconEye,
   IconPencil,
@@ -478,24 +479,17 @@ const pageSizeOptionsComputed = computed(() => {
   }));
 });
 
-const pageSizeInternal = ref<number | null>(null);
+const selectDynamicWidth = computed(() => `${props.pageSize.toString().length + 5}ch`);
 
-const selectDynamicWidth = computed(() => {
-  const length = pageSizeInternal.value?.toString().length || 2;
-  return `${length + 5}ch`;
-})
-
-watch(() => props.pageSize, (newVal) => {
-  pageSizeInternal.value = newVal;
-});
-
-watch(() => pageSizeInternal.value, (newSize) => {
-  if (newSize) {
-    localStorage.setItem(`pageSize_${props.resource?.resourceId}`, newSize.toString());
-    emits('update:pageSize', newSize);
-    page.value = 1;
+function selectPageSize(newSize: number) {
+  // Select emits again when the already selected option is clicked
+  if (newSize === props.pageSize) {
+    return;
   }
-});
+  localStorage.setItem(lsKey(`pageSize_${props.resource?.resourceId}`), newSize.toString());
+  emits('update:pageSize', newSize);
+  page.value = 1;
+}
 
 
 const checkboxesInternal: Ref<any[]> = ref([]);

adminforth/spa/src/components/Sidebar.vue

@@ -312,7 +312,7 @@ import { computed, ref, watch, nextTick, onMounted, onUnmounted, type Ref } from
 import { useCoreStore } from '@/stores/core';
 import MenuLink from './MenuLink.vue';
 import { IconPanelLeftClose, IconPanelLeftOpen, IconChevronDown, IconX, IconCircleAlert } from '@iconify-prerendered/vue-lucide';
-import { getIcon, verySimpleHash, loadFile, getCustomComponent } from '@/utils';
+import { getIcon, verySimpleHash, loadFile, getCustomComponent, lsKey } from '@/utils';
 import { Tooltip } from '@/afcl';
 import type { AnnouncementBadgeResponse, AdminForthConfigMenuItem } from '@/types/Common';
 import { useAdminforth } from '@/adminforth';
@@ -338,7 +338,7 @@ const emit = defineEmits<{
 
 const coreStore = useCoreStore();
 
-const OPENED_GROUPS_LS_KEY = 'afSidebarOpenedGroups';
+const OPENED_GROUPS_LS_KEY = lsKey('sidebarOpenedGroups');
 // expanded/collapsed state of groups toggled by user, by itemId, untouched groups fall back to item.open
 const openedGroups = ref<Record<string, boolean>>(JSON.parse(localStorage.getItem(OPENED_GROUPS_LS_KEY) || '{}'));
 const sidebarAside = ref(null);
@@ -357,7 +357,7 @@ function handleBreakpointChange(e: MediaQueryListEvent) {
   } else {
     if (props.forceIconOnly === true) {
       isSidebarIconOnly.value = true;
-    } else if (iconOnlySidebarEnabled.value && localStorage.getItem('afIconOnlySidebar') === 'true') {
+    } else if (iconOnlySidebarEnabled.value && localStorage.getItem(lsKey('iconOnlySidebar')) === 'true') {
       isSidebarIconOnly.value = true;
     } else {
       isSidebarIconOnly.value = false;
@@ -404,7 +404,7 @@ function clickOnMenuItem(item: AdminForthConfigMenuItem) {
 
 watch(isSidebarIconOnly, (isIconOnly) => {
   if (!isMobile.value && iconOnlySidebarEnabled.value && !props.forceIconOnly) {
-    localStorage.setItem('afIconOnlySidebar', isIconOnly.toString());
+    localStorage.setItem(lsKey('iconOnlySidebar'), isIconOnly.toString());
   }
   emit('sidebarStateChange', { isSidebarIconOnly: isIconOnly, isSidebarHovering: isSidebarHovering.value });
 })
@@ -425,7 +425,7 @@ const ctaBadge: Ref<(AnnouncementBadgeResponse & { hash: string; }) | null> = co
     return null;
   }
   const hash = badge.closable ? verySimpleHash(JSON.stringify(badge)) : '';
-  if (badge.closable && window.localStorage.getItem(`ctaBadge-${hash}`)) {
+  if (badge.closable && window.localStorage.getItem(lsKey(`ctaBadge-${hash}`))) {
     return null;
   }
   return {...badge, hash};
@@ -436,7 +436,7 @@ function closeCTA() {
     return;
   }
   const hash = ctaBadge.value.hash;
-  window.localStorage.setItem(`ctaBadge-${hash}`, '1');
+  window.localStorage.setItem(lsKey(`ctaBadge-${hash}`), '1');
   nextTick( async() => {
     emit('loadMenu');
     await coreStore.fetchMenuBadges();
@@ -469,7 +469,7 @@ watch(() => props.forceIconOnly, (force) => {
   }
   if (props.forceIconOnly === true) {
     isSidebarIconOnly.value = true;
-  } else if (iconOnlySidebarEnabled.value && localStorage.getItem('afIconOnlySidebar') === 'true') {
+  } else if (iconOnlySidebarEnabled.value && localStorage.getItem(lsKey('iconOnlySidebar')) === 'true') {
     isSidebarIconOnly.value = true;
   } else {
     isSidebarIconOnly.value = false;

adminforth/spa/src/stores/core.ts

@@ -1,6 +1,6 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { defineStore } from 'pinia'
-import { callAdminForthApi, handleNotAuthorized } from '@/utils';
+import { callAdminForthApi, handleNotAuthorized, lsKey } from '@/utils';
 import { isCompositePrimaryKey, recordIdFilters } from '@/utils/recordId';
 import websocket from '@/websocket';
 import { useAdminforth } from '@/adminforth';
@@ -13,7 +13,7 @@ import type { Ref } from 'vue'
 export const useCoreStore = defineStore('core', () => {
   const { alert } = useAdminforth();
   const resourceById: Ref<Record<string, ResourceVeryShort>> = ref({});
-  const theme: Ref<'light'| 'dark'> = ref(window.localStorage.getItem('af__theme') as ('light'|'dark') || 'light');
+  const theme: Ref<'light'| 'dark'> = ref(window.localStorage.getItem(lsKey('theme')) as ('light'|'dark') || 'light');
 
   const menu: Ref<AdminForthConfigMenuItem[]> = ref([]);
   const config: Ref<AdminForthConfigForFrontend | null> = ref(null);
@@ -76,7 +76,7 @@ export const useCoreStore = defineStore('core', () => {
 
     document.documentElement.setAttribute('data-theme', theme.value);
     theme.value = theme.value;
-    window.localStorage.setItem('af__theme', theme.value);
+    window.localStorage.setItem(lsKey('theme'), theme.value);
   }
 
 

adminforth/spa/src/utils.ts

@@ -2,3 +2,4 @@ export * from './utils/utils';
 export * from './utils/listUtils';
 export * from './utils/createEditUtils';
 export * from './utils/dateUtils';
+export * from './utils/storageKey';

adminforth/spa/src/utils/index.ts

@@ -2,3 +2,4 @@ export * from './utils';
 export * from './listUtils';
 export * from './createEditUtils';
 export * from './dateUtils';
+export * from './storageKey';

adminforth/spa/src/utils/storageKey.ts

@@ -0,0 +1,4 @@
+// localStorage is shared by every app on the same origin, so keys are scoped by brand like the auth cookie
+export function lsKey(name: string): string {
+  return `af_${import.meta.env.VITE_ADMINFORTH_BRAND_SLUG}_${name}`;
+}

adminforth/spa/src/views/ListView.vue

@@ -205,7 +205,7 @@ import { useFiltersStore } from '@/stores/filters';
 import { callAdminForthApi, currentQuery, getIcon, setQuery, formatComponent, executeCustomBulkAction } from '@/utils';
 import { computed, onMounted, onUnmounted, ref, watch, type Ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { getCustomComponent, getList, startBulkAction } from '@/utils';
+import { getCustomComponent, getList, startBulkAction, lsKey } from '@/utils';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import { Tooltip, Spinner, Button, LinkButton } from '@/afcl'
 import type { AdminForthComponentDeclaration, AdminForthComponentDeclarationFull, AdminForthFilterOperators, AdminForthResourceColumnCommon } from '@/types/Common';
@@ -255,7 +255,7 @@ const pageSize = ref(DEFAULT_PAGE_SIZE);
 
 const syncPageSize = () => {
   const resourceId = route.params.resourceId;
-  const savedSize = localStorage.getItem(`pageSize_${resourceId}`);
+  const savedSize = localStorage.getItem(lsKey(`pageSize_${resourceId}`));
 
   if (savedSize) {
     pageSize.value = parseInt(savedSize);