fix: 🐛 2FA dialog

packages/client/src/components/MkSignin.vue

@@ -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>

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

@@ -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>

packages/client/src/style.scss

@@ -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 {