Passkeys docs

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

@@ -205,4 +205,166 @@ plugins: [
         }),
 ],
 ...
-```
+```
+
+## Passkeys setup
+
+If you want to use both passkeys and TOTP simultaneously, you can set them up as follows:
+
+First, you need to create a passkeys table in your schema.prisma file:
+
+```ts title='./schema.prisma'
+  //diff-add
+  model passkeys {
+  //diff-add
+    credential_id           String @id 
+  //diff-add
+    user_id                 String
+  //diff-add
+    meta                    String
+  //diff-add
+    @@index([user_id])
+  //diff-add
+  }
+```
+
+And make migration:
+
+```bash
+npm run makemigration -- --name add-passkeys ; npm run migrate:local
+```
+
+
+Next, you need to create a new resource for passkeys:
+
+```ts title='./resources/passkeys.ts'
+  import { AdminForthDataTypes, AdminForthResourceInput } from "../../adminforth";
+
+  export default {
+    dataSource: 'maindb',
+    table: 'passkeys',
+    resourceId: 'passkeys',
+    label: 'Passkeys',
+    columns: [
+      {
+        name: 'credential_id',
+        label: 'Credential ID',
+        primaryKey: true,
+      },
+      {
+        name: 'user_id',
+        label: 'User ID',
+      },
+      {
+        name: "meta",
+        type: AdminForthDataTypes.JSON,
+        label: "Meta",
+      }
+    ],
+    plugins: [],
+    options: {},
+  } as AdminForthResourceInput;
+```
+
+Add the new resource to index.ts:
+
+```ts title='./index.ts'
+    ...
+  //diff-add
+  import passkeysResource from './resources/passkeys.js';
+    ...
+
+  resources: [
+    ...
+  //diff-add
+  passkeysResource,
+    ...
+  ],
+```
+
+Now, update the settings of the Two-Factor Authentication plugin:
+
+```ts tittle='./resources/adminuser.ts'
+  plugins: [
+    new TwoFactorsAuthPlugin ({ 
+      twoFaSecretFieldName: 'secret2fa', 
+      timeStepWindow: 1       
+      //diff-add
+      passkeys: {
+        //diff-add
+        credentialResourceID: "passkeys",
+        //diff-add
+        credentialIdFieldName: "credential_id",
+        //diff-add
+        credentialMetaFieldName: "meta",
+        //diff-add
+        credentialUserIdFieldName: "user_id",
+        //diff-add
+        settings: {
+          // diff-add
+          // relying party config
+          //diff-add
+            rp: {
+              //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: {
+              //diff-add
+                nameField: "email",
+                //diff-add
+                displayNameField: "email",
+                //diff-add
+            },
+            //diff-add
+            authenticatorSelection: {
+              // diff-add
+              //  Can be "platform" or "cross-platform"
+              //diff-add
+                authenticatorAttachment: "platform",
+                //diff-add
+                requireResidentKey: true,
+                //diff-add
+                userVerification: "required",
+                //diff-add
+            },
+            //diff-add
+        },
+        //diff-add
+      } 
+    }),
+  ],
+```
+> ☝️ most likely you should set `passkeys.settings.rp.id` it from your process.env depending on your env
+
+The setup is complete. To create a passkey:
+
+> 1) Go to the user menu
+> 2) Click settings
+> 3) Select "passkeys"
+
+ ![alt text](Passkeys1.png)
+
+> 4) Add passkey
+
+ ![alt text](Passkeys2.png)
+
+
+After adding passkey you can use passkey, instead of TOTP:
+
+ ![alt text](Passkeys3.png)
+
+> 💡 **Note**: Adding a passkey does not remove the option to use TOTP. If you lose access to your passkey, you can log in using TOTP and reset your passkey.
+
+
+
+

adminforth/modules/codeInjector.ts

@@ -328,10 +328,20 @@ class CodeInjector implements ICodeInjector {
             }
           },`})
     }}
+    const registerSettingPages = ( settingPage ) => {
+      if (!settingPage) {
+        return;
+      }
+      for (const page of settingPage) {
+        if (page.icon) {
+          icons.push(page.icon);
+        }
+      }
+    }
 
     registerCustomPages(this.adminforth.config);
     collectAssetsFromMenu(this.adminforth.config.menu);
-
+    registerSettingPages(this.adminforth.config.auth.userMenuSettingsPages);
     const spaDir = this.getSpaDir();
 
     if (process.env.HEAVY_DEBUG) {
@@ -477,6 +487,12 @@ class CodeInjector implements ICodeInjector {
       });
     }
 
+    if (this.adminforth.config.auth.userMenuSettingsPages) {
+      for (const settingPage of this.adminforth.config.auth.userMenuSettingsPages) {
+        checkInjections([{ file: settingPage.component }]);
+      }
+    }
+
 
     customResourceComponents.forEach((filePath) => {
       const componentName = getComponentNameFromPath(filePath);

adminforth/modules/configValidator.ts

@@ -999,6 +999,11 @@ export default class ConfigValidator implements IConfigValidator {
         const similar = suggestIfTypo(newConfig.resources.map((res) => res.resourceId ), newConfig.auth.usersResourceId);
         throw new Error(`Resource with id "${newConfig.auth.usersResourceId}" not found. ${similar ? `Did you mean "${similar}"?` : ''}`);
       }
+      if (newConfig.auth.userMenuSettingsPages) {
+        for (const page of newConfig.auth.userMenuSettingsPages) {
+          this.validateComponent({file: page.component}, errors);
+        }
+      }
 
       // normalize beforeLoginConfirmation hooks
       const blc = this.inputConfig.auth.beforeLoginConfirmation;

adminforth/modules/restApi.ts

@@ -375,6 +375,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
           announcementBadge,
           globalInjections: this.adminforth.config.customization.globalInjections,
           userFullnameField: this.adminforth.config.auth.userFullNameField,
+          settingPages: this.adminforth.config.auth.userMenuSettingsPages,
         }
 
         // translate menu labels

adminforth/spa/src/App.vue

@@ -59,6 +59,9 @@
                       :adminUser="coreStore.adminUser"
                     />
                   </li>
+                  <li v-if="coreStore?.config?.settingPages && coreStore.config.settingPages.length > 0">
+                    <UserMenuSettingsButton />
+                  </li>
                   <li>
                     <button @click="logout" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-html dark:text-darkSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextActive w-full" role="menuitem">{{ $t('Sign out') }}</button>
                   </li>
@@ -268,7 +271,7 @@ import type { AdminForthConfigMenuItem, AnnouncementBadgeResponse } from './type
 import { Tooltip } from '@/afcl';
 import { initFrontedAPI } from '@/adminforth';
 import adminforth from '@/adminforth';
-
+import UserMenuSettingsButton from './components/UserMenuSettingsButton.vue';
 
 const coreStore = useCoreStore();
 const toastStore = useToastStore();

adminforth/spa/src/adminforth.ts

@@ -120,23 +120,27 @@ class FrontendAPI implements FrontendAPIInterface {
   listFilterValidation(filter: FilterParams): boolean {
     if(router.currentRoute.value.meta.type !== 'list'){
       throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
-    } else {
-      console.log(this.coreStore.resourceColumnsWithFilters,'core store')
-      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumnCommon) => col.name === filter.field)
-      if(!filterField){
-          throw new Error(`Field ${filter.field} is not available for filtering`)
-      }
-
     }
     return true
   }
 
   setListFilter(filter: FilterParams): void {
     if(this.listFilterValidation(filter)){
-      if(this.filtersStore.filters.some((f: any) => {return f.field === filter.field && f.operator === filter.operator})){
-        throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
+      const existingFilterIndex = this.filtersStore.filters.findIndex((f: any) => {
+        return f.field === filter.field && f.operator === filter.operator
+      });
+
+      if(existingFilterIndex !== -1){
+        // Update existing filter instead of throwing error
+        const filters = [...this.filtersStore.filters];
+        if (filter.value === undefined) {
+          filters.splice(existingFilterIndex, 1);
+        } else {
+          filters[existingFilterIndex] = filter;
+        }
+        this.filtersStore.setFilters(filters);
       } else {
-        this.filtersStore.setFilter(filter)
+        this.filtersStore.setFilter(filter);
       }
     }
   }

adminforth/spa/src/afcl/VerticalTabs.vue

@@ -4,7 +4,7 @@
       <li v-for="tab in tabs" :key="`${tab}-tab-controll`">
         <a 
           href="#"
-          @click="activeTab = tab"
+          @click="setActiveTab(tab)"
           class="inline-flex items-center px-4 py-3 rounded-lg w-full"
           :class="tab === activeTab ? 'text-lightVerticalTabsTextActive bg-lightVerticalTabsBackgroundActive active dark:bg-darkVerticalTabsBackgroundActive dark:text-darkVerticalTabsTextActive' : 'text-lightVerticalTabsText dark:text-darkVerticalTabsText hover:text-lightVerticalTabsTextHover bg-lightVerticalTabsBackground hover:bg-lightVerticalTabsBackgroundHover dark:bg-darkVerticalTabsBackground dark:hover:bg-darkVerticalTabsBackgroundHover dark:hover:darkVerticalTabsTextHover'"
           aria-current="page"
@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, useSlots, ref, type Ref } from 'vue';
+import { onMounted, useSlots, ref, type Ref } from 'vue';
   const tabs : Ref<string[]> = ref([]);
   const activeTab = ref('');
   const props = defineProps({
@@ -31,6 +31,11 @@
   const emites = defineEmits([
     'update:activeTab',
   ]);
+
+  defineExpose({
+    setActiveTab
+  });
+
   onMounted(() => {
     const slots = useSlots();
     tabs.value = Object.keys(slots).reduce((tbs: string[], tb: string) => {
@@ -44,6 +49,10 @@
     }
   });
 
-
-
+  function setActiveTab(tab: string) {
+    if (tabs.value.includes(tab)) {
+      activeTab.value = tab;
+      emites('update:activeTab', tab);
+    }
+  }
 </script>

adminforth/spa/src/components/Filters.vue

@@ -136,7 +136,7 @@
 
    <div class="flex justify-end gap-2">
       <button 
-        :disabled="!filtersStore.filters.length"
+        :disabled="!filtersStore.visibleFiltersCount"
         type="button" 
         class="flex items-center py-1 px-3 text-sm font-medium text-lightFiltersClearAllButtonText focus:outline-none bg-lightFiltersClearAllButtonBackground rounded border border-lightFiltersClearAllButtonBorder hover:bg-lightFiltersClearAllButtonBackgroundHover hover:text-lightFiltersClearAllButtonTextHover focus:z-10 focus:ring-4 focus:ring-lightFiltersClearAllButtonFocus dark:focus:ring-darkFiltersClearAllButtonFocus dark:bg-darkFiltersClearAllButtonBackground dark:text-darkFiltersClearAllButtonText dark:border-darkFiltersClearAllButtonBorder dark:hover:text-darkFiltersClearAllButtonTextHover dark:hover:bg-darkFiltersClearAllButtonBackgroundHover disabled:opacity-50 disabled:cursor-not-allowed"
         @click="clear">{{ $t('Clear all') }}</button>