@adminforth/two-factors-auth 4.8.1 → 4.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/build.log +2 -2
  2. package/custom/TwoFAModal.vue +5 -5
  3. package/custom/TwoFaCard.vue +5 -5
  4. package/custom/TwoFaCodeInput.vue +2 -2
  5. package/custom/TwoFaHint.vue +2 -2
  6. package/custom/TwoFaLinkButton.vue +1 -1
  7. package/custom/TwoFactorsPasskeysSettings.vue +3 -3
  8. package/custom/TwoFactorsSetup.vue +8 -8
  9. package/dist/custom/TwoFAModal.vue +5 -5
  10. package/dist/custom/TwoFaCard.vue +5 -5
  11. package/dist/custom/TwoFaCodeInput.vue +2 -2
  12. package/dist/custom/TwoFaHint.vue +2 -2
  13. package/dist/custom/TwoFaLinkButton.vue +1 -1
  14. package/dist/custom/TwoFactorsPasskeysSettings.vue +3 -3
  15. package/dist/custom/TwoFactorsSetup.vue +8 -8
  16. package/package.json +1 -1
package/build.log CHANGED
@@ -21,5 +21,5 @@ custom/tsconfig.json
21
21
  custom/use2faApi.ts
22
22
  custom/utils.js
23
23
 
24
- sent 306,997 bytes received 324 bytes 614,642.00 bytes/sec
25
- total size is 305,746 speedup is 0.99
24
+ sent 306,855 bytes received 324 bytes 614,358.00 bytes/sec
25
+ total size is 305,604 speedup is 0.99
package/custom/TwoFAModal.vue CHANGED
@@ -9,14 +9,14 @@
9
9
  closable
10
10
  @close="onCancel"
11
11
  >
12
- <pre v-if="dialogDetails" class="af-2fa-details max-h-60 overflow-auto rounded-[10px] 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>
12
+ <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>
13
13
 
14
14
  <div v-if="confirmItems.length" class="af-2fa-actions">
15
15
  <p class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ $t('You are approving') }}</p>
16
- <ul class="af-2fa-actions-list max-h-60 overflow-auto divide-y divide-lightDialogBreakLine rounded-[10px] border border-lightDialogBreakLine bg-gray-50 dark:divide-darkDialogBreakLine dark:border-darkDialogBreakLine dark:bg-gray-800">
16
+ <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">
17
17
  <li v-for="(item, i) in confirmItems" :key="i" class="flex gap-3 px-3.5 py-3">
18
18
  <span aria-hidden="true" class="mt-2 w-1.5 h-1.5 shrink-0 rounded-full bg-lightPrimary dark:bg-darkPrimary"></span>
19
- <span class="text-[15px] leading-[22px] break-words text-gray-800 dark:text-gray-100">{{ item }}</span>
19
+ <span class="min-w-0 text-base leading-6 break-words text-gray-800 dark:text-gray-100">{{ item }}</span>
20
20
  </li>
21
21
  </ul>
22
22
  </div>
@@ -26,8 +26,8 @@
26
26
  <template #icon><IconFingerprintOutline class="w-6 h-6" /></template>
27
27
  {{ $t('Your browser will ask for Touch ID, Windows Hello or a security key.') }}
28
28
  </TwoFaHint>
29
- <p v-else role="status" class="af-2fa-grace-notice flex items-start gap-2.5 rounded-[10px] border border-green-200 bg-green-50 px-3.5 py-3 text-[13px] leading-[19px] text-green-800 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300">
30
- <IconCheckCircleOutline class="w-[18px] h-[18px] shrink-0" />
29
+ <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">
30
+ <IconCheckCircleOutline class="w-5 h-5 shrink-0" />
31
31
  {{ $t('You verified recently, so no code is needed.') }}
32
32
  </p>
33
33
 
package/custom/TwoFaCard.vue CHANGED
@@ -1,12 +1,12 @@
1
1
  <template>
2
- <div class="af-2fa-card relative flex flex-col w-full max-w-[460px] overflow-hidden rounded-xl border border-lightDialogBreakLine bg-lightDialogBackgorund shadow-2xl dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund">
2
+ <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">
3
3
  <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'">
4
- <div class="af-2fa-icon-wrap flex w-10 h-10 shrink-0 items-center justify-center rounded-[10px] bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
4
+ <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">
5
5
  <IconShieldCheckOutline class="af-2fa-shield-icon w-6 h-6" />
6
6
  </div>
7
7
  <div class="af-2fa-title-wrap flex-1 min-w-0">
8
- <p class="af-2fa-title text-[17px] leading-6 font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ title }}</p>
9
- <p class="af-2fa-subtitle mt-0.5 text-[13px] leading-[18px] text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
8
+ <p class="af-2fa-title break-words text-lg leading-6 font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ title }}</p>
9
+ <p class="af-2fa-subtitle mt-0.5 text-sm leading-5 text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
10
10
  </div>
11
11
  <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')">
12
12
  <IconCloseOutline class="w-5 h-5" />
@@ -15,7 +15,7 @@
15
15
 
16
16
  <div class="af-2fa-body flex flex-col gap-5 px-6 pt-5 pb-6">
17
17
  <slot />
18
- <p v-if="error" role="alert" class="af-2fa-code-error -mt-2.5 flex items-center gap-1.5 text-[13px] text-red-600 dark:text-red-400">
18
+ <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">
19
19
  <IconExclamationCircleOutline class="w-4 h-4 shrink-0" />
20
20
  {{ error }}
21
21
  </p>
package/custom/TwoFaCodeInput.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <div class="af-2fa-code">
3
3
  <div :id="LABEL_ID">
4
4
  <slot name="label">
5
- <p class="mb-2 text-[13px] font-medium text-gray-700 dark:text-gray-300">{{ $t('Authenticator code') }}</p>
5
+ <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">{{ $t('Authenticator code') }}</p>
6
6
  </slot>
7
7
  </div>
8
8
  <div ref="otpRoot" class="af-2fa-otp-root text-gray-300 dark:text-gray-500">
@@ -40,7 +40,7 @@ const otpRoot = ref<HTMLElement | null>(null);
40
40
  const otpInput = ref<{ clearInput(): void; fillInput(value: string): void } | null>(null);
41
41
 
42
42
  const inputClasses = computed(() => [
43
- `${INPUT_CLASS} w-12 h-14 p-0 rounded-[10px] border-[1.5px] 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`,
43
+ `${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`,
44
44
  props.invalid
45
45
  ? 'border-red-500 focus:border-red-500 focus:ring-red-500/25 dark:border-red-400 dark:focus:border-red-400'
46
46
  : 'border-gray-300 focus:border-lightPrimary focus:ring-lightPrimary/25 dark:border-gray-600 dark:focus:border-darkPrimary dark:focus:ring-darkPrimary/25',
package/custom/TwoFaHint.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
- <div class="af-2fa-hint flex items-center gap-3.5 rounded-[10px] border border-lightDialogBreakLine bg-gray-50 px-4 py-3.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
2
+ <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">
3
3
  <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">
4
4
  <slot name="icon" />
5
5
  </span>
6
- <p class="af-2fa-hint-text text-[13px] leading-[19px] text-gray-500 dark:text-gray-400">
6
+ <p class="af-2fa-hint-text text-sm leading-5 text-gray-500 dark:text-gray-400">
7
7
  <slot />
8
8
  </p>
9
9
  </div>
package/custom/TwoFaLinkButton.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <button type="button" class="af-2fa-link-btn inline-flex h-11 items-center gap-1.5 whitespace-nowrap text-[13px] font-medium text-lightPrimary hover:underline dark:text-darkPrimary">
2
+ <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">
3
3
  <slot />
4
4
  </button>
5
5
  </template>
package/custom/TwoFactorsPasskeysSettings.vue CHANGED
@@ -10,7 +10,7 @@
10
10
  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"
11
11
  >
12
12
  <div class="af-passkey-card-header flex items-center gap-3 mb-3">
13
- <div class="af-passkey-card-icon flex w-10 h-10 shrink-0 items-center justify-center rounded-[10px] bg-gray-100 dark:bg-gray-800">
13
+ <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">
14
14
  <img class="max-h-6 max-w-6" :src="coreStore.theme === 'light' ? item.light_icon : item.dark_icon" />
15
15
  </div>
16
16
  <div class="af-passkey-card-info flex-1 min-w-0">
@@ -43,7 +43,7 @@
43
43
  variant="secondary"
44
44
  :shadow="false"
45
45
  @click="passkeysNewName = ''"
46
- class="af-passkey-btn-rename w-full gap-1.5 px-3 py-2 text-[13px]"
46
+ class="af-passkey-btn-rename w-full gap-1.5 px-3 py-2 text-sm"
47
47
  >
48
48
  <IconPenOutline class="w-4 h-4" />
49
49
  {{$t('Rename')}}
@@ -65,7 +65,7 @@
65
65
  <button
66
66
  type="button"
67
67
  @click="confirmAndDelete(item.id)"
68
- class="af-passkey-btn-remove flex items-center justify-center gap-1.5 px-3 py-2 text-[13px] 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"
68
+ 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"
69
69
  >
70
70
  <IconTrashBinOutline class="w-4 h-4" />
71
71
  {{$t('Remove')}}
package/custom/TwoFactorsSetup.vue CHANGED
@@ -17,16 +17,16 @@
17
17
  >
18
18
  <div>
19
19
  <p class="mb-3 flex items-center gap-2.5 text-sm font-medium text-gray-900 dark:text-white">
20
- <span class="flex w-[22px] h-[22px] 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>
20
+ <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>
21
21
  {{ $t('Scan the QR code with your authenticator app') }}
22
22
  </p>
23
- <div class="flex items-center gap-4 rounded-[10px] border border-lightDialogBreakLine bg-gray-50 p-3.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
24
- <div class="w-[132px] h-[132px] shrink-0 rounded-lg bg-white p-2">
23
+ <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">
24
+ <div class="w-32 h-32 shrink-0 rounded-lg bg-white p-2">
25
25
  <img v-if="totpQrCode" :src="totpQrCode" class="af-qr-code w-full h-full" alt="QR code" />
26
26
  </div>
27
27
  <div class="flex min-w-0 flex-col gap-2">
28
- <p class="text-[13px] leading-[19px] text-gray-500 dark:text-gray-400">{{ $t('Setting up on this device?') }}</p>
29
- <a :href="totpUri" class="inline-flex items-center gap-1.5 text-[13px] font-medium text-lightPrimary hover:underline dark:text-darkPrimary">
28
+ <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">{{ $t('Setting up on this device?') }}</p>
29
+ <a :href="totpUri" class="inline-flex items-center gap-1.5 text-sm font-medium text-lightPrimary hover:underline dark:text-darkPrimary">
30
30
  {{ $t('Open in authenticator app') }}
31
31
  <IconArrowUpRightFromSquareOutline class="w-4 h-4" />
32
32
  </a>
@@ -36,7 +36,7 @@
36
36
 
37
37
  <div>
38
38
  <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>
39
- <div class="flex items-center gap-2 rounded-[10px] border border-lightDialogBreakLine bg-gray-50 py-1.5 pl-3.5 pr-1.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
39
+ <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">
40
40
  <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>
41
41
  <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">
42
42
  <IconFileCopyOutline class="w-5 h-5" />
@@ -47,14 +47,14 @@
47
47
  <TwoFaCodeInput ref="codeInput" :invalid="Boolean(codeError)" @complete="handleOnComplete">
48
48
  <template #label>
49
49
  <p class="mb-3 flex items-center gap-2.5 text-sm font-medium text-gray-900 dark:text-white">
50
- <span class="flex w-[22px] h-[22px] 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>
50
+ <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>
51
51
  {{ $t('Enter the 6-digit code from the app') }}
52
52
  </p>
53
53
  </template>
54
54
  </TwoFaCodeInput>
55
55
 
56
56
  <template #footer>
57
- <button v-if="skipAllowed" type="button" class="af-2fa-skip-btn inline-flex h-11 items-center whitespace-nowrap text-[13px] font-medium text-gray-600 hover:underline dark:text-gray-300" @click="handleSkip">
57
+ <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">
58
58
  {{ $t('Skip for now') }}
59
59
  </button>
60
60
  <LinkButton to="/login" variant="secondary" class="af-2fa-back-to-login ms-auto whitespace-nowrap">{{ $t('Back to login') }}</LinkButton>
package/dist/custom/TwoFAModal.vue CHANGED
@@ -9,14 +9,14 @@
9
9
  closable
10
10
  @close="onCancel"
11
11
  >
12
- <pre v-if="dialogDetails" class="af-2fa-details max-h-60 overflow-auto rounded-[10px] 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>
12
+ <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>
13
13
 
14
14
  <div v-if="confirmItems.length" class="af-2fa-actions">
15
15
  <p class="mb-2 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ $t('You are approving') }}</p>
16
- <ul class="af-2fa-actions-list max-h-60 overflow-auto divide-y divide-lightDialogBreakLine rounded-[10px] border border-lightDialogBreakLine bg-gray-50 dark:divide-darkDialogBreakLine dark:border-darkDialogBreakLine dark:bg-gray-800">
16
+ <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">
17
17
  <li v-for="(item, i) in confirmItems" :key="i" class="flex gap-3 px-3.5 py-3">
18
18
  <span aria-hidden="true" class="mt-2 w-1.5 h-1.5 shrink-0 rounded-full bg-lightPrimary dark:bg-darkPrimary"></span>
19
- <span class="text-[15px] leading-[22px] break-words text-gray-800 dark:text-gray-100">{{ item }}</span>
19
+ <span class="min-w-0 text-base leading-6 break-words text-gray-800 dark:text-gray-100">{{ item }}</span>
20
20
  </li>
21
21
  </ul>
22
22
  </div>
@@ -26,8 +26,8 @@
26
26
  <template #icon><IconFingerprintOutline class="w-6 h-6" /></template>
27
27
  {{ $t('Your browser will ask for Touch ID, Windows Hello or a security key.') }}
28
28
  </TwoFaHint>
29
- <p v-else role="status" class="af-2fa-grace-notice flex items-start gap-2.5 rounded-[10px] border border-green-200 bg-green-50 px-3.5 py-3 text-[13px] leading-[19px] text-green-800 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300">
30
- <IconCheckCircleOutline class="w-[18px] h-[18px] shrink-0" />
29
+ <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">
30
+ <IconCheckCircleOutline class="w-5 h-5 shrink-0" />
31
31
  {{ $t('You verified recently, so no code is needed.') }}
32
32
  </p>
33
33
 
package/dist/custom/TwoFaCard.vue CHANGED
@@ -1,12 +1,12 @@
1
1
  <template>
2
- <div class="af-2fa-card relative flex flex-col w-full max-w-[460px] overflow-hidden rounded-xl border border-lightDialogBreakLine bg-lightDialogBackgorund shadow-2xl dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund">
2
+ <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">
3
3
  <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'">
4
- <div class="af-2fa-icon-wrap flex w-10 h-10 shrink-0 items-center justify-center rounded-[10px] bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
4
+ <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">
5
5
  <IconShieldCheckOutline class="af-2fa-shield-icon w-6 h-6" />
6
6
  </div>
7
7
  <div class="af-2fa-title-wrap flex-1 min-w-0">
8
- <p class="af-2fa-title text-[17px] leading-6 font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ title }}</p>
9
- <p class="af-2fa-subtitle mt-0.5 text-[13px] leading-[18px] text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
8
+ <p class="af-2fa-title break-words text-lg leading-6 font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ title }}</p>
9
+ <p class="af-2fa-subtitle mt-0.5 text-sm leading-5 text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
10
10
  </div>
11
11
  <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')">
12
12
  <IconCloseOutline class="w-5 h-5" />
@@ -15,7 +15,7 @@
15
15
 
16
16
  <div class="af-2fa-body flex flex-col gap-5 px-6 pt-5 pb-6">
17
17
  <slot />
18
- <p v-if="error" role="alert" class="af-2fa-code-error -mt-2.5 flex items-center gap-1.5 text-[13px] text-red-600 dark:text-red-400">
18
+ <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">
19
19
  <IconExclamationCircleOutline class="w-4 h-4 shrink-0" />
20
20
  {{ error }}
21
21
  </p>
package/dist/custom/TwoFaCodeInput.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <div class="af-2fa-code">
3
3
  <div :id="LABEL_ID">
4
4
  <slot name="label">
5
- <p class="mb-2 text-[13px] font-medium text-gray-700 dark:text-gray-300">{{ $t('Authenticator code') }}</p>
5
+ <p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">{{ $t('Authenticator code') }}</p>
6
6
  </slot>
7
7
  </div>
8
8
  <div ref="otpRoot" class="af-2fa-otp-root text-gray-300 dark:text-gray-500">
@@ -40,7 +40,7 @@ const otpRoot = ref<HTMLElement | null>(null);
40
40
  const otpInput = ref<{ clearInput(): void; fillInput(value: string): void } | null>(null);
41
41
 
42
42
  const inputClasses = computed(() => [
43
- `${INPUT_CLASS} w-12 h-14 p-0 rounded-[10px] border-[1.5px] 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`,
43
+ `${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`,
44
44
  props.invalid
45
45
  ? 'border-red-500 focus:border-red-500 focus:ring-red-500/25 dark:border-red-400 dark:focus:border-red-400'
46
46
  : 'border-gray-300 focus:border-lightPrimary focus:ring-lightPrimary/25 dark:border-gray-600 dark:focus:border-darkPrimary dark:focus:ring-darkPrimary/25',
package/dist/custom/TwoFaHint.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
- <div class="af-2fa-hint flex items-center gap-3.5 rounded-[10px] border border-lightDialogBreakLine bg-gray-50 px-4 py-3.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
2
+ <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">
3
3
  <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">
4
4
  <slot name="icon" />
5
5
  </span>
6
- <p class="af-2fa-hint-text text-[13px] leading-[19px] text-gray-500 dark:text-gray-400">
6
+ <p class="af-2fa-hint-text text-sm leading-5 text-gray-500 dark:text-gray-400">
7
7
  <slot />
8
8
  </p>
9
9
  </div>
package/dist/custom/TwoFaLinkButton.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <button type="button" class="af-2fa-link-btn inline-flex h-11 items-center gap-1.5 whitespace-nowrap text-[13px] font-medium text-lightPrimary hover:underline dark:text-darkPrimary">
2
+ <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">
3
3
  <slot />
4
4
  </button>
5
5
  </template>
package/dist/custom/TwoFactorsPasskeysSettings.vue CHANGED
@@ -10,7 +10,7 @@
10
10
  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"
11
11
  >
12
12
  <div class="af-passkey-card-header flex items-center gap-3 mb-3">
13
- <div class="af-passkey-card-icon flex w-10 h-10 shrink-0 items-center justify-center rounded-[10px] bg-gray-100 dark:bg-gray-800">
13
+ <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">
14
14
  <img class="max-h-6 max-w-6" :src="coreStore.theme === 'light' ? item.light_icon : item.dark_icon" />
15
15
  </div>
16
16
  <div class="af-passkey-card-info flex-1 min-w-0">
@@ -43,7 +43,7 @@
43
43
  variant="secondary"
44
44
  :shadow="false"
45
45
  @click="passkeysNewName = ''"
46
- class="af-passkey-btn-rename w-full gap-1.5 px-3 py-2 text-[13px]"
46
+ class="af-passkey-btn-rename w-full gap-1.5 px-3 py-2 text-sm"
47
47
  >
48
48
  <IconPenOutline class="w-4 h-4" />
49
49
  {{$t('Rename')}}
@@ -65,7 +65,7 @@
65
65
  <button
66
66
  type="button"
67
67
  @click="confirmAndDelete(item.id)"
68
- class="af-passkey-btn-remove flex items-center justify-center gap-1.5 px-3 py-2 text-[13px] 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"
68
+ 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"
69
69
  >
70
70
  <IconTrashBinOutline class="w-4 h-4" />
71
71
  {{$t('Remove')}}
package/dist/custom/TwoFactorsSetup.vue CHANGED
@@ -17,16 +17,16 @@
17
17
  >
18
18
  <div>
19
19
  <p class="mb-3 flex items-center gap-2.5 text-sm font-medium text-gray-900 dark:text-white">
20
- <span class="flex w-[22px] h-[22px] 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>
20
+ <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>
21
21
  {{ $t('Scan the QR code with your authenticator app') }}
22
22
  </p>
23
- <div class="flex items-center gap-4 rounded-[10px] border border-lightDialogBreakLine bg-gray-50 p-3.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
24
- <div class="w-[132px] h-[132px] shrink-0 rounded-lg bg-white p-2">
23
+ <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">
24
+ <div class="w-32 h-32 shrink-0 rounded-lg bg-white p-2">
25
25
  <img v-if="totpQrCode" :src="totpQrCode" class="af-qr-code w-full h-full" alt="QR code" />
26
26
  </div>
27
27
  <div class="flex min-w-0 flex-col gap-2">
28
- <p class="text-[13px] leading-[19px] text-gray-500 dark:text-gray-400">{{ $t('Setting up on this device?') }}</p>
29
- <a :href="totpUri" class="inline-flex items-center gap-1.5 text-[13px] font-medium text-lightPrimary hover:underline dark:text-darkPrimary">
28
+ <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">{{ $t('Setting up on this device?') }}</p>
29
+ <a :href="totpUri" class="inline-flex items-center gap-1.5 text-sm font-medium text-lightPrimary hover:underline dark:text-darkPrimary">
30
30
  {{ $t('Open in authenticator app') }}
31
31
  <IconArrowUpRightFromSquareOutline class="w-4 h-4" />
32
32
  </a>
@@ -36,7 +36,7 @@
36
36
 
37
37
  <div>
38
38
  <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>
39
- <div class="flex items-center gap-2 rounded-[10px] border border-lightDialogBreakLine bg-gray-50 py-1.5 pl-3.5 pr-1.5 dark:border-darkDialogBreakLine dark:bg-gray-800">
39
+ <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">
40
40
  <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>
41
41
  <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">
42
42
  <IconFileCopyOutline class="w-5 h-5" />
@@ -47,14 +47,14 @@
47
47
  <TwoFaCodeInput ref="codeInput" :invalid="Boolean(codeError)" @complete="handleOnComplete">
48
48
  <template #label>
49
49
  <p class="mb-3 flex items-center gap-2.5 text-sm font-medium text-gray-900 dark:text-white">
50
- <span class="flex w-[22px] h-[22px] 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>
50
+ <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>
51
51
  {{ $t('Enter the 6-digit code from the app') }}
52
52
  </p>
53
53
  </template>
54
54
  </TwoFaCodeInput>
55
55
 
56
56
  <template #footer>
57
- <button v-if="skipAllowed" type="button" class="af-2fa-skip-btn inline-flex h-11 items-center whitespace-nowrap text-[13px] font-medium text-gray-600 hover:underline dark:text-gray-300" @click="handleSkip">
57
+ <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">
58
58
  {{ $t('Skip for now') }}
59
59
  </button>
60
60
  <LinkButton to="/login" variant="secondary" class="af-2fa-back-to-login ms-auto whitespace-nowrap">{{ $t('Back to login') }}</LinkButton>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminforth/two-factors-auth",
3
- "version": "4.8.1",
3
+ "version": "4.8.3",
4
4
  "description": "AdminForth plugin for two factors authentication",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",