Changeset 6740

Timestamp:

02/25/2018 11:27:40 AM (7 years ago)

Author:

obenland

Message:

2FA: First pass at adding backup codes.

See #77.

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-two-factor

Files:

• js/profile-edit.js (modified) (1 diff)
• wporg-two-factor.php (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-two-factor/js/profile-edit.js

@@ -81 +81 @@
             );
         } );
+
+    $( '#generate-backup-codes' ).on( 'click', function() {
+        $.post(
+            ajaxurl,
+            {
+                action: 'two_factor_backup_codes_generate',
+                user_id: $( '#user_id' ).val(),
+                nonce: $( '#_nonce-backup-codes' ).val(),
+            },
+            function( response ) {
+                if ( response.success ) {
+                    var $codesList = $( '.two-factor-backup-codes-unused-codes' );
+
+                    $( '#generate-backup-codes' ).remove();
+                    $( '.two-factor-backup-codes-wrapper' ).show();
+                    $codesList.html( '' );
+
+                    // Append the codes.
+                    for ( i = 0; i < response.data.codes.length; i++ ) {
+                        $codesList.append( '<li>' + response.data.codes[ i ] + '</li>' );
+                    }
+
+                    // Update counter.
+                    $( '.two-factor-backup-codes-count' ).html( response.data.i18n.count );
+
+                    // Build the download link
+                    var txt_data = 'data:application/text;charset=utf-8,' + '\n';
+                    txt_data += response.data.i18n.title.replace( /%s/g, document.domain ) + '\n\n';
+
+                    for ( i = 0; i < response.data.codes.length; i++ ) {
+                        txt_data += i + 1 + '. ' + response.data.codes[ i ] + '\n';
+                    }
+
+                    $( '#two-factor-backup-codes-download-link' ).attr( 'href', encodeURI( txt_data ) );
+                }
+            }
+        );
+    } );
+
+    $( '#print-agreement' ).on( 'change', function() {
+        $( '.two-factor-backup-codes-wrapper button[type="submit"]' ).prop( 'disabled', ! $( this ).prop( 'checked' ) );
+    } );
+
 } );

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-two-factor/wporg-two-factor.php

@@ -56 +56 @@
 
         <h2 class="entry-title"><?php esc_html_e( 'Two Factor Authentication', 'wporg' ); ?></h2>
-        <?php Two_Factor_Totp::admin_notices(); ?>
         <fieldset id="two-factor-active" class="bbp-form two-factor" <?php if ( ! $is_active ) { echo 'style="display:none;"'; } ?>>
             <legend><?php esc_html_e( 'Two Factor Authentication', 'wporg' ); ?></legend>
@@ -63 +62 @@
             <div><?php esc_html_e( 'Switching to a new device? Follow these steps to avoid losing access to your account.', 'wporg' ); ?></div>
             <div><button type="cancel" class="button button-secondary alignright"><?php esc_html_e( 'Disable Two Factor Authentication', 'wporg' ); ?></button></div>
+
+            <div>
+                <label for=""><?php esc_html_e( 'Backup Codes', 'worg' ); ?></label>
+                <fieldset class="bbp-form">
+                    <?php wp_nonce_field( 'two-factor-backup-codes-generate-json-' . $user->ID, '_nonce-backup-codes' ); ?>
+                    <button type="button" id="generate-backup-codes" class="button button-secondary"><?php esc_html_e( 'Generate New Backup Codes', 'wporg' ); ?></button>
+                    <div class="two-factor-backup-codes-wrapper" style="display:none;">
+                        <p class="description"><?php esc_html_e( 'We ask that you print this list of ten unique, one-time-use backup codes and keep the list in a safe place.', 'wporg' ); ?></p>
+                        <ol class="two-factor-backup-codes-unused-codes"></ol>
+                        <div><small><?php esc_html_e( 'Without access to the app or a backup code, you will lose access to your account.', 'wporg' ); ?></small></div>
+                        <div>
+                            <input type="checkbox" id="print-agreement" name="print-agreement" />
+                            <label for="print-agreement"><?php esc_html_e( 'I have printed or saved these codes', 'wporg' ); ?></label>
+                            <span class="button-group">
+                                <button type="button" class="button button-secondary dashicons-before dashicons-clipboard" id="two-factor-backup-codes-copy-link" title="<?php esc_attr_e( 'Copy Codes', 'wporg' ); ?>"><span class="screen-reader-text"><?php esc_html_e( 'Copy Codes', 'wporg' ); ?></span></button>
+                                <button type="button" class="button button-secondary dashicons-before dashicons-index-card" id="two-factor-backup-codes-print-link" title="<?php esc_attr_e( 'Print Codes', 'wporg' ); ?>"><span class="screen-reader-text"><?php esc_html_e( 'Print Codes', 'wporg' ); ?></span></button>
+                                <a href="" class="button button-secondary dashicons-before dashicons-download" id="two-factor-backup-codes-download-link" title="<?php esc_attr_e( 'Download Codes', 'wporg' ); ?>" download="two-factor-backup-codes.txt"><span class="screen-reader-text"><?php esc_html_e( 'Download Codes', 'wporg' ); ?></span></a>
+                            </span>
+                            <button type="submit" class="button button-secondary" disabled="disabled"><?php esc_html_e( 'All Finished!', 'wporg' ); ?></button>
+                        </div>
+                    </div>
+                </fieldset>
+            </div>
         </fieldset>
         <?php
@@ -112 +134 @@
 
         <style>
-            #bbpress-forums fieldset.two-factor:not(#two-factor-start) > div {
-                margin-left: 20%;
-                width: 60% !important;
-            }
+            #bbpress-forums #bbp-your-profile input[type="checkbox"] {
+                width: auto;
+            }
+            #bbpress-forums #bbp-your-profile .two-factor [for="print-agreement"] {
+                float: none;
+                width: auto;
+            }
+
+            .dashicons-clipboard:before {
+                transform: rotate( -45deg );
+            }
+            .dashicons-index-card:before {
+                vertical-align: initial;
+            }
+            .dashicons-download:before {
+                vertical-align: text-top;
+            }
+
+            .two-factor-backup-codes-wrapper [type="submit"] {
+                vertical-align: middle;
+            }
+
             #bbpress-forums .two-factor button.button-link {
                 color: #4ca6cf;