@adminforth/two-factors-auth 4.8.3 → 6.0.0

package/build.log

@@ -21,5 +21,5 @@ custom/tsconfig.json
 custom/use2faApi.ts
 custom/utils.js
 
-sent 306,855 bytes  received 324 bytes  614,358.00 bytes/sec
-total size is 305,604  speedup is 0.99
+sent 301,180 bytes  received 324 bytes  603,008.00 bytes/sec
+total size is 299,946  speedup is 0.99

package/custom/LoginWithPasskeyButton.vue

@@ -5,7 +5,7 @@
         class="af-login-with-passkey-btn w-full gap-2"
         @click="handleLoginWithPasskey"
     >
-      <IconFingerprintOutline class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" />
+      <IconFingerprint class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" />
       {{ $t('Continue with Passkey') }}
     </Button>
 
@@ -14,7 +14,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/custom/TwoFAModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="af-two-factors-modal fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 top-0 bottom-0 left-0 right-0 px-4"
+    <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)">
       <TwoFaCard
         :class="`af-two-factor-modal-${modalMode}`"
@@ -9,45 +9,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 +63,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/custom/TwoFaCard.vue

@@ -1,34 +1,44 @@
 <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-card relative flex flex-col w-full max-w-md overflow-hidden rounded-xl border border-lightDialogBreakLine bg-lightDialogBackgorund shadow-popover dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund dark:shadow-darkPopover">
     <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" />
+        <IconShieldCheck class="af-2fa-shield-icon w-5 h-5" />
       </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>
+        <p class="af-2fa-subtitle mt-0.5 text-sm leading-5 text-lightInputIconColor dark:text-darkInputIconColor">{{ 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>
+      <Button
+        v-if="closable"
+        type="button"
+        variant="ghost"
+        size="sm"
+        iconOnly
+        :aria-label="$t('Cancel')"
+        class="af-2fa-close-btn -mt-0.5 text-lightDialogCloseButton hover:text-lightDialogCloseButtonHover hover:bg-lightDialogCloseButtonHoverBackground dark:text-darkDialogCloseButton dark:hover:text-darkDialogCloseButtonHover dark:hover:bg-darkDialogCloseButtonHoverBackground"
+        @click="emit('close')"
+      >
+        <IconX aria-hidden="true" />
+      </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" />
+      <p v-if="error" role="alert" class="af-2fa-code-error -mt-2.5 flex items-center gap-1.5 text-sm text-lightDanger dark:text-darkDanger">
+        <IconCircleAlert 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">
+    <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-lightFormHeading py-3 pl-6 pr-5 dark:border-darkDialogBreakLine dark:bg-darkFormHeading">
       <slot name="footer" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { IconCloseOutline, IconExclamationCircleOutline, IconShieldCheckOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconCircleAlert, IconShieldCheck, IconX } from '@iconify-prerendered/vue-lucide';
+import { Button } from '@/afcl';
 
 defineProps<{
   title: string;

package/custom/TwoFaCodeInput.vue

@@ -2,29 +2,31 @@
   <div class="af-2fa-code">
     <div :id="LABEL_ID">
       <slot name="label">
-        <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">{{ $t('Authenticator code') }}</p>
+        <p class="mb-2 text-sm font-medium text-lightInputText dark:text-darkInputText">{{ $t('Authenticator code') }}</p>
       </slot>
     </div>
-    <div ref="otpRoot" class="af-2fa-otp-root text-gray-300 dark:text-gray-500">
-      <v-otp-input
-        ref="otpInput"
-        :input-classes="inputClasses"
-        :num-inputs="CODE_LENGTH"
-        inputType="number"
-        inputmode="numeric"
-        :should-auto-focus="true"
-        :should-focus-order="true"
-        @on-complete="emit('complete', $event)"
+    <div class="af-2fa-otp-root flex justify-center">
+      <CodeInput
+        ref="codeInput"
+        id="mfaCode"
+        name="mfaCode"
+        :aria-labelledby="LABEL_ID"
+        :length="CODE_LENGTH"
+        :groupSize="3"
+        :invalid="invalid"
+        autofocus
+        keepFocus
+        @complete="emit('complete', $event)"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import VOtpInput from 'vue3-otp-input';
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { ref } from 'vue';
+import { CodeInput } from '@/afcl';
 
-const props = defineProps<{
+defineProps<{
   invalid?: boolean;
 }>();
 
@@ -34,98 +36,10 @@ const emit = defineEmits<{
 
 const CODE_LENGTH = 6;
 const LABEL_ID = 'mfaCode-label';
-const INPUT_CLASS = 'otp-input';
 
-const otpRoot = ref<HTMLElement | null>(null);
-const otpInput = ref<{ clearInput(): void; fillInput(value: string): void } | null>(null);
-
-const inputClasses = computed(() => [
-  `${INPUT_CLASS} w-12 h-14 p-0 rounded-lg border-2 bg-gray-50 text-center text-2xl font-medium leading-none tabular-nums text-gray-900 outline-none focus:ring-4 dark:bg-gray-800 dark:text-white`,
-  props.invalid
-    ? 'border-red-500 focus:border-red-500 focus:ring-red-500/25 dark:border-red-400 dark:focus:border-red-400'
-    : 'border-gray-300 focus:border-lightPrimary focus:ring-lightPrimary/25 dark:border-gray-600 dark:focus:border-darkPrimary dark:focus:ring-darkPrimary/25',
-].join(' '));
-
-// Focus callbacks are deferred with requestAnimationFrame and may run after unmount, when the root is gone.
-function getInputs(): HTMLInputElement[] {
-  return otpRoot.value ? Array.from(otpRoot.value.querySelectorAll<HTMLInputElement>(`input.${INPUT_CLASS}`)) : [];
-}
-
-function focusFirstEmptyInput() {
-  const inputs = getInputs();
-  (inputs.find((input) => !input.value) ?? inputs[0])?.focus();
-}
-
-// While the code is asked, focus stays in the code inputs, so typing and pasting always go into the code.
-function handleFocusIn(event: FocusEvent) {
-  if (!getInputs().includes(event.target as HTMLInputElement)) {
-    requestAnimationFrame(focusFirstEmptyInput);
-  }
-}
-
-function handleFocusOut() {
-  requestAnimationFrame(() => {
-    if (!getInputs().includes(document.activeElement as HTMLInputElement)) {
-      focusFirstEmptyInput();
-    }
-  });
-}
-
-// A paste into one of the inputs is handled by vue3-otp-input itself.
-function handlePaste(event: ClipboardEvent) {
-  event.preventDefault();
-  if ((event.target as HTMLElement).classList.contains(INPUT_CLASS)) {
-    return;
-  }
-  const pastedText = event.clipboardData?.getData('text') ?? '';
-  if (pastedText.length === CODE_LENGTH) {
-    otpInput.value!.fillInput(pastedText);
-  }
-}
-
-function tagInputs() {
-  getInputs().forEach((input, index) => {
-    input.setAttribute('name', 'mfaCode');
-    input.setAttribute('id', `mfaCode-${index + 1}`);
-    input.setAttribute('autocomplete', 'one-time-code');
-    input.setAttribute('aria-labelledby', LABEL_ID);
-  });
-}
-
-onMounted(() => {
-  tagInputs();
-  focusFirstEmptyInput();
-  document.addEventListener('focusin', handleFocusIn, true);
-  otpRoot.value!.addEventListener('focusout', handleFocusOut, true);
-  window.addEventListener('paste', handlePaste);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('focusin', handleFocusIn, true);
-  otpRoot.value!.removeEventListener('focusout', handleFocusOut, true);
-  window.removeEventListener('paste', handlePaste);
-});
+const codeInput = ref<InstanceType<typeof CodeInput> | null>(null);
 
 defineExpose({
-  clear: () => otpInput.value!.clearInput(),
+  clear: () => codeInput.value!.clear(),
 });
 </script>
-
-<style scoped>
-  /* vue3-otp-input renders its own container and ignores container classes, so it is styled here */
-  :deep(.otp-input-container) {
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-  }
-
-  /* a dash after the 3rd digit splits the code into two groups of three */
-  :deep(.otp-input-container > div:nth-child(3))::after {
-    content: '';
-    width: 0.75rem;
-    height: 2px;
-    margin-left: 0.5rem;
-    border-radius: 1px;
-    background: currentColor;
-  }
-</style>

package/custom/TwoFaHint.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="af-2fa-hint flex items-center gap-3.5 rounded-lg border border-lightDialogBreakLine bg-gray-50 px-4 py-3.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
+  <div class="af-2fa-hint flex items-center gap-3.5 rounded-lg border border-lightDialogBreakLine bg-lightSecondaryDarken px-4 py-3.5 dark:border-darkDialogBreakLine dark:bg-darkSecondaryLighten">
     <span class="af-2fa-hint-icon flex w-11 h-11 shrink-0 items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
       <slot name="icon" />
     </span>
-    <p class="af-2fa-hint-text text-sm leading-5 text-gray-500 dark:text-gray-400">
+    <p class="af-2fa-hint-text text-sm leading-5 text-lightInputIconColor dark:text-darkInputIconColor">
       <slot />
     </p>
   </div>

package/custom/TwoFaLinkButton.vue

@@ -1,5 +1,10 @@
 <template>
-  <button type="button" class="af-2fa-link-btn inline-flex h-11 items-center gap-1.5 whitespace-nowrap text-sm font-medium text-lightPrimary hover:underline dark:text-darkPrimary">
+  <!-- the negative margin lines the label up with the card content -->
+  <Button type="button" variant="ghost" class="af-2fa-link-btn -ms-3.5">
     <slot />
-  </button>
+  </Button>
 </template>
+
+<script setup lang="ts">
+import { Button } from '@/afcl';
+</script>

package/custom/TwoFactorsConfirmation.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,23 +16,23 @@
       >
         <TwoFaCodeInput v-if="confirmationMode === 'code'" ref="codeInput" :invalid="Boolean(codeError)" @complete="handleOnComplete" />
         <TwoFaHint v-else 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>
 
         <template #footer>
           <TwoFaLinkButton v-if="confirmationMode === 'code' && doesUserHavePasskeys" class="af-2fa-switch-to-passkey" @click="router.push({ hash: '#passkey' })">
-            <IconFingerprintOutline class="w-4 h-4" />
+            <IconFingerprint class="w-4 h-4" />
             {{ $t('Use passkey instead') }}
           </TwoFaLinkButton>
           <TwoFaLinkButton v-else-if="confirmationMode === 'passkey'" class="af-2fa-switch-to-totp" @click="router.push({ hash: '#code' })">
-            <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">
             <LinkButton to="/login" variant="secondary" class="af-2fa-back-to-login">{{ $t('Back to login') }}</LinkButton>
             <Button v-if="confirmationMode === 'passkey'" @click="usePasskeyButton" :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>
           </div>
@@ -57,8 +57,7 @@
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router'
   import { useRouter } from 'vue-router';
-  import { IconFingerprintOutline, IconMobilePhoneOutline } from '@iconify-prerendered/vue-flowbite';
-  import ErrorMessage from '@/components/ErrorMessage.vue';
+  import { IconFingerprint, IconSmartphone } from '@iconify-prerendered/vue-lucide';
   import { handlePasskeyAlert } from './utils.js';
   import TwoFaCard from './TwoFaCard.vue';
   import TwoFaCodeInput from './TwoFaCodeInput.vue';

package/custom/TwoFactorsPasskeysSettings.vue

@@ -1,29 +1,30 @@
 <template>
     <div class="af-passkeys flex flex-col justify-center mr-6 md:mr-12">
-        <h2 class="af-passkeys-title flex items-start justify-start leading-none text-gray-800 dark:text-gray-50 text-3xl font-semibold">{{$t('Passkeys')}}</h2>
-        <p class="af-passkeys-subtitle text-sm mt-3 text-gray-500 dark:text-gray-400"> {{$t('Manage your passwordless authentication methods')}} </p>
+        <h2 class="af-passkeys-title text-lg font-semibold tracking-tight text-lightCardTitle dark:text-darkCardTitle">{{$t('Passkeys')}}</h2>
+        <p class="af-passkeys-subtitle mt-1 text-sm text-lightCardDescription dark:text-darkCardDescription"> {{$t('Manage your passwordless authentication methods')}} </p>
 
         <div class="af-passkeys-grid mt-6 flex flex-wrap gap-4">
-            <div
+            <Card
                 v-for="item in passkeys"
                 :key="item.id"
-                class="af-passkey-card flex flex-col w-full h-42 lg:w-72 rounded-xl border border-lightDialogBreakLine bg-lightDialogBackgorund p-4 shadow-sm dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund"
+                size="md"
+                class="af-passkey-card flex flex-col w-full h-42 lg:w-72"
             >
                 <div class="af-passkey-card-header flex items-center gap-3 mb-3">
-                    <div class="af-passkey-card-icon flex w-10 h-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800">
+                    <div class="af-passkey-card-icon flex w-10 h-10 shrink-0 items-center justify-center rounded-lg bg-lightSecondaryDarken dark:bg-darkSecondaryLighten">
                         <img class="max-h-6 max-w-6" :src="coreStore.theme === 'light' ? item.light_icon : item.dark_icon" />
                     </div>
                     <div class="af-passkey-card-info flex-1 min-w-0">
                         <p class="af-passkey-card-name font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText truncate" :title="item.name">{{ item.name }}</p>
-                        <p class="af-passkey-card-type text-xs text-gray-500 dark:text-gray-400">{{$t('Synced passkey')}}</p>
+                        <p class="af-passkey-card-type text-xs text-lightInputIconColor dark:text-darkInputIconColor">{{$t('Synced passkey')}}</p>
                     </div>
-                    <span class="af-passkey-card-badge shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-800 dark:bg-green-500/10 dark:text-green-300">
+                    <span class="af-passkey-card-badge shrink-0 inline-flex items-center px-2 py-0.5 rounded-full border text-xs font-medium border-lightSuccessBorder bg-lightSuccessSoft text-lightSuccess dark:border-darkSuccessBorder dark:bg-darkSuccessSoft dark:text-darkSuccess">
                         {{$t('Active')}}
                     </span>
                 </div>
 
-                <div class="af-passkey-card-last-used text-xs text-gray-500 dark:text-gray-400 mb-4">
-                    <span class="af-passkey-card-last-used-label font-medium text-gray-700 dark:text-gray-300">{{$t('Last used')}}:</span>
+                <div class="af-passkey-card-last-used text-xs text-lightInputIconColor dark:text-darkInputIconColor mb-4">
+                    <span class="af-passkey-card-last-used-label font-medium text-lightInputText dark:text-darkInputText">{{$t('Last used')}}:</span>
                     <span v-if="item.last_used_at" class="af-passkey-card-last-used-date ml-1">{{ formatDateTime(item.last_used_at) }}</span>
                     <span v-else class="af-passkey-card-last-used-never ml-1 italic">{{$t('Never')}}</span>
                 </div>
@@ -32,26 +33,25 @@
                     <Dialog
                         class="edit-passkey-confirmation-dialog w-96"
                         :buttons="[
-                            { label: 'Cancel', options: { class: 'dialog-cancel-button w-full' }, onclick: (dialog) => { passkeysNewName = ''; dialog.hide(); } },
-                            { label: 'Save', options: { class: 'dialog-save-button w-full' }, onclick: (dialog) => { renamePasskey(item.id, passkeysNewName); dialog.hide(); } },
+                            { label: t('Cancel'), options: { class: 'dialog-cancel-button w-full', variant: 'secondary' }, onclick: (dialog) => { passkeysNewName = ''; dialog.hide(); } },
+                            { label: t('Save'), options: { class: 'dialog-save-button w-full' }, onclick: (dialog) => { renamePasskey(item.id, passkeysNewName); dialog.hide(); } },
                         ]"
-                        header="Edit Passkey"
+                        :header="t('Edit Passkey')"
                     >
                         <template #trigger>
                             <Button
                                 type="button"
                                 variant="secondary"
-                                :shadow="false"
                                 @click="passkeysNewName = ''"
-                                class="af-passkey-btn-rename w-full gap-1.5 px-3 py-2 text-sm"
+                                class="af-passkey-btn-rename w-full"
                             >
-                                <IconPenOutline class="w-4 h-4" />
+                                <IconPencil class="w-4 h-4" />
                                 {{$t('Rename')}}
                             </Button>
                         </template>
                         <div class="flex flex-col gap-2">
                             <label class="text-sm font-medium">{{$t('Current name:')}}</label>
-                            <p class="font-medium text-sm text-gray-900 dark:text-white pb-2 truncate" :title="item.name">{{ item.name }}</p>
+                            <p class="font-medium text-sm text-lightInputText dark:text-darkInputText pb-2 truncate" :title="item.name">{{ item.name }}</p>
                             <label class="text-sm font-medium">{{$t('Enter new passkey name:')}}</label>
                             <Input
                                 v-model="passkeysNewName"
@@ -62,25 +62,26 @@
                         </div>
                     </Dialog>
 
-                    <button
+                    <Button
                         type="button"
+                        variant="danger-soft"
                         @click="confirmAndDelete(item.id)"
-                        class="af-passkey-btn-remove flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium rounded-default border border-red-200 dark:border-red-500/30 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors cursor-pointer"
+                        class="af-passkey-btn-remove w-full"
                     >
-                        <IconTrashBinOutline class="w-4 h-4" />
+                        <IconTrash2 class="w-4 h-4" />
                         {{$t('Remove')}}
-                    </button>
+                    </Button>
                 </div>
-            </div>
+            </Card>
 
             <template v-if="isInitialFinished">
                 <Tooltip v-if="!isPasskeySupported && (authenticatorAttachment === 'platform' || authenticatorAttachment === 'both')">
-                    <div class="af-passkey-add-card af-passkey-add-local flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 w-full lg:w-72 min-h-36 opacity-50 pointer-events-none">
+                    <div class="af-passkey-add-card af-passkey-add-local flex flex-col items-center justify-center gap-2 p-4 rounded-lg border border-dashed border-lightInputBorder dark:border-darkInputBorder w-full lg:w-72 min-h-36 opacity-50 cursor-not-allowed">
                         <div class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
-                            <IconPlusOutline class="w-5 h-5" />
+                            <IconPlus class="w-5 h-5" />
                         </div>
-                        <p class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add local passkey')}}</p>
-                        <p class="af-passkey-add-card-subtitle text-xs text-gray-400 dark:text-gray-500 text-center">{{$t('Register this device')}}</p>
+                        <p class="af-passkey-add-card-title font-medium text-lightInputText dark:text-darkInputText text-sm">{{$t('Add local passkey')}}</p>
+                        <p class="af-passkey-add-card-subtitle text-xs text-lightInputIconColor dark:text-darkInputIconColor text-center">{{$t('Register this device')}}</p>
                     </div>
                     <template #tooltip>
                         <p class="max-w-64">{{$t('This browser or device is reporting partial passkey support.')}}</p>
@@ -93,15 +94,14 @@
                     type="button"
                     :disabled="isFetchingPasskey"
                     @click="addLocalPasskey"
-                    class="af-passkey-add-card af-passkey-add-local flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-lightPrimary hover:bg-lightPrimary/5 dark:hover:border-darkPrimary dark:hover:bg-darkPrimary/10 transition-colors w-full lg:w-72 min-h-36"
-                    :class="isFetchingPasskey ? 'opacity-50 pointer-events-none' : 'cursor-pointer'"
+                    class="af-passkey-add-card af-passkey-add-local flex flex-col items-center justify-center gap-2 p-4 rounded-lg border border-dashed border-lightInputBorder dark:border-darkInputBorder enabled:hover:border-lightPrimary enabled:hover:bg-lightPrimary/5 dark:enabled:hover:border-darkPrimary dark:enabled:hover:bg-darkPrimary/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors w-full lg:w-72 min-h-36"
                 >
                     <span class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
                         <Spinner v-if="isFetchingPasskey && addPasskeyMode === 'platform'" class="w-5 h-5" />
-                        <IconPlusOutline v-else class="w-5 h-5" />
+                        <IconPlus v-else class="w-5 h-5" />
                     </span>
-                    <span class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add local passkey')}}</span>
-                    <span class="af-passkey-add-card-subtitle text-xs text-gray-500 dark:text-gray-400 text-center">{{$t('Register this device')}}</span>
+                    <span class="af-passkey-add-card-title font-medium text-lightInputText dark:text-darkInputText text-sm">{{$t('Add local passkey')}}</span>
+                    <span class="af-passkey-add-card-subtitle text-xs text-lightInputIconColor dark:text-darkInputIconColor text-center">{{$t('Register this device')}}</span>
                 </button>
 
                 <button
@@ -109,21 +109,20 @@
                     type="button"
                     :disabled="isFetchingPasskey"
                     @click="addCrossDevicePasskey"
-                    class="af-passkey-add-card af-passkey-add-cross flex flex-col items-center justify-center gap-2 p-4 rounded-xl border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-lightPrimary hover:bg-lightPrimary/5 dark:hover:border-darkPrimary dark:hover:bg-darkPrimary/10 transition-colors w-full lg:w-72 min-h-36"
-                    :class="isFetchingPasskey ? 'opacity-50 pointer-events-none' : 'cursor-pointer'"
+                    class="af-passkey-add-card af-passkey-add-cross flex flex-col items-center justify-center gap-2 p-4 rounded-lg border border-dashed border-lightInputBorder dark:border-darkInputBorder enabled:hover:border-lightPrimary enabled:hover:bg-lightPrimary/5 dark:enabled:hover:border-darkPrimary dark:enabled:hover:bg-darkPrimary/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors w-full lg:w-72 min-h-36"
                 >
                     <span class="af-passkey-add-card-icon w-10 h-10 flex items-center justify-center rounded-full bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
                         <Spinner v-if="isFetchingPasskey && addPasskeyMode === 'cross-platform'" class="w-5 h-5" />
-                        <IconPlusOutline v-else class="w-5 h-5" />
+                        <IconPlus v-else class="w-5 h-5" />
                     </span>
-                    <span class="af-passkey-add-card-title font-medium text-gray-700 dark:text-gray-300 text-sm">{{$t('Add cross-device')}}</span>
-                    <span class="af-passkey-add-card-subtitle text-xs text-gray-500 dark:text-gray-400 text-center">{{$t('Use phone or security key')}}</span>
+                    <span class="af-passkey-add-card-title font-medium text-lightInputText dark:text-darkInputText text-sm">{{$t('Add cross-device')}}</span>
+                    <span class="af-passkey-add-card-subtitle text-xs text-lightInputIconColor dark:text-darkInputIconColor text-center">{{$t('Use phone or security key')}}</span>
                 </button>
             </template>
         </div>
 
         <TwoFaHint class="af-passkeys-info mt-6 w-full md:w-fit">
-            <template #icon><IconInfoCircleOutline class="af-passkeys-info-icon w-5 h-5" /></template>
+            <template #icon><IconInfo class="af-passkeys-info-icon w-5 h-5" /></template>
             {{$t('Passkeys are a more secure alternative to passwords. They use your device\'s biometrics or PIN and are resistant to phishing attacks.')}}
         </TwoFaHint>
 
@@ -135,8 +134,8 @@
     import adminforth, { useAdminforth } from '@/adminforth';
     import { onMounted, ref, Ref } from 'vue';
     import { useI18n } from 'vue-i18n';
-    import { Button, Dialog, Tooltip, Spinner, Input } from '@/afcl';
-    import { IconTrashBinOutline, IconPenOutline, IconPlusOutline, IconInfoCircleOutline } from '@iconify-prerendered/vue-flowbite';
+    import { Button, Card, Dialog, Tooltip, Spinner, Input } from '@/afcl';
+    import { IconTrash2, IconPencil, IconPlus, IconInfo } from '@iconify-prerendered/vue-lucide';
     import TwoFaHint from './TwoFaHint.vue';
     import { useCoreStore } from '@/stores/core';
     import { useTwoFactorsAuth, type TwoFaConfirmationResult } from './use2faApi';
@@ -356,18 +355,3 @@
         }
     }
 </script>
-
-<style>
- /* Scoped styles for dialog buttons, because there is no different way to style them */
- .dialog-delete-button.dialog-delete-button {
-    background-color: rgb(179, 27, 27);
-    color: white;
-    border: 1px solid rgb(153, 27, 27);
- }
- .dialog-delete-button.dialog-delete-button:hover { background-color: rgb(153, 27, 27); }
- .dialog-delete-button.dialog-delete-button:active { background-color: rgb(127, 20, 20); }
-
- .dark .dialog-delete-button.dialog-delete-button { background-color: rgb(220, 38, 38); color: white; }
- .dark .dialog-delete-button.dialog-delete-button:hover { background-color: rgb(185, 28, 28); }
- .dark .dialog-delete-button.dialog-delete-button:active { background-color: rgb(153, 27, 27); }
-</style>