fix: 🐛 2FA dialog

This commit is contained in:
ThatOneCalculator 2023-06-15 19:52:51 -07:00
parent 7220fede8c
commit 9c16c879de
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
3 changed files with 28 additions and 26 deletions

View File

@ -100,8 +100,9 @@
></template>
</MkInput>
<vue3-otp-input
input-classes="otp-input"
inputType="number"
input-classes="_otp_input"
inputType="letter-numeric"
separator=""
:num-inputs="6"
v-model="token"
:should-auto-focus="true"
@ -390,27 +391,4 @@ function showSuspendedDialog() {
}
}
}
.otp-input {
width: 40px;
height: 40px;
padding: 5px;
margin: 0 10px;
font-size: 20px;
border-radius: 4px;
border: 2px solid var(--accent);
background-color: var(--accentedBg);
text-align: center;
}
.otp-input.is-complete {
border-color: var(--success) !important;
}
.otp-input.error {
border-color: var(--error) !important;
}
.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>

View File

@ -35,7 +35,7 @@
<a :href="twoFactorData.url"
><img :class="$style.qr" :src="twoFactorData.qr"
/></a>
<div style="max-width: 600px">
<div style="max-width: 610px">
<MkKeyValue :copy="twoFactorData.url">
<template #key>{{ i18n.ts._2fa.step2Url }}</template>
<template #value>{{ twoFactorData.url }}</template>

View File

@ -798,6 +798,30 @@ hr {
}
}
._otp_input {
width: 40px;
height: 40px;
padding: 5px;
margin: 1rem 7px auto;
font-size: 20px;
border-radius: 4px;
border: 2px solid var(--accent);
background-color: var(--accentedBg);
color: var(--fg);
text-align: center;
}
._otp_input.is-complete {
border-color: var(--success) !important;
}
._otp_input.error {
border-color: var(--error) !important;
}
._otp_input::-webkit-inner-spin-button,
._otp_input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
@media(prefers-reduced-motion: no-preference) {
@keyframes scaleIn {
from {