', { id: 'password-validation-status' } ),
+ validationCheckList: $( '
- ', { class: 'validation-checklist' } ),
+ strengthMeter: {},
+ validationChecklistItems: {},
+ };
+
+ let currentAjaxRequest = null;
+
+ initializeUI();
+ bindEvents();
+
+ /**
+ * Apply initial UI structure and styling
+ */
+ function initializeUI() {
+ const { passwordInputWrapper, passwordInput, passwordStrengthResults } = UIComponents.core;
+
+ passwordInputWrapper.css( {
+ 'margin-bottom': '16px',
+ } );
+ passwordInput.css( {
+ 'border-color': '#8C8F94',
+ 'border-radius': '4px 4px 0 0',
+ } );
+ passwordStrengthResults.hide();
+ passwordInput.after( UIComponents.passwordValidationStatus );
+ UIComponents.passwordValidationStatus.append( UIComponents.validationCheckList );
+
+ initializeStrengthMeter();
+ initializeValidationChecklist();
+ }
+
+ /**
+ * Generate and append the initial strength meter state
+ */
+ function initializeStrengthMeter() {
+ const strengthMeterWrapper = $( '
- ', { class: 'validation-item', 'data-key': key } );
+
+ // Hide the core and backslash validation items by default
+ if ( [ 'core', 'contains_backslash' ].includes( key ) ) {
+ listItem.hide();
+ }
+
+ const validationIcon = $( '
', { + src: jetpackData.loadingIcon, + alt: 'Validating...', + class: 'validation-icon', + } ); + + const validationMessage = $( '
', { + text: value.message, + class: 'validation-message', + } ); + + let infoIconPopover = null; + if ( value.info ) { + infoIconPopover = createInfoIconPopover( value.info ); + } + + listItem.append( validationIcon, validationMessage, infoIconPopover ); + UIComponents.validationCheckList.append( listItem ); + + UIComponents.validationChecklistItems[ key ] = { + icon: validationIcon, + text: validationMessage, + item: listItem, + }; + } ); + } + + /** + * Bind events to the UI components + */ + function bindEvents() { + const { passwordInput } = UIComponents.core; + + passwordInput.on( 'input', validatePassword ); + passwordInput.on( 'pwupdate', validatePassword ); + } + + /** + * Validate the current password input + */ + function validatePassword() { + const { passwordInput, passwordStrengthResults } = UIComponents.core; + + const password = passwordInput.val(); + + if ( currentAjaxRequest ) { + const oldRequest = currentAjaxRequest; + currentAjaxRequest = null; + oldRequest.abort(); + } + + if ( ! password?.trim() ) { + applyStyling( [], true ); + return; + } + + // Ensure core strength meter is hidden + passwordStrengthResults.hide(); + + renderLoadingState(); + + currentAjaxRequest = $.ajax( { + url: jetpackData.ajaxurl, + type: 'POST', + data: { + action: 'validate_password_ajax', + nonce: jetpackData.nonce, + password: password, + user_specific: jetpackData.userSpecific, + }, + success: handleValidationResponse, + error: handleValidationError, + } ); + } + + /** + * Handles the password validation response. + * @param {object} response - The response object. + */ + function handleValidationResponse( response ) { + currentAjaxRequest = null; + + if ( response.success ) { + const failedValidationConditions = updateValidationChecklist( response.data.state ); + applyStyling( failedValidationConditions ); + } else { + restoreCoreStrengthMeter(); + } + } + + /** + * Handles validation errors. + * @param {object} jqXHR - The jqXHR object. + * @param {any} textStatus - The status of the request. + */ + function handleValidationError( jqXHR, textStatus ) { + if ( textStatus !== 'abort' ) { + restoreCoreStrengthMeter(); + } + } + + /** + * Updates the validation checklist based on the response data. + * + * @param {object} state - The validation state. + * @return {object} - The failed conditions. + */ + function updateValidationChecklist( state ) { + const failedConditions = []; + + // Manually update core strength meter status + const corePasswordStrengthResultsClass = + UIComponents.core.passwordStrengthResults.attr( 'class' ) || ''; + const coreValidationFailed = ! ( + corePasswordStrengthResultsClass.includes( 'strong' ) || + corePasswordStrengthResultsClass.includes( 'good' ) + ); + + Object.entries( state ).forEach( ( [ key, item ] ) => { + const validationFailed = key === 'core' ? coreValidationFailed : item.status; + const checklistItem = UIComponents.validationChecklistItems[ key ]; + + // Display the core and backslash validation items they fail + if ( [ 'core', 'contains_backslash' ].includes( key ) ) { + checklistItem.item.css( 'display', validationFailed ? 'flex' : 'none' ); + } + + if ( checklistItem ) { + checklistItem.icon.attr( + 'src', + validationFailed ? jetpackData.crossIcon : jetpackData.checkIcon + ); + checklistItem.icon.attr( 'alt', validationFailed ? 'Invalid' : 'Valid' ); + checklistItem.text.css( { color: validationFailed ? '#E65054' : '#008710' } ); + } + + if ( validationFailed ) failedConditions.push( key ); + } ); + + return failedConditions; + } + + /** + * + * Apply styling based on validation results + * + * @param {Array} failedValidationConditions - Array containing failed validation conditions keys + * @param {boolean} passwordIsEmpty - Whether the password input is empty + */ + function applyStyling( failedValidationConditions, passwordIsEmpty = false ) { + if ( passwordIsEmpty ) { + renderEmptyInputState(); + return; + } + + const isPasswordStrong = failedValidationConditions.length === 0; + const color = isPasswordStrong ? '#9DD977' : '#FFABAF'; + const strengthText = isPasswordStrong ? 'Strong' : 'Weak'; + + const { + weakPasswordConfirmation, + weakPasswordConfirmationCheckbox, + submitButtons, + passwordInput, + } = UIComponents.core; + const { wrapper, text } = UIComponents.strengthMeter; + + if ( isPasswordStrong || weakPasswordConfirmationCheckbox.prop( 'checked' ) ) { + submitButtons.prop( 'disabled', false ); + } else { + submitButtons.prop( 'disabled', true ); + } + + weakPasswordConfirmation.css( 'display', isPasswordStrong ? 'none' : 'table-row' ); + + text.text( strengthText ); + wrapper.css( 'background-color', color ); + + passwordInput.css( { + 'border-color': color, + 'border-radius': '4px 4px 0px 0px', + } ); + + UIComponents.passwordValidationStatus.show(); + } + + /** + * Render the empty input state + */ + function renderEmptyInputState() { + UIComponents.passwordValidationStatus.hide(); + UIComponents.core.passwordInput.removeAttr( 'style' ); + } + + /** + * Render the loading state + */ + function renderLoadingState() { + const { passwordInput, weakPasswordConfirmation, submitButtons } = UIComponents.core; + submitButtons.prop( 'disabled', true ); + weakPasswordConfirmation.hide(); + + Object.values( UIComponents.validationChecklistItems ).forEach( ( { icon, text } ) => { + icon.attr( 'src', jetpackData.loadingIcon ); + icon.attr( 'alt', 'Validating...' ); + text.css( { color: '#3C434A', transition: 'color 0.2s ease-in-out' } ); + } ); + + UIComponents.strengthMeter.text.text( 'Validating...' ); + UIComponents.strengthMeter.wrapper.css( 'background-color', '#C3C4C7' ); + passwordInput.css( { + 'border-color': '#C3C4C7', + 'border-radius': '4px 4px 0px 0px', + } ); + + UIComponents.passwordValidationStatus.show(); + } + + /** + * Resets UI to core strength meter. + */ + function restoreCoreStrengthMeter() { + renderEmptyInputState(); + UIComponents.core.passwordStrengthResults.show(); + } + + /** + * Creates an info popover element. + * + * @param {string} infoText - The text to display in the popover. + * @return {jQuery} - The info popover element. + */ + function createInfoIconPopover( infoText ) { + const infoIcon = $( '
', { src: jetpackData.infoIcon, alt: 'Info', class: 'info-icon' } ); + const popover = $( '
', { text: infoText, class: 'popover' } ).append( + $( '', { class: 'popover-arrow' } ) + ); + + infoIcon.hover( + () => popover.fadeIn( 200 ), + () => popover.fadeOut( 200 ) + ); + + return $( '', { class: 'info-popover' } ).append( infoIcon, popover ); + } +} ); diff --git a/projects/packages/account-protection/tests/php/test-password-manager.php b/projects/packages/account-protection/tests/php/test-password-manager.php index 718e2d4c528d1..d1fbfd26e6124 100644 --- a/projects/packages/account-protection/tests/php/test-password-manager.php +++ b/projects/packages/account-protection/tests/php/test-password-manager.php @@ -26,7 +26,7 @@ public function test_validate_profile_update_success() { $validation_service_mock = $this->createMock( Validation_Service::class ); $validation_service_mock->expects( $this->once() ) - ->method( 'return_first_validation_error' ) + ->method( 'get_first_validation_error' ) ->willReturn( '' ); $password_manager_mock = new Password_Manager( $validation_service_mock ); @@ -56,7 +56,7 @@ public function test_validate_password_reset_with_valid_user() { $validation_service_mock = $this->createMock( Validation_Service::class ); $validation_service_mock->expects( $this->once() ) - ->method( 'return_first_validation_error' ) + ->method( 'get_first_validation_error' ) ->willReturn( '' ); $password_manager_mock = new Password_Manager( $validation_service_mock ); @@ -121,13 +121,13 @@ public function test_save_recent_password_stores_last_10_passwords() { 'hash10', ); - update_user_meta( $user_id, Config::VALIDATION_SERVICE_RECENT_PASSWORD_HASHES_USER_META_KEY, $password_hashes ); + update_user_meta( $user_id, Config::PASSWORD_MANAGER_RECENT_PASSWORD_HASHES_USER_META_KEY, $password_hashes ); $validation_service_mock = $this->createMock( Validation_Service::class ); $password_manager_mock = new Password_Manager( $validation_service_mock ); $password_manager_mock->save_recent_password( $user_id, 'new_hash' ); - $stored_passwords = get_user_meta( $user_id, Config::VALIDATION_SERVICE_RECENT_PASSWORD_HASHES_USER_META_KEY, true ); + $stored_passwords = get_user_meta( $user_id, Config::PASSWORD_MANAGER_RECENT_PASSWORD_HASHES_USER_META_KEY, true ); $this->assertCount( 10, $stored_passwords ); $this->assertEquals( 'new_hash', $stored_passwords[0] ); } diff --git a/projects/packages/account-protection/tests/php/test-validation-service.php b/projects/packages/account-protection/tests/php/test-validation-service.php index b7b8696bbb87a..e342b935de09c 100644 --- a/projects/packages/account-protection/tests/php/test-validation-service.php +++ b/projects/packages/account-protection/tests/php/test-validation-service.php @@ -196,23 +196,25 @@ public function test_returns_false_if_password_is_not_current_password() { } public function test_returns_true_if_password_was_recently_used() { - $user_id = 1; - $password_hash = wp_hash_password( 'somepassword' ); + $user = new \WP_User(); + $user->user_pass = wp_hash_password( 'somepassword' ); + $user->ID = 1; - update_user_meta( $user_id, Config::VALIDATION_SERVICE_RECENT_PASSWORD_HASHES_USER_META_KEY, array( $password_hash ) ); + update_user_meta( $user->ID, Config::PASSWORD_MANAGER_RECENT_PASSWORD_HASHES_USER_META_KEY, array( $user->user_pass ) ); $validation_service = new Validation_Service( $this->get_connection_manager() ); - $this->assertTrue( $validation_service->is_recent_password( $user_id, 'somepassword' ) ); + $this->assertTrue( $validation_service->is_recent_password( $user, 'somepassword' ) ); } public function test_returns_false_if_password_was_not_recently_used() { - $user_id = 1; - $password_hash = wp_hash_password( 'somepassword' ); + $user = new \WP_User(); + $user->user_pass = wp_hash_password( 'somepassword' ); + $user->ID = 1; - update_user_meta( $user_id, Config::VALIDATION_SERVICE_RECENT_PASSWORD_HASHES_USER_META_KEY, array( $password_hash ) ); + update_user_meta( $user->ID, Config::PASSWORD_MANAGER_RECENT_PASSWORD_HASHES_USER_META_KEY, array( $user->user_pass ) ); $validation_service = new Validation_Service( $this->get_connection_manager() ); - $this->assertFalse( $validation_service->is_recent_password( $user_id, 'anotherpassword' ) ); + $this->assertFalse( $validation_service->is_recent_password( $user, 'anotherpassword' ) ); } public function test_returns_true_if_password_matches_user_data() { diff --git a/projects/plugins/jetpack/_inc/client/security/account-protection.jsx b/projects/plugins/jetpack/_inc/client/security/account-protection.jsx index 62cafbe901792..2365fd31dc6c0 100644 --- a/projects/plugins/jetpack/_inc/client/security/account-protection.jsx +++ b/projects/plugins/jetpack/_inc/client/security/account-protection.jsx @@ -25,7 +25,7 @@ const AccountProtectionComponent = class extends Component { module={ this.props.getModule( 'account-protection' ) } support={ { text: __( - 'Jetpack recommends enabling this feature. Please be mindful of the risks', + 'Jetpack recommends enabling this feature. Please be mindful of the risks.', 'jetpack' ), link: '#', // TODO: Update link once doc is avaiable
', {
+ class: 'strength-meter',
+ 'aria-live': 'polite',
+ } );
+
+ const strengthText = $( '
', { + class: 'strength', + text: 'Validating...', + } ); + + const branding = $( '
', { class: 'branding' } ).append(
+ $( '
', { class: 'powered-by', text: 'Powered by ' } ),
+ $( '', { src: jetpackData.logo, alt: 'Jetpack Logo' } )
+ );
+
+ strengthMeterWrapper.append( strengthText, branding );
+ UIComponents.validationCheckList.before( strengthMeterWrapper );
+
+ UIComponents.strengthMeter = {
+ wrapper: strengthMeterWrapper,
+ text: strengthText,
+ branding,
+ };
+ }
+
+ /**
+ * Generate and append the initial validation checklist state
+ */
+ function initializeValidationChecklist() {
+ Object.entries( jetpackData.validationInitialState ).forEach( ( [ key, value ] ) => {
+ const listItem = $( '