Skip to content

Commit c5925a5

Browse files
NoOne7135NoOne7135
committed
feat: improve layout and styling for TwoFaModal and related components
1 parent 4cdb4ca commit c5925a5

File tree

3 files changed

+37
-31
lines changed

3 files changed

+37
-31
lines changed

‎custom/TwoFaModal.vue

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 top-0 bottom-0 left-0 right-0"
33
v-if ="modelShow">
44
<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">
66
{{ $t('Please enter your authenticator code') }}
77
</div>
88

@@ -141,4 +141,10 @@
141141
window.removeEventListener('paste', handlePaste as any);
142142
});
143143
</script>
144-
144+
145+
<style scoped>
146+
:deep(.otp-input-container) {
147+
display: flex;
148+
gap: 0.75rem;
149+
}
150+
</style>

‎custom/TwoFactorsConfirmation.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<v-otp-input
1919
ref="code"
2020
container-class="grid grid-cols-6 gap-3 w-full"
21-
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"
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"
2222
:num-inputs="6"
2323
inputType="number"
2424
inputmode="numeric"
@@ -31,7 +31,7 @@
3131
<div class="mt-6 flex justify-center">
3232
<LinkButton
3333
to="/login"
34-
class="w-[290px] mx-4"
34+
class="w-full"
3535
>
3636
{{$t('Back to login')}}
3737
</LinkButton>
@@ -130,15 +130,16 @@
130130
}
131131
</script>
132132
133-
<style lang='scss'>
133+
<style scoped lang='scss'>
134134
.vue3-2fa-code-input {
135135
display: flex;
136136
justify-content: center;
137137
gap: 1rem;
138138
margin-bottom: 1rem;
139139
}
140-
.otp-input {
141-
margin: 0 5px;
140+
:deep(.otp-input-container) {
141+
display: flex;
142+
gap: 0.75rem;
142143
}
143144
.vue3-2fa-code-input-box {
144145
&[type='text'] {

‎custom/TwoFactorsSetup.vue

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,27 @@
1515
<div class="p-10 w-full max-w-md max-h-full custom-auth-wrapper" >
1616
<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>
1717
<div class="flex justify-center m-3" >
18-
<img :src="totpQrCode" class="min-w-[200px], min-h-[200px]" alt="QR code" />
18+
<img :src="totpQrCode" class="min-w-[200px] min-h-[200px]" alt="QR code" />
1919
</div>
20-
<div class="m-3 ">
21-
<div class="m-1">{{$t('Or copy this code to app manually:')}}</div>
22-
<div class="w-full">
23-
<div class="relative">
24-
<label for="npm-install-copy-text" class="sr-only">{{$t('Label')}}</label>
25-
<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>
26-
<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">
27-
<span id="default-message" class="inline-flex items-center">
28-
<svg class="w-3 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
29-
<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"/>
30-
</svg>
31-
</span>
32-
</button>
33-
</div>
34-
</div>
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">
3735
<v-otp-input
3836
ref="code"
3937
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-[43.33px] 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"
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"
4139
:num-inputs="6"
4240
inputType="number"
4341
inputmode="numeric"
@@ -48,7 +46,7 @@
4846
/>
4947
</div>
5048
<!-- <Vue2FACodeInput v-model="code" autofocus /> -->
51-
<div class="flex flex-row gap-2.5 px-3 h-12">
49+
<div class="flex flex-row gap-2.5 h-12">
5250
<LinkButton to="/login" class="w-full">
5351
{{$t('Back to login')}}
5452
</LinkButton>
@@ -220,8 +218,9 @@ const handleSkip = async () => {
220218
}
221219
}
222220
</script>
223-
<style>
224-
.otp-input {
225-
margin: 0 5px;
226-
}
221+
<style scoped>
222+
:deep(.otp-input-container) {
223+
display: flex;
224+
gap: 0.75rem;
225+
}
227226
</style>

0 commit comments

Comments
 (0)