Handle mobile OTP autofill strings · 4d3f381

+39 -19

scripts/host_manager.pl

@@ -1301,12 +1301,12 @@ sub app_html {
       </div>
       <form id="login-form">
         <div class="otp-row">
-          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit" autocomplete="one-time-code">
-          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
-          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
-          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
-          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
-          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
+          <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit" autocomplete="one-time-code">
+          <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
+          <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
+          <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
+          <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
+          <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
         </div>
       </form>
       <div id="login-error"></div>
@@ -1606,28 +1606,48 @@ sub app_html {
           e.preventDefault();
         }
       });
-      input.addEventListener('input', (e) => {
-        const val = input.value.replace(/\D/g, '').slice(-1);
-        input.value = val;
-        input.classList.toggle('filled', !!val);
-        if (val && idx < otpDigits.length - 1) otpDigits[idx + 1].focus();
-        if (val && idx === otpDigits.length - 1 && otpReady()) $('login-form').requestSubmit();
+      input.addEventListener('input', () => {
+        const digits = input.value.replace(/\D/g, '');
+        if (digits.length > 1) {
+          fillOtp(digits, digits.length >= otpDigits.length ? 0 : idx);
+          return;
+        }
+        setOtpDigit(idx, digits);
+        if (digits && idx < otpDigits.length - 1) otpDigits[idx + 1].focus();
+        maybeSubmitOtp();
       });
       input.addEventListener('paste', (e) => {
         const text = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '');
         e.preventDefault();
-        text.split('').slice(0, otpDigits.length).forEach((ch, i) => {
-          otpDigits[i].value = ch;
-          otpDigits[i].classList.add('filled');
-        });
-        const next = Math.min(text.length, otpDigits.length - 1);
-        otpDigits[next].focus();
-        if (otpReady()) $('login-form').requestSubmit();
+        fillOtp(text, text.length >= otpDigits.length ? 0 : idx);
       });
     });
 
+    function setOtpDigit(idx, value) {
+      const digit = (value || '').replace(/\D/g, '').slice(0, 1);
+      otpDigits[idx].value = digit;
+      otpDigits[idx].classList.toggle('filled', !!digit);
+    }
+
+    function fillOtp(text, startIdx = 0) {
+      const digits = (text || '').replace(/\D/g, '').slice(0, otpDigits.length);
+      if (!digits) return;
+      if (digits.length >= otpDigits.length) {
+        otpDigits.forEach((_, i) => setOtpDigit(i, digits[i] || ''));
+      } else {
+        digits.split('').forEach((ch, offset) => {
+          const targetIdx = startIdx + offset;
+          if (targetIdx < otpDigits.length) setOtpDigit(targetIdx, ch);
+        });
+      }
+      const next = Math.min((digits.length >= otpDigits.length ? digits.length : startIdx + digits.length), otpDigits.length - 1);
+      otpDigits[next].focus();
+      maybeSubmitOtp();
+    }
+
     function getOtp() { return otpDigits.map(i => i.value).join(''); }
     function otpReady() { return otpDigits.every(i => /^\d$/.test(i.value)); }
+    function maybeSubmitOtp() { if (otpReady()) $('login-form').requestSubmit(); }
     function clearOtp() { otpDigits.forEach(i => { i.value = ''; i.classList.remove('filled'); }); otpDigits[0].focus(); }
 
     $('login-form').addEventListener('submit', async (event) => {


	@@ -1301,12 +1301,12 @@ sub app_html {
1301	1301	</div>
1302	1302	<form id="login-form">
1303	1303	<div class="otp-row">
1304		- <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit" autocomplete="one-time-code">
1305		- <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
1306		- <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
1307		- <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
1308		- <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
1309		- <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">
	1304	+ <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit" autocomplete="one-time-code">
	1305	+ <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
	1306	+ <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
	1307	+ <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
	1308	+ <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
	1309	+ <input type="text" inputmode="numeric" pattern="[0-9]*" class="otp-digit">
1310	1310	</div>
1311	1311	</form>
1312	1312	<div id="login-error"></div>
	@@ -1606,28 +1606,48 @@ sub app_html {
1606	1606	e.preventDefault();
1607	1607	}
1608	1608	});
1609		- input.addEventListener('input', (e) => {
1610		- const val = input.value.replace(/\D/g, '').slice(-1);
1611		- input.value = val;
1612		- input.classList.toggle('filled', !!val);
1613		- if (val && idx < otpDigits.length - 1) otpDigits[idx + 1].focus();
1614		- if (val && idx === otpDigits.length - 1 && otpReady()) $('login-form').requestSubmit();
	1609	+ input.addEventListener('input', () => {
	1610	+ const digits = input.value.replace(/\D/g, '');
	1611	+ if (digits.length > 1) {
	1612	+ fillOtp(digits, digits.length >= otpDigits.length ? 0 : idx);
	1613	+ return;
	1614	+ }
	1615	+ setOtpDigit(idx, digits);
	1616	+ if (digits && idx < otpDigits.length - 1) otpDigits[idx + 1].focus();
	1617	+ maybeSubmitOtp();
1615	1618	});
1616	1619	input.addEventListener('paste', (e) => {
1617	1620	const text = (e.clipboardData \|\| window.clipboardData).getData('text').replace(/\D/g, '');
1618	1621	e.preventDefault();
1619		- text.split('').slice(0, otpDigits.length).forEach((ch, i) => {
1620		- otpDigits[i].value = ch;
1621		- otpDigits[i].classList.add('filled');
1622		- });
1623		- const next = Math.min(text.length, otpDigits.length - 1);
1624		- otpDigits[next].focus();
1625		- if (otpReady()) $('login-form').requestSubmit();
	1622	+ fillOtp(text, text.length >= otpDigits.length ? 0 : idx);
1626	1623	});
1627	1624	});
1628	1625
	1626	+ function setOtpDigit(idx, value) {
	1627	+ const digit = (value \|\| '').replace(/\D/g, '').slice(0, 1);
	1628	+ otpDigits[idx].value = digit;
	1629	+ otpDigits[idx].classList.toggle('filled', !!digit);
	1630	+ }
	1631	+
	1632	+ function fillOtp(text, startIdx = 0) {
	1633	+ const digits = (text \|\| '').replace(/\D/g, '').slice(0, otpDigits.length);
	1634	+ if (!digits) return;
	1635	+ if (digits.length >= otpDigits.length) {
	1636	+ otpDigits.forEach((_, i) => setOtpDigit(i, digits[i] \|\| ''));
	1637	+ } else {
	1638	+ digits.split('').forEach((ch, offset) => {
	1639	+ const targetIdx = startIdx + offset;
	1640	+ if (targetIdx < otpDigits.length) setOtpDigit(targetIdx, ch);
	1641	+ });
	1642	+ }
	1643	+ const next = Math.min((digits.length >= otpDigits.length ? digits.length : startIdx + digits.length), otpDigits.length - 1);
	1644	+ otpDigits[next].focus();
	1645	+ maybeSubmitOtp();
	1646	+ }
	1647	+
1629	1648	function getOtp() { return otpDigits.map(i => i.value).join(''); }
1630	1649	function otpReady() { return otpDigits.every(i => /^\d$/.test(i.value)); }
	1650	+ function maybeSubmitOtp() { if (otpReady()) $('login-form').requestSubmit(); }
1631	1651	function clearOtp() { otpDigits.forEach(i => { i.value = ''; i.classList.remove('filled'); }); otpDigits[0].focus(); }
1632	1652
1633	1653	$('login-form').addEventListener('submit', async (event) => {