From 86b5802d754d5cc3d383878ef919c79e6290d63d Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Thu, 19 May 2016 22:58:55 +0000
Subject: [PATCH] Refine the FTP credentials form interaction.

Properly toggle SSH2 Authentication Keys fieldset visibility.
JavaScript and CSS clean-up.

Props Mte90.
Fixes #34376.

git-svn-id: https://develop.svn.wordpress.org/trunk@37467 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/forms.css     |  6 +++-
 src/wp-admin/includes/file.php | 50 ++++++++++++++++------------------
 src/wp-admin/js/updates.js     | 11 +++++---
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index 5a3aa78508..3616af66ff 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -970,7 +970,7 @@ table.form-table td .updated p {
 }
 
 .request-filesystem-credentials-dialog .notification-dialog {
-	top: 15%;
+	top: 10%;
 	max-height: 85%;
 }
 
@@ -1028,6 +1028,10 @@ table.form-table td .updated p {
 	margin-right: 10px;
 }
 
+.request-filesystem-credentials-dialog #auth-keys-desc {
+	margin-bottom: 0;
+}
+
 #request-filesystem-credentials-dialog .button:not(:last-child) {
 	margin-right: 10px;
 }
diff --git a/src/wp-admin/includes/file.php b/src/wp-admin/includes/file.php
index 5abb4cfba5..9f47b013f3 100644
--- a/src/wp-admin/includes/file.php
+++ b/src/wp-admin/includes/file.php
@@ -1166,19 +1166,6 @@ function request_filesystem_credentials( $form_post, $type = '', $error = false,
 	$types = apply_filters( 'fs_ftp_connection_types', $types, $credentials, $type, $error, $context );
 
 ?>
-<script type="text/javascript">
-<!--
-jQuery(function($){
-	jQuery("#ssh").click(function () {
-		jQuery("#ssh_keys").show();
-	});
-	jQuery("#ftp, #ftps").click(function () {
-		jQuery("#ssh_keys").hide();
-	});
-	jQuery('#request-filesystem-credentials-form input[value=""]:first').focus();
-});
--->
-</script>
 <form action="<?php echo esc_url( $form_post ) ?>" method="post">
 <div id="request-filesystem-credentials-form" class="request-filesystem-credentials-form">
 <?php
@@ -1225,8 +1212,27 @@ echo "<$heading_tag id='request-filesystem-credentials-title'>" . __( 'Connectio
 		<em><?php if ( ! defined('FTP_PASS') ) _e( 'This password will not be stored on the server.' ); ?></em>
 	</label>
 </div>
-<?php if ( isset($types['ssh']) ) : ?>
 <fieldset>
+<legend><?php _e( 'Connection Type' ); ?></legend>
+<?php
+	$disabled = disabled( ( defined( 'FTP_SSL' ) && FTP_SSL ) || ( defined( 'FTP_SSH' ) && FTP_SSH ), true, false );
+	foreach ( $types as $name => $text ) : ?>
+	<label for="<?php echo esc_attr( $name ) ?>">
+		<input type="radio" name="connection_type" id="<?php echo esc_attr( $name ) ?>" value="<?php echo esc_attr( $name ) ?>"<?php checked( $name, $connection_type ); echo $disabled; ?> />
+		<?php echo $text; ?>
+	</label>
+<?php
+	endforeach;
+?>
+</fieldset>
+<?php
+if ( isset( $types['ssh'] ) ) {
+	$hidden_class = '';
+	if ( 'ssh' != $connection_type || empty( $connection_type ) ) {
+		$hidden_class = ' class="hidden"';
+	}
+?>
+<fieldset id="ssh-keys"<?php echo $hidden_class; ?>">
 <legend><?php _e( 'Authentication Keys' ); ?></legend>
 <label for="public_key">
 	<span class="field-title"><?php _e('Public Key:') ?></span>
@@ -1236,21 +1242,11 @@ echo "<$heading_tag id='request-filesystem-credentials-title'>" . __( 'Connectio
 	<span class="field-title"><?php _e('Private Key:') ?></span>
 	<input name="private_key" type="text" id="private_key" value="<?php echo esc_attr($private_key) ?>"<?php disabled( defined('FTP_PRIKEY') ); ?> />
 </label>
-</fieldset>
-<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>
-<?php endif; ?>
-<fieldset>
-<legend><?php _e( 'Connection Type' ); ?></legend>
-<?php
-	$disabled = disabled( (defined('FTP_SSL') && FTP_SSL) || (defined('FTP_SSH') && FTP_SSH), true, false );
-	foreach ( $types as $name => $text ) : ?>
-	<label for="<?php echo esc_attr($name) ?>">
-		<input type="radio" name="connection_type" id="<?php echo esc_attr($name) ?>" value="<?php echo esc_attr($name) ?>"<?php checked($name, $connection_type); echo $disabled; ?> />
-		<?php echo $text ?>
-	</label>
-	<?php endforeach; ?>
+<p 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.' ) ?></p>
 </fieldset>
 <?php
+}
+
 foreach ( (array) $extra_fields as $field ) {
 	if ( isset( $_POST[ $field ] ) )
 		echo '<input type="hidden" name="' . esc_attr( $field ) . '" value="' . esc_attr( wp_unslash( $_POST[ $field ] ) ) . '" />';
diff --git a/src/wp-admin/js/updates.js b/src/wp-admin/js/updates.js
index 35ae6c7d9b..0173b6ef2f 100644
--- a/src/wp-admin/js/updates.js
+++ b/src/wp-admin/js/updates.js
@@ -471,6 +471,9 @@ window.wp = window.wp || {};
 
 
 	$( document ).ready( function() {
+		// Set initial focus on the first empty form field.
+		$( '#request-filesystem-credentials-form input[value=""]:first' ).focus();
+
 		/*
 		 * Check whether a user needs to submit filesystem credentials based on whether
 		 * the form was output on the page server-side.
@@ -503,10 +506,10 @@ window.wp = window.wp || {};
 			wp.updates.requestForCredentialsModalCancel();
 		});
 
-		// Hide SSH fields when not selected
-		$( '#request-filesystem-credentials-dialog input[name="connection_type"]' ).on( 'change', function() {
-			$( this ).parents( 'form' ).find( '#private_key, #public_key' ).parents( 'label' ).toggle( ( 'ssh' == $( this ).val() ) );
-		}).change();
+		// Hide SSH fields when not selected.
+		$( '#request-filesystem-credentials-form input[name="connection_type"]' ).on( 'change', function() {
+			$( '#ssh-keys' ).toggleClass( 'hidden', ( 'ssh' !== $( this ).val() ) );
+		});
 
 		// Click handler for plugin updates in List Table view.
 		$( '.plugin-update-tr' ).on( 'click', '.update-link', function( e ) {