Making WordPress.org

Changeset 6747


Ignore:
Timestamp:
02/26/2018 01:08:02 AM (8 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.