@adminforth/two-factors-auth 1.6.0 → 1.7.0
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.
- package/build.log +2 -2
- package/custom/TwoFaModal.vue +8 -2
- package/custom/TwoFactorsConfirmation.vue +6 -5
- package/custom/TwoFactorsSetup.vue +23 -24
- package/dist/custom/TwoFaModal.vue +8 -2
- package/dist/custom/TwoFactorsConfirmation.vue +6 -5
- package/dist/custom/TwoFactorsSetup.vue +23 -24
- package/package.json +1 -1
package/build.log
CHANGED
|
@@ -11,5 +11,5 @@ custom/package-lock.json
|
|
|
11
11
|
custom/package.json
|
|
12
12
|
custom/tsconfig.json
|
|
13
13
|
|
|
14
|
-
sent 31,
|
|
15
|
-
total size is 30,
|
|
14
|
+
sent 31,283 bytes received 134 bytes 62,834.00 bytes/sec
|
|
15
|
+
total size is 30,790 speedup is 0.98
|
package/custom/TwoFaModal.vue
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 top-0 bottom-0 left-0 right-0"
|
|
3
3
|
v-if ="modelShow">
|
|
4
4
|
<div class="relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
|
|
5
|
-
<div id="mfaCode-label" class="mb-4 text-gray-700 dark:text-gray-100">
|
|
5
|
+
<div id="mfaCode-label" class="mb-4 text-gray-700 dark:text-gray-100 text-center">
|
|
6
6
|
{{ $t('Please enter your authenticator code') }}
|
|
7
7
|
</div>
|
|
8
8
|
|
|
@@ -141,4 +141,10 @@
|
|
|
141
141
|
window.removeEventListener('paste', handlePaste as any);
|
|
142
142
|
});
|
|
143
143
|
</script>
|
|
144
|
-
|
|
144
|
+
|
|
145
|
+
<style scoped>
|
|
146
|
+
:deep(.otp-input-container) {
|
|
147
|
+
display: flex;
|
|
148
|
+
gap: 0.75rem;
|
|
149
|
+
}
|
|
150
|
+
</style>
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<v-otp-input
|
|
19
19
|
ref="code"
|
|
20
20
|
container-class="grid grid-cols-6 gap-3 w-full"
|
|
21
|
-
input-classes="bg-gray-50 text-center
|
|
21
|
+
input-classes="bg-gray-50 text-center 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"
|
|
22
22
|
:num-inputs="6"
|
|
23
23
|
inputType="number"
|
|
24
24
|
inputmode="numeric"
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<div class="mt-6 flex justify-center">
|
|
32
32
|
<LinkButton
|
|
33
33
|
to="/login"
|
|
34
|
-
class="w-
|
|
34
|
+
class="w-full"
|
|
35
35
|
>
|
|
36
36
|
{{$t('Back to login')}}
|
|
37
37
|
</LinkButton>
|
|
@@ -130,15 +130,16 @@
|
|
|
130
130
|
}
|
|
131
131
|
</script>
|
|
132
132
|
|
|
133
|
-
<style lang='scss'>
|
|
133
|
+
<style scoped lang='scss'>
|
|
134
134
|
.vue3-2fa-code-input {
|
|
135
135
|
display: flex;
|
|
136
136
|
justify-content: center;
|
|
137
137
|
gap: 1rem;
|
|
138
138
|
margin-bottom: 1rem;
|
|
139
139
|
}
|
|
140
|
-
.otp-input {
|
|
141
|
-
|
|
140
|
+
:deep(.otp-input-container) {
|
|
141
|
+
display: flex;
|
|
142
|
+
gap: 0.75rem;
|
|
142
143
|
}
|
|
143
144
|
.vue3-2fa-code-input-box {
|
|
144
145
|
&[type='text'] {
|
|
@@ -15,29 +15,27 @@
|
|
|
15
15
|
<div class="p-10 w-full max-w-md max-h-full custom-auth-wrapper" >
|
|
16
16
|
<div class="m-3" >{{$t('Scan this QR code with your authenticator app or open by')}} <a class="text-blue-600" :href="totpUri">{{$t('click')}}</a></div>
|
|
17
17
|
<div class="flex justify-center m-3" >
|
|
18
|
-
<img :src="totpQrCode" class="min-w-[200px]
|
|
18
|
+
<img :src="totpQrCode" class="min-w-[200px] min-h-[200px]" alt="QR code" />
|
|
19
19
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
</div>
|
|
36
|
-
<div class="my-4 w-full flex justify-center p-2" ref="otpRoot">
|
|
20
|
+
<div class="m-1">{{$t('Or copy this code to app manually:')}}</div>
|
|
21
|
+
<div class="w-full">
|
|
22
|
+
<div class="relative">
|
|
23
|
+
<label for="npm-install-copy-text" class="sr-only">{{$t('Label')}}</label>
|
|
24
|
+
<input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 pr-12" :value="totp.newSecret" readonly>
|
|
25
|
+
<button @click="onCopyClick" data-copy-to-clipboard-target="npm-install-copy-text" class="absolute end-2.5 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
|
|
26
|
+
<span id="default-message" class="inline-flex items-center">
|
|
27
|
+
<svg class="w-3 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
|
28
|
+
<path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
|
|
29
|
+
</svg>
|
|
30
|
+
</span>
|
|
31
|
+
</button>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="my-4 w-full flex justify-center" ref="otpRoot">
|
|
37
35
|
<v-otp-input
|
|
38
36
|
ref="code"
|
|
39
37
|
container-class="grid grid-cols-6 gap-3 w-full"
|
|
40
|
-
input-classes="otp-input bg-gray-50 text-center border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block h-[
|
|
38
|
+
input-classes="otp-input bg-gray-50 text-center border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block h-[46px] w-full 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"
|
|
41
39
|
:num-inputs="6"
|
|
42
40
|
inputType="number"
|
|
43
41
|
inputmode="numeric"
|
|
@@ -48,7 +46,7 @@
|
|
|
48
46
|
/>
|
|
49
47
|
</div>
|
|
50
48
|
<!-- <Vue2FACodeInput v-model="code" autofocus /> -->
|
|
51
|
-
<div class="flex flex-row gap-2.5
|
|
49
|
+
<div class="flex flex-row gap-2.5 h-12">
|
|
52
50
|
<LinkButton to="/login" class="w-full">
|
|
53
51
|
{{$t('Back to login')}}
|
|
54
52
|
</LinkButton>
|
|
@@ -220,8 +218,9 @@ const handleSkip = async () => {
|
|
|
220
218
|
}
|
|
221
219
|
}
|
|
222
220
|
</script>
|
|
223
|
-
<style>
|
|
224
|
-
.otp-input {
|
|
225
|
-
|
|
226
|
-
|
|
221
|
+
<style scoped>
|
|
222
|
+
:deep(.otp-input-container) {
|
|
223
|
+
display: flex;
|
|
224
|
+
gap: 0.75rem;
|
|
225
|
+
}
|
|
227
226
|
</style>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 top-0 bottom-0 left-0 right-0"
|
|
3
3
|
v-if ="modelShow">
|
|
4
4
|
<div class="relative bg-white dark:bg-gray-700 rounded-lg shadow p-6 w-full max-w-md">
|
|
5
|
-
<div id="mfaCode-label" class="mb-4 text-gray-700 dark:text-gray-100">
|
|
5
|
+
<div id="mfaCode-label" class="mb-4 text-gray-700 dark:text-gray-100 text-center">
|
|
6
6
|
{{ $t('Please enter your authenticator code') }}
|
|
7
7
|
</div>
|
|
8
8
|
|
|
@@ -141,4 +141,10 @@
|
|
|
141
141
|
window.removeEventListener('paste', handlePaste as any);
|
|
142
142
|
});
|
|
143
143
|
</script>
|
|
144
|
-
|
|
144
|
+
|
|
145
|
+
<style scoped>
|
|
146
|
+
:deep(.otp-input-container) {
|
|
147
|
+
display: flex;
|
|
148
|
+
gap: 0.75rem;
|
|
149
|
+
}
|
|
150
|
+
</style>
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<v-otp-input
|
|
19
19
|
ref="code"
|
|
20
20
|
container-class="grid grid-cols-6 gap-3 w-full"
|
|
21
|
-
input-classes="bg-gray-50 text-center
|
|
21
|
+
input-classes="bg-gray-50 text-center 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"
|
|
22
22
|
:num-inputs="6"
|
|
23
23
|
inputType="number"
|
|
24
24
|
inputmode="numeric"
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<div class="mt-6 flex justify-center">
|
|
32
32
|
<LinkButton
|
|
33
33
|
to="/login"
|
|
34
|
-
class="w-
|
|
34
|
+
class="w-full"
|
|
35
35
|
>
|
|
36
36
|
{{$t('Back to login')}}
|
|
37
37
|
</LinkButton>
|
|
@@ -130,15 +130,16 @@
|
|
|
130
130
|
}
|
|
131
131
|
</script>
|
|
132
132
|
|
|
133
|
-
<style lang='scss'>
|
|
133
|
+
<style scoped lang='scss'>
|
|
134
134
|
.vue3-2fa-code-input {
|
|
135
135
|
display: flex;
|
|
136
136
|
justify-content: center;
|
|
137
137
|
gap: 1rem;
|
|
138
138
|
margin-bottom: 1rem;
|
|
139
139
|
}
|
|
140
|
-
.otp-input {
|
|
141
|
-
|
|
140
|
+
:deep(.otp-input-container) {
|
|
141
|
+
display: flex;
|
|
142
|
+
gap: 0.75rem;
|
|
142
143
|
}
|
|
143
144
|
.vue3-2fa-code-input-box {
|
|
144
145
|
&[type='text'] {
|
|
@@ -15,29 +15,27 @@
|
|
|
15
15
|
<div class="p-10 w-full max-w-md max-h-full custom-auth-wrapper" >
|
|
16
16
|
<div class="m-3" >{{$t('Scan this QR code with your authenticator app or open by')}} <a class="text-blue-600" :href="totpUri">{{$t('click')}}</a></div>
|
|
17
17
|
<div class="flex justify-center m-3" >
|
|
18
|
-
<img :src="totpQrCode" class="min-w-[200px]
|
|
18
|
+
<img :src="totpQrCode" class="min-w-[200px] min-h-[200px]" alt="QR code" />
|
|
19
19
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
</div>
|
|
36
|
-
<div class="my-4 w-full flex justify-center p-2" ref="otpRoot">
|
|
20
|
+
<div class="m-1">{{$t('Or copy this code to app manually:')}}</div>
|
|
21
|
+
<div class="w-full">
|
|
22
|
+
<div class="relative">
|
|
23
|
+
<label for="npm-install-copy-text" class="sr-only">{{$t('Label')}}</label>
|
|
24
|
+
<input id="npm-install-copy-text" type="text" class="col-span-10 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 py-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 pr-12" :value="totp.newSecret" readonly>
|
|
25
|
+
<button @click="onCopyClick" data-copy-to-clipboard-target="npm-install-copy-text" class="absolute end-2.5 top-1/2 -translate-y-1/2 text-gray-900 dark:text-gray-400 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 rounded-lg py-2 px-2.5 inline-flex items-center justify-center bg-white border-gray-200 border">
|
|
26
|
+
<span id="default-message" class="inline-flex items-center">
|
|
27
|
+
<svg class="w-3 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
|
28
|
+
<path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
|
|
29
|
+
</svg>
|
|
30
|
+
</span>
|
|
31
|
+
</button>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="my-4 w-full flex justify-center" ref="otpRoot">
|
|
37
35
|
<v-otp-input
|
|
38
36
|
ref="code"
|
|
39
37
|
container-class="grid grid-cols-6 gap-3 w-full"
|
|
40
|
-
input-classes="otp-input bg-gray-50 text-center border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block h-[
|
|
38
|
+
input-classes="otp-input bg-gray-50 text-center border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block h-[46px] w-full 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"
|
|
41
39
|
:num-inputs="6"
|
|
42
40
|
inputType="number"
|
|
43
41
|
inputmode="numeric"
|
|
@@ -48,7 +46,7 @@
|
|
|
48
46
|
/>
|
|
49
47
|
</div>
|
|
50
48
|
<!-- <Vue2FACodeInput v-model="code" autofocus /> -->
|
|
51
|
-
<div class="flex flex-row gap-2.5
|
|
49
|
+
<div class="flex flex-row gap-2.5 h-12">
|
|
52
50
|
<LinkButton to="/login" class="w-full">
|
|
53
51
|
{{$t('Back to login')}}
|
|
54
52
|
</LinkButton>
|
|
@@ -220,8 +218,9 @@ const handleSkip = async () => {
|
|
|
220
218
|
}
|
|
221
219
|
}
|
|
222
220
|
</script>
|
|
223
|
-
<style>
|
|
224
|
-
.otp-input {
|
|
225
|
-
|
|
226
|
-
|
|
221
|
+
<style scoped>
|
|
222
|
+
:deep(.otp-input-container) {
|
|
223
|
+
display: flex;
|
|
224
|
+
gap: 0.75rem;
|
|
225
|
+
}
|
|
227
226
|
</style>
|