Making WordPress.org

Changeset 6812


Ignore:
Timestamp:
03/01/2018 05:39:10 PM (7 years ago)
Author:
obenland
Message:

2FA: Replace jQuery handlers with React client.

This does not aspire to be the end all be all of React clients, but it's an improvement over the existing one.
Can probably use a good amount of refinement and optimization.

See #77.

Location:
sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-two-factor
Files:
16 added
1 deleted
1 edited

Legend:

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

    r6799 r6812  
    401401        }
    402402
    403         wp_enqueue_script( 'two-factor-edit', plugins_url( 'js/profile-edit.js' , __FILE__ ), [ 'jquery' ], 1, true );
    404         wp_localize_script( 'two-factor-edit', 'two_factor_edit', array(
    405             'ajaxurl' => admin_url( 'admin-ajax.php' ),
    406         ) );
    407 
    408         $key       = get_user_meta( $user->ID, Two_Factor_Totp::SECRET_META_KEY, true );
    409         $is_active = self::is_user_using_two_factor( $user->ID );
     403        $key = get_user_meta( $user->ID, Two_Factor_Totp::SECRET_META_KEY, true ) ?: Two_Factor_Totp::generate_key();
     404
     405        wp_enqueue_script( 'two-factor-client', plugins_url( 'js/client.js', __FILE__ ), [ 'wp-util' ], 1, true );
     406        wp_localize_script( 'two-factor-client', 'twoFactorClient', [
     407            'isActive'    => self::is_user_using_two_factor( $user->ID ),
     408            'qrCode'      => Two_Factor_Totp::get_google_qr_code( 'WordPress.org: ' . $user->user_login, $key, 'WordPress.org' ),
     409            'key'         => $key,
     410            'nonce'       => wp_create_nonce( 'user_two_factor_totp_options' ),
     411            'backupNonce' => wp_create_nonce( 'two-factor-backup-codes-generate-json-' . $user->ID ),
     412            'userId'      => $user->ID,
     413
     414            'twoFactorAuthentication'        => esc_html__( 'Two Factor Authentication', 'wporg' ),
     415            'twoFactor'                      => esc_html__( 'Two Factor', 'wporg' ),
     416            'disableTwoFactorAuthentication' => esc_html__( 'Disable Two Factor Authentication', 'wporg' ),
     417            'statusActive'                   => wp_kses_post( __( '<strong>Status:</strong> <span>Active</span>', 'wporg' ) ),
     418            'twoFactorDescription'           => esc_html__( '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' ),
     419            'generateNewBackupCodes'         => esc_html__( 'Generate New Backup Codes', 'wporg' ),
     420            'backupCodesDescription'         => esc_html__( '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' ),
     421            'askToPrintList'                 => esc_html__( 'We ask that you print this list of ten unique, one-time-use backup codes and keep the list in a safe place.', 'wporg' ),
     422            'backupCodesWarning'             => esc_html__( 'Without access to the app or a backup code, you will lose access to your account.', 'wporg' ),
     423            'printConfirmation'              => esc_html__( 'I have printed or saved these codes', 'wporg' ),
     424            'backupCodes'                    => esc_html__( 'Backup Codes', 'wporg' ),
     425            'copyCodes'                      => esc_html__( 'Copy Codes', 'wporg' ),
     426            'printCodes'                     => esc_html__( 'Print Codes', 'wporg' ),
     427            'downloadCodes'                  => esc_html__( 'Download Codes', 'wporg' ),
     428            'allFinished'                    => esc_html__( 'All Finished!', 'wporg' ),
     429            'scanThisQrCode'                 => esc_html__( 'Scan this QR code with your authentication app.', 'wporg' ),
     430            'enterThisTimeCode'              => esc_html__( 'Enter this time code into your authentication app.', 'wporg' ),
     431            'cantScanTheCode'                => esc_html__( 'Can&#8217;t scan the code?', 'wporg' ),
     432            'preferToScanTheCode'            => esc_html__( 'Prefer to scan the code?', 'wporg' ),
     433            'thenEnterTheAuthenticationCode' => esc_html__( 'Then enter the authentication code provided by the app:', 'wporg' ),
     434            'authenticationCode'             => esc_html__( 'Authentication Code:', 'wporg' ),
     435            'placeholder'                    => esc_attr__( 'e.g. 123456', 'wporg' ),
     436            /* translators: 1: URL to Authy; 2: URL to Google Authenticator */
     437            'notSureWhatThisScreenMeans'     => sprintf( 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() ) ),
     438            'cancel'                         => esc_html__( 'Cancel', 'wporg' ),
     439            'enable'                         => esc_html__( 'Enable', 'wporg' ),
     440            'getStarted'                     => esc_html__( 'Get Started', 'wporg' ),
     441            'twoFactorLongDescription'       => esc_html__( 'Two-Step Authentication adds an extra layer of security to your account. Once enabled, logging in to WordPress.org will require you to enter a unique passcode generated by an app on your mobile device, in addition to your username and password.', 'wporg' ),
     442        ] );
    410443        ?>
    411444
    412445        <h2 class="entry-title"><?php esc_html_e( 'Two Factor Authentication', 'wporg' ); ?></h2>
    413         <fieldset id="two-factor-active" class="bbp-form two-factor" <?php if ( ! $is_active ) { echo 'style="display:none;"'; } ?>>
    414             <legend><?php esc_html_e( 'Two Factor Authentication', 'wporg' ); ?></legend>
    415             <div>
    416                 <label for=""><?php esc_html_e( 'Two Factor', 'worg' ); ?></label>
    417                 <fieldset class="bbp-form">
    418                     <div>
    419                         <button type="button" class="button button-secondary two-factor-disable alignright"><?php esc_html_e( 'Disable Two Factor Authentication', 'wporg' ); ?></button>
    420                         <p class="status"><?php echo wp_kses_post( __( '<strong>Status:</strong> <span>Active</span>', 'wporg' ) ); ?></p>
    421                     </div>
    422                     <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>
    423                 </fieldset>
    424             </div>
    425 
    426             <div>
    427                 <label for=""><?php esc_html_e( 'Backup Codes', 'worg' ); ?></label>
    428                 <fieldset class="bbp-form">
    429                     <?php wp_nonce_field( 'two-factor-backup-codes-generate-json-' . $user->ID, '_nonce-backup-codes' ); ?>
    430                     <div id="two-factor-backup-codes-button">
    431                         <div><button type="button" id="generate-backup-codes" class="button button-secondary"><?php esc_html_e( 'Generate New Backup Codes', 'wporg' ); ?></button></div>
    432                         <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>
    433                     </div>
    434                     <div class="two-factor-backup-codes-wrapper" style="display:none;">
    435                         <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>
    436                         <ol id="two-factor-backup-codes-list"></ol>
    437                         <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>
    438                         <div>
    439                             <input type="checkbox" id="print-agreement" name="print-agreement" />
    440                             <label for="print-agreement"><?php esc_html_e( 'I have printed or saved these codes', 'wporg' ); ?></label>
    441                             <span class="button-group">
    442                                 <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>
    443                                 <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>
    444                                 <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>
    445                             </span>
    446                             <button type="button" class="button two-factor-submit button-secondary" disabled="disabled"><?php esc_html_e( 'All Finished!', 'wporg' ); ?></button>
    447                         </div>
    448                     </div>
    449                 </fieldset>
    450             </div>
    451         </fieldset>
    452         <?php
    453         if ( empty( $key ) ) {
    454             $key = Two_Factor_Totp::generate_key();
    455         }
    456 
    457         wp_nonce_field( 'user_two_factor_totp_options', '_nonce_user_two_factor_totp_options' );
    458         ?>
    459         <fieldset id="two-factor-start" class="bbp-form two-factor" <?php if ( $is_active ) { echo 'style="display:none;"'; } ?>>
    460             <legend><?php esc_html_e( 'Two Factor Authentication', 'wporg' ); ?></legend>
    461             <div><?php esc_html_e( 'Two-Step Authentication adds an extra layer of security to your account. Once enabled, logging in to WordPress.org will require you to enter a unique passcode generated by an app on your mobile device, in addition to your username and password.', 'wporg' ); ?></div>
    462             <div><button type="button" id="two-factor-start-toggle" class="button button-primary"><?php esc_html_e( 'Get Started', 'wporg' ); ?></button></div>
    463         </fieldset>
    464 
    465         <fieldset id="two-factor-qr-code" class="bbp-form two-factor" style="display: none;">
    466             <legend><?php esc_html_e( 'Two Factor Authentication', 'wporg' ); ?></legend>
    467             <div>
    468                 <p><?php esc_html_e( 'Scan this QR code with your authentication app.', 'wporg' ); ?></p>
    469                 <p><button type="button" class="button-link"><?php esc_html_e( 'Can&#8217;t scan the code?', 'wporg' ); ?></button></p>
    470                 <img src="<?php echo esc_url( Two_Factor_Totp::get_google_qr_code( 'WordPress.org: ' . $user->user_login, $key, 'WordPress.org' ) ); ?>" id="two-factor-totp-qrcode" />
    471                 <p><?php esc_html_e( 'Then enter the authentication code provided by the app:', 'wporg' ); ?></p>
    472                 <p>
    473                     <label class="screen-reader-text" for="two-factor-totp-authcode"><?php esc_html_e( 'Authentication Code:', 'wporg' ); ?></label>
    474                     <input type="hidden" name="two-factor-totp-key" value="<?php echo esc_attr( $key ) ?>" />
    475                     <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' ); ?>" />
    476                 </p>
    477                 <small class="description">
    478                     <?php
    479                     /* translators: 1: URL to Authy; 2: URL to Google Authenticator */
    480                     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() ) );
    481                     ?>
    482                 </small>
    483                 <button type="button" class="button button-secondary two-factor-cancel alignleft"><?php esc_html_e( 'Cancel', 'wporg' ); ?></button>
    484                 <button type="button" class="button button-primary two-factor-submit alignright"><?php esc_html_e( 'Enable', 'wporg' ); ?></button>
    485             </div>
    486         </fieldset>
    487 
    488         <fieldset id="two-factor-key-code" class="bbp-form two-factor" style="display: none;">
    489             <legend><?php esc_html_e( 'Two Factor Authentication', 'wporg' ); ?></legend>
    490             <div>
    491                 <p><?php esc_html_e( 'Enter this time code into your authentication app.', 'wporg' ); ?></p>
    492                 <p><button type="button" class="button-link"><?php esc_html_e( 'Prefer to scan the code?', 'wporg' ); ?></button></p>
    493                 <p class="key"><strong><?php echo esc_html( $key ); ?></strong></p>
    494                 <p><?php esc_html_e( 'Then enter the authentication code provided by the app:', 'wporg' ); ?></p>
    495                 <p>
    496                     <label class="screen-reader-text" for="two-factor-totp-authcode"><?php esc_html_e( 'Authentication Code:', 'wporg' ); ?></label>
    497                     <input type="hidden" name="two-factor-totp-key" value="<?php echo esc_attr( $key ) ?>" />
    498                     <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' ); ?>" />
    499                 </p>
    500                 <small class="description">
    501                     <?php
    502                     /* translators: 1: URL to Authy; 2: URL to Google Authenticator */
    503                     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() ) );
    504                     ?>
    505                 </small>
    506                 <button type="button" class="button button-secondary two-factor-cancel alignleft"><?php esc_html_e( 'Cancel', 'wporg' ); ?></button>
    507                 <button type="button" class="button button-primary two-factor-submit alignright"><?php esc_html_e( 'Enable', 'wporg' ); ?></button>
    508             </div>
    509         </fieldset>
     446        <div id="two-factor-client"></div>
    510447
    511448        <style>
Note: See TracChangeset for help on using the changeset viewer.