@adminforth/two-factors-auth 5.0.0 → 7.0.0

package/dist/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/dist/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/dist/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/dist/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/dist/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>

package/dist/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 }>({});