New Style for Backup Codes (#804)

* add new style for codes

* two column layout for codes

* fix lint

* add monospace font family

Author: masteradhoc

providers/class-two-factor-backup-codes.php

@@ -182,14 +182,36 @@ public function user_options( $user ) {
 			</p>
 		</div>
 		<div class="two-factor-backup-codes-wrapper" style="display:none;">
-			<ol class="two-factor-backup-codes-unused-codes"></ol>
+			<div class="two-factor-backup-codes-list-wrap">
+				<ol class="two-factor-backup-codes-unused-codes"></ol>
+			</div>
 			<p class="description"><?php esc_html_e( 'Write these down! Once you navigate away from this page, you will not be able to view these codes again.', 'two-factor' ); ?></p>
 			<p>
+				<a class="button button-two-factor-backup-codes-copy button-secondary hide-if-no-js" href="javascript:void(0);" id="two-factor-backup-codes-copy-link"><?php esc_html_e( 'Copy Codes', 'two-factor' ); ?></a>
 				<a class="button button-two-factor-backup-codes-download button-secondary hide-if-no-js" href="javascript:void(0);" id="two-factor-backup-codes-download-link" download="two-factor-backup-codes.txt"><?php esc_html_e( 'Download Codes', 'two-factor' ); ?></a>
 			</p>
 		</div>
 		<script>
 			( function( $ ) {
+				$( '.button-two-factor-backup-codes-copy' ).click( function() {
+					var csvCodes = $( '.two-factor-backup-codes-wrapper' ).data( 'codesCsv' );
+
+					if ( ! csvCodes ) {
+						return;
+					}
+
+					if ( navigator.clipboard && navigator.clipboard.writeText ) {
+						navigator.clipboard.writeText( csvCodes );
+						return;
+					}
+
+					var $temp = $( '<textarea>' ).val( csvCodes ).css( { position: 'absolute', left: '-9999px' } );
+					$( 'body' ).append( $temp );
+					$temp[0].select();
+					document.execCommand( 'copy' );
+					$temp.remove();
+				} );
+
 				$( '.button-two-factor-backup-codes-generate' ).click( function() {
 					wp.apiRequest( {
 						method: 'POST',
@@ -202,10 +224,12 @@ public function user_options( $user ) {
 
 						$( '.two-factor-backup-codes-wrapper' ).show();
 						$codesList.html( '' );
+						$codesList.css( { 'column-count': 2, 'column-gap': '80px', 'max-width': '420px' } );
+						$( '.two-factor-backup-codes-wrapper' ).data( 'codesCsv', response.codes.join( ',' ) );
 
 						// Append the codes.
 						for ( var i = 0; i < response.codes.length; i++ ) {
-							$codesList.append( '<li>' + response.codes[ i ] + '</li>' );
+							$codesList.append( '<li class="two-factor-backup-codes-token">' + response.codes[ i ] + '</li>' );
 						}
 
 						// Update counter.

user-edit.css

@@ -18,6 +18,27 @@
 	margin: 0 0.15rem;
 }
 
+.two-factor-backup-codes-wrapper > :not(:last-child) {
+	margin-bottom: 1em;
+}
+
+.two-factor-backup-codes-list-wrap {
+	background-color: #ddd;
+	display: inline-block;
+	margin-top: 24px;
+	padding: 20px;
+}
+
+.two-factor-backup-codes-list-wrap .two-factor-backup-codes-unused-codes {
+	margin: 0;
+	padding: revert;
+}
+
+.two-factor-backup-codes-list-wrap .two-factor-backup-codes-token {
+	letter-spacing: 0.3em;
+	font-family: monospace;
+}
+
 #two-factor-qr-code {
 	min-width: 205px;
 	min-height: 205px;