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' ).attr( 'tabindex', '-1' ).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 ) );
220