tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-07-13 05:45:47 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Manage Pledge: Update email dialog to use JS submission (#104)

Browse source 
Use the proper dialog behavior for submitting an email to generate a manage link.

Fixes #98.
This commit is contained in:
Kelly Dwan 2019-11-21 15:31:29 -05:00 • committed by GitHub
parent a67ef04505
commit a11e3c5fa5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 1202 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

13
plugins/wporg-5ftf/views/button-request-manage-link.php Normal file
View file

@ -0,0 +1,13 @@
<?php
namespace WordPressDotOrg\FiveForTheFuture\View;
defined( 'WPINC' ) || die();
?>
<div class="edit-pledge-wrapper">
<button id="toggle-management-link-form" class="button button-link">
<span class="dashicons dashicons-edit" aria-hidden="true"></span>
<?php esc_html_e( 'Edit Pledge', 'wporg-5ftf' ); ?>
</button>
</div>

75
plugins/wporg-5ftf/views/form-pledge-request-manage-link.php
View file

@ -1,75 +0,0 @@
<?php
namespace WordPressDotOrg\FiveForTheFuture\View;
defined( 'WPINC' ) || die();
/**
* @var array $errors
*/
// Hide it if it hasn't submitted, but show success/error messages if it was submitted.
// phpcs:ignore
$hidden = empty( $errors ) && empty( $_POST['get_manage_pledge_link'] ) ? 'hidden' : '';
?>
<button id="toggle-management-link-form">
<span class="dashicons dashicons-edit"></span>
<?php esc_html_e( 'Edit Pledge', 'wporg-5ftf' ); ?>
</button>
<div id="request-management-link" <?php echo esc_attr( $hidden ); ?> >
<p>
<?php esc_html_e( 'Only pledge admins can edit pledges.', 'wporg-5ftf' ); ?>
</p>
<p>
<?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 action="#form-messages" 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=""
/>
<input
type="submit"
name="get_manage_pledge_link"
value="Submit"
/>
<?php require __DIR__ . '/partial-result-messages.php'; ?>
</form>
</div>
<script>
( function() {
var toggleLinkFormButton = document.getElementById( 'toggle-management-link-form' ),
linkForm = document.getElementById( 'request-management-link' );
// Toggle the form when the button is clicked.
toggleLinkFormButton.addEventListener( 'click', function() {
switch( linkForm.hidden ) {
case true:
linkForm.hidden = false;
linkForm.scrollIntoView( { behavior: 'smooth' } );
break;
default:
linkForm.hidden = true;
break;
}
} );
}() );
</script>

44
plugins/wporg-5ftf/views/modal-request-manage-link.php Normal file
View file

@ -0,0 +1,44 @@
<?php
namespace WordPressDotOrg\FiveForTheFuture\View;
defined( 'WPINC' ) || die();
?>
<script type="text/template" id="tmpl-5ftf-send-link-dialog">
<div id="send-link-dialog-bg" class="pledge-dialog__background" hidden data-no-inert></div>
<div id="send-link-dialog" role="dialog" class="pledge-dialog" hidden tabindex="-1" aria-label="<?php esc_attr_e( 'Request to edit this pledge', 'wporg-5ftf' ); ?>">
<p>
<?php esc_html_e( 'Only pledge admins can edit pledges.', 'wporg-5ftf' ); ?>
</p>
<p>
<?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"
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>