@adminforth/two-factors-auth 2.8.0 → 2.9.1

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 (6) hide show
  1. package/build.log +2 -2
  2. package/custom/TwoFAModal.vue +28 -26
  3. package/custom/tsconfig.json +14 -3
  4. package/dist/custom/TwoFAModal.vue +28 -26
  5. package/dist/custom/tsconfig.json +14 -3
  6. package/package.json +1 -1
package/build.log CHANGED
@@ -15,5 +15,5 @@ custom/package.json
15
15
  custom/tsconfig.json
16
16
  custom/utils.js
17
17
 
18
- sent 272,607 bytes received 210 bytes 545,634.00 bytes/sec
19
- total size is 271,780 speedup is 1.00
18
+ sent 273,003 bytes received 210 bytes 546,426.00 bytes/sec
19
+ total size is 272,176 speedup is 1.00
package/custom/TwoFAModal.vue CHANGED
@@ -1,34 +1,36 @@
1
1
  <template>
2
2
  <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"
3
3
  v-show ="modelShow && (isLoading === false)">
4
- <div v-if="modalMode === 'totp'" class="af-two-factor-modal-totp relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
4
+ <div v-if="modalMode === 'totp'" class="af-two-factor-modal-totp flex flex-col items-center relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
5
5
  <div id="mfaCode-label" class="mb-4 text-gray-700 dark:text-gray-100 text-center">
6
6
  <p> {{ customDialogTitle }} </p>
7
7
  <p>{{ $t('Please enter your authenticator code') }}</p>
8
8
  </div>
9
-
10
- <div class="my-4 w-full flex justify-center" ref="otpRoot">
11
- <v-otp-input
12
- ref="confirmationResult"
13
- container-class="grid grid-cols-6 gap-3 w-full"
14
- input-classes="bg-gray-50 text-center flex justify-center otp-input border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
15
- :num-inputs="6"
16
- inputType="number"
17
- inputmode="numeric"
18
- :should-auto-focus="true"
19
- :should-focus-order="true"
20
- v-model:value="bindValue"
21
- @on-complete="handleOnComplete"
22
- />
23
- </div>
24
-
25
- <div class="mt-6 flex justify-center items-center gap-32 w-full">
26
- <p v-if="doesUserHavePasskeys===true" class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'passkey'" >{{$t('use passkey')}}</p>
27
- <Button
28
- class="px-4 py-2 rounded border"
29
- @click="onCancel"
30
- :disabled="inProgress"
31
- >{{ $t('Cancel') }}</Button>
9
+
10
+ <div class="flex flex-col max-w-[calc(15rem_+_60px)]">
11
+ <div class="mb-4 w-full flex justify-center" ref="otpRoot">
12
+ <v-otp-input
13
+ ref="confirmationResult"
14
+ container-class="grid grid-cols-6 gap-3 w-full"
15
+ input-classes="bg-gray-50 text-center flex justify-center otp-input border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
16
+ :num-inputs="6"
17
+ inputType="number"
18
+ inputmode="numeric"
19
+ :should-auto-focus="true"
20
+ :should-focus-order="true"
21
+ v-model:value="bindValue"
22
+ @on-complete="handleOnComplete"
23
+ />
24
+ </div>
25
+
26
+ <div class="flex justify-between items-center gap-32 w-full">
27
+ <p v-if="doesUserHavePasskeys===true" class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'passkey'" >{{$t('use passkey')}}</p>
28
+ <Button
29
+ class="px-4 py-2 rounded border"
30
+ @click="onCancel"
31
+ :disabled="inProgress"
32
+ >{{ $t('Cancel') }}</Button>
33
+ </div>
32
34
  </div>
33
35
  </div>
34
36
 
@@ -45,7 +47,7 @@
45
47
  </svg>
46
48
  <span class="sr-only">{{$t('Close modal')}}</span>
47
49
  </button>
48
- <IconShieldOutline class="w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
50
+ <IconShieldOutline class="af-2fa-shield-icon w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
49
51
  <p class="text-4xl font-semibold mb-4 text:gray-900 dark:text-gray-200 ">{{$t('Passkey')}}</p>
50
52
  <div class="mb-2 max-w-[300px] text:gray-900 dark:text-gray-200">
51
53
  <p class="mb-2">{{customDialogTitle}} </p>
@@ -55,7 +57,7 @@
55
57
  {{$t('Use passkey')}}
56
58
  </Button>
57
59
  <div v-if="modalMode === 'passkey'" class="max-w-sm px-6 pt-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
58
- <div class="mb-3 font-normal text-gray-700 dark:text-gray-400">
60
+ <div class="af-2fa-passkey-issues-card mb-3 font-normal text-gray-700 dark:text-gray-400">
59
61
  <p>{{$t('Have issues with passkey?')}}</p>
60
62
  <p class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'totp'" >{{$t('use TOTP')}}</p>
61
63
  </div>
package/custom/tsconfig.json CHANGED
@@ -4,16 +4,27 @@
4
4
  "paths": {
5
5
  "@/*": [
6
6
  // "node_modules/adminforth/dist/spa/src/*"
7
- "../../../spa/src/*"
7
+ "../../../adminforth/spa/src/*"
8
8
  ],
9
9
  "*": [
10
10
  // "node_modules/adminforth/dist/spa/node_modules/*"
11
- "../../../spa/node_modules/*"
11
+ "../../../adminforth/spa/node_modules/*"
12
12
  ],
13
13
  "@@/*": [
14
14
  // "node_modules/adminforth/dist/spa/src/*"
15
15
  "."
16
16
  ]
17
17
  }
18
- }
18
+ },
19
+ "include": [
20
+ "./**/*.ts",
21
+ "./**/*.tsx",
22
+ "./**/*.vue",
23
+ "../**/*.ts",
24
+ "../**/*.tsx",
25
+ "../**/*.vue",
26
+ "../*.vue",
27
+ "../*.ts",
28
+ "../*.tsx"
29
+ ]
19
30
  }
package/dist/custom/TwoFAModal.vue CHANGED
@@ -1,34 +1,36 @@
1
1
  <template>
2
2
  <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"
3
3
  v-show ="modelShow && (isLoading === false)">
4
- <div v-if="modalMode === 'totp'" class="af-two-factor-modal-totp relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
4
+ <div v-if="modalMode === 'totp'" class="af-two-factor-modal-totp flex flex-col items-center relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
5
5
  <div id="mfaCode-label" class="mb-4 text-gray-700 dark:text-gray-100 text-center">
6
6
  <p> {{ customDialogTitle }} </p>
7
7
  <p>{{ $t('Please enter your authenticator code') }}</p>
8
8
  </div>
9
-
10
- <div class="my-4 w-full flex justify-center" ref="otpRoot">
11
- <v-otp-input
12
- ref="confirmationResult"
13
- container-class="grid grid-cols-6 gap-3 w-full"
14
- input-classes="bg-gray-50 text-center flex justify-center otp-input border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
15
- :num-inputs="6"
16
- inputType="number"
17
- inputmode="numeric"
18
- :should-auto-focus="true"
19
- :should-focus-order="true"
20
- v-model:value="bindValue"
21
- @on-complete="handleOnComplete"
22
- />
23
- </div>
24
-
25
- <div class="mt-6 flex justify-center items-center gap-32 w-full">
26
- <p v-if="doesUserHavePasskeys===true" class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'passkey'" >{{$t('use passkey')}}</p>
27
- <Button
28
- class="px-4 py-2 rounded border"
29
- @click="onCancel"
30
- :disabled="inProgress"
31
- >{{ $t('Cancel') }}</Button>
9
+
10
+ <div class="flex flex-col max-w-[calc(15rem_+_60px)]">
11
+ <div class="mb-4 w-full flex justify-center" ref="otpRoot">
12
+ <v-otp-input
13
+ ref="confirmationResult"
14
+ container-class="grid grid-cols-6 gap-3 w-full"
15
+ input-classes="bg-gray-50 text-center flex justify-center otp-input border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-10 h-10 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
16
+ :num-inputs="6"
17
+ inputType="number"
18
+ inputmode="numeric"
19
+ :should-auto-focus="true"
20
+ :should-focus-order="true"
21
+ v-model:value="bindValue"
22
+ @on-complete="handleOnComplete"
23
+ />
24
+ </div>
25
+
26
+ <div class="flex justify-between items-center gap-32 w-full">
27
+ <p v-if="doesUserHavePasskeys===true" class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'passkey'" >{{$t('use passkey')}}</p>
28
+ <Button
29
+ class="px-4 py-2 rounded border"
30
+ @click="onCancel"
31
+ :disabled="inProgress"
32
+ >{{ $t('Cancel') }}</Button>
33
+ </div>
32
34
  </div>
33
35
  </div>
34
36
 
@@ -45,7 +47,7 @@
45
47
  </svg>
46
48
  <span class="sr-only">{{$t('Close modal')}}</span>
47
49
  </button>
48
- <IconShieldOutline class="w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
50
+ <IconShieldOutline class="af-2fa-shield-icon w-16 h-16 text-lightPrimary dark:text-darkPrimary"/>
49
51
  <p class="text-4xl font-semibold mb-4 text:gray-900 dark:text-gray-200 ">{{$t('Passkey')}}</p>
50
52
  <div class="mb-2 max-w-[300px] text:gray-900 dark:text-gray-200">
51
53
  <p class="mb-2">{{customDialogTitle}} </p>
@@ -55,7 +57,7 @@
55
57
  {{$t('Use passkey')}}
56
58
  </Button>
57
59
  <div v-if="modalMode === 'passkey'" class="max-w-sm px-6 pt-3 w-full bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
58
- <div class="mb-3 font-normal text-gray-700 dark:text-gray-400">
60
+ <div class="af-2fa-passkey-issues-card mb-3 font-normal text-gray-700 dark:text-gray-400">
59
61
  <p>{{$t('Have issues with passkey?')}}</p>
60
62
  <p class="underline hover:no-underline text-lightPrimary whitespace-nowrap hover:cursor-pointer" @click="modalMode = 'totp'" >{{$t('use TOTP')}}</p>
61
63
  </div>
package/dist/custom/tsconfig.json CHANGED
@@ -4,16 +4,27 @@
4
4
  "paths": {
5
5
  "@/*": [
6
6
  // "node_modules/adminforth/dist/spa/src/*"
7
- "../../../spa/src/*"
7
+ "../../../adminforth/spa/src/*"
8
8
  ],
9
9
  "*": [
10
10
  // "node_modules/adminforth/dist/spa/node_modules/*"
11
- "../../../spa/node_modules/*"
11
+ "../../../adminforth/spa/node_modules/*"
12
12
  ],
13
13
  "@@/*": [
14
14
  // "node_modules/adminforth/dist/spa/src/*"
15
15
  "."
16
16
  ]
17
17
  }
18
- }
18
+ },
19
+ "include": [
20
+ "./**/*.ts",
21
+ "./**/*.tsx",
22
+ "./**/*.vue",
23
+ "../**/*.ts",
24
+ "../**/*.tsx",
25
+ "../**/*.vue",
26
+ "../*.vue",
27
+ "../*.ts",
28
+ "../*.tsx"
29
+ ]
19
30
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminforth/two-factors-auth",
3
- "version": "2.8.0",
3
+ "version": "2.9.1",
4
4
  "description": "AdminForth plugin for two factors authentication",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",