WordPress.org

Make WordPress Core

Ticket #31608: 31608.5.diff

File 31608.5.diff, 13.4 KB (added by ericlewis, 6 years ago)
  • src/wp-admin/css/forms.css

    diff --git src/wp-admin/css/forms.css src/wp-admin/css/forms.css
    index 19ff006..b98b6d2 100644
    table.form-table td .updated p { 
    864864        margin: 25px;
    865865}
    866866
    867 .request-filesystem-credentials-dialog-content input[type="text"],
    868 .request-filesystem-credentials-dialog-content input[type="password"] {
    869         width: 85%;
     867.request-filesystem-credentials-form input[type="text"],
     868.request-filesystem-credentials-form input[type="password"] {
     869        display: block;
    870870}
    871871
     872.request-filesystem-credentials-dialog input[type="text"],
     873.request-filesystem-credentials-dialog input[type="password"] {
     874        width: 100%;
     875}
     876
     877.request-filesystem-credentials-form .field-title {
     878        font-weight: 600;
     879}
     880
     881.request-filesystem-credentials-dialog label[for="hostname"],
     882.request-filesystem-credentials-dialog label[for="public_key"],
     883.request-filesystem-credentials-dialog label[for="private_key"] {
     884        display: block;
     885        margin-bottom: 1em;
     886}
     887
     888.request-filesystem-credentials-dialog .ftp-username,
     889.request-filesystem-credentials-dialog .ftp-password {
     890        float: left;
     891        width: 48%;
     892}
     893
     894.request-filesystem-credentials-dialog .ftp-password {
     895        margin-left: 4%;
     896}
     897
     898.request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
     899        text-align: right;
     900}
     901
     902.request-filesystem-credentials-dialog label[for="ftp"] {
     903        margin-right: 10px;
     904}
     905
     906#request-filesystem-credentials-dialog .button:not(:last-child) {
     907        margin-right: 10px;
     908}
     909
     910#request-filesystem-credentials-form .cancel-button {
     911        display: none;
     912}
     913
     914#request-filesystem-credentials-dialog .cancel-button {
     915        display: inline;
     916}
     917
     918
    872919/* =Media Queries
    873920-------------------------------------------------------------- */
    874921
  • src/wp-admin/includes/file.php

    diff --git src/wp-admin/includes/file.php src/wp-admin/includes/file.php
    index 9f3e6ba..375c970 100644
    jQuery(function($){ 
    11121112-->
    11131113</script>
    11141114<form action="<?php echo esc_url( $form_post ) ?>" method="post">
    1115 <div>
    1116 <h3><?php _e('Connection Information') ?></h3>
    1117 <p><?php
     1115<div id="request-filesystem-credentials-form" class="request-filesystem-credentials-form">
     1116<h3 id="request-filesystem-credentials-title"><?php _e( 'Connection Information' ) ?></h3>
     1117<p id="request-filesystem-credentials-desc"><?php
    11181118        $label_user = __('Username');
    11191119        $label_pass = __('Password');
    11201120        _e('To perform the requested action, WordPress needs to access your web server.');
    jQuery(function($){ 
    11331133        }
    11341134        _e('If you do not remember your credentials, you should contact your web host.');
    11351135?></p>
    1136 <table class="form-table">
    1137 <tr>
    1138 <th scope="row"><label for="hostname"><?php _e('Hostname') ?></label></th>
    1139 <td><input name="hostname" type="text" id="hostname" value="<?php echo esc_attr($hostname); if ( !empty($port) ) echo ":$port"; ?>"<?php disabled( defined('FTP_HOST') ); ?> size="40" /></td>
    1140 </tr>
    1141 
    1142 <tr>
    1143 <th scope="row"><label for="username"><?php echo $label_user; ?></label></th>
    1144 <td><input name="username" type="text" id="username" value="<?php echo esc_attr($username) ?>"<?php disabled( defined('FTP_USER') ); ?> size="40" /></td>
    1145 </tr>
    1146 
    1147 <tr>
    1148 <th scope="row"><label for="password"><?php echo $label_pass; ?></label></th>
    1149 <td><div><input name="password" type="password" id="password" value="<?php if ( defined('FTP_PASS') ) echo '*****'; ?>"<?php disabled( defined('FTP_PASS') ); ?> size="40" /></div>
    1150 <div><em><?php if ( ! defined('FTP_PASS') ) _e( 'This password will not be stored on the server.' ); ?></em></div></td>
    1151 </tr>
    1152 
     1136<label for="hostname">
     1137        <span class="field-title"><?php _e( 'Hostname' ) ?></span>
     1138        <input name="hostname" type="text" id="hostname" aria-describedby="request-filesystem-credentials-desc" class="code" placeholder="<?php esc_attr_e( __( 'example: www.mysite.com' ) ) ?>" value="<?php echo esc_attr($hostname); if ( !empty($port) ) echo ":$port"; ?>"<?php disabled( defined('FTP_HOST') ); ?> />
     1139</label>
     1140<div class="ftp-username">
     1141        <label for="username">
     1142                <span class="field-title"><?php echo $label_user; ?></span>
     1143                <input name="username" type="text" id="username" value="<?php echo esc_attr($username) ?>"<?php disabled( defined('FTP_USER') ); ?> />
     1144        </label>
     1145</div>
     1146<div class="ftp-password">
     1147        <label for="password">
     1148                <span class="field-title"><?php echo $label_pass; ?></span>
     1149                <input name="password" type="password" id="password" value="<?php if ( defined('FTP_PASS') ) echo '*****'; ?>"<?php disabled( defined('FTP_PASS') ); ?> />
     1150                <em><?php if ( ! defined('FTP_PASS') ) _e( 'This password will not be stored on the server.' ); ?></em>
     1151        </label>
     1152</div>
    11531153<?php if ( isset($types['ssh']) ) : ?>
    1154 <tr id="ssh_keys" style="<?php if ( 'ssh' != $connection_type ) echo 'display:none' ?>">
    1155 <th scope="row"><?php _e('Authentication Keys') ?>
    1156 <div class="key-labels textright">
    1157 <label for="public_key"><?php _e('Public Key:') ?></label ><br />
    1158 <label for="private_key"><?php _e('Private Key:') ?></label>
    1159 </div></th>
    1160 <td><br /><input name="public_key" type="text" id="public_key" value="<?php echo esc_attr($public_key) ?>"<?php disabled( defined('FTP_PUBKEY') ); ?> size="40" />
    1161         <br /><input name="private_key" type="text" id="private_key" value="<?php echo esc_attr($private_key) ?>"<?php disabled( defined('FTP_PRIKEY') ); ?> size="40" />
    1162 <div><?php _e('Enter the location on the server where the keys are located. If a passphrase is needed, enter that in the password field above.') ?></div></td>
    1163 </tr>
     1154<h4><?php _e('Authentication Keys') ?></h4>
     1155<label for="public_key">
     1156        <span class="field-title"><?php _e('Public Key:') ?></span>
     1157        <input name="public_key" type="text" id="public_key" aria-describedby="auth-keys-desc" value="<?php echo esc_attr($public_key) ?>"<?php disabled( defined('FTP_PUBKEY') ); ?> />
     1158</label>
     1159<label for="private_key">
     1160        <span class="field-title"><?php _e('Private Key:') ?></span>
     1161        <input name="private_key" type="text" id="private_key" value="<?php echo esc_attr($private_key) ?>"<?php disabled( defined('FTP_PRIKEY') ); ?> />
     1162</label>
     1163<span id="auth-keys-desc"><?php _e('Enter the location on the server where the public and private keys are located. If a passphrase is needed, enter that in the password field above.') ?></span>
    11641164<?php endif; ?>
    1165 
    1166 <tr>
    1167 <th scope="row"><?php _e('Connection Type') ?></th>
    1168 <td>
     1165<h4><?php _e('Connection Type') ?></h4>
    11691166<fieldset><legend class="screen-reader-text"><span><?php _e('Connection Type') ?></span></legend>
    11701167<?php
    11711168        $disabled = disabled( (defined('FTP_SSL') && FTP_SSL) || (defined('FTP_SSH') && FTP_SSH), true, false );
    jQuery(function($){ 
    11761173        </label>
    11771174        <?php endforeach; ?>
    11781175</fieldset>
    1179 </td>
    1180 </tr>
    1181 </table>
    1182 
    11831176<?php
    11841177foreach ( (array) $extra_fields as $field ) {
    11851178        if ( isset( $_POST[ $field ] ) )
    11861179                echo '<input type="hidden" name="' . esc_attr( $field ) . '" value="' . esc_attr( wp_unslash( $_POST[ $field ] ) ) . '" />';
    11871180}
    1188 submit_button( __( 'Proceed' ), 'button', 'upgrade' );
    11891181?>
     1182        <p class="request-filesystem-credentials-action-buttons">
     1183                <button class="button cancel-button" data-js-action="close" type="button"><?php _e( 'Cancel' ); ?></button>
     1184                <?php submit_button( __( 'Proceed' ), 'button', 'upgrade', false ); ?>
     1185        </p>
    11901186</div>
    11911187</form>
    11921188<?php
    function wp_print_request_filesystem_credentials_modal() { 
    12101206        ?>
    12111207        <div id="request-filesystem-credentials-dialog" class="notification-dialog-wrap request-filesystem-credentials-dialog">
    12121208                <div class="notification-dialog-background"></div>
    1213                 <div class="notification-dialog">
     1209                <div class="notification-dialog" role="dialog" aria-labelledby="request-filesystem-credentials-title" tabindex="0">
    12141210                        <div class="request-filesystem-credentials-dialog-content">
    12151211                                <?php request_filesystem_credentials( site_url() ); ?>
    12161212                        <div>
  • src/wp-admin/js/updates.js

    diff --git src/wp-admin/js/updates.js src/wp-admin/js/updates.js
    index 77f0399..d24d5ef 100644
    window.wp = window.wp || {}; 
    7979        wp.updates.updateQueue = [];
    8080
    8181        /**
     82         * Store a jQuery reference to return focus to when exiting the request credentials modal.
     83         *
     84         * @since 4.2.0
     85         *
     86         * @var jQuery object
     87         */
     88        wp.updates.$elToReturnFocusToFromCredentialsModal = null;
     89
     90        /**
    8291         * Decrement update counts throughout the various menus.
    8392         *
    8493         * @since 3.9.0
    window.wp = window.wp || {}; 
    247256         * @since 4.2.0
    248257         */
    249258        wp.updates.showErrorInCredentialsForm = function( message ) {
    250                 var $notificationDialog = $( '.notification-dialog' );
     259                var $modal = $( '.notification-dialog' );
    251260
    252                 // Remove any existing error
    253                 $notificationDialog.find( '.error' ).remove();
     261                // Remove any existing error.
     262                $modal.find( '.error' ).remove();
    254263
    255                 $notificationDialog.find( 'h3' ).after( '<div class="error">' + message + '</div>' );
     264                $modal.find( 'h3' ).after( '<div class="error">' + message + '</div>' );
    256265        };
    257266
    258267        /**
    window.wp = window.wp || {}; 
    361370        };
    362371
    363372        /**
    364          * If an install/update job has been placed in the queue, queueChecker pulls it out and runs it.
     373         * If an install/update job has been placed in the queue,
     374         * queueChecker pulls it out and runs it.
    365375         *
    366376         * @since 4.2.0
    367377         */
    window.wp = window.wp || {}; 
    388398
    389399
    390400        /**
    391          * Request the users filesystem credentials if we don't have them already
     401         * Request the users filesystem credentials if we don't have them already.
    392402         *
    393403         * @since 4.2.0
    394404         */
    395         wp.updates.requestFilesystemCredentials = function() {
     405        wp.updates.requestFilesystemCredentials = function( event ) {
    396406                if ( wp.updates.updateDoneSuccessfully === false ) {
     407                        /*
     408                         * For the plugin install screen, return the focus to the install button
     409                         * after exiting the credentials request modal.
     410                         */
     411                        if ( adminpage === 'plugin-install-php' ) {
     412                                wp.updates.$elToReturnFocusToFromCredentialsModal = $( event.target );
     413                        }
     414
    397415                        wp.updates.updateLock = true;
    398                         $( 'body' ).addClass( 'modal-open' );
    399                         $( '#request-filesystem-credentials-dialog' ).show();
     416
     417                        wp.updates.requestForCredentialsModalOpen();
    400418                }
    401419        };
    402420
     421        /**
     422         * Keydown handler for the request for credentials modal.
     423         *
     424         * Close the modal when the escape key is pressed.
     425         * Constrain keyboard navigation to inside the modal.
     426         *
     427         * @since 4.2.0
     428         */
     429        wp.updates.keydown = function( event ) {
     430                if ( 27 === event.keyCode ) {
     431                        wp.updates.requestForCredentialsModalClose();
     432                } else if ( 9 === event.keyCode ) {
     433                        // #upgrade button must always be the last focusable element in the dialog.
     434                        if ( event.target.id === 'upgrade' && ! event.shiftKey ) {
     435                                $( '#hostname' ).focus();
     436                                event.preventDefault();
     437                        } else if ( event.target.id === 'hostname' && event.shiftKey ) {
     438                                $( '#upgrade' ).focus();
     439                                event.preventDefault();
     440                        }
     441                }
     442        };
     443
     444        /**
     445         * Open the request for credentials modal.
     446         *
     447         * @since 4.2.0
     448         */
     449        wp.updates.requestForCredentialsModalOpen = function() {
     450                var $modal = $( '#request-filesystem-credentials-dialog' );
     451                $( 'body' ).addClass( 'modal-open' );
     452                $modal.show();
     453
     454                $modal.find( '#hostname' ).focus();
     455                $modal.keydown( wp.updates.keydown );
     456        };
     457
     458        /**
     459         * Close the request for credentials modal.
     460         *
     461         * @since 4.2.0
     462         */
     463        wp.updates.requestForCredentialsModalClose = function() {
     464                $( '#request-filesystem-credentials-dialog' ).hide();
     465                $( 'body' ).removeClass( 'modal-open' );
     466                wp.updates.$elToReturnFocusToFromCredentialsModal.focus();
     467        };
     468
    403469        $( document ).ready( function() {
    404470                /*
    405471                 * Check whether a user needs to submit filesystem credentials based on whether
    window.wp = window.wp || {}; 
    419485                        wp.updates.filesystemCredentials.ssh.publicKey = $('#public_key').val();
    420486                        wp.updates.filesystemCredentials.ssh.privateKey = $('#private_key').val();
    421487
    422                         $( '#request-filesystem-credentials-dialog' ).hide();
    423                         $( 'body' ).removeClass( 'modal-open' );
     488                        wp.updates.requestForCredentialsModalClose();
    424489
    425490                        // Unlock and invoke the queue.
    426491                        wp.updates.updateLock = false;
    window.wp = window.wp || {}; 
    429494                        return false;
    430495                });
    431496
     497                // Close the request credentials modal when
     498                $( '#request-filesystem-credentials-dialog [data-js-action="close"], .notification-dialog-background' ).on( 'click', function() {
     499                        wp.updates.requestForCredentialsModalClose();
     500                });
     501
    432502                // Click handler for plugin updates in List Table view.
    433503                $( '.plugin-update-tr .update-link' ).on( 'click', function( e ) {
    434504                        e.preventDefault();
    435505                        if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.updateLock ) {
    436                                 wp.updates.requestFilesystemCredentials();
     506                                wp.updates.requestFilesystemCredentials( e );
    437507                        }
    438                         var $row = $( e.target ).parents( '.plugin-update-tr' );
    439                         wp.updates.updatePlugin( $row.data( 'plugin' ), $row.data( 'slug' ) );
     508                        var updateRow = $( e.target ).parents( '.plugin-update-tr' );
     509                        // Return the user to the input box of the plugin's table row after closing the modal.
     510                        wp.updates.$elToReturnFocusToFromCredentialsModal = $( '#' + updateRow.data( 'slug' ) ).find( '.check-column input' );
     511                        wp.updates.updatePlugin( updateRow.data( 'plugin' ), updateRow.data( 'slug' ) );
    440512                } );
    441513
    442514                $( '#bulk-action-form' ).on( 'submit', function( e ) {
    window.wp = window.wp || {}; 
    466538                $( '.plugin-card .install-now' ).on( 'click', function( e ) {
    467539                        e.preventDefault();
    468540                        if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.updateLock ) {
    469                                 wp.updates.requestFilesystemCredentials();
     541                                wp.updates.requestFilesystemCredentials( e );
    470542                        }
    471543                        var $button = $( e.target );
    472544                        if ( $button.hasClass( 'button-disabled' ) ) {