From 9c16c879de883fbdc294f3889dc4fb190be91287 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 15 Jun 2023 19:52:51 -0700
Subject: [PATCH] fix: :bug: 2FA dialog

---
 packages/client/src/components/MkSignin.vue   | 28 ++-----------------
 .../src/pages/settings/2fa.qrdialog.vue       |  2 +-
 packages/client/src/style.scss                | 24 ++++++++++++++++
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index 13da5d7ab..0cd4a7c6e 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/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>
diff --git a/packages/client/src/pages/settings/2fa.qrdialog.vue b/packages/client/src/pages/settings/2fa.qrdialog.vue
index 76d962e21..5f14d069e 100644
--- a/packages/client/src/pages/settings/2fa.qrdialog.vue
+++ b/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>
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 0f3f841b9..f1973c679 100644
--- a/packages/client/src/style.scss
+++ b/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 {