Force Two Factor

assets/js/force-2fa.js

@@ -0,0 +1,88 @@
+/* global ajaxurl, jQuery */
+
+/**
+ * Checks that an element has a non-empty `name` and `value` property.
+ *
+ * @param  {Element} element The element to check
+ * @return {Boolean} true if the element is an input, false if not
+ */
+var isValidElement = function( element ) {
+	return element.name && element.value;
+};
+
+/**
+ * Checks if an element’s value can be saved (e.g. not an unselected checkbox).
+ *
+ * @param  {Element} element The element to check
+ * @return {Boolean} true if the value should be added, false if not
+ */
+var isValidValue = function( element ) {
+	return ( ! [ 'checkbox', 'radio' ].includes( element.type ) || element.checked );
+};
+
+/**
+ * Checks if an input is a checkbox, because checkboxes allow multiple values.
+ *
+ * @param  {Element} element The element to check
+ * @return {Boolean} true if the element is a checkbox, false if not
+ */
+var isCheckbox = function( element ) {
+	return 'checkbox' === element.type;
+};
+
+/**
+ * Retrieves input data from a form and returns it as a JSON object.
+ *
+ * @param  {HTMLFormControlsCollection} elements the form elements
+ * @return {Object} form data as an object literal
+ */
+var formToJSON = function( elements ) {
+	return [].reduce.call( elements, function( data, element ) {
+
+		// Make sure the element has the required properties and should be added.
+		if ( ! isValidElement( element ) || ! isValidValue( element ) ) {
+			return data;
+		}
+
+		/*
+		 * Some fields allow for more than one value, so we need to check if this
+		 * is one of those fields and, if so, store the values as an array.
+		 */
+		if ( isCheckbox( element ) ) {
+			data[ element.name ] = ( data[ element.name ] || [] ).concat( element.value );
+		} else {
+			data[ element.name ] = element.value;
+		}
+
+		return data;
+	}, {} );
+};
+
+/**
+ * A handler function to prevent default submission and run our custom script.
+ *
+ * @param  {Event} event  the submit event triggered by the user
+ */
+var handleFormSubmit = function( event ) {
+
+	// Get form data.
+	var formData = formToJSON( event.target.elements );
+
+	event.preventDefault();
+
+	formData.action = 'two_factor_force_form_submit';
+
+	// Submit data to WordPress.
+	jQuery.post(
+		ajaxurl,
+		formData,
+		function () {
+			window.location.reload();
+		}
+	);
+};
+
+window.addEventListener( 'load', function() {
+	var form = document.querySelector( '#force_2fa_form' );
+	form.addEventListener( 'submit', handleFormSubmit );
+} );

class.two-factor-core.php

@@ -44,9 +44,11 @@ public static function add_hooks() {
 		add_action( 'edit_user_profile', array( __CLASS__, 'user_two_factor_options' ) );
 		add_action( 'personal_options_update', array( __CLASS__, 'user_two_factor_options_update' ) );
 		add_action( 'edit_user_profile_update', array( __CLASS__, 'user_two_factor_options_update' ) );
+		add_action( 'two_factor_ajax_options_update', array( __CLASS__, 'user_two_factor_options_update' ) );
 		add_filter( 'manage_users_columns', array( __CLASS__, 'filter_manage_users_columns' ) );
 		add_filter( 'wpmu_users_columns', array( __CLASS__, 'filter_manage_users_columns' ) );
 		add_filter( 'manage_users_custom_column', array( __CLASS__, 'manage_users_custom_column' ), 10, 3 );
+		add_action( 'init', array( __CLASS__, 'register_scripts' ) );
 	}
 
 	/**
@@ -58,6 +60,16 @@ public static function load_textdomain() {
 		load_plugin_textdomain( 'two-factor' );
 	}
 
+	/**
+	 * Register scripts.
+	 */
+	public static function register_scripts() {
+		wp_register_style(
+			'user-edit-2fa',
+			plugins_url( 'user-edit.css', __FILE__ )
+		);
+	}
+
 	/**
 	 * For each provider, include it and then instantiate it.
 	 *
@@ -608,7 +620,7 @@ public static function manage_users_custom_column( $output, $column_name, $user_
 	 * @param WP_User $user WP_User object of the logged-in user.
 	 */
 	public static function user_two_factor_options( $user ) {
-		wp_enqueue_style( 'user-edit-2fa', plugins_url( 'user-edit.css', __FILE__ ) );
+		wp_enqueue_style( 'user-edit-2fa' );
 
 		$enabled_providers = array_keys( self::get_available_providers_for_user( $user->ID ) );
 		$primary_provider = self::get_primary_provider_for_user( $user->ID );
@@ -625,7 +637,7 @@ public static function user_two_factor_options( $user ) {
 		<input type="hidden" name="<?php echo esc_attr( self::ENABLED_PROVIDERS_USER_META_KEY ); ?>[]" value="<?php /* Dummy input so $_POST value is passed when no providers are enabled. */ ?>" />
 		<table class="form-table">
 			<tr>
-				<th>
+				<th class="two-factor-main-label">
 					<?php esc_html_e( 'Two-Factor Options' ); ?>
 				</th>
 				<td>