LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-25 22:01:13 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
SleeplessOne1917 2023-10-11 18:17:54 -04:00
parent f5780c22ba
commit 1434db2191
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/shared/components/common/totp-modal.tsx
View file

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