wp/wp-admin/js/application-passwords.js
changeset 18 be944660c56a
child 21 48c4eec2b7e6
equal deleted inserted replaced
17:34716fd837a4 18:be944660c56a
       
     1 /**
       
     2  * @output wp-admin/js/application-passwords.js
       
     3  */
       
     4 
       
     5 ( function( $ ) {
       
     6 	var $appPassSection = $( '#application-passwords-section' ),
       
     7 		$newAppPassForm = $appPassSection.find( '.create-application-password' ),
       
     8 		$newAppPassField = $newAppPassForm.find( '.input' ),
       
     9 		$newAppPassButton = $newAppPassForm.find( '.button' ),
       
    10 		$appPassTwrapper = $appPassSection.find( '.application-passwords-list-table-wrapper' ),
       
    11 		$appPassTbody = $appPassSection.find( 'tbody' ),
       
    12 		$appPassTrNoItems = $appPassTbody.find( '.no-items' ),
       
    13 		$removeAllBtn = $( '#revoke-all-application-passwords' ),
       
    14 		tmplNewAppPass = wp.template( 'new-application-password' ),
       
    15 		tmplAppPassRow = wp.template( 'application-password-row' ),
       
    16 		userId = $( '#user_id' ).val();
       
    17 
       
    18 	$newAppPassButton.on( 'click', function( e ) {
       
    19 		e.preventDefault();
       
    20 
       
    21 		if ( $newAppPassButton.prop( 'aria-disabled' ) ) {
       
    22 			return;
       
    23 		}
       
    24 
       
    25 		var name = $newAppPassField.val();
       
    26 
       
    27 		if ( 0 === name.length ) {
       
    28 			$newAppPassField.trigger( 'focus' );
       
    29 			return;
       
    30 		}
       
    31 
       
    32 		clearNotices();
       
    33 		$newAppPassButton.prop( 'aria-disabled', true ).addClass( 'disabled' );
       
    34 
       
    35 		var request = {
       
    36 			name: name
       
    37 		};
       
    38 
       
    39 		/**
       
    40 		 * Filters the request data used to create a new Application Password.
       
    41 		 *
       
    42 		 * @since 5.6.0
       
    43 		 *
       
    44 		 * @param {Object} request The request data.
       
    45 		 * @param {number} userId  The id of the user the password is added for.
       
    46 		 */
       
    47 		request = wp.hooks.applyFilters( 'wp_application_passwords_new_password_request', request, userId );
       
    48 
       
    49 		wp.apiRequest( {
       
    50 			path: '/wp/v2/users/' + userId + '/application-passwords?_locale=user',
       
    51 			method: 'POST',
       
    52 			data: request
       
    53 		} ).always( function() {
       
    54 			$newAppPassButton.removeProp( 'aria-disabled' ).removeClass( 'disabled' );
       
    55 		} ).done( function( response ) {
       
    56 			$newAppPassField.val( '' );
       
    57 			$newAppPassButton.prop( 'disabled', false );
       
    58 
       
    59 			$newAppPassForm.after( tmplNewAppPass( {
       
    60 				name: response.name,
       
    61 				password: response.password
       
    62 			} ) );
       
    63 			$( '.new-application-password-notice' ).trigger( 'focus' );
       
    64 
       
    65 			$appPassTbody.prepend( tmplAppPassRow( response ) );
       
    66 
       
    67 			$appPassTwrapper.show();
       
    68 			$appPassTrNoItems.remove();
       
    69 
       
    70 			/**
       
    71 			 * Fires after an application password has been successfully created.
       
    72 			 *
       
    73 			 * @since 5.6.0
       
    74 			 *
       
    75 			 * @param {Object} response The response data from the REST API.
       
    76 			 * @param {Object} request  The request data used to create the password.
       
    77 			 */
       
    78 			wp.hooks.doAction( 'wp_application_passwords_created_password', response, request );
       
    79 		} ).fail( handleErrorResponse );
       
    80 	} );
       
    81 
       
    82 	$appPassTbody.on( 'click', '.delete', function( e ) {
       
    83 		e.preventDefault();
       
    84 
       
    85 		if ( ! window.confirm( wp.i18n.__( 'Are you sure you want to revoke this password? This action cannot be undone.' ) ) ) {
       
    86 			return;
       
    87 		}
       
    88 
       
    89 		var $submitButton = $( this ),
       
    90 			$tr = $submitButton.closest( 'tr' ),
       
    91 			uuid = $tr.data( 'uuid' );
       
    92 
       
    93 		clearNotices();
       
    94 		$submitButton.prop( 'disabled', true );
       
    95 
       
    96 		wp.apiRequest( {
       
    97 			path: '/wp/v2/users/' + userId + '/application-passwords/' + uuid + '?_locale=user',
       
    98 			method: 'DELETE'
       
    99 		} ).always( function() {
       
   100 			$submitButton.prop( 'disabled', false );
       
   101 		} ).done( function( response ) {
       
   102 			if ( response.deleted ) {
       
   103 				if ( 0 === $tr.siblings().length ) {
       
   104 					$appPassTwrapper.hide();
       
   105 				}
       
   106 				$tr.remove();
       
   107 
       
   108 				addNotice( wp.i18n.__( 'Application password revoked.' ), 'success' ).trigger( 'focus' );
       
   109 			}
       
   110 		} ).fail( handleErrorResponse );
       
   111 	} );
       
   112 
       
   113 	$removeAllBtn.on( 'click', function( e ) {
       
   114 		e.preventDefault();
       
   115 
       
   116 		if ( ! window.confirm( wp.i18n.__( 'Are you sure you want to revoke all passwords? This action cannot be undone.' ) ) ) {
       
   117 			return;
       
   118 		}
       
   119 
       
   120 		var $submitButton = $( this );
       
   121 
       
   122 		clearNotices();
       
   123 		$submitButton.prop( 'disabled', true );
       
   124 
       
   125 		wp.apiRequest( {
       
   126 			path: '/wp/v2/users/' + userId + '/application-passwords?_locale=user',
       
   127 			method: 'DELETE'
       
   128 		} ).always( function() {
       
   129 			$submitButton.prop( 'disabled', false );
       
   130 		} ).done( function( response ) {
       
   131 			if ( response.deleted ) {
       
   132 				$appPassTbody.children().remove();
       
   133 				$appPassSection.children( '.new-application-password' ).remove();
       
   134 				$appPassTwrapper.hide();
       
   135 
       
   136 				addNotice( wp.i18n.__( 'All application passwords revoked.' ), 'success' ).trigger( 'focus' );
       
   137 			}
       
   138 		} ).fail( handleErrorResponse );
       
   139 	} );
       
   140 
       
   141 	$appPassSection.on( 'click', '.notice-dismiss', function( e ) {
       
   142 		e.preventDefault();
       
   143 		var $el = $( this ).parent();
       
   144 		$el.removeAttr( 'role' );
       
   145 		$el.fadeTo( 100, 0, function () {
       
   146 			$el.slideUp( 100, function () {
       
   147 				$el.remove();
       
   148 				$newAppPassField.trigger( 'focus' );
       
   149 			} );
       
   150 		} );
       
   151 	} );
       
   152 
       
   153 	$newAppPassField.on( 'keypress', function ( e ) {
       
   154 		if ( 13 === e.which ) {
       
   155 			e.preventDefault();
       
   156 			$newAppPassButton.trigger( 'click' );
       
   157 		}
       
   158 	} );
       
   159 
       
   160 	// If there are no items, don't display the table yet.  If there are, show it.
       
   161 	if ( 0 === $appPassTbody.children( 'tr' ).not( $appPassTrNoItems ).length ) {
       
   162 		$appPassTwrapper.hide();
       
   163 	}
       
   164 
       
   165 	/**
       
   166 	 * Handles an error response from the REST API.
       
   167 	 *
       
   168 	 * @since 5.6.0
       
   169 	 *
       
   170 	 * @param {jqXHR} xhr The XHR object from the ajax call.
       
   171 	 * @param {string} textStatus The string categorizing the ajax request's status.
       
   172 	 * @param {string} errorThrown The HTTP status error text.
       
   173 	 */
       
   174 	function handleErrorResponse( xhr, textStatus, errorThrown ) {
       
   175 		var errorMessage = errorThrown;
       
   176 
       
   177 		if ( xhr.responseJSON && xhr.responseJSON.message ) {
       
   178 			errorMessage = xhr.responseJSON.message;
       
   179 		}
       
   180 
       
   181 		addNotice( errorMessage, 'error' );
       
   182 	}
       
   183 
       
   184 	/**
       
   185 	 * Displays a message in the Application Passwords section.
       
   186 	 *
       
   187 	 * @since 5.6.0
       
   188 	 *
       
   189 	 * @param {string} message The message to display.
       
   190 	 * @param {string} type    The notice type. Either 'success' or 'error'.
       
   191 	 * @returns {jQuery} The notice element.
       
   192 	 */
       
   193 	function addNotice( message, type ) {
       
   194 		var $notice = $( '<div></div>' )
       
   195 			.attr( 'role', 'alert' )
       
   196 			.attr( 'tabindex', '-1' )
       
   197 			.addClass( 'is-dismissible notice notice-' + type )
       
   198 			.append( $( '<p></p>' ).text( message ) )
       
   199 			.append(
       
   200 				$( '<button></button>' )
       
   201 					.attr( 'type', 'button' )
       
   202 					.addClass( 'notice-dismiss' )
       
   203 					.append( $( '<span></span>' ).addClass( 'screen-reader-text' ).text( wp.i18n.__( 'Dismiss this notice.' ) ) )
       
   204 			);
       
   205 
       
   206 		$newAppPassForm.after( $notice );
       
   207 
       
   208 		return $notice;
       
   209 	}
       
   210 
       
   211 	/**
       
   212 	 * Clears notice messages from the Application Passwords section.
       
   213 	 *
       
   214 	 * @since 5.6.0
       
   215 	 */
       
   216 	function clearNotices() {
       
   217 		$( '.notice', $appPassSection ).remove();
       
   218 	}
       
   219 }( jQuery ) );