Merge branch 'next' of github.com:devforth/adminforth into next

Author: SerVitasik

adminforth/documentation/docs/tutorial/07-Plugins/02-TwoFactorsAuth.md

@@ -276,8 +276,8 @@ Add the new resource to index.ts:
 
   resources: [
     ...
-  //diff-add
-  passkeysResource,
+    //diff-add
+    passkeysResource,
     ...
   ],
 ```
@@ -291,9 +291,6 @@ Now, update the settings of the Two-Factor Authentication plugin:
       timeStepWindow: 1       
       //diff-add
       passkeys: {
-        //diff-add
-        challengesKeyValueAdapter: new RAMKeyValueAdapter(), // you can use any key-value adapter
-
         //diff-add
         credentialResourceID: "passkeys",
         //diff-add
@@ -305,20 +302,19 @@ Now, update the settings of the Two-Factor Authentication plugin:
         //diff-add
         settings: {
           // diff-add
+          expectedOrigin: "http://localhost:3000",   // important, set it to your backoffice origin (starts from scheme, no slash at the end)
+          //diff-add
           // relying party config
           //diff-add
-            rp: {
+          rp: {
+              //diff-add
+              name: "New Reality",
+              
+              //diff-add
+              // optionaly you can set expected id explicitly if you need to:
+              //diff-add
+              // id: "localhost",
               //diff-add
-                name: "New Reality",
-                // diff-add
-                // id should be a app domain name without port
-                // diff-add
-                // e.g. if you run locally in https://localhost:3500 -> then write "localhost"
-                // diff-add
-                // if you run at https://myadmin.myproduct.com -> write  "myadmin.myproduct.com"
-                //diff-add
-                id: "localhost",
-                //diff-add
             },
             //diff-add
             user: {
@@ -331,8 +327,16 @@ Now, update the settings of the Two-Factor Authentication plugin:
             //diff-add
             authenticatorSelection: {
               // diff-add
-              //  Can be "platform" or "cross-platform"
-              //diff-add
+              // impacts a way how passkey will be created
+              // diff-add
+              // - platform - using browser internal authenticator (e.g. Google Chrome passkey / Google Password Manager )
+              // diff-add
+              // - cross-platform - using external authenticator (e.g. Yubikey, Google Titan etc)
+              // diff-add
+              // - both - plging will show both options to the user
+              // diff-add
+              // Can be "platform", "cross-platform" or "both"
+              // diff-add
                 authenticatorAttachment: "platform",
                 //diff-add
                 requireResidentKey: true,
@@ -347,7 +351,14 @@ Now, update the settings of the Two-Factor Authentication plugin:
     }),
   ],
 ```
-> ☝️ most likely you should set `passkeys.settings.rp.id` it from your process.env depending on your env
+
+> ☝️ most likely you should set `passkeys.settings.expectedOrigin` from your process.env depending on your env (e.g. http://localhost:3500 for local dev, https://admin.yourproduct.com for production etc)
+
+
+> 💡**Note** By default `passkeys.settings.rp.id` is generated from the expectedOrigin so you don't need to set it
+> unless you know what you are doing. Manual setting might be needed for sub-domains isolation.
+> By default, if you set expected origin to https://localhost:3500 it will use "localhost" as rpid
+> If you set origin to https://myadmin.myproduct.com -> it will use  "myadmin.myproduct.com"  as rpid 
 
 The setup is complete. To create a passkey:
 

adminforth/modules/codeInjector.ts

@@ -6,7 +6,7 @@ import os from 'os';
 import path from 'path';
 import { promisify } from 'util';
 import AdminForth, { AdminForthConfigMenuItem } from '../index.js';
-import { ADMIN_FORTH_ABSOLUTE_PATH, getComponentNameFromPath, transformObject, deepMerge, md5hash } from './utils.js';
+import { ADMIN_FORTH_ABSOLUTE_PATH, getComponentNameFromPath, transformObject, deepMerge, md5hash, slugifyString } from './utils.js';
 import { ICodeInjector } from '../types/Back.js';
 import { StylesGenerator } from './styleGenerator.js';
 

adminforth/modules/configValidator.ts

@@ -17,7 +17,7 @@ import {
 
 import fs from 'fs';
 import path from 'path';
-import { guessLabelFromName, md5hash, suggestIfTypo } from './utils.js';
+import { guessLabelFromName, md5hash, suggestIfTypo, slugifyString } from './utils.js';
 import { 
   AdminForthSortDirections,
   type AdminForthComponentDeclarationFull,
@@ -30,7 +30,6 @@ import AdminForth from "adminforth";
 import { AdminForthConfigMenuItem } from "adminforth";
 
 
-
 export default class ConfigValidator implements IConfigValidator {
 
   customComponentsDir: string | undefined;
@@ -160,18 +159,31 @@ export default class ConfigValidator implements IConfigValidator {
     if (!customization.customPages) {
       customization.customPages = [];
     }
+    const normalizeComponent = (comp: any) => {
+      if (typeof comp === 'string') {
+        return { file: comp, meta: {} };
+      }
+      const meta = comp.meta || {};
+      if (meta.sidebarAndHeader === undefined) {
+        meta.sidebarAndHeader = meta.customLayout === true ? 'none' : 'default';
+      }
+      delete meta.customLayout;
+      return { ...comp, meta };
+    };
+
     customization.customPages.forEach((page, i) => {
-      this.validateComponent(page.component, errors);
+      const normalizedComponent = normalizeComponent(page.component);
+      this.validateComponent(normalizedComponent, errors);
+      customization.customPages[i].component = normalizedComponent;
     });
 
     if (!customization.brandName) { //} === undefined) {
       customization.brandName = 'AdminForth';
     }
 
     // slug should have only lowercase letters, dashes and numbers
-    customization.brandNameSlug = customization.brandName.toLowerCase().replace(/[^a-z0-9-]/g, '');
+    customization.brandNameSlug = slugifyString(customization.brandName);
 
-    
     if (customization.brandLogo) {
       errors.push(...this.checkCustomFileExists(customization.brandLogo));
     }
@@ -1005,6 +1017,7 @@ export default class ConfigValidator implements IConfigValidator {
       if (newConfig.auth.userMenuSettingsPages) {
         for (const page of newConfig.auth.userMenuSettingsPages) {
           this.validateComponent({file: page.component}, errors);
+          page.slug = page.slug ?? slugifyString(page.pageLabel);
         }
       }
 

adminforth/modules/utils.ts

@@ -509,4 +509,12 @@ export function isProbablyUUIDColumn(column: { name: string; type?: string; samp
   }
 
   return false;
+}
+
+export function slugifyString(str: string): string {
+  return str
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-_]/g, '-');
 }

adminforth/spa/src/App.vue

@@ -75,15 +75,16 @@
     <Sidebar 
       v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady && defaultLayout"
       :sideBarOpen="sideBarOpen"
+      :forceIconOnly="route.meta?.sidebarAndHeader === 'preferIconOnly'"
       @hideSidebar="hideSidebar"
       @loadMenu="loadMenu"
       @sidebarStateChange="handleSidebarStateChange"
     />
 
     <div class="transition-all duration-300 ease-in-out max-w-[100vw]" 
       :class="{
-        'sm:ml-18': isSidebarIconOnly,
-        'sm:ml-64': !isSidebarIconOnly,
+        'sm:ml-20': isSidebarIconOnly,
+        'sm:ml-[264px]': !isSidebarIconOnly,
         'sm:max-w-[calc(100%-4.5rem)]': isSidebarIconOnly,
         'sm:max-w-[calc(100%-16rem)]': !isSidebarIconOnly
       }"
@@ -229,16 +230,19 @@ async function initRouter() {
 
 async function loadMenu() {
   await initRouter();
-  if (!route.meta.customLayout) {
+  if (route.meta.sidebarAndHeader !== 'none') {
     // for custom layouts we don't need to fetch menu
     await coreStore.fetchMenuAndResource();
   }
   loginRedirectCheckIsReady.value = true;
 }
 
 function handleCustomLayout() {
-  if (route.meta?.customLayout) {
+  if (route.meta?.sidebarAndHeader === 'none') {
     defaultLayout.value = false;
+  } else if (route.meta?.sidebarAndHeader === 'preferIconOnly') {
+    defaultLayout.value = true;
+    isSidebarIconOnly.value = true;
   } else {
     defaultLayout.value = true;
   }

adminforth/spa/src/components/Sidebar.vue

@@ -31,7 +31,7 @@
             :adminUser="coreStore.adminUser"
           />
         </div>
-        <div class="absolute top-1.5 -right-4 z-10 hidden sm:block" v-if="iconOnlySidebarEnabled && (!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))">
+        <div class="absolute top-1.5 -right-4 z-10 hidden sm:block" v-if="!forceIconOnly && iconOnlySidebarEnabled && (!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))">
           <button class="text-sm text-lightSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover dark:text-darkSidebarIcons" @click="toggleSidebar">
             <IconCloseSidebarSolid v-if="!isSidebarIconOnly" class="w-5 h-5 active:scale-95 transition-all duration-200 hover:text-lightSidebarIconsHover dark:hover:text-darkSidebarIconsHover" />
             <IconOpenSidebarSolid v-else class="w-5 h-5 active:scale-95 transition-all duration-200 hover:text-lightSidebarIconsHover dark:hover:text-darkSidebarIconsHover" />
@@ -286,6 +286,7 @@ import adminforth from '@/adminforth';
 
 interface Props {
   sideBarOpen: boolean;
+  forceIconOnly?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -304,15 +305,21 @@ const sidebarAside = ref(null);
 
 const smQuery = window.matchMedia('(min-width: 640px)');
 const isMobile = ref(!smQuery.matches);
-const iconOnlySidebarEnabled = computed(() => coreStore.config?.iconOnlySidebar?.enabled !== false);
-const isSidebarIconOnly = ref(!isMobile.value && localStorage.getItem('afIconOnlySidebar') === 'true');
+const iconOnlySidebarEnabled = computed(() => props.forceIconOnly === true || coreStore.config?.iconOnlySidebar?.enabled !== false);
+const isSidebarIconOnly = ref(false);
 
 function handleBreakpointChange(e: MediaQueryListEvent) {
   isMobile.value = !e.matches;
   if (isMobile.value) {
     isSidebarIconOnly.value = false;
   } else {
-    isSidebarIconOnly.value = iconOnlySidebarEnabled.value && localStorage.getItem('afIconOnlySidebar') === 'true';
+    if (props.forceIconOnly === true) {
+      isSidebarIconOnly.value = true;
+    } else if (iconOnlySidebarEnabled.value && localStorage.getItem('afIconOnlySidebar') === 'true') {
+      isSidebarIconOnly.value = true;
+    } else {
+      isSidebarIconOnly.value = false;
+    }
   }
 }
 
@@ -323,6 +330,9 @@ const isSidebarHovering = ref(false);
 const isTogglingSidebar = ref(false);
 
 function toggleSidebar() {
+  if (props.forceIconOnly) {
+    return;
+  }
   if (!iconOnlySidebarEnabled.value) {
     return;
   }
@@ -358,7 +368,7 @@ watch(()=>coreStore.menu, () => {
 
 
 watch(isSidebarIconOnly, (isIconOnly) => {
-  if (!isMobile.value && iconOnlySidebarEnabled.value) {
+  if (!isMobile.value && iconOnlySidebarEnabled.value && !props.forceIconOnly) {
     localStorage.setItem('afIconOnlySidebar', isIconOnly.toString());
   }
   emit('sidebarStateChange', { isSidebarIconOnly: isIconOnly, isSidebarHovering: isSidebarHovering.value });
@@ -416,4 +426,18 @@ onMounted(() => {
 onUnmounted(() => {
   smQuery.removeEventListener('change', handleBreakpointChange);
 })
+
+watch(() => props.forceIconOnly, (force) => {
+  if (isMobile.value) {
+    isSidebarIconOnly.value = false;
+    return;
+  }
+  if (props.forceIconOnly === true) {
+    isSidebarIconOnly.value = true;
+  } else if (iconOnlySidebarEnabled.value && localStorage.getItem('afIconOnlySidebar') === 'true') {
+    isSidebarIconOnly.value = true;
+  } else {
+    isSidebarIconOnly.value = false;
+  }
+}, { immediate: true })
 </script>

adminforth/spa/src/components/UserMenuSettingsButton.vue

@@ -36,7 +36,6 @@
 </template>
 
 <script setup lang="ts">
-import 'flag-icon-css/css/flag-icons.min.css';
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 import { computed, ref, onMounted, watch } from 'vue';
 import { useCoreStore } from '@/stores/core';
@@ -59,18 +58,10 @@ const options = computed(() => {
   });
 });
 
-function slugifyString(str: string): string {
-  return str
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, '-')
-    .replace(/[^a-z0-9-_]/g, '-');
-}
-
 function getRoute(option: { slug?: string | null, pageLabel: string }) {
   return {
     name: 'settings',
-    params: { page: option.slug ?? slugifyString(option.pageLabel) }
+    params: { page: option.slug }
   }
 }
 

adminforth/spa/src/router/index.ts

@@ -68,6 +68,7 @@ const router = createRouter({
       component: () => import('@/views/SettingsView.vue'),
       meta: { 
         title: 'Settings', 
+        sidebarAndHeader: 'preferIconOnly',
       },
     },
     /* IMPORTANT:ADMINFORTH ROUTES */

adminforth/spa/src/views/SettingsView.vue

@@ -4,14 +4,14 @@
       <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:'+settingPageSlotName(c,i)]>
+      <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:[settingPageSlotName(c,i)]>
+      <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"
@@ -52,15 +52,6 @@ async function initRouter() {
   routerIsReady.value = true;
 }
 
-function settingPageSlotName(c: { slug?: string; pageLabel?: string }, idx: number) {
-  const base = (c.slug && c.slug.trim()) || (c.pageLabel && c.pageLabel.trim()) || `tab-${idx}`;
-  return base
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, '-')
-    .replace(/[^a-z0-9-_]/g, '-') || `tab-${idx}`;
-}
-
 watch(dropdownUserButton, (el) => {
   if (el) {
     const dd = new Dropdown(
@@ -103,19 +94,10 @@ function setURL(item: {
   pageLabel: string;
   slug?: string | undefined;
 }) {
-  const slug = item?.slug;
-  if (slug) {
-    router.replace({
-      name: 'settings',
-      params: { page: slug }
-    });
-  } else {
-    const slugified = slugifyString(item.pageLabel);
-    router.replace({
-      name: 'settings',
-      params: { page: slugified }
-    });
-  }
+  router.replace({
+    name: 'settings',
+    params: { page: item?.slug }
+  });
 }
 
 function handleURLChange(val: string | null) {