Tweak 2fa (#2179)

* Handle 2FA inputs in a way that (hopefully) plays nice with virtual keyboards

* Some tweaks

lemmy-translations

@@ -1 +1 @@
-Subproject commit e943f97fe481dc425acdebc8872bf1fdcabaf875
+Subproject commit d0f3548379e446d2c333e582734bc68f8d684f4d

src/shared/components/common/totp-modal.tsx

@@ -30,6 +30,9 @@ async function handleSubmit(modal: TotpModal, totp: string) {
 
   if (!successful) {
     modal.setState({ totp: "" });
+    for (const inputRef of modal.inputRefs) {
+      inputRef!.value = "";
+    }
     modal.inputRefs[0]?.focus();
   }
 }
@@ -39,7 +42,7 @@ function handleInput(
   event: any,
 ) {
   if (isNaN(event.target.value)) {
-    event.preventDefault();
+    modal.inputRefs[i]!.value = "";
     return;
   }
 
@@ -57,8 +60,6 @@ function handleKeyUp(
   event: any,
 ) {
   if (event.key === "Backspace" && i > 0) {
-    event.preventDefault();
-
     modal.setState(prev => ({
       ...prev,
       totp: prev.totp.slice(0, prev.totp.length - 1),
@@ -69,14 +70,20 @@ function handleKeyUp(
 
 function handlePaste(modal: TotpModal, event: any) {
   event.preventDefault();
-  const text: string = event.clipboardData.getData("text");
+  const text: string = event.clipboardData.getData("text")?.trim();
 
   if (text.length > TOTP_LENGTH || isNaN(Number(text))) {
     toast(I18NextService.i18n.t("invalid_totp_code"), "danger");
-    modal.setState({ totp: "" });
+    modal.clearTotp();
   } else {
+    [...text].forEach((num, i) => {
+      modal.inputRefs[i]!.value = num;
+    });
     modal.setState({ totp: text });
-    handleSubmit(modal, text);
+
+    if (text.length === TOTP_LENGTH) {
+      handleSubmit(modal, text);
+    }
   }
 }
 
@@ -215,7 +222,6 @@ export default class TotpModal extends Component<
                       inputMode="numeric"
                       autoComplete="one-time-code"
                       maxLength={1}
-                      value={totp[i] ?? ""}
                       disabled={totp.length !== i}
                       aria-labelledby="totp-input-label"
                       id={`totp-input-${i}`}
@@ -249,6 +255,9 @@ export default class TotpModal extends Component<
 
   clearTotp() {
     this.setState({ totp: "" });
+    for (const inputRef of this.inputRefs) {
+      inputRef!.value = "";
+    }
   }
 
   async handleShow() {

yarn.lock

@@ -6402,6 +6402,11 @@ make-fetch-happen@^3.0.0:
     socks-proxy-agent "^3.0.1"
     ssri "^5.2.4"
 
+markdown-it-bidi@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-bidi/-/markdown-it-bidi-0.1.0.tgz#fca8297bbe8ec738102984371f571377b8df0b9f"
+  integrity sha512-4GloQnF+PiILh6wkLAIeSxCLo9qUW7LcKj/08GyCpvo0LLC6YEhrZBvM9RkMkieGG7i4uIRE/F5jmU14DgR8Wg==
+
 markdown-it-container@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-3.0.0.tgz#1d19b06040a020f9a827577bb7dbf67aa5de9a5b"