Switch from input[type=tel] to input[type=text][inputmode=numeric] fo…

…r Authcode inputs, add a Javascript handler to enforce numeric-only inputs.
WordPress · Feb 15, 2023 · 3ed9089 · 3ed9089
1 parent 5c0b8d8
commit 3ed9089
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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(){