fix: 🐛 standard input for 2FA token

Closes #10361, removes client dependency

locales/en-US.yml

@@ -1513,6 +1513,7 @@ _2fa:
   renewTOTPConfirm: "This will cause verification codes from your previous app to stop working"
   renewTOTPOk: "Reconfigure"
   renewTOTPCancel: "Cancel"
+  token: "2FA Token"
 _permissions:
   "read:account": "View your account information"
   "write:account": "Edit your account information"

locales/ja-JP.yml

@@ -1336,6 +1336,7 @@ _2fa:
   renewTOTPConfirm: "今までの認証アプリの確認コードは使用できなくなります"
   renewTOTPOk: "再設定する"
   renewTOTPCancel: "やめておく"
+  token: "多要素認証トークン"
 _permissions:
   "read:account": "アカウントの情報を見る"
   "write:account": "アカウントの情報を変更する"

packages/client/package.json

@@ -89,7 +89,6 @@
 		"vue-isyourpasswordsafe": "^2.0.0",
 		"vue-plyr": "^7.0.0",
 		"vue-prism-editor": "2.0.0-alpha.2",
-		"vue3-otp-input": "^0.4.1",
 		"vuedraggable": "4.1.0"
 	}
 }

packages/client/src/components/MkSignin.vue

@@ -99,17 +99,19 @@
 							><i class="ph-lock ph-bold ph-lg"></i
 						></template>
 					</MkInput>
-					<vue3-otp-input
+					<MkInput
-						input-classes="_otp_input"
-						inputType="letter-numeric"
-						separator=""
-						:num-inputs="6"
 						v-model="token"
-						:should-auto-focus="true"
+						type="text"
-						@on-change="updateToken"
+						autocomplete="one-time-code"
-						@on-complete="onSubmit"
+						pattern="^[0-9]{6}$"
+						:spellcheck="false"
 						required
-					/>
+					>
+						<template #label>{{ i18n.ts._2fa.token }}</template>
+						<template #prefix
+							><i class="ph-poker-chip ph-bold ph-lg"></i
+						></template>
+					</MkInput>
 					<MkButton
 						type="submit"
 						:disabled="signing"

packages/client/src/style.scss

@@ -865,26 +865,26 @@ hr {
 	}
 }
 
-._otp_input {
+// ._otp_input {
-	width: 30px;
+// 	width: 30px;
-	height: 30px;
+// 	height: 30px;
-	padding: 5px;
+// 	padding: 5px;
-	margin: 1rem 7px auto;
+// 	margin: 1rem 7px auto;
-	font-size: 20px;
+// 	font-size: 20px;
-	border-radius: 4px;
+// 	border-radius: 4px;
-	border: 2px solid var(--accent);
+// 	border: 2px solid var(--accent);
-	background-color: var(--accentedBg);
+// 	background-color: var(--accentedBg);
-	color: var(--fg);
+// 	color: var(--fg);
-	text-align: center;
+// 	text-align: center;
-}
+// }
-._otp_input.error {
+// ._otp_input.error {
-	border-color: var(--error) !important;
+// 	border-color: var(--error) !important;
-}
+// }
-._otp_input::-webkit-inner-spin-button,
+// ._otp_input::-webkit-inner-spin-button,
-._otp_input::-webkit-outer-spin-button {
+// ._otp_input::-webkit-outer-spin-button {
-	-webkit-appearance: none;
+// 	-webkit-appearance: none;
-	margin: 0;
+// 	margin: 0;
-}
+// }
 
 @keyframes reset {
 	to {

pnpm-lock.yaml

@@ -916,9 +916,6 @@ importers:
       vue-prism-editor:
         specifier: 2.0.0-alpha.2
         version: 2.0.0-alpha.2(vue@3.3.4)
-      vue3-otp-input:
-        specifier: ^0.4.1
-        version: 0.4.1(vue@3.3.4)
       vuedraggable:
         specifier: 4.1.0
         version: 4.1.0(vue@3.3.4)
@@ -15076,15 +15073,6 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /vue3-otp-input@0.4.1(vue@3.3.4):
-    resolution: {integrity: sha512-wVl9i3DcWlO0C7fBI9V+RIP3crm/1tY72fuhvb3YM2JfbLoYofB96aPl5AgFhA0Cse5bQEMYtIvOeiqW3rfbAw==}
-    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
-    peerDependencies:
-      vue: ^3.0.*
-    dependencies:
-      vue: 3.3.4
-    dev: true
-
   /vue@2.7.14:
     resolution: {integrity: sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==}
     dependencies: