Manage Pledge: Enable pledge admins to edit contributors from manage form (#108)

* Add contributor management to manage form
* Check `pledge_id` to prevent returning all contributors
* Return a plain text error string – this is used in an alert box, so it can't contain HTML
* Hide confirmation when pledge is a draft
* Only enqueue script if the user is authorized

plugins/wporg-5ftf/assets/js/admin.js

@@ -1,6 +1,12 @@
 /* global ajaxurl, FiveForTheFuture, fftfContributors, jQuery */
 /* eslint no-alert: "off" */
 jQuery( document ).ready( function( $ ) {
+	let ajaxurl = window.ajaxurl;
+	// Set the ajax url if the global is undefined.
+	if ( 'undefined' === typeof ajaxurl ) {
+		ajaxurl = FiveForTheFuture.ajaxurl;
+	}
+
 	/**
 	 * Render the contributor lists using the contributors template into the pledge-contributors container. This
 	 * uses `_renderContributors` to render a list of contributors per status (published, pending).
@@ -68,6 +74,7 @@ jQuery( document ).ready( function( $ ) {
 				action: 'manage-contributors',
 				pledge_id: FiveForTheFuture.pledgeId,
 				_ajax_nonce: FiveForTheFuture.manageNonce,
+				_token: FiveForTheFuture.authToken,
 			}, data ),
 			success: callback,
 			dataType: 'json',
@@ -83,17 +90,19 @@ jQuery( document ).ready( function( $ ) {
 			return;
 		}
 
+		// Clear the error message field.
+		$( '#add-contrib-message' ).html( '' );
+
 		sendAjaxRequest( {
 			contributors: contribs,
 			manage_action: 'add-contributor',
 		}, function( response ) {
 			if ( ! response.success ) {
 				const $message = $( '<div>' )
-					.attr( 'id', 'add-contrib-message' )
 					.addClass( 'notice notice-error notice-alt' )
 					.append( $( '<p>' ).text( response.message ) );
 
-				$( '#add-contrib-message' ).replaceWith( $message );
+				$( '#add-contrib-message' ).html( $message );
 			} else if ( response.contributors ) {
 				render( response.contributors, container );
 				$( '#5ftf-pledge-contributors' ).val( '' );

plugins/wporg-5ftf/includes/contributor.php

@@ -248,6 +248,9 @@ function get_pledge_contributors( $pledge_id, $status = 'publish', $contributor_
  * @return array An array of contributor data, ready to be used in the JS templates.
  */
 function get_pledge_contributors_data( $pledge_id ) {
+	if ( ! $pledge_id ) {
+		return array();
+	}
 	$contrib_data = array();
 	$contributors = get_pledge_contributors( $pledge_id, 'all' );
 

plugins/wporg-5ftf/includes/endpoints.php

@@ -9,6 +9,7 @@ use WordPressDotOrg\FiveForTheFuture\{ Auth, Contributor, Email };
 use const WordPressDotOrg\FiveForTheFuture\PledgeMeta\META_PREFIX;
 
 add_action( 'wp_ajax_manage-contributors',        __NAMESPACE__ . '\manage_contributors_handler' );
+add_action( 'wp_ajax_nopriv_manage-contributors', __NAMESPACE__ . '\manage_contributors_handler' );
 
 add_action( 'wp_ajax_send-manage-email',        __NAMESPACE__ . '\send_manage_email_handler' );
 add_action( 'wp_ajax_nopriv_send-manage-email', __NAMESPACE__ . '\send_manage_email_handler' );
@@ -29,7 +30,7 @@ function manage_contributors_handler() {
 	if ( is_wp_error( $authenticated ) ) {
 		wp_die( wp_json_encode( [
 			'success' => false,
-			'message' => $authenticated->get_error_message(),
+			'message' => __( 'Sorry, you don\'t have permissions to do that.', 'wporg-5ftf' ),
 		] ) );
 	}
 

plugins/wporg-5ftf/includes/pledge-form.php

@@ -175,8 +175,6 @@ function render_form_manage() {
 		return ob_get_clean();
 	}
 
-	$contributors = Contributor\get_pledge_contributors( $pledge_id, $status = 'all' );
-
 	if ( 'Update Pledge' === $action ) {
 		$results = process_form_manage( $pledge_id, $auth_token );
 
@@ -188,6 +186,7 @@ function render_form_manage() {
 	}
 
 	$data         = PledgeMeta\get_pledge_meta( $pledge_id );
+	$contributors = Contributor\get_pledge_contributors_data( $pledge_id );
 
 	ob_start();
 	$readonly = false;
@@ -214,7 +213,7 @@ function process_form_manage( $pledge_id, $auth_token ) {
 	 */
 	$can_view_form = Auth\can_manage_pledge( $pledge_id, $auth_token );
 
-	if ( ! $has_valid_nonce || ! $can_view_form ) {
+	if ( ! $has_valid_nonce || is_wp_error( $can_view_form ) ) {
 		return new WP_Error(
 			'invalid_token',
 			sprintf(

plugins/wporg-5ftf/includes/pledge-meta.php

@@ -6,7 +6,7 @@
 namespace WordPressDotOrg\FiveForTheFuture\PledgeMeta;
 
 use WordPressDotOrg\FiveForTheFuture;
-use WordPressDotOrg\FiveForTheFuture\{ Contributor, Email, Pledge, PledgeForm, XProfile };
+use WordPressDotOrg\FiveForTheFuture\{ Auth, Contributor, Email, Pledge, PledgeForm, XProfile };
 use WP_Post, WP_Error;
 
 defined( 'WPINC' ) || die();
@@ -18,6 +18,7 @@ add_action( 'init',                   __NAMESPACE__ . '\schedule_cron_jobs' );
 add_action( 'admin_init',             __NAMESPACE__ . '\add_meta_boxes' );
 add_action( 'save_post',              __NAMESPACE__ . '\save_pledge', 10, 2 );
 add_action( 'admin_enqueue_scripts',  __NAMESPACE__ . '\enqueue_assets' );
+add_action( 'wp_enqueue_scripts',     __NAMESPACE__ . '\enqueue_assets' );
 add_action( 'transition_post_status', __NAMESPACE__ . '\maybe_update_single_cached_pledge_data', 10, 3 );
 add_action( 'update_all_cached_pledge_data', __NAMESPACE__. '\update_all_cached_pledge_data' );
 
@@ -207,6 +208,7 @@ function add_meta_boxes() {
 function render_meta_boxes( $pledge, $box ) {
 	$readonly  = ! current_user_can( 'edit_page', $pledge->ID );
 	$is_manage = true;
+	$pledge_id = $pledge->ID;
 
 	$data = array();
 	foreach ( get_pledge_meta_config() as $key => $config ) {
@@ -502,9 +504,14 @@ function enqueue_assets() {
 	$ver = filemtime( FiveForTheFuture\PATH . '/assets/js/admin.js' );
 	wp_register_script( '5ftf-admin', plugins_url( 'assets/js/admin.js', __DIR__ ), [ 'jquery', 'wp-util' ], $ver );
 
+	$pledge_id   = is_admin() ? get_the_ID() : absint( $_REQUEST['pledge_id'] ?? 0 );
+	$auth_token  = sanitize_text_field( $_REQUEST['auth_token'] ?? '' );
 	$script_data = [
-		'pledgeId'    => get_the_ID(),
+		// The global ajaxurl is not set on the frontend.
+		'ajaxurl'     => admin_url( 'admin-ajax.php', 'relative' ),
+		'pledgeId'    => $pledge_id,
 		'manageNonce' => wp_create_nonce( 'manage-contributors' ),
+		'authToken'   => $auth_token,
 	];
 	wp_add_inline_script(
 		'5ftf-admin',
@@ -515,9 +522,21 @@ function enqueue_assets() {
 		'before'
 	);
 
+	if ( is_admin() ) {
 		$current_page = get_current_screen();
 		if ( Pledge\CPT_ID === $current_page->id ) {
 			wp_enqueue_style( '5ftf-admin' );
 			wp_enqueue_script( '5ftf-admin' );
 		}
+	} else {
+		global $post;
+		if ( is_a( $post, 'WP_Post' ) ) {
+			$pledge_id  = absint( $_REQUEST['pledge_id'] ?? 0 );
+			$auth_token = sanitize_text_field( $_REQUEST['auth_token'] ?? '' );
+			$can_manage = Auth\can_manage_pledge( $pledge_id, $auth_token );
+			if ( ! is_wp_error( $can_manage ) && has_shortcode( $post->post_content, '5ftf_pledge_form_manage' ) ) {
+				wp_enqueue_script( '5ftf-admin' );
+			}
+		}
+	}
 }

plugins/wporg-5ftf/views/form-pledge-manage.php

@@ -33,6 +33,11 @@ require __DIR__ . '/partial-result-messages.php';
 				value="<?php esc_attr_e( 'Update Pledge', 'wporg-5ftf' ); ?>"
 			/>
 		</div>
+
+		<h2><?php esc_html_e( 'Contributors', 'wporg-5ftf' ); ?></h2>
+
+		<?php require get_views_path() . 'manage-contributors.php'; ?>
+
 	</form>
 
 <?php endif; ?>

plugins/wporg-5ftf/views/manage-contributors.php

@@ -4,8 +4,7 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 
 /** @var array $contributors */
-/** @var array $data */
+/** @var int   $pledge_id */
-/** @var bool  $readonly */
 ?>
 
 <script type="text/template" id="tmpl-5ftf-contributor-lists">
@@ -75,7 +74,7 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 </script> 
 
 <div id="5ftf-contributors">
-	<div class="pledge-contributors pledge-status__<?php echo esc_attr( get_post_status() ); ?>">
+	<div class="pledge-contributors pledge-status__<?php echo esc_attr( get_post_status( $pledge_id ) ); ?>">
 		<?php if ( ! empty( $contributors ) ) : ?>
 			<?php
 			printf(

themes/wporg-5ftf/css/objects/_pledge-form.scss

@@ -55,10 +55,67 @@
 		}
 	}
 	
-	input[type="submit"] {
+	input[type="submit"],
+	.button-primary {
 		display: inline-block;
 		height: auto;
 		padding: ms(-3) ms(0);
 		font-weight: 600;
 	}
+
+	.contributor-list-heading {
+		margin: 1rem 0;
+	}
+
+	.contributor-list {
+		margin-bottom: 1.5rem;
+
+		th,
+		td,
+		th *,
+		td * {
+			vertical-align: middle;
+		}
+
+		thead {
+			background-color: #fff;
+			color: inherit;
+
+			th {
+				border-bottom-color: $color-gray-light-700;
+			}
+		}
+
+		tr > * {
+			border-top-color: $color-gray-light-700;
+
+			&:first-child {
+				border-left-color: $color-gray-light-700;
+			}
+
+			&:last-child {
+				border-right-color: $color-gray-light-700;
+			}
+		}
+
+		tr:last-child > * {
+			border-bottom-color: $color-gray-light-700;
+		}
+
+		.avatar {
+			margin-right: 8px;
+		}
+
+		.button-link-delete {
+			text-decoration: none;
+
+			.dashicons {
+				margin-top: -2px;
+			}
+		}
+	}
+
+	.pledge-contributors.pledge-status__draft .resend-confirm {
+		display: none;
+	}
 }