mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-07-01 16:51:18 +03:00
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
This commit is contained in:
Kelly Dwan
parent
d737f70a7e
commit
746de99787
|
|
@ -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( $( '<p>' ).html( '<em>' + response.message + '<em>' ) );
|
||||
} 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 );
|
||||
}
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
34
plugins/wporg-5ftf/views/form-request-manage-link.php
Normal file
34
plugins/wporg-5ftf/views/form-request-manage-link.php
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
24
plugins/wporg-5ftf/views/partial-request-manage-link.php
Normal file
24
plugins/wporg-5ftf/views/partial-request-manage-link.php
Normal 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 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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue