diff --git a/projects/packages/connection/changelog/add-display-connection-status-users-page b/projects/packages/connection/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..90cab5cd014d8 --- /dev/null +++ b/projects/packages/connection/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/packages/connection/src/class-plugin.php b/projects/packages/connection/src/class-plugin.php index 37ac8bc129787..80cd3df7f9e85 100644 --- a/projects/packages/connection/src/class-plugin.php +++ b/projects/packages/connection/src/class-plugin.php @@ -31,6 +31,13 @@ class Plugin { */ private $slug; + /** + * Users Connection Admin instance. + * + * @var Users_Connection_Admin + */ + private $users_connection_admin; + /** * Initialize the plugin manager. * @@ -38,6 +45,9 @@ class Plugin { */ public function __construct( $slug ) { $this->slug = $slug; + + // Initialize Users_Connection_Admin + $this->users_connection_admin = new Users_Connection_Admin(); } /** diff --git a/projects/packages/connection/src/class-users-connection-admin.php b/projects/packages/connection/src/class-users-connection-admin.php new file mode 100644 index 0000000000000..2c0551c5bc0fd --- /dev/null +++ b/projects/packages/connection/src/class-users-connection-admin.php @@ -0,0 +1,174 @@ + + %1$s + + ', + esc_html__( 'WordPress.com account', 'jetpack-connection' ), + esc_attr__( 'Tooltip', 'jetpack-connection' ) + ); + return $columns; + } + + /** + * Render the connection column content. + * + * @param string $output Custom column output. + * @param string $column_name Column name. + * @param int $user_id ID of the currently-listed user. + * @return string + */ + public function render_connection_column( $output, $column_name, $user_id ) { + if ( self::COLUMN_ID !== $column_name ) { + return $output; + } + + if ( ( new Manager() )->is_user_connected( $user_id ) ) { + return sprintf( + '%2$s', + esc_attr__( 'This user has connected their WordPress.com account.', 'jetpack-connection' ), + esc_html__( 'Connected', 'jetpack-connection' ) + ); + } + + return $output; + } + + /** + * Enqueue scripts and styles. + * + * @param string $hook The current admin page. + */ + public function enqueue_scripts( $hook ) { + if ( 'users.php' !== $hook ) { + return; + } + + Assets::register_script( + 'jetpack-users-connection', + '../dist/jetpack-users-connection.js', + __FILE__, + array( + 'strategy' => 'defer', + 'in_footer' => true, + 'enqueue' => true, + 'version' => Package_Version::PACKAGE_VERSION, + 'deps' => array( 'wp-i18n' ), + + ) + ); + + wp_localize_script( + 'jetpack-users-connection', + 'jetpackConnectionTooltips', + array( + 'columnTooltip' => esc_html__( 'Connecting a WordPress.com account unlocks Jetpackā€™s full suite of features including secure logins.', 'jetpack-connection' ), + ) + ); + } + + /** + * Add styles for the connection column. + */ + public function add_connection_column_styles() { + ?> + + 'defer', - 'in_footer' => true, - 'enqueue' => true, - 'version' => Package_Version::PACKAGE_VERSION, - ) - ); - - $tooltip_string = esc_attr__( 'Jetpack SSO allows a seamless and secure experience on WordPress.com. Join millions of WordPress users who trust us to keep their accounts safe.', 'jetpack-connection' ); - - wp_add_inline_script( - 'jetpack-sso-users', - "var Jetpack_SSOTooltip = { 'tooltipString': '{$tooltip_string}' }", - 'before' - ); - - $columns['user_jetpack'] = sprintf( - '%2$s', - $tooltip_string, - esc_html__( 'SSO Status', 'jetpack-connection' ), - esc_attr__( 'Tooltip', 'jetpack-connection' ) - ); + _deprecated_function( __METHOD__, 'package-$$next-version$$' ); return $columns; } @@ -1179,59 +1156,58 @@ private static function delete_external_contributor( $user_id ) { * @param string $val HTML for the column. * @param string $col User list table column. * @param int $user_id User ID. - * - * @return string + * @return string Modified column content. */ public function jetpack_show_connection_status( $val, $col, $user_id ) { - if ( 'user_jetpack' === $col ) { - if ( ( new Manager() )->is_user_connected( $user_id ) ) { - $connection_html = sprintf( - '%2$s', - esc_attr__( 'This user is connected and can log-in to this site.', 'jetpack-connection' ), - esc_html__( 'Connected', 'jetpack-connection' ) - ); - return $connection_html; - } else { - $has_pending_invite = self::has_pending_wpcom_invite( $user_id ); - if ( $has_pending_invite ) { - $connection_html = sprintf( - '%2$s', - esc_attr__( 'This user didn’t accept the invitation to join this site yet.', 'jetpack-connection' ), - esc_html__( 'Pending invite', 'jetpack-connection' ) - ); - return $connection_html; - } - $nonce = wp_create_nonce( 'jetpack-sso-invite-user' ); - $connection_html = sprintf( - // Using formmethod and formaction because we can't nest forms and have to submit using the main form. - ' - %2$s - - %3$s - - ', - add_query_arg( - array( - 'user_id' => $user_id, - 'invite_nonce' => $nonce, - 'action' => 'jetpack_invite_user_to_wpcom', - ), - admin_url( 'admin-post.php' ) - ), - esc_html__( 'Send invite', 'jetpack-connection' ), - esc_attr__( 'This user doesn’t have an SSO connection to WordPress.com. Invite them to the site to increase security and improve their experience.', 'jetpack-connection' ), - esc_attr__( 'Tooltip', 'jetpack-connection' ) + if ( 'user_jetpack' !== $col ) { + return $val; + } + + // Get base connection status from parent + $connection_status = parent::render_connection_column( '', $col, $user_id ); + + // If user is not connected, check for pending invite + if ( ! $connection_status ) { + $has_pending_invite = self::has_pending_wpcom_invite( $user_id ); + if ( $has_pending_invite ) { + return sprintf( + '%2$s', + esc_attr__( 'This user didn’t accept the invitation to join this site yet.', 'jetpack-connection' ), + esc_html__( 'Pending invite', 'jetpack-connection' ) ); - return $connection_html; } + + // Show invite button for non-connected users + $nonce = wp_create_nonce( 'jetpack-sso-invite-user' ); + return sprintf( + ' + %2$s + + %3$s + + ', + add_query_arg( + array( + 'user_id' => $user_id, + 'invite_nonce' => $nonce, + 'action' => 'jetpack_invite_user_to_wpcom', + ), + admin_url( 'admin-post.php' ) + ), + esc_html__( 'Send invite', 'jetpack-connection' ), + esc_attr__( 'This user doesn’t have a Jetpack SSO connection to WordPress.com. Invite them to the site to increase security and improve their experience.', 'jetpack-connection' ), + esc_attr__( 'Tooltip', 'jetpack-connection' ) + ); } - return $val; + + return $connection_status; } /** * Creates error notices and redirects the user to the previous page. * * @param array $query_params - query parameters added to redirection URL. + * @phan-suppress PhanPluginNeverReturnMethod */ public function create_error_notice_and_redirect( $query_params ) { $ref = wp_get_referer(); @@ -1243,7 +1219,8 @@ public function create_error_notice_and_redirect( $query_params ) { $query_params, $ref ); - return wp_safe_redirect( $url ); + wp_safe_redirect( $url ); + exit; } /** @@ -1258,9 +1235,6 @@ public function jetpack_user_table_styles() { #the-list tr:has(.sso-pending-invite) { background: #E9F0F5; } - .fixed .column-user_jetpack { - width: 100px; - } .jetpack-sso-invitation { background: none; border: none; @@ -1297,9 +1271,6 @@ public function jetpack_user_table_styles() { position: relative; cursor: pointer; } - .jetpack-sso-th-tooltip { - left: -170px; - } .jetpack-sso-td-tooltip { left: -256px; } @@ -1323,4 +1294,29 @@ public function jetpack_user_table_styles() { 'defer', + 'in_footer' => true, + 'enqueue' => true, + 'version' => Package_Version::PACKAGE_VERSION, + ) + ); + } } diff --git a/projects/packages/connection/src/sso/jetpack-sso-users.js b/projects/packages/connection/src/sso/jetpack-sso-users.js index ea36dae308f39..778eab060b2bc 100644 --- a/projects/packages/connection/src/sso/jetpack-sso-users.js +++ b/projects/packages/connection/src/sso/jetpack-sso-users.js @@ -5,7 +5,7 @@ document.addEventListener( 'DOMContentLoaded', function () { tooltip.innerHTML += ' [?]'; const tooltipTextbox = document.createElement( 'span' ); - tooltipTextbox.classList.add( 'jetpack-sso-invitation-tooltip', 'jetpack-sso-th-tooltip' ); + tooltipTextbox.classList.add( 'jetpack-sso-invitation-tooltip' ); const tooltipString = window.Jetpack_SSOTooltip.tooltipString; tooltipTextbox.innerHTML += tooltipString; diff --git a/projects/packages/connection/webpack.config.js b/projects/packages/connection/webpack.config.js index 27f00aad5d8f1..3ab8f6576e45a 100644 --- a/projects/packages/connection/webpack.config.js +++ b/projects/packages/connection/webpack.config.js @@ -77,6 +77,7 @@ module.exports = [ }, }, 'identity-crisis': './src/identity-crisis/_inc/admin.jsx', + 'jetpack-users-connection': './src/js/jetpack-users-connection.js', ...ssoEntries, }, plugins: [ diff --git a/projects/plugins/automattic-for-agencies-client/changelog/add-display-connection-status-users-page b/projects/plugins/automattic-for-agencies-client/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/automattic-for-agencies-client/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/backup/changelog/add-display-connection-status-users-page b/projects/plugins/backup/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/backup/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/boost/changelog/add-display-connection-status-users-page b/projects/plugins/boost/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/boost/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/inspect/changelog/add-display-connection-status-users-page b/projects/plugins/inspect/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/inspect/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/jetpack/changelog/add-display-connection-status-users-page b/projects/plugins/jetpack/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..dd6b5fb994e6a --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/mu-wpcom-plugin/changelog/add-display-connection-status-users-page b/projects/plugins/mu-wpcom-plugin/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/mu-wpcom-plugin/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/protect/changelog/add-display-connection-status-users-page b/projects/plugins/protect/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/protect/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/search/changelog/add-display-connection-status-users-page b/projects/plugins/search/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/search/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/social/changelog/add-display-connection-status-users-page b/projects/plugins/social/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/social/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/starter-plugin/changelog/add-display-connection-status-users-page b/projects/plugins/starter-plugin/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/starter-plugin/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/videopress/changelog/add-display-connection-status-users-page b/projects/plugins/videopress/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/videopress/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module. diff --git a/projects/plugins/wpcomsh/changelog/add-display-connection-status-users-page b/projects/plugins/wpcomsh/changelog/add-display-connection-status-users-page new file mode 100644 index 0000000000000..4c2ef3d14ff18 --- /dev/null +++ b/projects/plugins/wpcomsh/changelog/add-display-connection-status-users-page @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Connection: Display connection status on Users page independent of the SSO module.