Skip to content

Move inline JS to external script files #814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aslamdoctor wants to merge 4 commits into
base: master
Choose a base branch
from
+331 −202
Open

Move inline JS to external script files #814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a84c2a2
Move inline JavaScript to external script files
aslamdoctor Feb 25, 2026
070d21a
Fix QR code not rendering after resetting authenticator app
aslamdoctor Feb 26, 2026
8bca6e7
Fix vars-on-top lint errors in totp-admin.js
aslamdoctor Feb 26, 2026
283df92
Fix issues from Copilot review on external JS migration
aslamdoctor Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 33 additions & 38 deletions class-two-factor-core.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ public static function add_hooks( $compat ) {

add_filter( 'attach_session_information', array( __CLASS__, 'filter_session_information' ), 10, 2 );

add_action( 'login_enqueue_scripts', array( __CLASS__, 'login_enqueue_scripts' ), 5 );
add_action( 'admin_init', array( __CLASS__, 'trigger_user_settings_action' ) );
add_filter( 'two_factor_providers', array( __CLASS__, 'enable_dummy_method_for_debug' ) );

Expand All @@ -135,6 +136,33 @@ public static function add_hooks( $compat ) {
$compat->init();
}

/**
* Register login page scripts.
*
* @since 0.10.0
*
* @codeCoverageIgnore
*/
public static function login_enqueue_scripts() {
$environment_prefix = file_exists( TWO_FACTOR_DIR . '/dist' ) ? '/dist' : '';

wp_register_script(
'two-factor-login',
plugins_url( $environment_prefix . '/providers/js/two-factor-login.js', __FILE__ ),
array(),
TWO_FACTOR_VERSION,
true
);

wp_register_script(
'two-factor-login-authcode',
plugins_url( $environment_prefix . '/providers/js/two-factor-login-authcode.js', __FILE__ ),
array(),
TWO_FACTOR_VERSION,
true
);
}

/**
* Delete all plugin data on uninstall.
*
Expand Down Expand Up @@ -1127,41 +1155,7 @@ 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.
const form = document.querySelector( '#loginform' ),
inputEl = document.querySelector( 'input.authcode[inputmode="numeric"]' ),
expectedLength = inputEl?.dataset.digits || 0;

if ( inputEl ) {
let spaceInserted = false;
inputEl.addEventListener(
'input',
function() {
let value = this.value.replace( /[^0-9 ]/g, '' ).trimStart();

if ( ! spaceInserted && expectedLength && value.length === Math.floor( expectedLength / 2 ) ) {
value += ' ';
spaceInserted = true;
} else if ( spaceInserted && ! this.value ) {
spaceInserted = false;
}

this.value = value;

// Auto-submit if it's the expected length.
if ( expectedLength && value.replace( / /g, '' ).length == expectedLength ) {
if ( undefined !== form.requestSubmit ) {
form.requestSubmit();
form.submit.disabled = "disabled";
}
}
}
);
}
})();
</script>
<?php wp_enqueue_script( 'two-factor-login-authcode' ); ?>
<?php
if ( ! function_exists( 'login_footer' ) ) {
require_once TWO_FACTOR_DIR . 'includes/function.login-footer.php';
Expand Down Expand Up @@ -1581,6 +1575,10 @@ public static function _login_form_validate_2fa( $user, $nonce = '', $provider =
$customize_login = isset( $_REQUEST['customize-login'] );
if ( $customize_login ) {
wp_enqueue_script( 'customize-base' );
wp_add_inline_script(
'customize-base',
'setTimeout( function(){ new wp.customize.Messenger({ url: ' . wp_json_encode( esc_url( wp_customize_url() ) ) . ', channel: \'login\' }).send(\'login\') }, 1000 );'
);
}
$message = '<p class="message">' . __( 'You have logged in successfully.', 'two-factor' ) . '</p>';
$interim_login = 'success'; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
Expand All @@ -1591,9 +1589,6 @@ public static function _login_form_validate_2fa( $user, $nonce = '', $provider =
/** This action is documented in wp-login.php */
do_action( 'login_footer' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound -- Core WordPress action.
?>
<?php if ( $customize_login ) : ?>
<script>setTimeout( function(){ new wp.customize.Messenger({ url: '<?php echo esc_url( wp_customize_url() ); ?>', channel: 'login' }).send('login') }, 1000 );</script>
<?php endif; ?>
</body></html>
<?php
return;
Expand Down
80 changes: 30 additions & 50 deletions providers/class-two-factor-backup-codes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,31 @@ protected function __construct() {
add_action( 'rest_api_init', array( $this, 'register_rest_routes' ) );
add_action( 'two_factor_user_options_' . __CLASS__, array( $this, 'user_options' ) );
add_action( 'admin_notices', array( $this, 'admin_notices' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_assets' ) );

parent::__construct();
}

/**
* Enqueue scripts for backup codes.
*
* @since 0.10.0
*
* @codeCoverageIgnore
*
* @param string $hook_suffix Optional. The current admin page hook suffix.
*/
public function enqueue_assets( $hook_suffix = '' ) {
wp_register_script(
'two-factor-backup-codes-admin',
plugins_url( 'js/backup-codes-admin.js', __FILE__ ),
array( 'jquery', 'wp-api-request' ),
TWO_FACTOR_VERSION,
true
);
}

/**
* Register the rest-api endpoints required for this provider.
*
Expand Down Expand Up @@ -156,8 +177,15 @@ public function is_available_for_user( $user ) {
* @param WP_User $user WP_User object of the logged-in user.
*/
public function user_options( $user ) {
wp_enqueue_script( 'wp-api-request' );
wp_enqueue_script( 'jquery' );
wp_localize_script(
'two-factor-backup-codes-admin',
'twoFactorBackupCodes',
array(
'restPath' => Two_Factor_Core::REST_NAMESPACE . '/generate-backup-codes',
'userId' => $user->ID,
)
);
wp_enqueue_script( 'two-factor-backup-codes-admin' );

$count = self::codes_remaining_for_user( $user );
?>
Expand Down Expand Up @@ -191,54 +219,6 @@ public function user_options( $user ) {
<a class="button button-two-factor-backup-codes-download button-secondary hide-if-no-js" href="javascript:void(0);" id="two-factor-backup-codes-download-link" download="two-factor-backup-codes.txt"><?php esc_html_e( 'Download Codes', 'two-factor' ); ?></a>
</p>
</div>
<script>
( function( $ ) {
$( '.button-two-factor-backup-codes-copy' ).click( function() {
var csvCodes = $( '.two-factor-backup-codes-wrapper' ).data( 'codesCsv' );

if ( ! csvCodes ) {
return;
}

if ( navigator.clipboard && navigator.clipboard.writeText ) {
navigator.clipboard.writeText( csvCodes );
return;
}

var $temp = $( '<textarea>' ).val( csvCodes ).css( { position: 'absolute', left: '-9999px' } );
$( 'body' ).append( $temp );
$temp[0].select();
document.execCommand( 'copy' );
$temp.remove();
} );

$( '.button-two-factor-backup-codes-generate' ).click( function() {
wp.apiRequest( {
method: 'POST',
path: <?php echo wp_json_encode( Two_Factor_Core::REST_NAMESPACE . '/generate-backup-codes' ); ?>,
data: {
user_id: <?php echo wp_json_encode( $user->ID ); ?>
}
} ).then( function( response ) {
var $codesList = $( '.two-factor-backup-codes-unused-codes' );

$( '.two-factor-backup-codes-wrapper' ).show();
$codesList.html( '' );
$codesList.css( { 'column-count': 2, 'column-gap': '80px', 'max-width': '420px' } );
$( '.two-factor-backup-codes-wrapper' ).data( 'codesCsv', response.codes.join( ',' ) );

// Append the codes.
for ( var i = 0; i < response.codes.length; i++ ) {
$codesList.append( '<li class="two-factor-backup-codes-token">' + response.codes[ i ] + '</li>' );
}

// Update counter.
$( '.two-factor-backup-codes-count' ).html( response.i18n.count );
$( '#two-factor-backup-codes-download-link' ).attr( 'href', response.download_link );
} );
} );
} )( jQuery );
</script>
<?php
}

Expand Down
11 changes: 1 addition & 10 deletions providers/class-two-factor-email.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,16 +356,7 @@ public function authentication_page( $user ) {
<p class="two-factor-email-resend">
<input type="submit" class="button" name="<?php echo esc_attr( self::INPUT_NAME_RESEND_CODE ); ?>" value="<?php esc_attr_e( 'Resend Code', 'two-factor' ); ?>" />
</p>
<script>
setTimeout( function(){
var d;
try{
d = document.getElementById('authcode');
d.value = '';
d.focus();
} catch(e){}
}, 200);
</script>
<?php wp_enqueue_script( 'two-factor-login' ); ?>
<?php
}

Expand Down
Loading