Add the "Request Manage Link" form to the manage pledge page

When a pledge is selected but the auth token is missing/incorrect, this will give a clear path for re-requesting a new valid manage link

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

@@ -1,14 +1,12 @@
 /* global FFTF_Dialog, jQuery */
 jQuery( document ).ready( function( $ ) {
 	const button = document.getElementById( 'toggle-management-link-form' );
-	const template = wp.template( '5ftf-send-link-dialog' );
+	const template = document.getElementById( 'tmpl-5ftf-send-link-dialog' ) && wp.template( '5ftf-send-link-dialog' );
 
-	if ( ! template && ! button ) {
+	if ( !! template ) {
-		// No modal on this page.
+		$( document.body ).prepend( template() );
-		return;
 	}
 
-	$( document.body ).prepend( template() );
 	const modal = document.getElementById( 'send-link-dialog' );
 	const modalBg = document.getElementById( 'send-link-dialog-bg' );
 	const children = document.querySelectorAll( 'body > *:not([role="dialog"])' );
@@ -81,14 +79,15 @@ jQuery( document ).ready( function( $ ) {
 	function sendRequest( event ) {
 		event.preventDefault();
 		const email = $( event.target.querySelector( 'input[type="email"]' ) ).val();
+		const pledgeId = $( event.target.querySelector( 'input[name="pledge_id"]' ) ).val();
 		$( event.target.querySelector( '.message' ) ).html( '' );
 		$.ajax( {
 			type: 'POST',
 			url: FFTF_Dialog.ajaxurl,
 			data: {
 				action: 'send-manage-email',
-				pledge_id: FFTF_Dialog.pledgeId,
+				pledge_id: pledgeId,
-				email,
+				email: email,
 				_ajax_nonce: FFTF_Dialog.ajaxNonce,
 			},
 			success( response ) {
@@ -96,7 +95,7 @@ jQuery( document ).ready( function( $ ) {
 					// Say the message for screen reader users.
 					wp.a11y.speak( response.message );
 
-					if ( response.success ) {
+					if ( response.success && !! button ) {
 						closeModal();
 						$( button ).after( $( '<p>' ).html( '<em>' + response.message + '<em>' ) );
 					} else {
@@ -124,6 +123,8 @@ jQuery( document ).ready( function( $ ) {
 		}
 	} );
 
+	// Make sure `modal` exists before using it.
+	if ( !! modal ) {
 		$( modalBg ).on( 'click', closeModal );
 		$( modal ).on( 'click', '.pledge-dialog__close', closeModal );
 		$( document ).on( 'keydown', function( event ) {
@@ -133,4 +134,5 @@ jQuery( document ).ready( function( $ ) {
 		} );
 
 		$( modal.querySelector( 'form' ) ).submit( sendRequest );
+	}
 } );

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

@@ -122,7 +122,7 @@ function render_form_manage() {
 	$can_view_form = Auth\can_manage_pledge( $pledge_id, $auth_token );
 
 	if ( is_wp_error( $can_view_form ) ) {
-		$errors = array( $can_view_form->get_error_message() );
+		$errors = array( strip_tags( $can_view_form->get_error_message() ) );
 	} else if ( ! Pledge\is_active_pledge( $pledge_id ) ) {
 		$errors = array(
 			sprintf(
@@ -132,6 +132,12 @@ function render_form_manage() {
 		);
 	}
 
+	if ( Pledge\is_active_pledge( $pledge_id ) && is_wp_error( $can_view_form ) ) {
+		ob_start();
+		require FiveForTheFuture\get_views_path() . 'partial-request-manage-link.php';
+		return ob_get_clean();
+	}
+
 	if ( count( $errors ) > 0 ) {
 		ob_start();
 		require FiveForTheFuture\get_views_path() . 'partial-result-messages.php';

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

@@ -497,7 +497,7 @@ function has_existing_pledge( $key, $key_type, int $current_pledge_id = 0 ) {
 function enqueue_assets() {
 	wp_register_script( 'wicg-inert', plugins_url( 'assets/js/inert.min.js', __DIR__ ), array(), '3.0.0', true );
 
-	if ( CPT_ID === get_post_type() ) {
+	if ( CPT_ID === get_post_type() || is_page( 'manage-pledge' ) ) {
 		wp_enqueue_script(
 			'5ftf-dialog',
 			plugins_url( 'assets/js/dialog.js', __DIR__ ),
@@ -508,7 +508,6 @@ function enqueue_assets() {
 
 		$script_data = array(
 			'ajaxurl'   => admin_url( 'admin-ajax.php', 'relative' ), // The global ajaxurl is not set on the frontend.
-			'pledgeId'     => get_the_ID(),
 			'ajaxNonce' => wp_create_nonce( 'send-manage-email' ),
 		);
 		wp_add_inline_script(

plugins/wporg-5ftf/views/form-request-manage-link.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace WordPressDotOrg\FiveForTheFuture\View;
+use WordPressDotOrg\FiveForTheFuture\Pledge;
+
+defined( 'WPINC' ) || die();
+
+$pledge_id = ( Pledge\CPT_ID === get_post_type() ) ? get_post()->ID : absint( $_REQUEST['pledge_id'] ?? 0 );
+?>
+
+<form method="post" class="pledge-email-form">
+	<input type="hidden" name="pledge_id" value="<?php echo esc_attr( $pledge_id ); ?>" />
+
+	<label for="pledge_admin_address">
+		<?php esc_html_e( 'Email Address', 'wporg-5ftf' ); ?>
+	</label>
+
+	<input
+		id="pledge_admin_address"
+		name="pledge_admin_address"
+		type="email"
+		required
+		value=""
+	/>
+
+	<div class="message"></div>
+
+	<input
+		type="submit"
+		class="button"
+		name="get_manage_pledge_link"
+		value="<?php esc_attr_e( 'Submit', 'wporg-5ftf' ); ?>"
+	/>
+</form>

plugins/wporg-5ftf/views/modal-request-manage-link.php

@@ -1,6 +1,7 @@
 <?php
 
 namespace WordPressDotOrg\FiveForTheFuture\View;
+use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 
 defined( 'WPINC' ) || die();
 
@@ -16,30 +17,7 @@ defined( 'WPINC' ) || die();
 			<?php esc_html_e( "If you're the admin, enter your email address and a confirmation link will be sent to you.", 'wporg-5ftf' ); ?>
 		</p>
 
-		<form method="post">
+		<?php require get_views_path() . 'form-request-manage-link.php'; ?>
-			<input type="hidden" name="pledge_id" value="<?php echo esc_attr( get_post()->ID ); ?>" />
-
-			<label for="pledge_admin_address">
-				<?php esc_html_e( 'Email Address', 'wporg-5ftf' ); ?>
-			</label>
-
-			<input
-				id="pledge_admin_address"
-				name="pledge_admin_address"
-				type="email"
-				required
-				value=""
-			/>
-
-			<div class="message"></div>
-
-			<input
-				type="submit"
-				class="button"
-				name="get_manage_pledge_link"
-				value="<?php esc_attr_e( 'Submit', 'wporg-5ftf' ); ?>"
-			/>
-		</form>
 		<button type="button" class="button button-link pledge-dialog__close" aria-label="Close"><span class="dashicons dashicons-no-alt" aria-hidden="true"></span></button></div>
 	</div>
 </script>

plugins/wporg-5ftf/views/partial-request-manage-link.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace WordPressDotOrg\FiveForTheFuture\View;
+use const WordPressDotOrg\FiveForTheFuture\Pledge\CPT_ID;
+use function WordPressDotOrg\FiveForTheFuture\get_views_path;
+
+defined( 'WPINC' ) || die();
+
+$pledge_id = ( CPT_ID === get_post_type() ) ? get_post()->ID : absint( $_REQUEST['pledge_id'] ?? 0 );
+$pledge_name = get_the_title( $pledge_id );
+?>
+
+<div id="send-link-dialog">
+	<?php require get_views_path() . 'partial-result-messages.php'; ?>
+
+	<p>
+		<?php echo esc_html( sprintf(
+			__( "If you're the admin for %s, enter your email address and a confirmation link will be sent to you.", 'wporg-5ftf' ),
+			$pledge_name
+		) ); ?>
+	</p>
+
+	<?php require get_views_path() . 'form-request-manage-link.php'; ?>
+</div>

themes/wporg-5ftf/css/components/_pledge-dialog.scss

@@ -29,6 +29,29 @@
 		border-bottom-color: $color-gray-light-400;
 	}
 
+	.pledge-dialog__close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 10px;
+		text-decoration: none;
+	}
+}
+
+.pledge-dialog__background {
+	position: fixed;
+	z-index: 99;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+
+	&[hidden] {
+		display: none;
+	}
+}
+
+.pledge-email-form {
 	label {
 		display: inline-block;
 		margin-bottom: 4px;
@@ -53,25 +76,4 @@
 	.notice p {
 		font-size: 1em;
 	}
-
-	.pledge-dialog__close {
-		position: absolute;
-		top: 0;
-		right: 0;
-		padding: 10px;
-		text-decoration: none;
-	}
-}
-
-.pledge-dialog__background {
-	position: fixed;
-	z-index: 99;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-
-	&[hidden] {
-		display: none;
-	}
 }