@adminforth/two-factors-auth 5.0.0 → 7.0.0

package/custom/TwoFactorsSetup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"
+  <div class="relative flex items-center justify-center min-h-screen bg-lightHtml dark:bg-darkHtml"
     :style="coreStore.config?.loginBackgroundImage && coreStore.config?.loginBackgroundPosition === 'over' ? {
       'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
       'background-size': 'cover',
@@ -16,37 +16,38 @@
         :error="codeError"
       >
         <div>
-          <p class="mb-3 flex items-center gap-2.5 text-sm font-medium text-gray-900 dark:text-white">
+          <p class="mb-3 flex items-center gap-2.5 text-sm font-medium text-lightInputText dark:text-darkInputText">
             <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-full bg-lightPrimary/10 text-xs font-semibold text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">1</span>
             {{ $t('Scan the QR code with your authenticator app') }}
           </p>
-          <div class="flex items-center gap-4 rounded-lg border border-lightDialogBreakLine bg-gray-50 p-3.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
+          <div class="flex items-center gap-4 rounded-lg border border-lightDialogBreakLine bg-lightSecondaryDarken p-3.5 dark:border-darkDialogBreakLine dark:bg-darkSecondaryLighten">
+            <!-- a QR code needs a white ground to be scanned, in the dark theme too -->
             <div class="w-32 h-32 shrink-0 rounded-lg bg-white p-2">
               <img v-if="totpQrCode" :src="totpQrCode" class="af-qr-code w-full h-full" alt="QR code" />
             </div>
             <div class="flex min-w-0 flex-col gap-2">
-              <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">{{ $t('Setting up on this device?') }}</p>
-              <a :href="totpUri" class="inline-flex items-center gap-1.5 text-sm font-medium text-lightPrimary hover:underline dark:text-darkPrimary">
+              <p class="text-sm leading-5 text-lightInputIconColor dark:text-darkInputIconColor">{{ $t('Setting up on this device?') }}</p>
+              <Link :to="totpUri" class="inline-flex items-center gap-1.5 text-sm">
                 {{ $t('Open in authenticator app') }}
-                <IconArrowUpRightFromSquareOutline class="w-4 h-4" />
-              </a>
+                <IconExternalLink class="w-4 h-4" />
+              </Link>
             </div>
           </div>
         </div>
 
         <div>
-          <p class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ $t('Or enter the key manually') }}</p>
-          <div class="flex items-center gap-2 rounded-lg border border-lightDialogBreakLine bg-gray-50 py-1.5 pl-3.5 pr-1.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
-            <span class="af-2fa-secret flex-1 min-w-0 select-all break-all font-mono text-sm tracking-wider text-gray-800 dark:text-gray-100">{{ totp.newSecret }}</span>
-            <button type="button" :aria-label="$t('Copy key')" class="af-2fa-copy-btn inline-flex w-9 h-9 shrink-0 items-center justify-center rounded-lg text-gray-500 hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover dark:text-gray-400 dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover" @click="onCopyClick">
-              <IconFileCopyOutline class="w-5 h-5" />
-            </button>
+          <p class="mb-2 text-xs font-medium uppercase tracking-wider text-lightInputIconColor dark:text-darkInputIconColor">{{ $t('Or enter the key manually') }}</p>
+          <div class="flex items-center gap-2 rounded-lg border border-lightDialogBreakLine bg-lightSecondaryDarken py-1.5 pl-3.5 pr-1.5 dark:border-darkDialogBreakLine dark:bg-darkSecondaryLighten">
+            <span class="af-2fa-secret flex-1 min-w-0 select-all break-all font-mono text-sm tracking-wider text-lightInputText dark:text-darkInputText">{{ totp.newSecret }}</span>
+            <Button type="button" variant="ghost" iconOnly :aria-label="$t('Copy key')" class="af-2fa-copy-btn" @click="onCopyClick">
+              <IconCopy aria-hidden="true" />
+            </Button>
           </div>
         </div>
 
         <TwoFaCodeInput ref="codeInput" :invalid="Boolean(codeError)" @complete="handleOnComplete">
           <template #label>
-            <p class="mb-3 flex items-center gap-2.5 text-sm font-medium text-gray-900 dark:text-white">
+            <p class="mb-3 flex items-center gap-2.5 text-sm font-medium text-lightInputText dark:text-darkInputText">
               <span class="flex w-6 h-6 shrink-0 items-center justify-center rounded-full bg-lightPrimary/10 text-xs font-semibold text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">2</span>
               {{ $t('Enter the 6-digit code from the app') }}
             </p>
@@ -54,9 +55,9 @@
         </TwoFaCodeInput>
 
         <template #footer>
-          <button v-if="skipAllowed" type="button" class="af-2fa-skip-btn inline-flex h-11 items-center whitespace-nowrap text-sm font-medium text-gray-600 hover:underline dark:text-gray-300" @click="handleSkip">
+          <Button v-if="skipAllowed" type="button" variant="ghost" class="af-2fa-skip-btn -ms-3.5" @click="handleSkip">
             {{ $t('Skip for now') }}
-          </button>
+          </Button>
           <LinkButton to="/login" variant="secondary" class="af-2fa-back-to-login ms-auto whitespace-nowrap">{{ $t('Back to login') }}</LinkButton>
         </template>
       </TwoFaCard>
@@ -70,19 +71,16 @@
 import { onMounted, ref, computed, onBeforeMount } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
-import { IconArrowUpRightFromSquareOutline, IconEyeSolid, IconEyeSlashSolid, IconFileCopyOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconCopy, IconExternalLink } from '@iconify-prerendered/vue-lucide';
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
-import { showErrorTost } from '@/composables/useFrontendApi';
-import { LinkButton } from '@/afcl';
-import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';
+import { Button, Link, LinkButton } from '@/afcl';
 import adminforth from '@/adminforth';
 import TwoFaCard from './TwoFaCard.vue';
 import TwoFaCodeInput from './TwoFaCodeInput.vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { handlePasskeyAlert } from './utils.js';
-import ErrorMessage from '@/components/ErrorMessage.vue';
 import { useQRCode } from '@vueuse/integrations/useQRCode'
 
 const { t } = useI18n();
@@ -113,9 +111,6 @@ const user = useUserStore();
 
 const skipAllowed = ref(false);
 
-// use this simple function to automatically focus on the next input
-
-const showPw = ref(false);
 
 const error = ref(null);
 const totp = ref<{ issuer?: string; userName?: string; newSecret?: string }>({});

package/custom/package-lock.json

@@ -9,12 +9,10 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@loltech/vue3-2fa-code-input": "^1.1.0",
         "@vueuse/core": "^14.3.0",
         "@vueuse/integrations": "^14.4.0",
         "dayjs": "^1.11.18",
-        "qrcode": "^1.5.4",
-        "vue3-otp-input": "^0.5.21"
+        "qrcode": "^1.5.4"
       }
     },
     "node_modules/@babel/helper-string-parser": {
@@ -22,6 +20,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -31,6 +30,7 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -40,6 +40,7 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
       "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.29.0"
       },
@@ -55,6 +56,7 @@
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
       "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
         "@babel/helper-validator-identifier": "^7.28.5"
@@ -67,13 +69,8 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "license": "MIT"
-    },
-    "node_modules/@loltech/vue3-2fa-code-input": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@loltech/vue3-2fa-code-input/-/vue3-2fa-code-input-1.1.0.tgz",
-      "integrity": "sha512-styyoQjsARSeVf6E5qMvYIVkLRrwYtfL8xDl5W+g9wKF8qlr2XGU2gi9maEg0X4Us41kJryXBzfRMUcv5tKIBA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.21",
@@ -86,6 +83,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.30.tgz",
       "integrity": "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.29.0",
         "@vue/shared": "3.5.30",
@@ -99,6 +97,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.30.tgz",
       "integrity": "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-core": "3.5.30",
         "@vue/shared": "3.5.30"
@@ -109,6 +108,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.30.tgz",
       "integrity": "sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.29.0",
         "@vue/compiler-core": "3.5.30",
@@ -126,6 +126,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.30.tgz",
       "integrity": "sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.30",
         "@vue/shared": "3.5.30"
@@ -136,6 +137,7 @@
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.30.tgz",
       "integrity": "sha512-179YNgKATuwj9gB+66snskRDOitDiuOZqkYia7mHKJaidOMo/WJxHKF8DuGc4V4XbYTJANlfEKb0yxTQotnx4Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/shared": "3.5.30"
       }
@@ -145,6 +147,7 @@
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.30.tgz",
       "integrity": "sha512-e0Z+8PQsUTdwV8TtEsLzUM7SzC7lQwYKePydb7K2ZnmS6jjND+WJXkmmfh/swYzRyfP1EY3fpdesyYoymCzYfg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/reactivity": "3.5.30",
         "@vue/shared": "3.5.30"
@@ -155,6 +158,7 @@
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.30.tgz",
       "integrity": "sha512-2UIGakjU4WSQ0T4iwDEW0W7vQj6n7AFn7taqZ9Cvm0Q/RA2FFOziLESrDL4GmtI1wV3jXg5nMoJSYO66egDUBw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/reactivity": "3.5.30",
         "@vue/runtime-core": "3.5.30",
@@ -167,6 +171,7 @@
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.30.tgz",
       "integrity": "sha512-v+R34icapydRwbZRD0sXwtHqrQJv38JuMB4JxbOxd8NEpGLny7cncMp53W9UH/zo4j8eDHjQ1dEJXwzFQknjtQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.5.30",
         "@vue/shared": "3.5.30"
@@ -179,7 +184,8 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.30.tgz",
       "integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@vueuse/core": {
       "version": "14.4.0",
@@ -351,7 +357,8 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dayjs": {
       "version": "1.11.19",
@@ -385,6 +392,7 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
       "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
       "license": "BSD-2-Clause",
+      "peer": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -396,7 +404,8 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/find-up": {
       "version": "4.1.0",
@@ -446,6 +455,7 @@
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
@@ -461,6 +471,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -517,7 +528,8 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/pngjs": {
       "version": "5.0.0",
@@ -547,6 +559,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -599,6 +612,7 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "license": "BSD-3-Clause",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -634,6 +648,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.30.tgz",
       "integrity": "sha512-hTHLc6VNZyzzEH/l7PFGjpcTvUgiaPK5mdLkbjrTeWSRcEfxFrv56g/XckIYlE9ckuobsdwqd5mk2g1sBkMewg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.30",
         "@vue/compiler-sfc": "3.5.30",
@@ -650,18 +665,6 @@
         }
       }
     },
-    "node_modules/vue3-otp-input": {
-      "version": "0.5.40",
-      "resolved": "https://registry.npmjs.org/vue3-otp-input/-/vue3-otp-input-0.5.40.tgz",
-      "integrity": "sha512-3AMYHqNz9ZDa9y7ICwcEcsJG7XdZGaLAr6IRLIl3whvseFE95F5Duc9q963HcqEbu8CeMWilkmbAt/0eZOZxow==",
-      "license": "MIT",
-      "dependencies": {
-        "vue": "^3.4.27"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.*"
-      }
-    },
     "node_modules/which-module": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",

package/custom/package.json

@@ -10,11 +10,9 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@loltech/vue3-2fa-code-input": "^1.1.0",
     "@vueuse/core": "^14.3.0",
     "@vueuse/integrations": "^14.4.0",
     "dayjs": "^1.11.18",
-    "qrcode": "^1.5.4",
-    "vue3-otp-input": "^0.5.21"
+    "qrcode": "^1.5.4"
   }
 }

package/custom/pnpm-lock.yaml

@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@loltech/vue3-2fa-code-input':
-        specifier: ^1.1.0
-        version: 1.1.0
       '@vueuse/core':
         specifier: ^14.3.0
         version: 14.4.0(vue@3.5.29)
@@ -23,9 +20,6 @@ importers:
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
-      vue3-otp-input:
-        specifier: ^0.5.21
-        version: 0.5.40(vue@3.5.29)
 
 packages:
 
@@ -49,9 +43,6 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@loltech/vue3-2fa-code-input@1.1.0':
-    resolution: {integrity: sha512-styyoQjsARSeVf6E5qMvYIVkLRrwYtfL8xDl5W+g9wKF8qlr2XGU2gi9maEg0X4Us41kJryXBzfRMUcv5tKIBA==}
-
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
@@ -262,11 +253,6 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
-  vue3-otp-input@0.5.40:
-    resolution: {integrity: sha512-3AMYHqNz9ZDa9y7ICwcEcsJG7XdZGaLAr6IRLIl3whvseFE95F5Duc9q963HcqEbu8CeMWilkmbAt/0eZOZxow==}
-    peerDependencies:
-      vue: ^3.0.*
-
   vue@3.5.29:
     resolution: {integrity: sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==}
     peerDependencies:
@@ -310,8 +296,6 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
-  '@loltech/vue3-2fa-code-input@1.1.0': {}
-
   '@types/web-bluetooth@0.0.21': {}
 
   '@vue/compiler-core@3.5.29':
@@ -488,10 +472,6 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
-  vue3-otp-input@0.5.40(vue@3.5.29):
-    dependencies:
-      vue: 3.5.29
-
   vue@3.5.29:
     dependencies:
       '@vue/compiler-dom': 3.5.29

package/dist/custom/LoginWithPasskeyButton.vue

@@ -1,11 +1,12 @@
 <template>
 
+    <!-- right after the OAuth buttons it joins them with their 8px gap instead of the 16px between login page injections -->
     <Button
         variant="secondary"
-        class="af-login-with-passkey-btn w-full gap-2"
+        class="af-login-with-passkey-btn w-full gap-2 [.af-oauth-login+&]:!mt-2"
         @click="handleLoginWithPasskey"
     >
-      <IconFingerprintOutline class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" />
+      <IconFingerprint class="w-4 h-4 text-lightPrimary dark:text-darkPrimary" />
       {{ $t('Continue with Passkey') }}
     </Button>
 
@@ -14,7 +15,7 @@
 
 
 <script setup lang="ts">
-    import { IconFingerprintOutline } from '@iconify-prerendered/vue-flowbite';
+    import { IconFingerprint } from '@iconify-prerendered/vue-lucide';
     import { getPasskey } from "./utils.js";
     import { callAdminForthApi } from '@/utils';
     import { useUserStore } from '@/stores/user';

package/dist/custom/TwoFAModal.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="af-two-factors-modal fixed inset-0 z-[9999] flex items-center justify-center bg-lightScrim dark:bg-darkScrim top-0 bottom-0 left-0 right-0 px-4"
     v-if="modelShow && (isLoading === false)">
+      <!-- the card floats over the page here, so it takes the shadow of floating layers -->
       <TwoFaCard
+        class="shadow-popover dark:shadow-darkPopover"
         :class="`af-two-factor-modal-${modalMode}`"
         :title="dialogTitle"
         :subtitle="subtitles[modalMode]"
@@ -9,45 +11,45 @@
         closable
         @close="onCancel"
       >
-        <pre v-if="dialogDetails" class="af-2fa-details max-h-60 overflow-auto rounded-lg border border-lightDialogBreakLine bg-gray-50 p-3 text-xs text-gray-800 dark:border-darkDialogBreakLine dark:bg-gray-800 dark:text-gray-100">{{ dialogDetails }}</pre>
+        <pre v-if="dialogDetails" class="af-2fa-details max-h-60 overflow-auto rounded-lg border border-lightDialogBreakLine bg-lightSecondaryDarken p-3 text-xs text-lightInputText dark:border-darkDialogBreakLine dark:bg-darkSecondaryLighten dark:text-darkInputText">{{ dialogDetails }}</pre>
 
         <div v-if="confirmItems.length" class="af-2fa-actions">
-          <p class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ $t('You are approving') }}</p>
-          <ul class="af-2fa-actions-list max-h-60 overflow-auto divide-y divide-lightDialogBreakLine rounded-lg border border-lightDialogBreakLine bg-gray-50 dark:divide-darkDialogBreakLine dark:border-darkDialogBreakLine dark:bg-gray-800">
+          <p class="mb-2 text-xs font-medium uppercase tracking-wider text-lightInputIconColor dark:text-darkInputIconColor">{{ $t('You are approving') }}</p>
+          <ul class="af-2fa-actions-list max-h-60 overflow-auto divide-y divide-lightDialogBreakLine rounded-lg border border-lightDialogBreakLine bg-lightSecondaryDarken dark:divide-darkDialogBreakLine dark:border-darkDialogBreakLine dark:bg-darkSecondaryLighten">
             <li v-for="(item, i) in confirmItems" :key="i" class="flex gap-3 px-3.5 py-3">
               <span aria-hidden="true" class="mt-2 w-1.5 h-1.5 shrink-0 rounded-full bg-lightPrimary dark:bg-darkPrimary"></span>
-              <span class="min-w-0 text-base leading-6 break-words text-gray-800 dark:text-gray-100">{{ item }}</span>
+              <span class="min-w-0 text-base leading-6 break-words text-lightInputText dark:text-darkInputText">{{ item }}</span>
             </li>
           </ul>
         </div>
 
         <TwoFaCodeInput v-if="modalMode === 'totp'" ref="codeInput" :invalid="Boolean(codeError)" @complete="sendConfirmationResult" />
         <TwoFaHint v-else-if="modalMode === 'passkey'" class="af-2fa-passkey-hint">
-          <template #icon><IconFingerprintOutline class="w-6 h-6" /></template>
+          <template #icon><IconFingerprint class="w-5 h-5" /></template>
           {{ $t('Your browser will ask for Touch ID, Windows Hello or a security key.') }}
         </TwoFaHint>
-        <p v-else role="status" class="af-2fa-grace-notice flex items-start gap-2.5 rounded-lg border border-green-200 bg-green-50 px-3.5 py-3 text-sm leading-5 text-green-800 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300">
-          <IconCheckCircleOutline class="w-5 h-5 shrink-0" />
+        <p v-else role="status" class="af-2fa-grace-notice flex items-start gap-2.5 rounded-lg border border-lightSuccessBorder bg-lightSuccessSoft px-3.5 py-3 text-sm leading-5 text-lightSuccess dark:border-darkSuccessBorder dark:bg-darkSuccessSoft dark:text-darkSuccess">
+          <IconCircleCheck class="w-5 h-5 shrink-0" />
           {{ $t('You verified recently, so no code is needed.') }}
         </p>
 
         <template #footer>
           <TwoFaLinkButton v-if="modalMode === 'totp' && doesUserHavePasskeys" class="af-2fa-switch-to-passkey" @click="modalMode = 'passkey'">
-            <IconFingerprintOutline class="w-4 h-4" />
+            <IconFingerprint class="w-4 h-4" />
             {{ $t('Use passkey instead') }}
           </TwoFaLinkButton>
           <TwoFaLinkButton v-else-if="modalMode === 'passkey'" class="af-2fa-switch-to-totp" @click="modalMode = 'totp'">
-            <IconMobilePhoneOutline class="w-4 h-4" />
+            <IconSmartphone class="w-4 h-4" />
             {{ $t('Use code instead') }}
           </TwoFaLinkButton>
           <div class="af-2fa-buttons ms-auto flex gap-2 whitespace-nowrap">
             <Button variant="secondary" class="af-2fa-cancel-btn" @click="onCancel">{{ $t('Cancel') }}</Button>
             <Button v-if="modalMode === 'passkey'" @click="usePasskeyButtonClick" :disabled="isFetchingPasskey" :loader="isFetchingPasskey" class="af-2fa-passkey-btn gap-2">
-              <IconFingerprintOutline class="w-4 h-4" />
+              <IconFingerprint class="w-4 h-4" />
               {{ $t('Use passkey') }}
             </Button>
             <Button v-else-if="modalMode === 'grace'" class="af-2fa-approve-btn gap-2" @click="approveInGracePeriod">
-              <IconCheckOutline class="w-4 h-4" />
+              <IconCheck class="w-4 h-4" />
               {{ approveLabel }}
             </Button>
           </div>
@@ -63,12 +65,7 @@
   import { useI18n } from 'vue-i18n';
   import { callAdminForthApi } from '@/utils';
   import { Link, Button } from '@/afcl';
-  import {
-    IconCheckCircleOutline,
-    IconCheckOutline,
-    IconFingerprintOutline,
-    IconMobilePhoneOutline,
-  } from '@iconify-prerendered/vue-flowbite';
+  import { IconCheck, IconCircleCheck, IconFingerprint, IconSmartphone } from '@iconify-prerendered/vue-lucide';
   import { getPasskey } from './utils.js'
   import TwoFaCard from './TwoFaCard.vue';
   import TwoFaCodeInput from './TwoFaCodeInput.vue';

package/dist/custom/TwoFaCard.vue

@@ -1,34 +1,36 @@
 <template>
-  <div class="af-2fa-card relative flex flex-col w-full max-w-md overflow-hidden rounded-xl border border-lightDialogBreakLine bg-lightDialogBackgorund shadow-2xl dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund">
-    <div class="af-2fa-header flex items-start gap-3.5 border-b border-lightDialogBreakLine py-5 pl-6 dark:border-darkDialogBreakLine" :class="closable ? 'pr-4' : 'pr-6'">
-      <div class="af-2fa-icon-wrap flex w-10 h-10 shrink-0 items-center justify-center rounded-lg bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
-        <IconShieldCheckOutline class="af-2fa-shield-icon w-6 h-6" />
-      </div>
-      <div class="af-2fa-title-wrap flex-1 min-w-0">
-        <p class="af-2fa-title break-words text-lg leading-6 font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ title }}</p>
-        <p class="af-2fa-subtitle mt-0.5 text-sm leading-5 text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
-      </div>
-      <button v-if="closable" type="button" :aria-label="$t('Cancel')" class="af-2fa-close-btn -mt-1 inline-flex w-9 h-9 shrink-0 items-center justify-center rounded-lg text-lightDialogCloseButton hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover" @click="emit('close')">
-        <IconCloseOutline class="w-5 h-5" />
-      </button>
-    </div>
-
-    <div class="af-2fa-body flex flex-col gap-5 px-6 pt-5 pb-6">
-      <slot />
-      <p v-if="error" role="alert" class="af-2fa-code-error -mt-2.5 flex items-center gap-1.5 text-sm text-red-600 dark:text-red-400">
-        <IconExclamationCircleOutline class="w-4 h-4 shrink-0" />
-        {{ error }}
-      </p>
-    </div>
-
-    <div v-if="$slots.footer" class="af-2fa-footer flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-lightDialogBreakLine bg-gray-50 py-3 pl-6 pr-5 dark:border-darkDialogBreakLine dark:bg-gray-800/50">
+  <DialogPanel
+    class="af-2fa-card"
+    :title="title"
+    :subtitle="subtitle"
+    :error="error"
+    :closable="closable"
+    :classes="{
+      header: 'af-2fa-header',
+      icon: 'af-2fa-icon-wrap',
+      titleWrap: 'af-2fa-title-wrap',
+      title: 'af-2fa-title',
+      subtitle: 'af-2fa-subtitle',
+      close: 'af-2fa-close-btn',
+      body: 'af-2fa-body',
+      error: 'af-2fa-code-error',
+      footer: 'af-2fa-footer',
+    }"
+    @close="emit('close')"
+  >
+    <template #icon>
+      <IconShieldCheck class="af-2fa-shield-icon" />
+    </template>
+    <slot />
+    <template v-if="$slots.footer" #footer>
       <slot name="footer" />
-    </div>
-  </div>
+    </template>
+  </DialogPanel>
 </template>
 
 <script setup lang="ts">
-import { IconCloseOutline, IconExclamationCircleOutline, IconShieldCheckOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconShieldCheck } from '@iconify-prerendered/vue-lucide';
+import { DialogPanel } from '@/afcl';
 
 defineProps<{
   title: string;