WordPress.org
Get WordPress

Making WordPress.org

Changeset 6747


Ignore:
Timestamp:
02/26/2018 01:08:02 AM (7 years ago)
Author:
obenland
Message:

2FA: Second pass at backup codes

Now copies/prints/downloads codes.
Also added links to authentication apps.

See #77.

Location:
sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-two-factor
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r6740 r6747  
    1818                    );
    1919                } else {
    20                     $( '#two-factor-active' ).find( 'div:first-of-type' ).prepend(
     20                    $( '#two-factor-active' ).find( '> div:first-of-type' ).prepend(
    2121                        $( '<div class="bbp-template-notice error" />' ).text( response.data )
    2222                    );
    … …  
    9292            function( response ) {
    9393                if ( response.success ) {
    94                     var $codesList = $( '.two-factor-backup-codes-unused-codes' );
     94                    var $codesList = $( '#two-factor-backup-codes-list' ),
     95                        txt_data = 'data:application/text;charset=utf-8,' + '\n';
    9596
    96                     $( '#generate-backup-codes' ).remove();
     97                    $( '#two-factor-backup-codes-button' ).hide();
    9798                    $( '.two-factor-backup-codes-wrapper' ).show();
    9899                    $codesList.html( '' );
    … …  
    103104                    }
    104105
    105                     // Update counter.
    106                     $( '.two-factor-backup-codes-count' ).html( response.data.i18n.count );
    107 
    108106                    // Build the download link
    109                     var txt_data = 'data:application/text;charset=utf-8,' + '\n';
    110107                    txt_data += response.data.i18n.title.replace( /%s/g, document.domain ) + '\n\n';
    111108
    … …  
    114111                    }
    115112
    116                     $( '#two-factor-backup-codes-download-link' ).attr( 'href', encodeURI( txt_data ) );
     113                    $( '#two-factor-backup-codes-download' ).attr( 'href', encodeURI( txt_data ) );
    117114                }
    118115            }
    … …  
    120117    } );
    121118
    122     $( '#print-agreement' ).on( 'change', function() {
    123         $( '.two-factor-backup-codes-wrapper button[type="submit"]' ).prop( 'disabled', ! $( this ).prop( 'checked' ) );
     119    var $printAgreement   = $( '#print-agreement' ),
     120        $backupDoneButton = $( '.two-factor-backup-codes-wrapper button[type="submit"]' );
     121
     122    $printAgreement.on( 'change', function() {
     123        $backupDoneButton.prop( 'disabled', ! $printAgreement.prop( 'checked' ) );
    124124    } );
    125125
     126    $backupDoneButton.on( 'click', function( event ) {
     127        event.preventDefault();
     128
     129        $( '.two-factor-backup-codes-wrapper' ).hide();
     130        $( '#two-factor-backup-codes-button' ).show();
     131        $printAgreement.prop( 'checked', false );
     132        $backupDoneButton.prop( 'disabled', true );
     133    } );
     134
     135    $( '#two-factor-backup-codes-copy' ).on( 'click', function() {
     136        var $temp = $( '<textarea>' ),
     137            list = '';
     138
     139        $( 'body' ).append( $temp );
     140        $( '#two-factor-backup-codes-list' ).children().each( function( index, node ) {
     141            list += node.innerText + "\n";
     142        } );
     143
     144        $temp.val( list ).select();
     145        document.execCommand( 'copy' );
     146        $temp.remove();
     147    } );
     148
     149    $( '#two-factor-backup-codes-print' ).on( 'click', function() {
     150        var printer = window.open('', '_blank' );
     151        printer.document.writeln( '<ol>' + $( '#two-factor-backup-codes-list' ).html() + '</ol>' );
     152        printer.document.close();
     153        printer.focus();
     154        printer.print();
     155        printer.close();
     156    } );
    126157} );

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

    r6740 r6747  
    5858        <fieldset id="two-factor-active" class="bbp-form two-factor" <?php if ( ! $is_active ) { echo 'style="display:none;"'; } ?>>
    5959            <legend><?php esc_html_e( 'Two Factor Authentication', 'wporg' ); ?></legend>
    60             <div><?php echo wp_kses_post( __( '<strong>Status:</strong> Two Factor Authentication is currently <span>ACTIVE</span>.', 'wporg' ) ); ?></div>
    61             <div><?php esc_html_e( 'While enabled, logging in to WordPress.org requires you to enter a unique passcode, generated by an app on your mobile device, in addition to your username and password.', 'wporg' ); ?></div>
    62             <div><?php esc_html_e( 'Switching to a new device? Follow these steps to avoid losing access to your account.', 'wporg' ); ?></div>
    63             <div><button type="cancel" class="button button-secondary alignright"><?php esc_html_e( 'Disable Two Factor Authentication', 'wporg' ); ?></button></div>
     60            <div>
     61                <label for=""><?php esc_html_e( 'Two Factor', 'worg' ); ?></label>
     62                <fieldset class="bbp-form">
     63                    <div>
     64                        <button type="cancel" class="button button-secondary alignright"><?php esc_html_e( 'Disable Two Factor Authentication', 'wporg' ); ?></button>
     65                        <p class="status"><?php echo wp_kses_post( __( '<strong>Status:</strong> <span>Active</span>', 'wporg' ) ); ?></p>
     66                    </div>
     67                    <p><?php esc_html_e( 'While enabled, logging in to WordPress.org requires you to enter a unique passcode, generated by an app on your mobile device, in addition to your username and password.', 'wporg' ); ?></p>
     68                </fieldset>
     69            </div>
    6470
    6571            <div>
    … …  
    6773                <fieldset class="bbp-form">
    6874                    <?php wp_nonce_field( 'two-factor-backup-codes-generate-json-' . $user->ID, '_nonce-backup-codes' ); ?>
    69                     <button type="button" id="generate-backup-codes" class="button button-secondary"><?php esc_html_e( 'Generate New Backup Codes', 'wporg' ); ?></button>
     75                    <div id="two-factor-backup-codes-button">
     76                        <div><button type="button" id="generate-backup-codes" class="button button-secondary"><?php esc_html_e( 'Generate New Backup Codes', 'wporg' ); ?></button></div>
     77                        <p><?php esc_html_e( 'Backup codes let you access your account if your phone is lost, stolen, or if you run it through the washing machine and the bag of rice trick doesn&#8217;t work.', 'worg' ); ?></p>
     78                    </div>
    7079                    <div class="two-factor-backup-codes-wrapper" style="display:none;">
    7180                        <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>
    72                         <ol class="two-factor-backup-codes-unused-codes"></ol>
     81                        <ol id="two-factor-backup-codes-list"></ol>
    7382                        <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>
    7483                        <div>
    … …  
    7685                            <label for="print-agreement"><?php esc_html_e( 'I have printed or saved these codes', 'wporg' ); ?></label>
    7786                            <span class="button-group">
    78                                 <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>
    79                                 <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>
    80                                 <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>
     87                                <button type="button" class="button button-secondary dashicons-before dashicons-clipboard" id="two-factor-backup-codes-copy" title="<?php esc_attr_e( 'Copy Codes', 'wporg' ); ?>"><span class="screen-reader-text"><?php esc_html_e( 'Copy Codes', 'wporg' ); ?></span></button>
     88                                <button type="button" class="button button-secondary dashicons-before dashicons-index-card" id="two-factor-backup-codes-print" title="<?php esc_attr_e( 'Print Codes', 'wporg' ); ?>"><span class="screen-reader-text"><?php esc_html_e( 'Print Codes', 'wporg' ); ?></span></button>
     89                                <a href="" class="button button-secondary dashicons-before dashicons-download" id="two-factor-backup-codes-download" 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>
    8190                            </span>
    8291                            <button type="submit" class="button button-secondary" disabled="disabled"><?php esc_html_e( 'All Finished!', 'wporg' ); ?></button>
    … …  
    111120                    <input type="tel" name="two-factor-totp-authcode" class="input" value="" size="20" pattern="[0-9]*" placeholder="<?php esc_attr_e( 'e.g. 123456', 'wporg' ); ?>" />
    112121                </p>
     122                <div>
     123                    <small>
     124                        <?php
     125                        /* translators: 1: URL to Authy; 2: URL to Google Authenticator */
     126                        printf( wp_kses_post( __( 'Not sure what this screen means? You may need to download <a href="%1$s">Authy</a> or <a href="%2$s">Google Authenticator</a> for your phone.', 'wporg' ) ), esc_url( 'https://authy.com/download/' ), esc_url( 'https://support.google.com/accounts/answer/1066447?hl=' . get_locale() ) );
     127                        ?>
     128                    </small>
     129                </div>
    113130                <button type="cancel" class="button button-secondary alignleft"><?php esc_html_e( 'Cancel', 'wporg' ); ?></button>
    114131                <button type="submit" class="button button-primary alignright"><?php esc_html_e( 'Enable', 'wporg' ); ?></button>
    … …  
    128145                    <input type="tel" name="two-factor-totp-authcode" class="input" value="" size="20" pattern="[0-9]*" placeholder="<?php esc_attr_e( 'e.g. 123456', 'wporg' ); ?>" />
    129146                </p>
     147                <div>
     148                    <small>
     149                        <?php
     150                        /* translators: 1: URL to Authy; 2: URL to Google Authenticator */
     151                        printf( wp_kses_post( __( 'Not sure what this screen means? You may need to download <a href="%1$s">Authy</a> or <a href="%2$s">Google Authenticator</a> for your phone.', 'wporg' ) ), esc_url( 'https://authy.com/download/' ), esc_url( 'https://support.google.com/accounts/answer/1066447?hl=' . get_locale() ) );
     152                        ?>
     153                    </small>
     154                </div>
    130155                <button type="cancel" class="button button-secondary alignleft"><?php esc_html_e( 'Cancel', 'wporg' ); ?></button>
    131156                <button type="submit" class="button button-primary alignright"><?php esc_html_e( 'Enable', 'wporg' ); ?></button>
    … …  
    134159
    135160        <style>
     161            #bbpress-forums .two-factor .status {
     162                margin: 5px 0;
     163            }
     164            #bbpress-forums .two-factor .status span {
     165                color: #4ab866;
     166                text-transform: uppercase;
     167            }
    136168            #bbpress-forums #bbp-your-profile input[type="checkbox"] {
    137169                width: auto;
    … …  
    141173                width: auto;
    142174            }
    143 
     175            #bbpress-forums #two-factor-qr-code > div,
     176            #bbpress-forums #two-factor-key-code > div {
     177                margin-left: 20%;
     178                width: 60% !important;
     179            }
    144180            .dashicons-clipboard:before {
    145181                transform: rotate( -45deg );
    … …  
    180216
    181217        if ( empty( $_POST['authcode'] ) ) {
    182             wp_send_json_error( __( 'Please enter a valid authorization code.' ) );
     218            wp_send_json_error( __( 'Please enter a valid authorization code.', 'wporg' ) );
    183219        }
    184220
Note: See TracChangeset for help on using the changeset viewer.