diff --git a/packages/ui/src/components/CodeInput.svelte b/packages/ui/src/components/CodeInput.svelte index ce53c077f8..a62ec51296 100644 --- a/packages/ui/src/components/CodeInput.svelte +++ b/packages/ui/src/components/CodeInput.svelte @@ -31,7 +31,6 @@ on:change on:keyup on:input - maxlength={1} inputmode="numeric" autocomplete="off" placeholder="" diff --git a/plugins/login-resources/src/components/OtpForm.svelte b/plugins/login-resources/src/components/OtpForm.svelte index a5890f766a..057e850cdb 100644 --- a/plugins/login-resources/src/components/OtpForm.svelte +++ b/plugins/login-resources/src/components/OtpForm.svelte @@ -81,20 +81,26 @@ if (value == null || value === '') return - const index = fields.findIndex(({ id }) => id === target.id) - if (index === -1) return + if (value.length === fields.length) { + pasteOtpCode(value) + } else { + const index = fields.findIndex(({ id }) => id === target.id) + if (index === -1) return - if (Object.values(otpData).every((v) => v !== '')) { - void validateOtp() - return - } + target.value = value[0] - const nextField = fields[index + 1] - if (nextField === undefined) return + if (Object.values(otpData).every((v) => v !== '')) { + void validateOtp() + return + } - const nextInput = formElement?.querySelector(`input[name="${nextField.name}"]`) as HTMLInputElement - if (nextInput != null) { - nextInput.focus() + const nextField = fields[index + 1] + if (nextField === undefined) return + + const nextInput = formElement?.querySelector(`input[name="${nextField.name}"]`) as HTMLInputElement + if (nextInput != null) { + nextInput.focus() + } } } @@ -139,9 +145,15 @@ if (e.clipboardData == null) return const text = e.clipboardData.getData('text') + pasteOtpCode(text) + } + + function pasteOtpCode (text: string): boolean { const digits = text.split('').filter((it) => it !== ' ') - if (digits.length !== fields.length) return + if (digits.length !== fields.length) { + return false + } let focusName: string | undefined = undefined @@ -160,6 +172,8 @@ if (Object.values(otpData).every((v) => v !== '')) { void validateOtp() } + + return true } $: if (formElement != null) {