WordPress.org
Get WordPress

Make WordPress Core

Ticket #49182: added__show_hide_toggle_to_password_field_of_password_protected_post_form_.patch

File added__show_hide_toggle_to_password_field_of_password_protected_post_form_.patch, 8.1 KB (added by mikhailroot, 3 years ago)

updated post password frontend form field with show\hide password toggle, js\css files are included as well as modified get_the_password_form() and get_the_content() functions of /wp-includes/post-template.php

  • src/js/_enqueues/lib/wp-post-pwd.js 

    IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
     
     1/**
     2 * Password protected post form show/hide password switch logic.
     3 *
     4 * @output wp-includes/js/wp-post-pwd.js
     5 */
     6
     7/* global wpPostPwdL10n */
     8(function($) {
     9
     10        function resetToggle($toggleButton, show ) {
     11                $toggleButton
     12                        .attr({
     13                                'aria-label': show ? wpPostPwdL10n.ariaShow : wpPostPwdL10n.ariaHide
     14                        })
     15                        .find( '.text' )
     16                                .text( show ? wpPostPwdL10n.show : wpPostPwdL10n.hide )
     17                        .end()
     18                        .find( '.dashicons' )
     19                                .removeClass( show ? 'dashicons-hidden' : 'dashicons-visibility' )
     20                                .addClass( show ? 'dashicons-visibility' : 'dashicons-hidden' );
     21        }
     22
     23        $(document).ready( function() {
     24
     25                var $toggleButtons = $('.wp-post-pwd__button');
     26
     27                $toggleButtons.show().on( 'click', function (event) {
     28
     29                        event.preventDefault();
     30
     31                        var $toggleButton = $(event.currentTarget),
     32                                $passwordInput = $toggleButton.closest('.wp-post-pwd').find('input[name="post_password"]');
     33
     34                        if ( 'password' === $passwordInput.attr( 'type' ) ) {
     35                                $passwordInput.attr( 'type', 'text' );
     36                                resetToggle($toggleButton, false );
     37                        } else {
     38                                $passwordInput.attr( 'type', 'password' );
     39                                resetToggle( $toggleButton,true );
     40                        }
     41
     42                        $passwordInput.focus();
     43
     44                });
     45
     46        });
     47
     48
     49})(jQuery);

  • src/wp-includes/css/wp-post-pwd.css 

    IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
     
     1.wp-post-pwd{
     2        display: flex;
     3}
     4
     5.wp-post-pwd__input-wrapper{
     6        position: relative;
     7        flex-grow: 1;
     8}
     9
     10/* rtl:ignore */
     11.wp-post-pwd__input-wrapper {
     12        margin-right: 1em;
     13}
     14
     15.wp-post-pwd__button{
     16        position: absolute;
     17        top: 0;
     18        bottom: 0;
     19        min-width: 3em;
     20}
     21
     22/* rtl:ignore */
     23.wp-post-pwd__button{
     24        right: 0;
     25}
     26
     27/* RTL button positioning */
     28.rtl .wp-post-pwd__button{
     29        left: 0;
     30}
     31
     32.rtl .wp-post-pwd__input-wrapper{
     33        margin-left: 1em;
     34}

  • src/wp-includes/post-template.php 

    IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
     
    310310
    311311        // If post password required and it doesn't match the cookie.
    312312        if ( post_password_required( $_post ) ) {
     313
     314                // we enqueue post password form styles and js.
     315                wp_enqueue_script( 'wp-post-pwd' );
     316                wp_enqueue_style( 'wp-post-pwd' );
     317
    313318                return get_the_password_form( $_post );
    314319        }
    315320
    … …  
    15181523 */
    15191524function walk_page_tree( $pages, $depth, $current_page, $r ) {
    15201525        if ( empty( $r['walker'] ) ) {
    1521                 $walker = new Walker_Page;
     1526                $walker = new Walker_Page();
    15221527        } else {
    15231528                $walker = $r['walker'];
    15241529        }
    … …  
    15461551 */
    15471552function walk_page_dropdown_tree( ...$args ) {
    15481553        if ( empty( $args[2]['walker'] ) ) { // The user's options are the third parameter.
    1549                 $walker = new Walker_PageDropdown;
     1554                $walker = new Walker_PageDropdown();
    15501555        } else {
    15511556                $walker = $args[2]['walker'];
    15521557        }
    … …  
    17061711 */
    17071712function get_the_password_form( $post = 0 ) {
    17081713        $post   = get_post( $post );
    1709         $label  = 'pwbox-' . ( empty( $post->ID ) ? rand() : $post->ID );
    1710         $output = '<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="post-password-form" method="post">
    1711         <p>' . __( 'This content is password protected. To view it please enter your password below:' ) . '</p>
    1712         <p><label for="' . $label . '">' . __( 'Password:' ) . ' <input name="post_password" id="' . $label . '" type="password" size="20" /></label> <input type="submit" name="Submit" value="' . esc_attr_x( 'Enter', 'post password form' ) . '" /></p></form>
    1713         ';
     1714        $label  = 'pwbox-' . ( empty( $post->ID ) ? wp_rand() : $post->ID );
     1715        $output = '<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="post-password-form" method="post">' .
     1716                                '<p>' . __( 'This content is password protected. To view it please enter your password below:' ) . '</p>' .
     1717                                '<p><label for="' . $label . '">' . __( 'Password:' ) . '</label></p>' .
     1718                                '<span class="wp-post-pwd">' .
     1719                                '<span class="wp-post-pwd__input-wrapper">' .
     1720                                '<input name="post_password" id="' . $label . '" type="password" size="20" />' .
     1721                                '<button type="button" class="button button-secondary wp-post-pwd__button hide-if-no-js" data-toggle="0" aria-label="' . esc_attr_x( 'Show password', 'post password form' ) . '" ><span class="dashicons dashicons-visibility" aria-hidden="true"></span></button>' .
     1722                                '</span>' .
     1723                                '<button type="submit" name="Submit">' . esc_attr_x( 'Enter', 'post password form' ) . '</button>' .
     1724                                '</span>' .
     1725                                '</form>';
    17141726
    17151727        /**
    17161728         * Filters the HTML output for the protected post password form.

  • src/wp-includes/script-loader.php 

    IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
     
    11031103                )
    11041104        );
    11051105
     1106        $scripts->add( 'wp-post-pwd', "/wp-includes/js/wp-post-pwd$suffix.js", array( 'jquery', 'wp-util' ), false, 1 );
     1107        did_action( 'init' ) && $scripts->localize(
     1108                'wp-post-pwd',
     1109                'wpPostPwdL10n',
     1110                array(
     1111                        'show'     => __( 'Show' ),
     1112                        'hide'     => __( 'Hide' ),
     1113                        'ariaShow' => esc_attr__( 'Show password' ),
     1114                        'ariaHide' => esc_attr__( 'Hide password' ),
     1115                )
     1116        );
     1117
    11061118        $scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 );
    11071119
    11081120        $scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );
    … …  
    17111723        $styles->add( 'customize-preview', "/wp-includes/css/customize-preview$suffix.css", array( 'dashicons' ) );
    17121724        $styles->add( 'wp-embed-template-ie', "/wp-includes/css/wp-embed-template-ie$suffix.css" );
    17131725        $styles->add_data( 'wp-embed-template-ie', 'conditional', 'lte IE 8' );
     1726        $styles->add( 'wp-post-pwd', "/wp-includes/css/wp-post-pwd$suffix.css", array( 'dashicons' ) );
    17141727
    17151728        // External libraries and friends.
    17161729        $styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' );

  • Gruntfile.js 

    IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
     
    325325                                        [ WORKING_DIR + 'wp-includes/js/wp-list-revisions.js' ]: [ './src/js/_enqueues/lib/list-revisions.js' ],
    326326                                        [ WORKING_DIR + 'wp-includes/js/wp-lists.js' ]: [ './src/js/_enqueues/lib/lists.js' ],
    327327                                        [ WORKING_DIR + 'wp-includes/js/wp-pointer.js' ]: [ './src/js/_enqueues/lib/pointer.js' ],
     328                                        [ WORKING_DIR + 'wp-includes/js/wp-post-pwd.js' ]: [ './src/js/_enqueues/lib/wp-post-pwd.js' ],
    328329                                        [ WORKING_DIR + 'wp-includes/js/wp-sanitize.js' ]: [ './src/js/_enqueues/wp/sanitize.js' ],
    329330                                        [ WORKING_DIR + 'wp-includes/js/wp-util.js' ]: [ './src/js/_enqueues/wp/util.js' ],
    330331                                        [ WORKING_DIR + 'wp-includes/js/wpdialog.js' ]: [ './src/js/_enqueues/lib/dialog.js' ],
    … …  
    873874                                        'src/wp-includes/js/wp-list-revisions.js': 'src/js/_enqueues/lib/list-revisions.js',
    874875                                        'src/wp-includes/js/wp-lists.js': 'src/js/_enqueues/lib/lists.js',
    875876                                        'src/wp-includes/js/wp-pointer.js': 'src/js/_enqueues/lib/pointer.js',
     877                                        'src/wp-includes/js/wp-post-pwd.js': 'src/js/_enqueues/lib/wp-post-pwd.js',
    876878                                        'src/wp-includes/js/wp-sanitize.js': 'src/js/_enqueues/wp/sanitize.js',
    877879                                        'src/wp-includes/js/wp-util.js': 'src/js/_enqueues/wp/util.js',
    878880                                        'src/wp-includes/js/wpdialog.js': 'src/js/_enqueues/lib/dialog.js',