input.value).join('');
if ($event.target.value && inputs[index + 1]) inputs[index + 1].focus();
"
@keydown.backspace="
if (! $event.target.value) {
const inputs = [...$root.querySelectorAll('[data-totp]')];
const index = inputs.indexOf($event.target);
if (inputs[index - 1]) inputs[index - 1].focus();
}
"
@paste.prevent="
const pastedCode = ($event.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 6);
const inputs = [...$root.querySelectorAll('[data-totp]')];
inputs.forEach((input, index) => input.value = pastedCode[index] || '');
totp = pastedCode;
(inputs[pastedCode.length] || inputs[5]).focus();
"
class="min-w-0 w-0 h-[52px] flex-1 rounded-[9px] bg-[var(--surface-2)] border border-[var(--border)] text-center mono text-[22px] text-[var(--text)] focus:border-[var(--accent)] outline-none transition-colors" />
input.value).join('');
if ($event.target.value && inputs[index + 1]) inputs[index + 1].focus();
"
@keydown.backspace="
if (! $event.target.value) {
const inputs = [...$root.querySelectorAll('[data-totp]')];
const index = inputs.indexOf($event.target);
if (inputs[index - 1]) inputs[index - 1].focus();
}
"
@paste.prevent="
const pastedCode = ($event.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 6);
const inputs = [...$root.querySelectorAll('[data-totp]')];
inputs.forEach((input, index) => input.value = pastedCode[index] || '');
totp = pastedCode;
(inputs[pastedCode.length] || inputs[5]).focus();
"
class="min-w-0 w-0 h-[52px] flex-1 rounded-[9px] bg-[var(--surface-2)] border border-[var(--border)] text-center mono text-[22px] text-[var(--text)] focus:border-[var(--accent)] outline-none transition-colors" />
input.value).join('');
if ($event.target.value && inputs[index + 1]) inputs[index + 1].focus();
"
@keydown.backspace="
if (! $event.target.value) {
const inputs = [...$root.querySelectorAll('[data-totp]')];
const index = inputs.indexOf($event.target);
if (inputs[index - 1]) inputs[index - 1].focus();
}
"
@paste.prevent="
const pastedCode = ($event.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 6);
const inputs = [...$root.querySelectorAll('[data-totp]')];
inputs.forEach((input, index) => input.value = pastedCode[index] || '');
totp = pastedCode;
(inputs[pastedCode.length] || inputs[5]).focus();
"
class="min-w-0 w-0 h-[52px] flex-1 rounded-[9px] bg-[var(--surface-2)] border border-[var(--border)] text-center mono text-[22px] text-[var(--text)] focus:border-[var(--accent)] outline-none transition-colors" />
input.value).join('');
if ($event.target.value && inputs[index + 1]) inputs[index + 1].focus();
"
@keydown.backspace="
if (! $event.target.value) {
const inputs = [...$root.querySelectorAll('[data-totp]')];
const index = inputs.indexOf($event.target);
if (inputs[index - 1]) inputs[index - 1].focus();
}
"
@paste.prevent="
const pastedCode = ($event.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 6);
const inputs = [...$root.querySelectorAll('[data-totp]')];
inputs.forEach((input, index) => input.value = pastedCode[index] || '');
totp = pastedCode;
(inputs[pastedCode.length] || inputs[5]).focus();
"
class="min-w-0 w-0 h-[52px] flex-1 rounded-[9px] bg-[var(--surface-2)] border border-[var(--border)] text-center mono text-[22px] text-[var(--text)] focus:border-[var(--accent)] outline-none transition-colors" />
input.value).join('');
if ($event.target.value && inputs[index + 1]) inputs[index + 1].focus();
"
@keydown.backspace="
if (! $event.target.value) {
const inputs = [...$root.querySelectorAll('[data-totp]')];
const index = inputs.indexOf($event.target);
if (inputs[index - 1]) inputs[index - 1].focus();
}
"
@paste.prevent="
const pastedCode = ($event.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 6);
const inputs = [...$root.querySelectorAll('[data-totp]')];
inputs.forEach((input, index) => input.value = pastedCode[index] || '');
totp = pastedCode;
(inputs[pastedCode.length] || inputs[5]).focus();
"
class="min-w-0 w-0 h-[52px] flex-1 rounded-[9px] bg-[var(--surface-2)] border border-[var(--border)] text-center mono text-[22px] text-[var(--text)] focus:border-[var(--accent)] outline-none transition-colors" />
input.value).join('');
if ($event.target.value && inputs[index + 1]) inputs[index + 1].focus();
"
@keydown.backspace="
if (! $event.target.value) {
const inputs = [...$root.querySelectorAll('[data-totp]')];
const index = inputs.indexOf($event.target);
if (inputs[index - 1]) inputs[index - 1].focus();
}
"
@paste.prevent="
const pastedCode = ($event.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 6);
const inputs = [...$root.querySelectorAll('[data-totp]')];
inputs.forEach((input, index) => input.value = pastedCode[index] || '');
totp = pastedCode;
(inputs[pastedCode.length] || inputs[5]).focus();
"
class="min-w-0 w-0 h-[52px] flex-1 rounded-[9px] bg-[var(--surface-2)] border border-[var(--border)] text-center mono text-[22px] text-[var(--text)] focus:border-[var(--accent)] outline-none transition-colors" />