From 3ed9089e6f901b98489c28f6660cd42150b0907a Mon Sep 17 00:00:00 2001
From: Dion Hulse <contact@dd32.id.au>
Date: Wed, 15 Feb 2023 11:37:39 +1000
Subject: [PATCH] Switch from input[type=tel] to
 input[type=text][inputmode=numeric] for Authcode inputs, add a Javascript
 handler to enforce numeric-only inputs.

---
 class-two-factor-core.php                   | 15 ++++++++++++++-
 providers/class-two-factor-backup-codes.php |  2 +-
 providers/class-two-factor-email.php        |  2 +-
 providers/class-two-factor-totp.php         |  2 +-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/class-two-factor-core.php b/class-two-factor-core.php
index 8f5d9b6f..6e3f6fe7 100644
--- a/class-two-factor-core.php
+++ b/class-two-factor-core.php
@@ -782,7 +782,20 @@ public static function login_html( $user, $login_nonce, $redirect_to, $error_msg
 				opacity: 0.5;
 			}
 		</style>
-
+		<script>
+			(function() {
+				// Enforce numeric-only input for numeric inputmode elements.
+				var inputEl = document.querySelector( 'input.authcode[inputmode="numeric"]' );
+				if ( inputEl ) {
+					inputEl.addEventListener(
+						'input',
+						function() {
+							this.value = this.value.replace( /[^0-9 ]/g, '' );
+						}
+					);
+				}
+			})();
+		</script>
 		<?php
 		if ( ! function_exists( 'login_footer' ) ) {
 			include_once TWO_FACTOR_DIR . 'includes/function.login-footer.php';
diff --git a/providers/class-two-factor-backup-codes.php b/providers/class-two-factor-backup-codes.php
index 45543039..60649068 100644
--- a/providers/class-two-factor-backup-codes.php
+++ b/providers/class-two-factor-backup-codes.php
@@ -330,7 +330,7 @@ public function authentication_page( $user ) {
 		<p class="two-factor-prompt"><?php esc_html_e( 'Enter a backup verification code.', 'two-factor' ); ?></p>
 		<p>
 			<label for="authcode"><?php esc_html_e( 'Verification Code:', 'two-factor' ); ?></label>
-			<input type="tel" name="two-factor-backup-code" id="authcode" class="input authcode" value="" size="20" pattern="[0-9 ]*" placeholder="12345678" />
+			<input type="text" inputmode="numeric" name="two-factor-backup-code" id="authcode" class="input authcode" value="" size="20" pattern="[0-9 ]*" placeholder="12345678" />
 		</p>
 		<?php
 		submit_button( __( 'Submit', 'two-factor' ) );
diff --git a/providers/class-two-factor-email.php b/providers/class-two-factor-email.php
index dde4d202..df766343 100644
--- a/providers/class-two-factor-email.php
+++ b/providers/class-two-factor-email.php
@@ -269,7 +269,7 @@ public function authentication_page( $user ) {
 		<p class="two-factor-prompt"><?php esc_html_e( 'A verification code has been sent to the email address associated with your account.', 'two-factor' ); ?></p>
 		<p>
 			<label for="authcode"><?php esc_html_e( 'Verification Code:', 'two-factor' ); ?></label>
-			<input type="tel" name="two-factor-email-code" id="authcode" class="input authcode" value="" size="20" pattern="[0-9 ]*" placeholder="12345678" />
+			<input type="text" inputmode="numeric" name="two-factor-email-code" id="authcode" class="input authcode" value="" size="20" pattern="[0-9 ]*" placeholder="12345678" />
 			<?php submit_button( __( 'Log In', 'two-factor' ) ); ?>
 		</p>
 		<p class="two-factor-email-resend">
diff --git a/providers/class-two-factor-totp.php b/providers/class-two-factor-totp.php
index 55afe223..1dbc7c17 100644
--- a/providers/class-two-factor-totp.php
+++ b/providers/class-two-factor-totp.php
@@ -645,7 +645,7 @@ public function authentication_page( $user ) {
 		</p>
 		<p>
 			<label for="authcode"><?php esc_html_e( 'Authentication Code:', 'two-factor' ); ?></label>
-			<input type="tel" autocomplete="one-time-code" name="authcode" id="authcode" class="input authcode" value="" size="20" pattern="[0-9 ]*" placeholder="123456"  />
+			<input type="text" inputmode="numeric" autocomplete="one-time-code" name="authcode" id="authcode" class="input authcode" value="" size="20" pattern="[0-9 ]*" placeholder="123456"  />
 		</p>
 		<script type="text/javascript">
 			setTimeout( function(){