mirror/iceshrimp
1
0
Fork 0
mirror of https://iceshrimp.dev/iceshrimp/iceshrimp synced 2024-11-28 14:58:09 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 🐛 2FA dialog

Browse Source
This commit is contained in:
ThatOneCalculator 2023-06-15 19:52:51 -07:00
parent b63f9cb84e
commit bc13bfdfec
3 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/client/src/components/MkSignin.vue
View File

@ -100,8 +100,9 @@
></template> ></template>
</MkInput> </MkInput>
<vue3-otp-input <vue3-otp-input
input-classes="otp-input" input-classes="_otp_input"
inputType="number" inputType="letter-numeric"
separator=""
:num-inputs="6" :num-inputs="6"
v-model="token" v-model="token"
:should-auto-focus="true" :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> </style>

2
packages/client/src/pages/settings/2fa.qrdialog.vue
View File

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

24
packages/client/src/style.scss
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) { @media(prefers-reduced-motion: no-preference) {
@keyframes scaleIn { @keyframes scaleIn {
from { from {