Skip to content

Commit

Permalink
Update two factor options layout (#623)
Browse files Browse the repository at this point in the history 
* Update and move two factor option heading out of table
Align two factor options with title

* Remove wrapping table, update css for existing table to use full width

* Duplicate the table header to the table footer, to match other wp-admin tables used on profiles and elsewhere.

* Use wp-admin classnames and inherit core CSS.

---------

Co-authored-by: Dion Hulse <dion@wordpress.org>
  • Loading branch information
@thrijith @dd32
thrijith and dd32 authored Sep 17, 2024
1 parent cfbfcd2 commit 71b4931
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 62 deletions.
83 changes: 41 additions & 42 deletions class-two-factor-core.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1405,7 +1405,7 @@ public static function _login_form_revalidate_2fa( $nonce = '', $provider = '',
) );

do_action( 'two_factor_user_revalidated', $user, $provider );

// Must be global because that's how login_header() uses it.
global $interim_login;
$interim_login = isset( $_REQUEST['interim-login'] ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited,WordPress.Security.NonceVerification.Recommended
Expand Down Expand Up @@ -1721,48 +1721,47 @@ public static function user_two_factor_options( $user ) {

wp_nonce_field( 'user_two_factor_options', '_nonce_user_two_factor_options', false );
?>
<h3><?php esc_html_e( 'Two-Factor Options', 'two-factor' ); ?></h3>
<input type="hidden" name="<?php echo esc_attr( self::ENABLED_PROVIDERS_USER_META_KEY ); ?>[]" value="<?php /* Dummy input so $_POST value is passed when no providers are enabled. */ ?>" />
<table class="form-table">
<tr>
<th>
<?php esc_html_e( 'Two-Factor Options', 'two-factor' ); ?>
</th>
<td>
<table class="two-factor-methods-table">
<thead>
<tr>
<th class="col-enabled" scope="col"><?php esc_html_e( 'Enabled', 'two-factor' ); ?></th>
<th class="col-primary" scope="col"><?php esc_html_e( 'Primary', 'two-factor' ); ?></th>
<th class="col-name" scope="col"><?php esc_html_e( 'Type', 'two-factor' ); ?></th>
</tr>
</thead>
<tbody>
<?php foreach ( self::get_providers() as $provider_key => $object ) : ?>
<tr>
<th scope="row"><input id="enabled-<?php echo esc_attr( $provider_key ); ?>" type="checkbox" name="<?php echo esc_attr( self::ENABLED_PROVIDERS_USER_META_KEY ); ?>[]" value="<?php echo esc_attr( $provider_key ); ?>" <?php checked( in_array( $provider_key, $enabled_providers, true ) ); ?> /></th>
<th scope="row"><input type="radio" name="<?php echo esc_attr( self::PROVIDER_USER_META_KEY ); ?>" value="<?php echo esc_attr( $provider_key ); ?>" <?php checked( $provider_key, $primary_provider_key ); ?> /></th>
<td>
<label class="two-factor-method-label" for="enabled-<?php echo esc_attr( $provider_key ); ?>"><?php echo esc_html( $object->get_label() ); ?></label>
<?php
/**
* Fires after user options are shown.
*
* Use the {@see 'two_factor_user_options_' . $provider_key } hook instead.
*
* @deprecated 0.7.0
*
* @param WP_User $user The user.
*/
do_action_deprecated( 'two-factor-user-options-' . $provider_key, array( $user ), '0.7.0', 'two_factor_user_options_' . $provider_key );
do_action( 'two_factor_user_options_' . $provider_key, $user );
?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</td>
</tr>
<table class="wp-list-table widefat fixed striped table-view-list two-factor-methods-table">
<thead>
<tr>
<th class="col-enabled" scope="col"><?php esc_html_e( 'Enabled', 'two-factor' ); ?></th>
<th class="col-primary" scope="col"><?php esc_html_e( 'Primary', 'two-factor' ); ?></th>
<th class="col-name" scope="col"><?php esc_html_e( 'Type', 'two-factor' ); ?></th>
</tr>
</thead>
<tbody>
<?php foreach ( self::get_providers() as $provider_key => $object ) : ?>
<tr>
<th scope="row"><input id="enabled-<?php echo esc_attr( $provider_key ); ?>" type="checkbox" name="<?php echo esc_attr( self::ENABLED_PROVIDERS_USER_META_KEY ); ?>[]" value="<?php echo esc_attr( $provider_key ); ?>" <?php checked( in_array( $provider_key, $enabled_providers, true ) ); ?> /></th>
<th scope="row"><input type="radio" name="<?php echo esc_attr( self::PROVIDER_USER_META_KEY ); ?>" value="<?php echo esc_attr( $provider_key ); ?>" <?php checked( $provider_key, $primary_provider_key ); ?> /></th>
<td>
<label class="two-factor-method-label" for="enabled-<?php echo esc_attr( $provider_key ); ?>"><?php echo esc_html( $object->get_label() ); ?></label>
<?php
/**
* Fires after user options are shown.
*
* Use the {@see 'two_factor_user_options_' . $provider_key } hook instead.
*
* @deprecated 0.7.0
*
* @param WP_User $user The user.
*/
do_action_deprecated( 'two-factor-user-options-' . $provider_key, array( $user ), '0.7.0', 'two_factor_user_options_' . $provider_key );
do_action( 'two_factor_user_options_' . $provider_key, $user );
?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot>
<tr>
<th class="col-enabled" scope="col"><?php esc_html_e( 'Enabled', 'two-factor' ); ?></th>
<th class="col-primary" scope="col"><?php esc_html_e( 'Primary', 'two-factor' ); ?></th>
<th class="col-name" scope="col"><?php esc_html_e( 'Type', 'two-factor' ); ?></th>
</tr>
</tfoot>
</table>
</fieldset>
<?php
Expand Down
20 changes: 0 additions & 20 deletions user-edit.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,3 @@

.two-factor-methods-table {
background-color: #fff;
border: 1px solid #e5e5e5;
border-spacing: 0;
}

.two-factor-methods-table thead,
.two-factor-methods-table tfoot {
background: #fff;
}

.two-factor-methods-table thead th {
padding: 0.5em;
}

.two-factor-methods-table .col-primary,
.two-factor-methods-table .col-enabled {
width: 5%;
Expand All @@ -32,10 +16,6 @@
vertical-align: top;
}

.two-factor-methods-table tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}

.two-factor-methods-table .two-factor-method-label {
display: block;
font-weight: 700;
Expand Down

0 comments on commit 71b4931

Please sign in to comment.