Ensure fields autoselect. closes #2

Author: valendesigns

wp-admin/css/key-pair.css

@@ -28,14 +28,14 @@
     margin-top: 1px;
 }
 
-.new-key-pair-token kbd {
+.input-select {
     display: block;
-    margin-bottom: 1.5em;
-    overflow-wrap: break-word;
-    padding: 1em;
+	font-family: monospace;
+    margin: .6em 0 1.2em;
+	width: 100%;
 }
 
 input[name=new_token_api_secret] {
     width: 100%;
     margin-bottom: 1.2em;
-}
+}

wp-admin/js/key-pair.js

@@ -155,6 +155,10 @@
 		}
 	} );
 
+	$( document ).on( 'click', '.input-select', function() {
+		$( this ).select();
+	} );
+
 	$( document ).on( 'click', '.key-pair-modal-dismiss', function( e ) {
 		e.preventDefault();
 

wp-includes/rest-api/auth/class-wp-rest-key-pair.php

@@ -677,7 +677,7 @@ public function template_new_key_pair() {
 							printf(
 								/* translators: %s: key-pair api_secret */
 								esc_html_x( 'Your new API secret password is: %s', 'API key-pair', 'jwt-auth' ),
-								'<kbd>{{ data.api_secret }}</kbd>'
+								'<input type="text" value="{{ data.api_secret }}" class="input-select" />'
 							);
 							?>
 						</div>
@@ -734,14 +734,14 @@ public function template_new_token_key_pair() {
 							printf(
 								/* translators: %s: JSON Web Token */
 								esc_html_x( 'Your new access token is: %s', 'Access Token', 'jwt-auth' ),
-								'<kbd>{{ data.access_token }}</kbd>'
+								'<input type="text" value="{{ data.access_token }}" class="input-select" />'
 							);
 							?>
 							<?php
 							printf(
 								/* translators: %s: JSON Web Token */
 								esc_html_x( 'Your new refresh token is: %s', 'Refresh Token', 'jwt-auth' ),
-								'<kbd>{{ data.refresh_token }}</kbd>'
+								'<input type="text" value="{{ data.refresh_token }}" class="input-select" />'
 							);
 							?>
 							<p><?php esc_attr_e( 'Be sure to save these JSON Web Tokens in a safe location, you will not be able to retrieve them ever again. Once you click dismiss they\'re gone forever.', 'jwt-auth' ); ?></p>