WordPress/wp-admin/js/application-passwords.js
TimothyBlynJacobs f6d39d1c51 App Passwords: Improve accessibility.
- Make form inputs stacked instead of inline.
- Provide a visible label for the app name.
- Add screen reader text to dismiss button.
- Make "Revoke" button label more descriptive.
- Use aria-disabled instead of disabled to avoid focus loss.
- Display password in a readonly input to assist copy and paste.
- Remove large sections of italic text.
- Use `.form-wrap` and `.form-field` to give consistent form styling.
- Improve labeling and placeholder text.

Props alexstine, georgestephanis, afercia, TimothyBlynJacobs.
Fixes #51580.

Built from https://develop.svn.wordpress.org/trunk@49294


git-svn-id: http://core.svn.wordpress.org/trunk@49056 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-24 03:34:06 +00:00

200 lines
5.5 KiB
JavaScript

/**
* @output wp-admin/js/application-passwords.js
*/
( function( $ ) {
var $appPassSection = $( '#application-passwords-section' ),
$newAppPassForm = $appPassSection.find( '.create-application-password' ),
$newAppPassField = $newAppPassForm.find( '.input' ),
$newAppPassButton = $newAppPassForm.find( '.button' ),
$appPassTwrapper = $appPassSection.find( '.application-passwords-list-table-wrapper' ),
$appPassTbody = $appPassSection.find( 'tbody' ),
$appPassTrNoItems = $appPassTbody.find( '.no-items' ),
$removeAllBtn = $( '#revoke-all-application-passwords' ),
tmplNewAppPass = wp.template( 'new-application-password' ),
tmplAppPassRow = wp.template( 'application-password-row' ),
userId = $( '#user_id' ).val();
$newAppPassButton.click( function( e ) {
e.preventDefault();
if ( $newAppPassButton.prop( 'aria-disabled' ) ) {
return;
}
var name = $newAppPassField.val();
if ( 0 === name.length ) {
$newAppPassField.focus();
return;
}
clearErrors();
$newAppPassButton.prop( 'aria-disabled', true ).addClass( 'disabled' );
var request = {
name: name
};
/**
* Filters the request data used to create a new Application Password.
*
* @since 5.6.0
*
* @param {Object} request The request data.
* @param {number} userId The id of the user the password is added for.
*/
request = wp.hooks.applyFilters( 'wp_application_passwords_new_password_request', request, userId );
wp.apiRequest( {
path: '/wp/v2/users/' + userId + '/application-passwords',
method: 'POST',
data: request
} ).always( function() {
$newAppPassButton.removeProp( 'aria-disabled' ).removeClass( 'disabled' );
} ).done( function( response ) {
$newAppPassField.val( '' );
$newAppPassButton.prop( 'disabled', false );
$newAppPassForm.after( tmplNewAppPass( {
name: name,
password: response.password
} ) );
$( '.new-application-password-notice' ).focus();
$appPassTbody.prepend( tmplAppPassRow( response ) );
$appPassTwrapper.show();
$appPassTrNoItems.remove();
/**
* Fires after an application password has been successfully created.
*
* @since 5.6.0
*
* @param {Object} response The response data from the REST API.
* @param {Object} request The request data used to create the password.
*/
wp.hooks.doAction( 'wp_application_passwords_created_password', response, request );
} ).fail( handleErrorResponse );
} );
$appPassTbody.on( 'click', '.delete', function( e ) {
e.preventDefault();
if ( ! window.confirm( wp.i18n.__( 'Are you sure you want to revoke this password? This action cannot be undone.' ) ) ) {
return;
}
var $submitButton = $( this ),
$tr = $submitButton.closest( 'tr' ),
uuid = $tr.data( 'uuid' );
clearErrors();
$submitButton.prop( 'disabled', true );
wp.apiRequest( {
path: '/wp/v2/users/' + userId + '/application-passwords/' + uuid,
method: 'DELETE'
} ).always( function() {
$submitButton.prop( 'disabled', false );
} ).done( function( response ) {
if ( response.deleted ) {
if ( 0 === $tr.siblings().length ) {
$appPassTwrapper.hide();
}
$tr.remove();
wp.a11y.speak( wp.i18n.__( 'Application password revoked.' ) );
}
} ).fail( handleErrorResponse );
} );
$removeAllBtn.on( 'click', function( e ) {
e.preventDefault();
if ( ! window.confirm( wp.i18n.__( 'Are you sure you want to revoke all passwords? This action cannot be undone.' ) ) ) {
return;
}
var $submitButton = $( this );
clearErrors();
$submitButton.prop( 'disabled', true );
wp.apiRequest( {
path: '/wp/v2/users/' + userId + '/application-passwords',
method: 'DELETE'
} ).always( function() {
$submitButton.prop( 'disabled', false );
} ).done( function( response ) {
if ( response.deleted ) {
$appPassTbody.children().remove();
$appPassSection.children( '.new-application-password' ).remove();
$appPassTwrapper.hide();
wp.a11y.speak( wp.i18n.__( 'All application passwords revoked.' ) );
}
} ).fail( handleErrorResponse );
} );
$( document ).on( 'click', '.new-application-password-notice .notice-dismiss', function( e ) {
e.preventDefault();
var $el = $( this ).parent();
$el.fadeTo( 100, 0, function () {
$el.slideUp( 100, function () {
$el.remove();
} );
} );
} );
// If there are no items, don't display the table yet. If there are, show it.
if ( 0 === $appPassTbody.children( 'tr' ).not( $appPassTrNoItems ).length ) {
$appPassTwrapper.hide();
}
/**
* Handles an error response from the REST API.
*
* @since 5.6.0
*
* @param {jqXHR} xhr The XHR object from the ajax call.
* @param {string} textStatus The string categorizing the ajax request's status.
* @param {string} errorThrown The HTTP status error text.
*/
function handleErrorResponse( xhr, textStatus, errorThrown ) {
var errorMessage = errorThrown;
if ( xhr.responseJSON && xhr.responseJSON.message ) {
errorMessage = xhr.responseJSON.message;
}
addError( errorMessage );
}
/**
* Displays an error message in the Application Passwords section.
*
* @since 5.6.0
*
* @param {string} message The error message to display.
*/
function addError( message ) {
var $notice = $( '<div></div>' )
.attr( 'role', 'alert' )
.addClass( 'notice notice-error' )
.append( $( '<p></p>' ).text( message ) );
$newAppPassForm.after( $notice );
}
/**
* Clears error messages from the Application Passwords section.
*
* @since 5.6.0
*/
function clearErrors() {
$( '.notice', $appPassSection ).remove();
}
}( jQuery ) );