Label recommended methods to simplify the configuration

class-two-factor-core.php

@@ -1837,7 +1837,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 ) {
-		$notices = [];
+		$notices = array();
 
 		$providers = self::get_supported_providers_for_user( $user );
 
@@ -1901,13 +1901,46 @@ public static function user_two_factor_options( $user ) {
 		do_action( 'show_user_security_settings', $user, $providers );
 	}
 
+	/**
+	 * Get the recommended providers for a user.
+	 *
+	 * @param WP_User $user User instance.
+	 *
+	 * @return array List of provider keys.
+	 */
+	private static function get_recommended_providers( $user ) {
+		$providers = array(
+			'Two_Factor_Totp',
+			'Two_Factor_Backup_Codes',
+		);
+
+		/**
+		 * Set the keys of the recommended (secure) methods.
+		 *
+		 * @param array   $recommended_providers The recommended providers.
+		 * @param WP_User $user The user.
+		 */
+		return (array) apply_filters( 'two_factor_recommended_providers', $providers, $user );
+	}
+
+	/**
+	 * Render the user settings.
+	 *
+	 * @param WP_User $user User instance.
+	 * @param array   $providers List of available providers.
+	 */
 	private static function render_user_providers_form( $user, $providers ) {
-		$primary_provider_key = self::get_primary_provider_key_selected_for_user( $user );
-		$enabled_providers = self::get_enabled_providers_for_user( $user );
+		$primary_provider_key      = self::get_primary_provider_key_selected_for_user( $user );
+		$enabled_providers         = self::get_enabled_providers_for_user( $user );
+		$recommended_provider_keys = self::get_recommended_providers( $user );
+
+		// Move the recommended providers first.
+		$recommended_providers = array_intersect_key( $providers, array_flip( $recommended_provider_keys ) );
+		$providers             = array_merge( $recommended_providers, $providers );
 
 		?>
 		<p>
-			<?php esc_html_e( 'Configure a primary two-factor method along with a backup method, such as Recovery Codes, to avoid being locked out if you lose access to your primary method.', 'two-factor' ); ?>
+			<?php esc_html_e( 'Configure a primary two-factor method along with a backup method, such as Recovery Codes, to avoid being locked out if you lose access to your primary method. Methods marked as recommended are more secure and easier to use.', 'two-factor' ); ?>
 		</p>
 
 		<?php wp_nonce_field( 'user_two_factor_options', '_nonce_user_two_factor_options', false ); ?>
@@ -1921,7 +1954,10 @@ private static function render_user_providers_form( $user, $providers ) {
 					<td>
 						<label class="two-factor-method-label">
 							<input id="enabled-<?php echo esc_attr( $provider_key ); ?>" type="checkbox" name="<?php echo esc_attr( self::ENABLED_PROVIDERS_USER_META_KEY ); ?>[]" value="<?php echo esc_attr( $provider_key ); ?>" <?php checked( in_array( $provider_key, $enabled_providers, true ) ); ?> />
-							<?php echo esc_html( sprintf( __( 'Enable %s', 'two-factor' ), $object->get_label() ) ); ?>
+							<strong><?php echo esc_html( sprintf( __( 'Enable %s', 'two-factor' ), $object->get_label() ) ); ?></strong>
+							<?php if ( in_array( $provider_key, $recommended_provider_keys, true ) ) : ?>
+								<abbr title="<?php esc_attr_e( 'This method is more secure and easy to use', 'two-factor' ); ?>" class="two-factor-method-recommended"><?php esc_html_e( 'Recommended', 'two-factor' ); ?></abbr>
+							<?php endif; ?>
 						</label>
 						<?php
 						/**

providers/class-two-factor-backup-codes.php

@@ -175,6 +175,8 @@ public function user_options( $user ) {
 				<button type="button" class="button button-two-factor-backup-codes-generate button-secondary hide-if-no-js">
 					<?php esc_html_e( 'Generate new recovery codes', 'two-factor' ); ?>
 				</button>
+
+				<em><?php esc_html_e( 'This invalidates all currently stored codes.' ); ?></em>
 			</p>
 		</p>
 		<div class="two-factor-backup-codes-wrapper" style="display:none;">

providers/class-two-factor-email.php

@@ -368,7 +368,7 @@ public function is_available_for_user( $user ) {
 	public function user_options( $user ) {
 		$email = $user->user_email;
 		?>
-		<div>
+		<p>
 			<?php
 			echo esc_html(
 				sprintf(
@@ -378,7 +378,7 @@ public function user_options( $user ) {
 				)
 			);
 			?>
-		</div>
+		</p>
 		<?php
 	}
 

providers/class-two-factor-totp.php

@@ -64,7 +64,7 @@ public function register_rest_routes() {
 				array(
 					'methods'             => WP_REST_Server::DELETABLE,
 					'callback'            => array( $this, 'rest_delete_totp' ),
-					'permission_callback' => function( $request ) {
+					'permission_callback' => function ( $request ) {
 						return Two_Factor_Core::rest_api_can_edit_user_and_update_two_factor_options( $request['user_id'] );
 					},
 					'args'                => array(
@@ -77,20 +77,20 @@ public function register_rest_routes() {
 				array(
 					'methods'             => WP_REST_Server::CREATABLE,
 					'callback'            => array( $this, 'rest_setup_totp' ),
-					'permission_callback' => function( $request ) {
+					'permission_callback' => function ( $request ) {
 						return Two_Factor_Core::rest_api_can_edit_user_and_update_two_factor_options( $request['user_id'] );
 					},
 					'args'                => array(
-						'user_id' => array(
+						'user_id'         => array(
 							'required' => true,
 							'type'     => 'integer',
 						),
-						'key'     => array(
+						'key'             => array(
 							'type'              => 'string',
 							'default'           => '',
 							'validate_callback' => null, // Note: validation handled in ::rest_setup_totp().
 						),
-						'code'    => array(
+						'code'            => array(
 							'type'              => 'string',
 							'default'           => '',
 							'validate_callback' => null, // Note: validation handled in ::rest_setup_totp().
@@ -159,10 +159,10 @@ public function rest_delete_totp( $request ) {
 		$this->user_two_factor_options( $user );
 		$html = ob_get_clean();
 
-		return [
+		return array(
 			'success' => true,
 			'html'    => $html,
-		];
+		);
 	}
 
 	/**
@@ -198,10 +198,10 @@ public function rest_setup_totp( $request ) {
 		$this->user_two_factor_options( $user );
 		$html = ob_get_clean();
 
-		return [
+		return array(
 			'success' => true,
 			'html'    => $html,
-		];
+		);
 	}
 
 	/**
@@ -283,22 +283,19 @@ public function user_two_factor_options( $user ) {
 		<div id="two-factor-totp-options">
 		<?php
 		if ( empty( $key ) ) :
-
 			$key      = $this->generate_key();
 			$totp_url = $this->generate_qr_code_url( $user, $key );
 
 			?>
-
 			<p>
-				<?php esc_html_e( 'Please scan the QR code or manually enter the key, then enter an authentication code from your app in order to complete setup.', 'two-factor' ); ?>
+				<?php esc_html_e( 'Please scan the QR code or manually copy the shared secret key from below to your Authenticator app:', 'two-factor' ); ?>
 			</p>
 			<p id="two-factor-qr-code">
-				<a href="<?php echo $totp_url; ?>">
-					Loading...
+				<a href="<?php echo esc_url( $totp_url ); ?>">
+					<?php esc_html_e( 'Loading…', 'two-factor' ); ?>
 					<img src="<?php echo esc_url( admin_url( 'images/spinner.gif' ) ); ?>" alt="" />
 				</a>
 			</p>
-
 			<style>
 				#two-factor-qr-code {
 					/* The size of the image will change based on the length of the URL inside it. */
@@ -343,7 +340,11 @@ public function user_two_factor_options( $user ) {
 			</script>
 
 			<p>
-				<code><?php echo esc_html( $key ); ?></code>
+				<?php esc_html_e( 'Shared secret key:', 'two-factor' ); ?> <code><?php echo esc_html( $key ); ?></code>
+			</p>
+			<hr />
+			<p>
+				<?php esc_html_e( 'Enter the code generated by the Authenticator app to complete the setup:', 'two-factor' ); ?>
 			</p>
 			<p>
 				<input type="hidden" id="two-factor-totp-key" name="two-factor-totp-key" value="<?php echo esc_attr( $key ); ?>" />

user-edit.css

@@ -7,3 +7,13 @@
 	display: block;
 	font-weight: 700;
 }
+
+.two-factor-methods-table .two-factor-method-recommended {
+	font-size: 0.8rem;
+	line-height: 1;
+	font-weight: 400;
+	border: 1px dotted;
+	border-radius: 0.15rem;
+	padding: 0.1rem 0.25rem;
+	margin: 0 0.15rem;
+}