Account Protection: Add custom password strength meter

projects/packages/account-protection/src/class-account-protection.php

@@ -44,17 +44,26 @@ class Account_Protection {
 	 */
 	private $password_manager;
 
+	/**
+	 * Password_Strength_Meter instance
+	 *
+	 * @var Password_Strength_Meter
+	 */
+	private $password_strength_meter;
+
 	/**
 	 * Account_Protection constructor.
 	 *
-	 * @param ?Modules            $modules            Modules instance.
-	 * @param ?Password_Detection $password_detection Password detection instance.
-	 * @param ?Password_Manager   $password_manager Validation service instance.
+	 * @param ?Modules                 $modules            Modules instance.
+	 * @param ?Password_Detection      $password_detection Password detection instance.
+	 * @param ?Password_Manager        $password_manager Password manager instance.
+	 * @param ?Password_Strength_Meter $password_strength_meter Password strength meter instance.
 	 */
-	public function __construct( ?Modules $modules = null, ?Password_Detection $password_detection = null, ?Password_Manager $password_manager = null ) {
-		$this->modules            = $modules ?? new Modules();
-		$this->password_detection = $password_detection ?? new Password_Detection();
-		$this->password_manager   = $password_manager ?? new Password_Manager();
+	public function __construct( ?Modules $modules = null, ?Password_Detection $password_detection = null, ?Password_Manager $password_manager = null, ?Password_Strength_Meter $password_strength_meter = null ) {
+		$this->modules                 = $modules ?? new Modules();
+		$this->password_detection      = $password_detection ?? new Password_Detection();
+		$this->password_manager        = $password_manager ?? new Password_Manager();
+		$this->password_strength_meter = $password_strength_meter ?? new Password_Strength_Meter();
 	}
 
 	/**
@@ -115,6 +124,14 @@ protected function register_runtime_hooks(): void {
 		// Update recent passwords list
 		add_action( 'profile_update', array( $this->password_manager, 'on_profile_update' ), 10, 2 );
 		add_action( 'after_password_reset', array( $this->password_manager, 'on_password_reset' ), 10, 1 );
+
+		// Enqueue password strength meter scripts
+		add_action( 'admin_enqueue_scripts', array( $this->password_strength_meter, 'enqueue_jetpack_password_strength_meter_profile_script' ) );
+		add_action( 'login_enqueue_scripts', array( $this->password_strength_meter, 'enqueue_jetpack_password_strength_meter_reset_script' ) );
+
+		// AJAX endpoint for password validation
+		add_action( 'wp_ajax_validate_password_ajax', array( $this->password_strength_meter, 'validate_password_ajax' ) );
+		add_action( 'wp_ajax_nopriv_validate_password_ajax', array( $this->password_strength_meter, 'validate_password_ajax' ) );
 	}
 
 	/**

projects/packages/account-protection/src/class-config.php

@@ -11,10 +11,17 @@
  * Class Config
  */
 class Config {
+	// Password Detection Constants
 	public const PASSWORD_DETECTION_TRANSIENT_PREFIX      = 'password_detection';
 	public const PASSWORD_DETECTION_ERROR_CODE            = 'password_detection_validation_error';
 	public const PASSWORD_DETECTION_EMAIL_SENT_EXPIRATION = 600; // 10 minutes
 	public const PASSWORD_DETECTION_MAX_RESEND_ATTEMPTS   = 3;
 
-	public const VALIDATION_SERVICE_RECENT_PASSWORD_HASHES_USER_META_KEY = 'jetpack_account_protection_recent_password_hashes';
+	// Password Manager Constants
+	public const PASSWORD_MANAGER_RECENT_PASSWORD_HASHES_USER_META_KEY = 'jetpack_account_protection_recent_password_hashes';
+	public const PASSWORD_MANAGER_RECENT_PASSWORDS_LIMIT               = 10;
+
+	// Validation Service Constants
+	public const VALIDATION_SERVICE_MIN_LENGTH = 6;
+	public const VALIDATION_SERVICE_MAX_LENGTH = 150;
 }

projects/packages/account-protection/src/class-password-detection.php

@@ -355,15 +355,19 @@ private function set_transient_error( int $user_id, string $message, int $expira
 	 * @return void
 	 */
 	public function enqueue_styles(): void {
+		global $pagenow;
+		if ( ! isset( $pagenow ) || $pagenow !== 'wp-login.php' ) {
+			return;
+		}
 		// No nonce verification necessary - reading only
 		// phpcs:disable WordPress.Security.NonceVerification
-		if ( ( isset( $GLOBALS['pagenow'] ) && $GLOBALS['pagenow'] === 'wp-login.php' ) && ( isset( $_GET['action'] ) && $_GET['action'] === 'password-detection' ) ) {
-				wp_enqueue_style(
-					'password-detection-styles',
-					plugin_dir_url( __FILE__ ) . 'css/password-detection.css',
-					array(),
-					Account_Protection::PACKAGE_VERSION
-				);
+		if ( isset( $_GET['action'] ) && $_GET['action'] === 'password-detection' ) {
+			wp_enqueue_style(
+				'password-detection-styles',
+				plugin_dir_url( __FILE__ ) . 'css/password-detection.css',
+				array(),
+				Account_Protection::PACKAGE_VERSION
+			);
 		}
 	}
 }

projects/packages/account-protection/src/class-password-manager.php

@@ -47,15 +47,7 @@ public function validate_profile_update( \WP_Error $errors, bool $update, \stdCl
 			return;
 		}
 
-		if ( $update ) {
-			if ( $this->validation_service->is_current_password( $user->ID, $user->user_pass ) ) {
-				$errors->add( 'password_error', __( '<strong>Error:</strong> The password was used recently.', 'jetpack-account-protection' ) );
-				return;
-			}
-		}
-
-		$context = $update ? 'update' : 'create-user';
-		$error   = $this->validation_service->return_first_validation_error( $user, $user->user_pass, $context );
+		$error = $this->validation_service->get_first_validation_error( $user->user_pass, true, $user );
 
 		if ( ! empty( $error ) ) {
 			$errors->add( 'password_error', $error );
@@ -89,12 +81,7 @@ public function validate_password_reset( \WP_Error $errors, $user ): void {
 
 		// phpcs:ignore WordPress.Security.NonceVerification
 		$password = sanitize_text_field( wp_unslash( $_POST['pass1'] ) );
-		if ( $this->validation_service->is_current_password( $user->ID, $password ) ) {
-			$errors->add( 'password_error', __( '<strong>Error:</strong> The password was used recently.', 'jetpack-account-protection' ) );
-			return;
-		}
-
-		$error = $this->validation_service->return_first_validation_error( $user, $password, 'reset' );
+		$error    = $this->validation_service->get_first_validation_error( $password );
 		if ( ! empty( $error ) ) {
 			$errors->add( 'password_error', $error );
 			return;
@@ -136,7 +123,7 @@ public function on_password_reset( $user ): void {
 	 * @return void
 	 */
 	public function save_recent_password( int $user_id, string $password_hash ): void {
-		$recent_passwords = get_user_meta( $user_id, Config::VALIDATION_SERVICE_RECENT_PASSWORD_HASHES_USER_META_KEY, true );
+		$recent_passwords = get_user_meta( $user_id, Config::PASSWORD_MANAGER_RECENT_PASSWORD_HASHES_USER_META_KEY, true );
 
 		if ( ! is_array( $recent_passwords ) ) {
 			$recent_passwords = array();
@@ -148,8 +135,8 @@ public function save_recent_password( int $user_id, string $password_hash ): voi
 
 		// Add the new hashed password and keep only the last 10
 		array_unshift( $recent_passwords, $password_hash );
-		$recent_passwords = array_slice( $recent_passwords, 0, 10 );
+		$recent_passwords = array_slice( $recent_passwords, 0, Config::PASSWORD_MANAGER_RECENT_PASSWORDS_LIMIT );
 
-		update_user_meta( $user_id, Config::VALIDATION_SERVICE_RECENT_PASSWORD_HASHES_USER_META_KEY, $recent_passwords );
+		update_user_meta( $user_id, Config::PASSWORD_MANAGER_RECENT_PASSWORD_HASHES_USER_META_KEY, $recent_passwords );
 	}
 }

projects/packages/account-protection/src/class-password-strength-meter.php

@@ -0,0 +1,142 @@
+<?php
+/**
+ * Class used to define Password Strength Meter.
+ *
+ * @package automattic/jetpack-account-protection
+ */
+
+namespace Automattic\Jetpack\Account_Protection;
+
+/**
+ * Class Password_Strength_Meter
+ */
+class Password_Strength_Meter {
+	/**
+	 * Validaton service instance
+	 *
+	 * @var Validation_Service
+	 */
+	private $validation_service;
+
+	/**
+	 * Validation_Service constructor.
+	 *
+	 * @param ?Validation_Service $validation_service Password manager instance.
+	 */
+	public function __construct( ?Validation_Service $validation_service = null ) {
+		$this->validation_service = $validation_service ?? new Validation_Service();
+	}
+
+	/**
+	 * AJAX endpoint for password validation.
+	 *
+	 * @return void
+	 */
+	public function validate_password_ajax(): void {
+		if ( ! isset( $_POST['password'] ) ) {
+			wp_send_json_error( array( 'message' => __( 'No password provided.', 'jetpack-account-protection' ) ) );
+		}
+
+		if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['nonce'] ) ), 'validate_password_nonce' ) ) {
+			wp_send_json_error( array( 'message' => __( 'Invalid nonce.', 'jetpack-account-protection' ) ) );
+		}
+
+		$user_specific = false;
+		if ( isset( $_POST['user_specific'] ) ) {
+			$user_specific = filter_var( sanitize_text_field( wp_unslash( $_POST['user_specific'] ) ), FILTER_VALIDATE_BOOLEAN );
+		}
+
+		$password = sanitize_text_field( wp_unslash( $_POST['password'] ) );
+		$state    = $this->validation_service->get_validation_state( $password, $user_specific );
+
+		wp_send_json_success( array( 'state' => $state ) );
+	}
+
+	/**
+	 * Enqueue the password strength meter script on the profile page.
+	 *
+	 * @return void
+	 */
+	public function enqueue_jetpack_password_strength_meter_profile_script(): void {
+		global $pagenow;
+
+		if ( ! isset( $pagenow ) || ! in_array( $pagenow, array( 'profile.php', 'user-new.php', 'user-edit.php' ), true ) ) {
+			return;
+		}
+
+		$this->enqueue_script();
+		$this->enqueue_styles();
+
+		// Only profile page should run user specific checks.
+		$this->localize_jetpack_data( 'profile.php' === $pagenow );
+	}
+
+	/**
+	 * Enqueue the password strength meter script on the reset password page.
+	 *
+	 * @return void
+	 */
+	public function enqueue_jetpack_password_strength_meter_reset_script(): void {
+		// No nonce verification necessary as the action includes a robust verification process
+		// phpcs:disable WordPress.Security.NonceVerification
+		if ( isset( $_GET['action'] ) && ( 'rp' === $_GET['action'] || 'resetpass' === $_GET['action'] ) ) {
+			$this->enqueue_script();
+			$this->enqueue_styles();
+			$this->localize_jetpack_data();
+		}
+	}
+
+	/**
+	 * Localize the Jetpack data for the password strength meter.
+	 *
+	 * @param bool $user_specific Whether or not to run user specific checks.
+	 *
+	 * @return void
+	 */
+	public function localize_jetpack_data( bool $user_specific = false ): void {
+		wp_localize_script(
+			'jetpack-password-strength-meter',
+			'jetpackData',
+			array(
+				'ajaxurl'                => admin_url( 'admin-ajax.php' ),
+				'nonce'                  => wp_create_nonce( 'validate_password_nonce' ),
+				'userSpecific'           => $user_specific,
+				'logo'                   => plugin_dir_url( __FILE__ ) . 'assets/jetpack-logo.svg',
+				'infoIcon'               => plugin_dir_url( __FILE__ ) . 'assets/info.svg',
+				'checkIcon'              => plugin_dir_url( __FILE__ ) . 'assets/check.svg',
+				'crossIcon'              => plugin_dir_url( __FILE__ ) . 'assets/cross.svg',
+				'loadingIcon'            => plugin_dir_url( __FILE__ ) . 'assets/loading.svg',
+				'validationInitialState' => $this->validation_service->get_validation_initial_state( $user_specific ),
+			)
+		);
+	}
+
+	/**
+	 * Enqueue the password strength meter script.
+	 *
+	 * @return void
+	 */
+	public function enqueue_script(): void {
+		wp_enqueue_script(
+			'jetpack-password-strength-meter',
+			plugin_dir_url( __FILE__ ) . 'js/jetpack-password-strength-meter.js',
+			array( 'jquery' ),
+			Account_Protection::PACKAGE_VERSION,
+			true
+		);
+	}
+
+	/**
+	 * Enqueue the password strength meter styles.
+	 *
+	 * @return void
+	 */
+	public function enqueue_styles(): void {
+		wp_enqueue_style(
+			'strength-meter-styles',
+			plugin_dir_url( __FILE__ ) . 'css/strength-meter.css',
+			array(),
+			Account_Protection::PACKAGE_VERSION
+		);
+	}
+}