Pledge Management: Add "request link" form to the manage pledge (#126)

When a pledge is selected but the auth token is missing/incorrect, show the email form. Like on the pledge page, submitting the correct email will trigger a new auth token + link to be emailed to the pledge manager. This makes for a clearer path for re-requesting a valid link.

Fixes #114
This commit is contained in:
Kelly Dwan 2019-12-11 16:12:23 -05:00 committed by GitHub
parent a5d4228c6d
commit a91c2733d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 129 additions and 76 deletions

View file

@ -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 ) {
// No modal on this page.
return;
if ( !! template ) {
$( document.body ).prepend( template() );
}
$( 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,
email,
pledge_id: pledgeId,
email: email,
_ajax_nonce: FFTF_Dialog.ajaxNonce,
},
success( response ) {
@ -96,10 +95,11 @@ 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 {
$( 'div.notice' ).remove();
const $message = $( '<div>' )
.addClass( 'notice notice-alt' )
.addClass( response.success ? 'notice-success' : 'notice-error' )
@ -124,13 +124,16 @@ jQuery( document ).ready( function( $ ) {
}
} );
$( modalBg ).on( 'click', closeModal );
$( modal ).on( 'click', '.pledge-dialog__close', closeModal );
$( document ).on( 'keydown', function( event ) {
if ( 27 === event.which ) { // Esc
closeModal( event );
}
} );
// 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 ) {
if ( 27 === event.which ) { // Esc
closeModal( event );
}
} );
$( modal.querySelector( 'form' ) ).submit( sendRequest );
$( modal.querySelector( 'form' ) ).submit( sendRequest );
}
} );

View file

@ -178,10 +178,7 @@ function can_manage_pledge( $requested_pledge_id, $auth_token = '' ) {
return new WP_Error(
'invalid_token',
sprintf(
__( 'Your link has expired, please <a href="%s">obtain a new one.</a>', 'wporg-5ftf' ),
get_permalink( $requested_pledge_id )
)
__( 'Your link has expired.', 'wporg-5ftf' )
);
}

View file

@ -34,7 +34,6 @@ function render_form_new() {
$pledge = null;
$complete = false;
$directory_url = home_url( 'pledges' );
$view = 'form-pledge-new.php';
if ( 'Submit Pledge' === $action ) {
$pledge_id = process_form_new();
@ -48,7 +47,7 @@ function render_form_new() {
ob_start();
$readonly = false;
require FiveForTheFuture\get_views_path() . $view;
require FiveForTheFuture\get_views_path() . 'form-pledge-new.php';
return ob_get_clean();
}
@ -123,8 +122,8 @@ 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() );
} else if ( ! in_array( get_post_status( $pledge_id ), array( 'pending', 'publish' ), true ) ) {
$errors = array( strip_tags( $can_view_form->get_error_message() ) );
} else if ( ! Pledge\is_active_pledge( $pledge_id ) ) {
$errors = array(
sprintf(
__( 'This pledge has been removed from Five for the Future. If this was a mistake, please <a href="%s">contact us</a> to reactivate your pledge.', 'wporg-5ftf' ),
@ -133,9 +132,15 @@ 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\PATH . 'views/partial-result-messages.php';
require FiveForTheFuture\get_views_path() . 'partial-result-messages.php';
return ob_get_clean();
}
@ -154,7 +159,7 @@ function render_form_manage() {
}
ob_start();
require FiveForTheFuture\PATH . 'views/partial-result-messages.php';
require FiveForTheFuture\get_views_path() . 'partial-result-messages.php';
return ob_get_clean();
} else if ( 'Update Pledge' === $action ) {
$results = process_form_manage( $pledge_id, $auth_token );
@ -177,7 +182,7 @@ function render_form_manage() {
ob_start();
$readonly = false;
$is_manage = true;
require FiveForTheFuture\PATH . 'views/form-pledge-manage.php';
require FiveForTheFuture\get_views_path() . 'form-pledge-manage.php';
return ob_get_clean();
}

View file

@ -327,6 +327,17 @@ function populate_list_table_columns( $column, $post_id ) {
break;
}
}
/**
* Check if a post is an active pledge (pending or published).
*
* @param int $post_id The ID of a post to check.
*
* @return bool
*/
function is_active_pledge( $post_id ) {
return CPT_ID === get_post_type( $post_id ) &&
in_array( get_post_status( $post_id ), array( 'pending', 'publish' ), true );
}
/**
* Create a new pledge post.
@ -486,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__ ),
@ -496,9 +507,8 @@ 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' ),
'ajaxurl' => admin_url( 'admin-ajax.php', 'relative' ), // The global ajaxurl is not set on the frontend.
'ajaxNonce' => wp_create_nonce( 'send-manage-email' ),
);
wp_add_inline_script(
'5ftf-dialog',

View file

@ -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>

View file

@ -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">
<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>
<?php require get_views_path() . 'form-request-manage-link.php'; ?>
<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>

View file

@ -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 an admin for %s, you can request a new edit link using this form. Enter your email address and we'll send you a new link.", 'wporg-5ftf' ),
$pledge_name
) ); ?>
</p>
<?php require get_views_path() . 'form-request-manage-link.php'; ?>
</div>

View file

@ -29,27 +29,6 @@
border-bottom-color: $color-gray-light-400;
}
label {
display: inline-block;
margin-bottom: 4px;
font-size: ms(-4);
font-weight: bold;
color: $color-gray-500;
}
input[type="email"] {
display: block;
width: 100%;
margin: 0 0 20px 0;
padding: ms(-7) ms(-2);
border: 1px solid $color-gray-100;
box-shadow: none;
}
input[type="submit"] {
font-size: ms(-3);
}
.notice p {
font-size: 1em;
}
@ -75,3 +54,26 @@
display: none;
}
}
.pledge-email-form {
label {
display: inline-block;
margin-bottom: 4px;
font-size: ms(-4);
font-weight: bold;
color: $color-gray-500;
}
input[type="email"] {
display: block;
width: 100%;
margin: 0 0 20px 0;
padding: ms(-7) ms(-2);
border: 1px solid $color-gray-100;
box-shadow: none;
}
input[type="submit"] {
font-size: ms(-3);
}
}