From 746de99787c7be1e8c2d9ac70ab8b680a99a6fd9 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 9 Dec 2019 17:53:06 -0500 Subject: [PATCH] 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 | 34 +++++++------- plugins/wporg-5ftf/includes/pledge-form.php | 8 +++- plugins/wporg-5ftf/includes/pledge.php | 7 ++- .../views/form-request-manage-link.php | 34 ++++++++++++++ .../views/modal-request-manage-link.php | 26 +---------- .../views/partial-request-manage-link.php | 24 ++++++++++ .../css/components/_pledge-dialog.scss | 44 ++++++++++--------- 7 files changed, 111 insertions(+), 66 deletions(-) create mode 100644 plugins/wporg-5ftf/views/form-request-manage-link.php create mode 100644 plugins/wporg-5ftf/views/partial-request-manage-link.php diff --git a/plugins/wporg-5ftf/assets/js/dialog.js b/plugins/wporg-5ftf/assets/js/dialog.js index 8eca409..173a828 100644 --- a/plugins/wporg-5ftf/assets/js/dialog.js +++ b/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 ) { - // 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,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( $( '

' ).html( '' + response.message + '' ) ); } else { @@ -124,13 +123,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 ); + } } ); diff --git a/plugins/wporg-5ftf/includes/pledge-form.php b/plugins/wporg-5ftf/includes/pledge-form.php index 9d7187e..3f70989 100755 --- a/plugins/wporg-5ftf/includes/pledge-form.php +++ b/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'; diff --git a/plugins/wporg-5ftf/includes/pledge.php b/plugins/wporg-5ftf/includes/pledge.php index 4ab8e20..fb6f178 100755 --- a/plugins/wporg-5ftf/includes/pledge.php +++ b/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__ ), @@ -507,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', diff --git a/plugins/wporg-5ftf/views/form-request-manage-link.php b/plugins/wporg-5ftf/views/form-request-manage-link.php new file mode 100644 index 0000000..d32478f --- /dev/null +++ b/plugins/wporg-5ftf/views/form-request-manage-link.php @@ -0,0 +1,34 @@ +ID : absint( $_REQUEST['pledge_id'] ?? 0 ); +?> + +

+ + + + + + +
+ + + diff --git a/plugins/wporg-5ftf/views/modal-request-manage-link.php b/plugins/wporg-5ftf/views/modal-request-manage-link.php index d5858e3..5c319bc 100644 --- a/plugins/wporg-5ftf/views/modal-request-manage-link.php +++ b/plugins/wporg-5ftf/views/modal-request-manage-link.php @@ -1,6 +1,7 @@

-
- - - - - - -
- - -
+ diff --git a/plugins/wporg-5ftf/views/partial-request-manage-link.php b/plugins/wporg-5ftf/views/partial-request-manage-link.php new file mode 100644 index 0000000..30ac92e --- /dev/null +++ b/plugins/wporg-5ftf/views/partial-request-manage-link.php @@ -0,0 +1,24 @@ +ID : absint( $_REQUEST['pledge_id'] ?? 0 ); +$pledge_name = get_the_title( $pledge_id ); +?> + + diff --git a/themes/wporg-5ftf/css/components/_pledge-dialog.scss b/themes/wporg-5ftf/css/components/_pledge-dialog.scss index 83d31a4..2d46caf 100644 --- a/themes/wporg-5ftf/css/components/_pledge-dialog.scss +++ b/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; - } }